ನಾನು ಒಂದು ಆಧುನಿಕ AI ಅಸಿಸ್ಟೆಂಟ್ ಅನ್ನು ನಿರ್ಮಿಸಿದ್ದೇನೆ

ಹೆಚ್ಚಿನ AI ಟ್ಯುಟೋರಿಯಲ್‌ಗಳು ತುಂಬಾ ಸರಳವಾಗಿವೆ. ಅವು ಕೇವಲ ಒಂದು ಮೂಲಭೂತ API ಕಾಲ್ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ತೋರಿಸುತ್ತವೆ. ನನಗೆ ಒಂದು ನೈಜ ಅಪ್ಲಿಕೇಶನ್ ಬೇಕಿತ್ತು.

ನಾನು vanilla HTML, CSS ಮತ್ತು JavaScript ಬಳಸಿ ಒಂದು AI ಅಸಿಸ್ಟೆಂಟ್ ಅನ್ನು ನಿರ್ಮಿಸಿದ್ದೇನೆ.

ಪ್ರಮುಖ ವೈಶಿಷ್ಟ್ಯಗಳು:

  • ಸ್ಟ್ರೀಮಿಂಗ್ ಪ್ರತಿಕ್ರಿಯೆಗಳು (Streaming responses).
  • ಡಾರ್ಕ್ ಮತ್ತು ಲೈಟ್ ಮೋಡ್‌ಗಳು.
  • Markdown ಮತ್ತು ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೈಲೈಟಿಂಗ್.
  • ಚಾಟ್ ಇತಿಹಾಸದ ಉಳಿವಿಕೆ (Chat history persistence).
  • ಎರರ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಮತ್ತು ರಿಟ್ರೈ ಲಾಜಿಕ್.

ತಾಂತ್ರಿಕ ಸ್ಟ್ಯಾಕ್ (Tech stack):

  • HTML5 ಮತ್ತು CSS3.
  • Vanilla JavaScript.
  • Marked.js ಮತ್ತು Prism.js.
  • ಸುರಕ್ಷತೆಗಾಗಿ DOMPurify.
  • Google Generative AI SDK.
  • ಹೋಸ್ಟಿಂಗ್‌ಗಾಗಿ GitHub Pages.

ಸುರಕ್ಷತೆಯು ಮೊದಲ ಆದ್ಯತೆಯಾಗಿದೆ. AI ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಶುದ್ಧೀಕರಿಸಲು ನಾನು DOMPurify ಅನ್ನು ಬಳಸಿದ್ದೇನೆ. ಇದು ಸುರಕ್ಷತಾ ಅಪಾಯಗಳನ್ನು ತಡೆಯುತ್ತದೆ.

ಬಳಕೆದಾರರ ಅನುಭವವು ಮುಖ್ಯವಾದುದು. ನಾನು ಸ್ಟ್ರೀಮಿಂಗ್ ಕಂಟೆಂಟ್ ಅನ್ನು ಸೇರಿಸಿದ್ದೇನೆ. ಬಳಕೆದಾರರು ಪಠ್ಯವು ಸೃಷ್ಟಿಯಾಗುತ್ತಿರುವಾಗಲೇ ಅದನ್ನು ನೋಡಬಹುದು. ಅವರು ಲೋಡಿಂಗ್ ಐಕಾನ್ ಗಾಗಿ ಕಾಯಬೇಕಾಗಿಲ್ಲ.

ಚಾಟ್ ಇತಿಹಾಸಕ್ಕಾಗಿ ನಾನು localStorage ಅನ್ನು ಬಳಸಿದ್ದೇನೆ. ಇದು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ವೇಗವಾಗಿಸುತ್ತದೆ. ಇದಕ್ಕೆ ಯಾವುದೇ ಬ್ಯಾಕೆಂಡ್ ಅಗತ್ಯವಿಲ್ಲ.

ಕಲಿತ ಪಾಠಗಳು:

  • ಎಡ್ಜ್ ಕೇಸ್‌ಗಳನ್ನು (Edge cases) ಸರಿಪಡಿಸುವುದು.
  • UX ಮೇಲೆ ಗಮನ ಹರಿಸುವುದು.
  • ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆ (Manage state).
  • AI ಔಟ್‌ಪುಟ್ ಅನ್ನು ಸುರಕ್ಷಿತಗೊಳಿಸುವುದು.

ಈ ವಿವರಗಳು AI ಮಾಡೆಲ್ ಗಿಂತ ಹೆಚ್ಚು ಮುಖ್ಯವಾಗಿವೆ.

ನಿಮ್ಮ ಪೋರ್ಟ್‌ಫೋಲಿಯೋಗಾಗಿ ಇಂತಹ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಿ. ನೀವು APIs, UI ಡಿಸೈನ್ ಮತ್ತು ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಅನ್ನು ಕಲಿಯುತ್ತೀರಿ.

ನೀವು ಯಾವ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಸೇರಿಸುತ್ತೀರಿ?

  • ವಾಯ್ಸ್ ಇನ್‌ಪುಟ್.
  • ಫೈಲ್ ಅಪ್‌ಲೋಡ್‌ಗಳು.
  • ಮೆಮೊರಿ.

ಕಾಮೆಂಟ್‌ಗಳಲ್ಲಿ ನನಗೆ ತಿಳಿಸಿ.

Source: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 Video: https://youtu.be/nbFKG_6DkSE Optional learning community: https://t.me/GyaanSetuAi