AI GIFs هو تطبيق قوي يتيح لك إنشاء صور GIF باستخدام تقنيات الذكاء الاصطناعي المتقدمة. سواء كنت تبحث عن ميمات فريدة من نوعها، أو رسوم متحركة آسرة، أو مجرد استكشاف حدود المحتوى الذي تم إنشاؤه بواسطة الذكاء الاصطناعي، فإن صور GIF المدعمة بالذكاء الاصطناعي ستلبي احتياجاتك.
لقد تم إنشاؤه من المبدئ الرسمي Next.js + TailwindCSS.
يهدف هذا الريبو، أثناء عرض تطبيق معين للذكاء الاصطناعي، إلى أن يكون بمثابة بداية. يمكنك أخذه وتعديل النموذج على الواجهة الخلفية (استكشاف الخيارات العديدة لعروض النسخ المتماثل)، وها هو، لديك تطبيق جديد!
أقوم بجولة سريعة حول هذا هنا.
فيما يلي الخطوات التي تم اتخاذها أثناء تطوير التطبيق. إنها بمثابة مبدأ توجيهي عام عند إنشاء تطبيق قائم على الذكاء الاصطناعي.
بنية التطبيق : بنية التطبيق واضحة ومباشرة. يقوم المستخدمون بإدخال مطالبة عبر نموذج. عند الإرسال، يتم تشغيل معالج مسار الواجهة الخلفية، والذي يقوم بعد ذلك باستدعاء نموذج الذكاء الاصطناعي وإرجاع النتيجة.
استضافة نماذج الذكاء الاصطناعي : لقد استخدمنا Replicate لاستضافة نموذج الذكاء الاصطناعي الخاص بنا. وهذا يلغي الحاجة إلى النشر الفردي، والتعامل مع الاستدلال، والقياس، والمهام المتعلقة بالمطورين والتي غالبًا ما تكون مرهقة.
التحسينات :
الاقتراحات السريعة : يمكن الاستفادة من المكتبات مثل promptmaker
أن يقوم بملء النموذج مسبقًا، مما يوفر للمستخدمين أفكارًا إبداعية.
حالة التحميل : لتحسين تجربة المستخدم أثناء انتظار النتائج، قمنا بتنفيذ صورة GIF للتحميل، بما يتماشى مع موضوع تطبيقنا.
فحوصات السلامة : للتصفية الأولية للمحتوى، تم استخدام مكتبة قديمة تسمى bad-words
. لإجراء المزيد من عمليات فحص المحتوى المتعمق، فكر في المكتبات الحديثة مثل nsfw-filter.
حدود الأسعار : قبل الإطلاق، خاصة بالنسبة للتطبيقات المجانية، من المهم مراعاة التكاليف المحتملة المرتبطة بالبنيات التي لا تحتوي على خادم. لتجنب الفواتير غير المتوقعة، قمنا بدمج حدود الأسعار باستخدام Upstash، مما يضمن تدفق الطلبات بشكل متحكم فيه. الإعداد خالي من المتاعب وفعال.
الآن، بعد أن أصبح كل شيء في مكانه الصحيح، أصبح من المغري دعوة المستخدمين على الفور. ومع ذلك، تأكد دائمًا من وضع التدابير الوقائية للحفاظ على الميزانية والأداء.
النشر : يتم نشر الموقع على Vercel.
تثبيت التبعيات :
تثبيت npm# oryarn# orpnpm install# orbun install
يستخدم هذا المستودع Replicate لاستدلال النموذج وUpstash لتحديد المعدل. تأكد من أن لديك حسابات تم إعدادها لكلا الخدمتين.
متغيرات البيئة المراد إضافتها :
قم بإنشاء ملف .env.local وأضف هذه المتغيرات.
REPLICATE_API_TOKEN= UPSTASH_REDIS_REST_URL= UPSTASH_REDIS_REST_TOKEN=
تشغيل خادم التطوير :
npm run dev# oryarn dev# orpnpm dev# orbun dev
افتح http://localhost:3000 باستخدام متصفحك لترى النتيجة.
يمكنك البدء في تحرير الصفحة عن طريق تعديل app/page.tsx
. يتم تحديث الصفحة تلقائيًا أثناء قيامك بتحرير الملف.
يستخدم هذا المشروع next/font
لتحسين وتحميل Inter تلقائيًا، وهو خط Google مخصص.
لمعرفة المزيد حول Next.js، قم بإلقاء نظرة على الموارد التالية:
وثائق Next.js - تعرف على ميزات Next.js وواجهة برمجة التطبيقات.
تعلم Next.js - برنامج تعليمي تفاعلي لـ Next.js.
يمكنك الاطلاع على مستودع Next.js GitHub - نرحب بتعليقاتك ومساهماتك!
أسهل طريقة لنشر تطبيق Next.js هي استخدام منصة Vercel من منشئي Next.js.
راجع وثائق نشر Next.js للحصول على مزيد من التفاصيل.