with gr.Tab("飛特音速版"):

app.py

@@ -635,6 +635,7 @@ def process_youtube_link(password, link):
         formatted_transcript_json, \
         summary, \
         key_moments_html, \
+        key_moments, \
         mind_map, \
         mind_map_html, \
         html_content, \
@@ -1766,6 +1767,104 @@ def poll_run_status(run_id, thread_id, timeout=600, poll_interval=5):
     
     return run.status
 
+def streaming_chat_with_open_ai(user_message, chat_history, password, thread_id, trascript, content_subject, content_grade):
+    verify_password(password)
+
+    print("===streaming_chat_with_open_ai===")
+    print(thread_id)
+    
+    # 先計算 user_message 是否超過 500 個字
+    if len(user_message) > 1500:
+        error_msg = "你的訊息太長了，請縮短訊息長度至五百字以內"
+        raise gr.Error(error_msg)
+    
+    # 如果 chat_history 超過 10 則訊息，直接 return "對話超過上限"
+    if chat_history is not None and len(chat_history) > 10:
+        error_msg = "此次對話超過上限"
+        raise gr.Error(error_msg)
+
+    # fake data
+    socratic_mode = True
+
+    try:
+        assistant_id = "asst_kmvZLNkDUYaNkMNtZEAYxyPq"
+        client = OPEN_AI_CLIENT
+        # 直接安排逐字稿資料 in instructions
+        trascript_json = json.loads(trascript)
+        # 移除 embed_url, screenshot_path
+        for entry in trascript_json:
+            entry.pop('embed_url', None)
+            entry.pop('screenshot_path', None)
+        trascript_text = json.dumps(trascript_json, ensure_ascii=False, indent=2)
+        # trascript_text 移除 \n, 空白
+        trascript_text = trascript_text.replace("\n", "").replace(" ", "")
+
+        instructions = f"""
+            科目：{content_subject}
+            年級：{content_grade}
+            逐字稿資料：{trascript_text}
+            -------------------------------------
+            你是一個專業的{content_subject}老師， user 為{content_grade}的學生
+            socratic_mode = {socratic_mode}
+            if socratic_mode is True，
+            - 請用蘇格拉底式的提問方式，引導學生思考，並且給予學生一些提示
+            - 一次只問一個問題，字數在100字以內
+            - 不要直接給予答案，讓學生自己思考
+            - 但可以給予一些提示跟引導，例如給予影片的時間軸，讓學生自己去找答案
+            
+            if socratic_mode is False，
+            - 直接回答學生問題，字數在100字以內
+
+            rule:
+            - 請一定要用繁體中文回答 zh-TW，並用台灣人的口語表達，回答時不用特別說明這是台灣人的語氣，也不用說這是「台語的說法」
+            - 不用提到「逐字稿」這個詞，用「內容」代替
+            - 如果學生問了一些問題你無法判斷，請告訴學生你無法判斷，並建議學生可以問其他問題
+            - 或者你可以反問學生一些問題，幫助學生更好的理解資料，字數在100字以內
+            - 如果學生的問題與資料文本無關，請告訴學生你「無法回答超出影片範圍的問題」，並告訴他可以怎麼問什麼樣的問題（一個就好）
+            - 只要是參考逐字稿資料，請在回答的最後標註【參考資料：（分）：（秒）】
+            - 回答範圍一定要在逐字稿資料內，不要引用其他資料，請嚴格執行
+            - 並在重複問句後給予學生鼓勵，讓學生有學習的動力
+            - 請用 {content_grade} 的學生能懂的方式回答
+        """
+
+        # 创建线程
+        if not thread_id:
+            thread = client.beta.threads.create()
+            thread_id = thread.id
+            print(f"new thread_id: {thread_id}")
+        else:
+            thread = client.beta.threads.retrieve(thread_id)
+            print(f"old thread_id: {thread_id}")
+        
+        # 向线程添加用户的消息
+        client.beta.threads.messages.create(
+            thread_id=thread.id,
+            role="user",
+            content=user_message + "/n (請一定要用繁體中文回答 zh-TW，並用台灣人的禮貌口語表達，回答時不要特別說明這是台灣人的語氣，不用提到「逐字稿」這個詞，用「內容」代替))，請在回答的最後標註【參考資料：（時）:（分）:（秒）】，（如果是反問學生，就只問一個問題，請幫助學生更好的理解資料，字數在100字以內）"
+        )
+
+        with client.beta.threads.runs.stream(
+            thread_id=thread.id,
+            assistant_id=assistant_id,
+            instructions=instructions,
+        ) as stream:
+            partial_messages = ""
+            for event in stream:
+                if event.data and event.data.object == "thread.message.delta":
+                    message = event.data.delta.content[0].text.value
+                    partial_messages += message
+                    yield partial_messages
+
+    except Exception as e:
+        print(f"Error: {e}")
+        raise gr.Error(f"Error: {e}")
+
+def create_thread_id():
+    thread = OPEN_AI_CLIENT.beta.threads.create()
+    thread_id = thread.id
+    print(f"create new thread_id: {thread_id}")
+    return thread_id
+
 # --- Slide mode ---
 def update_slide(direction):
     global TRANSCRIPTS
