किसी मौजूदा ऐप्लिकेशन के बारे में ज़्यादा जानने और उसे बेहतर बनाने के लिए, Gemini का इस्तेमाल कैसे करें

1. खास जानकारी

इस कोडलैब में, मौजूदा एपीआई बैकएंड का इस्तेमाल करके, Gemini की मदद से क्लाइंट ऐप्लिकेशन बनाने का तरीका बताया गया है.

आपको क्या सीखने को मिलेगा

इस लैब का मकसद, किसी मौजूदा ऐप्लिकेशन के साथ Gemini का इस्तेमाल करने के बारे में बताना है. इस लैब में, आपको ये काम करने का तरीका बताया जाएगा:

एआई/एमएल इमेज प्रोसेसिंग जंप स्टार्ट सलूशन को डिप्लॉय करना
API ऐप्लिकेशन के बारे में जानने के लिए Gemini का इस्तेमाल करना
एपीआई ऐप्लिकेशन के लिए क्लाइंट बनाने के लिए Gemini का इस्तेमाल करना

सेटअप - नया प्रोजेक्ट बनाना

आपके संगठन की नीतियों के आधार पर, हो सकता है कि आपके पास इस समाधान को सही तरीके से डिप्लॉय करने की सुविधा न हो.

सुझाव: कंपनी या स्कूल वाले खाते के बजाय, ऐसे खाते का इस्तेमाल करें जिसमें आपके पास सभी अनुमतियां हों. जैसे, निजी खाता

ध्यान दें: अगर आपने हाल ही में कोई ऐसा प्रोजेक्ट बनाया है जिसमें आपके पास सभी अनुमतियां हैं और आपने उस प्रोजेक्ट में Gemini API पहले से ही चालू कर रखा है, तो उस प्रोजेक्ट का इस्तेमाल जारी रखें और इस चरण को छोड़ दें. उदाहरण के लिए, अगर आपने हाल ही में कोई दूसरा Gemini कोडलैब पूरा किया है, तो इस चरण को छोड़ा जा सकता है.

Google Cloud Console पर जाएं
मौजूदा प्रोजेक्ट के ड्रॉपडाउन पर क्लिक करें.
नया प्रोजेक्ट पर क्लिक करें
प्रोजेक्ट का नाम डालें और बनाएं
- सुझाव: प्रोजेक्ट का कोई यूनीक नाम इस्तेमाल करें, ताकि Project name और Project ID एक ही हों

2. जंप स्टार्ट सलूशन लागू करना

जंप स्टार्ट सलूशन, Google Cloud के पहले से बने सलूशन टेंप्लेट होते हैं. इस लैब में, जंप स्टार्ट सलूशन का इस्तेमाल करके यह दिखाया गया है कि Gemini, पहले से मौजूद किसी ऐप्लिकेशन को बेहतर बनाने में कैसे मदद कर सकता है.

एआई/एमएल इमेज प्रोसेसिंग जंप स्टार्ट सलूशन की जानकारी वाले पेज पर जाएं
- हैमबर्गर मेन्यू पर क्लिक करें
- प्रॉडक्ट और समाधान सब-मेन्यू में जाकर, जंप स्टार्ट सलूशन पर क्लिक करें
- Cloud Functions पर एआई/मशीन लर्निंग की मदद से इमेज प्रोसेसिंग पर क्लिक करें
डिप्लॉय करें
- अगर आपके प्रोजेक्ट के लिए बिलिंग चालू नहीं है, तो बिलिंग चालू करें.
- प्रोजेक्ट के नाम की पुष्टि करें और जारी रखें पर क्लिक करें
- देश/इलाके के तौर पर us-central1 (Iowa) चुनें.
- अगर आपसे कोई और इनपुट मांगा जाता है, तो डिफ़ॉल्ट सेटिंग स्वीकार करें.
- लागू करें पर क्लिक करें.
- इसमें 15 मिनट लग सकते हैं.
- आपको कोई बदलाव करने की ज़रूरत नहीं है. हालांकि, Jump Start Solution को डिप्लॉय करने के बारे में ज़्यादा जानने के लिए, बेझिझक एक्सप्लोर करें.

