web llm
v0.2.0
محرك الاستدلال عالي الأداء في المتصفح.
الوثائق | Blogpost | ورقة | أمثلة
WebLLM هو محرك استنتاج LLM عالي الأداء في متصفح يجلب استنتاج نموذج اللغة مباشرة على متصفحات الويب مع تسارع الأجهزة. يتم تشغيل كل شيء داخل المتصفح بدون دعم الخادم ويتم تسريعه باستخدام WebGPU.
WebLLM متوافق بالكامل مع Openai API. أي أنه يمكنك استخدام نفس API Openai على أي نماذج مفتوحة المصدر محليًا ، مع وظائف بما في ذلك البث ، وضع JSON ، استدعاء الوظائف (WIP) ، إلخ.
يمكننا إحضار الكثير من الفرص الممتعة لبناء مساعدي الذكاء الاصطناعى للجميع وتمكين الخصوصية مع الاستمتاع بتسارع GPU.
يمكنك استخدام WebLLM كحزمة NPM الأساسية وإنشاء تطبيق الويب الخاص بك فوقه باتباع الأمثلة أدناه. هذا المشروع هو مشروع مصاحب لـ MLC LLM ، والذي يتيح نشر LLM العالمي عبر بيئات الأجهزة.
تحقق من دردشة webllm لتجربتها!
الاستدلال في المتصفح : WebLLM هو محرك استدلال عالي الأداء في المتصفح الذي يعزز WebGPU لتسريع الأجهزة ، مما يتيح عمليات LLM القوية مباشرة داخل متصفحات الويب دون معالجة من جانب الخادم.
التوافق الكامل لـ Openai API : قم بدمج تطبيقك بسلاسة باستخدام WebLLM باستخدام Openai API مع وظائف مثل البث ، والسيطرة على مستوى JSON ، والتحكم على مستوى السجل ، والبذر ، وأكثر من ذلك.
جيل JSON المهيكل : يدعم WebLLM أحدث وضع JSON الجيل المهيكل ، الذي تم تنفيذه في جزء webassembly من مكتبة النموذج للحصول على الأداء الأمثل. تحقق من ملعب WebLLM JSON على Luggingface لمحاولة إنشاء إخراج JSON مع مخطط JSON المخصص.
دعم النموذج الواسع : يدعم WebLLM بشكل أصلي مجموعة من النماذج بما في ذلك Llama 3 و Phi 3 و Gemma و Mistral و Qwen (通义千问) ، والعديد منها ، مما يجعلها متعددة الاستخدامات لمهام الذكاء الاصطناعي المختلفة. للحصول على قائمة النماذج المدعومة الكاملة ، تحقق من نماذج MLC.
تكامل النموذج المخصص : دمج نماذج مخصصة ونشرها بسهولة بتنسيق MLC ، مما يتيح لك تكييف WebLLM مع احتياجات وسيناريوهات محددة ، مما يعزز المرونة في نشر النموذج.
تكامل التوصيل والتشغيل : دمج WebLLM بسهولة في مشاريعك باستخدام مديري الحزم مثل NPM والغزل ، أو مباشرة عبر CDN ، مع أمثلة شاملة وتصميم معياري للتواصل مع مكونات واجهة المستخدم.
تفاعلات البث والوقت الفعلي : يدعم إكمال تدفق الدردشة ، مما يسمح بتوليد الإخراج في الوقت الفعلي الذي يعزز التطبيقات التفاعلية مثل chatbots والمساعدين الظاهريين.
دعم عامل الويب وموظف الخدمة : تحسين أداء واجهة المستخدم وإدارة دورة حياة النماذج بكفاءة عن طريق إلغاء تحميل الحسابات لفصل مؤشرات ترابط العمال أو العاملين في الخدمة.
دعم تمديد Chrome : تمديد وظائف متصفحات الويب من خلال امتدادات Chrome المخصصة باستخدام WebLLM ، مع أمثلة متاحة لبناء كل من الامتدادات الأساسية والمتقدمة.
تحقق من القائمة الكاملة للنماذج المتاحة على نماذج MLC. يدعم WebLLM مجموعة فرعية من هذه النماذج المتاحة ويمكن الوصول إلى القائمة على prebuiltAppConfig.model_list .
فيما يلي العائلات الرئيسية للنماذج المدعومة حاليًا:
إذا كنت بحاجة إلى مزيد من النماذج ، فاطلب نموذجًا جديدًا عن طريق فتح مشكلة أو تحقق من نماذج مخصصة لكيفية تجميع النماذج الخاصة بك باستخدام WebLLM واستخدامها.
تعرف على كيفية استخدام WebLLM لدمج نماذج اللغة الكبيرة في تطبيقك وإنشاء إكمال الدردشة من خلال مثال chatbot البسيط:
للحصول على مثال متقدم لمشروع أكبر وأكثر تعقيدًا ، تحقق من دردشة WebLLM.
تتوفر المزيد من الأمثلة لحالات الاستخدام المختلفة في مجلد الأمثلة.
يوفر WebLLM واجهة الحد الأدنى والمعيار للوصول إلى chatbot في المتصفح. تم تصميم الحزمة بطريقة معيارية لربط أي من مكونات واجهة المستخدم.
# npm
npm install @mlc-ai/web-llm
# yarn
yarn add @mlc-ai/web-llm
# or pnpm
pnpm install @mlc-ai/web-llmثم استيراد الوحدة النمطية في الكود الخاص بك.
// Import everything
import * as webllm from "@mlc-ai/web-llm" ;
// Or only import what you need
import { CreateMLCEngine } from "@mlc-ai/web-llm" ; بفضل jsdelivr.com ، يمكن استيراد webLLM مباشرة من خلال عنوان URL والعمل خارج الصندوق على منصات تطوير السحابة مثل jsfiddle.net و codepen.io و scribbler:
import * as webllm from "https://esm.run/@mlc-ai/web-llm" ;يمكن أيضًا استيراده ديناميكيًا على النحو التالي:
const webllm = await import ( "https://esm.run/@mlc-ai/web-llm" ) ; يتم استدعاء معظم العمليات في WebLLM من خلال واجهة MLCEngine . يمكنك إنشاء مثيل MLCEngine وتحميل النموذج عن طريق استدعاء وظيفة المصنع CreateMLCEngine() .
(لاحظ أن نماذج التحميل تتطلب التنزيل وقد يستغرق الأمر وقتًا كبيرًا للتشغيل الأول دون التخزين المؤقت سابقًا. يجب عليك التعامل بشكل صحيح مع هذه المكالمة غير المتزامنة.)
import { CreateMLCEngine } from "@mlc-ai/web-llm" ;
// Callback function to update model loading progress
const initProgressCallback = ( initProgress ) => {
console . log ( initProgress ) ;
}
const selectedModel = "Llama-3.1-8B-Instruct-q4f32_1-MLC" ;
const engine = await CreateMLCEngine (
selectedModel ,
{ initProgressCallback : initProgressCallback } , // engineConfig
) ;تحت الغطاء ، تقوم وظيفة المصنع هذه بالخطوات التالية لإنشاء مثيل للمحرك أولاً (متزامن) ثم تحميل النموذج (غير متزامن). يمكنك أيضًا القيام بها بشكل منفصل في تطبيقك.
import { MLCEngine } from "@mlc-ai/web-llm" ;
// This is a synchronous call that returns immediately
const engine = new MLCEngine ( {
initProgressCallback : initProgressCallback
} ) ;
// This is an asynchronous call and can take a long time to finish
await engine . reload ( selectedModel ) ; بعد تهيئة المحرك بنجاح ، يمكنك الآن استدعاء إكمال الدردشة باستخدام واجهات برمجة تطبيقات Openai Style من خلال واجهة engine.chat.completions . للحصول على القائمة الكاملة للمعلمات وأوصافها ، تحقق من المقطع أدناه ومرجع Openai API.
(ملاحظة: لا يتم دعم المعلمة model وسيتم تجاهلها هنا. بدلاً من ذلك ، استدعاء CreateMLCEngine(model) أو engine.reload(model) بدلاً من ذلك كما هو موضح في إنشاء MLCENGINE أعلاه.)
const messages = [
{ role : "system" , content : "You are a helpful AI assistant." } ,
{ role : "user" , content : "Hello!" } ,
]
const reply = await engine . chat . completions . create ( {
messages ,
} ) ;
console . log ( reply . choices [ 0 ] . message ) ;
console . log ( reply . usage ) ; يدعم WebLLM أيضًا توليد إكمال الدردشة. لاستخدامه ، ما عليك سوى تمرير stream: true إلى engine.chat.completions.create .
const messages = [
{ role : "system" , content : "You are a helpful AI assistant." } ,
{ role : "user" , content : "Hello!" } ,
]
// Chunks is an AsyncGenerator object
const chunks = await engine . chat . completions . create ( {
messages ,
temperature : 1 ,
stream : true , // <-- Enable streaming
stream_options : { include_usage : true } ,
} ) ;
let reply = "" ;
for await ( const chunk of chunks ) {
reply += chunk . choices [ 0 ] ?. delta . content || "" ;
console . log ( reply ) ;
if ( chunk . usage ) {
console . log ( chunk . usage ) ; // only last chunk has usage
}
}
const fullReply = await engine . getMessage ( ) ;
console . log ( fullReply ) ; يمكنك وضع الحساب الثقيل في البرنامج النصي للعاملين لتحسين أداء التطبيق الخاص بك. للقيام بذلك ، تحتاج إلى:
للتطبيقات التفصيلية لأنواع مختلفة من العمال ، تحقق من الأقسام التالية.
يأتي WebLLM مع دعم API لعامل الويب حتى تتمكن من ربط عملية التوليد في مؤشر ترابط عامل منفصل حتى لا يعطل الحوسبة في مؤشر ترابط العامل واجهة المستخدم.
نقوم بإنشاء معالج في موضوع العمال الذي يتواصل مع الواجهة الأمامية أثناء التعامل مع الطلبات.
// worker.ts
import { WebWorkerMLCEngineHandler } from "@mlc-ai/web-llm" ;
// A handler that resides in the worker thread
const handler = new WebWorkerMLCEngineHandler ( ) ;
self . onmessage = ( msg : MessageEvent ) => {
handler . onmessage ( msg ) ;
} ; في المنطق الرئيسي ، نقوم بإنشاء WebWorkerMLCEngine الذي ينفذ نفس MLCEngineInterface . بقية المنطق لا يزال كما هو.
// main.ts
import { CreateWebWorkerMLCEngine } from "@mlc-ai/web-llm" ;
async function main ( ) {
// Use a WebWorkerMLCEngine instead of MLCEngine here
const engine = await CreateWebWorkerMLCEngine (
new Worker (
new URL ( "./worker.ts" , import . meta . url ) ,
{
type : "module" ,
}
) ,
selectedModel ,
{ initProgressCallback } , // engineConfig
) ;
// everything else remains the same
}يأتي WebLLM مع دعم API لـ ServiceWorker حتى تتمكن من ربط عملية التوليد في عامل خدمة لتجنب إعادة تحميل النموذج في كل زيارة وتحسين تجربة التطبيق دون اتصال.
(ملاحظة ، تتم إدارة دورة حياة عامل الخدمة من قبل المتصفح ويمكن قتلها في أي وقت دون إخطار keepAliveMs . سيحاول ServiceWorkerMLCEngine الحفاظ على موضوع عامل الخدمة على قيد الحياة عن طريق إرسال أحداث نبضات missedHeatbeat بشكل ServiceWorkerMLCEngine لمزيد من التفاصيل.)
نقوم بإنشاء معالج في موضوع العمال الذي يتواصل مع الواجهة الأمامية أثناء التعامل مع الطلبات.
// sw.ts
import { ServiceWorkerMLCEngineHandler } from "@mlc-ai/web-llm" ;
let handler : ServiceWorkerMLCEngineHandler ;
self . addEventListener ( "activate" , function ( event ) {
handler = new ServiceWorkerMLCEngineHandler ( ) ;
console . log ( "Service Worker is ready" ) ;
} ) ; ثم في المنطق الرئيسي ، نقوم بتسجيل عامل الخدمة وننشئ المحرك باستخدام وظيفة CreateServiceWorkerMLCEngine . بقية المنطق لا يزال كما هو.
// main.ts
import { MLCEngineInterface , CreateServiceWorkerMLCEngine } from "@mlc-ai/web-llm" ;
if ( "serviceWorker" in navigator ) {
navigator . serviceWorker . register (
new URL ( "sw.ts" , import . meta . url ) , // worker script
{ type : "module" } ,
) ;
}
const engine : MLCEngineInterface =
await CreateServiceWorkerMLCEngine (
selectedModel ,
{ initProgressCallback } , // engineConfig
) ;يمكنك العثور على مثال كامل على كيفية تشغيل WebLLM في عامل الخدمة في أمثلة/زميل في الخدمة.
يمكنك أيضًا العثور على أمثلة لبناء تمديد الكروم مع WebLLM في أمثلة/تمديد الكروم والأمثلة/عامل خدمة الكروم-WebGPU-Service-Service. هذا الأخير يستفيد من عامل الخدمة ، وبالتالي فإن التمديد ثابت في الخلفية. بالإضافة إلى ذلك ، يمكنك استكشاف مشروع كامل آخر لتمديد Chrome ، Assistant WebLLM ، والذي يعزز WebLLM هنا.
تم تصميم WebLLM ليكون متوافقًا تمامًا مع API Openai. وبالتالي ، إلى جانب بناء chatbot بسيط ، يمكنك أيضًا الحصول على الوظائف التالية مع WebLLM:
seed الحقول.tools الحقول و tool_choice (بدعم أولي) ؛ أو استدعاء الوظيفة اليدوية بدون tools أو tool_choice (يحافظ على المرونة). يعمل WebLLM كمشروع مصاحب لـ MLC LLM ويدعم نماذج مخصصة بتنسيق MLC. إنه يعيد استخدام قطعة أثرية النموذج وتبني تدفق MLC LLM. لتجميع واستخدام النماذج الخاصة بك باستخدام WebLLM ، يرجى مراجعة مستند MLC LLM حول كيفية تجميع ونشر أوزان ومكتبات جديدة إلى WebLLM.
هنا ، نذهب إلى الفكرة عالية المستوى. هناك عنصرين من حزمة WebLLM التي تمكن نماذج جديدة ومتغيرات الوزن.
model : يحتوي على عنوان URL لنمذجة القطع الأثرية ، مثل الأوزان والبيانات الوصفية.model_lib : عنوان URL لمكتبة تجميع الويب (IE WASM File) الذي يحتوي على التنفيذيين لتسريع حسابات النموذج.كلاهما قابل للتخصيص في webllm.
import { CreateMLCEngine } from "@mlc-ai/web-llm" ;
async main ( ) {
const appConfig = {
"model_list" : [
{
"model" : "/url/to/my/llama" ,
"model_id" : "MyLlama-3b-v1-q4f32_0" ,
"model_lib" : "/url/to/myllama3b.wasm" ,
}
] ,
} ;
// override default
const chatOpts = {
"repetition_penalty" : 1.01
} ;
// load a prebuilt model
// with a chat option override and app config
// under the hood, it will load the model from myLlamaUrl
// and cache it in the browser cache
// The chat will also load the model library from "/url/to/myllama3b.wasm",
// assuming that it is compatible to the model in myLlamaUrl.
const engine = await CreateMLCEngine (
"MyLlama-3b-v1-q4f32_0" ,
{ appConfig } , // engineConfig
chatOpts ,
) ;
} في كثير من الحالات ، نريد فقط توفير متغير وزن النموذج ، ولكن ليس بالضرورة نموذجًا جديدًا (على سبيل المثال ، يمكن لـ NeuralHermes-Mistral إعادة استخدام مكتبة نموذج Mistral ). للحصول على أمثلة حول كيفية مشاركة مكتبة النموذج بواسطة متغيرات نموذجية مختلفة ، راجع webllm.prebuiltAppConfig .
ملاحظة: لا تحتاج إلى البناء من المصدر إلا إذا كنت ترغب في تعديل حزمة WebLLM. لاستخدام NPM ، ما عليك سوى اتباع البدء أو أي من الأمثلة بدلاً من ذلك.
للبناء من المصدر ، ببساطة تشغيل:
npm install
npm run build بعد ذلك ، لاختبار تأثيرات تغيير الكود الخاص بك في مثال ، examples/get-started/package.json ، التغيير من "@mlc-ai/web-llm": "^0.2.77" إلى "@mlc-ai/web-llm": ../..
ثم قم بالتشغيل:
cd examples/get-started
npm install
npm start لاحظ أنه في بعض الأحيان تحتاج إلى التبديل بين file:../.. و ../.. لإثارة NPM للتعرف على التغييرات الجديدة. في أسوأ الحالات ، يمكنك الركض:
cd examples/get-started
rm -rf node_modules dist package-lock.json .parcel-cache
npm install
npm startيعتمد وقت تشغيل WebLLM إلى حد كبير على TVMJS: https://github.com/apache/tvm/tree/main/web
على الرغم من أنها متوفرة أيضًا كحزمة NPM: https://www.npmjs.com/package/@mlc-ai/web-runtime ، يمكنك إنشاءها من المصدر إذا لزم الأمر باتباع الخطوات أدناه.
تثبيت emscripten. إنه برنامج التحويل البرمجي المستند إلى LLVM الذي يجمع رمز المصدر C/C ++ إلى Webassembly.
emsdk_env.sh بواسطة source path/to/emsdk_env.sh ، بحيث يمكن الوصول إلى emcc من المسار وأعمال emcc . يمكننا التحقق من التثبيت الناجح من خلال تجربة محطة emcc .
ملاحظة: وجدنا مؤخرًا أن استخدام أحدث إصدار emcc قد يواجه مشكلات أثناء وقت التشغيل. استخدم ./emsdk install 3.1.56 بدلاً من ./emsdk install latest قد يبدو الخطأ مثل
Init error, LinkError: WebAssembly.instantiate(): Import #6 module="wasi_snapshot_preview1"
function="proc_exit": function import requires a callable
in ./package.json ، التغيير من "@mlc-ai/web-runtime": "0.18.0-dev2", إلى "@mlc-ai/web-runtime": "file:./tvm_home/web", .
إعداد البيئة اللازمة
قم بإعداد جميع التبعيات اللازمة لبناء الويب:
./scripts/prep_deps.sh في هذه الخطوة ، إذا لم يتم تعريف $TVM_SOURCE_DIR في البيئة ، فسنقوم بتنفيذ السطر التالي لبناء تبعية tvmjs :
git clone https://github.com/mlc-ai/relax 3rdparty/tvm-unity --recursive هذا استنساخ الرأس الحالي من mlc-ai/relax . ومع ذلك ، قد لا يكون دائمًا الفرع الصحيح أو الالتزام بالاستنساخ. لإنشاء إصدار محدد لـ NPM من Source ، راجع الإصدار Prum Pr ، والذي ينص على أي فرع (أي mlc-ai/relax أو apache/tvm ) والذي يرتكب إصدار WebLLM الحالي يعتمد على. على سبيل المثال ، تم تصميم الإصدار 0.2.52 ، وفقًا لإصداره Bump Pr #521 ، عن طريق التحقق من الالتزام التالي https://github.com/apache/tvm/commit/e64768475353c80e054719AC47BC2091C888418B6 في apache/tvm mlc-ai/relax
الى جانب ذلك ، --recursive ضروري ومهم. خلاف ذلك ، قد تواجه أخطاء مثل fatal error: 'dlpack/dlpack.h' file not found .
بناء حزمة webllm
npm run buildالتحقق من صحة بعض الحزم الفرعية
يمكنك بعد ذلك الذهاب إلى المجلدات الفرعية في أمثلة للتحقق من صحة بعض الحزم الفرعية. نستخدم Parcelv2 لتجميع. على الرغم من أن الطرود ليست جيدة جدًا في تتبع دليل الدليل الوالد في بعض الأحيان. عندما تقوم بإجراء تغيير في حزمة WebLLM ، حاول تحرير package.json من المجلد الفرعي وحفظه ، مما سيؤدي إلى إعادة البناء.
بدأ هذا المشروع من قبل أعضاء من CMU Catalyst و UW Sampl و SJTU و Octoml ومجتمع MLC. نود مواصلة تطوير ودعم مجتمع ML مفتوح المصدر.
هذا المشروع ممكن فقط بفضل النظم الإيكولوجية للمصادر المفتوحة للمصادر التي نقف عليها. نريد أن نشكر مجتمع Apache TVM ومطورين لجهد Unity TVM. جعل أعضاء مجتمع ML مفتوح المصدر هذه النماذج متاحة للجمهور. Pytorch و Ungging Face Communities تجعل هذه النماذج متاحة. نود أن نشكر الفرق وراء Vicuna و Sentencepiece و Llama و Alpaca. نود أيضًا أن نشكر مجتمعات Webassembly و EmScripten و WebGPU. أخيرًا ، بفضل مطوري Dawn و WebGPU.
إذا وجدت أن هذا المشروع مفيد ، فيرجى الاستشهاد:
@misc{ruan2024webllmhighperformanceinbrowserllm,
title={WebLLM: A High-Performance In-Browser LLM Inference Engine},
author={Charlie F. Ruan and Yucheng Qin and Xun Zhou and Ruihang Lai and Hongyi Jin and Yixin Dong and Bohan Hou and Meng-Shiun Yu and Yiyan Zhai and Sudeep Agarwal and Hangrui Cao and Siyuan Feng and Tianqi Chen},
year={2024},
eprint={2412.15803},
archivePrefix={arXiv},
primaryClass={cs.LG},
url={https://arxiv.org/abs/2412.15803},
}
⬆ العودة إلى الأعلى ⬆
