Streamlit app: How I see my plots in streamlit interface. At present plot is creating as a temp_chat.png file.

[mraguth]

I am using pandasai 1.4.10 and asking questions via streamilt interface. While I am asking plots, streamlit showing as 'None'. However my backend has an error "C:\Users\a024377\AppData\Roaming\Python\Python311\site-packages\pandasai\responses\response_parser.py:107: UserWarning: Matplotlib is currently using agg, which is a non-GUI backend, so cannot show the figure.
plt.show(block=is_running_in_console()). {'type': 'plot', 'value': 'C:/Users/GIT/PrimeTime_Ready/PandasAI/temp_chart.png'}" I have png file created backend. However, I like to see that plot in streamlit. Please help.

[ArslanSaleem]

Hi @mraguth , check streamlit example https://github.com/gventuri/pandas-ai/blob/main/examples/using_streamlit.py

[mraguth]

I added "from pandasai.responses.streamlit_response import StreamlitResponse" at the top and ran my program. But it is running forever.
How I change my code after adding the above method?

df = SmartDataframe(pd.DataFrame(sample_data), config={"llm": llm})

# Streamlit app
st.title("Services Data Chat")


user_question = st.text_area("Ask a question:", height=100)  # Adjust the height as needed

show_code = st.checkbox("Show Generated Python Code-Check if you are Developer")

if st.button("Chat"):
    # Chat with Smart DataFrame
    if user_question:
        df_response = df.chat(user_question)  # Store the response in a variable
        st.write(df_response)  # Display the chat response

        # Generate code using last_code_generated
        generated_code = df.last_code_generated

         # Display the generated code if the checkbox is checked
        if show_code:
            #st.subheader("Generated Code (Code Execution Page):")
            st.code(generated_code, language='python')  # Specify the language for syntax highlighting

[kushagra1331]

@ArslanSaleem using the example, how are we passing the final response to streamlit?? St.write st.pyplot does not work

[rshoaib1190]

Is there a solution for this? I get png as an output, however I would want to save it as a plot and then open it in my streamlit app.. Any hints?

[gventuri]

@rshoaib1190 I guess if you get the path, you can use st.image( path )

[hanucherukuri]

Hi @gventuri

I do have the same issue, plot is generated and saved as a temp_chart.png.
for displaying the chart in the streamlit, the code generated by LLM failing and iterating till last execution.
so the chart generated or response is showing as Value must match with type plot a string object
By the way I am using StreamlitResponse as response parser

logger's

The user asked the following question:

QUERY

How does the distribution of item visibility vary across different outlet types?

You generated this python code:
df = pd.concat(dfs)
visibility_by_outlet_type = df.groupby('Outlet_Type')['Item_Visibility'].mean()
plt.figure(figsize=(10, 6))
visibility_by_outlet_type.plot(kind='bar', color='skyblue')
plt.title('Distribution of Item Visibility Across Different Outlet Types')
plt.xlabel('Outlet Type')
plt.ylabel('Mean Item Visibility')
plt.xticks(rotation=45)
plt.tight_layout()
plt.savefig('C:/Users/xx/OneDrive - xx xx/Desktop/QuickBooks/qbo_plot/exports/charts/temp_chart.png')
result = {'type': 'plot', 'value': 'C:/Users/xxx/OneDrive - xx xx/Desktop/QuickBooks/qbo_plot/exports/charts/temp_chart.png'}

