Chatbot احترافي مدعوم بـ FastAPI
تفاصيل العمل
تم في هذا المشروع تصميم وتطوير واجهة احترافية لتطبيق Chatbot مدعوم بـ LLM، مع ربطها بخادم FastAPI لتوفير تجربة محادثة ذكية وسريعة. تم تطوير الواجهة باستخدام HTML5، CSS3، وJavaScript مع تصميم حديث ومتجاوب يضمن سهولة الاستخدام على مختلف الأجهزة.
- يتكون التطبيق من عدة أقسام رئيسية، تشمل:
شريط جانبي (Sidebar) لإدارة المحادثات، وإنشاء جلسات جديدة، وعرض حالة الاتصال بالخادم (Backend Status).
منطقة المحادثة (Chat Workspace) لعرض الرسائل بشكل منظم مع شاشة ترحيبية واقتراحات جاهزة لبدء المحادثة.
نظام إدارة الجلسات لعرض الجلسة الحالية والتنقل بين المحادثات النشطة.
شريط إدخال الرسائل مع عداد للأحرف، وأزرار لإرسال الرسائل أو مسح النص بسهولة.
أدوات إضافية مثل تصدير المحادثات بصيغة Markdown، ومسح نافذة المحادثة، وتغيير المظهر (Theme) لراحة المستخدم.
- مميزات المشروع
• تصميم عصري ومتجاوب (Responsive Design) يعمل على جميع الأجهزة.
• واجهة مستخدم احترافية توفر تجربة استخدام سلسة وسهلة.
• دعم إنشاء وإدارة جلسات محادثة متعددة.
• عرض حالة الاتصال بخادم FastAPI في الوقت الفعلي.
• دعم تنسيق Markdown مع تلوين الأكواد البرمجية (Syntax Highlighting).
• شاشة ترحيبية تحتوي على اقتراحات جاهزة لبدء المحادثة.
• إمكانية تصدير المحادثات إلى ملفات Markdown.
• دعم الوضع الليلي وثيمات متعددة لراحة العين.
• تنظيم الكود والمكونات بطريقة تسهل التطوير والصيانة مستقبلًا.
- التقنيات المستخدمة
• HTML5 • CSS3 • JavaScript (ES6) • FastAPI • LLM API • Marked.js • Highlight.js • Font Awesome • Google Fonts
- طريقة التنفيذ
تم تنفيذ المشروع وفق منهجية تطوير منظمة، حيث تم تصميم هيكل الواجهة باستخدام HTML5، ثم تنسيق جميع العناصر باستخدام CSS3 مع تطبيق مبادئ Responsive Design لضمان التوافق مع مختلف أحجام الشاشات. بعد ذلك تم تطوير الوظائف التفاعلية باستخدام JavaScript، مثل إدارة الجلسات، وإرسال واستقبال الرسائل، ومراقبة حالة الخادم، وتصدير المحادثات. كما تم دمج مكتبات Marked.js لعرض رسائل Markdown وHighlight.js لتنسيق الأكواد البرمجية، مع ربط الواجهة بخادم FastAPI للتواصل مع نموذج LLM وتقديم تجربة محادثة ذكية وفعّالة.
- يُعد هذا المشروع نموذجًا متكاملًا لتطبيقات الذكاء الاصطناعي الحديثة، ويمكن تطويره بسهولة بإضافة تسجيل المستخدمين، وحفظ المحادثات في قواعد البيانات، أو دمجه مع أي نموذج لغوي أو خدمات ذكاء اصطناعي أخرى.