בניתי עוזר AI מודרני
רוב המדריכים ל-AI פשוטים מדי. הם מראים קריאת API בסיסית ותגובה. רציתי לבנות אפליקציה אמיתית.
בניתי עוזר AI באמצעות HTML, CSS ו-JavaScript בסיסיים (Vanilla).
תכונות עיקריות:
- תגובות בזרם (Streaming).
- מצבי כהה ובהיר.
- Markdown והדגשת תחביר (Syntax highlighting).
- שמירת היסטוריית צ'אט.
- טיפול בשגיאות ולוגיקת ניסיון חוזר.
הטכנולוגיות (Tech stack):
- HTML5 ו-CSS3.
- Vanilla JavaScript.
- Marked.js ו-Prism.js.
- DOMPurify לאבטחה.
- Google Generative AI SDK.
- GitHub Pages לאחסון.
אבטחה היא עדיפות. השתמשתי ב-DOMPurify כדי לנקות את תגובות ה-AI. זה מונע סיכוני אבטחה.
חווית משתמש (UX) היא קריטית. הוספתי תוכן בזרם (Streaming). המשתמשים רואים את הטקסט בזמן שהוא נוצר, כך שהם לא צריכים לחכות לאייקון טעינה.
השתמשתי ב-localStorage עבור היסטוריית הצ'אט. זה הופך את האפליקציה למהירה ואין צורך ב-backend.
לקחים שנלמדו:
- טיפול במקרי קצה (Edge cases).
- התמקדות ב-UX.
- ניהול מצב (State management).
- אבטחת פלט ה-AI.
הפרטים האלה חשובים יותר ממודל ה-AI עצמו.
בנו פרויקטים כאלה עבור הפורטפוליו שלכם. כך תלמדו APIs, עיצוב UI וניהול מצב.
איזה פיצ'ר הייתם מוסיפים?
- קלט קולי.
- העלאת קבצים.
- זיכרון.
ספרו לי בתגובות.
מקור: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 וידאו: https://youtu.be/nbFKG_6DkSE קהילת למידה אופציונלית: https://t.me/GyaanSetuAi