mind map add

app.py

@@ -3014,12 +3014,6 @@ def update_state(content_subject, content_grade, trascript, key_moments, questio
 HEAD = """
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style>
-    svg.markmap {{
-        width: 100%;
-        height: 100vh;
-    }}
-    </style>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 
     <script>
@@ -3038,6 +3032,38 @@ HEAD = """
     </script>
 """
 
+JS = """
+function createGradioAnimation() {
+    const mind_map_tab_button = document.querySelector("#mind_map_tab-button");
+        
+    if (mind_map_tab_button) {
+        mind_map_tab_button.addEventListener('click', function() {
+            const mind_map_markdown = document.querySelector("#mind_map_markdown > label > textarea");
+            if (mind_map_markdown) {
+            // 当按钮被点击时，打印当前的textarea的值
+            console.log('Value changed to: ' + mind_map_markdown.value);
+            markmap.autoLoader.renderAll();
+            }
+        });
+    }
+
+    return 'Animation created';
+}
+"""
+
+CSS = """
+    #mind_map_tab {
+        height: 500px;
+    }
+    .markmap {
+        position: relative;
+    }
+    .markmap > svg {
+        width: 100%;
+        height: 600px;
+    }
+"""
+
 streaming_chat_greeting = """
 Hi，我是【飛特音速】，說話比較快，但有什麼問題都可以問我喔！ \n
 🚀 我沒有預設問題、也沒有語音輸入，適合快問快答的你 \n
@@ -3052,7 +3078,7 @@ streaming_ai_chatbot = gr.Chatbot(
     show_copy_button=True,
 )
 
-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.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, js=JS, css=CSS) as demo:
     with gr.Row() as admin:
         password = gr.Textbox(label="Password", type="password", elem_id="password_input", visible=True)
         youtube_link = gr.Textbox(label="Enter YouTube Link", elem_id="youtube_link_input", visible=True)
@@ -3228,6 +3254,9 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
     with gr.Tab("重點摘要"):
         with gr.Row():
             df_summarise = gr.Markdown(show_label=False, latex_delimiters = [{"left": "$", "right": "$", "display": False}])
+    with gr.Tab("心智圖",elem_id="mind_map_tab"):
+        with gr.Row():
+            mind_map_html = gr.HTML()
     with gr.Tab("關鍵時刻"):
         with gr.Row():
             key_moments_html = gr.HTML(value="")
@@ -3404,8 +3433,7 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
         with gr.Tab("markdown"):
             gr.Markdown("## 請複製以下 markdown 並貼到你的心智圖工具中，建議使用：https://markmap.js.org/repl")
             mind_map = gr.Textbox(container=True, show_copy_button=True, lines=40, elem_id="mind_map_markdown") 
-        with gr.Tab("心智圖",elem_id="mind_map_tab"):
-            mind_map_html = gr.HTML()
+        
        
     # OPEN AI CHATBOT SELECT
     chatbot_select_outputs=[