நான் ஒரு நவீன AI உதவியாளரை உருவாக்கினேன்

பெரும்பாலான AI பயிற்சிகள் மிகவும் எளிமையாக உள்ளன. அவை ஒரு அடிப்படை API அழைப்பையும் பதிலையும் மட்டுமே காட்டுகின்றன. எனக்கு ஒரு உண்மையான பயன்பாடு (application) தேவைப்பட்டது.

நான் vanilla HTML, CSS மற்றும் JavaScript கொண்டு ஒரு AI உதவியாளரை உருவாக்கினேன்.

முக்கிய அம்சங்கள்:

  • Streaming பதில்கள்.
  • Dark மற்றும் light மோட்கள்.
  • Markdown மற்றும் syntax highlighting.
  • Chat history சேமிப்பு.
  • Error handling மற்றும் retry logic.

தொழில்நுட்ப அடுக்கு (Tech stack):

  • HTML5 மற்றும் CSS3.
  • Vanilla JavaScript.
  • Marked.js மற்றும் Prism.js.
  • பாதுகாப்பிற்காக DOMPurify.
  • Google Generative AI SDK.
  • ஹோஸ்டிங்கிற்கு GitHub Pages.

பாதுகாப்பு என்பது ஒரு முன்னுரிமை. AI பதில்களைச் சுத்தப்படுத்த நான் DOMPurify ஐப் பயன்படுத்தினேன். இது பாதுகாப்பு அபாயங்களைத் தடுக்கிறது.

பயனர் அனுபவம் (User experience) முக்கியமானது. நான் streaming உள்ளடக்கத்தைச் சேர்த்துள்ளேன். உரைகள் உருவாகும்போதே பயனர்கள் அவற்றைப் பார்க்க முடியும். அவர்கள் லோடிங் ஐகானுக்காகக் காத்திருக்க வேண்டியதில்லை.

Chat history-க்காக நான் localStorage ஐப் பயன்படுத்தினேன். இது செயலியை வேகமாக்குகிறது. இதற்கு எந்த backend தேவையில்லை.

கற்றுக்கொண்ட பாடங்கள்:

  • Edge cases-ஐச் சரிசெய்தல்.
  • UX-இல் கவனம் செலுத்துதல்.
  • State-ஐ நிர்வகித்தல்.
  • AI வெளியீட்டைப் பாதுகாத்தல்.

இந்த விவரங்கள் AI மாடலை விட முக்கியமானவை.

உங்கள் போர்ட்ஃபோலியோவிற்காக (portfolio) இதுபோன்ற திட்டங்களை உருவாக்குங்கள். இதன் மூலம் நீங்கள் APIs, UI வடிவமைப்பு மற்றும் state management ஆகியவற்றைக் கற்றுக்கொள்ளலாம்.

நீங்கள் எந்த அம்சத்தைச் சேர்ப்பீர்கள்?

  • Voice input.
  • File uploads.
  • Memory.

கருத்துக்களில் (comments) என்னிடம் சொல்லுங்கள்.

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