with gr.Accordion("選擇 AI 小精靈", open=True) as chatbot_select_accordion:

app.py

@@ -2008,6 +2008,21 @@ def create_thread_id():
     print(f"create new thread_id: {thread_id}")
     return thread_id
 
+def chatbot_select(chatbot_name):
+    chatbot_select_accordion_visible = gr.update(open=False)
+    chatbot_open_ai_visible = gr.update(visible=False)
+    chatbot_open_ai_streaming_visible = gr.update(visible=False)
+    chatbot_jutor_visible = gr.update(visible=False)
+
+    if chatbot_name == "chatbot_open_ai":
+        chatbot_open_ai_visible = gr.update(visible=True)
+    elif chatbot_name == "chatbot_open_ai_streaming":
+        chatbot_open_ai_streaming_visible = gr.update(visible=True)
+    elif chatbot_name == "chatbot_jutor":
+        chatbot_jutor_visible = gr.update(visible=True)
+        
+    return chatbot_select_accordion_visible, chatbot_open_ai_visible, chatbot_open_ai_streaming_visible, chatbot_jutor_visible
+
 # --- Slide mode ---
 def update_slide(direction):
     global TRANSCRIPTS
@@ -2056,6 +2071,10 @@ def init_params(text, request: gr.Request):
         lesson_plan_accordion = gr.update(visible=True)
         exit_ticket_accordion = gr.update(visible=True)
 
+        chatbot_open_ai = gr.update(visible=False)
+        chatbot_open_ai_streaming = gr.update(visible=False)
+        chatbot_jutor = gr.update(visible=False)
+
         # if youtube_link in query_params
         if "youtube_id" in request.query_params:
             youtube_id = request.query_params["youtube_id"]
@@ -2076,7 +2095,8 @@ def init_params(text, request: gr.Request):
 
     return admin, reading_passage_admin, summary_admin, see_detail, \
         worksheet_accordion, lesson_plan_accordion, exit_ticket_accordion, \
-        password_text, youtube_link
+        password_text, youtube_link, \
+        chatbot_open_ai, chatbot_open_ai_streaming, chatbot_jutor
 
 def update_state(content_subject, content_grade, trascript, key_moments, question_1, question_2, question_3):
     # inputs=[content_subject, content_grade, df_string_output],
@@ -2177,50 +2197,48 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
         key_moments_state = gr.State()  # 使用 gr.State 存储 key_moments
         streaming_chat_thread_id_state = gr.State()  # 使用 gr.State 存储 streaming_chat_thread_id
     with gr.Tab("AI小精靈"):
-        with gr.Accordion("選擇 AI 小精靈", open=True):
+        with gr.Accordion("選擇 AI 小精靈", open=True) as chatbot_select_accordion:
             with gr.Row():
-                with gr.Column(scale=1):
+                with gr.Column(scale=1, variant="panel"):
                     chatbot_avatar_url = "https://junyitopicimg.s3.amazonaws.com/s4byy--icon.jpe?v=20200513013523726"
