ഞാൻ ഒരു ആധുനിക AI അസിസ്റ്റന്റ് നിർമ്മിച്ചു
മിക്ക AI ട്യൂട്ടോറിയലുകളും ഒരു API എങ്ങനെ വിളിക്കാം എന്ന് മാത്രമാണ് കാണിക്കുന്നത്. എനിക്ക് ഒരു യഥാർത്ഥ ആപ്ലിക്കേഷൻ നിർമ്മിക്കണമെന്നുണ്ടായിരുന്നു. ഞാൻ vanilla HTML, CSS, JavaScript എന്നിവയാണ് ഉപയോഗിച്ചത്.
ഈ ആപ്പിൽ താഴെ പറയുന്ന ഫീച്ചറുകൾ ഉൾപ്പെടുന്നു:
- Responsive UI
- Dark and Light modes
- Streaming responses
- Markdown rendering
- Syntax highlighting
- Chat history
- Error handling
- GitHub Pages deployment
ഞാൻ ഈ ടൂളുകളാണ് ഉപയോഗിച്ചത്:
- HTML5 and CSS3
- Vanilla JavaScript
- Marked.js
- DOMPurify
- Prism.js
- Google Generative AI SDK
ഞാൻ സുരക്ഷയ്ക്ക് മുൻഗണന നൽകി. AI റെസ്പോൺസുകൾ ക്ലീൻ ചെയ്യാൻ ഞാൻ DOMPurify ഉപയോഗിച്ചു. ഇത് സുരക്ഷാ പ്രശ്നങ്ങൾ ഒഴിവാക്കാൻ സഹായിക്കുന്നു.
ഞാൻ യൂസർ എക്സ്പീരിയൻസിന് (user experience) പ്രാധാന്യം നൽകി. ആപ്പ് ടെക്സ്റ്റ് ജനറേറ്റ് ചെയ്യുന്നതിനൊപ്പം തന്നെ അത് സ്ട്രീം ചെയ്യുന്നു. നിങ്ങൾക്ക് ഉടനടി ഫീഡ്ബാക്ക് ലഭിക്കും. ഒരു ലോഡിംഗ് ഐക്കണിനായി നിങ്ങൾ കാത്തുനിൽക്കേണ്ടതില്ല.
കോഡ് ബ്ലോക്കുകൾക്കായി ഞാൻ Prism.js ചേർത്തു. ഇത് ലാംഗ്വേജ് ലേബലുകളും കോപ്പി ബട്ടണുകളും നൽകുന്നു.
ചാറ്റ് ഹിസ്റ്ററിനായി ഞാൻ localStorage ഉപയോഗിച്ചു. പേജ് റീഫ്രഷ് ചെയ്താലും നിങ്ങളുടെ സംഭാഷണങ്ങൾ അവിടെത്തന്നെ ഉണ്ടാകും. ഇത് വേഗതയുള്ളതാണ് കൂടാതെ ഇതിന് ബാക്കെൻഡ് ആവശ്യമില്ല.
ഞാൻ retry logic-ഉം error messages-ഉം ചേർത്തു. ഇത് ആപ്പിനെ കൂടുതൽ സുസ്ഥിരമാക്കുന്നു.
AI പ്രോജക്റ്റുകൾ നിങ്ങൾക്ക് നിരവധി കഴിവുകൾ പഠിപ്പിക്കുന്നു:
- API integration
- UI design
- State management
- User experience
നിങ്ങളുടെ പോർട്ട്ഫോളിയോയ്ക്കായി ഇത്തരത്തിലുള്ള പ്രോജക്റ്റുകൾ നിർമ്മിക്കുക. ഇത് നിങ്ങൾക്ക് പ്രായോഗികമായ കഴിവുകൾ ഉണ്ടെന്ന് തെളിയിക്കുന്നു.
അടുത്തതായി ഞാൻ ഏത് ഫീച്ചർ ആണ് ചേർക്കേണ്ടത്?
- Voice input
- File uploads
- Memory
കമന്റുകളിൽ എന്നോട് പറയൂ.
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