डिवाइस पर मौजूद और क्लाउड पर होस्ट किए गए मॉडल की मदद से, वेब ऐप्लिकेशन में हाइब्रिड अनुभव तैयार करना

एआई की मदद से चलने वाले वेब ऐप्लिकेशन और सुविधाएं बनाएं. इसके लिए, हाइब्रिड इन्फ़रेंस का इस्तेमाल करें Firebase AI Logic. हाइब्रिड इन्फ़रेंस की मदद से, डिवाइस पर मौजूद मॉडल का इस्तेमाल करके इन्फ़रेंस चलाया जा सकता है. अगर ऐसा नहीं किया जा सकता, तो क्लाउड पर होस्ट किए गए मॉडल का इस्तेमाल किया जा सकता है. इसके अलावा, क्लाउड पर होस्ट किए गए मॉडल का इस्तेमाल करके इन्फ़रेंस चलाया जा सकता है. अगर ऐसा नहीं किया जा सकता, तो डिवाइस पर मौजूद मॉडल का इस्तेमाल किया जा सकता है.

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

ध्यान दें कि डेस्कटॉप पर Chrome में चलने वाले वेब ऐप्लिकेशन के लिए, डिवाइस पर इन्फ़रेंस की सुविधा उपलब्ध है.

कोड के उदाहरणों पर जाएं

इस्तेमाल के सुझाए गए उदाहरण और काम करने वाली सुविधाएं

इस्तेमाल के सुझाए गए उदाहरण:

• इन्फ़रेंस के लिए, डिवाइस पर मौजूद मॉडल का इस्तेमाल करने पर ये फ़ायदे मिलते हैं:

  • निजता बेहतर होती है
  • लोकल कॉन्टेक्स्ट मिलता है
  • बिना किसी शुल्क के इन्फ़रेंस की सुविधा मिलती है
  • ऑफ़लाइन काम करने की सुविधा मिलती है

• हाइब्रिड सुविधा का इस्तेमाल करने पर ये फ़ायदे मिलते हैं:

  • अपनी 100% ऑडियंस तक पहुंचें. भले ही, डिवाइस पर मौजूद मॉडल उपलब्ध न हो या इंटरनेट कनेक्टिविटी न हो

डिवाइस पर इन्फ़रेंस के लिए उपलब्ध सुविधाएं और फ़ीचर:

डिवाइस पर इन्फ़रेंस की सुविधा, सिंगल-टर्न टेक्स्ट जनरेशन (चैट नहीं) के लिए ही उपलब्ध है. इसमें स्ट्रीमिंग या बिना स्ट्रीमिंग वाला आउटपुट मिलता है. यह टेक्स्ट जनरेशन की इन सुविधाओं के साथ काम करती है:

• सिर्फ़ टेक्स्ट वाले इनपुट से टेक्स्ट जनरेट करना

• टेक्स्ट और इमेज वाले इनपुट से टेक्स्ट जनरेट करना. खास तौर पर, JPEG और PNG फ़ॉर्मैट वाली इमेज के इनपुट से टेक्स्ट जनरेट करना

स्ट्रक्चर्ड आउटपुट भी जनरेट किया जा सकता है, इसमें JSON और enum शामिल हैं.,

शुरू करने से पहले

इन बातों का ध्यान रखें:

• डिवाइस पर मौजूद मॉडल का इस्तेमाल करके इन्फ़रेंस के लिए, Chrome के Prompt API का इस्तेमाल किया जाता है. वहीं, क्लाउड पर होस्ट किए गए मॉडल का इस्तेमाल करके इन्फ़रेंस के लिए, चुने गए Gemini API सेवा देने वाली कंपनी (या तो Gemini Developer API या Vertex AI Gemini API) का इस्तेमाल किया जाता है.

• इस पेज पर, लोकल होस्ट का इस्तेमाल करके डेवलपमेंट शुरू करने का तरीका बताया गया है. Chrome के दस्तावेज़ में, लोकल होस्ट पर एपीआई इस्तेमाल करने के बारे में ज़्यादा जानें.

  इस स्टैंडर्ड सेटअप को पूरा करने के बाद, कॉन्फ़िगरेशन के अतिरिक्त विकल्पों और सुविधाओं (जैसे, स्ट्रक्चर्ड आउटपुट) के बारे में जानें.

