Add bar chart to session state

Using Streamlit
,
1

Hi

I am using the ChatGPT-like clone example in Build a basic LLM chat app - Streamlit Docs and i want to add a bar chart to the chatbot

I can draw it in the chat using st.bar_chart([1,5,3,2,7]), but it is not added to the session state list, therefore, when i write a new message, this graph disappears

How should i write a bar chart to the session state? I have tried st.session_state[“messages”].append(st.bar_chart([1,5,3,2,7])), but it does not work

Thanks

2

To include a bar chart in the chat interface, you’ll need to add a separate field, such as 'bar_chart', in your message. Then, use an if statement to check if that field exists and render the chart accordingly.

if 'messages' not in st.session_state:
    st.session_state.messages = [
        {'role': 'assistant', 'content': 'Hello, human!', 'bar_chart': np.random.randn(30, 3)}
    ]

for message in st.session_state.messages:
    if message['role'] != 'system':  # Skip system messages
        with st.chat_message(message['role']):
            st.markdown(message['content'])
            
            # Check if the message includes a bar chart
            if 'bar_chart' in message:
                st.bar_chart(message['bar_chart'])
1 Like
3

Thanks. Actually its an altair chat

I am having this error

streamlit.errors.StreamlitAPIException: to_dict() is not a valid Streamlit command.

I have debugged the problem and it seems to be in this sentence st.altair_chart(message[‘altair_chart’])

for message in st.session_state["messages"]:
    with st.chat_message(message["role"]):
        if 'altair_chart' in message:
            st.altair_chart(message['altair_chart'])

This is the data in message[‘altair_chart’]

DeltaGenerator(_provided_cursor=LockedCursor(_parent_path=(2,), _props={'delta_type': 'arrow_vega_lite_chart', 'add_rows_metadata': None}), _parent=DeltaGenerator(_provided_cursor=RunningCursor(_parent_path=(2,), _index=1), _parent=DeltaGenerator(), _block_type='chat_message', _form_data=FormData(form_id='')))

Any idea what might be wrong?

Thanks

4

Apparently you are storing the wrong thing in message['altair_chart'].

5

Ah right, yeah, tried that too. I added to altair chart the numpy object, and now its the stream what fails, the
for chunk in stream:

    stream = ollama.chat(
        model=st.session_state["model"],
        messages=prompt,
        stream=True,
    )
    for chunk in stream:
        yield chunk["message"]["content"]

raise TypeError(f’Object of type {o.class.name} ’
TypeError: Object of type Chart is not JSON serializable

Looks like it is trying to print the chart again?

6

I don’t see anything here suggesting an attempt to print a chart. And it is unclear to me how this snippet is related to an altair chart. Also I don’t understand what you mean by “I added to altair chart the numpy object”. I don’t even know which line of code triggered the error let alone what the call stack is.