Digital Form with GPT4 Vision API

PDF à la forme numérique à l'aide de l'API Vision GPT4

Un POC qui utilise GPT 4 Vision API pour générer une forme numérique à partir d'une image utilisant des formulaires JSON à partir de https://jsonforms.io/

? Inspiré par:

1. Capture d'écran à code: https: //github.com/abi/screenshot-tocode
2. Draw-A-UI ： https: //github.com/sawyerhood/draw-a-ui

Les deux référentiels démontrent que l'API de vision GPT4 peut être utilisée pour générer une interface utilisateur à partir d'une image et peut reconnaître les motifs et la structure de la disposition fournie dans l'image.

Image générée par Dall-E 3.

Démo?

Cliquez sur la vignette pour regarder sur YouTube:

Essayez-le sur ma page github

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

J'utilise PDF.js pour traiter le fichier PDF et demander à l'API d'OpenAI pour générer entièrement la réponse dans le navigateur.

Courir en utilisant un environnement local

L'extrémité avant

1. cd dans Frontend Directory

 cd ai-json-form

2. Installez les packages et exécutez

npm install
npm run dev

Backend

1. cd dans le répertoire

 cd backend

2. Installer des packages

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

3. Variables d'environnement de configuration

 export OPENAI_API_KEY=
# optional
export OPENAI_ORG=

Si vous prévoyez d'utiliser la réponse simulée uniquement, vous devez définir OpenAI_API_KEY à n'importe quelle valeur.

4. Courir

python main.py

En fonctionnement à l'aide de Docker?

1. Exporter les variables environnementales

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

2. Exécuter le docker-compose

docker-compose up --build

3. Ouvrez le navigateur et visitez http://localhost:8080/aijsv/

Clause de non-responsabilité

Je suis nouveau à Vue, donc le code n'est peut-être pas la meilleure pratique. J'apprends et m'améliore toujours. Si vous avez des suggestions, n'hésitez pas à faire des relations publiques.

Flux expliquer

1. Télécharger des fichiers PDF de trois pages du frontend

   Si vous souhaitez ajuster le nombre de pages, vous pouvez modifier la variable MAX_PDF_PAGES dans backend/app/socket.py

2. Lorsque le backend reçoit le fichier PDF au format de chaîne Base64, il effectue les processus suivants:

   • Convertir la chaîne d'URL en octets
   • Lisez le fichier PDF, convertissez-le en une image JPG et enregistrez-le dans le dossier / TMP à l'aide du package pdf2image .
   • Extraire les chaînes du même fichier PDF à l'aide du package PyPDF2 . Les chaînes extraites feront partie de l'invite envoyée au modèle GPT4 pour améliorer la précision.
   • Préparez les invites et envoyez-les avec la capture d'écran PDF à l'API GPT4 Vision
   • Envoyez le morceau sur le frontend via socket.io progressivement.

3. Chaque fois que le frontend reçoit le morceau, il l'ajoute à l'éditeur codemirror et vérifie si le contenu actuel est un YAML valide. S'il s'agit d'un YAML valide, il l'appliquera au régime JSON pour forcer l'interface utilisateur à renvoyer.