setup webllm with smol 360m demo

components.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"style": "default",
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "src/app.css",
+		"baseColor": "slate"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils"
+	},
+	"typescript": true
+}

package.json

@@ -13,10 +13,19 @@
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@tailwindcss/typography": "^0.5.14",
+		"autoprefixer": "^10.4.20",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
+		"tailwindcss": "^3.4.9",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@mlc-ai/web-llm": "^0.2.60",
+		"clsx": "^2.1.1",
+		"tailwind-merge": "^2.5.2",
+		"tailwind-variants": "^0.2.1"
+	}
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

src/app.css

@@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+ 
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 222.2 84% 4.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: hsl(212.7,26.8%,83.9);
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/lib/components/ui/badge/badge.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { type Variant, badgeVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	let className: string | undefined | null = undefined;
+	export let href: string | undefined = undefined;
+	export let variant: Variant = "default";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	{href}
+	class={cn(badgeVariants({ variant, className }))}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>

src/lib/components/ui/badge/index.ts

@@ -0,0 +1,21 @@
+import { type VariantProps, tv } from "tailwind-variants";
+export { default as Badge } from "./badge.svelte";
+
+export const badgeVariants = tv({
+	base: "focus:ring-ring inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
+			secondary:
+				"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+			destructive:
+				"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
+			outline: "text-foreground",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+export type Variant = VariantProps<typeof badgeVariants>["variant"];

src/lib/components/ui/textarea/index.ts

@@ -0,0 +1,28 @@
+import Root from "./textarea.svelte";
+
+type FormTextareaEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLTextAreaElement;
+};
+
+type TextareaEvents = {
+	blur: FormTextareaEvent<FocusEvent>;
+	change: FormTextareaEvent<Event>;
+	click: FormTextareaEvent<MouseEvent>;
+	focus: FormTextareaEvent<FocusEvent>;
+	keydown: FormTextareaEvent<KeyboardEvent>;
+	keypress: FormTextareaEvent<KeyboardEvent>;
+	keyup: FormTextareaEvent<KeyboardEvent>;
+	mouseover: FormTextareaEvent<MouseEvent>;
+	mouseenter: FormTextareaEvent<MouseEvent>;
+	mouseleave: FormTextareaEvent<MouseEvent>;
+	paste: FormTextareaEvent<ClipboardEvent>;
+	input: FormTextareaEvent<InputEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Textarea,
+	type TextareaEvents,
+	type FormTextareaEvent,
+};

src/lib/components/ui/textarea/textarea.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+	import type { TextareaEvents } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLTextareaAttributes;
+	type $$Events = TextareaEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+
+	// Workaround for https://github.com/sveltejs/svelte/issues/9305
+	// Fixed in Svelte 5, but not backported to 4.x.
+	export let readonly: $$Props["readonly"] = undefined;
+</script>
+
+<textarea
+	class={cn(
+		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	{readonly}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	on:input
+	{...$$restProps}
+></textarea>

src/lib/utils.ts

@@ -0,0 +1,62 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cubicOut } from "svelte/easing";
+import type { TransitionConfig } from "svelte/transition";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+type FlyAndScaleParams = {
+	y?: number;
+	x?: number;
+	start?: number;
+	duration?: number;
+};
+
+export const flyAndScale = (
+	node: Element,
+	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+): TransitionConfig => {
+	const style = getComputedStyle(node);
+	const transform = style.transform === "none" ? "" : style.transform;
+
+	const scaleConversion = (
+		valueA: number,
+		scaleA: [number, number],
+		scaleB: [number, number]
+	) => {
+		const [minA, maxA] = scaleA;
+		const [minB, maxB] = scaleB;
+
+		const percentage = (valueA - minA) / (maxA - minA);
+		const valueB = percentage * (maxB - minB) + minB;
+
+		return valueB;
+	};
+
+	const styleToString = (
+		style: Record<string, number | string | undefined>
+	): string => {
+		return Object.keys(style).reduce((str, key) => {
+			if (style[key] === undefined) return str;
+			return str + `${key}:${style[key]};`;
+		}, "");
+	};
+
+	return {
+		duration: params.duration ?? 200,
+		delay: 0,
+		css: (t) => {
+			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+
+			return styleToString({
+				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+				opacity: t
+			});
+		},
+		easing: cubicOut
+	};
+};

src/routes/+layout.svelte

@@ -0,0 +1 @@
+<script>import "../app.css";</script><slot></slot>

src/routes/+page.svelte

@@ -1,2 +1,98 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+    import Textarea from "@/lib/components/ui/textarea/textarea.svelte";
+    import Badge from "@/lib/components/ui/badge/badge.svelte";
+    import * as webllm from "@mlc-ai/web-llm";
+    import { onMount } from 'svelte';
+
+    let engine: webllm.MLCEngineInterface;
+    let isLoading = false;
+    let loadingStatus = '';
+    let inputText = '';
+    let outputText = '';
+    let error = '';
+    let completionSpeed: number | null = null;
+    let selectedModel = "SmolLM-360M-Instruct-q4f16_1-MLC";
+    let isGenerating = false;
+
+    async function loadWebLLM() {
+        isLoading = true;
+        error = '';
+        const initProgressCallback = (report: webllm.InitProgressReport) => {
+            loadingStatus = report.text;
+        };
+
+        const appConfig: webllm.AppConfig = {
+            model_list: [{
+                model: `https://huggingface.co/mlc-ai/${selectedModel}`,
+                model_id: selectedModel,
+                model_lib: `${webllm.modelLibURLPrefix}${webllm.modelVersion}/SmolLM-360M-Instruct-q4f16_1-ctx2k_cs1k-webgpu.wasm`,
+                overrides: { context_window_size: 2048 },
+            }],
+        };
+
+        try {
+            engine = await webllm.CreateMLCEngine(selectedModel, {
+                appConfig,
+                initProgressCallback,
+                logLevel: "INFO",
+            });
+        } catch (err) {
+            error = `Failed to load the model: ${(err as Error).message}`;
+        } finally {
+            isLoading = false;
+        }
+    }
+
+    async function generateCompletion() {
+        if (!engine || !inputText.trim() || isGenerating) return;
+
+        isGenerating = true;
+        const startTime = performance.now();
+        try {
+            const reply = await engine.completions.create({
+                prompt: inputText,
+                echo: false,
+                max_tokens: 10,
+            });
+
+            outputText = reply.choices[0].text;
+            completionSpeed = Math.round(performance.now() - startTime);
+            error = '';
+        } catch (err) {
+            error = `Error: ${(err as Error).message}`;
+        } finally {
+            isGenerating = false;
+        }
+    }
+
+    onMount(loadWebLLM);
+</script>
+
+<div class="flex my-20 flex-col items-center gap-4 max-w-lg mx-auto">
+    <h1 class="text-center font-mono font-bold text-4xl">Mini Playground</h1>
+    <p class="text-center font-mono text-sm mb-4">Powered by `{selectedModel}`</p>
+    <Textarea 
+        bind:value={inputText} 
+        on:input={() => {
+            if (!isGenerating) {
+                generateCompletion();
+            }
+        }} 
+        disabled={isLoading}
+        class="w-full" 
+        placeholder="Enter your prompt here"
+    />
+    <pre class="text-lg whitespace-pre-wrap">{outputText}</pre>
+    {#if isLoading}
+        <p class="text-sm text-slate-600 text-center">{loadingStatus}</p>
+    {:else if error}
+        <p class="text-sm text-red-600">{error}</p>
+    {:else}
+        <div class="flex gap-2">
+            {#if completionSpeed !== null}
+                <Badge>{completionSpeed}ms</Badge>
+            {/if}
+            <Badge class="bg-green-700">{selectedModel}</Badge>
+        </div>
+    {/if}
+</div>

svelte.config.js

@@ -11,7 +11,10 @@ const config = {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter(),
+		alias: {
+			"@/*": "./src/*",
+		  },
 	}
 };
 

tailwind.config.ts

@@ -0,0 +1,64 @@
+import { fontFamily } from "tailwindcss/defaultTheme";
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+	darkMode: ["class"],
+	content: ["./src/**/*.{html,js,svelte,ts}"],
+	safelist: ["dark"],
+	theme: {
+		container: {
+			center: true,
+			padding: "2rem",
+			screens: {
+				"2xl": "1400px"
+			}
+		},
+		extend: {
+			colors: {
+				border: "hsl(var(--border) / <alpha-value>)",
+				input: "hsl(var(--input) / <alpha-value>)",
+				ring: "hsl(var(--ring) / <alpha-value>)",
+				background: "hsl(var(--background) / <alpha-value>)",
+				foreground: "hsl(var(--foreground) / <alpha-value>)",
+				primary: {
+					DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+					foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
+				},
+				secondary: {
+					DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+					foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
+				},
+				destructive: {
+					DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+					foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
+				},
+				muted: {
+					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+					foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
+				},
+				accent: {
+					DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+					foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
+				},
+				popover: {
+					DEFAULT: "hsl(var(--popover) / <alpha-value>)",
+					foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
+				},
+				card: {
+					DEFAULT: "hsl(var(--card) / <alpha-value>)",
+					foreground: "hsl(var(--card-foreground) / <alpha-value>)"
+				}
+			},
+			borderRadius: {
+				lg: "var(--radius)",
+				md: "calc(var(--radius) - 2px)",
+				sm: "calc(var(--radius) - 4px)"
+			},
+			fontFamily: {
+				sans: [...fontFamily.sans]
+			}
+		}
+	},
+};
+
+export default config;