1

README.md

@@ -4,8 +4,167 @@ emoji: 📊
 colorFrom: blue
 colorTo: purple
 sdk: gradio
-sdk_version: "4.44.0"
+sdk_version: "5.9.1"
 python_version: "3.10"
 app_file: app.py
 pinned: false
----
+---
+
+# 📊 图表问答数据集审核系统
+
+一个基于 Gradio 的人工审核系统，用于审核图表问答数据集中的问题和答案是否合理正确。
+
+## 功能特点
+
+- 📊 **图表展示**：支持 HTML 格式的交互式图表展示
+- 📁 **目录导航**：按 Source → Chart Type → Chart → Model 层级浏览
+- ✅ **审核操作**：支持正确、错误、需修改、待定四种状态
+- ✏️ **内容编辑**：可修改问题和答案，添加评论备注
+- 📈 **统计面板**：实时显示审核进度和统计信息
+- 📥 **数据导出**：一键导出审核记录为 JSON 格式
+- ⌨️ **快捷键**：支持键盘导航和状态选择
+
+## 目录结构
+
+```
+project/
+├── app.py              # 主应用
+├── data_manager.py     # 数据管理模块
+├── requirements.txt    # 依赖列表
+│
+├── dataset/            # 数据集目录（需要自行放置）
+│   ├── web/            # 图表 HTML 文件
+│   │   └── {source}/
+│   │       └── {chart_type}/
+│   │           └── *.html
+│   ├── label/          # 图表标签信息
+│   │   └── {source}/
+│   │       └── {chart_type}/
+│   │           └── *.json
+│   └── question_answer/  # QA 数据
+│       └── {source}/
+│           └── {chart_type}/
+│               └── {model}/
+│                   └── *.json
+│
+└── reviews/            # 审核记录（自动创建）
+    └── reviews.json
+```
+
+## 数据格式
+
+### Label JSON 格式
+```json
+{
+  "Number": "0001",
+  "Type": "bar",
+  "Source": "Apache Echarts",
+  "Weblink": "https://example.com/chart",
+  "Topic": "Weather Statistics by City",
+  "Describe": "The chart compares...",
+  "Other": ""
+}
+```
+
+### QA JSON 格式
+```json
+{
+  "id": "chart_0001_bar_q1",
+  "chart": "chart_0001_bar",
+  "question": "Weather Statistics图表中，三个城市在Showers天气下的总天数是多少？",
+  "answer": "203"
+}
+```
+
+### 审核记录格式
+```json
+{
+  "review_id": "uuid",
+  "chart_id": "chart_0001_bar",
+  "qa_id": "chart_0001_bar_q1",
+  "source": "Apache Echarts",
+  "chart_type": "bar",
+  "model": "gpt-4",
+  "original_question": "...",
+  "original_answer": "...",
+  "status": "correct",
+  "modified_question": "",
+  "modified_answer": "",
+  "issue_type": "",
+  "comment": "",
+  "reviewer": "default",
+  "review_time": "2024-01-01T00:00:00"
+}
+```
+
+## 快速开始
+
+### 1. 安装依赖
+
+```bash
+pip install -r requirements.txt
+```
+
+### 2. 准备数据集
+
+将你的数据集放置到 `dataset/` 目录下，按照上述目录结构组织。
+
+### 3. 启动应用
+
+```bash
+python app.py
+```
+
+应用将在 `http://localhost:7860` 启动。
+
+## 快捷键
+
+| 按键 | 功能 |
+|------|------|
+| ← | 上一个图表 |
+| → | 下一个图表 |
+| 1 | 标记为正确 |
+| 2 | 标记为错误 |
+| 3 | 标记为需修改 |
+| 4 | 标记为待定 |
+
+## 部署到 Hugging Face Spaces
+
+### 方法 1：通过网页界面上传
+
+1. 在 Hugging Face 创建一个新的 Space
+2. 上传所有文件：`app.py`、`data_manager.py`、`requirements.txt`、`README.md`
+3. 在 Files 标签页创建 `dataset/` 目录结构
+4. 上传你的数据集文件
+
+### 方法 2：通过 Git 推送
+
+```bash
+# 克隆 Space
+git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
+cd YOUR_SPACE_NAME
+
+# 复制项目文件
+cp /path/to/app.py .
+cp /path/to/data_manager.py .
+cp /path/to/requirements.txt .
+cp /path/to/README.md .
+
+# 创建数据集目录并上传数据
+mkdir -p dataset/web dataset/label dataset/question_answer
+
+# 提交并推送
+git add .
+git commit -m "Initial commit"
+git push
+```
+
+## 注意事项
+
+- 免费版 Spaces 有存储限制
+- Spaces 重启后审核记录会丢失，请定期导出
+- 大数据集建议使用 Hugging Face Datasets 存储
+
+## 许可证
+
+MIT License