समस्या का हल

समस्या: क्या आपको Partial deployment. वाली गड़बड़ी दिख रही है?
- समाधान: माफ़ करें, इसका मतलब है कि आपको डिप्लॉयमेंट मिटाकर, प्रोसेस फिर से शुरू करनी होगी. आपको डिप्लॉयमेंट मिटाएं बटन दिखेगा. उस बटन पर क्लिक करें. इसके बाद, Jump Start Solution को फिर से डिप्लॉय करें.

3. Gemini की सुविधा चालू करें

कोड में बदलाव करने के लिए एनवायरमेंट सेट अप करना और Gemini को चालू करना

Cloud Shell Editor पर जाएं
- Google Cloud Console पर वापस जाएं
- खोज बार में Cloud Shell Editor टाइप करें. इसके बाद, ड्रॉपडाउन से Cloud Shell Editor पर क्लिक करें.
- अगर लेगसी एडिटर का इस्तेमाल किया जा रहा है, तो नया एडिटर आज़माएं पर क्लिक करें.
  - ध्यान दें: अगर आपको नया एडिटर आज़माएं बटन नहीं दिखता है, तो हो सकता है कि आप पहले से ही नए एडिटर का इस्तेमाल कर रहे हों. लेगसी एडिटर काम करेगा, लेकिन व्यू थोड़े अलग दिखेंगे.
- 'नई विंडो में खोलें' आइकॉन पर क्लिक करें
अगर कहा जाए, तो अपने खाते में लॉग इन करें या उसकी पुष्टि करें.
- आपकी सेटिंग के आधार पर, इस लैब के दौरान आपसे कई बार अपने खाते को अनुमति देने के लिए कहा जा सकता है. जब भी ऐसा कहा जाए, तो अनुमति दें को चुनें.
नीचे दिए गए स्टेटस बार में, Cloud Code - Sign in बटन पर क्लिक करें. निर्देशों के मुताबिक, प्लग इन को अनुमति दें.
अगर आपसे पूछा जाए, तो कोई Google Cloud प्रोजेक्ट चुनें पर क्लिक करें. इसके बाद, वह प्रोजेक्ट चुनें जिसका इस्तेमाल किया जा रहा है
Gemini की सुविधा चालू करना
- Cloud Code
  - ध्यान दें: आपकी स्क्रीन के साइज़ के हिसाब से, इसमें एक या दो चरण लग सकते हैं.
- सहायता और सुझाव सेक्शन में जाकर, सेटिंग बदलें पर क्लिक करें
- टाइप Gemini: Enable
- अगर चेकबॉक्स पहले से नहीं चुना गया है, तो उसे चुनें
- अपने आईडीई को फिर से लोड करें.
- इससे Cloud Code में Gemini चालू हो जाता है. साथ ही, आपके आईडीई में Gemini स्टेटस बार दिखता है.
दिखाए गए तरीके से, सबसे नीचे दाएं कोने में मौजूद Gemini बटन पर क्लिक करें. इसके बाद, सही Google Cloud प्रोजेक्ट चुनें.
- अगर आपको कोई ऐसी गड़बड़ी दिखती है Gemini has not been enabled for your selected project. Gemini API चालू करें पर क्लिक करें
पुष्टि करें कि आपको बाईं ओर सही Google Cloud प्रोजेक्ट दिख रहा हो (आपको अपने प्रोजेक्ट का नाम दिखेगा). साथ ही, स्टेटस बार में दाईं ओर Gemini की सुविधा चालू दिख रही हो. जैसा कि यहां दिखाया गया है:

4. Cloud फ़ंक्शन का कोड डाउनलोड करना

कोड डाउनलोड करें और Gemini का इस्तेमाल करके, जंप स्टार्ट सलूशन और डिप्लॉय किए गए कोड के बारे में ज़्यादा जानें.

