আমি একটি আধুনিক AI অ্যাসিস্ট্যান্ট তৈরি করেছি
বেশিরভাগ AI টিউটোরিয়াল অত্যন্ত সাধারণ। সেগুলো কেবল একটি বেসিক API কল এবং একটি রেসপন্স দেখায়। আমি একটি বাস্তবসম্মত অ্যাপ্লিকেশন চেয়েছিলাম।
আমি ভ্যানিলা 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 ব্যবহার করেছি। এটি নিরাপত্তা ঝুঁকি প্রতিরোধ করে।
ইউজার এক্সপেরিয়েন্স (User experience) গুরুত্বপূর্ণ। আমি স্ট্রিমিং কন্টেন্ট যুক্ত করেছি। ব্যবহারকারীরা টেক্সট জেনারেট হওয়ার সাথে সাথেই তা দেখতে পান। তাদের কোনো লোডিং আইকনের জন্য অপেক্ষা করতে হয় না।
আমি চ্যাট হিস্ট্রির জন্য localStorage ব্যবহার করেছি। এটি অ্যাপটিকে দ্রুত করে তোলে। এর জন্য কোনো ব্যাকএন্ডের প্রয়োজন নেই।
যা শিখেছি:
- এজ কেস (edge cases) সমাধান করা।
- UX-এর ওপর গুরুত্ব দেওয়া।
- স্টেট (state) ম্যানেজ করা।
- AI আউটপুট সুরক্ষিত করা।
এই ডিটেইলসগুলো AI মডেলের চেয়েও বেশি গুরুত্বপূর্ণ।
আপনার পোর্টফোলিও-র জন্য এই ধরণের প্রজেক্ট তৈরি করুন। এতে আপনি API, 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