నేను ఒక ఆధునిక 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ని ఉపయోగించాను. ఇది భద్రతా ప్రమాదాలను నివారిస్తుంది.

నేను యూజర్ ఎక్స్‌పీరియన్స్ (user experience) పై దృష్టి సారించాను. అప్లికేషన్ టెక్స్ట్‌ను జనరేట్ చేస్తున్నప్పుడు స్ట్రీమ్ చేస్తుంది. మీకు తక్షణమే ఫీడ్‌బ్యాక్ లభిస్తుంది. మీరు లోడింగ్ ఐకాన్ కోసం వేచి ఉండాల్సిన అవసరం లేదు.

కోడ్ బ్లాక్‌ల కోసం నేను 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