@@ -1794,6 +1893,8 @@ def prev_slide():
 def next_slide():
     return update_slide(1)
 
+
+# --- Init params ---
 def init_params(text, request: gr.Request):
     if request:
         print("Request headers dictionary:", request.headers)
@@ -1826,6 +1927,16 @@ def init_params(text, request: gr.Request):
 
     return admin, reading_passage_admin, summary_admin, see_detail, password_text, youtube_link
 
+def update_state(content_subject, content_grade, trascript):
+    # inputs=[content_subject, content_grade, df_string_output],
+    # outputs=[content_subject_state, content_grade_state, trascript_state]
+    content_subject_state = content_subject
+    content_grade_state = content_grade
+    trascript_state = trascript
+    streaming_chat_thread_id_state = create_thread_id()
+
+    return content_subject_state, content_grade_state, trascript_state, streaming_chat_thread_id_state
+
 HEAD = """
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -1890,6 +2001,17 @@ HEAD = """
     </script>
 """
 
+def update_key_moments_section(key_moments):
+    blocks = []
+    for moment in key_moments:
+        with gr.Row() as row:
+            with gr.Column(scale=1):
+                gr.Gallery(images=moment['images'], show_label=False)
+            with gr.Column(scale=2):
+                gr.Textbox(value=moment['text'], show_label=False, interactive=False)
+        blocks.append(row)
+    return blocks
+
 with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, secondary_hue=gr.themes.colors.amber, text_size = gr.themes.sizes.text_lg), head=HEAD) as demo:
     with gr.Row() as admin:
         password = gr.Textbox(label="Password", type="password", elem_id="password_input", visible=True)
@@ -1899,9 +2021,14 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
         web_link = gr.Textbox(label="Enter Web Page Link", visible=False)
         user_data = gr.Textbox(label="User Data", elem_id="user_data_input", visible=True)
         youtube_link_btn = gr.Button("Submit_YouTube_Link", elem_id="youtube_link_btn", visible=True)
+    with gr.Row() as data_state:
+        content_subject_state = gr.State()  # 使用 gr.State 存储 content_subject
+        content_grade_state = gr.State()  # 使用 gr.State 存储 content_grade
+        trascript_state = gr.State()  # 使用 gr.State 存储 trascript
+        streaming_chat_thread_id_state = gr.State()  # 使用 gr.State 存储 streaming_chat_thread_id
     with gr.Tab("AI小精靈"):
         with gr.Row():
-            with gr.Tab("飛特"):
+            with gr.Tab("飛特精靈"):
                 bot_avatar = "https://junyi-avatar.s3.ap-northeast-1.amazonaws.com/live/%20%20foxcat-star-18.png?v=20231113095823614"
                 user_avatar = "https://junyitopicimg.s3.amazonaws.com/s4byy--icon.jpe?v=20200513013523726"
                 latex_delimiters = [{"left": "$", "right": "$", "display": False}]
@@ -1939,6 +2066,17 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
                 ai_chatbot = gr.Chatbot(avatar_images=[bot_avatar, user_avatar], label="ai_chatbot", show_share_button=False, likeable=True, show_label=False)
                 ai_msg = gr.Textbox(label="Message")
                 ai_send_button = gr.Button("Send", variant="primary")    
+            with gr.Tab("飛特音速版"):
+                additional_inputs = [password, streaming_chat_thread_id_state, trascript_state, content_subject_state, content_grade_state]
+                streaming_chat = gr.ChatInterface(
+                    fn=streaming_chat_with_open_ai,
+                    additional_inputs=additional_inputs,
+                    submit_btn="送出",
+                    retry_btn="🔄 重新回答",
+                    undo_btn="⏪ 上一步",
+                    clear_btn="🗑️ 清除全部",
+                    stop_btn="🛑 停止",
+                )
     with gr.Tab("文章模式"):
         with gr.Row() as reading_passage_admin:
             reading_passage_kind = gr.Textbox(value="reading_passage", show_label=False)
@@ -1962,6 +2100,17 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
     with gr.Tab("關鍵時刻"):
         with gr.Row():
             key_moments_html = gr.HTML(value="")
+    with gr.Tab("Mind Map"):
+        key_moments_state = gr.State()
+        update_key_moments_button = gr.Button("更新關鍵時刻")
+        key_moments_section = gr.Blocks()
+
+        update_key_moments_button.click(
+            fn=update_key_moments_section, 
+            inputs=[], 
+            outputs=key_moments_section
+        )
+
     with gr.Tab("教學備課"):
         with gr.Row():
             content_subject = gr.Dropdown(label="選擇主題", choices=["數學", "自然", "國文", "英文", "社會","物理", "化學", "生物", "地理", "歷史", "公民"], value="", visible=False)             
@@ -2136,7 +2285,8 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
     file_upload.change(process_file, inputs=file_upload, outputs=[btn_1, btn_2, btn_3, df_summarise, df_string_output])
 
     # 当输入 YouTube 链接时触发
-    process_youtube_link_output = [
+    process_youtube_link_inputs = [password, youtube_link]
+    process_youtube_link_outputs = [
         video_id,
         btn_1, 
         btn_2, 
@@ -2144,6 +2294,7 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
         df_string_output, 
         df_summarise,
         key_moments_html,
+        key_moments_state,
         mind_map, 
         mind_map_html,
         transcript_html,
@@ -2154,17 +2305,29 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
         content_subject,
         content_grade,
     ]
+    update_state_inputs = [content_subject, content_grade, df_string_output]
+    update_state_outputs = [content_subject_state, content_grade_state, trascript_state, streaming_chat_thread_id_state]
+
     youtube_link.change(
         process_youtube_link, 
-        inputs=[password,youtube_link], 
-        outputs=process_youtube_link_output
+        inputs=process_youtube_link_inputs, 
+        outputs=process_youtube_link_outputs
+    ).then(
+        update_state,
+        inputs=update_state_inputs,
+        outputs=update_state_outputs
     )
-    
+
     youtube_link_btn.click(
         process_youtube_link, 
-        inputs=[password, youtube_link], 
-        outputs=process_youtube_link_output
+        inputs=process_youtube_link_inputs, 
+        outputs=process_youtube_link_outputs
+    ).then(
+        update_state,
+        inputs=update_state_inputs,
+        outputs=update_state_outputs
     )
+    
 
     # 当输入网页链接时触发
     # web_link.change(process_web_link, inputs=web_link, outputs=[btn_1, btn_2, btn_3, df_summarise, df_string_output])

requirements.txt

@@ -1,6 +1,6 @@
-gradio>=4.24.0
+gradio==4.8.0
 pandas
-openai>=1.0.0
+openai>=1.16.2
 requests
 beautifulsoup4
 python-docx