5 মিনিটে জিরো থেকে এআই ইমেজ অ্যানালাইজার: একটি শিক্ষানবিস গাইড

আপনি কি একটি এআই ইমেজ বিশ্লেষক কিভাবে তৈরি করতে চান তা জানতে চান? তাহলে শেষ পর্যন্ত এই নিবন্ধটি পড়ুন! আমি আপনাকে দেখাতে যাচ্ছি কিভাবে এআই বিশ্লেষক সরঞ্জামগুলি সত্যিই সহজভাবে তৈরি করতে হয়, তাই আপনার প্রায় কোনও পূর্ব জ্ঞান থাকতে হবে না। আমি আপনাকে ধাপে ধাপে নিয়ে যাব, এবং আমরা Project IDX এবং Gemini API ব্যবহার করব। এর মানে আপনাকে কিছু সেট আপ করতে হবে না; আমরা যা করব তা মেঘের উপর। আপনি প্রস্তুত হলে, তারপর শুরু করা যাক!

আমার ইউটিউব চ্যানেলে যান

প্রকল্প IDX দিয়ে শুরু করা

প্রথম ধাপটি বেশ সহজ। আমাদের ওয়েবসাইট খুলতে হবে idx.google.com . আপনি যদি এখনও নিবন্ধন না করে থাকেন, আপনাকে প্রথমে নিবন্ধন করতে হবে, এবং তারপর আপনি নীচের স্ক্রীনটি দেখতে পারেন৷

1. একটি টেমপ্লেট চয়ন করুন: আমি জেমিনি API টেমপ্লেট নির্বাচন করব।

   
   

2. আপনার প্রকল্পের নাম দিন: আমি এটিকে "পরীক্ষা 2024" বলব।

   
   

3. পরিবেশ নির্বাচন করুন: আমি "Vite" নির্বাচন করব, যা একটি জাভাস্ক্রিপ্ট ওয়েব অ্যাপ্লিকেশন পরিবেশ।

   
   

4. প্রকল্প তৈরি করুন: তৈরি করুন বোতাম টিপুন।

   
   

   

কয়েক মিনিট পর, IDX আমাদের জন্য সবকিছু তৈরি করবে, এবং আমরা আমাদের টেমপ্লেট ফাইলগুলি দেখতে পাব, যা আমরা আমাদের পছন্দ মতো পরিবর্তন করতে পারি।

টেমপ্লেট পরিবর্তন করা হচ্ছে

এটি আমাদের index.html ফাইল। আমরা এটিকে আমাদের পছন্দ মতো পরিবর্তন করতে পারি, তবে আসুন প্রথমে এটি দেখি। প্রাথমিক টেমপ্লেটে আমাদের প্রয়োজনীয় প্রায় সবকিছুই থাকে। এই টেমপ্লেটটি জেমিনি 1.5-ফ্ল্যাশ মডেল ব্যবহার করে, তাই এটি আমাদের জন্য যথেষ্ট।

একটি API কী পাচ্ছেন

আপনি দেখতে পাচ্ছেন, অ্যাপ্লিকেশনটি প্রাথমিকভাবে কাজ করে না কারণ আমাদের প্রথমে একটি API কী পেতে হবে। ওয়েবসাইটে যান https://aistudio.google.com/app/apikey , এবং সেখানে আপনার চাবি পেতে. যদি আপনি একটি API কী পেতে বিস্তারিত নির্দেশাবলী চান, তাহলে অনুগ্রহ করে প্রজেক্ট IDX সম্পর্কে আরেকটি ভিডিও দেখুন।

একবার আপনি আপনার কী পেয়ে গেলে, এটি অনুলিপি করুন এবং তারপর main.js ফাইলে যান। আপনার API কী দিয়ে স্থানধারক প্রতিস্থাপন করুন।

আবেদন পরীক্ষা করা হচ্ছে

আমাদের অ্যাপ্লিকেশন কাজ করছে কিনা তা পরীক্ষা করা যাক। "যাও" টিপুন এবং দেখুন মিথুন আমাদের কাছে কী ফিরে আসে৷

আপনি দেখতে পাচ্ছেন, মিথুন ছবির ভিতরে কী আছে তা বোঝেন এবং এই ধরনের বেকারি বেক করার জন্য কিছু রেসিপির পরামর্শ দেন। যেহেতু এই অ্যাপ্লিকেশনটি ইতিমধ্যেই সার্ভারে রয়েছে, আপনি লিঙ্কটি ভাগ করতে বা আপনার ব্রাউজারে এই অ্যাপ্লিকেশনটি খুলতে সক্ষম হবেন৷

