میں نے ایک جدید AI اسسٹنٹ بنایا ہے

زیادہ تر AI ٹیوٹوریلز صرف یہ دکھاتے ہیں کہ API کو کیسے کال کیا جائے۔ میں ایک حقیقی ایپلی کیشن بنانا چاہتا تھا۔ میں نے سادہ HTML، CSS، اور JavaScript کا استعمال کیا۔

ایپ میں یہ فیچرز شامل ہیں:

  • ریسپانسیو UI
  • ڈارک اور لائٹ موڈز
  • اسٹریمنگ رسپانسز
  • مارک ڈاؤن رینڈرنگ
  • سنٹیکس ہائی لائٹنگ
  • چیٹ ہسٹری
  • ایرر ہینڈلنگ
  • GitHub Pages پر ڈیپلائمنٹ

میں نے یہ ٹولز استعمال کیے:

  • HTML5 اور CSS3
  • Vanilla JavaScript
  • Marked.js
  • DOMPurify
  • Prism.js
  • Google Generative AI SDK

میں نے سیکیورٹی پر توجہ دی۔ میں نے AI رسپانسز کو صاف کرنے کے لیے DOMPurify کا استعمال کیا۔ یہ سیکیورٹی کے خطرات کو روکتا ہے۔

میں نے یوزر ایکسپیرینس پر توجہ دی۔ ایپ ٹیکسٹ کو جنریٹ ہوتے ہی اسٹریم کرتی ہے۔ آپ کو فوری فیڈ بیک ملتا ہے۔ آپ کو لوڈنگ آئیکن کا انتظار نہیں کرنا پڑتا۔

میں نے کوڈ بلاکس کے لیے Prism.js کا اضافہ کیا۔ یہ لینگویج لیبلز اور کاپی بٹنز شامل کرتا ہے۔

میں نے چیٹ ہسٹری کے لیے localStorage کا استعمال کیا۔ پیج ریفریش کرنے کے بعد بھی آپ کی گفتگو محفوظ رہتی ہے۔ یہ تیز ہے اور اس کے لیے کسی بیک اینڈ کی ضرورت نہیں ہے۔

میں نے ری ٹرائی لاجک اور ایرر میسجز کا اضافہ کیا۔ یہ ایپ کو مستحکم بناتا ہے۔

AI پروجیکٹس آپ کو بہت سی مہارتیں سکھاتے ہیں:

  • API انٹیگریشن
  • UI ڈیزائن
  • اسٹیٹ مینجمنٹ
  • یوزر ایکسپیرینس

اپنے پورٹ فولیو کے لیے اس طرح کے پروجیکٹس بنائیں۔ یہ ظاہر کرتا ہے کہ آپ عملی مہارتیں جانتے ہیں۔

مجھے اگلی کون سی فیچر شامل کرنی چاہیے؟

  • وائس ان پٹ
  • فائل اپ لوڈز
  • میموری

مجھے کمنٹس میں بتائیں۔

ماخذ: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 اختیاری لرننگ کمیونٹی: https://youtu.be/nbFKG_6DkSE