• अपनी सुविधा को लागू करने के बाद, असल ऐप्लिकेशन में, एंड-यूज़र को अपनी सुविधा आज़माने की अनुमति दी जा सकती है.

लोकल होस्ट पर शुरू करना

शुरू करने के इन चरणों में, प्रॉम्प्ट के किसी भी ऐसे अनुरोध के लिए ज़रूरी सामान्य सेटअप के बारे में बताया गया है जिसे आपको भेजना है.

पहला चरण: डिवाइस पर इन्फ़रेंस के लिए, Chrome और Prompt API सेट अप करना

1. पक्का करें कि Chrome के नए वर्शन का इस्तेमाल किया जा रहा हो. chrome://settings/help पर जाकर अपडेट करें.
   डिवाइस पर इन्फ़रेंस की सुविधा, Chrome के वर्शन 139 और इसके बाद के वर्शन में उपलब्ध है.

2. डिवाइस पर मौजूद मल्टीमॉडल मॉडल को चालू करने के लिए, इस फ़्लैग को चालू है पर सेट करें:

   • chrome://flags/#prompt-api-for-gemini-nano-multimodal-input

3. Chrome को रीस्टार्ट करें.

4. (ज़रूरी नहीं) पहले अनुरोध से पहले, डिवाइस पर मौजूद मॉडल डाउनलोड करें.

   Prompt API, Chrome में पहले से मौजूद है. हालांकि, डिवाइस पर मौजूद मॉडल डिफ़ॉल्ट रूप से उपलब्ध नहीं होता. अगर आपने डिवाइस पर इन्फ़रेंस के लिए पहले अनुरोध से पहले मॉडल डाउनलोड नहीं किया है, तो अनुरोध करने पर, बैकग्राउंड में मॉडल डाउनलोड होना अपने-आप शुरू हो जाएगा.

   डिवाइस पर मौजूद मॉडल डाउनलोड करने के निर्देश देखें

   1. डेवलपर टूल > कंसोल खोलें.

   2. यह कमांड दें:

      await LanguageModel.availability();
      

   3. पक्का करें कि आउटपुट available, downloading या downloadable हो.

   4. अगर आउटपुट downloadable है, तो यह कमांड देकर मॉडल डाउनलोड करना शुरू करें:

      await LanguageModel.create();
      

   5. डाउनलोड की प्रोग्रेस को सुनने और यह पक्का करने के लिए कि अनुरोध करने से पहले मॉडल available है, इस monitor कॉलबैक का इस्तेमाल किया जा सकता है:

      const session = await LanguageModel.create({
        monitor(m) {
          m.addEventListener("downloadprogress", (e) => {
            console.log(`Downloaded ${e.loaded * 100}%`);
          });
        },
      });
      

दूसरा चरण: Firebase प्रोजेक्ट सेट अप करना और अपने ऐप्लिकेशन को Firebase से कनेक्ट करना

1. Firebase कंसोल में साइन इन करें. इसके बाद, अपना Firebase प्रोजेक्ट चुनें.

   क्या आपके पास पहले से कोई Firebase प्रोजेक्ट नहीं है?

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

   • पहला विकल्प: वर्कफ़्लो के पहले चरण में, प्रोजेक्ट का नया नाम डालकर, पूरी तरह से नया Firebase प्रोजेक्ट (और उसका Google Cloud प्रोजेक्ट) बनाएं. यह अपने-आप बन जाएगा.

   • दूसरा विकल्प: मौजूदा Google Cloud प्रोजेक्ट में "Firebase जोड़ें". इसके लिए, Google Cloud प्रोजेक्ट में Firebase जोड़ें पर क्लिक करें. यह विकल्प, पेज के सबसे नीचे मौजूद है. वर्कफ़्लो के पहले चरण में, मौजूदा प्रोजेक्ट का प्रोजेक्ट का नाम डालना शुरू करें. इसके बाद, दिखने वाली सूची में से प्रोजेक्ट चुनें.

   Firebase प्रोजेक्ट बनाने के लिए, स्क्रीन पर दिखने वाले वर्कफ़्लो के बाकी चरण पूरे करें. ध्यान दें कि SDK टूल का इस्तेमाल करने के लिए, आपको सेट अप करने की Google Analytics ज़रूरत नहीं है. Firebase AI Logic

