ਮੈਂ ਇੱਕ ਆਧੁਨਿਕ AI ਅਸਿਸਟੈਂਟ ਬਣਾਇਆ ਹੈ
ਜ਼ਿਆਦਾਤਰ AI ਟਿਊਟੋਰਿਅਲ ਬਹੁਤ ਹੀ ਸਰਲ ਹੁੰਦੇ ਹਨ। ਉਹ ਸਿਰਫ਼ ਇੱਕ ਬੇਸਿਕ API ਕਾਲ ਅਤੇ ਇੱਕ ਜਵਾਬ ਦਿਖਾਉਂਦੇ ਹਨ। ਮੈਂ ਇੱਕ ਅਸਲੀ ਐਪਲੀਕੇਸ਼ਨ ਚਾਹੁੰਦਾ ਸੀ।
ਮੈਂ vanilla HTML, CSS, ਅਤੇ JavaScript ਨਾਲ ਇੱਕ AI ਅਸਿਸਟੈਂਟ ਬਣਾਇਆ ਹੈ।
ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ:
- ਸਟ੍ਰੀਮਿੰਗ ਜਵਾਬ (Streaming responses)।
- ਡਾਰਕ ਅਤੇ ਲਾਈਟ ਮੋਡ।
- Markdown ਅਤੇ ਸਿੰਟੈਕਸ ਹਾਈਲਾਈਟਿੰਗ।
- ਚੈਟ ਇਤਿਹਾਸ ਨੂੰ ਸਾਂਭਣਾ (Chat history persistence)।
- ਐਰਰ ਹੈਂਡਲਿੰਗ ਅਤੇ ਰੀਟ੍ਰਾਈ ਲੌਜਿਕ।
ਟੈਕ ਸਟੈਕ:
- HTML5 ਅਤੇ CSS3।
- Vanilla JavaScript।
- Marked.js ਅਤੇ Prism.js।
- ਸੁਰੱਖਿਆ ਲਈ DOMPurify।
- Google Generative AI SDK।
- ਹੋਸਟਿੰਗ ਲਈ GitHub Pages।
ਸੁਰੱਖਿਆ ਇੱਕ ਤਰਜੀਹ ਹੈ। ਮੈਂ AI ਜਵਾਬਾਂ ਨੂੰ ਸਾਫ਼ ਕਰਨ ਲਈ DOMPurify ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ। ਇਹ ਸੁਰੱਖਿਆ ਜੋਖਮਾਂ ਨੂੰ ਰੋਕਦਾ ਹੈ।
ਯੂਜ਼ਰ ਐਕਸਪੀਰੀਅੰਸ (User experience) ਮਹੱਤਵਪੂਰਨ ਹੈ। ਮੈਂ ਸਟ੍ਰੀਮਿੰਗ ਕੰਟੈਂਟ ਜੋੜਿਆ ਹੈ। ਯੂਜ਼ਰਸ ਟੈਕਸਟ ਨੂੰ ਉਦੋਂ ਹੀ ਦੇਖ ਸਕਦੇ ਹਨ ਜਦੋਂ ਇਹ ਜਨਰੇਟ ਹੁੰਦਾ ਹੈ। ਉਹਨਾਂ ਨੂੰ ਲੋਡਿੰਗ ਆਈਕਨ ਦੀ ਉਡੀਕ ਨਹੀਂ ਕਰਨੀ ਪੈਂਦੀ।
ਮੈਂ ਚੈਟ ਇਤਿਹਾਸ ਲਈ localStorage ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ। ਇਹ ਐਪ ਨੂੰ ਤੇਜ਼ ਬਣਾਉਂਦਾ ਹੈ। ਇਸ ਲਈ ਕਿਸੇ ਬੈਕਐਂਡ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।
ਸਿੱਖੇ ਗਏ ਸਬਕ:
- ਐਜ ਕੇਸਾਂ (edge cases) ਨੂੰ ਠੀਕ ਕਰਨਾ।
- UX 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਨਾ।
- ਸਟੇਟ (state) ਨੂੰ ਮੈਨੇਜ ਕਰਨਾ।
- AI ਆਉਟਪੁੱਟ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰਨਾ।
ਇਹ ਵੇਰਵੇ AI ਮਾਡਲ ਨਾਲੋਂ ਵੱਧ ਮਹੱਤਵਪੂਰਨ ਹਨ।
ਆਪਣੇ ਪੋਰਟਫੋਲੀਓ ਲਈ ਅਜਿਹੇ ਪ੍ਰੋਜੈਕਟ ਬਣਾਓ। ਤੁਸੀਂ APIs, UI ਡਿਜ਼ਾਈਨ, ਅਤੇ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਸਿੱਖਦੇ ਹੋ।
ਤੁਸੀਂ ਕਿਹੜ