1

app.py

@@ -7,6 +7,7 @@ from data_manager import DataManager, data_manager
 from typing import Dict, List, Optional, Tuple, Any
 import json
 import os
+import base64
 
 # ============== 全局状态 ==============
 
@@ -123,6 +124,40 @@ def update_chart_dropdown(source: str, chart_type: str):
     )
 
 
+def create_embedded_html(html_content: str, chart_id: str = "") -> str:
+    """
+    创建嵌入式的 HTML 显示
+    
+    使用 data URI 方式嵌入 HTML 内容到 iframe 中
+    """
+    if not html_content:
+        return f"""
+        <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;
+                    min-height:400px;color:#999;border:2px dashed #ddd;border-radius:12px;background:#fafafa;">
+            <div style="font-size:48px;margin-bottom:16px;">📭</div>
+            <div style="font-size:18px;font-weight:500;">暂无图表内容</div>
+            <div style="font-size:14px;margin-top:8px;">图表 ID: {chart_id or '未知'}</div>
+            <div style="font-size:12px;margin-top:16px;color:#888;">请检查数据集目录中是否存在该图表的 HTML 文件</div>
+        </div>
+        """
+    
+    # 使用 base64 编码 HTML 内容，避免引号转义问题
+    html_bytes = html_content.encode('utf-8')
+    html_base64 = base64.b64encode(html_bytes).decode('utf-8')
+    
+    # 使用 data URI
+    iframe_html = f"""
+    <iframe 
+        src="data:text/html;base64,{html_base64}"
+        style="width:100%;height:500px;border:1px solid #e0e0e0;border-radius:8px;background:#fff;"
+        sandbox="allow-scripts allow-same-origin"
+        loading="lazy"
+    ></iframe>
+    """
+    
+    return iframe_html
+
+
 def load_chart_data(source: str, chart_type: str, chart_id: str, model: str):
     """
     加载图表数据并返回所有 UI 更新
@@ -132,13 +167,14 @@ def load_chart_data(source: str, chart_type: str, chart_id: str, model: str):
     """
     if not all([source, chart_type, chart_id, model]):
         return [
-            "",  # html_display
-            "",  # label_info
+            create_embedded_html(""),  # html_display
+            "### 请在左侧选择图表",  # label_info
             "[]",  # qa_data (JSON string)
             "等待加载数据...",  # status_text
             "请在左侧选择图表",  # progress_text
             "{}",  # current_qa_reviews (JSON string)
-            gr.Radio(choices=[], value=None)  # qa_selector
+            gr.Radio(choices=[], value=None),  # qa_selector
+            ""  # debug_info
         ]
     
     # 更新状态
@@ -149,6 +185,12 @@ def load_chart_data(source: str, chart_type: str, chart_id: str, model: str):
     html_content = chart_data.get('html_content', '')
     label_info = chart_data.get('label_info', {})
     
+    # 创建嵌入式 HTML
+    embedded_html = create_embedded_html(html_content, chart_id)
+    
+    # 调试信息
+    debug_info = f"📁 {source}/{chart_type}/{chart_id} | HTML: {len(html_content)} 字符"
+    
     # 格式化标签信息
     if label_info:
         label_text = f"""
@@ -164,7 +206,7 @@ def load_chart_data(source: str, chart_type: str, chart_id: str, model: str):
 | **链接** | [查看原图]({label_info.get('Weblink', '#')}) |
 """
     else:
-        label_text = "暂无标签信息"
+        label_text = "### ⚠️ 暂无标签信息"
     
     # 获取 QA 列表
     qa_list = data_manager.get_qa_list(source, chart_type, model, chart_id)
@@ -185,13 +227,14 @@ def load_chart_data(source: str, chart_type: str, chart_id: str, model: str):
     qa_choices = [f"Q{i+1}: {qa.question[:50]}..." for i, qa in enumerate(qa_list)] if qa_list else []
     
     return [
-        html_content,  # html_display
+        embedded_html,  # html_display
         label_text,  # label_info
         json.dumps([{"id": qa.id, "question": qa.question, "answer": qa.answer} for qa in qa_list]),  # qa_data (JSON string)
         status_text,  # status_text
         progress_text,  # progress_text
         json.dumps(existing_reviews),  # current_qa_reviews (JSON string)
-        gr.Radio(choices=qa_choices, value=qa_choices[0] if qa_choices else None)  # qa_selector
+        gr.Radio(choices=qa_choices, value=qa_choices[0] if qa_choices else None),  # qa_selector
+        debug_info  # debug_info
     ]
 
 
@@ -279,12 +322,7 @@ def create_ui():
     # 自定义 CSS
     custom_css = """
     .chart-container {
-        height: 500px;
-        overflow: auto;
-        border: 1px solid #e0e0e0;
-        border-radius: 8px;
-        padding: 10px;
-        background: #fafafa;
+        min-height: 520px;
     }
     
     .control-panel {
@@ -293,6 +331,15 @@ def create_ui():
         border-radius: 8px;
         margin-bottom: 10px;
     }
+    
+    .debug-panel {
+        font-size: 12px;
+        color: #666;
+        padding: 8px;
+        background: #f5f5f5;
+        border-radius: 4px;
+        margin-top: 10px;
+    }
     """
     
     with gr.Blocks(
@@ -376,12 +423,21 @@ def create_ui():
                     value="default",
                     interactive=True
                 )
+                
+                # 调试信息
+                debug_info = gr.Textbox(
+                    label="调试信息",
+                    value="",
+                    interactive=False,
+                    show_label=False,
+                    elem_classes=["debug-panel"]
+                )
             
             # ===== 中间：图表展示 =====
             with gr.Column(scale=2, min_width=400):
                 gr.Markdown("### 📈 图表展示")
                 
-                # HTML 图表展示
+                # HTML 图表展示（使用 iframe）
                 html_display = gr.HTML(
                     value="<div style='text-align:center;padding:50px;color:#999;'>请选择图表</div>",
                     elem_classes=["chart-container"]
@@ -517,7 +573,7 @@ def create_ui():
             inputs=[source_dropdown, chart_type_dropdown, chart_dropdown, model_dropdown],
             outputs=[
                 html_display, label_display, qa_data_json, status_text, progress_text, 
-                current_reviews_json, qa_selector
+                current_reviews_json, qa_selector, debug_info
             ]
         )
         
@@ -526,7 +582,7 @@ def create_ui():
             inputs=[source_dropdown, chart_type_dropdown, chart_dropdown, model_dropdown],
             outputs=[
                 html_display, label_display, qa_data_json, status_text, progress_text,
-                current_reviews_json, qa_selector
+                current_reviews_json, qa_selector, debug_info
             ]
         )
         
@@ -624,4 +680,4 @@ if __name__ == "__main__":
         server_name="0.0.0.0",
         server_port=7860,
         share=False
-    )
+    )