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

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那就能接受

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

至此周末结束

相关推荐
子兮曰6 小时前
async/await高级模式:async迭代器、错误边界与并发控制
前端·javascript·github
恋猫de小郭7 小时前
2026 Flutter VS React Native ,同时在 AI 时代 VS Native 开发,你没见过的版本
android·前端·flutter
GIS之路9 小时前
ArcGIS Pro 中的 Notebooks 入门
前端
IT_陈寒10 小时前
React状态管理终极对决:Redux vs Context API谁更胜一筹?
前端·人工智能·后端
Kagol11 小时前
TinyVue 支持 Skills 啦!现在你可以让 AI 使用 TinyVue 组件搭建项目
前端·agent·ai编程
柳杉11 小时前
从零打造 AI 全球趋势监测大屏
前端·javascript·aigc
simple_lau11 小时前
Cursor配置MasterGo MCP:一键读取设计稿生成高还原度前端代码
前端·javascript·vue.js
睡不着先生11 小时前
如何设计一个真正可扩展的表单生成器?
前端·javascript·vue.js
天蓝色的鱼鱼11 小时前
模块化与组件化:90%的前端开发者都没搞懂的本质区别
前端·架构·代码规范
明君8799711 小时前
Flutter 如何给图片添加多行文字水印
前端·flutter