How to display images inline with text in a RAG chatbot?

Using Streamlit
,
1

Hi!

I needed to make a knowledgebase chatbot for our customer service and decided to build it in Streamlit as many other chatbot UI’s I tried didn’t support the inclusion of an existing vector database that I made, rather just integrate with LLM providers.

I built all the required functionalities in Streamlit and it has been great so far. I know Streamlit is not meant to be used in production, but there would barely be more than 50 users in a given day, so I hope it’s fine.

The problem I encountered was that for some reason I can’t get images to display with text as a part of the assistants output message in the chatbot.

I placed all the images in the same directory the streamlit_app.py is in, and wrote the prompt to display the ![alt text](link, in this case ./extracted_images) as I have in my markdown file before i vectorized it.

The images are displayed as broken links, but on inspecting the element I see that the file source was correctly handled.

Does anyone know why images aren’t displayed in that case, and how can I make them appear.

I don’t have the code on me, but I don’t think I’m using anything special except st.write/st.markdown for input.

I would upload the images on our server and made them public, but as those images were made to show examples, I don’t want to make a GDPR violation and display the partners potential information publicly. There are a lot of internal documents and a lot of images and I can’t verify all of them.

Thank you for reading :slight_smile:

2

Streamlit can absolutely be used in production!

When it comes to images, you’ll need to use st.imageto access your images; the client browsers don’t have access to the server’s file system. Streamlit does have static file serving, but it’s not good for dynamically added images, it’s more for images that exist when the server initializes.

Your other might be to display them as B64 encoded data….