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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

पहला चरण: डिवाइस पर इन्फ़रेंस के लिए, 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. अपने ऐप्लिकेशन में एसडीके जोड़ने के लिए, इस गाइड में अगले चरण पर जाएं.

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

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 Origin Trials में शामिल होना होगा. ध्यान दें कि इन ट्रायल की अवधि और इस्तेमाल की सीमा तय होती है.

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

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

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

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

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

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

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

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

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

PREFER_ON_DEVICE

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

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

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

    • क्लाउड पर होस्ट किए गए मॉडल का इस्तेमाल किया जा सकता है. हालांकि, 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