Digital Form with GPT4 Vision API

GPT4 Vision API를 사용하여 PDF에서 디지털 형태로

GPT 4 Vision API를 사용하여 https://jsonforms.io/에서 JSON 양식을 사용하여 이미지에서 디지털 양식을 생성하는 POC

? 영감 :

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

두 리포지토리 모두 GPT4 Vision API가 이미지에서 UI를 생성하는 데 사용될 수 있으며 이미지에 제공된 레이아웃의 패턴과 구조를 인식 할 수 있음을 보여줍니다.

Dall-E 3에 의해 생성 된 이미지.

데모?

YouTube에서 시청하려면 축소판을 클릭하십시오.

내 github 페이지에서 시도해보십시오

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

PDF.JS를 사용하여 PDF 파일을 처리하고 OpenAI의 API를 요청하여 브라우저에서 완전히 응답을 생성합니다.

지역 환경을 사용하여 실행

프론트 엔드

1. cd into frontend directory

 cd ai-json-form

2. 패키지를 설치하고 실행하십시오

npm install
npm run dev

백엔드

1. cd into directory

 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. Open the browser and visit http://localhost:8080/aijsv/

부인 성명

Vue가 처음이므로 코드가 모범 사례가 아닐 수도 있습니다. 나는 여전히 배우고 개선하고 있습니다. 제안이 있으시면 PR을 자유롭게하십시오.

흐름 설명

1. 프론트 엔드에서 최대 3 페이지의 PDF 파일 업로드

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

2. 백엔드가 Base64 문자열 형식으로 PDF 파일을 수신하면 다음 과정을 수행합니다.

   • URL 문자열을 바이트로 다시 변환하십시오
   • 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 . 추출 된 문자열은 정확도를 높이기 위해 GPT4 모델로 전송 된 프롬프트의 일부가됩니다.
   • 프롬프트를 준비하고 PDF 스크린 샷과 함께 GPT4 Vision API로 보내십시오.
   • Socket.io를 통해 덩어리를 프론트 엔드로 보냅니다.

3. Whenever the frontend receives the chunk, it appends it to the codemirror editor, and checks if the current content is a valid YAML. 유효한 YAML 인 경우 JSON 제도에 적용하여 UI가 다시 렌더링하도록합니다.