من یک دستیار هوش مصنوعی مدرن ساختم
بیشتر آموزشهای هوش مصنوعی فقط نحوه فراخوانی یک API را نشان میدهند. من میخواستم یک اپلیکیشن واقعی بسازم. از HTML، CSS و JavaScript خام (vanilla) استفاده کردم.
این اپلیکیشن شامل این ویژگیها است:
- رابط کاربری واکنشگرا (Responsive UI)
- حالتهای تاریک و روشن
- پاسخهای جریانی (Streaming responses)
- رندر کردن Markdown
- هایلایت کردن نحو (Syntax highlighting)
- تاریخچه چت
- مدیریت خطا
- استقرار روی GitHub Pages
من از این ابزارها استفاده کردم:
- HTML5 و CSS3
- Vanilla JavaScript
- Marked.js
- DOMPurify
- Prism.js
- Google Generative AI SDK
من روی امنیت تمرکز کردم. از DOMPurify برای پاکسازی پاسخهای هوش مصنوعی استفاده کردم. این کار از ریسکهای امنیتی جلوگیری میکند.
من روی تجربه کاربری تمرکز کردم. اپلیکیشن متن را هنگام تولید به صورت جریانی (stream) نمایش میدهد. شما بازخورد فوری دریافت میکنید و منتظر آیکون در حال بارگذاری نمیمانید.
من Prism.js را برای بلوکهای کد اضافه کردم. این کار باعث اضافه شدن برچسب زبان و دکمههای کپی میشود.
من از localStorage برای تاریخچه چت استفاده کردم. گفتگوهای شما پس از رفرش کردن صفحه باقی میمانند. این روش سریع است و به بکاِند (backend) نیازی ندارد.
من منطق تلاش مجدد (retry logic) و پیامهای خطا را اضافه کردم. این کار اپلیکیشن را پایدار میکند.
پروژههای هوش مصنوعی مهارتهای زیادی به شما میآموزند:
- یکپارچهسازی API
- طراحی UI
- مدیریت وضعیت (State management)
- تجربه کاربری (UX)
برای پورتفولیوی خود پروژههایی شبیه به این بسازید. این نشان میدهد که مهارتهای عملی را میدانید.
بعد از این چه ویژگیای را باید اضافه کنم؟
- ورودی صوتی
- آپلود فایل
- حافظه
در کامنتها به من بگویید.
Source: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 Optional learning community: https://youtu.be/nbFKG_6DkSE