تطبيق ويب للمحادثة مع عدة نماذج لغوية + وسائط متعددة

تطبيق ويب كامل (Full-Stack) يشبه تجربة مساعد محادثة حديث: المستخدم يختار نموذجًا من عدة مزودين (Google Gemini، Groq، OpenRouter)، يرسل نصًا وملفات وصورًا، ويحفظ المحادثات في قاعدة بيانات. يدعم توليد صور من الوصف (عبر Gemini عند توفر الحصة، مع احتياطي مجاني عبر Pollinations)، والتفريغ الصوتي من الميكروفون (Groq)، وقراءة ردود المساعد بصوت عالٍ عبر المتصفح. الواجهة أمامية ثابتة (SPA بسيطة) بتصميم حديث ومتجاوب، والخادم REST API مبني بتنظيم وحدات (modules) وواضح للصيانة والتوسع.

التقنيات (Technologies)

الخلفية (Backend)

Node.js

TypeScript

Express.js

Mongoose + MongoDB (محادثات ورسائل)

Multer (رفع الملفات)

pdf-parse (استخراج نص من PDF)

dotenv (إعدادات البيئة)

الواجهة (Frontend)

HTML / CSS / JavaScript (Vanilla، بدون React/Vue)

Marked.js (عرض Markdown في الرسائل)

خطوط Google Fonts (Syne + Outfit)

واجهات خارجية / APIs

Google Gemini API (دردشة + رؤية + توليد صور عند التوفر)

Groq API (دردشة Qwen + Speech-to-Text)

OpenRouter (نموذج Step إضافي)

Pollinations (توليد صور مجاني كاحتياطي بدون مفتاح)

Web Speech API (قراءة النص في المتصفح — TTS)

تشغيل وجودة

Nodemon + ts-node (تطوير)

تجميع TypeScript → JavaScript للإنتاج

المميزات (Features)

محادثات متعددة مع عناوين وحذف من الشريط الجانبي

اختيار النموذج من قائمة مع تجميع حسب المزود وعرض القدرات (Chat / Vision / File / ImageGen)

رفع مرفقات: صور، PDF (نص يُستخرج على السيرفر)، وملفات نصية شائعة

رؤية (Vision) مع Gemini عند إرسال صور

توليد صور من الوصف وحفظها وعرضها في الخيط

تسجيل صوتي → نص (STT عبر Groq)

قراءة رد المساعد (زر TTS في الواجهة)

Markdown في رسائل المساعد

سحب وإفلات الملفات على منطقة الدردشة

عناوين تلقائية للمحادثات الجديدة (باستخدام أحد نماذج الدردشة المتاحة)

واجهة متجاوبة (موبايل/تابلت) مع قائمة جانبية قابلة للطي وخلفية شفافة عند الفتح

تصميم بصري مميز (ألوان متدرجة، بطاقات، حالة فارغة “ترحيب”)