本文作者:JU974,中国科学技术大学人工智能专业本科生


一、灵感来源
一切始于我在数据集网站发现了一个动漫人脸数据集iCartoonFace。当时我正在学习YOLO目标检测算法,便萌生了一个想法:何不做一个动漫人物识别项目?这既能巩固所学知识,又能完成本学期《人工智能实践》的课程作业。
经过一段时间的模型训练,我成功构建了api_server,但项目还缺少一个直观的可视化界面。刚好最近了解到文心快码出了最新的3.5S版本,官方介绍的特色能力是多智能体自主协同完成开发任务,于是决定用文心快码来完成开发。 目前可以通过在 VSCode、JetBrains IDEs 等主流 IDE 中安装 Comate 插件,或直接使用功能强大的独立 AI IDE 来体验文心快码。
我这里采用的是官方默认Agent模式------Zulu,以及默认的大语言模型设置------Auto,其他功能和智能体还没来得及研究。Zulu是能够满足我当前的开发需求的,并且选择Zulu后点击Subagent配置可以看到,它其实已经内置了DeepRead智能体。

二、理解项目
要让AI Coding发挥出真正的实力,得给AI充足的上下文,第一步肯定得让AI知道我的项目是做什么的,这时候DeepRead智能体就有了用武之地。刚好Comate提供了一个「介绍当前项目」的提示标签,所以我直接用这个标签。

Zulu十分详细地阅读了该代码文件,总结了当前的业务目标、核心功能、整体架构、数据实体、业务流程。这其实也算是一个小小的心得,如果想要使用AI Coding在项目上做二次开发,都需要先让AI通读项目结构内容等,方便做出后面的决策修改。


三、直接给要求
由于我是想让Zulu基于原始项目写网页,现在ta已经理解我用了什么框架、实现了哪些功能。这个就是AI的强大之处,不用像工作同事、项目队友合作那样挨个对接。现在直接给ta你的要求,让ta直接交付,后面再慢慢修改。(要是能一遍写好,并让我满意最好不过了😠)

这里我的初步要求是:
我写的网页太丑了,帮我设计一个规整好看的动漫人物识别网页,要求尽量体现api_server的所有功能。
Comate Zulu回复的一部分:
我会创建一个新的HTML文件来展示所有API功能,包含以下部分:
-
文件上传区域
-
检测/识别结果显示区
-
API功能切换面板
-
结果可视化展示
-
详细的API响应信息
然后就开始编写html文件了,但是!竟然把js、css也都写在html文件中。这一点不是很规范,并且这个网页也不算小,还是需要符合统一标准的。编写完成后,说明了一下特点功能和使用方式等,我迫不及待运行然后点开网页。感觉外观还不错,我还挺喜欢这个配色和布局的,然后检查了一下后台,也没什么报错。
1. 现代化设计:
- 使用Bootstrap 5框架构建响应式布局
- 渐变色标题栏和专业卡片设计
- 清晰的视觉层次和间距
2. 完整功能展示:
- 支持三种API模式切换(检测+识别/仅检测/仅识别)
- 图片上传和预览功能
- 实时显示检测框和识别结果
- 详细的API响应信息展示
3. 交互体验优化:
- 加载状态指示器
- 错误处理和用户反馈
- 结果可视化展示(检测框+角色标签)
4. 系统信息展示:
- 服务状态监控
- 模型加载状态
- 最后更新时间

四、测试功能
编写好一个基础的网页是远远不够的,功能完善才是重点。在测试环节,我先是用一张单人角色的图片测试了所有功能,发现都没啥问题。

第二轮测试我选择了一张多角色图,发现存在展示效果上的问题,这得改。

五、优化结构和修改展示效果
于是我提出优化要求:
使用js css不要全部写在html中,还有现在检测框不要标注上标签文字,只需要检测框就行了,然后鼠标悬浮放到对应检测框上面可以在鼠标旁边显示信息
注意:如果是啥也不会的小白,比如js、css都不知道,想要进行二次开发,还是很有局限性的,所以至少得要知道一些基础的前置知识。

后面我就没有太关注回复的流程逻辑了,主要我也不太懂css,js代码,对我来说结果比较重要,只要能修改好代码能跑就没问题。可以看到Comate创建了对应的js和css,这样更好管理网页了。

直接运行访问,发现效果好多了,并且功能也都正常。只不过还有小问题,比如鼠标悬浮显示信息这块,我要求的是在鼠标旁边显示,但是有时候会显示到屏幕外面去,这点需要再优化。
部分bug如下视频:live.csdn.net/v/496648
六、问题修复
然后就是基本的流程测试发现问题修复,用了这么多AI Coding工具,很少有可以直接一步修理好这种不明显的非bug类型的问题,Comate也不例外,不过几次修改之后,基本能达到我想要的效果了,而且也没有影响原来的功能。
修复完成后,最终的项目效果如下视频:live.csdn.net/v/496650
为了完善项目,后面继续让Comate写了一个api文档页面并能够在主页面跳转,三轮聊天就写好并修复完善了。以及最后还让Comate补充了下README文档。

最终的项目地址可见:github.com/minghf85/yo...
七、总结
Comate用起来还是很方便的,通过多轮对话就能实现我想要的功能,交互很轻松,最终给出一个满意的结果。多智能体的功能是一大亮点,具体的协同开发方式还是得按照个人需求去慢慢探索。但同时还有很多细节需要打磨。
- 使用库版本:虽然在这个项目中没怎么体现,但是在其他地方用的时候,发现大多数时候用的库还都比较老了,不是最新的,这点有待改进。因为一般安装库不指定版本都是安装的最新版,但是Comate用有的库比如openai这个库,还是老版本的类和方法,导致会出bug,虽然也能改但是这个问题还是有点影响体验。
- 代码规范:这点上面也提到了,直接把js、css写在html中,这点不太符合前端开发的规范,应该在提示词中加入规范化代码文件结构的要求,不只是在单个文件内部的代码结构上做文章,还需要整个代码结构规范化。
- 是否保留修改代码问题:这个可以看看其他AI Coding工具的做法,在生成代码后,会询问是否保留修改,现在Comate的覆盖方式很奇怪,不能选择那几行代码进行覆盖,而是直接覆盖整个文件。
- 代码解释和bug解释: 开门见山地给出代码解释和bug解释,这点也还欠缺,有时候一个简单的解释就能让用户知道是什么问题,用户也能成长,也能溯源问题等,而不是闷头大干,用户啥也不知道。
你是否也想用AI Coding打造个人项目?
文心快码Meetup招募进行中!
一起来现场Vibe Coding!