WebLLM की मदद से, स्थानीय और ऑफ़लाइन काम करने वाला चैटबॉट बनाना

पब्लिश होने की तारीख: 13 जनवरी, 2024

Christian Liebel

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

क्लाइंट-साइड एआई को बेहतर तरीके से समझने के बाद, अब आपको 'क्या-क्या करें' सूची वाले वेब ऐप्लिकेशन में WebLLM जोड़ने का तरीका पता चल गया होगा. आपको यह कोड, GitHub रिपॉज़िटरी की web-llm शाखा में मिलेगा.

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

डिवाइस पर मॉडल इंफ़रेंस करने के लिए, WebLLM WebAssembly और WebGPU को जोड़ता है. WebAssembly की मदद से, सेंट्रल प्रोसेसिंग यूनिट (सीपीयू) पर बेहतर तरीके से कैलकुलेशन की जा सकती है. वहीं, WebGPU की मदद से डेवलपर, डिवाइस की ग्राफ़िक्स प्रोसेसिंग यूनिट (जीपीयू) को लो-लेवल ऐक्सेस कर सकते हैं.

WebLLM इंस्टॉल करना

WebLLM, npm पैकेज के तौर पर उपलब्ध है. npm install @mlc-ai/web-llm को चलाकर, इस पैकेज को अपनी 'क्या-क्या करें' सूची वाले ऐप्लिकेशन में जोड़ा जा सकता है.

कोई मॉडल चुनें

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

यह तय करने के लिए, आपको इन मुख्य शब्दों और आंकड़ों के बारे में जानकारी होनी चाहिए:

• टोकन: टेक्स्ट की सबसे छोटी यूनिट, जिसे एलएलएम प्रोसेस कर सकता है.
• कॉन्टेक्स्ट विंडो: मॉडल ज़्यादा से ज़्यादा कितने टोकन प्रोसेस कर सकता है.
• पैरामीटर या वेट: ट्रेनिंग के दौरान, इंटरनल वैरिएबल को सीखा जाता है. इनकी गिनती अरबों में की जाती है.
• क्वांटाइज़ेशन: वेट दिखाने वाले बिट की संख्या. ज़्यादा बिट का मतलब है, ज़्यादा सटीक जानकारी. हालांकि, इससे मेमोरी का इस्तेमाल भी ज़्यादा होता है.
• फ़्लोटिंग-पॉइंट नंबर फ़ॉर्मैट: 32-बिट फ़्लोटिंग नंबर (फ़ुल-प्रिसिशन, F32) ज़्यादा सटीक होते हैं. वहीं, 16-बिट फ़्लोटिंग नंबर (हाफ़-प्रिसिशन, F16) की स्पीड ज़्यादा होती है और इनमें मेमोरी का कम इस्तेमाल होता है. हालांकि, इनके लिए काम करने वाला हार्डवेयर ज़रूरी होता है.

ये मुख्य शब्द, मॉडल के नाम का हिस्सा होते हैं. उदाहरण के लिए, Llama-3.2-3B-Instruct-q4f32_1-MLC में यह जानकारी शामिल होती है:

• मॉडल LLaMa 3.2 है.
• मॉडल में तीन अरब पैरामीटर हैं.
• इसे निर्देश और प्रॉम्प्ट-स्टाइल असिस्टेंट (निर्देश दें) के लिए बेहतर बनाया गया है.
• इसमें 4-बिट (q4) यूनिफ़ॉर्म (_1) क्वांटिज़ेशन का इस्तेमाल किया जाता है.
• इसमें 32-बिट फ़्लोटिंग-पॉइंट वाली सटीक संख्याएं होती हैं.
• यह मशीन लर्निंग कंपाइलेशन की मदद से बनाया गया एक खास वर्शन है.

आपको अलग-अलग मॉडल आज़माने पड़ सकते हैं, ताकि यह पता लगाया जा सके कि आपके काम के लिए कौनसा मॉडल सही है.

