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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

लोकलहोस्ट पर इस्तेमाल करना

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

पहला चरण: डिवाइस पर इन्फ़रेंस के लिए, 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 में पहले से मौजूद होता है. हालांकि, उपयोगकर्ता के डिवाइस पर मौजूद मॉडल डिफ़ॉल्ट रूप से उपलब्ध नहीं होता. अगर आपने उपयोगकर्ता के डिवाइस पर अनुमान लगाने के लिए पहली बार अनुरोध करने से पहले मॉडल डाउनलोड नहीं किया है, तो अनुरोध करने पर मॉडल अपने-आप बैकग्राउंड में डाउनलोड होना शुरू हो जाएगा.

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

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

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

  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);

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

इस पेज पर, सेवा देने वाली कंपनी के हिसाब से कॉन्टेंट और कोड देखने के लिए, Gemini API पर क्लिक करें.

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

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

  2. GenerativeModel इंस्टेंस बनाएं. पक्का करें कि आपने 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
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

पांचवां चरण: उपयोगकर्ता के डिवाइस पर मौजूद मॉडल को शुरू करना

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

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
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

// `initializeDeviceModel` must be called:
// (1) after or on an end-user page interaction such as a button click
// and
// (2) before any queries to the model (such as `generateContent()`)
// You may want to `await` this promise if using `ONLY_ON_DEVICE` (see note below).
model.initializeDeviceModel((val) =>
  // Example: "Download progress: 72.62%""
  console.log(`Download progress: ${Math.round(val*10000) / 100}%`)
);

छठा चरण: किसी मॉडल को प्रॉम्प्ट का अनुरोध भेजना

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

अगर आपको स्ट्रक्चर्ड आउटपुट (जैसे, 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. हर उस वेब पेज पर टोकन दें जिसके लिए आपको बिना शुल्क आज़माने की सुविधा चालू करनी है. इनमें से किसी एक विकल्प का इस्तेमाल करें:

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

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

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

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

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

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

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

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

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

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

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

  • सिलसिलेवार बातचीत

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

  • Gemini Live API के साथ दोनों डिवाइसों पर एक साथ स्ट्रीमिंग की जा सकती है

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

  • टोकन गिनना

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

  • उपयोगकर्ता के डिवाइस पर अनुमान लगाने की सुविधा के लिए, Firebase कंसोल में एआई मॉनिटरिंग की सुविधा.

    • ध्यान दें कि क्लाउड पर होस्ट किए गए मॉडल का इस्तेमाल करके किए गए किसी भी अनुमान को मॉनिटर किया जा सकता है. ठीक उसी तरह जैसे Firebase AI Logic client SDK for Web का इस्तेमाल करके किए गए अन्य अनुमानों को मॉनिटर किया जाता है.


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