-                    chatbot_description = """Hi，我是你的AI學伴【飛特精靈】，我可以陪你一起學習本次的內容，有什麼問題都可以問我喔！
-                    🤔 如果你不知道怎麼發問，可以點擊左下方的問題一、問題二、問題三，我會幫你生成問題！
-                    🗣️ 也可以點擊右下方用語音輸入，我會幫你轉換成文字，厲害吧！
-                    🔠 或是直接鍵盤輸入你的問題，我會盡力回答你的問題喔！
-                    💤 但我還在成長，體力有限，每一次學習只能回答十個問題，請讓我休息一下再問問題喔！
-                    🦄 如果達到上限，或是遇到精靈很累，請問問其他朋友，像是飛特音速說話的速度比較快，你是否跟得上呢？你也可以和其他精靈互動看看喔！
+                    chatbot_description = """Hi，我是你的AI學伴【飛特精靈】，我可以陪你一起學習本次的內容，有什麼問題都可以問我喔！\n
+                    🤔 如果你不知道怎麼發問，可以點擊左下方的問題一、問題二、問題三，我會幫你生成問題！\n
+                    🗣️ 也可以點擊右下方用語音輸入，我會幫你轉換成文字，厲害吧！\n
+                    🔠 或是直接鍵盤輸入你的問題，我會盡力回答你的問題喔！\n
+                    💤 但我還在成長，體力有限，每一次學習只能回答十個問題，請讓我休息一下再問問題喔！\n
+                    🦄 如果達到上限，或是遇到精靈很累，請問問其他朋友，像是飛特音速說話的速度比較快，你是否跟得上呢？你也可以和其他精靈互動看看喔！\n
                     """
-                    
+                    chatbot_open_ai_name = gr.State("chatbot_open_ai")
                     gr.Image(value=chatbot_avatar_url, height=100, width=100, show_label=False, show_download_button=False)
-                    gr.Button("👆選擇【飛特精靈】", elem_id="chatbot_btn", visible=True, variant="primary")
-                    gr.Textbox(label="Chatbot Description", value=chatbot_description, visible=True)
-                with gr.Column(scale=1):
-                    streaming_chatbot_avatar_url = "https://junyitopicimg.s3.amazonaws.com/s4byy--icon.jpe?v=20200513013523726"
-                    streaming_chatbot_description = """Hi，我是你的AI學伴【飛特精靈】，我可以陪你一起學習本次的內容，有什麼問題都可以問我喔！
-                    🤔 如果你不知道怎麼發問，可以點擊左下方的問題一、問題二、問題三，我會幫你生成問題！
-                    🗣️ 也可以點擊右下方用語音輸入，我會幫你轉換成文字，厲害吧！
-                    🔠 或是直接鍵盤輸入你的問題，我會盡力回答你的問題喔！
-                    💤 但我還在成長，體力有限，每一次學習只能回答十個問題，請讓我休息一下再問問題喔！
-                    🦄 如果達到上限，或是遇到精靈很累，請問問其他朋友，像是飛特音速說話的速度比較快，你是否跟得上呢？你也可以和其他精靈互動看看喔！
+                    chatbot_open_ai_select_btn = gr.Button("👆選擇【飛特精靈】", elem_id="chatbot_btn", visible=True, variant="primary")
+                    gr.Markdown(value=chatbot_description, visible=True)
+                with gr.Column(scale=1, variant="panel"):
+                    streaming_chatbot_avatar_url = "https://storage.googleapis.com/wpassets.junyiacademy.org/1/2020/11/1-%E6%98%9F%E7%A9%BA%E9%A0%AD%E8%B2%BC-%E5%A4%AA%E7%A9%BA%E7%8B%90%E7%8B%B8%E8%B2%93-150x150.png"
+                    streaming_chatbot_description = """Hi，我是【飛特音速】， \n
+                    說話比較快，但有什麼問題都可以問我喔！ \n
+                    🚀 我沒有預設問題、也沒有語音輸入，適合快問快答 \n
+                    🔠 擅長用文字表達的你，可以用鍵盤輸入你的問題，我會盡力回答你的問題喔！\n
+                    💤 我還在成長，體力有限，每一次學習只能回答十個問題，請讓我休息一下再問問題喔！
                     """
+                    chatbot_open_ai_streaming_name = gr.State("chatbot_open_ai_streaming")
                     gr.Image(value=streaming_chatbot_avatar_url, height=100, width=100, show_label=False, show_download_button=False)
-                    gr.Button("👆選擇【飛特音速】", elem_id="streaming_chatbot_btn", visible=True, variant="primary")
-                    gr.Textbox(label="Chatbot Description", value=streaming_chatbot_description, visible=True)
-                with gr.Column(scale=1):
-                    jutor_chatbot_avatar_url = "https://junyitopicimg.s3.amazonaws.com/s4byy--icon.jpe?v=20200513013523726"
-                    jutor_chatbot_description = """Hi，我是你的AI學伴【飛特精靈】，我可以陪你一起學習本次的內容，有什麼問題都可以問我喔！
-                    🤔 如果你不知道怎麼發問，可以點擊左下方的問題一、問題二、問題三，我會幫你生成問題！
-                    🗣️ 也可以點擊右下方用語音輸入，我會幫你轉換成文字，厲害吧！
-                    🔠 或是直接鍵盤輸入你的問題，我會盡力回答你的問題喔！
-                    💤 但我還在成長，體力有限，每一次學習只能回答十個問題，請讓我休息一下再問問題喔！
-                    🦄 如果達到上限，或是遇到精靈很累，請問問其他朋友，像是飛特音速說話的速度比較快，你是否跟得上呢？你也可以和其他精靈互動看看喔！
+                    chatbot_open_ai_streaming_select_btn = gr.Button("👆選擇【飛特音速】", elem_id="streaming_chatbot_btn", visible=True, variant="primary")
+                    gr.Markdown(value=streaming_chatbot_description, visible=True)
+                with gr.Column(scale=1, variant="panel"):
+                    jutor_chatbot_avatar_url = "https://storage.googleapis.com/wpassets.junyiacademy.org/1/2019/11/%E5%9B%9B%E6%A0%BC%E6%95%85%E4%BA%8B-04.jpg"
+                    jutor_chatbot_description = """Hi，我是飛特精靈的朋友們【梨梨、麥麥、狐狸貓】，也可以陪你一起學習本次的內容，有什麼問題都可以問我喔！\n
+                    🤔 如果你不知道怎麼發問，可以點擊左下方的問題一、問題二、問題三，我會幫你生成問題！\n
+                    🗣️ 也可以點擊右下方用語音輸入，我會幫你轉換成文字，厲害吧！\n
+                    🔠 或是直接鍵盤輸入你的問題，我會盡力回答你的問題喔！\n
+                    💤 精靈們體力都有限，每一次學習只能回答十個問題，請讓我休息一下再問問題喔！\n
                     """
+                    chatbot_jutor_name = gr.State("chatbot_jutor")
                     gr.Image(value=jutor_chatbot_avatar_url, height=100, width=100, show_label=False, show_download_button=False)
-                    gr.Button("👆選擇【梨梨】", elem_id="jutor_chatbot_btn", visible=True, variant="primary")
-                    gr.Textbox(label="Chatbot Description", value=jutor_chatbot_description, visible=True)
+                    chatbot_jutor_select_btn = gr.Button("👆選擇【梨梨、麥麥、狐狸貓】", elem_id="jutor_chatbot_btn", visible=True, variant="primary")
+                    gr.Markdown(value=jutor_chatbot_description, visible=True)
                     
-
-
-        with gr.Row():
-            with gr.Tab("飛特精靈"):
+        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}]
@@ -2234,9 +2252,11 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
                     🦄 如果達到上限，或是遇到精靈很累，請問問其他朋友，像是飛特音速說話的速度比較快，你是否跟得上呢？你也可以和其他精靈互動看看喔！
                     """,
                 ]]
