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重新渲染。