web llm
v0.2.0
고성능 브라우저 LLM 추론 엔진.
문서 | 블로그 포스트 | 종이 | 예
Webllm은 하드웨어 가속이있는 하드웨어 가속이있는 웹 브라우저에 언어 모델 추론을 직접 언어 모델 추론을 제공하는 고성능 브라우저 내 LLM 추론 엔진입니다. 모든 것이 서버 지원이없는 브라우저 내부에서 실행되며 WebGPU로 가속됩니다.
Webllm은 OpenAI API와 완전히 호환됩니다. 즉, 스트리밍, JSON- 모드, 기능 부호 (WIP) 등을 포함한 기능과 함께 오픈 소스 모델 에서 동일한 OpenAI API를 로컬로 사용할 수 있습니다.
GPU 가속을 즐기면서 모든 사람을위한 AI 비서를 구축하고 프라이버시를 가능하게하는 많은 재미있는 기회를 제공 할 수 있습니다.
WebLlm을 기본 NPM 패키지로 사용하고 아래 예제에 따라 자신의 웹 응용 프로그램을 구축 할 수 있습니다. 이 프로젝트는 MLC LLM의 동반자 프로젝트로 하드웨어 환경에 걸쳐 LLM을 보편적으로 배포 할 수 있습니다.
Webllm 채팅을 확인하여 시도해보십시오!
브라우저 내 추론 : WebLLM은 하드웨어 가속을 위해 WebGPU를 활용하는 고성능 브라우저 언어 모델 추론 엔진으로 서버 측 처리없이 웹 브라우저 내에서 직접 강력한 LLM 작업을 가능하게합니다.
전체 OpenAI API 호환성 : 스트리밍, JSON 모드, 로이트 레벨 컨트롤, 파종 등과 같은 기능과 함께 OpenAI API를 사용하여 앱을 WebLlm과 원활하게 통합합니다.
구조화 된 JSON 생성 : WEBLLM은 최적의 성능을 위해 모델 라이브러리의 웹 어셈블리 부분에 구현 된 최첨단 JSON 모드 구조 생성을 지원합니다. Huggingface에서 Webllm JSON Playground를 점검하여 사용자 정의 JSON 스키마로 JSON 출력을 생성하십시오.
광범위한 모델 지원 : Webllm은 Llama 3, Phi 3, Gemma, Mistral, Qwen (通义千问) 등을 포함한 다양한 모델을 기본적으로 지원하여 다양한 AI 작업에 대한 다용도를 제공합니다. 완전한 지원 모델 목록의 경우 MLC 모델을 확인하십시오.
사용자 정의 모델 통합 : MLC 형식으로 사용자 정의 모델을 쉽게 통합하고 배포하여 웹 사이트를 특정 요구 및 시나리오에 조정하여 모델 배포의 유연성을 향상시킬 수 있습니다.
플러그 앤 플레이 통합 : NPM 및 YARN과 같은 패키지 관리자를 사용하여 또는 CDN을 통해 직접 WeBLLM을 프로젝트에 쉽게 통합하여 포괄적 인 예제 및 UI 구성 요소와 연결하기위한 모듈 식 디자인이 있습니다.
스트리밍 및 실시간 상호 작용 : 스트리밍 채팅 완성을 지원하여 챗봇 및 가상 어시스턴트와 같은 대화식 응용 프로그램을 향상시키는 실시간 출력 생성을 허용합니다.
웹 작업자 및 서비스 작업자 지원 : 작업자 스레드 또는 서비스 작업자를 분리하기 위해 계산을 오프로드하여 UI 성능을 최적화하고 모델 수명주기를 효율적으로 관리합니다.
Chrome Extension Support : WebLLM을 사용하여 사용자 정의 Chrome 확장을 통해 웹 브라우저의 기능을 확장하고 기본 및 고급 확장을 모두 구축 할 수 있습니다.
MLC 모델에서 사용 가능한 모델의 전체 목록을 확인하십시오. WebLlm은 이러한 사용 가능한 모델의 하위 집합을 지원하며 prebuiltAppConfig.model_list 에서 목록에 액세스 할 수 있습니다.
현재 지원되는 모델의 주요 제품군은 다음과 같습니다.
더 많은 모델이 필요한 경우 문제를 열거나 웹을 컴파일하고 사용하는 방법에 대한 사용자 정의 모델을 확인하여 새 모델을 요청하십시오.
WebLlm을 사용하여 대형 언어 모델을 응용 프로그램에 통합 하고이 간단한 챗봇 예제를 통해 채팅 완료를 생성하는 방법을 알아보십시오.
더 크고 복잡한 프로젝트의 고급 예를 보려면 Webllm 채팅을 확인하십시오.
다른 사용 사례에 대한 더 많은 예는 예제 폴더에서 제공됩니다.
Webllm은 브라우저의 챗봇에 액세스하기 위해 미니멀리스트 및 모듈 식 인터페이스를 제공합니다. 패키지는 모든 UI 구성 요소에 연결하는 모듈 식 방식으로 설계되었습니다.
# 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 인터페이스를 통해 호출됩니다. CreateMLCEngine() 공장 기능을 호출하여 MLCEngine 인스턴스를 생성하고 모델을로드 할 수 있습니다.
(로드 모델을 다운로드해야하며 이전에 캐싱하지 않고 첫 번째 실행에 상당한 시간이 걸릴 수 있습니다.이 비동기 호출을 올바르게 처리해야합니다.)
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 ) ; 엔진을 성공적으로 초기화 한 후 engine.chat.completions 인터페이스를 통해 OpenAi 스타일 채팅 API를 사용하여 채팅 완료를 호출 할 수 있습니다. 매개 변수 및 그 설명의 전체 목록은 아래 섹션을 확인하고 OpenAI API 참조를 확인하십시오.
(참고 : model 매개 변수는 지원되지 않으며 여기에서 무시됩니다. 대신 위의 MlCengine 작성에 표시된대로 CreateMLCEngine(model) 또는 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은 또한 스트리밍 채팅 완성을 지원합니다. 이를 사용하려면 간단히 stream: true engine.chat.completions.create Call에 충실하십시오.
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 지원이 제공되므로 세대 프로세스를 별도의 작업자 스레드에 연결하여 작업자 스레드의 컴퓨팅이 UI를 방해하지 않도록 할 수 있습니다.
우리는 요청을 처리하는 동안 프론트 엔드와 통신하는 작업자 스레드에서 핸들러를 만듭니다.
// 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 ) ;
} ; 주요 논리에서는 동일한 MLCEngineInterface 를 구현하는 WebWorkerMLCEngine 을 만듭니다. 나머지 논리는 동일하게 유지됩니다.
// 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은 ServiceWorker를위한 API 지원과 함께 제공되므로 모든 페이지 방문에서 모델을 다시로드하지 않고 응용 프로그램의 오프라인 경험을 최적화하지 않도록 서비스 작업자에 생성 프로세스를 연결할 수 있습니다.
(참고, Service Worker의 수명주기는 브라우저에서 관리하며 WebApp에 알리지 않고 언제든지 종료 될 수 있습니다. ServiceWorkerMLCEngine 주기적으로 하트 비트 이벤트를 보내면서 서비스 작업자 스레드를 생생하게 유지하려고하지만 응용 프로그램은 적절한 오류 처리가 포함되어야합니다. 자세한 내용은 ServiceWorkerMLCEngine 에서 keepAliveMs 및 medypalivems 및 missedHeatbeat 포함되어야합니다.)
우리는 요청을 처리하는 동안 프론트 엔드와 통신하는 작업자 스레드에서 핸들러를 만듭니다.
// 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
) ;예제/서비스 직원에서 서비스 작업자에서 웹을 실행하는 방법에 대한 완전한 예를 찾을 수 있습니다.
또한 예제/크롬-확장 및 예제/크롬-확장 -WeBGPU 서비스 직원에서 WebLlm을 사용하여 Chrome 확장을 구축하는 예를 찾을 수 있습니다. 후자는 서비스 작업자를 활용하므로 확장은 백그라운드에서 지속됩니다. 또한 Chrome Extension의 또 다른 전체 프로젝트 인 Webllm Assistant를 탐색 할 수 있습니다.
Webllm은 OpenAI API와 완전히 호환되도록 설계되었습니다. 따라서 간단한 챗봇을 구축하는 것 외에도 Webllm과 다음과 같은 기능을 수행 할 수도 있습니다.
seed 로 재현 가능한 출력을 보장합니다.tools 및 tool_choice 와 함께 함수 호출 (예비 지원 포함); 또는 tools 나 tool_choice 없는 수동 기능 호출 (유연성을 가장 많이 유지). Webllm은 MLC LLM의 동반자 프로젝트로 일하며 MLC 형식의 사용자 정의 모델을 지원합니다. 모델 아티팩트를 재사용하고 MLC LLM의 흐름을 구축합니다. WebLLM과 함께 자신의 모델을 컴파일하고 사용하려면 MLC LLM 문서를 확인하여 새로운 모델 가중치 및 라이브러리를 WebLLM에 배포하는 방법에 대한 정보를 확인하십시오.
여기서 우리는 높은 수준의 아이디어를 살펴 봅니다. 새로운 모델과 무게 변형을 가능하게하는 WebLlm 패키지에는 두 가지 요소가 있습니다.
model : 무게 및 메타 데이터와 같은 아티팩트를 모델링하기위한 URL이 포함되어 있습니다.model_lib : 모델 계산을 가속화하기 위해 실행 파일을 포함하는 웹 어셈블리 라이브러리 (IE WASM 파일)의 URL.둘 다 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:../.. 간에 전환해야합니다 ../.. 최악의 경우, 당신은 다음을 실행할 수 있습니다.
cd examples/get-started
rm -rf node_modules dist package-lock.json .parcel-cache
npm install
npm startWebllm의 런타임은 크게 tvmjs : https://github.com/apache/tvm/tree/main/web에 따라 다릅니다
https://www.npmjs.com/package/@mlc-ai/web-runtime의 NPM 패키지로도 사용할 수 있지만 아래 단계에 따라 필요한 경우 소스에서 구축 할 수 있습니다.
emscripten을 설치하십시오. C/C ++ 소스 코드를 WebAssembly에 컴파일하는 LLVM 기반 컴파일러입니다.
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
./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 버전을 구축하려면 버전 범프 PR을 참조하십시오. 버전은 어떤 분기 (예 : mlc-ai/relax 또는 apache/tvm )를 말하고 현재 웹 버전이 의존하는 경우를 참조하십시오. 예를 들어, 버전 0.2.52는 버전의 범프 PR #521에 따르면 다음 커밋 https://github.com/apache/tvm/commit/e647684753c80e054719AC47BC2091C88418B6 apache/tvm 의 헤드보다는 mlc-ai/relax 의 헤드를 확인하여 구축되었습니다.
게다가 --recursive 가 필요하고 중요합니다. 그렇지 않으면 fatal error: 'dlpack/dlpack.h' file not found 와 같은 오류가 발생할 수 있습니다.
Webllm 패키지를 구축하십시오
npm run build일부 하위 패키지를 확인하십시오
그런 다음 예제에서 하위 폴더로 이동하여 일부 하위 패키지를 검증 할 수 있습니다. 우리는 번들링에 parcelv2를 사용합니다. 소포는 때때로 상위 디렉토리 변경을 추적하는 데 능숙하지는 않지만. WebLlm 패키지를 변경하면 Subfolder의 package.json 편집하고 저장하여 소포가 재건축됩니다.
이 프로젝트는 CMU Catalyst, UW Sampl, SJTU, Octoml 및 MLC 커뮤니티의 구성원에 의해 시작됩니다. 우리는 오픈 소스 ML 커뮤니티를 계속 개발하고 지원하고 싶습니다.
이 프로젝트는 우리가 서있는 어깨 오픈 소스 생태계 덕분에 가능합니다. 우리는 TVM Unity 노력의 Apache TVM 커뮤니티와 개발자에게 감사하고 싶습니다. 오픈 소스 ML 커뮤니티 회원은 이러한 모델을 공개적으로 제공했습니다. Pytorch와 Hugging Face 커뮤니티는 이러한 모델에 접근 할 수있게합니다. 우리는 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},
}
back 위로 다시 top
