Why?
起因是需要俺在短时间内完成20多张表单的填报(只是一小部分),纯属体力活,再加上时间紧任务重,于是探索有没有可以快速构建并填报的方法
经过
- 表单设计器
FcDesigner
无疑是一个很好的选择,丰富的控件,以及灵活的自定义方式,再加上活跃的社区让我爱不释手,但是社区版没有AI建表的功能,所以只能CV大法,复制字段,拖控件,粘贴,设置标题等一些属性,重复操作,然后又变成体力活了,然后这个途径就放弃了 - 接下来尝试通过大模型进行识别PDF中的表单,然后进行识别,生成一个表结构,然后再次交给大模型帮我生成
FcDesigner
的规则,理论上来说就可以减少我CV的工作量,然后还能帮我生成建表语句,岂不是很妙。
技术栈
- Langchain
- Vue
- TypeScript
前端存储API的KEY个人感觉十分不安全,但是只有自己用无所谓啦,要不然还得搞个后端走权限认证没时间了😅
开干
构建一个画布 🖼️
由于一个表单的存储涉及到了主子表,或者更复杂的存储结构,所以这里用一个画布然后采用不同颜色的矩形区域进行分表

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

分析图片并构建数据结构
json
{ type: 'image_url', image_url: '{base64}' }
将标注好的图片转base64编码后传给大模型
大模型处理结果


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

这里虽然顺利的生成了但是个别字段的必填属性任然得手动调整一下,无所谓了😅,只要不一直CV那就能接受
这里顺利预览,并且子表单的新增删除也都好使(其实本来也问题不大,毕竟渲染用的都是人家成熟的项目) 再次致敬开源😂

至此周末结束
