chatbot ui

واجهة مستخدم Chatbot

تطبيق الدردشة AI مفتوح المصدر للجميع.

تجريبي

عرض أحدث العرض هنا.

التحديثات

مرحبًا بالجميع! لقد سمعت تعليقاتك وأعمل بجد على تحديث كبير.

أشياء مثل النشر الأبسط، والتوافق الأفضل للواجهة الخلفية، وتخطيطات الأجهزة المحمولة المحسنة في طريقها إلى الظهور.

العودة قريبا.

-- مكاي

النسخة الرسمية المستضافة

استخدم Chatbot UI دون الحاجة إلى استضافته بنفسك!

ابحث عن الإصدار الرسمي المستضاف من Chatbot UI هنا.

راعي

إذا وجدت Chatbot UI مفيدًا، فيرجى التفكير في رعايتي لدعم عملي مفتوح المصدر :)

مشاكل

نحن نحصر "المشكلات" في المشكلات الفعلية المتعلقة بقاعدة التعليمات البرمجية.

نتلقى قدرًا كبيرًا من المشكلات التي تصل إلى حد أشياء مثل طلبات الميزات، ومشكلات موفر الخدمة السحابية، وما إلى ذلك.

إذا كنت تواجه مشكلات مع أشياء مثل الإعداد، فيرجى الرجوع إلى قسم "المساعدة" في علامة التبويب "المناقشات" أعلاه.

من المحتمل أن يتم إغلاق المشكلات غير المرتبطة بقاعدة التعليمات البرمجية على الفور.

المناقشات

نحن نشجعك بشدة على المشاركة في علامة التبويب "المناقشات" أعلاه!

تعد المناقشات مكانًا رائعًا لطرح الأسئلة ومشاركة الأفكار والحصول على المساعدة.

من المحتمل أنه إذا كان لديك سؤال، فإن شخصًا آخر لديه نفس السؤال.

الكود القديم

تم تحديث واجهة Chatbot UI مؤخرًا إلى الإصدار 2.0.

يمكن العثور على رمز 1.0 في الفرع legacy .

تحديث

في جهازك الطرفي الموجود في جذر مستودع Chatbot UI المحلي لديك، قم بتشغيل:

npm run update

إذا قمت بتشغيل مثيل مستضاف، فستحتاج أيضًا إلى تشغيل:

npm run db-push

لتطبيق أحدث عمليات الترحيل على قاعدة البيانات المباشرة الخاصة بك.

البداية السريعة المحلية

اتبع هذه الخطوات لتشغيل مثيل Chatbot UI الخاص بك محليًا.

يمكنك مشاهدة الفيديو التعليمي الكامل هنا.

1. استنساخ الريبو

git clone https://github.com/mckaywrigley/chatbot-ui.git

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

افتح محطة طرفية في الدليل الجذر لمستودع Chatbot UI المحلي الخاص بك وقم بتشغيل:

npm install

3. قم بتثبيت Supabase وتشغيله محليًا

لماذا سوباباس؟

في السابق، كنا نستخدم مساحة تخزين المتصفح المحلية لتخزين البيانات. ومع ذلك، لم يكن هذا حلاً جيدًا لعدة أسباب:

• القضايا الأمنية
• تخزين محدود
• يحد من حالات الاستخدام متعدد الوسائط

نستخدم الآن Supabase لأنه سهل الاستخدام، ومفتوح المصدر، وPostgres، وله طبقة مجانية للمثيلات المستضافة.

سندعم مقدمي الخدمات الآخرين في المستقبل لنمنحك المزيد من الخيارات.

1. قم بتثبيت عامل الميناء

ستحتاج إلى تثبيت Docker لتشغيل Supabase محليًا. يمكنك تحميله هنا مجانا.

2. قم بتثبيت Supabase CLI

ماك / لينكس

brew install supabase/tap/supabase

ويندوز

scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

3. ابدأ تشغيل Supabase

في جهازك الطرفي الموجود في جذر مستودع Chatbot UI المحلي لديك، قم بتشغيل:

supabase start

4. املأ الأسرار

1. متغيرات البيئة

في جهازك الطرفي الموجود في جذر مستودع Chatbot UI المحلي لديك، قم بتشغيل:

cp .env.local.example .env.local

احصل على القيم المطلوبة عن طريق تشغيل:

supabase status

ملاحظة: استخدم API URL من supabase status لـ NEXT_PUBLIC_SUPABASE_URL

انتقل الآن إلى ملف .env.local الخاص بك واملأ القيم.

إذا تم تعيين متغير البيئة، فسيتم تعطيل الإدخال في إعدادات المستخدم.

2. إعداد SQL

في ملف الترحيل الأول supabase/migrations/20240108234540_setup.sql ستحتاج إلى استبدال قيمتين بالقيم التي حصلت عليها أعلاه:

• project_url (السطر 53): http://supabase_kong_chatbotui:8000 (افتراضي) يمكن أن يظل بدون تغيير إذا لم تقم بتغيير project_id الخاص بك في ملف config.toml
• service_role_key (السطر 54): لقد حصلت على هذه القيمة من تشغيل supabase status

وهذا يمنع حدوث مشكلات تتعلق بعدم حذف ملفات التخزين بشكل صحيح.

5. قم بتثبيت Ollama (اختياري للطرز المحلية)

اتبع التعليمات هنا.

6. قم بتشغيل التطبيق محليًا

