इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

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

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

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

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

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

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

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

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

2. जंप स्टार्ट सलूशन को डिप्लॉय करें

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

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

समस्या हल करना

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

3. Gemini को चालू करें

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

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

4. Cloud Function कोड डाउनलोड करें

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

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

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

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

ड्यूएट चैट के ट्रैश कैन को रीसेट करने के बाद, उसे हाइलाइट किया जा सकता है

5. मौजूदा Cloud Function एंडपॉइंट को कॉल किया जा रहा है

कोड एक्सप्लोर करें और जंप स्टार्ट सलूशन में डिप्लॉय किए गए एंडपॉइंट को कॉल करें.

प्रॉम्प्ट डालें:
- ज़रूरी जानकारी नीचे दिए गए प्रॉम्प्ट में 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)" \
...
```
- अगले चरण में इस्तेमाल करने के लिए, इस कर्ल कमांड को कॉपी करें
नए टर्मिनल
- हैमबर्गर मेन्यू पर क्लिक करें
- Terminal पर क्लिक करें
- नया टर्मिनल पर क्लिक करें
- पिछले चरण से कर्ल कमांड को टर्मिनल में चिपकाएं और कमांड चलाने के लिए Enter दबाएं
- आपको एक जवाब मिलेगा, जो इस तरह से शुरू होगा:
```
{
    "labelAnnotations": [
    {
    "mid": "/m/0csby",
    "description": "Cloud",
    "score": 0.97885925,
    "topicality": 0.97885925,
...
```
(ज़रूरी नहीं) सार्वजनिक इंटरनेट पर मौजूद किसी दूसरी इमेज का इस्तेमाल करके ऐसा करें. इसके लिए, Duet को कुछ ऐसा प्रॉम्प्ट दें:
- 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 का इस्तेमाल कर रहा है. यह फ़ाइल, एफ़िल टावर की इमेज है.

अगर कर्ल निर्देश आपके लिए काम नहीं कर रहा है, तो यहां दी गई कुछ चीज़ों की जांच करें:

समस्या: क्या यूआरएल एंडपॉइंट में .a.run.app शामिल है?
- समाधान: Duet को ऐसा लग सकता है कि आपको Cloud Run पर डिप्लॉय करना है. सही Cloud Functions एंडपॉइंट पाने के लिए, https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate में my-project-with-duet को अपने प्रोजेक्ट आईडी से बदलें और उसका इस्तेमाल कर्ल निर्देश के लिए करें.
समस्या: क्या यूआरएल एंडपॉइंट में 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 से अनुरोध करते समय उसमें सुविधाएं जोड़ने के लिए कहें.
समस्या: उत्तर गलत लगते हैं या ऐसा लगता है कि उनके पास किसी खास संदर्भ की जानकारी नहीं है. क्या Cloud Shell Editor में Gemini Chat का इस्तेमाल किया जा रहा है?
- समाधान: Cloud Shell Editor में Gemini Chat का इस्तेमाल करते समय, main.py फ़ाइल को खोलकर अपने प्रॉम्प्ट से जुड़े कोड को हाइलाइट करें. 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 फ़ाइल जनरेट करें, जो जंप स्टार्ट सलूशन क्लाउड फ़ंक्शन एंडपॉइंट को कॉल करती है. इसके बाद, index.html फ़ाइल को Firebase होस्टिंग में डिप्लॉय करें, ताकि कोड का इस्तेमाल करके देखा जा सके.

क्लाइंट-साइड कोड जनरेट करें
- 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 सक्षम करें
- नए टैब में (अपना मौजूदा Cloud Shell Editor खुला रहने दें), https://console.firebase.google.com/ पर जाएं
- प्रोजेक्ट जोड़ें पर क्लिक करें
- अपना प्रोजेक्ट आईडी लिखें और ड्रॉपडाउन में इसके दिखने का इंतज़ार करें
- अपने प्रोजेक्ट आईडी पर क्लिक करें
- जारी रखें पर क्लिक करें
- प्लान की पुष्टि करें पर क्लिक करें
- जारी रखें पर क्लिक करें
- इस प्रोजेक्ट के लिए Google Analytics चालू करें से चुने हुए का निशान हटाएं
  - Firebase, Google Analytics का इस्तेमाल करने का सुझाव देता है, लेकिन उनका इस्तेमाल इस ऐप्लिकेशन में नहीं किया जाएगा.
- जारी रखें पर क्लिक करें
- यह टैब बंद करें और Cloud Shell Editor पर वापस जाएं
- ध्यान दें: यह तरीका सिर्फ़ उन उपयोगकर्ताओं के लिए ज़रूरी है जिन्होंने पहले कभी Firebase का इस्तेमाल नहीं किया है. हालांकि, इसकी मदद से सभी लोग एक ही पाथ को फ़ॉलो कर सकते हैं. अगर आप आने वाले समय में ऐसा करते हैं, तो इस चरण को छोड़ सकते हैं.
क्लाउड शेल में Firebase में लॉग इन करें
- Cloud Shell Editor टर्मिनल में, firebase login --no-localhost निर्देश चलाएं
- दिए गए URL पर जाएँ
  - हां, मैंने अभी-अभी यह निर्देश चलाया है पर क्लिक करें
  - हां, यह मेरा सेशन आईडी है पर क्लिक करें
  - कॉपी करें पर क्लिक करें
- Cloud Shell Editor टर्मिनल पर वापस जाएं
- कॉपी की गई वैल्यू को टर्मिनल में वहां चिपकाएं जहां यह लिखा है: Enter authorization code:
- Enter दबाएं
Firebase होस्टिंग के लिए नई वेबसाइट डिप्लॉय करें
- नया 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 निर्देश चलाएं.