大模型构建表单与数据结构

Why?

起因是需要俺在短时间内完成20多张表单的填报(只是一小部分),纯属体力活,再加上时间紧任务重,于是探索有没有可以快速构建并填报的方法

经过

  1. 表单设计器FcDesigner无疑是一个很好的选择,丰富的控件,以及灵活的自定义方式,再加上活跃的社区让我爱不释手,但是社区版没有AI建表的功能,所以只能CV大法,复制字段,拖控件,粘贴,设置标题等一些属性,重复操作,然后又变成体力活了,然后这个途径就放弃了
  2. 接下来尝试通过大模型进行识别PDF中的表单,然后进行识别,生成一个表结构,然后再次交给大模型帮我生成FcDesigner的规则,理论上来说就可以减少我CV的工作量,然后还能帮我生成建表语句,岂不是很妙。

技术栈

  1. Langchain
  2. Vue
  3. TypeScript

前端存储API的KEY个人感觉十分不安全,但是只有自己用无所谓啦,要不然还得搞个后端走权限认证没时间了😅

开干

构建一个画布 🖼️

由于一个表单的存储涉及到了主子表,或者更复杂的存储结构,所以这里用一个画布然后采用不同颜色的矩形区域进行分表

接下来通过需要一个弹窗进行对不颜色区域的表单进行描述,为后期的大模型提示词构建做准备 这里采用了ElementPlus的InputTag组件

分析图片并构建数据结构

json 复制代码
{ type: 'image_url', image_url: '{base64}' }

将标注好的图片转base64编码后传给大模型

大模型处理结果

FcDesigner规则生成

接下来就是将大模型返回的数据结构信息再次回传给大模型然后帮我生成规则JSON

这里虽然顺利的生成了但是个别字段的必填属性任然得手动调整一下,无所谓了😅,只要不一直CV那就能接受

这里顺利预览,并且子表单的新增删除也都好使(其实本来也问题不大,毕竟渲染用的都是人家成熟的项目) 再次致敬开源😂

至此周末结束

相关推荐
饭后一颗花生米7 分钟前
2026 前端实战:AI 驱动下的性能优化与工程化升级
前端·人工智能·性能优化
YJlio15 分钟前
4月14日热点新闻解读:从金融数据到平台治理,一文看懂今天最值得关注的6个信号
java·前端·人工智能·金融·eclipse·电脑·eixv3
xjf771117 分钟前
AI重构前端项目指南
前端·ai·重构·编程
踩着两条虫21 分钟前
VTJ:应用场景展示
前端·vue.js·架构
恋恋风尘hhh28 分钟前
Web 前端安全机制分析:以 Webpack 打包混淆为例
前端·安全·webpack
ywf121530 分钟前
Spring aop 五种通知类型
java·前端·spring
Lee川32 分钟前
Go语言:并发编程的艺术与实践
前端
暗不需求32 分钟前
React新手小白:如何入门 React 响应式交互与 JSX 艺术
前端·react.js
隐退山林32 分钟前
JavaEE进阶:Spring Web MVC入门(1)
前端·spring·java-ee
前端缘梦33 分钟前
深入理解React Fiber架构:渲染流程与双缓冲机制全解析
前端·react.js·面试