ai outpainting com

مجموعة من قوالب الأكواد المناسبة لمختلف محطات أدوات الصور التي تعمل بتقنية الذكاء الاصطناعي

عرض تجريبي للموقع الحقيقي

• https://www.ai-outpainting.com

لقطة شاشة للموقع

• الصفحة الرئيسية

• صفحة الأسعار

• قائمة المدونات

• تحرير الصور

مقدمة المشروع

• 1. موقع ويب لتوسيع الصور بتقنية الذكاء الاصطناعي تم تطويره استنادًا إلى nextjs 14 وtailwindcss3، عنوان الموقع: https://www.ai-outpainting.com/

• 2. يجب استخدام موقع الويب مع نموذج الذكاء الاصطناعي الخلفي. يجب بناء النموذج الخلفي بنفسك.

• عنوان النموذج: https://huggingface.co/spaces/fffiloni/diffusers-image-outpaint

• 3. يتم تنفيذ التدويل باستخدام lingui. وتتمثل ميزة هذا مقارنة بـ next-intl في عدم الحاجة إلى إنشاء مفتاح لكل نسخة، حيث سيتم استخراج النسخة من خلال الأوامر لإنشاء ملفات متعددة اللغات. ثم قم بالترجمة بناءً على ملفات متعددة اللغات

• 4. قام المشروع بكتابة بعض النصوص الآلية، مثل الترجمة الآلية للمحتوى الدولي والترجمة الآلية لمحتوى المدونة. يجب تشغيلها يدويًا عند الضرورة

• 5. يعتمد المشروع على قاعدة البيانات، وتخزين cloudfare r2، والمعلمات المطلوبة لتسجيل الدخول إلى Google، ومعلمات الدفع عبر paypal. ويتم تكوين هذه المعلمات في ملفات .env و.env.production.

• 6. استخدم المصادقة التالية لدمج تسجيل الدخول إلى Google. إذا كنت بحاجة إلى تسجيل الدخول باستخدام Google أثناء التطوير المحلي، فستحتاج إلى تعديل بعض التعليمات البرمجية المصدر، وإلا سيتم الإبلاغ عن خطأ. يرجى الاطلاع على الوصف أدناه للحصول على تعديلات محددة.

• 7. الدفع بالباي بال والشريط المتكامل. يتم استخدام بيئة الحماية للتطوير المحلي. بالنسبة للبيئة الرسمية، يجب تكوين معلمات paypal الرسمية في ملف .env.production.

• 8. الطريقة التي يطلق بها المشروع الحالي على نموذج الذكاء الاصطناعي هي كما يلي تقريبًا:

• قم بتحميل نتائج المعالجة إلى وحدة تخزين cloudfare r2، واتصل بعنوان رد الاتصال لتحديث حالة الطلب الخاص بموقع الويب الحالي

• يتم إرسال نتائج المعالجة إلى قائمة انتظار MQ في نفس الوقت، ويتم دفعها إلى الواجهة الأمامية بواسطة خدمة مدير قائمة انتظار MQ. بعد أن تتلقى الواجهة الأمامية نتائج المعالجة، يتم عرض النتائج على صفحة الواجهة الأمامية.

• تبدأ الواجهة الأمامية طلبًا لإنشاء طلب، وتحمل رقم الطلب وعنوان رد الاتصال لتحديث حالة طلب موقع الويب الحالي، وتستدعي خدمة مدير قائمة الانتظار MQ (هذه خدمة صغيرة تم تطويرها في لغة بايثون، وليس لدي وقت لفرزها) رمز في الوقت الحاضر)

• قم ببدء طلب SSE إلى الواجهة الخلفية لخدمة إدارة قائمة الانتظار MQ، واستمر في الانتظار حتى تكتمل خدمة إدارة قائمة الانتظار MQ، وقم بإرجاع النتيجة.

• بعد تلقي الطلب، تقوم خدمة مدير قائمة انتظار MQ الخلفية بإرسال معلومات الطلب مباشرة إلى قائمة انتظار MQ.

