5 मिनट में शून्य से AI इमेज एनालाइज़र तक: एक शुरुआती गाइड

क्या आप जानना चाहते हैं कि AI इमेज एनालाइजर कैसे बनाया जाता है? तो इस लेख को अंत तक पढ़ें! मैं आपको दिखाने जा रहा हूँ कि AI एनालाइजर टूल को वास्तव में सरलता से कैसे बनाया जाता है, इसलिए आपको लगभग किसी भी पूर्व ज्ञान की आवश्यकता नहीं है। मैं आपको चरण दर चरण ले जाऊंगा, और हम Project IDX और Gemini API का उपयोग करेंगे। इसका मतलब है कि आपको कुछ भी सेट अप करने की आवश्यकता नहीं है; हम जो कुछ भी करेंगे वह क्लाउड पर होगा। यदि आप तैयार हैं, तो चलिए शुरू करते हैं!

मेरे यूट्यूब चैनल पर जाएँ

प्रोजेक्ट IDX के साथ आरंभ करना

पहला कदम बहुत आसान है। हमें वेबसाइट खोलनी होगी idx.google.com यदि आपने अभी तक पंजीकरण नहीं कराया है, तो आपको पहले पंजीकरण करना होगा, और फिर आप नीचे दी गई स्क्रीन देख सकते हैं।

1. टेम्पलेट चुनें: मैं जेमिनी एपीआई टेम्पलेट चुनूंगा।

   
   

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. इनपुट नाम प्रॉम्प्ट मान को "इस छवि के बारे में जो कुछ भी आप पूछना चाहते हैं, पूछें" में बदलें।

परिणामी HTML नीचे दिए गए चित्र की तरह दिखना चाहिए।

जावास्क्रिप्ट को अद्यतन करना

हमें अपनी फ़ाइल पढ़ने के लिए जावास्क्रिप्ट कोड परिभाषित करने की आवश्यकता है। 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; });

आपका एप्लिकेशन नीचे दिए गए स्क्रीनशॉट की तरह दिखेगा।

अंतिम परीक्षण

चलिए परिणाम देखें। एक छवि अपलोड करें, पूछें कि छवि में क्या है, और "गो" दबाएँ।

मेरी छवि उदाहरण.

परिणाम:

जैसा कि आप देख सकते हैं, जेमिनी एपीआई छवि के बारे में सब कुछ बताता है। हमारा AI इमेज एनालाइजर काम कर रहा है!

निष्कर्ष

बस इतना ही! जैसा कि आप देख सकते हैं, Project IDX और Gemini API का उपयोग करके AI इमेज एनालाइज़र बनाना वाकई आसान है। आप कई अलग-अलग ऐप बना सकते हैं। यह सिर्फ़ एक उदाहरण है। मुझे उम्मीद है कि आपको यह लेख मददगार और जानकारीपूर्ण लगेगा। कृपया नीचे टिप्पणियों में अपनी प्रतिक्रिया साझा करना न भूलें।

धन्यवाद, और मिलते हैं मेरे अगले लेख में! :)