2. Firebase कंसोल में, एआई सेवाएं > एआई लॉजिक पर जाएं.

3. शुरू करें पर क्लिक करके, गाइड वाले वर्कफ़्लो को लॉन्च करें. इससे आपको अपने प्रोजेक्ट के लिए ज़रूरी एपीआई और संसाधन सेट अप करने में मदद मिलेगी.

4. "Gemini API" की सेवा देने वाली कंपनी का इस्तेमाल करने के लिए, अपना प्रोजेक्ट सेट अप करें.

   हमारा सुझाव है कि Gemini Developer API का इस्तेमाल शुरू करें. आपके पास कभी भी सेट अप करने का विकल्प होता है Vertex AI Gemini API (और बिलिंग के लिए इसकी ज़रूरी शर्तें).

   Gemini Developer API के लिए, कंसोल ज़रूरी एपीआई चालू करेगा और आपके प्रोजेक्ट में Gemini एपीआई पासकोड बनाएगा.
   इस Gemini API पासकोड को अपने ऐप्लिकेशन के कोडबेस में न जोड़ें. ज़्यादा जानें.

5. अगर कंसोल के वर्कफ़्लो में आपसे कहा जाता है, तो अपने ऐप्लिकेशन को रजिस्टर करने और उसे Firebase से कनेक्ट करने के लिए, स्क्रीन पर दिखने वाले निर्देशों का पालन करें.

6. अपने ऐप्लिकेशन में SDK टूल जोड़ने के लिए, इस गाइड में अगले चरण पर जाएं.

तीसरा चरण: SDK टूल जोड़ना

Firebase लाइब्रेरी की मदद से, जनरेटिव मॉडल के साथ इंटरैक्ट करने के लिए, एपीआई ऐक्सेस किए जा सकते हैं. यह लाइब्रेरी, वेब के लिए Firebase JavaScript SDK टूल का हिस्सा है.

1. npm का इस्तेमाल करके, वेब के लिए Firebase JS SDK टूल इंस्टॉल करें:

   npm install firebase
   

2. अपने ऐप्लिकेशन में Firebase को शुरू करें:

   import { initializeApp } from "firebase/app";
   
   // TODO(developer) Replace the following with your app's Firebase configuration
   // See: https://firebase.google.com/docs/web/learn-more#config-object
   const firebaseConfig = {
     // ...
   };
   
   // Initialize FirebaseApp
   const firebaseApp = initializeApp(firebaseConfig);
   

चौथा चरण: सेवा शुरू करना और मॉडल का इंस्टेंस बनाना

मॉडल को प्रॉम्प्ट का अनुरोध भेजने से पहले, यह सेट अप करें.

1. चुने गए एपीआई की सेवा देने वाली कंपनी के लिए, सेवा शुरू करें.

2. GenerativeModel का इंस्टेंस बनाएं. पक्का करें कि आपने ये काम किए हों:

   1. getGenerativeModel को एंड-यूज़र के इंटरैक्शन के बाद या उस दौरान कॉल करें. जैसे, बटन पर क्लिक करना. यह inferenceMode के लिए ज़रूरी है.

   2. mode को इनमें से किसी एक पर सेट करें:

      • PREFER_ON_DEVICE: अगर डिवाइस पर मौजूद मॉडल उपलब्ध है, तो उसका इस्तेमाल करें. अगर ऐसा नहीं है, तो क्लाउड पर होस्ट किए गए मॉडल का इस्तेमाल करें.

      • ONLY_ON_DEVICE: अगर डिवाइस पर मौजूद मॉडल उपलब्ध है, तो उसका इस्तेमाल करें. अगर ऐसा नहीं है, तो अपवाद दिखाएं.

      • PREFER_IN_CLOUD: अगर क्लाउड पर होस्ट किया गया मॉडल उपलब्ध है, तो उसका इस्तेमाल करें. अगर ऐसा नहीं है, तो डिवाइस पर मौजूद मॉडल का इस्तेमाल करें.

      • ONLY_IN_CLOUD: अगर क्लाउड पर होस्ट किया गया मॉडल उपलब्ध है, तो उसका इस्तेमाल करें. अगर ऐसा नहीं है, तो अपवाद दिखाएं.

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend, InferenceMode } from "firebase/ai";

// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);

// Initialize the Gemini Developer API backend service
const ai = getAI(firebaseApp, { backend: new GoogleAIBackend() });

