Digital Form with GPT4 Vision API

PDF a forma digital utilizando GPT4 Vision API

Un POC que utiliza la API de Vision GPT 4 para generar una forma digital a partir de una imagen utilizando formularios JSON de https://jsonforms.io/

? Inspirado por:

1. captura de pantalla de captura a coodo: https: //github.com/abi/screenshot-to-code
2. Draw-a-ui: https: //github.com/sawyerhood/draw-a-aui

Ambos repositorios demuestran que la API de visión GPT4 se puede utilizar para generar una interfaz de usuario a partir de una imagen y puede reconocer los patrones y la estructura del diseño proporcionado en la imagen.

Imagen generada por Dall-E 3.

¿Demo?

Haga clic en la miniatura para ver en YouTube:

Pruébalo en mi página de Github

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

Estoy usando PDF.JS para procesar el archivo PDF y solicitar la API de OpenAI para generar la respuesta por completo en el navegador.

Ejecutando con un entorno local

Interfaz

1. cd en directorio frontend

 cd ai-json-form

2. Instalar paquetes y ejecutar

npm install
npm run dev

Backend

1. cd en directorio

 cd backend

2. Instalar paquetes

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

3. Configuración de variables de entorno

 export OPENAI_API_KEY=
# optional
export OPENAI_ORG=

Si planea usar solo la respuesta simulada, debe configurar OpenAI_API_KEY en cualquier valor.

4. Correr

python main.py

¿Correr usando Docker?

1. Exportar las variables de entorno

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

2. Ejecutar la composición de Docker

docker-compose up --build

3. Abra el navegador y visite http://localhost:8080/aijsv/

Descargo de responsabilidad

Soy nuevo en Vue, por lo que el código podría no ser la mejor práctica. Todavía estoy aprendiendo y mejorando. Si tiene alguna sugerencia, no dude en las relaciones públicas.

Flow Explicar

1. Sube archivos PDF de hasta tres páginas desde el frontend

   Si desea ajustar el número de páginas, puede cambiar la variable MAX_PDF_PAGES en backend/app/socket.py

2. Cuando el backend recibe el archivo PDF en formato de cadena Base64, realiza los siguientes procesos:

   • Convertir la cadena de URL de nuevo a bytes
   • Lea el archivo PDF, conviértalo en una imagen JPG y guárdelo en la carpeta /TMP usando el paquete pdf2image .
   • Extraiga las cadenas del mismo archivo PDF utilizando el paquete PyPDF2 . Las cadenas extraídas se convertirán en parte del aviso enviado al modelo GPT4 para mejorar la precisión.
   • Prepare las indicaciones y envíelas junto con la captura de pantalla PDF a la API de visión GPT4
   • Envíe la porción al frontend a través de Socket.io incrementalmente.

3. Cada vez que el frontend recibe el fragmento, lo agrega al editor codemirror y verifica si el contenido actual es un YAML válido. Si es un YAML válido, lo aplicará al esquema JSON para obligar a la interfaz de usuario a volver a renderizar.