ഞാൻ ഒരു മോഡേൺ AI അസിസ്റ്റന്റ് നിർമ്മിച്ചു
മിക്ക AI ട്യൂട്ടോറിയലുകളും വളരെ ലളിതമാണ്. അവ ഒരു അടിസ്ഥാന API കോളിനെയും അതിന്റെ മറുപടിയെയും മാത്രമാണ് കാണിക്കുന്നത്. എനിക്ക് ഒരു യഥാർത്ഥ ആപ്ലിക്കേഷൻ ആണ് വേണ്ടതായിരുന്നു.
ഞാൻ vanilla HTML, CSS, JavaScript എന്നിവ ഉപയോഗിച്ച് ഒരു AI അസിസ്റ്റന്റ് നിർമ്മിച്ചു.
പ്രധാന സവിശേഷതകൾ:
- സ്ട്രീമിംഗ് റെസ്പോൺസുകൾ (Streaming responses).
- ഡാർക്ക്, ലൈറ്റ് മോഡുകൾ.
- Markdown, സിന്റാക്സ് ഹൈലൈറ്റിംഗ്.
- ചാറ്റ് ഹിസ്റ്ററി സൂക്ഷിച്ചുവെക്കാനുള്ള സൗകര്യം.
- എറർ ഹാൻഡ്ലിംഗും റീട്രൈ ലോജിക്കും.
ഉപയോഗിച്ച സാങ്കേതികവിദ്യകൾ (Tech stack):
- HTML5 and CSS3.
- Vanilla JavaScript.
- Marked.js and Prism.js.
- DOMPurify for security.
- Google Generative AI SDK.
- GitHub Pages for hosting.
സുരക്ഷയ്ക്കാണ് ഞാൻ മുൻഗണന നൽകിയത്. AI മറുപടികൾ ക്ലീൻ ചെയ്യാൻ ഞാൻ DOMPurify ഉപയോഗിച്ചു. ഇത് സുരക്ഷാ പ്രശ്നങ്ങൾ ഒഴിവാക്കാൻ സഹായിക്കുന്നു.
യൂസർ എക്സ്പീരിയൻസ് (User experience) വളരെ പ്രധാനമാണ്. ഞാൻ സ്ട്രീമിംഗ് കണ്ടന്റ് ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. ടെക്സ്റ്റ് ജനറേറ്റ് ചെയ്യപ്പെടുമ്പോൾ തന്നെ ഉപയോക്താക്കൾക്ക് അത് കാണാൻ സാധിക്കും. അവർക്ക് ലോഡിംഗ് ഐക്കണിനായി കാത്തുനിൽക്കേണ്ടി വരില്ല.
ചാറ്റ് ഹിസ്റ്ററിക്ക് വേണ്ടി ഞാൻ localStorage ഉപയോഗിച്ചു. ഇത് ആപ്പിന്റെ വേഗത വർദ്ധിപ്പിക്കുന്നു. ഇതിന് ബാക്കെൻഡ് (backend) ആവശ്യമില്ല.
പഠിച്ച പാഠങ്ങൾ:
- എഡ്ജ് കേസുകൾ (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