Digital Form with GPT4 Vision API

PDF使用GPT4 Vision API到数字形式

使用GPT 4 Vision API的POC使用https://jsonforms.io/的JSON表单从图像中生成数字形式

？灵感来自：

1. 屏幕截图：https：//github.com/abi/screenshot-to-code
2. draw-a-ui：https：//github.com/sawyerhood/draw-a-ui

两个存储库都表明，GPT4视觉API可用于从图像中生成UI，并可以识别图像中提供的布局的模式和结构。

DALL-E 3产生的图像。

演示？

单击缩略图以在YouTube上观看：

在我的github页面上尝试

https://nathanfhh.github.io/digital-form-with-with-gpt4-vision-api/

我正在使用pdf.js处理PDF文件并请求OpenAI的API，以完全在浏览器中生成响应。

使用本地环境运行

前端

1. cd进入前端目录

 cd ai-json-form

2. 安装软件包并运行

npm install
npm run dev

后端

1. cd进入目录

 cd backend

2. 安装软件包

poetry install
# alternatively, you can use pip install
pip install -r requirements.txt

3. 设置环境变量

 export OPENAI_API_KEY=
# optional
export OPENAI_ORG=

如果您计划仅使用模拟响应，则应将OpenAI_API_KEY设置为任何值。

4. 跑步

python main.py

使用Docker跑步？

1. 导出环境变量

 echo " OPENAI_API_KEY=YOUR_API_KEY " > .env
# The following is optional
echo " OPENAI_ORG=YOUR_ORG " >> .env

2. 运行Docker-Compose

docker-compose up --build

3. 打开浏览器并访问http://localhost:8080/aijsv/

免责声明

我是Vue的新手，因此代码可能不是最佳实践。我仍在学习和进步。如果您有任何建议，请随时进行公关。

流解释

1. 从前端上传最多三页的PDF文件

   如果要调整页数，则可以更改backend/app/socket.py中的MAX_PDF_PAGES变量

2. 当后端以Base64字符串格式接收PDF文件时，它会执行以下过程：

   • 将URL字符串转换回字节
   • 读取PDF文件，将其转换为JPG图像，然后使用软件包pdf2image将其保存到 /TMP文件夹中。
   • 使用软件包PyPDF2从同一PDF文件中提取字符串。提取的字符串将成为发送到GPT4模型的提示的一部分，以提高准确性。
   • 准备提示并将它们与PDF屏幕截图一起发送到GPT4 Vision API
   • 通过socket.io增量将块发送到前端。

3. 每当前端收到块时，它都会将其附加到codemirror编辑器，并检查当前内容是否是有效的YAML。如果是有效的YAML，它将将其应用于JSON计划，以迫使UI重新渲染。