अगर आपने किसी दूसरे पेज पर नेविगेट किया है, तो Cloud Code पर क्लिक करें
Cloud Functions
- अगर आपको कोई प्रोजेक्ट चुनें बटन दिखता है, तो उस पर क्लिक करें. इसके बाद, वह प्रोजेक्ट चुनें जिस पर आपको काम करना है.
- annotate-http फ़ंक्शन पर क्लिक करें
- नए वर्कस्पेस में डाउनलोड करें आइकॉन पर क्लिक करें
वर्कस्पेस के नाम के तौर पर annotate-http-1 का इस्तेमाल करें (यह डिफ़ॉल्ट होना चाहिए). इसके बाद, ठीक है पर क्लिक करें
main.py फ़ाइल खोलें
- एक्सप्लोरर आइकॉन पर क्लिक करें
- main.py फ़ाइल को खोलने के लिए उस पर क्लिक करें
Gemini Chat के आइकॉन
- ध्यान दें: आपकी स्क्रीन के साइज़ के हिसाब से, इसमें एक या दो चरण लग सकते हैं.
Gemini से कोई सवाल पूछकर देखें. इस तरह का कोई प्रॉम्प्ट डालें:
- What is a Jump Start Solution in Google Cloud?
- Explain this code.

Gemini Chat को रीसेट करना

प्रॉम्प्ट का असर, आने वाले समय में मिलने वाले प्रॉम्प्ट पर पड़ता है. उदाहरण के लिए, अगर आपने प्रोजेक्ट आईडी या क्षेत्र के नाम में टाइपिंग की कोई गड़बड़ी की है, तो आने वाले समय में प्रॉम्प्ट और जवाबों में भी वही गड़बड़ी दिखेगी. इससे आपको मिलने वाले अनुभव पर बुरा असर पड़ सकता है. अगर आपने टाइपिंग में कोई गलती की है या आपको किसी और वजह से इतिहास मिटाना है, तो चैट को रीसेट करने के लिए ट्रैश आइकॉन का इस्तेमाल करें.

Duet चैट के ट्रैश में मौजूद हाइलाइट को रीसेट करें

5. मौजूदा Cloud फ़ंक्शन एंडपॉइंट को कॉल करना

कोड एक्सप्लोर करें और Jump Start Solution में डिप्लॉय किए गए एंडपॉइंट को कॉल करें.

प्रॉम्प्ट डालें:
- अहम जानकारी यहां दिए गए प्रॉम्प्ट में, my-project-with-duet की जगह अपना प्रोजेक्ट आईडी डालें.
- The region is us-central1 and the project id is my-project-with-duet. Write a curl post for the /annotate-http/annotate Cloud Function endpoint that performs label detection on the default eiffel tower image.
- आपको ऐसा जवाब मिलेगा जिसमें इस तरह का कर्ल कमांड शामिल होगा:
```
curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
...
```
- अगले चरण में इस्तेमाल करने के लिए, इस कर्ल कमांड को कॉपी करें
नई टर्मिनल विंडो में कमांड आज़माएं
- हैमबर्गर मेन्यू पर क्लिक करें
- टर्मिनल पर क्लिक करें
- नया टर्मिनल पर क्लिक करें
- पिछले चरण में दी गई curl कमांड को टर्मिनल में चिपकाएं और कमांड चलाने के लिए Enter दबाएं
- आपको ऐसा जवाब मिलेगा:
```
{
    "labelAnnotations": [
    {
    "mid": "/m/0csby",
    "description": "Cloud",
    "score": 0.97885925,
    "topicality": 0.97885925,
...
```
(ज़रूरी नहीं) सार्वजनिक इंटरनेट पर मौजूद किसी दूसरी इमेज के साथ भी ऐसा किया जा सकता है. इसके लिए, Duet AI को इस तरह का प्रॉम्प्ट दें:
- Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

समस्या का हल

नॉन-डिटरमिनिज़्म के बारे में जानकारी: Gemini और लार्ज लैंग्वेज मॉडल (एलएलएम) पर आधारित अन्य प्रॉडक्ट, नॉन-डिटरमिनिस्टिक होते हैं. इसका मतलब है कि एक ही इनपुट देने पर, आपको अलग-अलग आउटपुट मिल सकते हैं. इन चरणों को सही तरीके से पूरा करने के बाद भी, हो सकता है कि आपको काम करने वाली कमांड न मिलें. समस्या हल करने के लिए दिए गए इन तरीकों से, आपको मदद मिल सकती है.

