[Refactor] Rename Engine to MLCEngine (#408)

We rename all `Engine` to `MLCEngine` to:
1. Match naming scheme in https://github.com/mlc-ai/mlc-llm
2. Better demonstrate the semantics of an `Engine`, especially when
users do wildcard importing

To accommodate this breaking change, control-F `Engine` (with same
capitalization) and replace with `MLCEngine` should suffice

README.md

@@ -38,7 +38,7 @@ async function main() {
     label.innerText = report.text;
   };
   const selectedModel = "Llama-3-8B-Instruct-q4f32_1";
-  const engine: webllm.EngineInterface = await webllm.CreateEngine(
+  const engine: webllm.MLCEngineInterface = await webllm.CreateMLCEngine(
     selectedModel,
     /*engineConfig=*/{ initProgressCallback: initProgressCallback }
   );
@@ -53,10 +53,10 @@ async function main() {
 main();
 ```
 
-Note that if you need to separate the instantiation of `webllm.Engine` from loading a model, you could substitute
+Note that if you need to separate the instantiation of `webllm.MLCEngine` from loading a model, you could substitute
 
 ```typescript
-const engine: webllm.EngineInterface = await webllm.CreateEngine(
+const engine: webllm.MLCEngineInterface = await webllm.CreateMLCEngine(
   selectedModel,
   /*engineConfig=*/{ initProgressCallback: initProgressCallback }
 );
@@ -65,7 +65,7 @@ const engine: webllm.EngineInterface = await webllm.CreateEngine(
 with the equivalent
 
 ```typescript
-const engine: webllm.EngineInterface = new webllm.Engine();
+const engine: webllm.MLCEngineInterface = new webllm.MLCEngine();
 engine.setInitProgressCallback(initProgressCallback);
 await engine.reload(selectedModel, chatConfig, appConfig);
 ```
@@ -81,7 +81,7 @@ async function main() {
     console.log(report.text);
   };
   const selectedModel = "TinyLlama-1.1B-Chat-v0.4-q4f16_1-1k";
-  const engine = await webllm.CreateEngine(
+  const engine = await webllm.CreateMLCEngine(
     selectedModel,
     {initProgressCallback: initProgressCallback}
   );
@@ -105,31 +105,31 @@ WebLLM comes with API support for WebWorker so you can hook
 the generation process into a separate worker thread so that
 the compute in the webworker won't disrupt the UI.
 
-We first create a worker script that created a Engine and
+We first create a worker script that created a MLCEngine and
 hook it up to a handler that handles requests.
 
 ```typescript
 // worker.ts
-import { EngineWorkerHandler, Engine } from "@mlc-ai/web-llm";
+import { MLCEngineWorkerHandler, MLCEngine } from "@mlc-ai/web-llm";
 
-// Hookup an Engine to a worker handler
-const engine = new Engine();
-const handler = new EngineWorkerHandler(engine);
+// Hookup an MLCEngine to a worker handler
+const engine = new MLCEngine();
+const handler = new MLCEngineWorkerHandler(engine);
 self.onmessage = (msg: MessageEvent) => {
   handler.onmessage(msg);
 };
 ```
 
-Then in the main logic, we create a `WebWorkerEngine` that
-implements the same `EngineInterface`. The rest of the logic remains the same.
+Then in the main logic, we create a `WebWorkerMLCEngine` that
+implements the same `MLCEngineInterface`. The rest of the logic remains the same.
 
 ```typescript
 // main.ts
 import * as webllm from "@mlc-ai/web-llm";
 
 async function main() {
-  // Use a WebWorkerEngine instead of Engine here
-  const engine: webllm.EngineInterface = await webllm.CreateWebWorkerEngine(
+  // Use a WebWorkerMLCEngine instead of MLCEngine here
+  const engine: webllm.MLCEngineInterface = await webllm.CreateWebWorkerMLCEngine(
     /*worker=*/new Worker(
       new URL('./worker.ts', import.meta.url),
       { type: 'module' }
@@ -147,29 +147,29 @@ WebLLM comes with API support for ServiceWorker so you can hook the generation p
 into a service worker to avoid reloading the model in every page visit and optimize 
 your application's offline experience.
 
-We first create a service worker script that created a Engine and hook it up to a handler
+We first create a service worker script that created a MLCEngine and hook it up to a handler
 that handles requests when the service worker is ready.
 
 ```typescript
 // sw.ts
 import {
-  ServiceWorkerEngineHandler,
-  EngineInterface,
-  Engine,
+  ServiceWorkerMLCEngineHandler,
+  MLCEngineInterface,
+  MLCEngine,
 } from "@mlc-ai/web-llm";
 
-const engine: EngineInterface = new Engine();
-let handler: ServiceWorkerEngineHandler;
+const engine: MLCEngineInterface = new MLCEngine();
+let handler: ServiceWorkerMLCEngineHandler;
 
 self.addEventListener("activate", function (event) {
-  handler = new ServiceWorkerEngineHandler(engine);
+  handler = new ServiceWorkerMLCEngineHandler(engine);
   console.log("Service Worker is ready")
 });
 
 ```
 
 Then in the main logic, we register the service worker and then create the engine using
-`CreateServiceWorkerEngine` function. The rest of the logic remains the same.
+`CreateServiceWorkerMLCEngine` function. The rest of the logic remains the same.
 
 ```typescript
 // main.ts
@@ -180,8 +180,8 @@ if ("serviceWorker" in navigator) {
   );
 }
 
-const engine: webllm.EngineInterface =
-  await webllm.CreateServiceWorkerEngine(
+const engine: webllm.MLCEngineInterface =
+  await webllm.CreateServiceWorkerMLCEngine(
     /*modelId=*/selectedModel,
     /*engineConfig=*/{ initProgressCallback: initProgressCallback }
   );
@@ -208,7 +208,7 @@ WebLLM is designed to be fully compatible with [OpenAI API](https://platform.ope
 ## Model Support
 
 We export all supported models in `webllm.prebuiltAppConfig`, where you can see a list of models
-that you can simply call `const engine: webllm.EngineInterface = await webllm.CreateEngine(anyModel)` with.
+that you can simply call `const engine: webllm.MLCEngineInterface = await webllm.CreateMLCEngine(anyModel)` with.
 Prebuilt models include:
 - Llama-2
 - Llama-3
@@ -257,7 +257,7 @@ async main() {
   // 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 webllm.CreateEngine(
+  const engine = await webllm.CreateMLCEngine(
     "MyLlama-3b-v1-q4f32_0", 
     /*engineConfig=*/{ chatOpts: chatOpts, appConfig: appConfig }
   );

examples/cache-usage/src/cache_usage.ts

@@ -25,7 +25,7 @@ async function main() {
 
   // 1. This triggers downloading and caching the model with either Cache or IndexedDB Cache
   const selectedModel = "Phi2-q4f16_1"
-  const engine: webllm.EngineInterface = await webllm.CreateEngine(
+  const engine: webllm.MLCEngineInterface = await webllm.CreateMLCEngine(
     "Phi2-q4f16_1",
     { initProgressCallback: initProgressCallback, appConfig: appConfig }
   );

examples/chrome-extension-webgpu-service-worker/src/background.ts

@@ -1,13 +1,13 @@
-import { ExtensionServiceWorkerEngineHandler, Engine } from "@mlc-ai/web-llm";
+import { ExtensionServiceWorkerMLCEngineHandler, MLCEngine } from "@mlc-ai/web-llm";
 
 // Hookup an engine to a service worker handler
-const engine = new Engine();
+const engine = new MLCEngine();
 let handler;
 
 chrome.runtime.onConnect.addListener(function (port) {
   console.assert(port.name === "web_llm_service_worker");
   if (handler === undefined) {
-    handler = new ExtensionServiceWorkerEngineHandler(engine, port);
+    handler = new ExtensionServiceWorkerMLCEngineHandler(engine, port);
   } else {
     handler.setPort(port);
   }

examples/chrome-extension-webgpu-service-worker/src/popup.ts

@@ -7,8 +7,8 @@ import "./popup.css";
 
 import {
   ChatCompletionMessageParam,
-  CreateExtensionServiceWorkerEngine,
-  EngineInterface,
+  CreateExtensionServiceWorkerMLCEngine,
+  MLCEngineInterface,
   InitProgressReport,
 } from "@mlc-ai/web-llm";
 import { prebuiltAppConfig } from "@mlc-ai/web-llm";
@@ -36,7 +36,7 @@ const progressBar: ProgressBar = new Line("#loadingContainer", {
   svgStyle: { width: "100%", height: "100%" },
 });
 
-/***************** Web-LLM Engine Configuration *****************/
+/***************** Web-LLM MLCEngine Configuration *****************/
 const initProgressCallback = (report: InitProgressReport) => {
   progressBar.animate(report.progress, {
     duration: 50,
@@ -46,7 +46,7 @@ const initProgressCallback = (report: InitProgressReport) => {
   }
 };
 
-const engine: EngineInterface = await CreateExtensionServiceWorkerEngine(
+const engine: MLCEngineInterface = await CreateExtensionServiceWorkerMLCEngine(
   "Mistral-7B-Instruct-v0.2-q4f16_1",
   { initProgressCallback: initProgressCallback }
 );

examples/chrome-extension/src/popup.ts

@@ -6,7 +6,7 @@
 
 import './popup.css';
 
-import { EngineInterface, InitProgressReport, CreateEngine, ChatCompletionMessageParam } from "@mlc-ai/web-llm";
+import { MLCEngineInterface, InitProgressReport, CreateMLCEngine, ChatCompletionMessageParam } from "@mlc-ai/web-llm";
 import { ProgressBar, Line } from "progressbar.js";
 
 const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
@@ -43,7 +43,7 @@ const initProgressCallback = (report: InitProgressReport) => {
 
 // const selectedModel = "TinyLlama-1.1B-Chat-v0.4-q4f16_1-1k";
 const selectedModel = "Mistral-7B-Instruct-v0.2-q4f16_1";
-const engine: EngineInterface = await CreateEngine(
+const engine: MLCEngineInterface = await CreateMLCEngine(
     selectedModel,
     { initProgressCallback: initProgressCallback }
 );

examples/function-calling/src/function_calling.ts

@@ -24,7 +24,7 @@ async function main() {
     setLabel("init-label", report.text);
   };
   const selectedModel = "gorilla-openfunctions-v2-q4f16_1"
-  const engine: webllm.EngineInterface = await webllm.CreateEngine(
+  const engine: webllm.MLCEngineInterface = await webllm.CreateMLCEngine(
     selectedModel,
     { appConfig: myAppConfig, initProgressCallback: initProgressCallback }
   );

examples/get-started-web-worker/src/main.ts

@@ -19,7 +19,7 @@ async function mainNonStreaming() {
   };
   const selectedModel = "Llama-3-8B-Instruct-q4f32_1";
 
-  const engine: webllm.EngineInterface = await webllm.CreateWebWorkerEngine(
+  const engine: webllm.MLCEngineInterface = await webllm.CreateWebWorkerMLCEngine(
     new Worker(
       new URL('./worker.ts', import.meta.url),
       { type: 'module' }
@@ -59,7 +59,7 @@ async function mainStreaming() {
   };
   const selectedModel = "Llama-3-8B-Instruct-q4f32_1";
 
-  const engine: webllm.EngineInterface = await webllm.CreateWebWorkerEngine(
+  const engine: webllm.MLCEngineInterface = await webllm.CreateWebWorkerMLCEngine(
     new Worker(
       new URL('./worker.ts', import.meta.url),
       { type: 'module' }

examples/get-started-web-worker/src/worker.ts

@@ -1,8 +1,8 @@
-import { EngineWorkerHandler, Engine } from "@mlc-ai/web-llm";
+import { MLCEngineWorkerHandler, MLCEngine } from "@mlc-ai/web-llm";
 
 // Hookup an engine to a worker handler
-const engine = new Engine();
-const handler = new EngineWorkerHandler(engine);
+const engine = new MLCEngine();
+const handler = new MLCEngineWorkerHandler(engine);
 self.onmessage = (msg: MessageEvent) => {
   handler.onmessage(msg);
 };

examples/get-started/src/get_started.ts

@@ -14,7 +14,7 @@ async function main() {
   };
   // Option 1: If we do not specify appConfig, we use `prebuiltAppConfig` defined in `config.ts`
   const selectedModel = "Llama-3-8B-Instruct-q4f32_1";
-  const engine: webllm.EngineInterface = await webllm.CreateEngine(
+  const engine: webllm.MLCEngineInterface = await webllm.CreateMLCEngine(
     selectedModel,
     { initProgressCallback: initProgressCallback }
   );
@@ -29,7 +29,7 @@ async function main() {
   //     },
   //   ]
   // };
-  // const engine: webllm.EngineInterface = await webllm.CreateEngine(
+  // const engine: webllm.MLCEngineInterface = await webllm.CreateMLCEngine(
   //   selectedModel,
   //   { appConfig: appConfig, initProgressCallback: initProgressCallback }
   // );
@@ -56,7 +56,7 @@ async function main() {
   console.log(reply0);
   console.log(await engine.runtimeStatsText());
 
-  // To change model, either create a new engine via `CreateEngine()`, or call `engine.reload(modelId)`
+  // To change model, either create a new engine via `CreateMLCEngine()`, or call `engine.reload(modelId)`
 }
 
 main();

examples/json-mode/src/json_mode.ts

@@ -13,7 +13,7 @@ async function main() {
         setLabel("init-label", report.text);
     };
     const selectedModel = "Llama-2-7b-chat-hf-q4f32_1";
-    const engine: webllm.EngineInterface = await webllm.CreateEngine(
+    const engine: webllm.MLCEngineInterface = await webllm.CreateMLCEngine(
         selectedModel,
         { initProgressCallback: initProgressCallback }
     );

examples/json-schema/src/json_schema.ts

@@ -37,7 +37,7 @@ async function simpleStructuredTextExample() {
   const initProgressCallback = (report: webllm.InitProgressReport) => {
     setLabel("init-label", report.text);
   };
-  const engine: webllm.EngineInterface = await webllm.CreateEngine(
+  const engine: webllm.MLCEngineInterface = await webllm.CreateMLCEngine(
     "Llama-2-7b-chat-hf-q4f16_1",
     { initProgressCallback: initProgressCallback }
   );
@@ -104,7 +104,7 @@ async function harryPotterExample() {
     setLabel("init-label", report.text);
   };
 
-  const engine: webllm.EngineInterface = await webllm.CreateEngine(
+  const engine: webllm.MLCEngineInterface = await webllm.CreateMLCEngine(
     "Llama-2-7b-chat-hf-q4f16_1",
     { initProgressCallback: initProgressCallback }
   );
@@ -171,7 +171,7 @@ async function functionCallingExample() {
   };
 
   const selectedModel = "Hermes-2-Pro-Mistral-7B-q4f16_1";
-  const engine: webllm.EngineInterface = await webllm.CreateEngine(
+  const engine: webllm.MLCEngineInterface = await webllm.CreateMLCEngine(
     selectedModel,
     {
       initProgressCallback: initProgressCallback,

examples/logit-processor/src/logit_processor.ts

@@ -21,12 +21,12 @@ async function main() {
   const logitProcessorRegistry = new Map<string, webllm.LogitProcessor>();
   logitProcessorRegistry.set("Phi2-q4f32_1", myLogitProcessor);
 
-  let engine: webllm.EngineInterface;
+  let engine: webllm.MLCEngineInterface;
 
   // Depending on whether we use a web worker, the code is slightly different
   if (USE_WEB_WORKER) {
     // see worker.ts on how LogitProcessor plays a role there
-    engine = await webllm.CreateWebWorkerEngine(
+    engine = await webllm.CreateWebWorkerMLCEngine(
       new Worker(
         new URL('./worker.ts', import.meta.url),
         { type: 'module' }
@@ -35,7 +35,7 @@ async function main() {
       { initProgressCallback: initProgressCallback }
     );
   } else {
-    engine = await webllm.CreateEngine(
+    engine = await webllm.CreateMLCEngine(
       "Phi2-q4f32_1",
       {
         initProgressCallback: initProgressCallback,

examples/logit-processor/src/worker.ts

@@ -8,9 +8,9 @@ const myLogitProcessor = new MyLogitProcessor();
 const logitProcessorRegistry = new Map<string, webllm.LogitProcessor>();
 logitProcessorRegistry.set("Phi2-q4f32_1", myLogitProcessor);
 
-const engine = new webllm.Engine();
+const engine = new webllm.MLCEngine();
 engine.setLogitProcessorRegistry(logitProcessorRegistry);
-const handler = new webllm.EngineWorkerHandler(engine);
+const handler = new webllm.MLCEngineWorkerHandler(engine);
 self.onmessage = (msg: MessageEvent) => {
   handler.onmessage(msg);
 };

examples/multi-round-chat/src/multi_round_chat.ts

@@ -18,7 +18,7 @@ async function main() {
     setLabel("init-label", report.text);
   };
   const selectedModel = "Llama-3-8B-Instruct-q4f32_1";
-  const engine: webllm.EngineInterface = await webllm.CreateEngine(
+  const engine: webllm.MLCEngineInterface = await webllm.CreateMLCEngine(
     selectedModel,
     { initProgressCallback: initProgressCallback }
   );

examples/next-simple-chat/src/utils/chat_component.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Engine } from "@mlc-ai/web-llm";
+import { MLCEngine } from "@mlc-ai/web-llm";
 import ChatUI from "~/utils/chat_ui";
 
 const ChatComponent = () => {
@@ -8,7 +8,7 @@ const ChatComponent = () => {
   );
   const [prompt, setPrompt] = useState("");
   const [runtimeStats, setRuntimeStats] = useState("");
-  const [chat_ui] = useState(new ChatUI(new Engine()));
+  const [chat_ui] = useState(new ChatUI(new MLCEngine()));
   const updateMessage = (kind: string, text: string, append: boolean) => {
     if (kind == "init") {
       text = "[System Initalize] " + text;