इस लेख को लिखने के समय, 30 करोड़ पैरामीटर और हर पैरामीटर के लिए 4 बिट वाले मॉडल का फ़ाइल साइज़ 1.4 जीबी तक हो सकता है. ऐप्लिकेशन को पहली बार इस्तेमाल करने से पहले, उपयोगकर्ता के डिवाइस पर इसे डाउनलोड करना होगा. 30 करोड़ यूनीक पैरामीटर वाले मॉडल का इस्तेमाल किया जा सकता है. हालांकि, अनुवाद की सुविधाओं या सामान्य जानकारी के मामले में, 70 करोड़ यूनीक पैरामीटर वाले मॉडल बेहतर नतीजे देते हैं. हालांकि, 3.3 जीबी और उससे ज़्यादा के लिए, ये काफ़ी बड़े होते हैं.

WebLLM इंजन बनाने और अपनी 'क्या-क्या करें' सूची वाले चैटबॉट के लिए मॉडल डाउनलोड करने की प्रोसेस शुरू करने के लिए, अपने ऐप्लिकेशन में यह कोड जोड़ें:

import {CreateMLCEngine} from '@mlc-ai/web-llm';
const engine = await CreateMLCEngine('Llama-3.2-3B-Instruct-q4f32_1-MLC', {
  initProgressCallback: ({progress}) =>  console.log(progress);
});

CreateMLCEngine तरीका, मॉडल स्ट्रिंग और वैकल्पिक कॉन्फ़िगरेशन ऑब्जेक्ट लेता है. initProgressCallback तरीके का इस्तेमाल करके, मॉडल के डाउनलोड की प्रोग्रेस के बारे में क्वेरी की जा सकती है, ताकि उपयोगकर्ताओं को इंतज़ार करते समय यह जानकारी दी जा सके.

Cache API: अपने LLM को ऑफ़लाइन चलाना

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

डाउनलोड होने के बाद, WebLLM नेटवर्क पर अनुरोध करने के बजाय, कैश एपीआई से मॉडल फ़ाइलें पढ़ता है. इससे WebLLM पूरी तरह से ऑफ़लाइन काम कर पाता है.

वेबसाइट के सभी स्टोरेज की तरह ही, कैश मेमोरी को हर ऑरिजिन के हिसाब से अलग रखा जाता है. इसका मतलब है कि दो ऑरिजिन, example.com और example.net, एक ही स्टोरेज को शेयर नहीं कर सकते. अगर उन दोनों वेबसाइटों को एक ही मॉडल का इस्तेमाल करना था, तो उन्हें मॉडल को अलग से डाउनलोड करना होगा.

DevTools का इस्तेमाल करके कैश मेमोरी की जांच करने के लिए, ऐप्लिकेशन > स्टोरेज पर जाएं और कैश मेमोरी का स्टोरेज खोलें.

बातचीत सेट अप करना

मॉडल को शुरुआती प्रॉम्प्ट के सेट से शुरू किया जा सकता है. आम तौर पर, मैसेज की तीन भूमिकाएं होती हैं:

• सिस्टम प्रॉम्प्ट: यह प्रॉम्प्ट, मॉडल के व्यवहार, भूमिका, और चरित्र के बारे में बताता है. इसका इस्तेमाल ग्राउंडिंग के लिए भी किया जा सकता है. इसका मतलब है कि मॉडल में ऐसा कस्टम डेटा डालना जो उसके ट्रेनिंग सेट का हिस्सा नहीं है. जैसे, आपके डोमेन से जुड़ा डेटा. सिर्फ़ एक सिस्टम प्रॉम्प्ट दिया जा सकता है.
• उपयोगकर्ता के प्रॉम्प्ट: उपयोगकर्ता के डाले गए प्रॉम्प्ट.
• Assistant का प्रॉम्प्ट: Assistant से मिले जवाब. हालांकि, यह ज़रूरी नहीं है.

उपयोगकर्ता और सहायक प्रॉम्प्ट का इस्तेमाल, कई बार पूछे जाने वाले सवालों के लिए किया जा सकता है. इसके लिए, एलएलएम को सामान्य भाषा के उदाहरण दें, ताकि वह यह जान सके कि उसे कैसे काम करना चाहिए या जवाब कैसे देना चाहिए.