في جهازك الطرفي الموجود في جذر مستودع Chatbot UI المحلي لديك، قم بتشغيل:

npm run chat

يجب الآن تشغيل المثيل المحلي لـ Chatbot UI على http://localhost:3000. تأكد من استخدام إصدار عقدة متوافق (أي الإصدار 18).

يمكنك عرض واجهة المستخدم الرسومية الخلفية الخاصة بك على http://localhost:54323/project/default/editor.

بداية سريعة مستضافة

اتبع هذه الخطوات لتشغيل مثيل Chatbot UI الخاص بك في السحابة.

فيديو تعليمي قريبا.

1. اتبع التشغيل السريع المحلي

كرر الخطوات من 1 إلى 4 في "البدء السريع المحلي" أعلاه.

ستحتاج إلى مستودعات منفصلة لمثيلاتك المحلية والمستضافة.

أنشئ مستودعًا جديدًا للمثيل المستضاف لـ Chatbot UI على GitHub وادفع الكود الخاص بك إليه.

2. إعداد الواجهة الخلفية باستخدام Supabase

1. إنشاء مشروع جديد

انتقل إلى Supabase وقم بإنشاء مشروع جديد.

2. احصل على قيم المشروع

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

هنا سوف تحصل على قيم متغيرات البيئة التالية:

• Project Ref : موجود في "الإعدادات العامة" باسم "المعرف المرجعي"

• Project ID : موجود في عنوان URL للوحة تحكم مشروعك (على سبيل المثال: https://supabase.com/dashboard/project/<YOUR_PROJECT_ID>/settings/general)

بينما لا تزال في "الإعدادات"، انقر فوق علامة التبويب النصية "API" الموجودة على اليسار.

هنا سوف تحصل على قيم متغيرات البيئة التالية:

• Project URL : موجود في "إعدادات واجهة برمجة التطبيقات" باسم "عنوان URL للمشروع"

• Anon key : موجود في "مفاتيح Project API" باسم "مجهول عام"

• Service role key : موجود في "مفاتيح Project API" باسم "service_role" (تذكير: تعامل مع هذا ككلمة مرور!)

3. تكوين المصادقة

بعد ذلك، انقر فوق علامة التبويب أيقونة "المصادقة" في أقصى اليسار.

في علامات التبويب النصية، انقر فوق "مقدمو الخدمات" وتأكد من تمكين "البريد الإلكتروني".

نوصي بإيقاف تشغيل "تأكيد البريد الإلكتروني" لمثيلك الشخصي.

4. الاتصال بقاعدة البيانات المستضافة

افتح المستودع الخاص بك للمثيل المستضاف لـ Chatbot UI.

في ملف الترحيل الأول supabase/migrations/20240108234540_setup.sql ستحتاج إلى استبدال قيمتين بالقيم التي حصلت عليها أعلاه:

• project_url (السطر 53): استخدم قيمة Project URL من الأعلى
• service_role_key (السطر 54): استخدم قيمة Service role key من الأعلى

الآن، افتح محطة طرفية في الدليل الجذر لمستودع Chatbot UI المحلي الخاص بك. سنقوم بتنفيذ بعض الأوامر هنا.

قم بتسجيل الدخول إلى Supabase عن طريق تشغيل:

supabase login

بعد ذلك، قم بربط مشروعك عن طريق تشغيل الأمر التالي باستخدام "معرف المشروع" الذي حصلت عليه أعلاه:

supabase link --project-ref < project-id >

يجب الآن ربط مشروعك.

أخيرًا، ادفع قاعدة البيانات الخاصة بك إلى Supabase عن طريق تشغيل:

supabase db push

يجب الآن إعداد قاعدة البيانات المستضافة الخاصة بك!

3. إعداد الواجهة الأمامية مع Vercel

انتقل إلى Vercel وقم بإنشاء مشروع جديد.

في صفحة الإعداد، قم باستيراد مستودع GitHub الخاص بك للمثيل المستضاف لـ Chatbot UI. ضمن إعدادات المشروع، في قسم "إعدادات البناء والتطوير"، قم بتبديل الإعداد المسبق لإطار العمل إلى "Next.js".

في متغيرات البيئة، أضف ما يلي من القيم التي حصلت عليها أعلاه:

• NEXT_PUBLIC_SUPABASE_URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY
• SUPABASE_SERVICE_ROLE_KEY
• NEXT_PUBLIC_OLLAMA_URL (مطلوب فقط عند استخدام نماذج Ollama المحلية؛ الافتراضي: http://localhost:11434 )

يمكنك أيضًا إضافة مفاتيح API كمتغيرات البيئة.

• OPENAI_API_KEY
• AZURE_OPENAI_API_KEY
• AZURE_OPENAI_ENDPOINT
• AZURE_GPT_45_VISION_NAME

للحصول على القائمة الكاملة لمتغيرات البيئة، راجع الملف ".env.local.example". إذا تم تعيين متغيرات البيئة لمفاتيح API، فسيتم تعطيل الإدخال في إعدادات المستخدم.

انقر فوق "نشر" وانتظر حتى يتم نشر الواجهة الأمامية.

بمجرد النشر، يجب أن تكون قادرًا على استخدام المثيل المستضاف لـ Chatbot UI عبر عنوان URL الذي يوفره لك Vercel.

المساهمة

نحن نعمل على دليل للمساهمة.

اتصال

أرسل رسالة إلى Mckay على Twitter/X