Containers, Fragments and chat input: Cannot update outside container exception

Using Streamlit
, , ,
1

I was following the instructions given below to create a fragment that inserts a chat_box using a container defined outside.

It fails with the exception: StreamlitAPIException: Fragments cannot write to elements outside of their container.

When I replaced the chat_input with a simple st.write, it works.

:
2024-09-25 12:18:17.204 Uncaught app exception
Traceback (most recent call last):
File “/Library/Frameworks/Python.framework/Versions/3.12/lib/python3.12/site-packages/streamlit/runtime/fragment.py”, line 248, in wrapped_fragment
result = non_optional_func(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File “/Users/sgutala/social-stories-temp/app/chat_imagined.py”, line 21, in process_text_gen_ai
st.chat_input(f"Add any additional instructions to refine the text generated.")
File “/Library/Frameworks/Python.framework/Versions/3.12/lib/python3.12/site-packages/streamlit/runtime/metrics_util.py”, line 410, in wrapped_func
result = non_optional_func(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File “/Library/Frameworks/Python.framework/Versions/3.12/lib/python3.12/site-packages/streamlit/elements/widgets/chat.py”, line 317, in chat_input
check_widget_policies(
File “/Library/Frameworks/Python.framework/Versions/3.12/lib/python3.12/site-packages/streamlit/elements/lib/policies.py”, line 177, in check_widget_policies
check_fragment_path_policy(dg)
File “/Library/Frameworks/Python.framework/Versions/3.12/lib/python3.12/site-packages/streamlit/elements/lib/policies.py”, line 164, in check_fragment_path_policy
raise StreamlitAPIException(_fragment_writes_widget_to_outside_error)
streamlit.errors.StreamlitAPIException: Fragments cannot write to elements outside of their container.

There is a single prompt window and it should trigger two separate chat bots to produce output. one generates text and another one an image.

Below is my sample code.
@st.fragment
def process_image_gen_ai(image_gen_ai: st.container):
with image_gen_ai.container():
st.chat_input(f"Add any additional instructions to refine the image generated.",
key=“image_refinement_input”, on_submit=image_refinement_submitted)
// processing code

narrative, text_gen_ai, image_gen_ai = st.columns([2, 4, 3], gap=“small”)
narrative, text_gen_ai, image_gen_ai = st.columns([2, 4, 3], gap=“small”)
with narrative:
narrative_form = st.form(“Narrative Submission”)
with narrative_form:
narrative = st.text_area(“Please enter a narrative”)
narrative_form.form_submit_button(“Submit”, on_click=narrative_submitted,
kwargs={“narrative”:narrative})
process_image_gen_ai(image_gen_ai.empty())

2

When fragments rerun, everything in the main body of the fragment gets redrawn (just like with a normal script rerun), but everything written to outside containers is additively drawn. For this reason, fragments can’t write widgets to outside containers. When you design a fragment, all widgets within that fragment should be within the main body of the fragment.

In the example linked above, st.empty is used to force those outside containers to not accumulate more and more cats and pawprints when rerunning the fragment.