It fails with the following error:
Traceback (most recent call last):
File "C:\Users\xx\OneDrive - xx xx\Desktop\QuickBooks\qbo_plot\myenv\lib\site-packages\pandasai\pipelines\chat\code_execution.py", line 98, in execute
raise InvalidOutputValueMismatch(
pandasai.exceptions.InvalidOutputValueMismatch: Value must match with type plot

Fix the python code above and return the new python code:
INFO:pandasai.helpers.logger:Executing Step 1: CodeGenerator
INFO:httpx:HTTP Request: POST https://api.openai.com/v1/chat/completions "HTTP/1.1 200 OK"
INFO:pandasai.helpers.logger:Prompt used:

dfs[0]:5681x11
Item_Identifier,Item_Weight,Item_Fat_Content,Item_Visibility,Item_Type,Item_MRP,Outlet_Identifier,Outlet_Establishment_Year,Outlet_Size,Outlet_Location_Type,Outlet_Type
FDA14,8.115,LF,0.058572263,Health and Hygiene,62.6536,OUT010,1987,Small,Tier 2,Supermarket Type1
NCN55,,Regular,0.114571006,Snack Foods,208.7638,OUT019,2002,Medium,Tier 3,Grocery Store
FDQ15,15.6,low fat,0.015434464,Canned,100.5358,OUT045,1985,,Tier 1,Supermarket Type3

The user asked the following question:

QUERY

How does the distribution of item visibility vary across different outlet types?

You generated this python code:
df = pd.concat(dfs)
visibility_by_outlet_type = df.groupby('Outlet_Type')['Item_Visibility'].mean()
plt.figure(figsize=(10, 6))
visibility_by_outlet_type.plot(kind='bar', color='skyblue')
plt.title('Distribution of Item Visibility Across Different Outlet Types')
plt.xlabel('Outlet Type')
plt.ylabel('Mean Item Visibility')
plt.xticks(rotation=45)
plt.tight_layout()
plt.savefig('C:/Users/xxxx/OneDrive - xx xxx/Desktop/QuickBooks/qbo_plot/exports/charts/temp_chart.png')
result = {'type': 'plot', 'value': 'C:/Users/xxx/xx - xxx Ltd/Desktop/QuickBooks/qbo_plot/exports/charts/temp_chart.png'}

It fails with the following error:
Traceback (most recent call last):
File "C:\Users\xx\xx - xx Ltd\Desktop\QuickBooks\qbo_plot\myenv\lib\site-packages\pandasai\pipelines\chat\code_execution.py", line 98, in execute
raise InvalidOutputValueMismatch(
pandasai.exceptions.InvalidOutputValueMismatch: Value must match with type plot

Fix the python code above and return the new python code:

INFO:pandasai.helpers.logger:Code generated:
```
import pandas as pd
import matplotlib.pyplot as plt

df = pd.concat(dfs)
visibility_by_outlet_type = df.groupby('Outlet_Type')['Item_Visibility'].mean()
plt.figure(figsize=(10, 6))
visibility_by_outlet_type.plot(kind='bar', color='skyblue')
plt.title('Distribution of Item Visibility Across Different Outlet Types')
plt.xlabel('Outlet Type')
plt.ylabel('Mean Item Visibility')
plt.xticks(rotation=45)
plt.tight_layout()
plt.show()
```

INFO:pandasai.helpers.logger:Executing Step 2: CodeCleaning
INFO:pandasai.helpers.logger:
Code running:

df = pd.concat(dfs)
visibility_by_outlet_type = df.groupby('Outlet_Type')['Item_Visibility'].mean()
plt.figure(figsize=(10, 6))
visibility_by_outlet_type.plot(kind='bar', color='skyblue')
plt.title('Distribution of Item Visibility Across Different Outlet Types')
plt.xlabel('Outlet Type')
plt.ylabel('Mean Item Visibility')
plt.xticks(rotation=45)
plt.tight_layout()
plt.show()
        ```
ERROR:pandasai.helpers.logger:Failed with error: Traceback (most recent call last):
  File "C:\Users\xx\xx - xx xx\Desktop\QuickBooks\qbo_plot\myenv\lib\site-packages\pandasai\pipelines\chat\code_execution.py", line 98, in execute
    raise InvalidOutputValueMismatch(
pandasai.exceptions.InvalidOutputValueMismatch: Value must match with type plot

[rshoaib1190]

I did a workaround for now.
I check in the directory for all the pngs and then sort them based on the timestamp and then display the latest one using st.image().

import os
import glob

def display_plot(directory):
    png_files = glob.glob(os.path.join(directory, "*.png"))
    png_files.sort(key=os.path.getmtime, reverse=True)

    latest_png = png_files[0]

    st.image(latest_png, caption="Latest Generated Plot", use_column_width=True)

[hanucherukuri]

Cool, thanks even I did the same. But once we the plot got created, should it go for another iteration. I see the algorithm is exceuting till the last iteration.

if os.path.exists("exports\charts\temp_chart.png"):
im = plt.imread("exports\charts\temp_chart.png")
st.image(im)
os.remove("exports\charts\temp_chart.png")
else:
st.write(response)

[muhammadhamzaazhar]

How to make the plot interactive?

[grishasen]

Try using following in the prompt:
When plotting use appropriate Plotly chart, write plot to image file and return path. Display the plot using Streamlit (import streamlit as st; st.plotly_chart) if returning chart response. Do not run .show() on figure. Use pio.write_image to save image to file.

With OpenAI extension (does not work with LiteLLM - need investigation) it generates the following code:

df_top_products = execute_sql_query(sql_query)
fig = px.bar(df_top_products, x='Product', y='conversion_rate', title='Top 5 Products by Conversion Rate', labels={'conversion_rate': 'Conversion Rate', 'Product': 'Product'}, text=df_top_products['conversion_rate'].apply(lambda x: f'{x:.2%}'))
fig.update_traces(textposition='outside')
fig.update_layout(yaxis_tickformat='.2%')

plot_path = 'exports/charts/temp_chart_3b6149e0-1546-4615-ab4d-ef694ad72663.png'
pio.write_image(fig, plot_path)
st.plotly_chart(fig)

result = {'type': 'plot', 'value': plot_path}