मैंने एक आधुनिक AI असिस्टेंट बनाया है
अधिकांश AI ट्यूटोरियल बहुत सरल होते हैं। वे केवल एक बुनियादी API कॉल और उसका रिस्पॉन्स दिखाते हैं। मैं एक वास्तविक एप्लिकेशन बनाना चाहता था।
मैंने vanilla HTML, CSS, और JavaScript के साथ एक AI असिस्टेंट बनाया है।
मुख्य विशेषताएं:
- स्ट्रीमिंग रिस्पॉन्स।
- डार्क और लाइट मोड।
- Markdown और सिंटैक्स हाइलाइटिंग।
- चैट हिस्ट्री का सुरक्षित रहना (persistence)।
- एरर हैंडलिंग और रिट्राय लॉजिक।
टेक स्टैक:
- HTML5 और CSS3।
- Vanilla JavaScript।
- Marked.js और Prism.js।
- सुरक्षा के लिए DOMPurify।
- Google Generative AI SDK।
- होस्टिंग के लिए GitHub Pages।
सुरक्षा मेरी प्राथमिकता है। मैंने AI रिस्पॉन्स को साफ़ करने के लिए DOMPurify का उपयोग किया। यह सुरक्षा जोखिमों को रोकता है।
यूजर एक्सपीरियंस (UX) मायने रखता है। मैंने स्ट्रीमिंग कंटेंट जोड़ा है। यूजर्स टेक्स्ट को बनते हुए देख सकते हैं। उन्हें लोडिंग आइकन का इंतज़ार नहीं करना पड़ता।
मैंने चैट हिस्ट्री के लिए localStorage का उपयोग किया। इससे ऐप तेज़ चलता है। इसके लिए किसी बैकएंड की आवश्यकता नहीं है।
सीखे गए सबक:
- एज केसेस (edge cases) को ठीक करें।
- UX पर ध्यान दें।
- स्टेट (state) को मैनेज करें।
- AI आउटपुट को सुरक्षित बनाएं।
ये विवरण AI मॉडल से कहीं अधिक महत्वपूर्ण हैं।
अपने पोर्टफोलियो के लिए इस तरह के प्रोजेक्ट्स बनाएं। आप इससे APIs, UI डिज़ाइन और स्टेट मैनेजमेंट सीखते हैं।
आप कौन सा फीचर जोड़ना चाहेंगे?
- वॉइस इनपुट।
- फ़ाइल अपलोड।
- मेमोरी।
मुझे कमेंट्स में बताएं।
Source: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 Video: https://youtu.be/nbFKG_6DkSE Optional learning community: https://t.me/GyaanSetuAi