def get_mind_map_html(mind_map):

app.py

@@ -349,6 +349,7 @@ def process_youtube_link(link):
     first_text = formatted_transcript[0]['text']
     mind_map_json = get_mind_map(video_id, formatted_simple_transcript)
     mind_map = mind_map_json["mind_map"]
+    mind_map_html = get_mind_map_html(mind_map)
 
     # 确保返回与 UI 组件预期匹配的输出
     return questions[0] if len(questions) > 0 else "", \
@@ -357,6 +358,7 @@ def process_youtube_link(link):
             formatted_transcript_json, \
             summary, \
             mind_map, \
+            mind_map_html, \
             html_content, \
             first_image, \
             first_text,
@@ -458,6 +460,18 @@ def generate_mind_map(df_string):
 
     return mind_map
 
+def get_mind_map_html(mind_map):
+    mind_map.replace("```markdown", "").replace("```", "")
+
+    mind_map_html = f"""
+    <div class="markmap">
+        <script type="text/template">
+            {mind_map}
+        </script>
+    </div>
+    """
+    return mind_map_html
+
 def processed_video_summary_to_json(summary):
     """
         整體格式為：
@@ -797,7 +811,20 @@ def next_slide():
 def get_video_id():
     return VIDEO_ID
 
-with gr.Blocks() as demo:
+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>
+"""
+
+
+with gr.Blocks(head=HEAD) as demo:
     with gr.Row():
         with gr.Column():
             file_upload = gr.File(label="Upload your CSV or Word file", visible=False)
@@ -832,6 +859,7 @@ with gr.Blocks() as demo:
                 btn_create_question = gr.Button("Create Questions")
             with gr.Tab("心智圖"):
                 mind_map = gr.Textbox()
+                mind_map_html = gr.HTML()
 
     send_button.click(
         respond, 
@@ -849,7 +877,22 @@ with gr.Blocks() as demo:
     file_upload.change(process_file, inputs=file_upload, outputs=[btn_1, btn_2, btn_3, df_summarise, df_string_output])
 
     # 当输入 YouTube 链接时触发
-    youtube_link.change(process_youtube_link, inputs=youtube_link, outputs=[btn_1, btn_2, btn_3, df_string_output, df_summarise, mind_map, transcript_html, slide_image, slide_text])
+    youtube_link.change(
+        process_youtube_link, 
+        inputs=youtube_link, 
+        outputs=[
+            btn_1, 
+            btn_2, 
+            btn_3, 
+            df_string_output, 
+            df_summarise, 
+            mind_map, 
+            mind_map_html,
+            transcript_html, 
+            slide_image, 
+            slide_text
+            ]
+        )
 
     # 当输入网页链接时触发
     web_link.change(process_web_link, inputs=web_link, outputs=[btn_1, btn_2, btn_3, df_summarise, df_string_output])