Skip to content

WEB_INTERFACE_SUMMARY.md

Latest commit

 

History

History
211 lines (169 loc) · 5.85 KB

WEB_INTERFACE_SUMMARY.md

File metadata and controls

211 lines (169 loc) · 5.85 KB

KGCompass Web 界面完整实现总结

🎯 概述

成功为 KGCompass 创建了一个完整的 Web 界面，让用户能够直观地体验软件修复流程。该界面支持两种模式：

  1. Docker 模式：完整功能，真实执行修复流程
  2. 独立模式：仅界面演示，用于快速预览

📁 文件结构

KGCompass/
├── app.py                      # Flask 主应用 (23KB)
├── start_web.sh               # 独立模式启动脚本
├── start_web_docker.sh        # Docker 模式启动脚本
├── demo_web.py                # 演示和测试脚本
├── requirements_web.txt        # Web 界面依赖
├── CONFIG.md                  # 配置说明文档
├── README_web_interface.md    # 详细使用说明
├── WEB_INTERFACE_SUMMARY.md   # 本总结文档
├── templates/
│   ├── index.html             # 主页模板 (13.7KB)
│   └── patch_view.html        # 补丁预览页面 (8.2KB)
└── static/
    ├── css/
    │   └── style.css          # 自定义样式 (7.1KB)
    └── js/
        └── app.js             # 前端逻辑 (17.8KB)

🌟 核心功能

1. 用户界面功能

  • 仓库选择：支持 12 个热门 Python 开源项目
  • 实例输入：SWE-bench 格式的 Issue ID 输入
  • 快速示例：预设示例按钮，快速填充
  • 实时进度：WebSocket 实时显示修复进度
  • 实时日志：完整的修复过程日志展示

2. 修复流程可视化

  • 阶段1 (0-30%)：知识图谱挖掘
  • 阶段2 (30-50%)：LLM 故障定位
  • 阶段3 (50-70%)：结果融合
  • 阶段4 (70-90%)：补丁生成
  • 阶段5 (90-100%)：结果收集

3. 补丁管理

  • 在线预览：语法高亮的补丁内容展示
  • 文件下载：直接下载生成的补丁文件
  • 统计信息：显示修改统计（添加/删除行数）
  • 文件变更：详细的文件变更列表

🐳 Docker 集成

Docker 模式特性

  • 完整环境：包含 Neo4j 数据库和应用容器
  • GPU 支持：支持 NVIDIA GPU 加速
  • 真实执行：在 Docker 容器中执行真实的修复流程
  • 自动管理：自动启动和管理 Docker 服务

执行流程

  1. 检查 Docker 环境
  2. 启动 docker-compose 服务（如需要）
  3. 在容器中执行 run_repair.sh <instance_id>
  4. 实时捕获输出和日志
  5. 从容器复制补丁文件到主机
  6. 展示修复结果

🛠️ 技术实现

后端技术栈

  • Flask 3.0.0：Web 框架
  • Flask-SocketIO 5.3.6：WebSocket 实时通信
  • Python Threading：异步任务处理
  • Subprocess：Docker 命令执行
  • JSON：数据交换格式

前端技术栈

  • Bootstrap 5：响应式 UI 框架
  • Font Awesome 6：图标库
  • Socket.IO：客户端实时通信
  • Vanilla JavaScript：前端逻辑
  • Highlight.js：代码语法高亮

核心组件

RepairTaskManager 类

  • 管理修复任务的完整生命周期
  • 支持 Docker 容器中的命令执行
  • 实时日志捕获和 WebSocket 广播
  • 智能进度跟踪和状态管理

KGCompassApp 类（前端）

  • WebSocket 连接管理
  • 实时任务状态更新
  • 用户界面交互处理
  • 示例数据填充和管理

🎮 用户体验

操作流程

  1. 选择仓库：从下拉菜单选择目标仓库
  2. 输入实例：填写 SWE-bench 实例 ID
  3. 快速示例：点击示例按钮快速填充
  4. 开始修复：启动修复流程
  5. 实时监控：观看修复进度和日志
  6. 查看结果：预览补丁内容
  7. 下载文件：获取补丁文件

界面特性

  • 响应式设计：支持桌面和移动设备
  • 现代化UI：美观的卡片式布局
  • 实时反馈：即时的进度和状态更新
  • 优雅动画：流畅的过渡效果
  • 错误处理：友好的错误信息和解决建议

🚀 启动方式

Docker 模式（推荐）

chmod +x start_web_docker.sh
./start_web_docker.sh

独立模式

chmod +x start_web.sh
./start_web.sh

手动启动

python3 -m venv venv
source venv/bin/activate
pip install -r requirements_web.txt
python3 app.py

📋 支持的仓库

仓库 描述 Stars
astropy/astropy Python天文学库 4.3k ⭐
django/django Web框架 79k ⭐
matplotlib/matplotlib 2D绘图库 19k ⭐
scikit-learn/scikit-learn 机器学习库 59k ⭐
flask/flask 轻量级Web框架 67k ⭐
requests/requests HTTP库 52k ⭐
等8个项目 ... ...

🔧 配置要求

基本要求

  • Python 3.10+
  • Flask 和相关依赖
  • 网络连接

Docker 模式额外要求

  • Docker 和 Docker Compose
  • NVIDIA GPU + Container Toolkit（可选）
  • API 密钥配置（.env 文件）

📊 性能特性

实时通信

  • WebSocket 低延迟通信
  • 实时日志流式传输
  • 进度状态即时更新

资源管理

  • 异步任务处理
  • 内存高效的日志缓冲
  • 自动任务清理机制

容错处理

  • Docker 服务自动启动
  • 任务执行错误恢复
  • 详细错误信息提供

🎯 核心价值

对用户

  • 零配置体验：一键启动完整环境
  • 可视化流程：直观了解修复过程
  • 真实结果：获得可用的修复补丁
  • 学习工具：理解 KGCompass 工作原理

对开发者

  • 演示平台：展示 KGCompass 能力
  • 测试工具：快速测试不同实例
  • 集成示例：Web 界面集成参考
  • 扩展基础：支持功能扩展

🔮 未来扩展

功能增强

  • 批量修复任务支持
  • 修复历史记录管理
  • 补丁质量评估
  • 自定义仓库支持

技术优化

  • 容器化 Web 服务
  • 分布式任务执行
  • 更丰富的可视化
  • API 接口开放

🎉 KGCompass Web 界面为用户提供了一个完整、直观、强大的软件修复体验平台！