Zenn
Closed2

streamlitでchatのavatar画像を大きくしたい！

Python
Streamlit
Yuki TomitaYuki Tomita

streamlitではchat_message()のavatar引数に画像ファイルを渡すとチャットのアイコンを好きな画像に変更できます。

import streamlit as st

if prompt := st.chat_input("What is up?"):
    with st.chat_message("user", avatar="assets/user_icon.png"):
        st.markdown(prompt)

ただ、通常だとかなり小さくて見づらいので大きくしたい。

  1. pipでinstallしたstreamlitのライブラリを探す(例: /usr/local/lib/python3.10/dist-packages/streamlit)
  2. streamlit/static/static/js/main.{hogehoge}.jsを探す
  3. この中のreturn{width:On,height:Onをreturn{width:"4rem",height:"4rem"に置換する
  4. もしreturn{width:On,height:Onが見つからなかったらreturn{width:"2rem",height:"2rem"を置換する

4remでも画像によっては小さいかな？と思うこともあるので6remとかがいいかもしれません。

streamlitのソース的にはここのAVATAR_SIZEという定数だと思うのでここを書き換えてビルドすればいいのでしょうが。。

Yuki TomitaYuki Tomita

カスタムCSSを使う例はこちら。全ての環境に対応できているかは未確認。。
これで問題なくできたよ！って方がいらっしゃいましたら♡で反応いただけますと参考になります。

import streamlit as st


image_size = 6 # default=2
image_message_gap = 1 # default=0.5

CHAT_MESSAGE_STYLE = f"""<style>
img.eeusbqq0 {{
    width: {image_size}rem !important;
    height: {image_size}rem !important;
}}

.stChatMessage.eeusbqq4 {{
    gap: {image_message_gap}rem !important;
}}
</style>
"""
st.markdown(CHAT_MESSAGE_STYLE, unsafe_allow_html=True)


if prompt := st.chat_input("What is up?"):
    with st.chat_message("user", avatar="assets/user_icon.png"):
        st.markdown(prompt)
このスクラップは3ヶ月前にクローズされました