Here is the generic chat interface code that shows the ghosting issue (using Streamlit 1.41):
import openai
import dataiku
import pandas as pd
import streamlit as st
import plotly.express as px
from time import sleep, time
if 'df' not in st.session_state:
data = {"TIME": ["1/1/2024","2/1/2024","3/1/2024","4/1/2024","5/1/2024","6/1/2024","7/1/2024","8/1/2024","9/1/2024","10/1/2024","11/1/2024","12/1/2024"],
"Product_ID":[101,102,103,101,102,104,101,103,104,102,103,104],
"Product_Name":["Apple","Banana","Orange","Apple","Banana","Grapes","Apple","Orange","Grapes","Banana","Orange","Grapes"],
"Quantity_Sold":[50,30,40,60,25,20,55,35,15,20,50,25],
"Price_per_Unit":[1,0.5,0.75,1,0.5,2,1,0.75,2,0.5,0.75,2],
"Total_Sales":[50,15,30,60,12.5,40,55,26.25,30,10,37.5,50]}
df = pd.DataFrame(data)
# Group by Product_Name to get total sales for each product
total_sales_by_product = df.groupby('Product_Name')['Total_Sales'].sum().reset_index()
# Create a bar chart
fig = px.bar(total_sales_by_product, x='Product_Name', y='Total_Sales',
title='Test Plot',
labels={'Total_Sales': 'Total Sales', 'Product_Name': 'Product Name'})
st.session_state['df'] = df
st.session_state['fig'] = fig
# Update layout for better visualization
fig.update_layout(xaxis_title='Product Name', yaxis_title='Total Sales')
st.title("Chat Bot Tester")
if "messages" not in st.session_state:
st.session_state.messages = []
for message in st.session_state.messages:
with st.chat_message(message["role"]):
if message['role'] == 'assistant':
with st.expander('Python Code:'):
st.code(message['content']['code'])
# st.plotly_chart(message['content']['fig'], use_container_width=True, key=message['content']['key'])
st.dataframe(message['content']['df'], use_container_width=True, key=message['content']['key'])
st.markdown(message["content"]['text'])
else:
st.markdown(message["content"]['text'])
if prompt := st.chat_input("What is up?"):
st.session_state.messages.append({"role": "user", "content": {'text': prompt}})
with st.chat_message("user"):
st.markdown(prompt)
with st.chat_message("assistant"):
with st.spinner('Asking GenAI...'):
sleep(2)
response = {'code': 'This is a sample code',
'fig': st.session_state['fig'],
'df': st.session_state['df'],
'text': 'This is a sample text',
'key': time()}
with st.expander('Python Code:'):
st.code(response['code'], language='python', line_numbers=True)
with st.spinner('Processing Answer...'):
sleep(2)
# st.plotly_chart(response['fig'], use_container_width=True, key=response['key'])
st.dataframe(response['df'], use_container_width=True, key=response['key'])
st.markdown(response['text'])
st.session_state.messages.append({"role": "assistant", "content": response})
If you run this code, you can see that the the data frame and text element both have the ghosting, while the plotly_chart doesn’t for some reason - for showing the plot instead of the dataframe, comment the dataframe parts and uncomment the plot parts. Regardless, the same code run in Streamlit version 1.32 doesn’t have any ghosting issues.
I found a way to temporarily fix this in 1.41 by including st.container() into the with statement. However, it is a hack that I believe shouldn’t be necessary. While using st.container, st.dataframe still flickers when a new question is asked (don’t think it flickered before in 1.32). Here is the revised last part of the code with st.container():
with st.chat_message("assistant"), st.container():
with st.spinner('Asking GenAI...'):
sleep(2)
response = {'code': 'This is a sample code',
'fig': st.session_state['fig'],
'df': st.session_state['df'],
'text': 'This is a sample text',
'key': time()}
with st.expander('Python Code:'):
st.code(response['code'], language='python', line_numbers=True)
with st.spinner('Processing Answer...'):
sleep(2)
# st.plotly_chart(response['fig'], use_container_width=True, key=response['key'])
st.dataframe(response['df'], use_container_width=True, key=response['key'])
st.markdown(response['text'])
st.session_state.messages.append({"role": "assistant", "content": response})
