技术前沿

大模型下B端前端代码辅助生成的思考与实践｜得物技术

2024 年 4 月 24 日

一、背景

二、生成链路一览

三、表达需求

1. 图形化配置

2. AI直接生成代码

3. 自然语言转指令

四、信息转化为代码

1. 转化流程

2. 我们如何开发代码的？

五、源码生成

1. 定位

六、组件向量搜索与嵌入

1. 组件信息录入

2. 组件向量搜索

3. 组件快速插入

七、未来展望

一

背景

重复工作，代码规范：B端前端代码开发过程中开发者总会面临重复开发的痛点，很多CRUD页面的元素模块基本相似，但仍需手动开发，将时间花在简单的元素搭建上，降低了业务需求的开发效率，同时因为不同开发者的代码风格不一致，使得敏捷迭代时其他人上手成本较高。

AI代替简单脑力：AI大模型的不断发展，已经具备简单的理解能力，并可以进行语言到指令的转换。对于基础页面搭建这样的通用指令可以满足日常基础页面搭建的需要，提升通用场景业务开发效率。

二

生成链路一览

B端页面列表、表单、详情都支持生成，链路大概可分为以下几个步骤。

输入自然语言
结合大模型按照指定规则提取出相应搭建信息
搭建信息结合代码模板与AST输出前端代码

三

表达需求

图形化配置

辅助代码生成第一步是告诉它开发出怎样的界面，提到这里，我们首先想到的是页面配置，即目前主流的低代码产品形式，用户通过一系列的图形化配置对页面进行搭建，如下图：

以上配置方式对于通用场景（如后台逻辑较为简单的CURD页面）或是特定的业务场景（如会场搭建）有较好的提效作用。而对于需要不断迭代逻辑相对复杂的需求来说，由于是通过图形化操作的方式进行配置，对于交互设计要求较高，并且具备一定的上手成本，并且随着需求的复杂度越来越高，配置表单交互越来越复杂，维护成本也越来越高。因此，页面配置的方式前端领域的使用是相对克制的。

AI直接生成代码

AI生成代码在工具函数场景下应用较多，但对于公司内部特定业务场景的需求，可能需要考虑以下几点：

生成定制化：公司团队内部有自己的技术栈与重型通用组件，需要将这些知识进行预训练，目前对于长文本的预训练内容仅支持单次会话注入，token数消耗较高；
准确度：AI生成代码的准确度挑战是比较大的，加上预训练包含大段prompt，因为代码输出的内容细节过多，加上模型幻觉，目前来看业务代码的失败率是较高的，而准确度是考量辅助编码的核心指标，如果这一点无法解决，辅助编码效果将大打折扣；
生成内容残缺：由于GPT单次会话的存在限制，对于复杂需求，代码生成有一定几率被截断，影响生成成功率。

自然语言转指令

GPT其实还有个很重要的能力，那就是自然语言转指令，指令即行动，举个例子：我们假设一个函数方法实现，输入是自然语言，结合GPT与内置的prompt，让其稳定的输出某几个单词，我们是不是就可以通过对这些单词输出做出进一步的行动？这相对于图形化配置有以下几个优点：

学习门槛低：因为自然语言本身就是人类的原生语言，你只需要根据你的想法描述页面即可，当然描述的内容是需要遵循一些规范的，但相对于图形化配置来说效率是有明显提升的；
复杂度黑盒：图形化配置的复杂度会随着配置页面复杂度的上升而上升，而这样的复杂度会一览无余地展示在用户面前，用户可能会迷失在复杂的配置页面交互中，配置成本逐步上升；
敏捷迭代：如果要在用户端新增一个页面配置功能，基于大模型的交互方式可能只需要新增几个prompt，但图形化配置需要开发复杂表单以便于快速输入。

这里大家可能会有个疑问：

生成的指令信息不也会出现大模型幻觉吗？如何保证每次生成指令信息是稳定且一致的呢？

自然语言转指令可行大致有以下几个原因：

由长文本转关键信息属于总结内容，大模型在总结场景下的准确度远高于扩散型场景；
由于指令信息只是提取需求中的关键信息，不需要做代码技术栈上的预训练，因此prompt存在很大的可优化空间，通过优化完善prompt内容可以有效提升输出准确度；
准确性可验证，对于每一个场景不同表述需求输入，可以通过单测预测输出验证准确性，当出现badCase，我们在优化后针对该badCase接入单测。保证准确度不断提高。

让我们来看最终的信息转化结果：

对于代码辅助来说，基于用户的需求描述，经过PROMPT处理，可以拿到这样的信息。为代码生成提供基础信息。