Rename to web-llm-ui

adamelliotfields · adamelliotfields · commit 7b7f8348024a · 2025-03-22T19:53:17.000-04:00
diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/devcontainers/typescript-node:20
+FROM mcr.microsoft.com/devcontainers/typescript-node:22
 
 # add bun bin to path
 ENV PATH "/home/node/.bun/bin:${PATH}"
@@ -7,10 +7,10 @@ ENV PATH "/home/node/.bun/bin:${PATH}"
 USER 1000:1000
 
 # workdir
-WORKDIR /workspaces/chat
+WORKDIR /workspaces/web-llm-ui
 
 # install bun
 RUN curl -fsSL https://bun.sh/install | bash
 
 # ports
-EXPOSE 5173
+EXPOSE 4173 5173
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -2,7 +2,7 @@
   "build": { "dockerfile": "Dockerfile" },
   "postCreateCommand": "bun install --frozen-lockfile",
   "waitFor": "postCreateCommand",
-  "forwardPorts": [5173],
+  "forwardPorts": [4173, 5173],
   "containerEnv": {
     "GH_TOKEN": "${localEnv:GH_TOKEN}"
   }
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
@@ -20,26 +20,27 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
       - name: Setup Bun
-        uses: oven-sh/setup-bun@v1
+        uses: oven-sh/setup-bun@v2
       - name: Install deps
         run: bun install --frozen-lockfile
       - name: Lint with Biome
         run: bun run lint
       - name: Build with Vite
         run: bun run build
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: ./dist/
-  deploy:
-    name: Deploy
-    runs-on: ubuntu-latest
-    needs: build
-    if: github.event_name == 'push' || (github.event.pull_request.merged == true && github.base_ref == 'main')
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
+      # - name: Upload artifact
+      #   uses: actions/upload-pages-artifact@v3
+      #   with:
+      #     path: ./dist/
+
+  # deploy:
+  #   name: Deploy
+  #   runs-on: ubuntu-latest
+  #   needs: build
+  #   if: github.event_name == 'push' || (github.event.pull_request.merged == true && github.base_ref == 'main')
+  #   environment:
+  #     name: github-pages
+  #     url: ${{ steps.deployment.outputs.page_url }}
+  #   steps:
+  #     - name: Deploy to GitHub Pages
+  #       id: deployment
+  #       uses: actions/deploy-pages@v4
diff --git a/.nvmrc b/.nvmrc
diff --git a/bun.lockb b/bun.lockb
diff --git a/index.html b/index.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <html lang="en" class="antialiased [font-synthesis:none] [text-rendering:optimizeLegibility]" style="height: 100%;">
   <head>
-    <title>Chat</title>
+    <title>Web LLM UI</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="Chat with LLMs running in your browser." />
+    <meta name="description" content="Chat with LLMs running in your browser" />
     <meta name="theme-color" content="#000000" />
     <meta name="robots" content="index, follow" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="canonical" href="https://chat.aef.me" />
+    <link rel="canonical" href="https://localhost:5173" />
   <body style="/* neutral-50 */ background-color: #fafafa; height: 100%;">
     <div id="root" style="height: 100%;">
       <!-- https://tobiasahlin.com/spinkit -->
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "chat",
+  "name": "web-llm-ui",
   "version": "0.1.5",
   "type": "module",
   "scripts": {
diff --git a/readme.md b/readme.md
@@ -1,43 +1,27 @@
-# chat
+# web-llm-ui
 
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/adamelliotfields/chat?devcontainer_path=.devcontainer/devcontainer.json&machine=basicLinux32gb)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/adamelliotfields/web-llm-ui?devcontainer_path=.devcontainer/devcontainer.json&machine=basicLinux32gb)
 