यहां 'क्या-क्या करें' सूची वाले ऐप्लिकेशन के लिए, बातचीत सेट अप करने का एक छोटा उदाहरण दिया गया है:

const messages = [
  { role: "system",
    content: `You are a helpful assistant. You will answer questions related to
    the user's to-do list. Decline all other requests not related to the user's
    todos. This is the to-do list in JSON: ${JSON.stringify(todos)}`
  },
  {role: "user", content: "How many open todos do I have?"}
];

अपने पहले सवाल का जवाब देना

चैट को पूरा करने की सुविधा, पहले से बनाए गए WebLLM इंजन (engine.chat.completions) पर प्रॉपर्टी के तौर पर दिखाई जाती है. मॉडल डाउनलोड होने के बाद, इस प्रॉपर्टी पर create() तरीके को कॉल करके, मॉडल का अनुमान लगाया जा सकता है. अपने इस्तेमाल के उदाहरण के लिए, आपको जवाबों को स्ट्रीम करना है, ताकि उपयोगकर्ता जवाब जनरेट होने के दौरान ही उसे पढ़ना शुरू कर सके. इससे, इंतज़ार का अनुमानित समय कम हो जाता है:

const chunks = await engine.chat.completions.create({  messages,  stream: true, });

यह तरीका, AsyncGenerator दिखाता है. यह hiddenAsyncIterator क्लास का सबक्लास है. for await...of लूप का इस्तेमाल करके, चंक के आने का इंतज़ार करें. हालांकि, जवाब में सिर्फ़ नए टोकन (delta) शामिल होते हैं. इसलिए, आपको पूरा जवाब खुद इकट्ठा करना होगा.

let reply = '';

for await (const chunk of chunks) {
  reply += chunk.choices[0]?.delta.content ?? '';
  console.log(reply);
}

ऐसा लगता है कि वेब को हमेशा स्ट्रीमिंग रिस्पॉन्स से निपटना पड़ता था. इन स्ट्रीमिंग रिस्पॉन्स के साथ काम करने और अपने एचटीएमएल को बेहतर तरीके से अपडेट करने के लिए, DOMImplementation जैसे एपीआई का इस्तेमाल किया जा सकता है.

नतीजे पूरी तरह से स्ट्रिंग पर आधारित होते हैं. अगर आपको उन्हें JSON या अन्य फ़ाइल फ़ॉर्मैट के तौर पर समझना है, तो आपको पहले उन्हें पार्स करना होगा.

हालांकि, WebLLM पर कुछ पाबंदियां हैं: ऐप्लिकेशन को पहली बार इस्तेमाल करने से पहले, एक बड़ा मॉडल डाउनलोड करना पड़ता है. इसे सभी ऑरिजिन के साथ शेयर नहीं किया जा सकता. इसलिए, किसी दूसरे वेब ऐप्लिकेशन को वही मॉडल फिर से डाउनलोड करना पड़ सकता है. WebGPU, नेटिव इंफ़रेंस की परफ़ॉर्मेंस के करीब की परफ़ॉर्मेंस देता है. हालांकि, यह पूरी नेटिव स्पीड तक नहीं पहुंचता.

डेमो

• WebLLM की मदद से, 'क्या-क्या करें' ऐप्लिकेशन
• GitHub पर सोर्स

इन समस्याओं को Prompt API से हल किया जाता है. यह एक एक्सप्लोरेटरी एपीआई है, जिसे Google ने सुझाया है. यह क्लाइंट-साइड पर भी काम करता है. हालांकि, यह Chrome में डाउनलोड किए गए सेंट्रल मॉडल का इस्तेमाल करता है. इसका मतलब है कि एक से ज़्यादा ऐप्लिकेशन, एक ही मॉडल का इस्तेमाल, पूरी गति से कर सकते हैं.

अगले लेख में, Prompt API का इस्तेमाल करके चैटबॉट की सुविधाएं जोड़ने के बारे में ज़्यादा जानें.