Deps (#4)

* Consistent button padding * Update readme * Deps * 0.1.1
adamelliotfields · Feb 16, 2024 · f48529c · f48529c
1 parent be857f4
commit f48529c
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 12 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "chat",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "scripts": {
     "start": "vite",
@@ -14,7 +14,7 @@
     "@biomejs/biome": "1.5.3",
     "@headlessui/react": "1.7.18",
     "@headlessui/tailwindcss": "0.2.0",
-    "@mlc-ai/web-llm": "0.2.18",
+    "@mlc-ai/web-llm": "0.2.19",
     "@shikijs/markdown-it": "1.1.2",
     "@swc-jotai/react-refresh": "0.1.0",
     "@tailwindcss/forms": "0.5.7",
@@ -28,14 +28,14 @@
     "autoprefixer": "10.4.17",
     "clsx": "2.1.0",
     "jotai": "2.6.4",
-    "lucide-react": "0.323.0",
+    "lucide-react": "0.331.0",
     "markdown-it": "14.0.0",
     "postcss": "8.4.35",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwindcss": "3.4.1",
     "typescript": "5.3.3",
-    "vite": "5.1.2"
+    "vite": "5.1.3"
   },
   "overrides": {
     "@swc/core": "1.3.105"

diff --git a/readme.md b/readme.md
@@ -28,7 +28,23 @@ Using the demo app at [webllm.mlc.ai](https://webllm.mlc.ai), I did not have to
 
 ### Fetch errors
 
-For whatever reason, I have to be behind a VPN to fetch the models from Hugging Face on Windows (using the same DNS settings). 🤷‍♂️
+For whatever reason, I have to be behind a VPN to fetch the models from Hugging Face on Windows. 🤷‍♂️
+
+### Cannot find global function
+
+Usually a cache issue.
+
+You can delete an individual cache:
+
+```js
+await caches.delete('webllm/wasm')
+```
+
+Or all caches:
+
+```js
+await caches.keys().then(keys => Promise.all(keys.map(key => caches.delete(key))))
+```
 
 ## Reference
 
@@ -116,6 +132,7 @@ See [utils/vram_requirements](https://github.com/mlc-ai/web-llm/tree/main/utils/
 - [ ] Adapters for alternative backends (e.g., Ollama)
 - [ ] Inference on web worker
 - [ ] Offline/PWA
+- [ ] Cache management
 - [ ] GPU stats
 - [ ] Image upload for multimodal like [LLaVA](https://llava-vl.github.io)
 - [ ] [StableLM Zephyr 3B](https://huggingface.co/stabilityai/stablelm-zephyr-3b)

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -208,7 +208,7 @@ export default function App({ chat }: AppProps) {
                 disabled={trashDisabled}
                 label="Reset"
                 icon={Trash}
-                className="mr-2 p-2 text-lg"
+                className="mr-2 text-lg"
                 onClick={handleResetClick}
               />
               <div className="grow">
@@ -218,7 +218,7 @@ export default function App({ chat }: AppProps) {
                 disabled={stopDisabled}
                 label="Stop"
                 icon={Square}
-                className="ml-2 p-2 text-lg"
+                className="ml-2 text-lg"
                 onClick={handleStopClick}
               />
             </div>

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -12,7 +12,6 @@ export type ButtonProps = Omit<
   onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick']
 }
 
-// TODO: take "size" prop which controls the padding
 export function Button({
   active = false,
   className,
@@ -33,7 +32,7 @@ export function Button({
   const disabledClassNames = 'text-neutral-400/50 cursor-not-allowed'
 
   const classNames = clsx(
-    'leading-none rounded-full focus-visible:outline-none',
+    'p-2 leading-none rounded-full focus-visible:outline-none',
     disabled && disabledClassNames,
     !disabled && enabledClassNames,
     !disabled && active && enabledActiveClassNames,

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -27,7 +27,7 @@ export const Header = memo(function Header({ className, ...rest }: HeaderProps)
             {TITLE}
           </a>
           <Button
-            className="p-2 text-lg"
+            className="text-xl"
             href="https://github.com/adamelliotfields/chat"
             icon={Github}
             label="GitHub"

diff --git a/src/components/ModelSelect.tsx b/src/components/ModelSelect.tsx
@@ -69,7 +69,7 @@ export function ModelSelect({ className, handleClick, ...rest }: ModelSelectProp
       <Button
         disabled={loading}
         active={activeModelId === selectedModelId}
-        className="-mr-0.5 ml-3 p-1 text-base"
+        className="ml-2 mt-3 -mr-2 text-lg md:mt-0"
         icon={Power}
         label="Reload"
         onClick={handleClickWithModel}

diff --git a/src/components/PromptInput.tsx b/src/components/PromptInput.tsx
@@ -45,7 +45,7 @@ export function PromptInput({ className, handleClick, ...rest }: PromptInputProp
       />
       <div className="flex items-center justify-self-end bg-white rounded-full space-x-2">
         <Button
-          className="p-2 text-lg"
+          className="text-lg"
           disabled={disabled}
           label="Send"
           icon={SendHorizontal}