𝗜 𝗕𝘂𝗶𝗹𝘁 𝗔 𝗠𝗼𝗱𝗲𝗿𝗻 𝗔𝗜 𝗔𝘀𝘀𝗶𝘀𝘁𝗮𝗻𝘁
ಹೆಚ್ಚಿನ AI ಟ್ಯುಟೋರಿಯಲ್ಗಳು ಕೇವಲ API ಅನ್ನು ಹೇಗೆ ಕರೆಯುವುದು ಎಂಬುದನ್ನು ಮಾತ್ರ ತೋರಿಸುತ್ತವೆ. ನಾನು ಒಂದು ನೈಜ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿರ್ಮಿಸಲು ಬಯಸಿದ್ದೆ. ನಾನು vanilla HTML, CSS ಮತ್ತು JavaScript ಅನ್ನು ಬಳಸಿದ್ದೇನೆ.
ಅಪ್ಲಿಕೇಶನ್ ಈ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒಳಗೊಂಡಿದೆ:
- ರೆಸ್ಪಾನ್ಸಿವ್ UI (Responsive UI)
- ಡಾರ್ಕ್ ಮತ್ತು ಲೈಟ್ ಮೋಡ್ಗಳು (Dark and Light modes)
- ಸ್ಟ್ರೀಮಿಂಗ್ ರೆಸ್ಪಾನ್ಸ್ಗಳು (Streaming responses)
- ಮಾರ್ಕ್ಡೌನ್ ರೆಂಡರಿಂಗ್ (Markdown rendering)
- ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೈಲೈಟಿಂಗ್ (Syntax highlighting)
- ಚಾಟ್ ಇತಿಹಾಸ (Chat history)
- ಎರರ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ (Error handling)
- GitHub Pages ನಿಯೋಜನೆ (GitHub Pages deployment)
ನಾನು ಈ ಪರಿಕರಗಳನ್ನು ಬಳಸಿದ್ದೇನೆ:
- HTML5 ಮತ್ತು CSS3
- Vanilla JavaScript
- Marked.js
- DOMPurify
- Prism.js
- Google Generative AI SDK
ನಾನು ಭದ್ರತೆಯ ಮೇಲೆ ಗಮನ ಹರಿಸಿದೆ. AI ರೆಸ್ಪಾನ್ಸ್ಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಲು ನಾನು DOMPurify ಅನ್ನು ಬಳಸಿದೆ. ಇದು ಭದ್ರತಾ ಅಪಾಯಗಳನ್ನು ತಡೆಯುತ್ತದೆ.
ನಾನು ಬಳಕೆದಾರರ ಅನುಭವದ (user experience) ಮೇಲೆ ಗಮನ ಹರಿಸಿದೆ. ಅಪ್ಲಿಕೇಶನ್ ಪಠ್ಯವನ್ನು ಜನರೇಟ್ ಮಾಡುವಾಗ ಸ್ಟ್ರೀಮ್ ಮಾಡುತ್ತದೆ. ನೀವು ತಕ್ಷಣವೇ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಪಡೆಯುತ್ತೀರಿ. ನೀವು ಲೋಡಿಂಗ್ ಐಕಾನ್ ಗಾಗಿ ಕಾಯಬೇಕಾಗಿಲ್ಲ.
ನಾನು ಕೋಡ್ ಬ್ಲಾಕ್ಗಳಿಗಾಗಿ Prism.js ಅನ್ನು ಸೇರಿಸಿದೆ. ಇದು ಭಾಷೆಯ ಲೇಬಲ್ಗಳು ಮತ್ತು ಕಾಪಿ ಬಟನ್ಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ.
ನಾನು ಚಾಟ್ ಇತಿಹಾಸಕ್ಕಾಗಿ localStorage ಅನ್ನು ಬಳಸಿದೆ. ನೀವು ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿದ ನಂತರವೂ ನಿಮ್ಮ ಸಂಭಾಷಣೆಗಳು ಉಳಿಯುತ್ತವೆ. ಇದು ವೇಗವಾಗಿದೆ ಮತ್ತು ಇದಕ್ಕೆ ಯಾವುದೇ ಬ್ಯಾಕೆಂಡ್ ಅಗತ್ಯವಿಲ್ಲ.
ನಾನು ರಿಟ್ರೈ ಲಾಜಿಕ್ ಮತ್ತು ಎರರ್ ಸಂದೇಶಗಳನ್ನು ಸೇರಿಸಿದೆ. ಇದು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸ್ಥಿರವಾಗಿಸುತ್ತದೆ.
AI ಪ್ರಾಜೆಕ್ಟ್ಗಳು ನಿಮಗೆ ಅನೇಕ ಕೌಶಲ್ಯಗಳನ್ನು ಕಲಿಸುತ್ತವೆ:
- API ಇಂಟಿಗ್ರೇಷನ್
- UI ಡಿಸೈನ್
- ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್ಮೆಂಟ್
- ಬಳಕೆದಾರರ ಅನುಭವ (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