• يستمع خادم GPU إلى قائمة انتظار MQ، بعد الحصول على معلومات الطلب، يبدأ في استدعاء نموذج الذكاء الاصطناعي للمعالجة، وبعد اكتمال المعالجة، سيقوم بأمرين:

• لا تتضمن العملية برمتها اتصالاً مباشرًا بين موقع الويب وخادم GPU، بل يتم إعادة توجيهها من خلال خدمة مدير قائمة الانتظار MQ، ويتم نقل الملفات من خلال تخزين R2. وهذا يحل مشكلة الاقتران بين خادم GPU وموقع الويب حجم الطلب كبير جدًا، ويمكن إضافة وحدة معالجة الرسومات في أي وقت، ولا يتطلب الخادم أي تعديلات على موقع الويب.

• 9. المخطط العام للهندسة المعمارية هو كما يلي:

• 10. حل تنفيذي آخر

• قم بتحميل نتائج المعالجة إلى وحدة تخزين cloudfare r2، واتصل بعنوان رد اتصال تحديث حالة الطلب الخاص بموقع الويب الحالي لتحديث حالة الطلب

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

• هناك برامج أخرى على الواجهة الخلفية تقوم بفحص قاعدة البيانات بانتظام والحصول على الطلبات بحالة الطلب المعلقة، وبعد الحصول على معلومات الطلب، تبدأ في استدعاء نموذج الذكاء الاصطناعي للمعالجة، وسيكون هناك شيئين منتهي:

• 11. إذا كانت لديك الميزانية، فيمكنك أيضًا التفكير في استخدام خدمة API الخاصة بـ runpod مباشرة، ولا تحتاج إلى تنفيذ خادم مدير قائمة الانتظار MQ بنفسك، فقط قم بدمج SDK الخاص به.

• الرمز المرجعي

 استيراد runpodSdk، { EndpointCompletedOutput، EndpointIncompleteOutput } من وظيفة 'runpod-sdk'async fetchProcessByRunPod (البيانات: أي): Promise<EndpointIncompleteOutput غير محدد> {
// const serverUrl = `${UE_PROCESS_API}/create_docker`
// https://docs.runpod.io/serverless/endpoints/job-operations
const runpod = runpodSdk("N5Jxxxxxxxxxxxxx");
const endpoint = runpod.endpoint("1zgk5xi3ew77pv");
console.log("بدء استدعاء نقطة نهاية runpod، البيانات:"، البيانات)
إرجاع نقطة النهاية؟.تشغيل({"الإدخال": البيانات،
})}

• إذا كنت بحاجة إلى الاستخدام الكامل لوظيفة توسيع صورة الذكاء الاصطناعي في الكود المصدري للمشروع الحالي، فأنت بحاجة إلى اختيار حل كما هو موضح أعلاه وتعديل منطق إنشاء الطلبات ومراقبة حالة الطلب في التطبيق/[lang]/(editor) )/editor/view.tsx الملف! ! !

اعتبارات أخرى

• في كل مرة يتم فيها تعديل الصفحة لتحتوي على محتوى جديد، تحتاج إلى تنفيذ أمرستخرج yarn extract لاستخراج النسخة الجديدة إلى الملف الدولي، وتنفيذ أمر yarn translate لترجمة النسخة إلى اللغة المقابلة.

• إذا كانت هناك مقالات مدونة جديدة، فأنت بحاجة إلى تنفيذ أمر yarn translate لترجمة محتوى المدونة الجديد إلى اللغة المقابلة.

• تتضمن الترجمة استدعاء واجهة برمجة التطبيقات (API). تحتاج إلى التقدم بطلب للحصول على مفتاح واجهة برمجة التطبيقات (API) أولاً، ثم تعديل مفتاح واجهة برمجة التطبيقات (API) في scripts/openai-chat.js

