def render_mind_map():

app.py

@@ -3231,6 +3231,7 @@ function createGradioAnimation() {
 
     return 'Animation created';
 }
+
 """
 
 CSS = """
@@ -3437,9 +3438,30 @@ def create_app():
         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"):
+        
+        mind_map_tab = gr.Tab("心智圖", elem_id="mind_map_tab")
+        with mind_map_tab:
             with gr.Row():
                 mind_map_html = gr.HTML()
+
+        def render_mind_map():
+            # 這個函數會返回一個 JavaScript 代碼，該代碼將在前端執行
+            js_code = """
+            function() {
+                if (document.querySelector('.markmap svg') === null) {
+                    console.log('No markmap SVG found, rendering now...');
+                    markmap.autoLoader.renderAll();
+                } else {
+                    console.log('Markmap SVG already exists, skipping render');
+                }
+                return true;  // 可以返回任何值，這裡返回 true 表示操作成功
+            }
+            """
+            return js_code
+
+        mind_map_tab.select(fn=None, inputs=None, outputs=None, js=render_mind_map())
+
+    
         with gr.Tab("關鍵時刻"):
             with gr.Row():
                 key_moments_html = gr.HTML(value="")