Digital Form with GPT4 Vision API

PDF для цифровой формы с использованием GPT4 Vision API

POC, который использует GPT 4 Vision API для генерации цифровой формы из изображения с использованием форм JSON с https://jsonforms.io/

? Вдохновлен:

1. Скриншот-код ： https: //github.com/abi/screenshot-to-code
2. Draw-a-ui ： https: //github.com/sawyerhood/draw-a-ui

Оба репозиториев демонстрируют, что API Vision GPT4 может использоваться для генерации пользовательского интерфейса из изображения и может распознать шаблоны и структуру макета, предоставленного на изображении.

Изображение, сгенерированное Dall-E 3.

Демонстрация?

Нажмите на миниатюру, чтобы посмотреть на YouTube:

Попробуйте на моей странице GitHub

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

Я использую pdf.js для обработки файла PDF и запроса в API OpenAI для создания ответа полностью в браузере.

Запуск с использованием местной среды

Внешний интерфейс

1. cd в ​​каталог Frontend

 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=

Если вы планируете использовать только фиктивный ответ, вы должны установить 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. Загрузить PDF -файлы до трех страниц с фронта

   Если вы хотите настроить количество страниц, вы можете изменить переменную MAX_PDF_PAGES в backend/app/socket.py

2. Когда бэкэнд получает файл PDF в формате строки BASE64, он выполняет следующие процессы:

   • Преобразовать строку URL обратно в байты
   • Прочитайте файл PDF, преобразуйте его в изображение JPG и сохраните его в папку /TMP, используя пакет pdf2image .
   • Извлеките строки из того же файла PDF, используя пакет PyPDF2 . Извлеченные строки станут частью подсказки, отправленной в модель GPT4 для повышения точности.
   • Подготовьте подсказки и отправьте их вместе с скриншотом PDF в API GPT4 Vision API
   • Отправьте кусок на фронт через Socket.io постепенно.

3. Всякий раз, когда фронт получает кусок, он добавляет его в редактор codemirror и проверяет, является ли текущий содержимое действительным YAML. Если это действительный YAML, он применит его к схеме JSON, чтобы заставить пользовательский интерфейс повторный рендеринг.