AutoCodeRover Web界面开发：使用Demo_vis模块构建可视化控制台
项目地址: https://gitcode.com/GitHub_Trending/au/auto-code-rover AutoCodeRover作为一款具备项目结构感知能力的自主软件工程师工具，其可视化控制台是用户与系统交互的核心窗口。本文将详细介绍如何基于项目内置的demo_vis模块开发Web界面，通过Next.js框架构建响应式控制台，实现代码修复流程的实时可视化监控。
模块结构与技术栈选型
demo_vis模块采用前后端分离架构，前端基于Next.js构建单页应用，后端通过Python FastAPI提供实时数据接口。核心目录结构如下：
demo_vis/
├── front/ # Next.js前端项目
│ ├── app/ # React组件与页面路由
│ │ ├── page.tsx # 主控制台界面
│ │ └── layout.tsx # 应用布局组件
│ ├── package.json # 前端依赖配置
│ └── README.md # 开发指南
├── main.py # Python后端服务
└── run.sh # 一键启动脚本
前端技术栈选用React 18与TypeScript，结合Tailwind CSS实现响应式设计。代码高亮功能通过react-syntax-highlighter实现，状态管理使用React Hook Form，实时通知系统采用react-hot-toast。完整依赖列表可查看demo_vis/front/package.json。
前端核心组件开发
控制台主界面（page.tsx）
主界面采用双栏布局设计，左侧为任务输入区，右侧为Agent执行过程可视化区。核心实现位于demo_vis/front/app/page.tsx，关键功能包括：
- 任务表单系统：支持输入代码仓库链接、Commit哈希和Issue链接，提供示例数据填充和表单重置功能
- 实时日志展示：通过流式API接收Agent执行状态，使用可折叠面板展示不同类型的处理结果
- 代码高亮渲染：自定义Markdown渲染器，对Agent生成的代码块应用语法高亮
// 代码片段：任务提交处理逻辑
const onsubmmit_callback = async (data: FieldValues) => {
const call_server = fetch('http://localhost:5000/api/run_github_issue', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
})
toast.loading('下载Issue和仓库中...');
call_server.then(response => {
if (!response.body) throw Error('无响应内容');
setLoadingState(1);
const reader = response.body.getReader();
// 流式处理服务器响应
function read(): Promise<void> {
return reader.read().then(({ done, value }) => {
if (done) {
toast.success('处理完成！');
return;
}
const text = new TextDecoder().decode(value);
text.split('</////json_end>').forEach(item => {
if (item) {
const message: AnyMessage = JSON.parse(item);
// 更新UI状态...
}
});
return read();
});
}
return read();
});
};
消息展示组件（MessageDiv）
实现可折叠的消息面板，根据消息类型显示不同图标：
- AutoCodeRover主Agent：使用FaHandsHelping图标
- 上下文检索Agent：使用PiWheelchair图标
- 补丁生成结果：使用BsStars图标
每个面板支持展开/折叠切换，内部通过自定义Markdown渲染器处理富文本内容，特别是代码块的语法高亮。
后端服务与通信协议
后端服务由demo_vis/main.py实现，采用FastAPI框架提供RESTful API和WebSocket服务。前后端通信采用HTTP流式响应（Server-Sent Events）模式，数据格式为JSON，通过特殊分隔符</////json_end>标识每个消息边界。
启动脚本demo_vis/run.sh实现了开发环境的一键部署：
# 启动逻辑：先启动Python后端，再启动Next.js开发服务器
source ~/miniconda3/etc/profile.d/conda.sh
conda activate auto-code-rover
python main.py &
cd ./front/ && npm run start
部署与运行流程
开发环境搭建
-
克隆项目代码：
git clone https://gitcode.com/GitHub_Trending/au/auto-code-rover.git cd auto-code-rover/demo_vis/front -
安装依赖：
npm install -
启动开发服务器：
npm run dev # 或使用项目提供的一键启动脚本 cd ../ && ./run.sh
生产环境构建
对于生产部署，可使用Next.js的静态导出功能：
cd demo_vis/front
npm run build
npm run export
生成的静态文件位于out目录，可部署到Nginx或任何静态文件服务器。
界面功能演示
任务提交表单
左侧表单区域支持三种输入：
- 代码仓库URL：如
https://github.com/langchain-ai/langchain.git - Commit哈希：指定问题版本，如
cb6e5e5 - Issue链接：需要修复的问题，如
https://github.com/langchain-ai/langchain/issues/20453
点击"💡 Try example ? 💡"按钮可自动填充示例数据，点击"🚀 Boot Now ! 🚀"开始处理流程。
Agent执行可视化
右侧面板实时展示各Agent的执行状态，包括：
- ContextRetrievalAgent：代码库上下文检索结果
- PatchGenerationAgent：生成的代码修复补丁
- AutoCodeRover：系统总体状态和决策过程
每个消息面板可展开查看详细内容，代码块会自动应用语法高亮，支持滚动查看长文本内容。
定制与扩展
界面主题定制
通过修改demo_vis/front/app/globals.css文件自定义样式：
- 修改
--primary-color变量更改主题色 - 调整
max-width值适配不同屏幕尺寸 - 自定义代码高亮样式（当前使用
vs主题）
功能扩展建议
- 添加历史记录：在localStorage中保存任务执行记录
- 实现结果导出：添加按钮导出Agent生成的补丁为文件
- 多语言支持：使用next-i18next实现界面国际化
- 暗黑模式：通过Tailwind的dark模式实现日夜主题切换
常见问题解决
跨域访问问题
若前端无法连接后端API，检查demo_vis/main.py中的CORS配置：
from fastapi.middleware.cors import CORSMiddleware
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # 生产环境应限制具体域名
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
依赖安装失败
如果npm install过程中出现依赖冲突，尝试使用Node.js 18.x版本并清理npm缓存：
nvm use 18
npm cache clean --force
npm install
完整的故障排除指南可参考项目的TESTING.md文档。
通过本文介绍的方法，开发者可以快速掌握AutoCodeRover可视化控制台的构建原理，并根据实际需求进行定制开发。该界面不仅提供了直观的Agent工作流展示，也为后续功能扩展奠定了灵活的架构基础。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