app.py

@@ -1,5 +1,5 @@
 """
-图表问答数据集审核系统 - Gradio 应用
+图表问答数据集审核系统 - Gradio 5.x 应用
 用于人工审核每个图表对应的问题和答案是否合理正确
 """
 import gradio as gr
@@ -97,7 +97,7 @@ def get_dataset_choices() -> Tuple[List[str], List[str], List[str], List[str]]:
     return sources, chart_types, charts, models
 
 
-def update_chart_type_dropdown(source: str) -> gr.Dropdown:
+def update_chart_type_dropdown(source: str):
     """更新图表类型下拉框"""
     state.current_source = source
     structure = data_manager.get_dataset_structure()
@@ -107,7 +107,7 @@ def update_chart_type_dropdown(source: str) -> gr.Dropdown:
     return gr.Dropdown(choices=chart_types, value=chart_types[0] if chart_types else None)
 
 
-def update_chart_dropdown(source: str, chart_type: str) -> Tuple[gr.Dropdown, gr.Dropdown]:
+def update_chart_dropdown(source: str, chart_type: str):
     """更新图表和模型下拉框"""
     state.current_source = source
     state.current_chart_type = chart_type
@@ -134,10 +134,11 @@ def load_chart_data(source: str, chart_type: str, chart_id: str, model: str):
         return [
             "",  # html_display
             "",  # label_info
-            [],  # qa_data
-            "",  # status_text
+            "[]",  # qa_data (JSON string)
+            "等待加载数据...",  # status_text
             "请在左侧选择图表",  # progress_text
-            gr.State({})  # current_qa_reviews
+            "{}",  # current_qa_reviews (JSON string)
+            gr.Radio(choices=[], value=None)  # qa_selector
         ]
     
     # 更新状态
@@ -180,13 +181,17 @@ def load_chart_data(source: str, chart_type: str, chart_id: str, model: str):
     stats = data_manager.get_review_stats()
     status_text = f"已审核: {stats['total']} | ✅正确: {stats['correct']} | ❌错误: {stats['incorrect']} | ✏️需修改: {stats['needs_modification']}"
     
+    # QA 选择器选项
+    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
         label_text,  # label_info
-        qa_list,  # qa_data (for state)
+        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
-        existing_reviews  # current_qa_reviews
+        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
     ]
 
 
@@ -234,6 +239,9 @@ def save_review_handler(
     reviewer: str
 ) -> str:
     """保存审核记录"""
