Update README.

README.md

@@ -1,8 +1,42 @@
-# Chrome Extension React Template
+# Lumos
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). Clone this repo to bootstrap a Chrome Extension React app.
+A web-based LLM co-pilot for browsing the web. Your prompts never leave the browser.
 
-## Available Scripts
+This Chrome extension is powered by [Web LLM](https://webllm.mlc.ai/). Inference is done on the local machine without any _external_ server support. However, due to security constraints in the Chrome extension platform, the app does rely on _local_ server support to run the LLM. This app is inspired by the [Chrome extension example](https://github.com/mlc-ai/web-llm/tree/main/examples/chrome-extension) provided by the Web LLM project.
+
+- [Web LLM (Home)](https://webllm.mlc.ai/)
+- [Web LLM (GitHub)](https://github.com/mlc-ai/web-llm/tree/main)
+
+_Lumos. Nox. Lumos. Nox._
+
+## Local Server
+
+A local server is needed to run the LLM. Follow the [Web LLM REST API documentation](https://llm.mlc.ai/docs/deploy/rest.html) to set up the server.
+
+### Download Prebuilt Models and Weights
+
+[This example notebook](https://github.com/mlc-ai/notebooks/blob/main/mlc-llm/tutorial_chat_module_getting_started.ipynb) demonstrates the steps to install the MLC-Chat Python package and download a prebuilt model and weights. Models and weights are saved to the local machine.
+
+Example directory structure:
+```
+/models
+  /prebuilt
+    /lib
+      Llama-2-7b-chat-hf-q4f16_1-metal.so
+      <model_name_2>
+    /mlc-chat-Llama-2-7b-chat-hf-q4f16_1
+      ...
+    /mlc-chat-<model_name_2>
+```
+
+### Start Server
+
+Example:
+```
+python -m mlc_chat.rest --model=./models/prebuilt/mlc-chat-Llama-2-7b-chat-hf-q4f16_1 --lib-path=./models/prebuilt/lib/Llama-2-7b-chat-hf-q4f16_1-metal.so
+```
+
+## Chrome Extension
 
 In the project directory, you can run:
 

manifest.json

@@ -1,11 +1,11 @@
 {
     "version": "1.0.0",
     "manifest_version": 3,
-    "name": "React Chrome Extension",
-    "description": "This is a Chrome extension built with React and TypeScript",
+    "name": "Lumos",
+    "description": "A web-based LLM co-pilot for browsing the web. Your prompts never leave the browser.",
     "action": {
         "default_popup": "js/index.html",
-        "default_title": "React Chrome Extension"
+        "default_title": "Lumos"
     },
     "background": {
         "service_worker": "js/background.js"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lumos",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.1",

webpack.config.js

@@ -1,69 +1,69 @@
+const webpack = require("webpack");
 const path = require("path");
 const HTMLPlugin = require("html-webpack-plugin");
-const CopyPlugin = require("copy-webpack-plugin")
-// https://stackoverflow.com/questions/68707553/uncaught-referenceerror-buffer-is-not-defined
-const webpack = require("webpack");
+const CopyPlugin = require("copy-webpack-plugin");
+
 
 module.exports = {
-    entry: {
-        index: "./src/index.tsx",
-        background: "./src/scripts/background.ts"
-    },
-    mode: "production",
-    module: {
-        rules: [
-            {
-              test: /\.tsx?$/,
-               use: [
-                 {
-                  loader: "ts-loader",
-                   options: {
-                     compilerOptions: { noEmit: false },
-                    }
-                  }],
-               exclude: /node_modules/,
-            },
-            {
-              exclude: /node_modules/,
-              test: /\.css$/i,
-               use: [
-                  "style-loader",
-                  "css-loader"
-               ]
-            },
-        ],
-    },
-    plugins: [
-        new CopyPlugin({
-            patterns: [
-                { from: "manifest.json", to: "../manifest.json" },
-                { from: "src/scripts/content.js", to: "content.js" }
-            ],
-        }),
-        new webpack.ProvidePlugin({
-            Buffer: ['buffer', 'Buffer'],
-        }),
-        ...getHtmlPlugins(["index"]),
+  entry: {
+    index: "./src/index.tsx",
+    background: "./src/scripts/background.ts"
+  },
+  mode: "production",
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: "ts-loader",
+            options: {
+              compilerOptions: { noEmit: false },
+            }
+          }],
+        exclude: /node_modules/,
+      },
+      {
+        exclude: /node_modules/,
+        test: /\.css$/i,
+        use: [
+          "style-loader",
+          "css-loader"
+        ]
+      },
     ],
-    resolve: {
-        extensions: [".tsx", ".ts", ".js"],
-        fallback: {
-            "perf_hooks": false,
-        }
-    },
-    output: {
-        path: path.join(__dirname, "dist/js"),
-        filename: "[name].js",
-    },
+  },
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        { from: "manifest.json", to: "../manifest.json" },
+        { from: "./src/scripts/content.js", to: "content.js" },     
+      ],
+    }),
+    new webpack.ProvidePlugin({ // needed for @mlc-ai/web-llm
+      Buffer: ["buffer", "Buffer"],
+    }),
+    ...getHtmlPlugins(["index"]),
+  ],
+  resolve: {
+    extensions: [".tsx", ".ts", ".js"],
+    fallback: {
+      "perf_hooks": false, // needed for @mlc-ai/web-llm
+    }
+  },
+  output: {
+    path: path.join(__dirname, "dist/js"),
+    filename: "[name].js",
+  },
 };
 
 function getHtmlPlugins(chunks) {
-    return chunks.map(
-        (chunk) =>
-            new HTMLPlugin({
-                title: "React extension",
-                filename: `${chunk}.html`,
-                chunks: [chunk],
-            })
-    );
+  return chunks.map(
+    (chunk) =>
+      new HTMLPlugin({
+        title: "Lumos",
+        filename: `${chunk}.html`,
+        chunks: [chunk],
+      })
+  );
 }