lili_avatar_images = gr.State([user_avatar, lili_chatbot_avatar_url])

app.py

@@ -2450,6 +2450,14 @@ def chatbot_select(chatbot_name):
         
     return chatbot_select_accordion_visible, chatbot_open_ai_visible, chatbot_open_ai_streaming_visible, chatbot_jutor_visible, ai_name_update
 
+def update_avatar_images(avatar_images, maimai_chatbot_description_value):
+    value = [[
+        "請問你是誰？",
+        maimai_chatbot_description_value
+    ]]
+    ai_chatbot_update = gr.update(avatar_images=avatar_images, value=value)
+    return ai_chatbot_update
+
 # --- Slide mode ---
 def update_slide(direction):
     global TRANSCRIPTS
@@ -2635,6 +2643,8 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
     with gr.Tab("AI小精靈"):
         with gr.Accordion("選擇 AI 小精靈", open=True) as chatbot_select_accordion:
             with gr.Row():
+                user_avatar = "https://em-content.zobj.net/source/google/263/flushed-face_1f633.png"
+                ai_chatbot_bot_avatar = "https://junyitopicimg.s3.amazonaws.com/s4byy--icon.jpe?v=20200513013523726"
                 with gr.Column(scale=1, variant="panel", visible=False):
                     chatbot_avatar_url = "https://junyitopicimg.s3.amazonaws.com/s4byy--icon.jpe?v=20200513013523726"
                     chatbot_description = """Hi，我是你的AI學伴【飛特精靈】，\n
@@ -2663,20 +2673,22 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
                     gr.Markdown(value=streaming_chatbot_description, visible=True)
                 with gr.Column(scale=1, variant="panel"):
                     foxcat_chatbot_avatar_url = "https://storage.googleapis.com/wpassets.junyiacademy.org/1/2020/06/%E7%A7%91%E5%AD%B8%E5%BE%BD%E7%AB%A0-2-150x150.png"
+                    foxcat_avatar_images = gr.State([user_avatar, foxcat_chatbot_avatar_url])
                     foxcat_chatbot_description = """Hi，我是【狐狸貓】，\n
                     也可以陪你一起學習本次的內容，有什麼問題都可以問我喔！\n
                     🤔 如果你不知道怎麼發問，可以點擊左下方的問題一、問題二、問題三，我會幫你生成問題！\n
                     🗣️ 也可以點擊右下方用語音輸入，我會幫你轉換成文字，厲害吧！\n
                     🔠 或是直接鍵盤輸入你的問題，我會盡力回答你的問題喔！\n
-                    💤 精靈們體力都有限，每一次學習只能回答十個問題，請讓我休息一下再問問題喔！\n
+                    💤 精靈們體力都有限，每一次學習只能回答十個問題，請讓我休息一下再問問題喔！
                     """
                     foxcat_chatbot_name = gr.State("foxcat")
                     gr.Image(value=foxcat_chatbot_avatar_url, height=100, width=100, show_label=False, show_download_button=False)
                     foxcat_chatbot_select_btn = gr.Button("👆選擇【狐狸貓】", visible=True, variant="primary")
-                    gr.Markdown(value=foxcat_chatbot_description, visible=True)
+                    foxcat_chatbot_description_value = gr.Markdown(value=foxcat_chatbot_description, visible=True)
                 # 梨梨
                 with gr.Column(scale=1, variant="panel"): 
                     lili_chatbot_avatar_url = "https://junyitopicimg.s3.amazonaws.com/live/v1283-new-topic-44-icon.png?v=20230529071206714"
+                    lili_avatar_images = gr.State([user_avatar, lili_chatbot_avatar_url])
                     lili_chatbot_description = """你好，我是溫柔的【梨梨】， \n
                         很高興可以在這裡陪伴你學習。如果你有任何疑問，請隨時向我提出哦！ \n
                         🤔 如果你在思考如何提問，可以嘗試點擊下方的「問題一」、「問題二」或「問題三」，我會為你生成一些問題來幫助你啟動思考。 \n
@@ -2687,25 +2699,25 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
                     lili_chatbot_name = gr.State("lili")
                     gr.Image(value=lili_chatbot_avatar_url, height=100, width=100, show_label=False, show_download_button=False)
                     lili_chatbot_select_btn = gr.Button("👆選擇【梨梨】", visible=True, variant="primary")
-                    gr.Markdown(value=lili_chatbot_description, visible=True)
+                    lili_chatbot_description_value = gr.Markdown(value=lili_chatbot_description, visible=True)
                 # 麥麥
                 with gr.Column(scale=1, variant="panel"): 
                     maimai_chatbot_avatar_url = "https://storage.googleapis.com/wpassets.junyiacademy.org/1/2020/07/%E6%80%9D%E8%80%83%E5%8A%9B%E8%B6%85%E4%BA%BA%E5%BE%BD%E7%AB%A0_%E5%B7%A5%E4%BD%9C%E5%8D%80%E5%9F%9F-1-%E8%A4%87%E6%9C%AC-150x150.png"
