Hello all, I am having some trouble with deploying my streamlit app to the cloud and having the Chat avatars show up. Right now I have it working 100% on my local machine, but when I deploy it the only thing that does not work is the avatar images, I get a broken image link for the user and the bot images.
I can display these images just fine using st.image both on my local machine and the cloud. On my local machine I can display them just fine using the avatar = bot_image - but the avatar option does not work on the cloud.
The images are directly loaded into the same location on GitHub as my code. This is confirmed by the fact that the st.image works. What am I missing? Why can’t I utilize my avatar images on the cloud but I can on my local machine?
According to the Documentation, the avatar parameter accepts the URL to the image.
I’ve did a test using various approaches on the Streamlit Community Cloud and the following works for displaying a custom avatar image:
with st.chat_message('assistant', avatar='https://raw.githubusercontent.com/dataprofessor/streamlit-chat-avatar/master/bot-icon.png'):
st.write('Hello world!')
Here’s the code to my test and the working solution was option 1 using the full URL path to the image:
import streamlit as st
from PIL import Image
st.info('Default')
with st.chat_message('assistant'):
st.write('Hello world!')
st.warning('1. URL full path')
with st.chat_message('assistant', avatar='https://raw.githubusercontent.com/dataprofessor/streamlit-chat-avatar/master/bot-icon.png'):
st.write('Hello world!')
st.warning('2. URL relative path')
with st.chat_message('assistant', avatar='bot-icon.png'):
st.write('Hello world!')
st.warning('3. URL relative path 2')
with st.chat_message('assistant', avatar='./bot-icon.png'):
st.write('Hello world!')
st.warning('4. URL relative path with Image.open')
with st.chat_message('assistant', avatar=Image.open('bot-icon.png')):
st.write('Hello world!')
# Icon Credit
# https://www.flaticon.com/free-icon/bot_4712027
Trying to implement this now, will report back when I either fix or don’t fix it. What you display for everything but Option 1 is what I’m experiencing. Thanks!
So I’ve tried and failed too many times now. How did you store your image in option 1? Your link to the image is much different than where Ii’ve stored mine (https://github.com/1901Analytics/GeneralGPT/blob/main/bot.png). Any thoughts? Thankyou!
I had the same avatar issue as you. Both at first when deploying my app (it was working locally but not on the cloud), and then using Chanin’s fix. It still wouldn’t work.
But by paying more attention to the link of my image, I managed to make it work.
The trick is indeed to use the url of the image hosted on github as the source of the avatar, but you have to use the raw.githubusercontent.com url, and not the github.com url!
You also have to make sure your repo is public! If not, it can’t access the image url you provide and won’t work. Either make your whole repo public, or keep your main repo private and create a second public repo with only those images (that’s what I did).
