用大模型做一个「表单配置助手」

wuwenzen@outlook.com (wuwj) — Mon, 05 Feb 2024 00:00:00 +0000

在很多中台系统里，「加一个表单页面」是非常常见的需求：

运营要配活动
风控要配规则
产品要加信息收集表单

常规流程比较重：写需求 → 画原型 → 前端实现 → 联调 → 上线。
对于那些只是字段多、变更频率高的小表单，其实有点浪费。

所以我们尝试做了一个小工具：

运营用自然语言描述表单，大模型帮忙产出一份「表单配置 JSON」，前端根据配置自动渲染。

这篇文章就简单记录一下实现思路。

1. 目标：从一句话到一份表单配置

我们给自己的目标很克制：

输入：一段自然语言描述，例如

“做一个录入投资人基本信息的表单，需要姓名、手机号、证件类型和证件号，手机号必填要校验格式，证件类型从下拉里选身份证/护照。”
输出：一份前端能直接使用的配置 JSON：
- 字段列表
- 字段类型、标签、占位
- 是否必填、校验规则
- 下拉选项等

前端只负责：

把描述提交给后端
拿到配置 JSON
交给通用 <FormRenderer :config="formConfig" /> 渲染

2. 配置格式：先把「机器读得懂」定义好

要让大模型产出可用结果，首先要有一份清晰的配置格式。示例：

{
  "title": "投资人信息录入",
  "layout": "vertical",
  "fields": [
    {
      "name": "name",
      "label": "姓名",
      "type": "input",
      "required": true,
      "placeholder": "请输入姓名"
    },
    {
      "name": "mobile",
      "label": "手机号",
      "type": "input",
      "required": true,
      "rules": [
        {
          "type": "regex",
          "pattern": "^1\\d{10}$",
          "message": "请输入 11 位手机号"
        }
      ]
    },
    {
      "name": "idType",
      "label": "证件类型",
      "type": "select",
      "required": true,
      "options": [
        { "label": "居民身份证", "value": "ID_CARD" },
        { "label": "护照", "value": "PASSPORT" }
      ]
    },
    {
      "name": "idNo",
      "label": "证件号码",
      "type": "input",
      "required": true
    }
  ]
}

前端已经有配套组件：

表单配置 on Saiga

用大模型做一个「表单配置助手」

1. 目标：从一句话到一份表单配置

2. 配置格式：先把「机器读得懂」定义好