Digital Form with GPT4 Vision API

PDF เป็นรูปแบบดิจิตอลโดยใช้ GPT4 Vision API

POC ที่ใช้ GPT 4 Vision API เพื่อสร้างรูปแบบดิจิตอลจากภาพโดยใช้รูปแบบ JSON จาก https://jsonforms.io/

- แรงบันดาลใจจาก:

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 และขอ API ของ OpenAI เพื่อสร้างการตอบสนองทั้งหมดในเบราว์เซอร์

ทำงานโดยใช้สภาพแวดล้อมในท้องถิ่น

ส่วนหน้า

1. cd ในไดเรกทอรีส่วนหน้า

 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 up --build

3. เปิดเบราว์เซอร์และเยี่ยมชม http://localhost:8080/aijsv/

คำเตือน

ฉันยังใหม่กับ Vue ดังนั้นรหัสอาจไม่ใช่แนวปฏิบัติที่ดีที่สุด ฉันยังคงเรียนรู้และปรับปรุง หากคุณมีคำแนะนำใด ๆ โปรดอย่าลังเลที่จะประชาสัมพันธ์

ไหลอธิบาย

1. อัปโหลดไฟล์ PDF สูงสุดสามหน้าจากส่วนหน้า

   หากคุณต้องการปรับจำนวนหน้าคุณสามารถเปลี่ยนตัวแปร MAX_PDF_PAGES ใน backend/app/socket.py

2. เมื่อแบ็กเอนด์ได้รับไฟล์ PDF ในรูปแบบสตริง Base64 จะทำกระบวนการต่อไปนี้:

   • แปลงสตริง URL กลับเป็นไบต์
   • อ่านไฟล์ PDF แปลงเป็นอิมเมจ JPG และบันทึกลงในโฟลเดอร์ /TMP โดยใช้แพ็คเกจ pdf2image
   • แยกสตริงจากไฟล์ PDF เดียวกันโดยใช้แพ็คเกจ PyPDF2 สตริงที่สกัดจะกลายเป็นส่วนหนึ่งของพรอมต์ที่ส่งไปยังโมเดล GPT4 เพื่อเพิ่มความแม่นยำ
   • เตรียมพรอมต์และส่งพวกเขาพร้อมกับภาพหน้าจอ PDF ไปยัง GPT4 Vision API
   • ส่งก้อนไปยังส่วนหน้าผ่านซ็อกเก็ตเพิ่มขึ้น

3. เมื่อใดก็ตามที่ส่วนหน้าได้รับก้อนมันจะต่อท้ายไปยังตัวแก้ไข codemirror และตรวจสอบว่าเนื้อหาปัจจุบันเป็น Yaml ที่ถูกต้องหรือไม่ หากเป็น Yaml ที่ถูกต้องมันจะนำไปใช้กับโครงการ JSON เพื่อบังคับให้ UI ทำการเรนเดอร์อีกครั้ง