AI零代码生成平台 第九期可视化修改 小结 # 需求分析 在此前，AI已经可以基于上下文历史对于生成的网站进行优化，但是是需要用户文字描述的，目前是需要实现让用户点击页面上的元素，然后输入修改需求，让AI精确知道是修改哪一块代码 目前主流的AI生成代码网站，是支持用户点选某一块的元素，手动输入信息实时修改（修改css样式，双向绑定），或者是给AI自动修改的 # 方案 不采用手动编辑的模式，只实现自动编辑 用户开启编辑模式，选择页面上的元素。 前端获取选中的元素，关联到提示词，发送给后端 后端调用AI进行修改，返回结果 # 父子网站通信 子网站需要通过嵌入一段代码，向主网站汇报，主网站接受并且处理，但是子网站是AI生成的，应该如何修改？ 1. 通过给AI的提示词生成，但是增加代码的不稳定性，并且用户下载的代码中也会有 2. 动态注入代码，子父网站必须同源 # 前端开发，直接利用AI生成 # 后端修改 原生HTML或者三文件，是全量修改，vue项目，是增量修改。 原生HTML或者三文件是**通过修改提示词的方式** ## **vue项目是重点，需要增量修改** vue项目文件过多，不能每次有修改，都从头全量生成。通过给AI定义工具，实现增量修改：**本质上是在页面上选择元素，然后在输入框中输入修改的需求，和被修改的元素的信息打包发送给后端，后端AI框架利用工具，对单个文件或多个文件进行修改，然后重新构建打包。** - 读取单个文件 - 递归获取某个目录下的所有文件结构 - 删除单个文件 - 修改单个文件，替换掉文件中的部分内容 - 创建单个文件 首先要修改vue工程的提示词（减少大模型的幻觉，在提示词中指定应该使用哪种工具，以及如何使用） 然后定义工具 最后需要修改解析AI返回结果的ProjectFluxHandler类。因为不同的工具调用，返回的信息也是不同的。**在大模型返回的内容中，包含了调用的工具的名称，需要编写不同的策略。** **在各自的工具类中，定义输出的方法。然后用一个工厂去统一的管理工具** 所有的工具类，都继承BaseTool类： - 工具中文名 - 工具英文名 - 工具的信息，返回给页面 - 工具的信息，保存到数据库 写一个工具管理类， 创建工具和工具名称的映射关系。利用@PostConstruct注解，将自动注入的工具，在Spring Boot启动时，就存放到该类中的一个Map中