Showing Plotly Graphs generated by CSV agent by Langchain inside Streamlit UI

[Msp_raja]

Hi,
I am using the Langchain CSV agent tool and initialising it with ZERO_SHOT_REACT_DESCRIPTION
like below

tools = [
    Tool(
        name = "ask_bot",
        func=ask_bot,
        description="Answer general financial Domain questions with your knowledge base, just answer the question directly."
    
   ),
    
    Tool(
        name = "csv_agent",
        func=csv_agent,
        description="call this for all visualisation and dataframe related queries, and don't use action, action input template for this, just use the tool as it is"
    
    )
]
agent = initialize_agent(tools,model,agent=AgentType.ZERO_SHOT_REACT_DESCRIPTION,verbose = True,handle_parsing_errors=True)
and created a streamlit chat ui with callbackhandler

if "messages" not in st.session_state:
    st.session_state["messages"] = [{"role": "assistant", "content": "How can I help you?"}]
for msg in st.session_state.messages:
    st.chat_message(msg["role"]).write(msg["content"])

if prompt := st.chat_input(placeholder="Define the Fund Prospectus??"):
    st.session_state.messages.append({"role": "user", "content": prompt})
    st.chat_message("user").write(prompt)
    agent = initialize_agent(tools,model,agent=AgentType.ZERO_SHOT_REACT_DESCRIPTION,verbose = True,handle_parsing_errors=True)


    with st.chat_message("assistant"):
        st_callback = StreamlitCallbackHandler(st.container(),expand_new_thoughts=False)
        response = agent.run(prompt, callbacks=[st_callback])
        st.session_state.messages.append({"role": "assistant", "content": response})
        st.write(response)

My question is about how can i render a plotly graph generated by csv agent inside streamlit UI, right now the plot is creating but displayed in other tab, but i wanted it to be displayed inside streamlit UI seamlessly!
Any idea how to solve that?

[Charly_Wargnier]

Hi @Msp_raja, and welcome to our forums!

If you’re using Plotly in combination with Streamlit, you can utilize the st.plotly_chart function, designed specifically for displaying Plotly graphs in the Streamlit UI.

There are several Langchain apps available online. Would you mind sharing either the complete code or the corresponding GitHub repository? This way, we can offer more specific advice.

Thanks,
Charly

[Shounak_Daptardar]

I am facing the exact same problem I want to display the plot within my chat app instead of showing the plot it says “A histogram of the year column is plotted.” it isn’t showing the plot and if I use st.pyplot I can’t use it in my chat bot so I have to stick to st.write(response) can you please help me with this.

[Charly_Wargnier]

Hi @Shounak_Daptardar,

Similarly to my above answer, if you could share the code (and the accompanying error log traces if needed), it would help us diagnose the issue

Best wishes,
Charly.

[Shounak_Daptardar]

Hi Charly, Thank You for your reply.

This the output I get when I enter the question I actually want a histogram to be shown here.

And this is what happens in my terminal when the chain is executed.

st.set_page_config(page_title="Talk with CSV")
st.header("Talk with CSV 🤖")

if "messages" not in st.session_state:
    st.session_state.messages = []

# Display chat messages from history on app rerun
for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

file = st.file_uploader("Upload a CSV file", type="csv")
# 

if file is not None:
    with st.spinner(text="Loading..."):
        with NamedTemporaryFile(delete=False) as f: # Create temporary file
            f.write(file.getbuffer()) # Save uploaded contents to file
            f_path= f.name
        memory = ConversationBufferMemory(memory_key="chat_history")
        agent = create_csv_agent(
            OpenAI(temperature=0), f.name , verbose=True, agent_type=AgentType.ZERO_SHOT_REACT_DESCRIPTION,
            handle_parsing_errors=True, memory=memory)
    
    st.success('Done!')
    # user_question = st.text_input("Ask a question about your CSV: ")

if prompt := st.chat_input("Ask a question about your CSV: "):
    # st.chat_message("user").write(prompt)
#     # Add user message to chat history
    st.session_state.messages.append({"role": "user", "content": prompt})
#     # Display user message in chat message container
    with st.chat_message("user"):
        st.markdown(prompt)

    with st.chat_message("assistant"):
        st_callback = StreamlitCallbackHandler(st.container())
        response = agent.run(prompt, callbacks=[st_callback])
        st.session_state.messages.append({"role": "assistant", "content": response})
        st.write(response)

And this is how the output is when I try in a ipynb notebook which is what i want in my chat window.

[al-yakubovich]

@Charly_Wargnier any ideas how to fix it? I also unable to display plots