મેં એક આધુનિક 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 નો ઉપયોગ કર્યો છે. આ સુરક્ષા જોખમોને અટકાવે છે.

યુઝર એક્સપિરિયન્સ મહત્વનો છે. મેં સ્ટ્રીમિંગ કન્ટેન્ટ ઉમેર્યું છે. યુઝર્સ ટેક્સ્ટ જેમ જેમ જનરેટ થાય તેમ જોઈ શકે છે. તેઓએ લોડિંગ આઇકન માટે રાહ જોવી પડતી નથી.

મેં ચેટ હિસ્ટ્રી માટે localStorage નો ઉપયોગ કર્યો છે. આ એપને ઝડપી બનાવે છે. તેમાં કોઈ બેકએન્ડની જરૂર પડતી નથી.

શીખવા મળેલા પાઠ:

  • એજ કેસીસ (edge cases) સુધારો.
  • UX પર ધ્યાન કેન્દ્રિત કરો.
  • સ્ટેટ મેનેજ કરો.
  • AI આઉટપુટને સુરક્ષિત કરો.

આ વિગતો AI મોડલ કરતા વધુ મહત્વની છે.

તમારા પોર્ટફોલિયો માટે આવા પ્રોજેક્ટ્સ બનાવો. તમે APIs, UI ડિઝાઇન અને સ્ટેટ મેનેજમેન્ટ શીખશો.

તમે કયું ફીચર ઉમેરશો?

  • વોઇસ ઇનપુટ.
  • ફાઇલ અપલોડ્સ.
  • મેમરી.

મને કોમેન્ટ્સમાં જણાવો.

સ્ત્રોત: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 વિડિયો: https://youtu.be/nbFKG_6DkSE વૈકલ્પિક લર્નિંગ કમ્યુનિટી: https://t.me/GyaanSetuAi