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

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. अगर कहा जाए, तो स्क्रीन पर दिए गए निर्देशों का पालन करके, अपने ऐप्लिकेशन को रजिस्टर करें. साथ ही, अपने ऐप्लिकेशन में Firebase कॉन्फ़िगरेशन जोड़ें.

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

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

  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, DebugProvider } 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(app, { /* 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 का इस्तेमाल नहीं किया जाता.

असली उपयोगकर्ताओं को आपकी सुविधा आज़माने की अनुमति देना

अगर आपको अपने ऐप्लिकेशन में, उपयोगकर्ताओं को यह सुविधा आज़माने का विकल्प देना है, तो आपको Chrome के ऑरिजिन ट्रायल में रजिस्टर करना होगा. ध्यान दें कि इन ट्रायल को इस्तेमाल करने की अवधि और इस्तेमाल करने की सीमा तय होती है.

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

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

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

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

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

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

  • 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 के साथ अपने अनुभव के बारे में सुझाव/राय दें या शिकायत करें