उपयोगकर्ताओं को मॉडल डाउनलोड करने के बारे में सूचना देना

Thomas Steiner

पब्लिश होने की तारीख: 1 अक्टूबर, 2025

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

यहां दिए गए उदाहरणों में Prompt API का इस्तेमाल किया गया है. हालांकि, इन कॉन्सेप्ट को पहले से मौजूद अन्य एआई एपीआई पर भी लागू किया जा सकता है.

डाउनलोड करने की प्रोसेस को मॉनिटर करना और उसे शेयर करना

हर बिल्ट-इन एआई एपीआई, सेशन शुरू करने के लिए create() फ़ंक्शन का इस्तेमाल करता है. create() फ़ंक्शन में monitor विकल्प होता है, ताकि आप डाउनलोड करने की प्रोग्रेस को ऐक्सेस कर सकें और उसे उपयोगकर्ता के साथ शेयर कर सकें.

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

सिर्फ़ क्लाइंट-साइड

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

इस मामले में, अगर मॉडल पहले से उपलब्ध नहीं है, तो आपको उपयोगकर्ता को डाउनलोड की प्रोग्रेस की जानकारी देनी चाहिए.

<style>
  progress[hidden] ~ label {
    display: none;
  }
</style>

<button type="button">Create LanguageModel session</button>
<progress hidden id="progress" value="0"></progress>
<label for="progress">Model download progress</label>

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

• एपीआई 'unavailable' है: इस डिवाइस पर, आपका ऐप्लिकेशन क्लाइंट-साइड पर इस्तेमाल नहीं किया जा सकता. उपयोगकर्ता को सूचना दें कि यह सुविधा उपलब्ध नहीं है.
• एपीआई 'available' है: एपीआई का इस्तेमाल तुरंत किया जा सकता है. इसके लिए, प्रोग्रेस यूज़र इंटरफ़ेस (यूआई) दिखाने की ज़रूरत नहीं है.
• एपीआई 'downloadable' या 'downloading' है: एपीआई का इस्तेमाल, डाउनलोड पूरा होने के बाद किया जा सकता है. प्रोग्रेस इंडिकेटर दिखाएं और जब भी downloadprogress इवेंट ट्रिगर हो, तब उसे अपडेट करें. डाउनलोड होने के बाद, उपयोगकर्ता को यह बताने के लिए कि ब्राउज़र मॉडल को एक्सट्रैक्ट कर रहा है और मेमोरी में लोड कर रहा है, अनिश्चित स्थिति दिखाएं.

const createButton = document.querySelector('.create');
const promptButton = document.querySelector('.prompt');
const progress = document.querySelector('progress');
const output = document.querySelector('output');

let sessionCreationTriggered = false;
let localSession = null;

const createSession = async (options = {}) => {
  if (sessionCreationTriggered) {
    return;
  }

  progress.hidden = true;
  progress.value = 0;

  try {
    if (!('LanguageModel' in self)) {
      throw new Error('LanguageModel is not supported.');
    }

    const availability = await LanguageModel.availability({
      // ⚠️ Always pass the same options to the `availability()` function that
      // you use in `prompt()` or `promptStreaming()`. This is critical to
      // align model language and modality capabilities.
      expectedInputs: [{ type: 'text', languages: ['en'] }],
      expectedOutputs: [{ type: 'text', languages: ['en'] }],
    });
    if (availability === 'unavailable') {
      throw new Error('LanguageModel is not available.');
    }

    let modelNewlyDownloaded = false;
    if (availability !== 'available') {
      modelNewlyDownloaded = true;
      progress.hidden = false;
    }
    console.log(`LanguageModel is ${availability}.`);
    sessionCreationTriggered = true;

    const llmSession = await LanguageModel.create({
      monitor(m) {
        m.addEventListener('downloadprogress', (e) => {
          progress.value = e.loaded;
          if (modelNewlyDownloaded && e.loaded === 1) {
            // The model was newly downloaded and needs to be extracted
            // and loaded into memory, so show the undetermined state.
            progress.removeAttribute('value');
          }
        });
      },
      ...options,
    });

    sessionCreationTriggered = false;
    return llmSession;
  } catch (error) {
    throw error;
  } finally {
    progress.hidden = true;
    progress.value = 0;
  }
};

createButton.addEventListener('click', async () => {
  try {
    localSession = await createSession({
      expectedInputs: [{ type: 'text', languages: ['en'] }],
      expectedOutputs: [{ type: 'text', languages: ['en'] }],
    });
    promptButton.disabled = false;
  } catch (error) {
    output.textContent = error.message;
  }
});

promptButton.addEventListener('click', async () => {
  output.innerHTML = '';
  try {
    const stream = localSession.promptStreaming('Write me a poem');
    for await (const chunk of stream) {
      output.append(chunk);
    }
  } catch (err) {
    output.textContent = err.message;
  }
});

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

क्लाइंट-साइड डेमो

इस फ़्लो को काम करते हुए दिखाने वाला डेमो देखें. अगर डिवाइस में पहले से मौजूद एआई एपीआई (इस उदाहरण में, प्रॉम्प्ट एपीआई) उपलब्ध नहीं है, तो ऐप्लिकेशन का इस्तेमाल नहीं किया जा सकता. अगर बिल्ट-इन एआई मॉडल को अब भी डाउनलोड करना है, तो उपयोगकर्ता को प्रोग्रेस इंडिकेटर दिखाया जाता है. GitHub पर सोर्स कोड देखा जा सकता है.

हाइब्रिड तरीके से लागू करना

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

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

हाइब्रिड डेमो

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

नतीजा

आपका ऐप्लिकेशन किस कैटगरी में आता है? क्या आपको 100% क्लाइंट-साइड प्रोसेसिंग की ज़रूरत है या हाइब्रिड अप्रोच का इस्तेमाल किया जा सकता है? इस सवाल का जवाब देने के बाद, अगला चरण मॉडल डाउनलोड करने की ऐसी रणनीति लागू करना है जो आपके लिए सबसे सही हो.

पक्का करें कि आपके उपयोगकर्ताओं को हमेशा यह पता रहे कि वे आपके ऐप्लिकेशन के क्लाइंट-साइड का इस्तेमाल कब और कैसे कर सकते हैं. इसके लिए, उन्हें मॉडल डाउनलोड करने की प्रोग्रेस दिखाएं. इसके बारे में इस गाइड में बताया गया है.

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