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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. पक्का करें कि Chrome के नए वर्शन का इस्तेमाल किया जा रहा हो. chrome://settings/help पर जाकर अपडेट करें.
    डिवाइस पर इन्फ़रेंस की सुविधा, 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. "Gemini API" की सेवा देने वाली कंपनी का इस्तेमाल करने के लिए, अपना प्रोजेक्ट सेट अप करें.

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

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

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

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

तीसरा चरण: SDK टूल जोड़ना

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 या 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 के).

एंड-यूज़र को अपनी सुविधा आज़माने की अनुमति देना

एंड-यूज़र को अपने ऐप्लिकेशन में आपकी सुविधा आज़माने की अनुमति देने के लिए, आपको Chrome Origin Trials में रजिस्टर करना होगा. ध्यान दें कि इन ट्रायल के लिए, सीमित अवधि और इस्तेमाल की सीमा तय होती है.

  1. Prompt API Chrome Origin Trial के लिए रजिस्टर करें. आपको एक टोकन मिलेगा.

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

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

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

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

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

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

डिवाइस पर इन्फ़रेंस के लिए, फ़िलहाल उपलब्ध नहीं सुविधाएं

प्रीव्यू रिलीज़ के तौर पर, डिवाइस पर इन्फ़रेंस के लिए, 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 क्लाइंट SDK टूल का इस्तेमाल करके किए गए अन्य इन्फ़रेंस की तरह ही की जा सकती है.


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