ইউআরএলটি এখনও সুন্দর নয়; যাইহোক, আপনি দেখতে পারবেন যে সবকিছু কাজ করছে, এবং আপনি এই লিঙ্কটি আপনার অংশীদার বা সহকর্মীদের সাথে শেয়ার করতে পারেন।

ছবি আপলোড কার্যকারিতা যোগ করা

আমাদের AI চিত্র বিশ্লেষক সম্পূর্ণ করতে, আমাদের নিজস্ব চিত্র যুক্ত করতে সক্ষম হতে হবে। এর টেমপ্লেট কিছু সমন্বয় করা যাক; প্রথম হল index.html ফাইল:

1. অ্যাপ্লিকেশনের নাম পরিবর্তন করুন: আমি এটিকে "এআই ইমেজ অ্যানালাইজার" বলব।

   
   

2. HTML মুছুন: পূর্বনির্ধারিত চিত্রগুলি মুছুন। 14 থেকে 27 পর্যন্ত লাইন।

 <div class="image-picker"> <label class="image-choice"> <input type="radio" checked name="chosen-image" value="/baked_goods_1.jpg"> <img src="/baked_goods_1.jpg"> </label> <label class="image-choice"> <input type="radio" name="chosen-image" value="/baked_goods_2.jpg"> <img src="/baked_goods_2.jpg"> </label> <label class="image-choice"> <input type="radio" name="chosen-image" value="/baked_goods_3.jpg"> <img src="/baked_goods_3.jpg"> </label> </div>

3. ছবি আপলোড করার জন্য একটি ইনপুট ক্ষেত্র যোগ করুন। লাইন 15

 <input type="file" id="fileInput" name="file">

4. ইনপুট নাম প্রম্পট মান পরিবর্তন করুন "এই ছবিটি সম্পর্কে আপনি যা চান তা জিজ্ঞাসা করুন।"

ফলে এইচটিএমএল নিচের ছবির মত দেখতে হবে।

জাভাস্ক্রিপ্ট আপডেট করা হচ্ছে

আমাদের ফাইল পড়ার জন্য আমাদের জাভাস্ক্রিপ্ট কোড সংজ্ঞায়িত করতে হবে। main.js ফাইলটি খুলুন এবং নিম্নলিখিত পরিবর্তনগুলি করুন:

1. লাইন 22 থেকে 26 পর্যন্ত কোডটি সরান।

 // Load the image as a base64 string let imageUrl = form.elements.namedItem('chosen-image').value; let imageBase64 = await fetch(imageUrl) .then(r => r.arrayBuffer()) .then(a => Base64.fromByteArray(new Uint8Array(a)));

2. লাইন 22 থেকে শুরু করে একটি নতুন কোড যোগ করুন।

 // Load the image as a base64 string const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; const imageBase64 = await new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { const base64String = reader.result.split(',')[1]; // Extract base64 part resolve(base64String); }; reader.onerror = reject; });

নীচের স্ক্রিনশটে আপনার অ্যাপ্লিকেশনটি এরকম দেখাবে।

চূড়ান্ত পরীক্ষা

এর ফলাফল পরীক্ষা করা যাক. একটি ছবি আপলোড করুন, ছবিতে কী আছে তা জিজ্ঞাসা করুন এবং "যান" টিপুন৷

আমার ইমেজ উদাহরণ.

ফলাফল:

আপনি দেখতে পাচ্ছেন, Gemini API ছবিটি সম্পর্কে সবকিছু ব্যাখ্যা করে। আমাদের এআই ইমেজ বিশ্লেষক কাজ করছে!

উপসংহার

এটাই! আপনি দেখতে পাচ্ছেন, Project IDX এবং Gemini API ব্যবহার করে একটি AI ইমেজ বিশ্লেষক তৈরি করা সত্যিই সহজ। আপনি বিভিন্ন অ্যাপের গুচ্ছ তৈরি করতে পারেন। এই মাত্র একটি উদাহরণ. আমি আশা করি আপনি এই নিবন্ধটি সহায়ক এবং তথ্যপূর্ণ বলে মনে করেন। নীচের মন্তব্যে আপনার প্রতিক্রিয়া শেয়ার করতে ভুলবেন না দয়া করে.

আপনাকে ধন্যবাদ, এবং আমার পরবর্তী নিবন্ধগুলিতে দেখা হবে! :)