𝗜 𝗕𝗨𝗜𝗟𝗧 𝗔 𝗠𝗢𝗗𝗘𝗥𝗡 𝗔𝗜 𝗔𝗦𝗦𝗜𝗦𝗧𝗔𝗡𝗧
बहुतेक AI ट्युटोरियल्स खूप साधे असतात. ते फक्त एक बेसिक API कॉल आणि प्रतिसाद दाखवतात. मला एक वास्तविक ॲप्लिकेशन हवे होते.
मी vanilla HTML, CSS आणि JavaScript वापरून एक AI असिस्टंट तयार केला.
मुख्य वैशिष्ट्ये:
- स्ट्रीमिंग प्रतिसाद (Streaming responses).
- डार्क आणि लाईट मोड.
- Markdown आणि सिंटॅक्स हायलाइटिंग.
- चॅट हिस्ट्री जतन करणे (Chat history persistence).
- एरर हँडलिंग आणि रिट्राय लॉजिक.
टेक स्टॅक (Tech stack):
- HTML5 आणि CSS3.
- Vanilla JavaScript.
- Marked.js आणि Prism.js.
- सुरक्षेसाठी DOMPurify.
- Google Generative AI SDK.
- होस्टिंगसाठी GitHub Pages.
सुरक्षा ही प्राथमिकता आहे. मी AI प्रतिसाद स्वच्छ करण्यासाठी DOMPurify वापरले. यामुळे सुरक्षेचे धोके टाळता येतात.
युजर एक्सपिरियन्स (User experience) महत्त्वाचा आहे. मी स्ट्रीमिंग कंटेंट जोडला आहे. मजकूर तयार होतानाच युजर्सना तो दिसतो. त्यांना लोडिंग आयकॉनसाठी वाट पाहावी लागत नाही.
मी चॅट हिस्ट्रीसाठी localStorage वापरले आहे. यामुळे ॲप वेगवान होते. यासाठी कोणत्याही बॅकएंडची गरज नाही.
शिकलेले धडे:
- एज केसेस (edge cases) सुधारा.
- UX वर लक्ष केंद्रित करा.
- स्टेट मॅनेज करा.
- 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