நான் ஒரு நவீன AI உதவியாளரை உருவாக்கினேன்
பெரும்பாலான AI பயிற்சிகள் ஒரு API-ஐ எவ்வாறு அழைப்பது என்பதை மட்டுமே காட்டுகின்றன. நான் ஒரு உண்மையான செயலியை உருவாக்க விரும்பினேன். நான் vanilla HTML, CSS மற்றும் JavaScript ஆகியவற்றைப் பயன்படுத்தினேன்.
இந்தச் செயலியின் அம்சங்கள்:
- Responsive UI
- Dark மற்றும் Light modes
- Streaming responses
- Markdown rendering
- Syntax highlighting
- Chat history
- Error handling
- GitHub Pages deployment
நான் பயன்படுத்திய கருவிகள்:
- HTML5 மற்றும் CSS3
- Vanilla JavaScript
- Marked.js
- DOMPurify
- Prism.js
- Google Generative AI SDK
நான் பாதுகாப்பில் கவனம் செலுத்தினேன். AI பதில்களைச் சுத்தப்படுத்த (clean) நான் DOMPurify-ஐப் பயன்படுத்தினேன். இது பாதுகாப்பு அபாயங்களைத் தடுக்கிறது.
நான் பயனர் அனுபவத்தில் (user experience) கவனம் செலுத்தினேன். செயலி உரையை உருவாக்கும்போதே அதைத் திரையில் காட்டுகிறது (streams). உங்களுக்கு உடனடித் தகவல் கிடைக்கிறது. நீங்கள் லோடிங் ஐகானுக்காகக் காத்திருக்க வேண்டியதில்லை.
கோட் பிளாக்குகளுக்காக (code blocks) நான் Prism.js-ஐச் சேர்த்துள்ளேன். இது மொழி லேபிள்கள் மற்றும் காப்பி பட்டன்களைச் சேர்க்கிறது.
சாட் ஹிஸ்டரி (chat history)க்காக நான் localStorage-ஐப் பயன்படுத்தினேன். நீங்கள் பக்கத்தைப் புதுப்பித்த பிறகும் உங்கள் உரையாடல்கள் அப்படியே இருக்கும். இது வேகமானது மற்றும் இதற்குப் பின்முனை (backend) தேவையில்லை.
நான் retry logic மற்றும் பிழைச் செய்திகளைச் சேர்த்துள்ளேன். இது செயலியை நிலையானதாக மாற்றுகிறது.
AI திட்டங்கள் உங்களுக்குப் பல திறன்களைக் கற்றுத் தருகின்றன:
- API integration
- UI design
- State management
- User experience
உங்கள் போர்ட்ஃபோலியோவிற்காக (portfolio) இதுபோன்ற திட்டங்களை உருவாக்குங்கள். இது உங்களுக்கு நடைமுறைத் திறன்கள் உள்ளன என்பதைக் காட்டுகிறது.
அடுத்ததாக நான் எந்த அம்சத்தைச் சேர்க்க வேண்டும்?
- Voice input
- File uploads
- Memory
கருத்துகளில் (comments) எனக்குத் தெரியப்படுத்துங்கள்.
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