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

Thomas Steiner

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

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

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

हर बिल्ट-इन एआई एपीआई में, सेशन शुरू करने के लिए 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 session = 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();
    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% क्लाइंट-साइड प्रोसेसिंग की ज़रूरत है या हाइब्रिड अप्रोच का इस्तेमाल किया जा सकता है? इस सवाल का जवाब देने के बाद, अगला चरण यह है कि आप मॉडल डाउनलोड करने की ऐसी रणनीति लागू करें जो आपके लिए सबसे सही हो.

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

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