الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

غطاء

نقدم لكم Magician AI، وهي منصة تفاعلية للغاية تستفيد من قوة OpenAI's GPT-3.5 لإنشاء النصوص وDALL-E لإنشاء الصور. بالإضافة إلى تكرار الذكاء الاصطناعي لإنشاء الأغاني والفيديو. من خلال منصتنا، يمكنك التواصل مع الذكاء الاصطناعي، ومطالبته بكتابة التعليمات البرمجية، ووصف الصور أو مقاطع الفيديو التي سيتم إنشاؤها، والمزيد. واجهتنا سهلة الاستخدام ومصممة لتوفير تجربة مثيرة وإبداعية. تم تصميمه للتعامل مع الاشتراكات والمدفوعات باستخدام Stripe، ويحصل المستخدمون على استخدامات أولية محدودة ويمكنهم الاشتراك لاحقًا للوصول المستمر.

متطلبات

لتشغيل المشروع تحتاج إلى:

  • العقدة 18 LTS

  • Next.JS 13+

سمات

توفر منصتنا العديد من الميزات الفريدة والجذابة لاستكشافها:

المصادقة وإدارة الحساب

يضمن نظامنا تجارب مستخدم سلسة وآمنة:

  • يمكن للمستخدمين التسجيل باستخدام البريد الإلكتروني وكلمة المرور

  • يمكن للمستخدمين التسجيل باستخدام موفري مصادقة خارجيين مثل Google وGitHub

  • يمكن للمستخدمين تسجيل الدخول باستخدام البريد الإلكتروني وكلمة المرور

  • يمكن للمستخدمين تسجيل الخروج

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

المحادثات

يمكن للمستخدمين إجراء محادثات غنية مع الذكاء الاصطناعي:

  • اطلب من الذكاء الاصطناعي إنشاء نص بناءً على المطالبات المحددة

  • ناقش مواضيع مختلفة بطريقة محادثة مع الذكاء الاصطناعي

توليد الكود

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

  • اطلب من الذكاء الاصطناعي كتابة التعليمات البرمجية بناءً على متطلبات محددة

  • يوفر الذكاء الاصطناعي مقتطفًا برمجيًا تم إنشاؤه مع شرح

توليد الصور

يقوم الذكاء الاصطناعي بإنشاء صور من أوصاف المستخدم:

  • يصف المستخدمون الصورة

  • يقوم الذكاء الاصطناعي بإنشاء عدد من الصور المطابقة لهذا الوصف بدقة محددة

توليد الفيديو

استمتع بإبداع الذكاء الاصطناعي من خلال إنشاء الفيديو:

  • يصف المستخدمون مقطع فيديو

  • يقوم الذكاء الاصطناعي بإنشاء مقطع فيديو بناءً على الوصف المقدم

يرجى ملاحظة أنه بعد عدد محدود من الاستخدامات، يجب على المستخدمين الاشتراك لمواصلة الوصول إلى هذه الميزات. تتم إدارة الدفع والاشتراكات بشكل آمن باستخدام Stripe.

مكدس التكنولوجيا

يستخدم مشروع Magician AI مجموعة قوية من التقنيات الحديثة لتقديم تجربة مستخدم عالية الجودة:

الواجهة الأمامية

  • Next.js : إطار عمل قائم على React يقدم أدوات واتفاقيات للتطبيقات المقدمة من جانب الخادم (SSR) وتطبيقات الويب التي تم إنشاؤها بشكل ثابت.

  • Tailwind CSS : إطار عمل CSS ذو فائدة أولى يعزز التصميم عالي الاستجابة والقابل للتخصيص.

  • Shadcn UI : مجموعة من المكونات القابلة لإعادة الاستخدام والتي يمكن الوصول إليها والتخصيص والتي تم إنشاؤها باستخدام Radix UI وTailwind CSS. توفر Shadcn UI بداية سهلة للمطورين، بغض النظر عن خبرتهم في التعامل مع مكتبات المكونات.

الخلفية

  • Node.js : بيئة تشغيل JavaScript تقوم بتنفيذ تعليمات JavaScript البرمجية خارج متصفح الويب.

  • Prisma : ORM مفتوح المصدر يوفر عميلاً آمنًا للاستعلامات الفعالة والخالية من الأخطاء.

  • Axios : عميل HTTP قائم على الوعد يُستخدم لتقديم طلبات HTTP.

  • Clerk Auth : منصة مصادقة وإدارة مستخدم سهلة الاستخدام. يوفر Clerk استراتيجيات مصادقة متعددة ونظام إدارة مستخدم شامل. إنه آمن وقابل للتطوير وسهل الاستخدام، مع مكونات واجهة المستخدم القابلة للتخصيص.

  • الشريط : منصة لمعالجة الدفع عبر الإنترنت مستخدمة في هذا المشروع للتعامل مع المدفوعات والاشتراكات.

  • Zod : إعلان مخطط TypeScript-first ومكتبة التحقق من الصحة المستخدمة لواجهات برمجة تطبيقات REST الآمنة من النوع.

  • MySQL : نظام إدارة قواعد بيانات علائقية مفتوح المصدر مشهور.

