一次生成式AI辅助开发的探索

背景

每年过年，我姥姥族系都有一次聚会，大概三四十人一起吃饭。

对我这代小辈来说，一年见一次的长辈只是脸熟，记得名字就不错了，算的明白称呼那是不存在的，见了面只会说过年好。

今年聚会时想到，可以做一个电子族谱，对和我一样算不明白称呼的，只需要输入你是谁，就可以用算法生成其他所有人的称呼。

正好借此机会学点开发技术，探索一下GenAI辅助coding能做到什么程度。

功能

  1. 动态生成族谱布局
  2. 输入当前浏览者，算出以当前浏览者为坐标，家族其它人的称呼

用到的工具

  1. AI-based IDE：Cursor

一个基于VS Code魔改的AI-base IDE。
可以方便的将代码库作为上下文传给LLM，多次chat调整代码，并一键将AI生成代码diff/merge。
在学习开源代码和快速生成大段代码上比Github Copilot好用太多。
美中不足是，去年还在宣传自己是开源的，今年再去Github看，就剩个Readme和Issue Tracker了。

  1. 节点绘制算法：D3.JS

一个用来做数据可视化的JavaScript库

  1. 计算称呼的算法：https://github.com/mumuy/relationship

  2. AI设计：即时设计，Uizard

这个项目没用到太多设计，因为整个Family Tree是D3.JS画出来的SVG图，加设计样式比较费劲，不过还是提一下，感兴趣自己去玩。

  1. 切图：https://github.com/facebookresearch/segment-anything

为了得到家庭成员的脸部信息，用了Meta开源的Segment Anything算法，将聚会的照片全量分割。
后来发现切出来的图太丑了，怕被打死，就默认放了彭于晏和刘亦菲的图 doge

代码开源

https://github.com/Andrew-ppppeng/FamilyTree-D3.JS-

脱敏Demo

https://andrew-ppppeng.github.io/familyTree/demo/FamilyTree.html

一些AI开发经验

  1. 不要在一次Chat里描述复杂需求，最好自己先规划功能模块，再逐个生成。

因为即使你说的明白，AI也未必理解。即使理解，也未必生成正确。即使正确，AI经常会把一堆功能写在一个文件里，很难阅读和调试。

  1. AI能帮你生成代码，但模块化，面向对象这些事还需要自己Review。

我最开始只关注写业务代码，后来发现500行代码堆在一块，想让AI拆分功能，抽象出一个config文件总是出错，最后自己手动改的