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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  4. अगर कहा जाए, तो स्क्रीन पर दिए गए निर्देशों का पालन करके, अपने ऐप्लिकेशन को रजिस्टर करें. साथ ही, अपने ऐप्लिकेशन में Firebase कॉन्फ़िगरेशन जोड़ें.

  5. "Gemini API उपलब्ध कराने वाली कंपनी" चुनने के लिए कहा जाने पर, हम Gemini Developer API को चुनने का सुझाव देते हैं. इससे आपको बिना किसी शुल्क के तुरंत शुरुआत करने में मदद मिलती है.

    बाद में किसी भी समय, Agent Platform Gemini API (formerly Vertex AI) को सेट अप किया जा सकता है. साथ ही, बिलिंग के लिए ज़रूरी जानकारी भी दी जा सकती है.

  6. Firebase AI Logic के लिए ज़रूरी एपीआई और उनसे जुड़ी सेवाओं को सेट अप करने के लिए, वर्कफ़्लो में आगे बढ़ें.

    जुलाई 2026 की शुरुआत से, वर्कफ़्लो का यह चरण AI Logic के लिए Firebase App Check को अपने-आप लागू कर देगा. यह Gemini API की सुरक्षा के लिए ज़रूरी सेवा है. ऐसा तब होता है, जब Gemini API को सीधे आपके ऐप्लिकेशन से ऐक्सेस किया जाता है. शुरू करने के लिए, आपको App Check डीबग प्रोवाइडर को कॉन्फ़िगर करना होगा. इसके बारे में इस गाइड में बाद में बताया गया है. ऐसा तब करना होगा, जब App Check लागू किया गया हो.

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

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

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

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

    npm install firebase

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

    import { initializeApp } from "firebase/app";
import { initializeAppCheck } from "firebase/app-check";

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

चौथा चरण: लोकल डेवलपमेंट के लिए, App Check डीबग प्रोवाइडर को कॉन्फ़िगर करना

जुलाई 2026 की शुरुआत से, कंसोल में AI Logic के लिए, सेटअप करने के तरीके से जुड़े वर्कफ़्लो के तहत, Firebase App Check को अपने-आप लागू किया जाता है, ताकि Gemini API को सुरक्षित रखा जा सके. लोकल डेवलपमेंट के लिए, आपको App Check debug provider को कॉन्फ़िगर करना होगा, ताकि पुष्टि की प्रोसेस को बायपास किया जा सके. हालांकि, App Check को लागू किया जाता रहेगा.

यहां बताया गया है कि localhost से इंटरैक्टिव तरीके से ऐप्लिकेशन चलाते समय, डीबग प्रोवाइडर का इस्तेमाल कैसे करें. उदाहरण के लिए, लोकल डेवलपमेंट के दौरान:

  1. अपनी डीबग बिल्ड में, App Check को शुरू करने से पहले, self.FIREBASE_APPCHECK_DEBUG_TOKEN को true पर सेट करके डीबग मोड चालू करें. उदाहरण के लिए:

    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
initializeAppCheck(firebaseApp, { /* App Check options */ });

  2. अपने वेब ऐप्लिकेशन को स्थानीय तौर पर खोलें और ब्राउज़र के डेवलपर टूल खोलें. डीबग कंसोल में, आपको एक डीबग टोकन दिखेगा:

    AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
You will need to safelist it in the Firebase console for it to work.

  3. अपने डीबग टोकन को App Check के साथ रजिस्टर करें:

    1. Firebase कंसोल में, सुरक्षा > App Check > ऐप्लिकेशन टैब पर जाएं.

    2. अपना ऐप्लिकेशन ढूंढें. इसके बाद, ओवरफ़्लो मेन्यू () पर क्लिक करें. इसके बाद, डीबग टोकन मैनेज करें को चुनें.

    3. अपने डीबग टोकन को रजिस्टर करने के लिए, स्क्रीन पर दिए गए निर्देशों का पालन करें.

डीबग करने की सुविधा देने वाली कंपनी के बारे में जानकारी पाने के लिए (इसमें नया डीबग टोकन पाने का तरीका भी शामिल है), App Check के आधिकारिक दस्तावेज़ देखें.

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

इस पेज पर, सेवा देने वाली कंपनी के हिसाब से कॉन्टेंट और कोड देखने के लिए, 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 का इस्तेमाल नहीं किया जाता.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • टोकन गिनें

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

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

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


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