जनरेट किया गया कर्ल कमांड कुछ ऐसा दिखना चाहिए:

curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    -d '{
  "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg",
  "features": "LABEL_DETECTION"
}' \
    "https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate"

Gemini, main.py फ़ाइल में मौजूद TEST_IMAGE का इस्तेमाल कर रहा है. यह एफ़िल टावर की इमेज है.

अगर curl कमांड काम नहीं कर रही है, तो यहां दी गई कुछ बातों की जांच करें:

समस्या: क्या यूआरएल एंडपॉइंट में .a.run.app शामिल है?
- समस्या हल करने का तरीका: Duet को लग सकता है कि Cloud Run पर डिप्लॉय किया जा रहा है. सही Cloud Functions एंडपॉइंट पाने के लिए, https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate में मौजूद my-project-with-duet को अपने प्रोजेक्ट आईडी से बदलें. इसके बाद, curl कमांड के लिए इसका इस्तेमाल करें.
समस्या: क्या यूआरएल एंडपॉइंट में my-project-with-duet शामिल है?
- समाधान: my-project-with-duet की जगह अपना प्रोजेक्ट आईडी डालें.
समस्या: क्या यूआरएल एंडपॉइंट में us-central1 मौजूद नहीं है?
- समाधान: पक्का करें कि यूआरएल us-central1 से शुरू हो. जैसे: https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate के साथ अपना प्रोजेक्ट आईडी.
समस्या: इस्तेमाल किए गए प्रॉम्प्ट के आधार पर, कभी-कभी जनरेट किया गया एंडपॉइंट cloudfunctions.net/annotate-http या cloudfunctions.net/annotate जैसा दिखेगा. क्या यूआरएल एंडपॉइंट के आखिर में /annotate-http/annotate मौजूद नहीं है?
- समाधान: पक्का करें कि यूआरएल एंडपॉइंट, पूरे एपीआई ऐप्लिकेशन पाथ cloudfunctions.net/annotate-http/annotate पर खत्म होता हो
समस्या: cURL अनुरोध काम करता है, लेकिन इससे ज़्यादा जानकारी नहीं मिलती. क्या अनुरोध में सुविधाएँ शामिल हैं?
- समाधान: यह कोई बड़ी समस्या नहीं है. अगर आपने कोई बदलाव नहीं किया, तो लैब के बाकी हिस्से अब भी काम करेंगे. अगर आपको ज़्यादा जानकारी चाहिए, तो Duet को cURL अनुरोध में सुविधाएं जोड़ने के लिए कहा जा सकता है.
समस्या: जवाब गलत लग रहे हैं या उनमें कोड के हिसाब से ज़रूरी जानकारी नहीं है. क्या Cloud Shell Editor में Gemini Chat का इस्तेमाल किया जा रहा है?
- समाधान: main.py फ़ाइल खोलें और Cloud Shell Editor में Gemini Chat का इस्तेमाल करते समय, अपने प्रॉम्प्ट से जुड़े कोड को हाइलाइट करें. Google Cloud के सभी प्लैटफ़ॉर्म पर Gemini Assistant का कॉन्टेक्स्ट अलग-अलग होता है. इसलिए, आपको अलग-अलग जवाब मिलेंगे.
समस्या: प्रॉम्प्ट का जवाब अब भी पूरी तरह से सही नहीं है.
- समाधान: कोई दूसरा प्रॉम्प्ट आज़माएँ. इसमें Gemini को इस बारे में ज़्यादा जानकारी दें कि आपको किस तरह का जवाब चाहिए. my-project-with-duet की जगह अपना प्रोजेक्ट आईडी डालना न भूलें. उदाहरण के लिए:
```
Give me the curl command for:

1- Cloud Function running in us-central1 and project my-project-with-duet
2- HTTP POST to the following endpoint: /annotate-http/annotate endpoint
3- JSON in the body: { "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg", "features": "LABEL_DETECTION" }
```
समस्या: समस्या हल करने के इन सभी चरणों को पूरा करने के बाद भी, यह काम नहीं कर रहा है.
- समाधान: एलएलएम के नॉन-डिटरमिनिस्टिक नेचर की वजह से, ऐसा हो सकता है कि Duet ने ऐसा जवाब जनरेट किया हो जो काम न करे. अगर ऐसा होता है, तो ऊपर दिए गए कर्ल कमांड के उदाहरण को कॉपी करें और उसे टर्मिनल में चलाने की कोशिश करें. my-project-with-duet की जगह अपना प्रोजेक्ट आईडी डालना न भूलें.

