నేను ఒక ఆధునిక AI అసిస్టెంట్ను రూపొందించాను
చాలా AI ట్యుటోరియల్స్ చాలా సరళంగా ఉంటాయి. అవి కేవలం ఒక ప్రాథమిక API కాల్ మరియు రెస్పాన్స్ను మాత్రమే చూపిస్తాయి. నాకు ఒక నిజమైన అప్లికేషన్ కావాలి.
నేను vanilla HTML, CSS, మరియు JavaScriptతో ఒక AI అసిస్టెంట్ను రూపొందించాను.
ముఖ్యమైన ఫీచర్లు:
- స్ట్రీమింగ్ రెస్పాన్స్లు (Streaming responses).
- డార్క్ మరియు లైట్ మోడ్లు.
- Markdown మరియు సింటాక్స్ హైలైటింగ్.
- చాట్ హిస్టరీ నిల్వ (Chat history persistence).
- ఎర్రర్ హ్యాండ్లింగ్ మరియు రీట్రై లాజిక్.
టెక్ స్టాక్:
- HTML5 మరియు CSS3.
- Vanilla JavaScript.
- Marked.js మరియు Prism.js.
- భద్రత కోసం DOMPurify.
- Google Generative AI SDK.
- హోస్టింగ్ కోసం GitHub Pages.
భద్రత అనేది ప్రాధాన్యత అంశం. AI రెస్పాన్స్లను క్లీన్ చేయడానికి నేను DOMPurifyని ఉపయోగించాను. ఇది భద్రతా పరమైన రిస్క్లను నివారిస్తుంది.
యూజర్ ఎక్స్పీరియన్స్ (User experience) ముఖ్యం. నేను స్ట్రీమింగ్ కంటెంట్ను జోడించాను. టెక్స్ట్ జనరేట్ అవుతున్న కొద్దీ వినియోగదారులు దానిని చూడవచ్చు. వారు లోడింగ్ ఐకాన్ కోసం వేచి ఉండాల్సిన అవసరం లేదు.
చాట్ హిస్టరీ కోసం నేను 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