• إذا كنت بحاجة إلى إضافة محتوى متعدد اللغات أو تقليله، فأنت بحاجة إلى تعديل هذه الملفات الثلاثة: Framework/locale/locale.ts Framework/locale/localeConfig.js Framework/locale/messagesLoader.ts

عملية موقع ويب جديدة تعتمد على القالب

1. إنشاء محتوى موقع الويب

• استخدم الأمر Node scripts/generator-website.js مباشرةً لإنشاء محتوى موقع الويب (سيقوم هذا الأمر بإنشاء عناوين النسخ وTDK والمدونات المتعلقة بالكلمات الرئيسية المحددة)

• تحتاج إلى تعديل الكلمات الأساسية والوصف أولاً، ثم تنفيذ الأمر

 // الكلمة الرئيسية لموقع الويب const الكلمة الرئيسية = 'تمديد الصورة ai'
// ينبغي وصف موقع الويب const description = 'استخدم تقنية الذكاء الاصطناعي لتوسيع الصورة، مع ضمان بقاء الصورة الأصلية دون تغيير، وتوسيع المحتوى المحيط، والحفاظ على استمرارية المحتوى مع الصورة الأصلية

• قم بتعديل معلومات التكوين في config/site.ts

2. استبدال شعار الموقع والعنوان والمعلومات الأخرى

• ضع شعارك favicon.ico في الدليل public/ واستبدل الملف الأصلي مباشرةً

• قم بتعديل اسم المجال في public/sitemap.xml

• قم بتعديل معلومات التكوين في .env و.env.production، يرجى الاطلاع على التعليقات لمعرفة متطلبات التعديل المحددة.

3. تهيئة قاعدة البيانات

• يستخدم المشروع الحالي prisma كإطار عمل ORM. تم الإعلان عن بنية الجدول في ملف schema.prisma. لاستخدامه لأول مرة، تحتاج إلى تنفيذ الأمر التالي

 // سيقوم هذا الأمر بإنشاء جدول قاعدة بيانات بناءً على إعلان بنية الجدول وتهيئة بيانات الجدول. إذا كانت هناك تحديثات جديدة لحقل الجدول، فستحتاج إلى تنفيذ الأمر الحالي الغزل pg:migrate
// بالنسبة لأوامر التشغيل الأخرى، يوصى بقراءة وثائق Prisma الرسمية مباشرة.

4. تعديل لون الموقع

• يتم تخزين معلومات مطابقة الألوان لموقع الويب في ملف tailwind.config.ts. إذا كنت بحاجة إلى تعديل مطابقة الألوان، فقم بتعديل المحتوى مباشرة في ملف tailwind.config.ts.

5. نشر النظام

• أرسل الكود إلى github.com ثم استخدم vercel لربط مستودع الكود للنشر. يرجى الرجوع إلى المستندات ذات الصلة للعملية المحددة.

تحديث السجل

• 【19-10-2024】 حل Error: ENOENT: no such file or directory xxx/.next/fallback-build-manifest.json عن طريق إصلاح "@lingui/swc-plugin": "4.0.8" ، تم حل النسخة احذف دليل Node_modules المحلي وأعد تثبيت التبعيات لحل المشكلة.

• أضف لقطة شاشة مرجعية لتكوين تسجيل الدخول إلى Google

• 【2024-10-20】 حل مشكلة Error: Cannot find module 'canvas' عند بدء التشغيل عن طريق إضافة مكون إضافي لتجاهل حزمة الويب. تحسين طريقة تحميل الملفات متعددة اللغات.

مكونات واجهة المستخدم المستخدمة في المشروع الحالي

• 1. موقع مكون كود tailwindcss النقي

  يمكن نسخ بعض أكواد المكونات الجاهزة مباشرةً من موقع الويب وتنفيذها بالكامل بناءً على tw

• 2. إطار عمل واجهة المستخدم القائم على المكونات-nextui.org

  يوفر الاستخدام المباشر على أساس المكونات المغلفة

