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

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

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

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

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

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

इस्तेमाल के सुझाव:

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

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

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

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

डिवाइस पर मौजूद डेटा का इस्तेमाल करके अनुमान लगाने की सुविधा के लिए, ये सुविधाएँ और क्षमताएँ उपलब्ध हैं:

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

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

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

इसके अलावा, JSON और enum सहित स्ट्रक्चर्ड आउटपुट जनरेट किया जा सकता है.

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

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

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

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

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

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

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

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

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

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

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. डाउनलोड की प्रोग्रेस को सुनने के लिए, यहां दिए गए monitor कॉलबैक का इस्तेमाल किया जा सकता है. साथ ही, यह पक्का किया जा सकता है कि अनुरोध करने से पहले मॉडल available हो:

      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 प्रोजेक्ट बनाएं. ध्यान दें कि प्रॉम्प्ट मिलने पर, आपको Firebase AI Logic SDK का इस्तेमाल करने के लिए, Google Analytics सेट अप करने की ज़रूरत नहीं है.

2. Firebase कंसोल में, Firebase AI Logic पेज पर जाएं.

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

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

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

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

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

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

तीसरा चरण: एसडीके जोड़ना

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 के ऑरिजिन ट्रायल में रजिस्टर करना होगा. ध्यान दें कि इन सुविधाओं को आज़माने की अवधि और इस्तेमाल सीमित होता है.

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

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

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

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

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

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

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

• अनुमान लगाने का मोड सेट करना

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

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

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

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

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

• 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 client SDK for Web का इस्तेमाल करके किए गए अन्य अनुमानों को मॉनिटर किया जाता है.

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