6. एपीआई के लिए वेब ऐप्लिकेशन क्लाइंट बनाना

Gemini का इस्तेमाल करके, एक index.html फ़ाइल जनरेट करें. यह फ़ाइल, Jump Start Solution Cloud Function के एंडपॉइंट को कॉल करती है. इसके बाद, कोड को काम करते हुए देखने के लिए, index.html फ़ाइल को Firebase Hosting पर डिप्लॉय करें.

क्लाइंट-साइड कोड जनरेट करना
- Gemini के चैट बॉक्स में वापस जाकर, यह प्रॉम्प्ट डालें:
  - Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use the full url beginning with https. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
- जवाब में जनरेट की गई index.html फ़ाइल को कॉपी करें.
  - ध्यान दें: आपको इस कोड की ज़रूरत बाद में पड़ेगी. इसलिए, अगर आपको लगता है कि यह कोड आपसे मिट सकता है, तो इसे कहीं सेव कर लें.
- बंद करें main.py पर क्लिक करें.
नई frontend डायरेक्ट्री बनाएं
- Gemini से इस तरह के सवाल पूछे जा सकते हैं:
  - What are the console commands to create and navigate to a new frontend directory?
- आपको mkdir frontend और cd frontend जैसे नतीजे दिखेंगे.
- Cloud Shell टर्मिनल का इस्तेमाल करके पुष्टि करें कि आप अब भी annotate-http-1 डायरेक्ट्री में हैं. इसके बाद, इन निर्देशों को चलाएं:
  - cd ~/annotate-http-1
  - mkdir frontend
  - cd frontend
पुष्टि करें कि आपने Cloud Shell टर्मिनल में सही प्रोजेक्ट में लॉग इन किया हो
- Gemini से इस तरह के सवाल पूछे जा सकते हैं:
  - What is the gcloud command to set my project?
- आपको gcloud config set project my-project-with-duet
  - पुष्टि करें कि प्रोजेक्ट आईडी सही है. इसके बाद, Cloud Shell टर्मिनल में कमांड चलाएं.
Firebase चालू करें
- नए टैब में, https://console.firebase.google.com/ पर जाएं. हालांकि, Cloud Shell Editor को खुला रहने दें
- प्रोजेक्ट जोड़ें पर क्लिक करें
- अपना प्रोजेक्ट आईडी टाइप करें और ड्रॉपडाउन में दिखने का इंतज़ार करें
- अपने प्रोजेक्ट आईडी पर क्लिक करें
- जारी रखें पर क्लिक करें
- प्लान की पुष्टि करें पर क्लिक करें
- जारी रखें पर क्लिक करें
- इस प्रोजेक्ट के लिए Google Analytics चालू करें से चुना हुआ का निशान हटाएं
  - Firebase, Google Analytics का इस्तेमाल करने का सुझाव देता है. हालांकि, इस ऐप्लिकेशन में इनका इस्तेमाल नहीं किया जाएगा.