-                chatbot = gr.Chatbot(avatar_images=[user_avatar, bot_avatar], label="OPEN AI", show_share_button=False, likeable=True, show_label=False, latex_delimiters=latex_delimiters,value=chatbot_greeting)
-                thread_id = gr.Textbox(label="thread_id", visible=False)
-                socratic_mode_btn = gr.Checkbox(label="蘇格拉底家教助理模式", value=True, visible=False)
+                with gr.Row():
+                    chatbot = gr.Chatbot(avatar_images=[user_avatar, bot_avatar], label="OPEN AI", show_share_button=False, likeable=True, show_label=False, latex_delimiters=latex_delimiters,value=chatbot_greeting)
+                with gr.Row():
+                    thread_id = gr.Textbox(label="thread_id", visible=False)
+                    socratic_mode_btn = gr.Checkbox(label="蘇格拉底家教助理模式", value=True, visible=False)
                 with gr.Row():
                     with gr.Accordion("你也有類似的問題想問嗎？", open=False) as ask_questions_accordion:
                         btn_1 = gr.Button("問題一")
@@ -2248,7 +2268,10 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
                 with gr.Row():
                     msg = gr.Textbox(label="訊息",scale=3)
                     send_button = gr.Button("送出", variant="primary", scale=1)
-            with gr.Tab("飛特音速"):
+
+
+        with gr.Row("飛特音速") as chatbot_open_ai_streaming:
+            with gr.Column():
                 streaming_chat_greeting = """
                 Hi，我是【飛特音速】，說話比較快，但有什麼問題都可以問我喔！ \n
                     🚀 我沒有預設問題、也沒有語音輸入，適合快問快答的你 \n
@@ -2265,8 +2288,9 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
                     clear_btn="🗑️ 清除全部",
                     stop_btn=None,
                     description=streaming_chat_greeting
-                )        
-            with gr.Tab("其他精靈"):
+                )
+        with gr.Row("其他精靈") as chatbot_jutor:   
+            with gr.Column():
                 ai_chatbot_greeting = [[
                     None,
                     """Hi，我是飛特精靈的朋友們【梨梨、麥麥、狐狸貓】，也可以陪你一起學習本次的內容，有什麼問題都可以問我喔！
@@ -2447,6 +2471,23 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
             mind_map_html = gr.HTML()
        
     # --- Event ---
+    # CHATBOT SELECT
+    chatbot_open_ai_select_btn.click(
+        chatbot_select,
+        inputs=[chatbot_open_ai_name],
+        outputs=[chatbot_select_accordion, chatbot_open_ai, chatbot_open_ai_streaming, chatbot_jutor]
+    )
+    chatbot_open_ai_streaming_select_btn.click(
+        chatbot_select,
+        inputs=[chatbot_open_ai_streaming_name],
+        outputs=[chatbot_select_accordion, chatbot_open_ai, chatbot_open_ai_streaming, chatbot_jutor]
+    )
+    chatbot_jutor_select_btn.click(
+        chatbot_select,
+        inputs=[chatbot_jutor_name],
+        outputs=[chatbot_select_accordion, chatbot_open_ai, chatbot_open_ai_streaming, chatbot_jutor]
+    )
+
     # OPENAI ASSISTANT CHATBOT 模式
     send_button.click(
         chat_with_opan_ai_assistant,
@@ -2777,7 +2818,10 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
         lesson_plan_accordion, 
         exit_ticket_accordion,
         password, 
-        youtube_link
+        youtube_link,
+        chatbot_open_ai,
+        chatbot_open_ai_streaming,
+        chatbot_jutor
     ]
     demo.load(
         init_params,