-> [!IMPORTANT]  
-> No longer maintained. :cry: When I first made this, there was no UI for WebLLM. The official app at [chat.webllm.ai](https://chat.webllm.ai) is now the best UI for WebLLM and is actively maintained. Use that or one of Xenova's WebGPU [spaces](https://huggingface.co/collections/Xenova/transformersjs-demos-64f9c4f49c099d93dbc611df) instead! :llama:
+https://github.com/adamelliotfields/web-llm-ui/assets/7433025/07565763-606b-4de3-aa2d-8d5a26c83941
 
-React chat UI for [Web LLM](https://webllm.mlc.ai) on GitHub Pages. Built with Tailwind and Jotai. Inspired by [Perplexity Labs](https://labs.perplexity.ai).
+A React app I made to experiment with [quantized](https://huggingface.co/docs/transformers/en/quantization/overview) models in the browser using [WebGPU](https://webgpu.org). The models are compiled to WebAssembly using [MLC](https://github.com/mlc-ai/mlc-llm), which is like [llama.cpp](https://github.com/ggml-org/llama.cpp) for the web.
 
-https://github.com/adamelliotfields/chat/assets/7433025/07565763-606b-4de3-aa2d-8d5a26c83941
-
-## Introduction
-
-[Web LLM](https://github.com/mlc-ai/web-llm) is a project under the [MLC](https://mlc.ai) (machine learning compilation) organization. It allows you to run large language models in the browser using WebGPU and WebAssembly. Check out the [example](https://github.com/mlc-ai/web-llm/tree/main/examples/simple-chat) and read the [introduction](https://mlc.ai/chapter_introduction/index.html) to learn more.
-
-In addition to [`@mlc-ai/web-llm`](https://www.npmjs.com/package/@mlc-ai/web-llm), the app uses TypeScript, React, Jotai, and Tailwind. It's built with Vite and SWC.
+I'm not going to update this, but the official app at [chat.webllm.ai](https://chat.webllm.ai) is actively maintained. Use that or one of [xenova](https://huggingface.co/Xenova)'s WebGPU [spaces](https://huggingface.co/collections/Xenova/transformersjs-demos-64f9c4f49c099d93dbc611df) instead.
 
 ## Usage
 
 ```sh
-# localhost:5173
-npm install
-npm start
+bun install
+bun start
 ```
 
 ## Known issues
 
-I'm currently using Windows/Edge stable on a Lenovo laptop with a RTX 2080 6GB.
-
-Using the demo app at [webllm.mlc.ai](https://webllm.mlc.ai), I did not have to enable any flags to get the `q4f32` quantized models to work (`f16` requires a flag). Go to [webgpureport.org](https://webgpureport.org) to inspect your system's WebGPU capabilities.
-
-### Fetch errors
-
-For whatever reason, I have to be behind a VPN to fetch the models from Hugging Face on Windows. 🤷‍♂️
+Using `q4f32` quantized models, as `q4f16` requires a flag. See [webgpureport.org](https://webgpureport.org).
 
 ### Cannot find global function
 
-Usually a cache issue.
-
-You can delete an individual cache:
+If you see this message, it is a cache issue. You can delete an individual cache with:
 
 ```js
 await caches.delete('webllm/wasm')
@@ -127,13 +111,3 @@ const inCache = hasModelInCache('Phi2-q4f32_1', config) // throws if model ID is
 ## VRAM requirements
 
 See [utils/vram_requirements](https://github.com/mlc-ai/web-llm/tree/main/utils/vram_requirements) in the Web LLM repo.
-
-## TODO
-
-- [ ] Dark mode
-- [ ] Settings menu (temperature, system message, etc.)
-- [ ] Inference on web worker
-- [ ] Offline/PWA
-- [ ] Cache management
-- [ ] Image upload for multimodal like [LLaVA](https://llava-vl.github.io)
-- [ ] Tailwind class sorting by Biome 🤞
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -28,7 +28,7 @@ export const Header = memo(function Header({ className, ...rest }: HeaderProps)
           </a>
           <Button
             className="text-xl"
-            href="https://github.com/adamelliotfields/chat"
+            href="https://github.com/adamelliotfields/web-llm-ui"
             icon={Github}
             label="GitHub"
           />
diff --git a/src/consts.ts b/src/consts.ts
@@ -1,5 +1,3 @@
-export const TITLE = 'CHAT' as const
+export const TITLE = 'WEB LLM UI' as const
 
-export const HREF = import.meta.env.DEV
-  ? 'http://localhost:5173'
-  : 'https://aef.me/chat/'
+export const HREF = 'http://localhost:5173' as const

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`"build": { "dockerfile": "Dockerfile" },`
`3`	`3`	`"postCreateCommand": "bun install --frozen-lockfile",`
`4`	`4`	`"waitFor": "postCreateCommand",`
`5`		`- "forwardPorts": [5173],`
	`5`	`+ "forwardPorts": [4173, 5173],`
`6`	`6`	`"containerEnv": {`
`7`	`7`	`"GH_TOKEN": "${localEnv:GH_TOKEN}"`
`8`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"private": true,`
`3`		`- "name": "chat",`
	`3`	`+ "name": "web-llm-ui",`
`4`	`4`	`"version": "0.1.5",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"scripts": {`