+                    maimai_avatar_images = gr.State([user_avatar, maimai_chatbot_avatar_url])
                     maimai_chatbot_description = """Hi，我是迷人的【麥麥】，\n
                         我在這裡等���和你一起探索新知，任何疑問都可以向我提出！\n
                         🤔 如果你不知道從哪裡開始，試試左下方的「問題一」、「問題二」、「問題三」，我會為你提供一些啟發思考的問題。\n
                         🗣️ 你也可以利用右下角的語音輸入功能，讓我將你的語音轉成文字，是不是很酷？\n
                         🔠 當然，你也可以直接透過鍵盤向我發問，我會全力以赴來回答你的每一個問題。\n
-                        💤 我們這些精靈也需要休息，每次學習我們只能回答十個問題，當達到上限時，請給我一點時間充電再繼續。\n
+                        💤 我們這些精靈也需要休息，每次學習我們只能回答十個問題，當達到上限時，請給我一點時間充電再繼續。
                     """
                     maimai_chatbot_name = gr.State("maimai")
                     gr.Image(value=maimai_chatbot_avatar_url, height=100, width=100, show_label=False, show_download_button=False)
                     maimai_chatbot_select_btn = gr.Button("👆選擇【麥麥】", visible=True, variant="primary")
-                    gr.Markdown(value=maimai_chatbot_description, visible=True)
+                    maimai_chatbot_description_value = gr.Markdown(value=maimai_chatbot_description, visible=True)
                     
         with gr.Row("飛特精靈") as chatbot_open_ai:
             with gr.Column():
-                user_avatar = "https://em-content.zobj.net/source/google/263/flushed-face_1f633.png"
                 bot_avatar = "https://junyitopicimg.s3.amazonaws.com/s4byy--icon.jpe?v=20200513013523726"
                 latex_delimiters = [{"left": "$", "right": "$", "display": False}]
                 chatbot_greeting = [[
@@ -2764,7 +2776,6 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
                     💤 精靈們體力都有限，每一次學習只能回答十個問題，請讓我休息一下再問問題喔！
                     """,
                 ]]
-                ai_chatbot_bot_avatar = "https://storage.googleapis.com/wpassets.junyiacademy.org/1/2019/11/%E5%9B%9B%E6%A0%BC%E6%95%85%E4%BA%8B-04.jpg"
                 ai_name = gr.Dropdown(
                     label="選擇 AI 助理", 
                     choices=[
@@ -2775,7 +2786,7 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
                     value="foxcat",
                     visible=False
                 )
-                ai_chatbot = gr.Chatbot(avatar_images=[user_avatar, ai_chatbot_bot_avatar], label="ai_chatbot", show_share_button=False, likeable=True, show_label=False, latex_delimiters=latex_delimiters, value=ai_chatbot_greeting)
+                ai_chatbot = gr.Chatbot(label="ai_chatbot", show_share_button=False, likeable=True, show_label=False, latex_delimiters=latex_delimiters, value=ai_chatbot_greeting)
                 ai_chatbot_socratic_mode_btn = gr.Checkbox(label="蘇格拉底家教助理模式", value=True, visible=False)
                 with gr.Row():
                     with gr.Accordion("你也有類似的問題想問嗎？", open=False) as ask_questions_accordion_2:
@@ -2989,16 +3000,28 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
         chatbot_select,
         inputs=[foxcat_chatbot_name],
         outputs=[chatbot_select_accordion, chatbot_open_ai, chatbot_open_ai_streaming, chatbot_jutor, ai_name]
+    ).then(
+        update_avatar_images,
+        inputs=[foxcat_avatar_images, foxcat_chatbot_description_value],
+        outputs=[ai_chatbot]
     )
     lili_chatbot_select_btn.click(
         chatbot_select,
         inputs=[lili_chatbot_name],
         outputs=[chatbot_select_accordion, chatbot_open_ai, chatbot_open_ai_streaming, chatbot_jutor, ai_name]
+    ).then(
+        update_avatar_images,
+        inputs=[lili_avatar_images, lili_chatbot_description_value],
+        outputs=[ai_chatbot]
     )
     maimai_chatbot_select_btn.click(
         chatbot_select,
         inputs=[maimai_chatbot_name],
         outputs=[chatbot_select_accordion, chatbot_open_ai, chatbot_open_ai_streaming, chatbot_jutor, ai_name]
+    ).then(
+        update_avatar_images,
+        inputs=[maimai_avatar_images, maimai_chatbot_description_value],
+        outputs=[ai_chatbot]
     )
 
     # OPENAI ASSISTANT CHATBOT 模式