Digital Form with GPT4 Vision API

GPT4 Vision APIを使用したPDFからデジタルフォーム

GPT 4 Vision APIを使用して、https：//jsonforms.io/のJSONフォームを使用して画像からデジタルフォームを生成するPOC

？に触発された：

1. スクリーンショットからコード：https：//github.com/abi/screenshot-to-code
2. Draw-a-ui：https：//github.com/sawyerhood/draw-a-ui

両方のリポジトリは、GPT4 Vision APIを使用して画像からUIを生成できることを示しており、画像で提供されるレイアウトのパターンと構造を認識できることを示しています。

Dall-E 3によって生成された画像。

デモ？

サムネイルをクリックしてYouTubeで監視してください。

私のgithubページで試してみてください

https://nathanfhh.github.io/digital-form-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=

Mock Responseのみを使用する場合のみ、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が初めてなので、コードがベストプラクティスではないかもしれません。私はまだ学び、改善しています。提案がある場合は、PRをお気軽にお問い合わせください。

フロー説明

1. フロントエンドから最大3ページの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の場合、UIに再レンダリングを強制するためにJSONスキームに適用します。