Digital Form with GPT4 Vision API

PDF para formulário digital usando API de visão GPT4

Um POC que usa a API do GPT 4 Vision para gerar um formulário digital a partir de uma imagem usando formulários JSON de https://jsonforms.io/

? Inspirado em:

1. Captura de tela para código: https: //github.com/abi/screenshot-to-code
2. draw-a-ui: https: //github.com/sawyerhood/draw-a-ui

Ambos os repositórios demonstram que a API de visão GPT4 pode ser usada para gerar uma interface do usuário a partir de uma imagem e pode reconhecer os padrões e a estrutura do layout fornecido na imagem.

Imagem gerada por Dall-e 3.

Demonstração?

Clique na miniatura para assistir no YouTube:

Experimente na minha página do Github

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

Estou usando o PDF.js para processar o arquivo PDF e solicitar à API do OpenAI que gerar inteiramente a resposta no navegador.

Correndo usando o ambiente local

Front-end

1. cd em diretório de front -end

 cd ai-json-form

2. Instale pacotes e execute

npm install
npm run dev

Back -end

1. cd no diretório

 cd backend

2. Instale pacotes

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

3. Variáveis ​​de ambiente de configuração

 export OPENAI_API_KEY=
# optional
export OPENAI_ORG=

Se você planeja usar apenas a resposta simulada, definirá o OpenAI_API_KEY para qualquer valor.

4. Correr

python main.py

Correndo usando o Docker?

1. exportar as variáveis ​​ambientais

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

2. Execute o Docker-Compose

docker-compose up --build

3. Abra o navegador e visite http://localhost:8080/aijsv/

Isenção de responsabilidade

Eu sou novo no Vue, então o código pode não ser a melhor prática. Ainda estou aprendendo e melhorando. Se você tiver alguma sugestão, sinta -se à vontade para pr.

Fluxo Explique

1. Carregue arquivos PDF de até três páginas do front -end

   Se você deseja ajustar o número de páginas, poderá alterar a variável MAX_PDF_PAGES em backend/app/socket.py

2. Quando o back -end recebe o arquivo PDF no formato Base64 String, ele faz os seguintes processos:

   • Converta a sequência de URL de volta em bytes
   • Leia o arquivo PDF, converta -o em uma imagem JPG e salve -o na pasta /tmp usando o pacote pdf2image .
   • Extraia as seqüências do mesmo arquivo PDF usando o pacote PyPDF2 . As cordas extraídas se tornarão parte do prompt enviado ao modelo GPT4 para aumentar a precisão.
   • Prepare os avisos e envie -os junto com a captura de tela do PDF para a API do GPT4 Vision
   • Envie o pedaço para o front -end via soquete.io de forma incremental.

3. Sempre que o front -end recebe o pedaço, ele o anexa ao editor codemirror e verifica se o conteúdo atual é um YAML válido. Se for um YAML válido, ele o aplicará ao esquema JSON para forçar a interface do usuário a renderizar novamente.