الذكاء الاصطناعي وجيل الوسائط

  • OpenAI : يستخدم لإنشاء النصوص والصور. يتم استخدام GPT-3.5 الخاص بـ OpenAI لإنشاء النص، وDALL-E لإنشاء الصور.

  • تكرار الذكاء الاصطناعي : يستخدم لإنشاء الموسيقى ومقاطع الفيديو بناءً على مدخلات المستخدم.

تلعب كل تقنية في هذه المجموعة دورًا حاسمًا في تقديم تجربة مستخدم سلسة وديناميكية.

تشغيل التطبيق محليا

1. استنساخ المشروع محليا

افتح جهازك الطرفي واستخدم الأمر التالي لاستنساخ المشروع:

 استنساخ بوابة https://github.com/mbeps/magician-ai.git

2. تثبيت التبعيات

انتقل إلى الدليل الجذر للمشروع وقم بتثبيت التبعيات المطلوبة باستخدام الأمر التالي:

 تثبيت الغزل

3. إعداد متغيرات البيئة

قم بإنشاء نسخة من الملف .env.example وأعد تسميته إلى .env.local . املأ .env.local بالأسرار الضرورية.

وفيما يلي تعليمات للحصول على بعض هذه الأسرار:

كاتب مصادقة

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

  2. إنشاء تطبيق جديد.

  3. في لوحة تحكم التطبيق، انتقل إلى قسم الإعدادات.

  4. ستجد NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY و CLERK_SECRET_KEY في هذا القسم.

  5. أضف هذه المفاتيح إلى متغيرات البيئة الخاصة بك في .env.local .

تحتاج أيضًا إلى إضافة عناوين URL التالية لـ Clerk Auth: 

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

بالنسبة إلى OPENAI_API_KEY و REPLICATE_API_TOKEN و DATABASE_URL و STRIPE_API_KEY و NEXT_PUBLIC_APP_URL ، راجع وثائق الخدمة المعنية أو صفحة الإعدادات للحصول على هذه القيم.

4. تشغيل قاعدة البيانات (دوكر)

هذه الخطوة ضرورية إذا كنت تريد استخدام صورة Docker التي تم توفيرها. يمكنك أيضًا استخدام خدمة سحابية بديلة لـ MySQL. تأكد من تغيير سلسلة الاتصال في ملف .env إذا كنت ترغب في القيام بذلك.

قم بتشغيل الأمر التالي من جذر المشروع لبدء حاوية MySQL الخاصة بك:

 docker-compose --env-file .env -f docker/docker-compose.yml up db

5. قم بإعداد بريزما

لإعداد Prisma ودفع المخطط إلى قاعدة البيانات، استخدم الأوامر التالية:

إنشاء عميل Prisma:

 توليد بريزما الغزل

دفع مخطط Prisma إلى قاعدة البيانات:

 دفع الغزل بريزما ديسيبل

5. قم بإعداد خطاف Webhook الشريطي

قم بتشغيل Stripe CLI واجعله يستمع إلى webhook:

 شريط الاستماع - الأمام إلى المضيف المحلي:3000/api/webhook

سيؤدي هذا إلى إخراج STRIPE_WEBHOOK_SECRET الخاص بك. أضف هذا إلى متغيرات البيئة الخاصة بك في .env.local .

6. تشغيل المشروع

بمجرد إعداد متغيرات البيئة، Prisma وStripe، استخدم الأوامر التالية لتشغيل المشروع:

في محطة واحدة، قم بتشغيل خادم Next.js:

 تطوير الغزل

في محطة أخرى، ابدأ تشغيل مستمع Stripe:

 شريط الاستماع - الأمام إلى المضيف المحلي:3000/api/webhook

يجب أن يؤدي هذا إلى تشغيل المشروع على localhost:3000 .

ملاحظة: يجب تشغيل كل من خادم Next.js للواجهة الأمامية وStripe CLI بشكل متزامن حتى يعمل التطبيق بشكل صحيح.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل