Streamlit Chat Avatars Not Working on Cloud

[Jeff]

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.

bot_image = Image.open(‘bot.jpg’)
person_image = Image.open(‘happy.jpg’)

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?

[dataprofessor]

Hi @Jeff

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

Here’s the GitHub repo and corresponding demo app

Hope this helps!

Best regards,
Chanin

[Jeff]

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!

[Jeff]

@dataprofessor

'https://raw.githubusercontent.com/dataprofessor/streamlit-chat-avatar/master/bot-icon.png'

Hi Chanin,

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!

[Logan]

Hi Jeff,

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).

For example, instead of using https://github.com/dataprofessor/streamlit-chat-avatar/blob/master/bot-icon.png, you should be using https://raw.githubusercontent.com/dataprofessor/streamlit-chat-avatar/master/bot-icon.png.
How to get that link? Go to where your image is in your github repo, (using the first link starting with github .com), then right-click on the image itself and select Open Image in New Tab. Finally, copy paste the url of the new tab, which should start with raw.githubusercontent .com, and use as the source for your avatar.

It worked for me, let me know if it does for you!

[Jeff]

That works, thanks!