Spaces:
Running
Running
-
1.52 kB
initial commit
-
209 Bytes
بالتأكيد، إليك برومبت مفصل لتصميم واجهة المستخدم (UI) لتطبيق دردشة متكامل مع نموذج ذكاء اصطناعي ووكيل، مع مراعاة التوافق مع الأجهزة المختلفة وتضمين صفحات تسجيل الدخول، الدردشة، وإدارة المفاتيح البرمجية (API Keys) والمحادثات. البرومبت: تصميم واجهة مستخدم (UI) لتطبيق دردشة متكامل بالذكاء الاصطناعي الهدف العام: قم بتصميم واجهة مستخدم (UI) ويب شاملة، سريعة الاستجابة (responsive)، وبديهية لتطبيق دردشة يعمل بالذكاء الاصطناعي. يجب أن يكون التصميم عصريًا، نظيفًا، وسهل الاستخدام عبر مختلف الأجهزة (سطح المكتب، الأجهزة اللوحية، الهواتف الذكية). الميزات الأساسية المطلوبة: التوافق مع الأجهزة (Responsiveness): يجب أن يتكيف التصميم بسلاسة مع أحجام الشاشات المختلفة دون فقدان الوظائف أو الجمالية. الدردشة مع نموذج ذكاء اصطناعي ووكيل: يجب أن يسمح التطبيق للمستخدم بالتبديل والتفاعل مع نموذج ذكاء اصطناعي عام (مثل GPT) ووكيل ذكاء اصطناعي متخصص (قد يكون له دور محدد أو قاعدة معرفية خاصة). إدارة المفاتيح البرمجية (API Keys): يجب أن يوفر مكانًا آمنًا وفعالًا لإدخال وإدارة مفاتيح API الخاصة بالنماذج المختلفة. حفظ المحادثات (Conversation History): القدرة على عرض وإدارة المحادثات السابقة. هيكل الصفحات المطلوبة (بتفاصيل الواجهة): 1. صفحة تسجيل الدخول (Login/Authentication Page): الهدف: توفير نقطة دخول آمنة للتطبيق. عناصر الواجهة: شعار التطبيق/اسم العلامة التجارية: في مكان بارز. عنوان جذاب: مثل "مرحبًا بك!" أو "تسجيل الدخول إلى DeepSite". نموذج تسجيل الدخول: حقل إدخال للبريد الإلكتروني/اسم المستخدم. حقل إدخال لكلمة المرور (مع خيار إظهار/إخفاء). زر "تسجيل الدخول". خيارات إضافية (إن أمكن): رابط "نسيت كلمة المرور؟". رابط "إنشاء حساب جديد" (إذا كان التطبيق يدعم التسجيل). تصميم جذاب: خلفية نظيفة، استخدام الألوان المميزة للتطبيق، رسوم متحركة بسيطة عند التفاعل. رسائل الخطأ/التحقق: مساحات واضحة لعرض رسائل الأخطاء (مثل "البريد الإلكتروني غير صالح" أو "كلمة المرور خاطئة"). 2. صفحة الدردشة الرئيسية (Main Chat Interface Page): الهدف: توفير بيئة تفاعلية للدردشة مع نماذج ووكلاء الذكاء الاصطناعي. عناصر الواجهة: شريط التنقل العلوي (Header): شعار/اسم التطبيق. أيقونة/زر لملف المستخدم أو الإعدادات العامة (يمكن أن يؤدي إلى صفحة إدارة المفاتيح والمحادثات). زر "محادثة جديدة" لبدء محادثة من الصفر. اللوحة الجانبية (Sidebar) - (اختياري لكن مفضل): قائمة بالمحادثات السابقة (Conversation History) مع إمكانية البحث. زر "محادثة جديدة". أيقونة/مؤشر يوضح الوضع الحالي (متصل/غير متصل بالإنترنت). قد تحتوي على تبديل سريع بين "النموذج العام AI" و "الوكيل AI" إذا لم يكن ذلك جزءًا من منطقة الإدخال. منطقة عرض الدردشة (Chat Display Area): عرض فقاعات الرسائل بشكل واضح ومميز بين المستخدم والذكاء الاصطناعي/الوكيل (مثل ألوان مختلفة، أيقونات). تذييل الرسائل بوقت الإرسال. شريط تمرير سلس لعرض المحادثات الطويلة. مؤشر تحميل واضح عند انتظار رد الذكاء الاصطناعي. زر لنسخ نص الرسالة. حالات فارغة (Empty State) عند بدء محادثة جديدة (مثل "كيف يمكنني مساعدتك اليوم؟"). منطقة إدخال الرسائل (Message Input Area): مربع نص متعدد الأسطر (Textarea) لكتابة الرسائل. زر "إرسال" (Send Button) واضح (أيقونة سهم أو نص "إرسال"). محدد النموذج/الوكيل (Model/Agent Selector): عنصر تحكم (مثل تبديل، أزرار مقسمة، أو قائمة منسدلة) يسمح للمستخدم بالاختيار بين التحدث إلى "النموذج AI العام" أو "الوكيل AI المتخصص". يجب أن يكون هذا العنصر مرئيًا وسهل الاستخدام. أيقونات إضافية (اختياري): مثل مرفقات الملفات، إدخال الصوت، إلخ. التبديل بين النماذج والوكيل: يجب أن يكون واضحًا للمستخدم مع من يتحدث حاليًا. يمكن استخدام لون خلفية مختلف لمنطقة الدردشة، أو علامة في شريط التنقل، أو أيقونة بجانب اسم النموذج. 3. صفحة سجل المحادثات وإدارة المفاتيح (Conversation History & API Key Management Page): الهدف: إدارة المحادثات السابقة وتكوين مفاتيح API للنماذج. عناصر الواجهة: شريط التنقل العلوي (Header): عنوان الصفحة ("الإعدادات" أو "المحادثات والمفاتيح")، وزر للعودة إلى صفحة الدردشة الرئيسية. تخطيط الصفحة: يمكن أن تكون صفحة واحدة مقسمة إلى قسمين رئيسيين، أو علامات تبويب (Tabs) بين "المحادثات" و "إدارة المفاتيح". القسم الأول: سجل المحادثات (Conversation History): قائمة بالمحادثات: عرض كل محادثة سابقة (مع عنوان/أول جملة، وتاريخ، وربما أيقونة للنموذج المستخدم). إمكانية البحث/التصفية: شريط بحث للعثور على محادثات معينة. أيقونة/زر "حذف": لحذف محادثة محددة. زر "تحميل/استئناف": عند النقر على محادثة، يتم تحميلها في صفحة الدردشة الرئيسية. رسائل حالة: "لا توجد محادثات محفوظة بعد" إذا كانت القائمة فارغة. القسم الثاني: إدارة مفاتيح API (API Key Management): عنوان واضح: "إدارة مفاتيح API" أو "تكوين النماذج". قائمة بالنماذج المدعومة: عرض كل نموذج AI يمكن للمستخدم تكوينه (مثل: OpenAI GPT, Google Gemini, Anthropic Claude, إلخ). لكل نموذج: اسم النموذج: (مثل: OpenAI API Key). حقل إدخال مفتاح API: يجب أن يكون النص مخفيًا (masked) افتراضيًا (مثل علامات النجمة ******). زر "إظهار/إخفاء" (eye icon) لرؤية المفتاح. حقل واضح لاستقبال المفتاح الجديد. زر "حفظ/تحديث": لحفظ المفتاح المدخل. زر "اختبار الاتصال": (اختياري لكن مفضل) لإعطاء المستخدم ردود فعل فورية حول ما إذا كان المفتاح صالحًا ويعمل. زر "حذف المفتاح": لإزالة المفتاح المحفوظ. رسائل حالة: "مفتاح صالح"، "مفتاح غير صالح"، "خطأ في الاتصال". زر "إضافة نموذج جديد": (إذا كان التطبيق يدعم إضافة نماذج مخصصة أو غير قياسية). إرشادات المساعدة: نص موجز يوضح للمستخدم من أين يمكنه الحصول على مفاتيح API هذه. ملاحظات أمنية: تذكير بأهمية الحفاظ على المفاتيح سرية. مبادئ التصميم العامة: الجمالية البصرية: تصميم نظيف، حديث، بسيط، وجذاب مع استخدام جيد للمساحات البيضاء. سهولة الاستخدام (Usability): يجب أن تكون جميع العناصر سهلة التحديد والاستخدام. مسارات المستخدم يجب أن تكون واضحة ومنطقية. التغذية الراجعة (Feedback): تقديم ردود فعل واضحة للمستخدم عند إجراء إجراءات (مثل التحميل، الحفظ، الأخطاء). إمكانية الوصول (Accessibility): مراعاة المستخدمين ذوي الاحتياجات الخاصة (مثل التباين الجيد للألوان، دعم التنقل باللوحة المفاتيح). الخطوط والأيقونات: استخدام خطوط مقروءة وأيقونات واضحة ومعبرة. نظام الألوان: لوحة ألوان متناسقة ومريحة للعين، مع استخدام الألوان الجريئة للنقاط المهمة (أزرار الدعوة للإجراء، مؤشرات الحالة). المخرجات المطلوبة: وصف مفصل: لكل صفحة وعناصرها كما هو موضح أعلاه. تصور مرئي (اختياري، لكن مفضل): إذا أمكن، يمكن تضمين اسكتشات سريعة (wireframes) أو mockups بسيطة لتوضيح التخطيط المقترح لكل صفحة وتفاعلاتها الأساسية. وصف موجز لتجربة المستخدم (UX Flow): كيف يتنقل المستخدم بين الصفحات ويتفاعل مع الميزات الرئيسية (مثل تسجيل الدخول، بدء الدردشة، التبديل بين النموذج والوكيل، حفظ API Key). آمل أن يكون هذا البرومبت مفيدًا لتصميم واجهة المستخدم المطلوبة! - Initial Deployment
-
55.6 kB
بالتأكيد، إليك برومبت مفصل لتصميم واجهة المستخدم (UI) لتطبيق دردشة متكامل مع نموذج ذكاء اصطناعي ووكيل، مع مراعاة التوافق مع الأجهزة المختلفة وتضمين صفحات تسجيل الدخول، الدردشة، وإدارة المفاتيح البرمجية (API Keys) والمحادثات. البرومبت: تصميم واجهة مستخدم (UI) لتطبيق دردشة متكامل بالذكاء الاصطناعي الهدف العام: قم بتصميم واجهة مستخدم (UI) ويب شاملة، سريعة الاستجابة (responsive)، وبديهية لتطبيق دردشة يعمل بالذكاء الاصطناعي. يجب أن يكون التصميم عصريًا، نظيفًا، وسهل الاستخدام عبر مختلف الأجهزة (سطح المكتب، الأجهزة اللوحية، الهواتف الذكية). الميزات الأساسية المطلوبة: التوافق مع الأجهزة (Responsiveness): يجب أن يتكيف التصميم بسلاسة مع أحجام الشاشات المختلفة دون فقدان الوظائف أو الجمالية. الدردشة مع نموذج ذكاء اصطناعي ووكيل: يجب أن يسمح التطبيق للمستخدم بالتبديل والتفاعل مع نموذج ذكاء اصطناعي عام (مثل GPT) ووكيل ذكاء اصطناعي متخصص (قد يكون له دور محدد أو قاعدة معرفية خاصة). إدارة المفاتيح البرمجية (API Keys): يجب أن يوفر مكانًا آمنًا وفعالًا لإدخال وإدارة مفاتيح API الخاصة بالنماذج المختلفة. حفظ المحادثات (Conversation History): القدرة على عرض وإدارة المحادثات السابقة. هيكل الصفحات المطلوبة (بتفاصيل الواجهة): 1. صفحة تسجيل الدخول (Login/Authentication Page): الهدف: توفير نقطة دخول آمنة للتطبيق. عناصر الواجهة: شعار التطبيق/اسم العلامة التجارية: في مكان بارز. عنوان جذاب: مثل "مرحبًا بك!" أو "تسجيل الدخول إلى DeepSite". نموذج تسجيل الدخول: حقل إدخال للبريد الإلكتروني/اسم المستخدم. حقل إدخال لكلمة المرور (مع خيار إظهار/إخفاء). زر "تسجيل الدخول". خيارات إضافية (إن أمكن): رابط "نسيت كلمة المرور؟". رابط "إنشاء حساب جديد" (إذا كان التطبيق يدعم التسجيل). تصميم جذاب: خلفية نظيفة، استخدام الألوان المميزة للتطبيق، رسوم متحركة بسيطة عند التفاعل. رسائل الخطأ/التحقق: مساحات واضحة لعرض رسائل الأخطاء (مثل "البريد الإلكتروني غير صالح" أو "كلمة المرور خاطئة"). 2. صفحة الدردشة الرئيسية (Main Chat Interface Page): الهدف: توفير بيئة تفاعلية للدردشة مع نماذج ووكلاء الذكاء الاصطناعي. عناصر الواجهة: شريط التنقل العلوي (Header): شعار/اسم التطبيق. أيقونة/زر لملف المستخدم أو الإعدادات العامة (يمكن أن يؤدي إلى صفحة إدارة المفاتيح والمحادثات). زر "محادثة جديدة" لبدء محادثة من الصفر. اللوحة الجانبية (Sidebar) - (اختياري لكن مفضل): قائمة بالمحادثات السابقة (Conversation History) مع إمكانية البحث. زر "محادثة جديدة". أيقونة/مؤشر يوضح الوضع الحالي (متصل/غير متصل بالإنترنت). قد تحتوي على تبديل سريع بين "النموذج العام AI" و "الوكيل AI" إذا لم يكن ذلك جزءًا من منطقة الإدخال. منطقة عرض الدردشة (Chat Display Area): عرض فقاعات الرسائل بشكل واضح ومميز بين المستخدم والذكاء الاصطناعي/الوكيل (مثل ألوان مختلفة، أيقونات). تذييل الرسائل بوقت الإرسال. شريط تمرير سلس لعرض المحادثات الطويلة. مؤشر تحميل واضح عند انتظار رد الذكاء الاصطناعي. زر لنسخ نص الرسالة. حالات فارغة (Empty State) عند بدء محادثة جديدة (مثل "كيف يمكنني مساعدتك اليوم؟"). منطقة إدخال الرسائل (Message Input Area): مربع نص متعدد الأسطر (Textarea) لكتابة الرسائل. زر "إرسال" (Send Button) واضح (أيقونة سهم أو نص "إرسال"). محدد النموذج/الوكيل (Model/Agent Selector): عنصر تحكم (مثل تبديل، أزرار مقسمة، أو قائمة منسدلة) يسمح للمستخدم بالاختيار بين التحدث إلى "النموذج AI العام" أو "الوكيل AI المتخصص". يجب أن يكون هذا العنصر مرئيًا وسهل الاستخدام. أيقونات إضافية (اختياري): مثل مرفقات الملفات، إدخال الصوت، إلخ. التبديل بين النماذج والوكيل: يجب أن يكون واضحًا للمستخدم مع من يتحدث حاليًا. يمكن استخدام لون خلفية مختلف لمنطقة الدردشة، أو علامة في شريط التنقل، أو أيقونة بجانب اسم النموذج. 3. صفحة سجل المحادثات وإدارة المفاتيح (Conversation History & API Key Management Page): الهدف: إدارة المحادثات السابقة وتكوين مفاتيح API للنماذج. عناصر الواجهة: شريط التنقل العلوي (Header): عنوان الصفحة ("الإعدادات" أو "المحادثات والمفاتيح")، وزر للعودة إلى صفحة الدردشة الرئيسية. تخطيط الصفحة: يمكن أن تكون صفحة واحدة مقسمة إلى قسمين رئيسيين، أو علامات تبويب (Tabs) بين "المحادثات" و "إدارة المفاتيح". القسم الأول: سجل المحادثات (Conversation History): قائمة بالمحادثات: عرض كل محادثة سابقة (مع عنوان/أول جملة، وتاريخ، وربما أيقونة للنموذج المستخدم). إمكانية البحث/التصفية: شريط بحث للعثور على محادثات معينة. أيقونة/زر "حذف": لحذف محادثة محددة. زر "تحميل/استئناف": عند النقر على محادثة، يتم تحميلها في صفحة الدردشة الرئيسية. رسائل حالة: "لا توجد محادثات محفوظة بعد" إذا كانت القائمة فارغة. القسم الثاني: إدارة مفاتيح API (API Key Management): عنوان واضح: "إدارة مفاتيح API" أو "تكوين النماذج". قائمة بالنماذج المدعومة: عرض كل نموذج AI يمكن للمستخدم تكوينه (مثل: OpenAI GPT, Google Gemini, Anthropic Claude, إلخ). لكل نموذج: اسم النموذج: (مثل: OpenAI API Key). حقل إدخال مفتاح API: يجب أن يكون النص مخفيًا (masked) افتراضيًا (مثل علامات النجمة ******). زر "إظهار/إخفاء" (eye icon) لرؤية المفتاح. حقل واضح لاستقبال المفتاح الجديد. زر "حفظ/تحديث": لحفظ المفتاح المدخل. زر "اختبار الاتصال": (اختياري لكن مفضل) لإعطاء المستخدم ردود فعل فورية حول ما إذا كان المفتاح صالحًا ويعمل. زر "حذف المفتاح": لإزالة المفتاح المحفوظ. رسائل حالة: "مفتاح صالح"، "مفتاح غير صالح"، "خطأ في الاتصال". زر "إضافة نموذج جديد": (إذا كان التطبيق يدعم إضافة نماذج مخصصة أو غير قياسية). إرشادات المساعدة: نص موجز يوضح للمستخدم من أين يمكنه الحصول على مفاتيح API هذه. ملاحظات أمنية: تذكير بأهمية الحفاظ على المفاتيح سرية. مبادئ التصميم العامة: الجمالية البصرية: تصميم نظيف، حديث، بسيط، وجذاب مع استخدام جيد للمساحات البيضاء. سهولة الاستخدام (Usability): يجب أن تكون جميع العناصر سهلة التحديد والاستخدام. مسارات المستخدم يجب أن تكون واضحة ومنطقية. التغذية الراجعة (Feedback): تقديم ردود فعل واضحة للمستخدم عند إجراء إجراءات (مثل التحميل، الحفظ، الأخطاء). إمكانية الوصول (Accessibility): مراعاة المستخدمين ذوي الاحتياجات الخاصة (مثل التباين الجيد للألوان، دعم التنقل باللوحة المفاتيح). الخطوط والأيقونات: استخدام خطوط مقروءة وأيقونات واضحة ومعبرة. نظام الألوان: لوحة ألوان متناسقة ومريحة للعين، مع استخدام الألوان الجريئة للنقاط المهمة (أزرار الدعوة للإجراء، مؤشرات الحالة). المخرجات المطلوبة: وصف مفصل: لكل صفحة وعناصرها كما هو موضح أعلاه. تصور مرئي (اختياري، لكن مفضل): إذا أمكن، يمكن تضمين اسكتشات سريعة (wireframes) أو mockups بسيطة لتوضيح التخطيط المقترح لكل صفحة وتفاعلاتها الأساسية. وصف موجز لتجربة المستخدم (UX Flow): كيف يتنقل المستخدم بين الصفحات ويتفاعل مع الميزات الرئيسية (مثل تسجيل الدخول، بدء الدردشة، التبديل بين النموذج والوكيل، حفظ API Key). آمل أن يكون هذا البرومبت مفيدًا لتصميم واجهة المستخدم المطلوبة! - Initial Deployment
-
388 Bytes
initial commit