મેં એક આધુનિક AI આસિસ્ટન્ટ બનાવ્યો

મોટાભાગના AI ટ્યુટોરિયલ્સ ફક્ત API કેવી રીતે કોલ કરવું તે જ બતાવે છે. હું એક વાસ્તવિક એપ્લિકેશન બનાવવા માંગતો હતો. મેં vanilla HTML, CSS અને JavaScript નો ઉપયોગ કર્યો.

એપ્લિકેશનમાં આ સુવિધાઓનો સમાવેશ થાય છે:

  • રિસ્પોન્સિવ UI
  • ડાર્ક અને લાઇટ મોડ્સ
  • સ્ટ્રીમિંગ રિસ્પોન્સિસ
  • Markdown રેન્ડરિંગ
  • સિન્ટેક્સ હાઇલાઇટિંગ
  • ચેટ હિસ્ટ્રી
  • એરર હેન્ડલિંગ
  • GitHub Pages ડિપ્લોયમેન્ટ

મેં આ સાધનોનો ઉપયોગ કર્યો:

  • HTML5 અને CSS3
  • Vanilla JavaScript
  • Marked.js
  • DOMPurify
  • Prism.js
  • Google Generative AI SDK

મેં સુરક્ષા પર ધ્યાન કેન્દ્રિત કર્યું. મેં AI રિસ્પોન્સિસને ક્લીન કરવા માટે DOMPurify નો ઉપયોગ કર્યો. આ સુરક્ષા જોખમોને અટકાવે છે.

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

મેં કોડ બ્લોક્સ માટે Prism.js ઉમેર્યું છે. આ લેંગ્વેજ લેબલ્સ અને કોપી બટનો ઉમેરે છે.

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

મેં રીટ્રાય લોજિક અને એરર મેસેજ ઉમેર્યા છે. આ એપ્લિકેશનને સ્થિર બનાવે છે.

AI પ્રોજેક્ટ્સ તમને ઘણા કૌશલ્યો શીખવે છે:

  • API ઇન્ટિગ્રેશન
  • UI ડિઝાઇન
  • સ્ટેટ મેનેજમેન્ટ
  • યુઝર એક્સપિરિયન્સ

તમારા પોર્ટફોલિયો માટે આવા પ્રોજેક્ટ્સ બનાવો. તે દર્શાવે છે કે તમે વ્યવહારુ કૌશલ્યો જાણો છો.

મારે હવે પછી કઈ સુવિધા ઉમેરવી જોઈએ?

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

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

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