- जारी रखें पर क्लिक करें
- इस टैब को बंद करें और Cloud Shell Editor पर वापस जाएं
- ध्यान दें: इन चरणों को सिर्फ़ उन उपयोगकर्ताओं को पूरा करना होगा जिन्होंने पहले कभी Firebase का इस्तेमाल नहीं किया है. हालांकि, इससे सभी लोग एक ही तरीके का इस्तेमाल कर पाएंगे. अगर आपको आने वाले समय में फिर से ऐसा करना है, तो इस चरण को छोड़ा जा सकता है.
Cloud Shell में Firebase में लॉग इन करें
- Cloud Shell Editor टर्मिनल में, firebase login --no-localhost कमांड चलाएं
- दिए गए यूआरएल पर जाएं
  - हां, मैंने अभी यह निर्देश चलाया है पर क्लिक करें
  - हां, यह मेरा सेशन आईडी है पर क्लिक करें
  - कॉपी करें पर क्लिक करें
- Cloud Shell Editor के टर्मिनल पर वापस जाएं
- कॉपी की गई वैल्यू को उस टर्मिनल में चिपकाएं जहां यह लिखा है: Enter authorization code:
- Enter दबाएं
Firebase Hosting पर नई वेबसाइट डिप्लॉय करना
- नया Firebase प्रोजेक्ट शुरू करना
  - Gemini से इस तरह के सवाल पूछे जा सकते हैं:
    - What are the commands to initialize and deploy a new firebase application?
  - आपको निर्देशों के साथ firebase init और firebase deploy जैसे नतीजे दिखेंगे.
  - Gemini, आपकी प्राथमिकताओं के आधार पर इस काम को करने के कई तरीके सुझा सकता है. इसलिए, यहां आपके लिए एक खास सुझाव दिया गया है:
    - firebase init
      - डाउन ऐरो का इस्तेमाल करके Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
        पर जाएं
        Space बार को दबाएं
        
        Enter दबाएं
      - डाउन ऐरो का इस्तेमाल करके Use an existing project
        पर जाएं
        Enter दबाएं
      - अगर आपको प्रोजेक्ट की सूची दिखती है, तो आज इस्तेमाल किए जा रहे प्रोजेक्ट पर जाने के लिए, नीचे की ओर वाले ऐरो बटन को दबाएं
        
        Enter दबाएं
      - अगर आपसे Please input the ID of the Google Cloud Project you would like to add Firebase:
        
        अपने प्रोजेक्ट का प्रोजेक्ट आईडी डालें.
        
        Enter दबाएं
      - बाकी सभी प्रॉम्प्ट के लिए, Enter दबाएं
    - firebase deploy
Cloud Functions API एंडपॉइंट
- ऊपर दिए गए कमांड से, public डायरेक्ट्री बननी चाहिए. साथ ही, इसमें index.html फ़ाइल होनी चाहिए. यह फ़ाइल, उस frontend डायरेक्ट्री में होनी चाहिए जिसे आपने पहले बनाया था. आपको अगले कुछ बदलाव ~/annotate-http-1/frontend/public/index.html फ़ाइल में करने चाहिए.
- index.html फ़ाइल खोलें.
  - एक्सप्लोरर आइकॉन पर क्लिक करें
  - frontend फ़ोल्डर पर क्लिक करें
  - public फ़ोल्डर पर क्लिक करें
  - index.html फ़ाइल पर क्लिक करें
- मौजूदा index.html फ़ाइल को खाली करें.
- पहले कॉपी किए गए कोड को index.html फ़ाइल में चिपकाएं
- नए ऐप्लिकेशन को डिप्लॉय करने के लिए, firebase deploy चलाएं
- Firebase होस्टिंग के यूआरएल पर जाकर देखें कि यह काम कर रहा है या नहीं!
  - ध्यान दें: अपडेट देखने के लिए, आपको वेबसाइट को हार्ड रीफ़्रेश करना पड़ सकता है.

समस्या का हल

index.html फ़ाइल कुछ ऐसी दिखनी चाहिए:

<!DOCTYPE html>
<html>
<head>
<title>Vision API Annotate Image</title>
</head>
<body>
<h1>Vision API Annotate Image</h1>
<form id="annotate-form" action="https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate" method="POST">
    <label for="image-uri">Image URI:</label>
    <input type="text" id="image-uri" name="image_uri" value="gs://cloud-samples-data/vision/eiffel_tower.jpg">
    <br>
    <label for="features">Features:</label>
    <select id="features" name="features">
    <option value="LABEL_DETECTION">LABEL_DETECTION</option>
    <option value="TEXT_DETECTION">TEXT_DETECTION</option>
    <option value="IMAGE_PROPERTIES">IMAGE_PROPERTIES</option>
    </select>
    <br>
    <input type="submit" value="Annotate">