• 3.أيقونات تفاعل المكونات

  يوفر مجموعات متعددة من الرموز الافتراضية التي يمكن استخدامها مباشرة

• 4.إنشاء صفحة التسعير

  com.shipixen

• 5. التدويل

  إنشاء ملفات التدويل بشكل حيوي

• 6.مدكس مدونة

  قم بإنشاء محتوى مدونة يعتمد على MDX

• 7.مركز تكوين مصادقة Google

  تكوين المعلمات المطلوبة لتسجيل الدخول إلى Google

مرجع تكوين مصادقة جوجل

• في بيئة تطوير المشروع الحالية، يتم استخدام عنوان وكيل مخصص لحل مشكلة عدم القدرة على الاتصال بـ google.com محليًا. للحصول على تكوين محدد، راجع الكود config/auth-config.ts. لا تتأثر بيئة الإنتاج

حل مشكلة توليد المنشور عند بناء vercel

https://www.prisma.io/docs/orm/more/help-and-troubleshooting/help-articles/vercel-caching-issue

حل مشكلة عدم القدرة على فتح تسجيل الدخول إلى Google محليًا

• عند النقر على Google لتسجيل الدخول، تطالب الصفحة There is a problem with the server configuration. تطالب الواجهة الخلفية [auth][error] OperationProcessingError: "response" body "issuer" property does not match the expected value ، قم بتعديلها على النحو التالي.

• تعديل الملفNode_modules/@auth/core/node_modules/oauth4webapi/build/index.js أو الملفNode_modules/oauth4webapi/dist/index.js

• بعد التعديل، تحتاج إلى حذف الدليل .next يدويًا وإعادة ترجمته.

• السطر 1034 أو 1003 أو 1237 (قد تختلف الإصدارات المختلفة)، قم بالتعليق على الاستثناء الذي تم طرحه. قد لا تكون بعض الإصدارات الجديدة موجودة بالضرورة في هذا السطر. يمكنك الرجوع إلى النقاط التالية للعثور على رسالة الخطأ، ثم التعليق عليها.

 وظيفة التحقق من صحة الإصدار (المتوقع، النتيجة) {
إذا (result.claims.iss !== متوقع) {// throw new OPE('قيمة مطالبة JWT "iss" (المصدر) غير متوقعة');
}
نتيجة الإرجاع؛}

• السطر 250 أو 238 (قد يكون مختلفًا في الإصدارات المختلفة)، قم بالتعليق على الاستثناء الذي تم طرحه

 إذا (URL الجديد (json.issuer).href !== المتوقعIssuerIdentifier.href) {
// طرح OPE جديد('"الاستجابة" نص "المصدر" لا يتطابق مع "المصدر المتوقع"');}

• بعد التعديل، تحتاج إلى حذف الدليل .next يدويًا وتنفيذ تشغيل dev مرة أخرى.

زيادة كثافة الكلمات للكلمة في اللغة

• قم بتعديل رمز اللغة والكلمات المستهدفة لضبط كثافة الكلمات في البرامج النصية/add-word-locale.js

• قم بتنفيذ الأمر في دليل البرامج النصية/ القرص المضغوط: bun run add-word-locale.js أو node add-word-locale.js

بيان حقوق التأليف والنشر

• يعتمد هذا المشروع ترخيص MIT مفتوح المصدر، يرجى الالتزام بمضمون الاتفاقية

• إذا كنت على استعداد، يرجى ترك رابط لموقع الويب الخاص بي: https://www.ai-outpainting.com/ شكرًا جزيلاً لك!

أخيرا

• إذا كان المشروع مفيدًا لك، يرجى إعطائه نجمة، شكرًا جزيلاً لك!

• إذا كانت لديك أي أسئلة فنية، فيرجى إضافة WeChat للتواصل: fafafa-ai

• إعلان صغير: يقبل موقع ai-outpainting الحالي التقديم المدفوع للروابط الخارجية، ويمكن للأصدقاء المحتاجين الاتصال بي.