मैंने एक आधुनिक AI असिस्टेंट बनाया
अधिकांश AI ट्यूटोरियल केवल यह दिखाते हैं कि API को कैसे कॉल किया जाए। मैं एक वास्तविक एप्लिकेशन बनाना चाहता था। मैंने vanilla HTML, CSS और JavaScript का उपयोग किया।
ऐप में ये फीचर्स शामिल हैं:
- रिस्पॉन्सिव UI
- डार्क और लाइट मोड
- स्ट्रीमिंग रिस्पॉन्स
- Markdown रेंडरिंग
- सिंटैक्स हाइलाइटिंग
- चैट हिस्ट्री
- एरर हैंडलिंग
- GitHub Pages डिप्लॉयमेंट
मैंने इन टूल्स का उपयोग किया:
- HTML5 और CSS3
- Vanilla JavaScript
- Marked.js
- DOMPurify
- Prism.js
- Google Generative AI SDK
मैंने सुरक्षा पर ध्यान केंद्रित किया। मैंने AI रिस्पॉन्स को साफ़ करने के लिए DOMPurify का उपयोग किया। यह सुरक्षा जोखिमों को रोकता है।
मैंने यूजर एक्सपीरियंस पर ध्यान केंद्रित किया। ऐप टेक्स्ट को जनरेट होते ही स्ट्रीम करता है। आपको तुरंत फीडबैक मिलता है। आपको लोडिंग आइकन का इंतज़ार नहीं करना पड़ता।
मैंने कोड ब्लॉक्स के लिए Prism.js जोड़ा। यह लैंग्वेज लेबल और कॉपी बटन जोड़ता है।
मैंने चैट हिस्ट्री के लिए localStorage का उपयोग किया। पेज रिफ्रेश करने के बाद भी आपकी बातचीत बनी रहती है। यह तेज़ है और इसके लिए किसी बैकएंड की आवश्यकता नहीं है।
मैंने रिट्राय लॉजिक (retry logic) और एरर मैसेज जोड़े। इससे ऐप स्थिर बनता है।
AI प्रोजेक्ट्स आपको कई कौशल सिखाते हैं:
- API इंटीग्रेशन
- UI डिज़ाइन
- स्टेट मैनेजमेंट
- यूजर एक्सपीरियंस
अपने पोर्टफोलियो के लिए इस तरह के प्रोजेक्ट्स बनाएं। यह दिखाता है कि आप व्यावहारिक कौशल जानते हैं।
मुझे अगला कौन सा फीचर जोड़ना चाहिए?
- वॉइस इनपुट
- फाइल अपलोड
- मेमोरी
मुझे कमेंट्स में बताएं।
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