</form>

<div id="result"></div>

<script>
    const form = document.getElementById('annotate-form');

    form.addEventListener('submit', (event) => {
    event.preventDefault();

    const imageUri = document.getElementById('image-uri').value;
    const features = document.getElementById('features').value;

    const data = {
        image_uri: imageUri,
        features: features,
    };

    fetch('https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
        .then((response) => response.json())
        .then((result) => {
        const resultElement = document.getElementById('result');
        resultElement.innerHTML = JSON.stringify(result, null, 2);
        });
    });
</script>
</body>
</html>

अगर वेबसाइट आपके लिए काम नहीं कर रही है, तो यहां दी गई कुछ चीज़ें देखें:

समस्या: 404 (नहीं मिला) क्या fetch तरीके में इस्तेमाल किए गए यूआरएल में my-project-with-duet शामिल है?
- समाधान: my-project-with-duet की जगह अपना प्रोजेक्ट आईडी डालें.
समस्या: 404 (नहीं मिला) क्या fetch तरीके में इस्तेमाल किए गए यूआरएल में पूरा यूआरएल मौजूद नहीं है?
- समाधान: पक्का करें कि आपने fetch तरीके में पूरा यूआरएल शामिल किया हो. यह कुछ ऐसा दिखना चाहिए https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
समस्या: प्रॉम्प्ट का जवाब अब भी पूरी तरह से सही नहीं है.
- समाधान: कोई दूसरा प्रॉम्प्ट आज़माएँ. इसमें Gemini को इस बारे में ज़्यादा जानकारी दें कि आपको किस तरह का जवाब चाहिए. my-project-with-duet की जगह अपना प्रोजेक्ट आईडी डालना न भूलें. यहाँ एक उदाहरण दिया गया है:
  - Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
समस्या: क्या आपकी साइट डिप्लॉय हो गई है, लेकिन काम नहीं कर रही है?
- समाधान: एलएलएम के नॉन-डिटरमिनिस्टिक नेचर की वजह से, ऐसा हो सकता है कि Duet ने ऐसा जवाब जनरेट किया हो जो काम न करे. अगर ऐसा होता है, तो ऊपर दिए गए उदाहरण index.html को कॉपी करें और firebase deploy के साथ फिर से डिप्लॉय करने की कोशिश करें. my-project-with-duet की जगह अपना प्रोजेक्ट आईडी डालना न भूलें.

7. (ज़रूरी नहीं) एक्सप्लोरेशन खोलें

Gemini और एडिटर में मौजूद असिस्टेंट का इस्तेमाल करके, अपने ऐप्लिकेशन में सीएसएस स्टाइल जोड़ें. इसके बाद, ऐप्लिकेशन को फिर से डिप्लॉय करें! अगर आपको कोई आइडिया नहीं मिल रहा है, तो यहां एक उदाहरण दिया गया है. इसे आज़माएं:
- Make this index.html file use material design.
इन तरीकों को भी आज़माएं:
- जनरेट की गई वेबसाइट, किसी भी सार्वजनिक http इमेज के साथ काम करनी चाहिए. पेज पर इमेज दिखाने के लिए, Duet के साथ काम करें.

8. (ज़रूरी नहीं) प्रोजेक्ट मिटाना

अगर आपको आज बनाए गए संसाधनों के लिए शुल्क नहीं देना है, तो Duet से पूछें कि ऐसा कैसे किया जा सकता है.

प्रॉम्प्ट डालें:
- How can I delete my project?
- आपको gcloud projects delete my-project-with-duet जैसा नतीजा दिखेगा.
- अहम जानकारी पिछली कमांड में मौजूद my-project-with-duet की जगह अपना प्रोजेक्ट आईडी डालें.
आज बनाए गए सभी संसाधनों को हटाने के लिए, gcloud projects delete कमांड चलाएं.