web llm
v0.2.0
Mesin Inferensi LLM dalam Performa Tinggi.
Dokumentasi | BlogPost | Kertas | Contoh
Webllm adalah mesin inferensi LLM berkinerja tinggi yang membawa inferensi model bahasa langsung ke browser web dengan akselerasi perangkat keras. Semuanya berjalan di dalam browser tanpa dukungan server dan dipercepat dengan WebGPU.
Webllm sepenuhnya kompatibel dengan OpenAI API. Artinya, Anda dapat menggunakan API OpenAI yang sama pada model open source apa pun secara lokal, dengan fungsi termasuk streaming, mode JSON, pemalsuan fungsi (WIP), dll.
Kami dapat membawa banyak peluang menyenangkan untuk membangun asisten AI untuk semua orang dan memungkinkan privasi sambil menikmati akselerasi GPU.
Anda dapat menggunakan Webllm sebagai paket NPM dasar dan membangun aplikasi web Anda sendiri di atasnya dengan mengikuti contoh di bawah ini. Proyek ini adalah proyek pendamping MLC LLM, yang memungkinkan penyebaran Universal LLM di seluruh lingkungan perangkat keras.
Lihatlah obrolan Webllm untuk mencobanya!
Inferensi in-browser : Webllm adalah mesin inferensi model bahasa dalam-kinerja yang berkinerja tinggi yang memanfaatkan WebGPU untuk akselerasi perangkat keras, memungkinkan operasi LLM yang kuat secara langsung di dalam browser web tanpa pemrosesan sisi server.
Kompatibilitas API OpenAI penuh : Mengintegrasikan aplikasi Anda dengan mulus dengan Webllm menggunakan API OpenAI dengan fungsi seperti streaming, mode JSON, kontrol tingkat logit, penyemaian, dan banyak lagi.
Generasi JSON terstruktur : Webllm mendukung generasi mode JSON yang canggih, diimplementasikan di bagian WebAssembly dari Model Library untuk kinerja optimal. Periksa Webllm JSON Playground di HuggingFace untuk mencoba menghasilkan output JSON dengan skema JSON khusus.
Dukungan Model Luas : Webllm secara asli mendukung berbagai model termasuk Llama 3, Phi 3, Gemma, Mistral, Qwen (通义千问), dan banyak lainnya, menjadikannya serbaguna untuk berbagai tugas AI. Untuk daftar model yang didukung lengkap, periksa model MLC.
Integrasi Model Kustom : Dengan mudah mengintegrasikan dan menggunakan model khusus dalam format MLC, memungkinkan Anda untuk mengadaptasi Webllm dengan kebutuhan dan skenario spesifik, meningkatkan fleksibilitas dalam penyebaran model.
Integrasi plug-and-play : Dengan mudah mengintegrasikan Webllm ke dalam proyek Anda menggunakan manajer paket seperti NPM dan Benang, atau langsung melalui CDN, lengkap dengan contoh komprehensif dan desain modular untuk menghubungkan dengan komponen UI.
Interaksi streaming & real-time : Mendukung streaming penyelesaian obrolan, memungkinkan pembuatan output real-time yang meningkatkan aplikasi interaktif seperti chatbots dan asisten virtual.
Dukungan Pekerja Web & Pekerja Layanan : Mengoptimalkan kinerja UI dan mengelola siklus hidup model secara efisien dengan membongkar perhitungan untuk memisahkan utas pekerja atau pekerja layanan.
Dukungan Ekstensi Chrome : Perpanjang fungsionalitas browser web melalui ekstensi krom khusus menggunakan Webllm, dengan contoh yang tersedia untuk membangun ekstensi dasar dan lanjutan.
Periksa daftar lengkap model yang tersedia pada model MLC. Webllm mendukung subset dari model yang tersedia ini dan daftar dapat diakses di prebuiltAppConfig.model_list .
Berikut adalah keluarga utama model yang saat ini didukung:
Jika Anda membutuhkan lebih banyak model, minta model baru melalui membuka masalah atau periksa model khusus untuk cara mengkompilasi dan menggunakan model Anda sendiri dengan Webllm.
Pelajari cara menggunakan Webllm untuk mengintegrasikan model bahasa besar ke dalam aplikasi Anda dan menghasilkan penyelesaian obrolan melalui contoh chatbot sederhana ini:
Untuk contoh lanjutan dari proyek yang lebih besar dan lebih rumit, periksa obrolan Webllm.
Lebih banyak contoh untuk kasus penggunaan yang berbeda tersedia di folder contoh.
Webllm menawarkan antarmuka minimalis dan modular untuk mengakses chatbot di browser. Paket ini dirancang dengan cara modular untuk menghubungkan ke salah satu komponen UI.
# npm
npm install @mlc-ai/web-llm
# yarn
yarn add @mlc-ai/web-llm
# or pnpm
pnpm install @mlc-ai/web-llmKemudian impor modul di kode Anda.
// Import everything
import * as webllm from "@mlc-ai/web-llm" ;
// Or only import what you need
import { CreateMLCEngine } from "@mlc-ai/web-llm" ; Berkat jsdelivr.com, Webllm dapat diimpor secara langsung melalui URL dan bekerja di luar kotak di platform pengembangan cloud seperti jsfiddle.net, codepen.io, dan Scribbler:
import * as webllm from "https://esm.run/@mlc-ai/web-llm" ;Ini juga dapat diimpor secara dinamis sebagai:
const webllm = await import ( "https://esm.run/@mlc-ai/web-llm" ) ; Sebagian besar operasi di Webllm dipanggil melalui antarmuka MLCEngine . Anda dapat membuat instance MLCEngine dan memuat model dengan memanggil fungsi pabrik CreateMLCEngine() .
(Perhatikan bahwa model pemuatan memerlukan pengunduhan dan dapat memakan waktu yang signifikan untuk menjalankan pertama tanpa caching sebelumnya. Anda harus menangani panggilan asinkron ini dengan benar.)
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
) ;Di bawah kap, fungsi pabrik ini melakukan langkah -langkah berikut untuk pertama kali membuat instance engine (sinkron) dan kemudian memuat model (asinkron). Anda juga dapat melakukannya secara terpisah dalam aplikasi Anda.
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 ) ; Setelah berhasil menginisialisasi mesin, Anda sekarang dapat memohon penyelesaian obrolan menggunakan OpenAI Style Chat API melalui antarmuka engine.chat.completions . Untuk daftar lengkap parameter dan deskripsinya, periksa bagian di bawah ini dan referensi API OpenAI.
(Catatan: Parameter model tidak didukung dan akan diabaikan di sini. Sebaliknya, call CreateMLCEngine(model) atau 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 juga mendukung streaming penghasilan penyelesaian obrolan. Untuk menggunakannya, cukup lewati stream: true dengan panggilan 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 ) ; Anda dapat memasukkan perhitungan berat dalam skrip pekerja untuk mengoptimalkan kinerja aplikasi Anda. Untuk melakukannya, Anda perlu:
Untuk implementasi terperinci dari berbagai jenis pekerja, periksa bagian berikut.
Webllm dilengkapi dengan dukungan API untuk WebWorker sehingga Anda dapat menghubungkan proses pembuatan ke utas pekerja yang terpisah sehingga komputasi di utas pekerja tidak akan mengganggu UI.
Kami membuat penangan di utas pekerja yang berkomunikasi dengan frontend sambil menangani permintaan.
// 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 ) ;
} ; Dalam logika utama, kami membuat WebWorkerMLCEngine yang mengimplementasikan MLCEngineInterface yang sama. Sisa logika tetap sama.
// 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 dilengkapi dengan dukungan API untuk Peworker sehingga Anda dapat menghubungkan proses pembuatan ke pekerja layanan untuk menghindari memuat ulang model di setiap kunjungan halaman dan mengoptimalkan pengalaman offline aplikasi Anda.
(Catatan, siklus hidup pekerja layanan dikelola oleh browser dan dapat dibunuh kapan saja tanpa memberi tahu Webapp. ServiceWorkerMLCEngine akan mencoba menjaga agar utas pekerja layanan tetap hidup dengan mengirimkan detak jantung secara berkala, tetapi keepAliveMs ServiceWorkerMLCEngine juga missedHeatbeat memiliki detail yang tepat.
Kami membuat penangan di utas pekerja yang berkomunikasi dengan frontend sambil menangani permintaan.
// 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" ) ;
} ) ; Kemudian dalam logika utama, kami mendaftarkan pekerja layanan dan membuat mesin menggunakan Fungsi CreateServiceWorkerMLCEngine . Sisa logika tetap sama.
// 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
) ;Anda dapat menemukan contoh lengkap tentang cara menjalankan Webllm di pekerja layanan dalam contoh/pekerja layanan.
Anda juga dapat menemukan contoh membangun ekstensi chrome dengan Webllm dalam contoh/chrome-ekstensi dan contoh/chrome-ekstensi-webgpu-layanan-pekerja. Yang terakhir memanfaatkan pekerja layanan, sehingga ekstensi gigih di latar belakang. Selain itu, Anda dapat menjelajahi proyek lengkap lain dari ekstensi krom, asisten webllm, yang memanfaatkan Webllm di sini.
Webllm dirancang untuk sepenuhnya kompatibel dengan OpenAI API. Dengan demikian, selain membangun chatbot sederhana, Anda juga dapat memiliki fungsionalitas berikut dengan Webllm:
seed ladang.tools Bidang dan tool_choice (dengan dukungan pendahuluan); atau panggilan fungsi manual tanpa tools atau tool_choice (menjaga fleksibilitas terbanyak). Webllm berfungsi sebagai proyek pendamping MLC LLM dan mendukung model khusus dalam format MLC. Ini menggunakan kembali model artefak dan membangun aliran MLC LLM. Untuk mengkompilasi dan menggunakan model Anda sendiri dengan Webllm, silakan periksa dokumen MLC LLM tentang cara mengkompilasi dan menggunakan bobot dan pustaka model baru ke Webllm.
Di sini, kami membahas ide tingkat tinggi. Ada dua elemen paket Webllm yang memungkinkan model baru dan varian berat.
model : Berisi URL untuk model artefak, seperti bobot dan meta-data.model_lib : URL ke perpustakaan perakitan web (file wasm) yang berisi executable untuk mempercepat perhitungan model.Keduanya dapat disesuaikan di 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 ,
) ;
} Dalam banyak kasus, kami hanya ingin memasok varian berat model, tetapi tidak harus model baru (misalnya NeuralHermes-Mistral dapat menggunakan kembali perpustakaan model Mistral ). Untuk contoh bagaimana perpustakaan model dapat dibagikan oleh varian model yang berbeda, lihat webllm.prebuiltAppConfig .
Catatan: Anda tidak perlu membangun dari sumber kecuali Anda ingin memodifikasi paket Webllm. Untuk menggunakan NPM, cukup ikuti Mulai atau contoh apa pun.
Untuk membangun dari sumber, cukup jalankan:
npm install
npm run build Kemudian, untuk menguji efek perubahan kode Anda dalam contoh, di dalam examples/get-started/package.json , ubah dari "@mlc-ai/web-llm": "^0.2.77" menjadi "@mlc-ai/web-llm": ../..
Kemudian jalankan:
cd examples/get-started
npm install
npm start Perhatikan bahwa kadang -kadang Anda perlu beralih di antara file:../.. dan ../.. untuk memicu NPM untuk mengenali perubahan baru. Dalam kasus terburuk, Anda dapat menjalankan:
cd examples/get-started
rm -rf node_modules dist package-lock.json .parcel-cache
npm install
npm startRuntime Webllm sebagian besar tergantung pada TVMJS: https://github.com/apache/tvm/tree/main/web
Meskipun juga tersedia sebagai paket NPM: https://www.npmjs.com/package/@mlc-ai/web-runtime, Anda dapat membangunnya dari sumber jika diperlukan dengan mengikuti langkah-langkah di bawah ini.
Instal Emscripten. Ini adalah kompiler berbasis LLVM yang mengkompilasi kode sumber C/C ++ ke WebAssembly.
emsdk_env.sh dengan source path/to/emsdk_env.sh , sehingga emcc dapat dijangkau dari jalur dan perintah emcc bekerja. Kami dapat memverifikasi instalasi yang berhasil dengan mencoba terminal emcc .
Catatan: Kami baru -baru ini menemukan bahwa menggunakan versi emcc terbaru dapat mengalami masalah selama runtime. Gunakan ./emsdk install 3.1.56 bukan ./emsdk install latest untuk sekarang sebagai solusi. Kesalahannya mungkin terlihat seperti
Init error, LinkError: WebAssembly.instantiate(): Import #6 module="wasi_snapshot_preview1"
function="proc_exit": function import requires a callable
Dalam ./package.json , ubah dari "@mlc-ai/web-runtime": "0.18.0-dev2", menjadi "@mlc-ai/web-runtime": "file:./tvm_home/web", .
Mengatur lingkungan yang diperlukan
Siapkan semua dependensi yang diperlukan untuk pembangunan web:
./scripts/prep_deps.sh Pada langkah ini, jika $TVM_SOURCE_DIR tidak didefinisikan di lingkungan, kami akan menjalankan baris berikut untuk membangun ketergantungan tvmjs :
git clone https://github.com/mlc-ai/relax 3rdparty/tvm-unity --recursive Ini mengkloning kepala mlc-ai/relax saat ini. Namun, itu mungkin tidak selalu menjadi cabang yang benar atau berkomitmen untuk mengkloning. Untuk membangun versi NPM spesifik dari Sumber, lihat versi Bump PR, yang menyatakan cabang mana (yaitu mlc-ai/relax atau apache/tvm ) dan yang melakukan versi Webllm saat ini tergantung pada. Misalnya, Versi 0.2.52, menurut versinya Bump pr #521, dibangun dengan memeriksa komit berikut https://github.com/apache/tvm/commit/e6476847753c80e0e054719ac47bc2091c8888418b6 di apache/tvm mlc-ai/relax ,
Selain itu, --recursive diperlukan dan penting. Kalau tidak, Anda dapat menemukan kesalahan seperti fatal error: 'dlpack/dlpack.h' file not found .
Bangun Paket Webllm
npm run buildMemvalidasi beberapa sub-paket
Anda kemudian dapat pergi ke subfolder dalam contoh untuk memvalidasi beberapa sub-paket. Kami menggunakan parcelv2 untuk bundling. Meskipun Parcel terkadang tidak terlalu baik dalam melacak perubahan direktori induk. Saat Anda membuat perubahan dalam paket Webllm, cobalah untuk mengedit package.json dari subfolder dan simpan, yang akan memicu parsel untuk membangun kembali.
Proyek ini diprakarsai oleh anggota dari CMU Catalyst, UW Sampl, Sjtu, Octoml, dan komunitas MLC. Kami ingin terus mengembangkan dan mendukung komunitas ML open-source.
Proyek ini hanya dimungkinkan berkat ekosistem open-source yang kita berdiri. Kami ingin mengucapkan terima kasih kepada komunitas Apache TVM dan pengembang upaya TVM Unity. Anggota komunitas ML open-source membuat model-model ini tersedia untuk umum. Pytorch dan memeluk komunitas wajah membuat model ini dapat diakses. Kami ingin mengucapkan terima kasih kepada tim di belakang Vicuna, kalimat, Llama, dan Alpaca. Kami juga ingin mengucapkan terima kasih kepada komunitas WebAssembly, Emscripten, dan WebGPU. Akhirnya, terima kasih kepada Dawn dan pengembang WebGPU.
Jika Anda menemukan proyek ini bermanfaat, silakan kutip:
@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},
}
⬆ kembali ke atas ⬆