// Create a `GenerativeModel` instance
// Call `getGenerativeModel` after or on an end-user interaction
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

पांचवां चरण: मॉडल को प्रॉम्प्ट का अनुरोध भेजना

इस सेक्शन में, अलग-अलग तरह के आउटपुट जनरेट करने के लिए, अलग-अलग तरह के इनपुट भेजने का तरीका बताया गया है. इनमें ये शामिल हैं:

• सिर्फ़ टेक्स्ट वाले इनपुट से टेक्स्ट जनरेट करना
• टेक्स्ट और इमेज (मल्टीमॉडल) वाले इनपुट से टेक्स्ट जनरेट करना

अगर आपको स्ट्रक्चर्ड आउटपुट (जैसे, JSON या enum) जनरेट करना है, तो "टेक्स्ट जनरेट करें" के इन उदाहरणों में से किसी एक का इस्तेमाल करें. इसके अलावा, मॉडल को दिए गए स्कीमा के मुताबिक जवाब देने के लिए कॉन्फ़िगर करें.

सिर्फ़ टेक्स्ट वाले इनपुट से टेक्स्ट जनरेट करना

generateContent() का इस्तेमाल करके, ऐसे प्रॉम्प्ट से टेक्स्ट जनरेट किया जा सकता है जिसमें टेक्स्ट शामिल हो:

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// Wrap in an async function so you can use await
async function run() {
  // Provide a prompt that contains text
  const prompt = "Write a story about a magic backpack."

  // To generate text output, call `generateContent` with the text input
  const result = await model.generateContent(prompt);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();

ध्यान दें कि Firebase AI Logic टेक्स्ट वाले जवाबों की स्ट्रीमिंग की सुविधा भी देता है. इसके लिए, generateContentStream का इस्तेमाल किया जाता है (बजाय generateContent के).

टेक्स्ट और इमेज (मल्टीमॉडल) वाले इनपुट से टेक्स्ट जनरेट करना

generateContent() का इस्तेमाल करके, ऐसे प्रॉम्प्ट से टेक्स्ट जनरेट किया जा सकता है जिसमें टेक्स्ट और इमेज फ़ाइलें शामिल हों. इसके लिए, हर इनपुट फ़ाइल का mimeType और फ़ाइल उपलब्ध कराएं.

डिवाइस पर इन्फ़रेंस के लिए, PNG और JPEG फ़ॉर्मैट वाली इमेज के इनपुट का इस्तेमाल किया जा सकता है.

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// Converts a File object to a Part object.
async function fileToGenerativePart(file) {
  const base64EncodedDataPromise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]);
    reader.readAsDataURL(file);
  });
  return {
    inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
  };
}

