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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    • chrome://flags/#prompt-api-for-gemini-nano-multimodal-input
  3. Chrome को रीस्टार्ट करें.

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

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

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

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

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

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

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

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

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

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

    जुलाई 2026 की शुरुआत से, वर्कफ़्लो का यह चरण, Firebase App Check के लिए AI Logic को अपने-आप लागू कर देगा, यह एक ज़रूरी सेवा है, जो आपके ऐप्लिकेशन से सीधे Gemini API को ऐक्सेस करने पर, उसे सुरक्षित रखने में मदद करती है. काम करना शुरू करने के लिए (इस गाइड में आगे दिए गए चरण देखें), App Check लागू होने पर, आपको लोकल डेवलपमेंट के लिए 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 डीबग प्रोवाइडर कॉन्फ़िगर करना होगा, ताकि अटेस्टेशन को बायपास किया जा सके. साथ ही, को लागू रखा जा सकेApp Check.

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

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

    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 या enums) जनरेट करना है, तो "टेक्स्ट जनरेट करें" के इन उदाहरणों में से किसी एक का इस्तेमाल करें. इसके अलावा, दिए गए स्कीमा के मुताबिक जवाब देने के लिए, मॉडल को कॉन्फ़िगर करें.

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

इस सैंपल को आज़माने से पहले, पक्का करें कि आपने इस गाइड का 'काम करना शुरू करें' सेक्शन पूरा कर लिया हो.

टेक्स्ट वाले प्रॉम्प्ट से टेक्स्ट जनरेट करने के लिए, 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 या Imagen मॉडल का इस्तेमाल करके इमेज जनरेट करना

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

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

    • क्लाउड पर होस्ट किए गए मॉडल का इस्तेमाल किया जा सकता है. हालांकि, ONLY_ON_DEVICE मोड में गड़बड़ी दिखेगी.
  • Gemini Live API के साथ, दोनों दिशाओं में स्ट्रीमिंग की सुविधा

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

  • टोकन की गिनती करना

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

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


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