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

يوضح كلا المستودعين أنه يمكن استخدام واجهة برمجة تطبيقات GPT4 Vision لإنشاء واجهة مستخدم من صورة ويمكن أن يتعرف على أنماط وهيكل التصميم المقدم في الصورة.

الصورة التي تم إنشاؤها بواسطة Dall-E 3.

العرض التوضيحي؟

انقر فوق الصورة المصغرة للمشاهدة على YouTube:

جربه على صفحة github الخاصة بي

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

أنا أستخدم pdf.js لمعالجة ملف PDF وطلب واجهة برمجة تطبيقات 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-Corm

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
   • أرسل الجزء إلى الواجهة الأمامية عبر Socket.io بشكل تدريجي.

3. عندما تتلقى الواجهة الأمامية الجزء ، فإنه يلحقه بمحرر codemirror ، ويتحقق مما إذا كان المحتوى الحالي هو yaml صالح. إذا كان YAML صالحًا ، فسيقوم بتطبيقه على مخطط JSON لإجبار واجهة المستخدم على إعادة تقديم العروض.