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

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

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

至此周末结束

相关推荐
超哥--4 小时前
B站视频内容智能分析系统(九):React 前端与管理面板
前端·react.js·前端框架
Cutecat_7 小时前
视频字幕处理工具横向:提取模式 vs 编辑模式,该如何选择
android·前端·ios·语音识别
qq_422152577 小时前
PDF 加水印工具怎么选?2026 年文档版权保护方案对比
前端·pdf·github
kyriewen7 小时前
手写 Promise.all、race、any:不到 30 行代码,解决并发异步的所有姿势
前端·javascript·面试
brucelee1868 小时前
OpenClaw 浏览器控制(Chrome MCP)完整教程
前端·chrome
ct9788 小时前
React 状态管理方案深度对比
开发语言·前端·react
胡志辉的博客8 小时前
深入浅出理解浏览器事件循环:从一道输出题讲到 Chrome 源码
前端·javascript·chrome·chromium·event loop
代码不加糖9 小时前
js中不会冒泡的事件有哪些?
前端·javascript·vue.js
懂懂tty9 小时前
Vue2与Vue3之间API差异
前端·javascript·vue.js
AI焦点9 小时前
跨越协议鸿沟:Tool Use状态机从Anthropic到OpenAI兼容体系的适配要点
前端·人工智能