+    if not qa_id:
+        return "❌ 请先选择一个问答对"
+    
     review_data = {
         "qa_id": qa_id,
         "chart_id": chart_id,
@@ -271,7 +279,7 @@ def create_ui():
     # 自定义 CSS
     custom_css = """
     .chart-container {
-        height: 600px;
+        height: 500px;
         overflow: auto;
         border: 1px solid #e0e0e0;
         border-radius: 8px;
@@ -279,51 +287,12 @@ def create_ui():
         background: #fafafa;
     }
     
-    .qa-item {
-        border: 1px solid #e0e0e0;
-        border-radius: 8px;
-        padding: 15px;
-        margin-bottom: 15px;
-        background: white;
-    }
-    
-    .qa-question {
-        font-weight: bold;
-        color: #1a73e8;
-        margin-bottom: 8px;
-    }
-    
-    .qa-answer {
-        color: #0d652d;
-        padding: 8px;
-        background: #e8f5e9;
-        border-radius: 4px;
-        margin-bottom: 10px;
-    }
-    
-    .status-correct { background-color: #d4edda !important; border-color: #c3e6cb !important; }
-    .status-incorrect { background-color: #f8d7da !important; border-color: #f5c6cb !important; }
-    .status-needs-modification { background-color: #fff3cd !important; border-color: #ffeeba !important; }
-    .status-pending { background-color: #e2e3e5 !important; border-color: #d6d8db !important; }
-    
     .control-panel {
         background: #f8f9fa;
         padding: 15px;
         border-radius: 8px;
         margin-bottom: 10px;
     }
-    
-    .stats-panel {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        padding: 15px;
-        border-radius: 8px;
-        margin-bottom: 15px;
-    }
-    
-    .nav-button {
-        min-width: 120px;
-    }
     """
     
     with gr.Blocks(
@@ -332,15 +301,15 @@ def create_ui():
         css=custom_css
     ) as app:
         
-        # 隐藏的状态存储
-        current_qa_reviews = gr.State({})
-        qa_data_state = gr.State([])
+        # 隐藏的状态存储（使用 JSON 字符串）
+        qa_data_json = gr.State(value="[]")
+        current_reviews_json = gr.State(value="{}")
         
         # ==================== 标题栏 ====================
         gr.Markdown("""
         # 📊 图表问答数据集审核系统
         
-        审核每个图表对���的问题和答案是否合理正确。使用 ← → 按钮或键盘方向键切换图表。
+        审核每个图表对应的问题和答案是否合理正确。使用 ← → 按钮切换图表。
         """)
         
         # ==================== 顶部状态栏 ====================
@@ -349,7 +318,8 @@ def create_ui():
                 label="审核统计",
                 value="等待加载数据...",
                 interactive=False,
-                show_label=False
+                show_label=False,
+                scale=2
             )
             progress_text = gr.Textbox(
                 label="进度",
@@ -393,8 +363,8 @@ def create_ui():
                 
                 # 导航按钮
                 with gr.Row():
-                    prev_btn = gr.Button("⬅️ 上一个", elem_classes=["nav-button"])
-                    next_btn = gr.Button("➡️ 下一个", elem_classes=["nav-button"])
+                    prev_btn = gr.Button("⬅️ 上一个")
+                    next_btn = gr.Button("➡️ 下一个")
                 
                 # 导出按钮
                 export_btn = gr.Button("📥 导出审核记录", variant="secondary")
@@ -429,89 +399,90 @@ def create_ui():
                 # QA 审核区
                 gr.Markdown("### ❓ 问答审核")
                 
-                # 审核面板 (动态生成)
-                with gr.Column(visible=True) as review_panel:
-                    # 当前选中的 QA 信息（隐藏）
-                    current_qa_id = gr.Textbox(visible=False)
-                    current_qa_question = gr.Textbox(visible=False)
-                    current_qa_answer = gr.Textbox(visible=False)
-                    
-                    # QA 显示
-                    qa_question_display = gr.Textbox(
-                        label="问题",
-                        interactive=False,
-                        lines=2
-                    )
-                    qa_answer_display = gr.Textbox(
-                        label="答案",
-                        interactive=False,
-                        lines=1
-                    )
-                    
-                    # QA 选择器
-                    qa_selector = gr.Radio(
-                        label="选择要审核的问答对",
-                        choices=[],
-                        interactive=True
-                    )
-                    
-                    gr.Markdown("---")
-                    gr.Markdown("#### 审核操作")
-                    
-                    # 审核状态选择
-                    status_radio = gr.Radio(
-                        label="审核状态",
-                        choices=[
-                            ("✅ 正确", "correct"),
-                            ("❌ 错误", "incorrect"),
-                            ("✏️ 需修改", "needs_modification"),
-                            ("⏳ 待定", "pending")
-                        ],
-                        value="pending",
-                        interactive=True
-                    )
-                    
-                    # 问题类型（仅在选择错误或需修改时显示）
-                    issue_type_dropdown = gr.Dropdown(
-                        label="问题类型",
-                        choices=[
-                            "问题歧义",
-                            "答案错误",
-                            "图表不清晰",
-                            "问题不合理",
-                            "答案格式错误",
-                            "其他"
-                        ],
-                        interactive=True,
-                        visible=True
-                    )
-                    
-                    # 修改后的问题和答案
-                    modified_question = gr.Textbox(
-                        label="修改后的问题",
-                        placeholder="如需修改问题，请在此输入...",
-                        lines=2,
-                        interactive=True
-                    )
-                    
-                    modified_answer = gr.Textbox(
-                        label="修改后的答案",
-                        placeholder="如需修改答案，请在此输入...",
-                        lines=1,
-                        interactive=True
-                    )
-                    
-                    # 评论
-                    comment_textbox = gr.Textbox(
-                        label="评论/备注",
-                        placeholder="请输入审核意见或备注...",
-                        lines=2,
-                        interactive=True
-                    )
-                    
-                    # 保存按钮
-                    save_btn = gr.Button("💾 保存审核结果", variant="primary")
-                    save_result = gr.Textbox(label="", visible=False)
+                # 当前选中的 QA 信息（隐藏）
+                current_qa_id = gr.Textbox(visible=False, value="")
+                
+                # QA 显示
+                qa_question_display = gr.Textbox(
+                    label="问题",
+                    interactive=False,
+                    lines=2,
+                    value=""
+                )
+                qa_answer_display = gr.Textbox(
+                    label="答案",
+                    interactive=False,
+                    lines=1,
+                    value=""
+                )
+                
+                # QA 选择器
+                qa_selector = gr.Radio(
+                    label="选择要审核的问答对",
+                    choices=[],
+                    interactive=True
+                )
+                
+                gr.Markdown("---")
+                gr.Markdown("#### 审核操作")
+                
+                # 审核状态选择
+                status_radio = gr.Radio(
+                    label="审核状态",
+                    choices=[
+                        ("✅ 正确", "correct"),
+                        ("❌ 错误", "incorrect"),
+                        ("✏️ 需修改", "needs_modification"),
+                        ("⏳ 待定", "pending")
+                    ],
+                    value="pending",
+                    interactive=True
+                )
+                
+                # 问题类型
+                issue_type_dropdown = gr.Dropdown(
+                    label="问题类型",
+                    choices=[
+                        "问题歧义",
+                        "答案错误",
+                        "图表不清晰",
+                        "问题不合理",
+                        "答案格式错误",
+                        "其他"
+                    ],
+                    interactive=True,
+                    value=""
+                )
+                
+                # 修改后的问题和答案
+                modified_question = gr.Textbox(
+                    label="修改后的问题",
+                    placeholder="如需修改问题，请在此输入...",
+                    lines=2,
+                    interactive=True,
+                    value=""
+                )
+                
+                modified_answer = gr.Textbox(
+                    label="修改后的答案",
+                    placeholder="如需修改答案，请在此输入...",
+                    lines=1,
+                    interactive=True,
+                    value=""
+                )
+                
+                # 评论
+                comment_textbox = gr.Textbox(
+                    label="评论/备注",
+                    placeholder="请输入审核意见或备注...",
+                    lines=2,
+                    interactive=True,
+                    value=""
+                )
+                
+                # 保存按钮
+                save_btn = gr.Button("💾 保存审核结果", variant="primary")
+                save_result = gr.Textbox(label="", visible=False)
         
         # ==================== 事件绑定 ====================
         
@@ -541,60 +512,57 @@ def create_ui():
         )
         
         # 选择图表 -> 加载数据
