Digital Form with GPT4 Vision API

PDF zu digitaler Form mit GPT4 Vision API

Ein POC, der GPT 4 Vision API verwendet, um eine digitale Form aus einem Bild mit JSON -Formularen aus https://jsonForms.io/ zu generieren

? Inspiriert von:

1. Screenshot-to-code: https: //github.com/abi/screenshot-to-code
2. Draw-a-ui: https: //github.com/sawyerhood/draw-a-ui

Beide Repositorys zeigen, dass die GPT4 -Sicht -API verwendet werden kann, um eine Benutzeroberfläche aus einem Bild zu erzeugen und die Muster und die Struktur des im Bild bereitgestellten Layouts zu erkennen.

Bild erzeugt von Dall-e 3.

Demo?

Klicken Sie auf das Miniaturbild, um auf YouTube zu sehen:

Probieren Sie es auf meiner Github -Seite aus

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

Ich verwende PDF.js, um die PDF -Datei zu verarbeiten und die API von Öffnen zu eröffnen, um die Antwort vollständig im Browser zu generieren.

Laufen mit der lokalen Umgebung

Frontend

1. cd into frontend directory

 cd ai-json-form

2. Pakete installieren und ausführen

npm install
npm run dev

Backend

1. cd into directory

 cd backend

2. Pakete installieren

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

3. Setup -Umgebungsvariablen

 export OPENAI_API_KEY=
# optional
export OPENAI_ORG=

Wenn Sie nur die Scheinantwort verwenden möchten, sollten Sie openai_api_key auf einen beliebigen Wert festlegen.

4. Laufen

python main.py

Laufen mit Docker?

1. Exportieren Sie die Umgebungsvariablen

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

2. Führen Sie den Docker-Compose aus

docker-compose up --build

3. Open the browser and visit http://localhost:8080/aijsv/

Haftungsausschluss

Ich bin neu in Vue, daher ist der Code möglicherweise nicht die beste Praxis. Ich lerne immer noch und verbessere mich. Sollten Sie Vorschläge haben, können Sie PR auch PR haben.

Fluss erklären

1. Laden Sie PDF -Dateien mit bis zu drei Seiten aus dem Frontend hoch

   If you want to adjust the number of pages, you can change the MAX_PDF_PAGES variable in backend/app/socket.py

2. Wenn das Backend die PDF -Datei im Basis64 -String -Format empfängt, werden die folgenden Prozesse durchgeführt:

   • Konvertieren Sie die URL -Zeichenfolge zurück in Bytes
   • Read the PDF file, convert it to a JPG image, and save it to the /tmp folder using the package pdf2image .
   • Extract the strings from the same PDF file using the package PyPDF2 . Die extrahierten Saiten werden Teil der Eingabeaufforderung, die an das GPT4 -Modell gesendet wird, um die Genauigkeit zu verbessern.
   • Bereiten Sie die Eingabeaufforderungen vor und senden Sie sie zusammen mit dem PDF -Screenshot an die GPT4 Vision API
   • Senden Sie den Chunk schrittweise über Socket.io an den Frontend.

3. Whenever the frontend receives the chunk, it appends it to the codemirror editor, and checks if the current content is a valid YAML. Wenn es sich um ein gültiges YAML handelt, wird es auf das JSON-Schema angewendet, um die Benutzeroberfläche zum erneuten Render zu zwingen.