async function run() {
  // Provide a text prompt to include with the image
  const prompt = "Write a poem about this picture:";

  const fileInputEl = document.querySelector("input[type=file]");
  const imagePart = await fileToGenerativePart(fileInputEl.files[0]);

  // To generate text output, call `generateContent` with the text and image
  const result = await model.generateContent([prompt, imagePart]);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();

ध्यान दें कि Firebase AI Logic टेक्स्ट वाले जवाबों की स्ट्रीमिंग की सुविधा भी देता है. इसके लिए, generateContentStream का इस्तेमाल किया जाता है (बजाय generateContent के).

एंड-यूज़र को अपनी सुविधा आज़माने की अनुमति देना

एंड-यूज़र को अपने ऐप्लिकेशन में आपकी सुविधा आज़माने की अनुमति देने के लिए, आपको Chrome Origin Trials में रजिस्टर करना होगा. ध्यान दें कि इन ट्रायल के लिए, सीमित अवधि और इस्तेमाल की सीमा तय होती है.

1. Prompt API Chrome Origin Trial के लिए रजिस्टर करें. आपको एक टोकन दिया जाएगा.

2. हर उस वेब पेज पर टोकन उपलब्ध कराएं जिसके लिए आपको ट्रायल की सुविधा चालू करनी है. इनमें से किसी एक विकल्प का इस्तेमाल करें:

   • टोकन को <head> टैग में मेटा टैग के तौर पर उपलब्ध कराएं: <meta http-equiv="origin-trial" content="TOKEN">

   • टोकन को एचटीटीपी हेडर के तौर पर उपलब्ध कराएं: Origin-Trial: TOKEN

   • टोकन को प्रोग्राम के ज़रिए उपलब्ध कराएं.

तुम और क्या कर सकती हो?

हाइब्रिड अनुभवों के लिए, कॉन्फ़िगरेशन के कई अतिरिक्त विकल्पों और सुविधाओं का इस्तेमाल किया जा सकता है:

• इन्फ़रेंस मोड सेट करना

• क्लाउड पर होस्ट किए गए फ़ॉलबैक मॉडल को बदलना

• जवाबों (जैसे, तापमान) को कंट्रोल करने के लिए, मॉडल कॉन्फ़िगरेशन का इस्तेमाल करना

• स्ट्रक्चर्ड आउटपुट (जैसे, JSON) जनरेट करना

डिवाइस पर इन्फ़रेंस के लिए, फ़िलहाल उपलब्ध नहीं सुविधाएं

प्रीव्यू रिलीज़ के तौर पर, डिवाइस पर इन्फ़रेंस के लिए, Web SDK की सभी सुविधाएं उपलब्ध नहीं हैं. डिवाइस पर इन्फ़रेंस के लिए, फ़िलहाल ये सुविधाएं उपलब्ध नहीं हैं. हालांकि, ये सुविधाएं आम तौर पर क्लाउड पर आधारित इन्फ़रेंस के लिए उपलब्ध होती हैं.

• JPEG और PNG के अलावा, इमेज फ़ाइल के अन्य फ़ॉर्मैट वाले इनपुट से टेक्स्ट जनरेट करना

  • क्लाउड पर होस्ट किए गए मॉडल का इस्तेमाल किया जा सकता है. हालांकि, ONLY_ON_DEVICE मोड में गड़बड़ी दिखेगी.

• ऑडियो, वीडियो, और दस्तावेज़ों (जैसे, PDF) के इनपुट से टेक्स्ट जनरेट करना

  • क्लाउड पर होस्ट किए गए मॉडल का इस्तेमाल किया जा सकता है. हालांकि, ONLY_ON_DEVICE मोड में गड़बड़ी दिखेगी.

• Gemini या Imagen मॉडल का इस्तेमाल करके इमेज जनरेट करना

  • क्लाउड पर होस्ट किए गए मॉडल का इस्तेमाल किया जा सकता है. हालांकि, ONLY_ON_DEVICE मोड में गड़बड़ी दिखेगी.

• मल्टीमॉडल अनुरोधों में, यूआरएल का इस्तेमाल करके फ़ाइलें उपलब्ध कराना. डिवाइस पर मौजूद मॉडल के लिए, आपको फ़ाइलें इनलाइन डेटा के तौर पर उपलब्ध करानी होंगी.

• मल्टी-टर्न चैट

  • क्लाउड पर होस्ट किए गए मॉडल का इस्तेमाल किया जा सकता है. हालांकि, ONLY_ON_DEVICE मोड में गड़बड़ी दिखेगी.

• Gemini Live API के साथ, दोनों दिशाओं में स्ट्रीमिंग की सुविधा

• मॉडल को जवाब जनरेट करने में मदद करने के लिए टूल उपलब्ध कराना जैसे, फ़ंक्शन कॉलिंग, कोड एक्ज़ीक्यूशन, यूआरएल कॉन्टेक्स्ट, और के साथ ग्राउंडिंगGoogle Search

• टोकन की संख्या गिनना

  • इसमें हमेशा गड़बड़ी दिखती है. क्लाउड पर होस्ट किए गए और डिवाइस पर मौजूद मॉडल के बीच, टोकन की संख्या अलग-अलग होगी. इसलिए, फ़ॉलबैक की कोई सुविधा उपलब्ध नहीं है.

• डिवाइस पर इन्फ़रेंस के लिए, Firebase कंसोल में एआई की निगरानी की सुविधा.

  • ध्यान दें कि क्लाउड पर होस्ट किए गए मॉडल का इस्तेमाल करके किए गए किसी भी इन्फ़रेंस की निगरानी, वेब के लिए Firebase AI Logic क्लाइंट SDK टूल का इस्तेमाल करके किए गए अन्य इन्फ़रेंस की तरह ही की जा सकती है.

सुझाव/राय देना या शिकायत करना के बारे में अपने अनुभव के साथ Firebase AI Logic