-        def on_chart_selected(source, chart_type, chart_id, model):
-            results = load_chart_data(source, chart_type, chart_id, model)
-            # 更新 QA 选择器
-            qa_list = results[2]  # qa_data
-            qa_choices = [f"Q{i+1}: {qa.question[:50]}..." for i, qa in enumerate(qa_list)] if qa_list else []
-            return results + [gr.Radio(choices=qa_choices, value=qa_choices[0] if qa_choices else None)]
-        
         model_dropdown.change(
-            fn=on_chart_selected,
+            fn=load_chart_data,
             inputs=[source_dropdown, chart_type_dropdown, chart_dropdown, model_dropdown],
             outputs=[
-                html_display, label_display, qa_data_state, status_text, progress_text, 
-                current_qa_reviews, qa_selector
+                html_display, label_display, qa_data_json, status_text, progress_text, 
+                current_reviews_json, qa_selector
             ]
         )
         
         chart_dropdown.change(
-            fn=on_chart_selected,
+            fn=load_chart_data,
             inputs=[source_dropdown, chart_type_dropdown, chart_dropdown, model_dropdown],
             outputs=[
-                html_display, label_display, qa_data_state, status_text, progress_text,
-                current_qa_reviews, qa_selector
+                html_display, label_display, qa_data_json, status_text, progress_text,
+                current_reviews_json, qa_selector
             ]
         )
         
         # QA 选择器变化 -> 更新审核面板
