Digital Form with GPT4 Vision API

PDF ke Formulir Digital Menggunakan API Visi GPT4

POC yang menggunakan GPT 4 Vision API untuk menghasilkan bentuk digital dari gambar menggunakan bentuk JSON dari https://jsonforms.io/

? Terinspirasi oleh:

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

Kedua repositori menunjukkan bahwa API penglihatan GPT4 dapat digunakan untuk menghasilkan UI dari gambar dan dapat mengenali pola dan struktur tata letak yang disediakan dalam gambar.

Gambar yang dihasilkan oleh Dall-E 3.

Demo?

Klik Thumbnail untuk ditonton di YouTube:

Cobalah di halaman GitHub saya

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

Saya menggunakan pdf.js untuk memproses file PDF dan meminta API OpenAI untuk menghasilkan respons sepenuhnya di browser.

Berlari Menggunakan Lingkungan Lokal

Frontend

1. cd ke Direktori Frontend

 cd ai-json-form

2. Instal Paket dan Jalankan

npm install
npm run dev

Backend

1. cd ke direktori

 cd backend

2. Instal Paket

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

3. Pengaturan Variabel Lingkungan

 export OPENAI_API_KEY=
# optional
export OPENAI_ORG=

Jika Anda berencana untuk menggunakan respons tiruan saja, Anda harus mengatur openai_api_key ke nilai apa pun.

4. Berlari

python main.py

Berlari menggunakan Docker?

1. Ekspor Variabel Lingkungan

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

2. Jalankan komposisi Docker

docker-compose up --build

3. Buka browser dan kunjungi http://localhost:8080/aijsv/

Penafian

Saya baru mengenal Vue, jadi kodenya mungkin bukan praktik terbaik. Saya masih belajar dan meningkatkan. Jika Anda memiliki saran, jangan ragu untuk PR.

Arus menjelaskan

1. Unggah file PDF hingga tiga halaman dari frontend

   Jika Anda ingin menyesuaikan jumlah halaman, Anda dapat mengubah variabel MAX_PDF_PAGES di backend/app/socket.py

2. Ketika backend menerima file PDF dalam format string base64, ia melakukan proses berikut:

   • Konversi string URL kembali ke byte
   • Baca file PDF, konversinya ke gambar JPG, dan simpan ke folder /TMP menggunakan paket pdf2image .
   • Ekstrak string dari file PDF yang sama menggunakan paket PyPDF2 . String yang diekstraksi akan menjadi bagian dari prompt yang dikirim ke model GPT4 untuk meningkatkan akurasi.
   • Siapkan petunjuk dan kirimkan mereka bersama dengan tangkapan layar PDF ke GPT4 Vision API
   • Kirim chunk ke frontend melalui socket.io secara bertahap.

3. Setiap kali frontend menerima potongan, ia menambahkannya ke editor codemirror , dan memeriksa apakah konten saat ini adalah YAML yang valid. Jika ini adalah YAML yang valid, itu akan menerapkannya pada skema JSON untuk memaksa UI untuk merendahkan kembali.