ਮੈਂ ਇੱਕ ਆਧੁਨਿਕ AI ਅਸਿਸਟੈਂਟ ਬਣਾਇਆ
ਜ਼ਿਆਦਾਤਰ AI ਟਿਊਟੋਰਿਅਲ ਸਿਰਫ਼ ਇਹ ਦਿਖਾਉਂਦੇ ਹਨ ਕਿ API ਨੂੰ ਕਿਵੇਂ ਕਾਲ ਕਰਨਾ ਹੈ। ਮੈਂ ਇੱਕ ਅਸਲੀ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣਾ ਚਾਹੁੰਦਾ ਸੀ। ਮੈਂ vanilla HTML, CSS, ਅਤੇ JavaScript ਦੀ ਵਰਤੋਂ ਕੀਤੀ।
ਐਪ ਵਿੱਚ ਇਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸ਼ਾਮਲ ਹਨ:
- Responsive UI
- Dark ਅਤੇ Light ਮੋਡ
- Streaming ਜਵਾਬ
- Markdown ਰੈਂਡਰਿੰਗ
- Syntax highlighting
- ਚੈਟ ਹਿਸਟਰੀ
- Error handling
- GitHub Pages ਡਿਪਲਾਈਮੈਂਟ
ਮੈਂ ਇਹਨਾਂ ਟੂਲਸ ਦੀ ਵਰਤੋਂ ਕੀਤੀ:
- HTML5 ਅਤੇ CSS3
- Vanilla JavaScript
- Marked.js
- DOMPurify
- Prism.js
- Google Generative AI SDK
ਮੈਂ ਸੁਰੱਖਿਆ 'ਤੇ ਧਿਆਨ ਦਿੱਤਾ। ਮੈਂ AI ਜਵਾਬਾਂ ਨੂੰ ਸਾਫ਼ ਕਰਨ ਲਈ DOMPurify ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਇਹ ਸੁਰੱਖਿਆ ਜੋਖਮਾਂ ਨੂੰ ਰੋਕਦਾ ਹੈ।
ਮੈਂ ਯੂਜ਼ਰ ਐਕਸਪੀਰੀਅੰਸ 'ਤੇ ਧਿਆਨ ਦਿੱਤਾ। ਐਪ ਟੈਕਸਟ ਨੂੰ ਜਿਵੇਂ ਹੀ ਇਹ ਬਣਦਾ ਹੈ, ਸਟ੍ਰੀਮ ਕਰਦੀ ਹੈ। ਤੁਹਾਨੂੰ ਤੁਰੰਤ ਫੀਡਬੈਕ ਮਿਲਦਾ ਹੈ। ਤੁਹਾਨੂੰ ਲੋਡਿੰਗ ਆਈਕਨ ਦੀ ਉਡੀਕ ਨਹੀਂ ਕਰਨੀ ਪੈਂਦੀ।
ਮੈਂ ਕੋਡ ਬਲਾਕਸ ਲਈ Prism.js ਜੋੜਿਆ। ਇਹ ਭਾਸ਼ਾ ਦੇ ਲੇਬਲ ਅਤੇ ਕਾਪੀ ਬਟਨ ਜੋੜਦਾ ਹੈ।
ਮੈਂ ਚੈਟ ਹਿਸਟਰੀ ਲਈ localStorage ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਪੇਜ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰਨ ਤੋਂ ਬਾਅਦ ਵੀ ਤੁਹਾਡੀਆਂ ਗੱਲਬਾਤਾਂ ਉੱਥੇ ਹੀ ਰਹਿੰਦੀਆਂ ਹਨ। ਇਹ ਤੇਜ਼ ਹੈ ਅਤੇ ਇਸ ਲਈ ਕਿਸੇ ਬੈਕਐਂਡ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।
ਮੈਂ ਰੀਟ੍ਰਾਈ ਲੌਜਿਕ ਅਤੇ ਐਰਰ ਮੈਸੇਜ ਜੋੜੇ ਹਨ। ਇਹ ਐਪ ਨੂੰ ਸਥਿਰ ਬਣਾਉਂਦਾ ਹੈ।
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