-        def on_qa_selected(qa_index_str, qa_list, existing_reviews):
-            if not qa_index_str or not qa_list:
-                return [""] * 3 + [gr.Radio(value="pending"), "", "", "", ""]
+        def on_qa_selected(qa_index_str, qa_json, reviews_json):
+            if not qa_index_str or not qa_json:
+                return ["", "", "", gr.Radio(value="pending"), "", "", "", ""]
             
-            # 解析索引
             try:
+                qa_list = json.loads(qa_json)
+                reviews = json.loads(reviews_json)
+                
+                # 解析索引
                 index = int(qa_index_str.split(":")[0].replace("Q", "")) - 1
                 qa = qa_list[index]
-            except:
-                return [""] * 3 + [gr.Radio(value="pending"), "", "", "", ""]
-            
-            # 检查是否有现有审核
-            review = existing_reviews.get(qa.id, {})
-            
-            return [
-                qa.id,  # current_qa_id
-                qa.question,  # qa_question_display
-                qa.answer,  # qa_answer_display
-                gr.Radio(value=review.get('status', 'pending')),  # status_radio
-                review.get('issue_type', ''),  # issue_type_dropdown
-                review.get('modified_question', ''),  # modified_question
-                review.get('modified_answer', ''),  # modified_answer
-                review.get('comment', '')  # comment_textbox
-            ]
+                
+                # 检查是否有现有审核
+                review = reviews.get(qa['id'], {})
+                
+                return [
+                    qa['id'],  # current_qa_id
+                    qa['question'],  # qa_question_display
+                    qa['answer'],  # qa_answer_display
+                    gr.Radio(value=review.get('status', 'pending')),  # status_radio
+                    review.get('issue_type', ''),  # issue_type_dropdown
+                    review.get('modified_question', ''),  # modified_question
+                    review.get('modified_answer', ''),  # modified_answer
+                    review.get('comment', '')  # comment_textbox
+                ]
+            except Exception as e:
+                print(f"Error in on_qa_selected: {e}")
+                return ["", "", "", gr.Radio(value="pending"), "", "", "", ""]
         
         qa_selector.change(
             fn=on_qa_selected,
-            inputs=[qa_selector, qa_data_state, current_qa_reviews],
+            inputs=[qa_selector, qa_data_json, current_reviews_json],
             outputs=[
                 current_qa_id, qa_question_display, qa_answer_display,
                 status_radio, issue_type_dropdown, modified_question, modified_answer, comment_textbox
@@ -644,41 +612,6 @@ def create_ui():
             fn=lambda: gr.Textbox(visible=True),
             outputs=[export_result]
         )
-        
-        # 键盘快捷键
-        app.load(
-            fn=lambda: None,
-            js="""
-            () => {
-                document.addEventListener('keydown', (e) => {
-                    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
-                    
-                    if (e.key === 'ArrowLeft') {
-                        document.querySelector('button:has(.nav-button)')?.click();
-                        // 模拟点击上一个按钮
-                        const prevBtn = Array.from(document.querySelectorAll('button')).find(b => b.textContent.includes('上一个'));
-                        if (prevBtn) prevBtn.click();
-                    }
-                    if (e.key === 'ArrowRight') {
-                        const nextBtn = Array.from(document.querySelectorAll('button')).find(b => b.textContent.includes('下一个'));
-                        if (nextBtn) nextBtn.click();
-                    }
-                    if (e.key === '1') {
-                        document.querySelector('input[value="correct"]')?.click();
-                    }
-                    if (e.key === '2') {
-                        document.querySelector('input[value="incorrect"]')?.click();
-                    }
-                    if (e.key === '3') {
-                        document.querySelector('input[value="needs_modification"]')?.click();
-                    }
-                    if (e.key === '4') {
-                        document.querySelector('input[value="pending"]')?.click();
-                    }
-                });
-            }
-            """
-        )
     
     return app
 

requirements.txt

@@ -1,4 +1,4 @@
 # Gradio 审核系统依赖
 
-gradio>=4.0.0
+gradio>=5.0.0
 python-multipart>=0.0.6