Spaces:

---

fsalmansour

/

aichat

like 0

Running

إنشاء صفحة ويب اسمها "AI Control & Chat" بواجهة داكنة (Dark, glassmorphism). التقنيات: HTML + TailwindCSS + Alpine.js (بدون React). اللغة افتراضيًا إنجليزية مع دعم RTL عند اختيار العربية. المتطلبات: 1. الهيدر: - شعار صغير AI. - شريط علوي فيه: * Dropdown لاختيار النموذج: [Auto (Router), Llama3 (Ollama), Mixtral, GPT-4o, Qwen-Coder, Flux (Images)]. * Toggle "Debate Mode" (تشغيل/إيقاف). * Toggle "Show Reasoning" (يعرض/يخفي صندوق التفكير). * زر "Memory" يفتح بانل جانبي لعرض وسم/بحث الذاكرة. * زر "Settings" لخيارات الـ API keys والـ Accent Color. - زر تغيير اللغة EN/AR (يقلب الاتجاه RTL/LTR ويستبدل النصوص الأساسية). 2. منطقة الدردشة (chat area): - فقاعات رسائل (مستخدم/مساعد) بخلفية زجاجية. - بجانب كل رسالة أزرار: [📋 نسخ] [👍 أعجبني] [👎 لم يعجبني] [🔖 احفظ/وسم] [🧠 سمِّ الفكرة]. - إمكانية توسيع رسالة المساعد لإظهار "طريقة التفكير/التحليل" عند الضغط على زر reasoning. - شريط أعلى الرسالة يوضح أي نموذج أجاب (مع لون/أيقونة) وإذا كان الرد مختار من "Auto Router". 3. منطقة إدخال الرسالة: - Textarea متعدد الأسطر بدون حد للدردشة. - زر إرسال. - زر رفع مرفقات (صور/PDF/صوت). - زر "تلخيص الجلسة" يظهر ملخص في بانل جانبي. - زر "روابط/Topics" يفتح نافذة صغيرة لربط الرسالة بموضوع موجود أو إنشاء موضوع باسم جديد. 4. بانل الذاكرة (Side drawer): - تبويب "Bookmarks/Tags". - بحث نصي داخل الذاكرة. - فلترة حسب التاريخ / النوع (منتجات، SEO، أكواد، أفكار). - زر "Export Chat" (JSON/Markdown). - زر "Edit / Share" يفتح نافذة لتحرير الرسائل المختارة ومشاركتها. 5. ستايل: - دارك بالكامل (#0f172a خلفية، زجاجي مع ضبابية). - Accent لون سماوي (#38bdf8) ويمكن تغييره من الإعدادات. - حواف دائرية، ظلال ناعمة. - متجاوب للموبايل: الشريط العلوي يتحول لأيقونة Menu تفتح Drawer. 6. وظائف JavaScript (Alpine.js): - state: theme, lang, selectedModel, debateMode, showReasoning, messages[], memory[], bookmarks[], topics[] - دوال: sendMessage(), copyMsg(), likeMsg(), dislikeMsg(), saveBookmark(), nameIdea(), summarizeChat(), toggleReasoningFor(msg), switchLang(), loadMemory(), searchMemory(). - fetch إلى Backend: POST /api/ai/chat {prompt, model, debate} → يرجع {final, answers[], chosen} POST /api/memory/upsert GET /api/memory/search?q= - عند وصول الرد: إضافة الرسالة + حفظ في الذاكرة (إن كان private=true ضعها بمسار خاص). 7. Footer صغير: رابط إلى Store AI Hub / Contact / Version. 8. دعم RTL: إذا lang==='ar' ضف dir="rtl" وغيّر alignments. استخدم Tailwind classes فقط بدون CSS مخصص إلا للـ داركglass. أضف تعليقات واضحة في الكود لتسهيل الدمج مع backend لاحقًا. - Initial Deployment