web llm
v0.2.0
Hochleistungs-Inferenzmotor in Browser LLM.
Dokumentation | Blogpost | Papier | Beispiele
Webllm ist eine Hochleistungs-In-Browser-LLM-Inferenz-Engine, die Sprachmodellinferenz direkt auf Webbrowser mit Hardware-Beschleunigung bringt. Alles läuft im Browser ohne Serverunterstützung und wird mit WebGPU beschleunigt.
WebllM ist mit OpenAI -API vollständig kompatibel. Das heißt, Sie können die gleiche OpenAI-API für alle Open-Source-Modelle lokal mit Funktionen wie Streaming, JSON-Modus, Funktionsanhellern (WIP) usw. verwenden.
Wir können viele lustige Möglichkeiten bieten, KI -Assistenten für alle aufzubauen und Privatsphäre zu ermöglichen und gleichzeitig die GPU -Beschleunigung zu genießen.
Sie können Webllm als Basispaket für NPM verwenden und Ihre eigene Webanwendung darüber erstellen, indem Sie den folgenden Beispielen folgen. Dieses Projekt ist ein Begleitprojekt von MLC LLM, das die universelle Bereitstellung von LLM in Hardware -Umgebungen ermöglicht.
Schauen Sie sich den Webllm -Chat an, um es auszuprobieren!
Inferenz in Browser : WebllM ist eine Hochleistungs-Inferenz-Inferenz-Engine in Browser-Sprache, die WebGPU für die Beschleunigung von Hardware nutzt und leistungsstarke LLM-Vorgänge direkt innerhalb von Webbrowsern ohne serverseitige Verarbeitung ermöglicht.
Vollständige OpenAI-API-Kompatibilität : Integrieren Sie Ihre App nahtlos mit WebllM mit OpenAI-API mit Funktionen wie Streaming, JSON-Modus, Logit-Level-Steuerung, Aussaat und vielem mehr.
Structured JSON Generation : Webllm unterstützt die hochmoderne JSON-Modus Structured Generation, die im WebAssembly-Teil der Modellbibliothek für eine optimale Leistung implementiert ist. Überprüfen Sie den Webllm JSON -Spielplatz auf Huggingface, um JSON -Ausgabe mit benutzerdefiniertem JSON -Schema zu generieren.
Umfangreiche Modellunterstützung : Webllm unterstützt nativ eine Reihe von Modellen, darunter Lama 3, Phi 3, Gemma, Mistral, Qwen (通义千问) und viele andere, was es für verschiedene KI -Aufgaben vielseitig macht. Für die vollständige unterstützte Modellliste finden Sie die MLC -Modelle.
Benutzerdefinierte Modellintegration : Integrieren und bereitstellen Sie benutzerdefinierte Modelle einfach in das MLC -Format, sodass Sie WEBLLM an bestimmte Anforderungen und Szenarien anpassen können, wodurch die Flexibilität bei der Modellbereitstellung verbessert wird.
Plug-and-Play-Integration : Integrieren Sie WEBLLM einfach in Ihre Projekte mit Paketmanagern wie NPM und Garn oder direkt über CDN, komplett mit umfassenden Beispielen und einem modularen Design für die Verbindung mit UI-Komponenten.
Streaming- und Echtzeit-Interaktionen : Unterstützt Streaming-Chat-Abschlüsse und ermöglicht die Erzeugung von Echtzeit, die interaktive Anwendungen wie Chatbots und virtuelle Assistenten verbessert.
Support für Webarbeiter und Servicearbeiter : Optimieren Sie die Benutzeroberflächenleistung und verwalten Sie den Lebenszyklus von Modellen effizient, indem Sie Berechnungen in separate Arbeiter -Threads oder Service -Mitarbeiter abladen.
Chrome -Erweiterungsunterstützung : Erweitern Sie die Funktionalität von Webbrowsern durch benutzerdefinierte Chromerweiterungen mit WEBLLM, wobei Beispiele für den Aufbau von grundlegenden und erweiterten Erweiterungen verfügbar sind.
Überprüfen Sie die vollständige Liste der verfügbaren Modelle auf MLC -Modellen. Webllm unterstützt eine Teilmenge dieser verfügbaren Modelle, und auf die Liste kann auf prebuiltAppConfig.model_list zugegriffen werden.
Hier sind die primären Familien von Models, die derzeit unterstützt werden:
Wenn Sie mehr Modelle benötigen, fordern Sie ein neues Modell über das Öffnen eines Problems an oder überprüfen Sie benutzerdefinierte Modelle, um Ihre eigenen Modelle mit WebllM zu kompilieren und zu verwenden.
Erfahren Sie, wie Sie WEBLLM verwenden, um große Sprachmodelle in Ihre Anwendung zu integrieren und über dieses einfache Chatbot -Beispiel zu Chat -Abschlüssen zu generieren:
Überprüfen Sie den Webllm -Chat für ein fortgeschrittenes Beispiel für ein größeres, komplizierteres Projekt.
Weitere Beispiele für verschiedene Anwendungsfälle finden Sie im Beispiel -Ordner.
Webllm bietet eine minimalistische und modulare Schnittstelle, um auf den Chatbot im Browser zuzugreifen. Das Paket ist modular gestaltet, um an eine der UI -Komponenten zu hängen.
# npm
npm install @mlc-ai/web-llm
# yarn
yarn add @mlc-ai/web-llm
# or pnpm
pnpm install @mlc-ai/web-llmImportieren Sie dann das Modul in Ihren Code.
// Import everything
import * as webllm from "@mlc-ai/web-llm" ;
// Or only import what you need
import { CreateMLCEngine } from "@mlc-ai/web-llm" ; Dank jsdelivr.com kann Webllm direkt über URL importiert werden und auf Cloud-Entwicklungsplattformen wie jsfiddle.net, codepen.io und Scribbler aus der Cloud-Entwicklung gearbeitet werden:
import * as webllm from "https://esm.run/@mlc-ai/web-llm" ;Es kann auch dynamisch importiert werden als:
const webllm = await import ( "https://esm.run/@mlc-ai/web-llm" ) ; Die meisten Operationen in Webllm werden über die MLCEngine -Schnittstelle aufgerufen. Sie können eine MLCEngine -Instanz erstellen und das Modell laden, indem Sie die Fabrikfunktion CreateMLCEngine() aufrufen.
(Beachten Sie, dass das Laden von Modellen das Herunterladen erfordert und für den ersten Lauf viel Zeit in Anspruch nehmen kann, ohne zuvor zwischengespeichert zu werden. Sie sollten diesen asynchronen Anruf ordnungsgemäß behandeln.)
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
) ;Unter der Haube macht diese Werksfunktion die folgenden Schritte aus, um zuerst eine Engine -Instanz (synchron) und dann das Modell (asynchron) zu erstellen. Sie können sie auch separat in Ihrer Bewerbung ausführen.
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 ) ; Nach der erfolgreichen Initialisierung der Engine können Sie jetzt die Chat -Abschlüsse mit OpenAI -Chat -APIs über die Schnittstelle engine.chat.completions aufrufen. Für die vollständige Liste der Parameter und deren Beschreibungen finden Sie den Abschnitt unten und die OpenAI -API -Referenz.
(Hinweis: Der model wird hier nicht unterstützt und wird hier ignoriert. Rufen Sie stattdessen CreateMLCEngine(model) oder engine.reload(model) .
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 unterstützt auch die Erzeugung von Streaming -Chat -Abschluss. Um es zu verwenden, übergeben Sie einfach stream: true an den Anruf 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 ) ; Sie können die schwere Berechnung in ein Arbeitskript einfügen, um Ihre Anwendungsleistung zu optimieren. Um dies zu tun, müssen Sie:
Detaillierte Implementierungen verschiedener Arten von Arbeitnehmern finden Sie in den folgenden Abschnitten.
Webllm wird mit API -Unterstützung für Webworker geliefert, damit Sie den Erzeugungsprozess in einen separaten Worker -Thread einbinden können, damit das Computer im Arbeiter -Thread die Benutzeroberfläche nicht stört.
Wir erstellen einen Handler im Arbeiter -Thread, der während des Umgangs mit den Anfragen mit dem Frontend kommuniziert.
// 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 ) ;
} ; In der Hauptlogik erstellen wir ein WebWorkerMLCEngine , das das gleiche MLCEngineInterface implementiert. Der Rest der Logik bleibt gleich.
// 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 wird mit API -Unterstützung für Serviceworker geliefert, damit Sie den Generationsprozess in einen Servicearbeiter einbinden können, um das Modell auf jeder Seite zu vermeiden, auf jeder Seite der Offline -Erfahrung Ihrer Anwendung neu zu laden.
(Beachten Sie, dass der Lebenszyklus des Service Worker vom Browser verwaltet wird und jederzeit getötet werden kann, ohne die WebApp zu benachrichtigen. ServiceWorkerMLCEngine wird versuchen, den Thread für Service -Arbeiter am Leben zu erhalten, indem Sie Heartbeat -Ereignisse regelmäßig senden. Ihre Anwendung sollte jedoch auch ordnungsgemäße Fehlerbehandlung enthalten. Überprüfen Sie keepAliveMs und missedHeatbeat in ServiceWorkerMLCEngine für weitere Details.))))
Wir erstellen einen Handler im Arbeiter -Thread, der während des Umgangs mit den Anfragen mit dem Frontend kommuniziert.
// 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" ) ;
} ) ; In der Hauptlogik registrieren wir den Service Worker und erstellen die Engine mit CreateServiceWorkerMLCEngine -Funktion. Der Rest der Logik bleibt gleich.
// 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
) ;Ein vollständiges Beispiel zum Ausführen von WebllM in Service Worker finden Sie in Beispielen/Service-Arbeiter.
Sie können auch Beispiele für die Erstellung von Chromverlängerung mit Webllm finden, Beispiele/Chrom-Extension und Beispiele/Chrom-Extension-WebGPU-Service-Arbeiter. Letzteres nutzt den Servicearbeiter, sodass die Verlängerung im Hintergrund anhaltend ist. Darüber hinaus können Sie ein weiteres vollständiges Projekt einer Chrome -Erweiterung, dem Webllm -Assistenten, untersuchen, das WebllM hier nutzt.
Webllm ist so konzipiert, dass sie mit OpenAI -API vollständig kompatibel ist. Neben dem Aufbau eines einfachen Chatbot können Sie auch die folgenden Funktionen mit WebllM haben:
seed zu gewährleisten.tools und tool_choice (mit vorläufiger Unterstützung); oder manuelle Funktion ohne tools oder tool_choice (hält die größte Flexibilität). Webllm arbeitet als Begleitprojekt von MLC LLM und unterstützt benutzerdefinierte Modelle im MLC -Format. Es wiederverwendet das Modellartefakt und baut den Fluss von MLC LLM auf. Um Ihre eigenen Modelle mit WebllM zu kompilieren und zu verwenden, lesen Sie bitte das MLC LLM -Dokument zum Kompilieren und Bereitstellen neuer Modellgewichte und Bibliotheken in WebllM.
Hier gehen wir über die hochrangige Idee. Es gibt zwei Elemente des Webllm -Pakets, die neue Modelle und Gewichtsvarianten ermöglichen.
model : Enthält eine URL, um Artefakte wie Gewichte und Meta-Daten zu modellieren.model_lib : Eine URL zur Web -Assembly -Bibliothek (dh die WASM -Datei), die die ausführbaren Daten enthält, um die Modellberechnungen zu beschleunigen.Beide sind im Webllm anpassbar.
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 ,
) ;
} In vielen Fällen möchten wir nur die Modellgewichtsvariante liefern, aber nicht unbedingt ein neues Modell (z. B. NeuralHermes-Mistral kann die Modellbibliothek von Mistral wiederverwenden). Beispiele dafür, wie eine Modellbibliothek von verschiedenen Modellvarianten gemeinsam genutzt werden kann, siehe webllm.prebuiltAppConfig .
Hinweis: Sie müssen nicht aus der Quelle erstellen, es sei denn, Sie möchten das Webllm -Paket ändern. Um das NPM zu verwenden, folgen Sie einfach an, sondern auch eines der Beispiele.
Um aus der Quelle zu bauen, rennen Sie einfach:
npm install
npm run build Um die Auswirkungen Ihrer Codeänderung in einem Beispiel in examples/get-started/package.json zu testen, wechseln Sie von "@mlc-ai/web-llm": "^0.2.77" zu "@mlc-ai/web-llm": ../..
Dann rennen:
cd examples/get-started
npm install
npm start Beachten Sie, dass Sie manchmal zwischen file:../.. und ../.. um NPM auszulösen, um neue Änderungen zu erkennen. Im schlimmsten Fall können Sie rennen:
cd examples/get-started
rm -rf node_modules dist package-lock.json .parcel-cache
npm install
npm startDie Laufzeit von Webllm hängt weitgehend von TVMJS ab: https://github.com/apache/tvm/tree/main/web
Während es auch als NPM-Paket erhältlich ist: https://www.npmjs.com/package/@mlc-ai/web-runtime, können Sie es bei Bedarf aus der Quelle erstellen, indem Sie den folgenden Schritten folgen.
EMSCIPTEN installieren. Es ist ein LLVM-basierter Compiler, der C/C ++-Quellcode für WebAssembly kompiliert.
emsdk_env.sh nach source path/to/emsdk_env.sh , so dass emcc vom Pfad erreichbar ist und der Befehl emcc funktioniert. Wir können die erfolgreiche Installation überprüfen, indem wir emcc -Terminal ausprobieren.
HINWEIS: Wir haben kürzlich festgestellt, dass die neueste emcc -Version während der Laufzeit auf Probleme stoßen kann. Verwendung ./emsdk install 3.1.56 ./emsdk install latest . Der Fehler kann so aussehen wie
Init error, LinkError: WebAssembly.instantiate(): Import #6 module="wasi_snapshot_preview1"
function="proc_exit": function import requires a callable
In ./package.json , wechseln Sie von "@mlc-ai/web-runtime": "0.18.0-dev2", zu "@mlc-ai/web-runtime": "file:./tvm_home/web",
Einrichten der notwendigen Umgebung
Bereiten Sie alle notwendigen Abhängigkeiten für Web Build vor:
./scripts/prep_deps.sh In diesem Schritt werden wir in der Umgebung nicht definiert, wenn $TVM_SOURCE_DIR nicht definiert ist, die folgende Zeile ausführen, um die Abhängigkeit tvmjs zu erstellen:
git clone https://github.com/mlc-ai/relax 3rdparty/tvm-unity --recursive Dies klingt den aktuellen Kopf von mlc-ai/relax . Es kann jedoch nicht immer der richtige Zweig sein oder sich zum Klon verpflichten. Um eine bestimmte NPM-Version aus der Quelle zu erstellen, lesen Sie die Version Bump PR, die angibt, welche Filiale (dh mlc-ai/relax oder apache/tvm ) und die die aktuelle WebllM-Version begehen. Zum Beispiel wird Version 0.2.52 gemäß der Version Bump PR #521 erstellt, indem das folgende Commit https://github.com/apache/tvm/commit/e6476847753c80e054719ac47bc2091c88418b6 in APACHE/TV/TV/TELALTER in APACH/TAND von Mlc88418b6 in apache/tvm an der mlc-ai/relax entsteht.
Außerdem ist --recursive ist notwendig und wichtig. Andernfalls können Sie auf Fehler wie fatal error: 'dlpack/dlpack.h' file not found .
Bauen Sie das Webllm -Paket auf
npm run buildValidieren Sie einige der Unterpakete
Sie können dann in Beispielen zu den Unterordnern gehen, um einige der Unterverpackungen zu validieren. Wir verwenden Parcelv2 zum Bündeln. Obwohl Parzel manchmal nicht sehr gut darin ist, das Elternverzeichnis zu verfolgen. Wenn Sie im Webllm -Paket eine Änderung vornehmen, versuchen Sie, das package.json des Unterordners zu bearbeiten und zu speichern, was das Paket zum Wiederaufbau auslöst.
Dieses Projekt wird von Mitgliedern des CMU Catalyst, UW Sample, SJtu, Octoml und der MLC -Community initiiert. Wir würden uns gerne weiterentwickeln und die Open-Source-ML-Community unterstützen.
Dieses Projekt ist dank der Open-Source-Ökosysteme der Schultern, auf denen wir stehen, nur möglich. Wir möchten der Apache TVM -Community und den Entwicklern der TVM Unity -Bemühungen danken. Die Open-Source ML Community-Mitglieder haben diese Modelle öffentlich verfügbar gemacht. Pytorch und umarmende Gesichtsgemeinschaften machen diese Modelle zugänglich. Wir möchten uns bei den Teams hinter Vicuna, Satzstück, Lama und Alpaka bedanken. Wir möchten uns auch bei den Communities WebAssembly, EmScripten und WebGPU bedanken. Zum Schluss dank Dawn und WebGPU -Entwickler.
Wenn Sie dieses Projekt nützlich finden, zitieren Sie bitte:
@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},
}
⬆ Zurück nach oben ⬆
