diff --git a/ui/.eslintrc.cjs b/ui/.eslintrc.cjs
index ebc1958..bcbbb98 100644
--- a/ui/.eslintrc.cjs
+++ b/ui/.eslintrc.cjs
@@ -17,14 +17,5 @@ module.exports = {
 		browser: true,
 		es2017: true,
 		node: true
-	},
-	overrides: [
-		{
-			files: ['*.svelte'],
-			parser: 'svelte-eslint-parser',
-			parserOptions: {
-				parser: '@typescript-eslint/parser'
-			}
-		}
-	]
+	}
 };
diff --git a/ui/.gitignore b/ui/.gitignore
index 6635cf5..b57c59b 100644
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -8,3 +8,5 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+archive/
\ No newline at end of file
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 66191e6..3c8edb5 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -8,7 +8,7 @@
 			"name": "ui",
 			"version": "0.0.1",
 			"devDependencies": {
-				"@candlecorp/wick": "^0.2.1",
+				"@candlecorp/wick": "^0.2.2",
 				"@msgpack/msgpack": "^3.0.0-beta2",
 				"@sveltejs/adapter-auto": "^2.0.0",
 				"@sveltejs/adapter-static": "^2.0.3",
@@ -148,9 +148,9 @@
 			}
 		},
 		"node_modules/@candlecorp/wick": {
-			"version": "0.2.1",
-			"resolved": "https://registry.npmjs.org/@candlecorp/wick/-/wick-0.2.1.tgz",
-			"integrity": "sha512-z66WJDw/thYX20sBoBtqPE7ozm51aGWSFiA6NsHv3PQ9UaAXSyhfavA5BmRp7Yyjy/RXPA/Hl38Ev0BprZUm+w==",
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/@candlecorp/wick/-/wick-0.2.2.tgz",
+			"integrity": "sha512-/c90iwyL/b66GYDrgaIGq7p8+zxQL1Wn8lflJNLSoub+wpi4DbAyKKLdRn3XBHVIaKuyfwfLjIKqrS/gOGJjNg==",
 			"dev": true,
 			"dependencies": {
 				"@candlecorp/rsocket-adapter-rxjs": "^0.0.1",
diff --git a/ui/package.json b/ui/package.json
index 309f6c9..e5ac2c0 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -12,7 +12,7 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@candlecorp/wick": "^0.2.1",
+		"@candlecorp/wick": "^0.2.2",
 		"@msgpack/msgpack": "^3.0.0-beta2",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/adapter-static": "^2.0.3",
diff --git a/ui/src/components/BundleDownload.svelte b/ui/src/components/BundleDownload.svelte
index f6c65ac..07b59f8 100644
--- a/ui/src/components/BundleDownload.svelte
+++ b/ui/src/components/BundleDownload.svelte
@@ -77,8 +77,8 @@
 				pill
 				class="mt-2"
 				on:click={startDownload}
-				type="submit"
-				disabled={(bundles[selectedBundle] || {}).ready}>Download Files</Button
+				color="alternative"
+				disabled={(bundles[selectedBundle] || {}).ready}>Download Bundle</Button
 			>
 			<slot />
 		{/if}
diff --git a/ui/src/components/DemoItem.svelte b/ui/src/components/DemoItem.svelte
new file mode 100644
index 0000000..c187393
--- /dev/null
+++ b/ui/src/components/DemoItem.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let title: string;
+	export let description: string;
+	export let link: string;
+</script>
+
+<div class="bg-gray-100 p-6 rounded-m">
+	<h2 class="text-2xl font-bold mb-2">{title}</h2>
+	<p class="mb-4">
+		{description}
+	</p>
+	<a href={link} class="text-blue-500 hover:underline">{title} Demo</a>
+</div>
diff --git a/ui/src/components/Header.svelte b/ui/src/components/Header.svelte
index 0d7d536..53ea1e7 100644
--- a/ui/src/components/Header.svelte
+++ b/ui/src/components/Header.svelte
@@ -7,25 +7,32 @@
 		NavHamburger,
 		Dropdown,
 		DropdownItem,
-		DropdownDivider
 	} from 'flowbite-svelte';
-	import { GithubSolid } from 'flowbite-svelte-icons';
 	import { ChevronDownOutline } from 'flowbite-svelte-icons';
 	import { page } from '$app/stores';
 	$: activeUrl = $page.url.pathname;
 </script>
 
 <Navbar>
-	<NavBrand href="/">
-		<img src="wick_logo.png" class="mr-3 h-6 sm:h-9" alt="Wick Logo" />
-	</NavBrand>
+	<div class="flex items-baseline">
+		<NavBrand href="/">
+			<img src="wick_logo.png" class="mr-3 h-6 sm:h-9" alt="Wick Logo" />
+		</NavBrand>
+		<iframe
+			src="https://ghbtns.com/github-btn.html?user=candlecorp&repo=wick&type=star&count=true"
+			frameborder="0"
+			scrolling="0"
+			width="150"
+			height="20"
+			title="GitHub"
+		/>
+	</div>
 	<NavHamburger menuClass="text-right right-0" />
 	<Dropdown class="w-44 z-20" {activeUrl}>
-		<DropdownItem class="flex justify-center items-end" href="https://github.com/candlecorp/wick"
-			><GithubSolid size="lg" /></DropdownItem
-		>
 		<DropdownItem class="flex justify-center items-center" href="/">Home</DropdownItem>
-		<DropdownItem class="flex justify-center items-center" href="/llama2">Llama2</DropdownItem>
+		<DropdownItem class="flex justify-center items-center" href="/llama2"
+			>Text Generation</DropdownItem
+		>
 		<DropdownItem class="flex justify-center items-center" href="/yolo"
 			>Object detection</DropdownItem
 		>
@@ -35,14 +42,12 @@
 	</Dropdown>
 
 	<NavUl {activeUrl}>
-		<NavLi href="https://github.com/candlecorp/wick"><GithubSolid size="lg" /></NavLi>
-
 		<NavLi href="/">Home</NavLi>
 		<NavLi class="cursor-pointer">
 			Examples<ChevronDownOutline class="w-3 h-3 ml-2 text-primary-800 dark:text-white inline" />
 		</NavLi>
 		<Dropdown class="w-44 z-20" {activeUrl}>
-			<DropdownItem href="/llama2">Llama Text Generation</DropdownItem>
+			<DropdownItem href="/llama2">Text Generation</DropdownItem>
 			<DropdownItem href="/yolo">Object detection</DropdownItem>
 			<DropdownItem href="/redact">Text Redaction</DropdownItem>
 		</Dropdown>
diff --git a/ui/src/components/Section.svelte b/ui/src/components/Section.svelte
new file mode 100644
index 0000000..64a1133
--- /dev/null
+++ b/ui/src/components/Section.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let header: string | undefined = undefined;
+</script>
+
+<div class="w-full mt-4">
+	{#if header}
+		<h2 class="text-center text-lg font-bold">{header}</h2>
+	{/if}
+	<slot />
+</div>
+
+<style>
+</style>
diff --git a/ui/src/components/Terminal.svelte b/ui/src/components/Terminal.svelte
new file mode 100644
index 0000000..59666a0
--- /dev/null
+++ b/ui/src/components/Terminal.svelte
@@ -0,0 +1,65 @@
+<script lang="ts" context="module">
+	export interface Line {
+		command: string;
+		output: string;
+	}
+</script>
+
+<script lang="ts">
+	export let lines: Line[] = [];
+</script>
+
+<section class="terminal">
+	<div class="bar">
+		<svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
+			<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
+				<circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5" />
+				<circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5" />
+				<circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5" />
+			</g>
+		</svg>
+	</div>
+
+	{#each lines as line}
+		<p>
+			<span class="prompt">&gt;</span>
+			{line.command}
+		</p>
+
+		{#if line.output}
+			<p class="output">
+				{#each line.output.split('\n') as outputLine}
+					{outputLine}<br />
+				{/each}
+			</p>
+		{/if}
+	{/each}
+</section>
+
+<style>
+	.terminal {
+		font-family: monospace;
+		background: #333;
+		padding: 0.7rem 1rem;
+		border-radius: 0.5rem;
+		color: #b8b8b8;
+		overflow: hidden;
+	}
+
+	.terminal .bar {
+		margin-bottom: 1rem;
+	}
+
+	.prompt {
+		color: #27c93f;
+		font-weight: bold;
+	}
+
+	p {
+		margin: 0.2rem 0;
+	}
+	p.output {
+		font-weight: normal;
+		white-space: pre;
+	}
+</style>
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index 33d8336..1e244ff 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -4,8 +4,8 @@
 </script>
 
 <Header />
-<div class="flex justify-center items-center min-h-screen p-4">
-	<div class="mx-auto flex flex-col justify-center w-full md:w-3/5">
+<div class="flex min-h-screen p-4">
+	<div class="mx-auto flex flex-col w-full md:w-3/5">
 		<slot />
 	</div>
 </div>
diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
index 4ae138a..2f3931e 100644
--- a/ui/src/routes/+page.svelte
+++ b/ui/src/routes/+page.svelte
@@ -1,32 +1,39 @@
 <script lang="ts">
+	import DemoItem from '../components/DemoItem.svelte';
+	import Section from '../components/Section.svelte';
+
+	const demos = [
+		{
+			title: 'Text Generation',
+			description:
+				'Use the same Llama 2 models in multiple environments with the llama2 component.',
+			link: '/llama2'
+		},
+		{
+			title: 'Text Redaction',
+			description:
+				'Ensure consistent PII redaction across different languages and different environments by using the exact same binaries.',
+			link: '/redact'
+		},
+		{
+			title: 'Object Recognition',
+			description: 'Use YOLOv8 AI models to detect objects in image frames.',
+			link: '/yolo'
+		}
+	];
 </script>
 
 <div class="container mx-auto p-6">
 	<div class="text-center">
 		<img src="wick_logo.png" alt="Wick Framework Logo" class="w-96 mx-auto mb-4" />
-		<p class="text-xl mb-4">
-			Unleash the true potential of WebAssembly. Run the same code on the server, client, mobile,
-			command line, APIs, workers, anywhere.
-		</p>
+		<p class="text-xl mb-4">Bring WebAssembly Everywhere.</p>
+		<p>Run the same binaries on the server, client, mobile, CLI, APIs, workers, and beyond.</p>
 	</div>
-
+</div>
+<Section>
 	<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-		<div class="bg-gray-100 p-6 rounded-md">
-			<h2 class="text-2xl font-bold mb-2">Llama2</h2>
-			<p class="mb-4">
-				Dramatically reduce server compute costs with Wick by running the same models on the client
-				as you do the server.
-			</p>
-			<a href="/llama2" class="text-blue-500 hover:underline">Llama2 Example</a>
-		</div>
-
-		<div class="bg-gray-100 p-6 rounded-md">
-			<h2 class="text-2xl font-bold mb-2">Text Redaction</h2>
-			<p class="mb-4">
-				Consistent redact PII across different languages and different environments, from server to
-				edge to client.
-			</p>
-			<a href="/redact" class="text-blue-500 hover:underline">Redaction Example</a>
-		</div>
+		{#each demos as demo}
+			<DemoItem {...demo} />
+		{/each}
 	</div>
-</div>
+</Section>
diff --git a/ui/src/routes/llama2/+page.svelte b/ui/src/routes/llama2/+page.svelte
index 6c9dffa..3d29345 100644
--- a/ui/src/routes/llama2/+page.svelte
+++ b/ui/src/routes/llama2/+page.svelte
@@ -3,12 +3,14 @@
 	import { Alert, Button, Textarea } from 'flowbite-svelte';
 	import { writable, type Writable } from 'svelte/store';
 
-	import { decode, encode } from '@msgpack/msgpack';
-	import { from } from 'rxjs';
-	import { Packet, WasmRsComponent } from '@candlecorp/wick';
-	import { instantiateComponentWorker } from '$lib/workers';
+	import { decode } from '@msgpack/msgpack';
 	import { bundles } from './bundles.js';
 	import { onDestroy } from 'svelte';
+	import { cleanup, invoke } from './processor.js';
+	import Section from '../../components/Section.svelte';
+	import Terminal from '../../components/Terminal.svelte';
+	import { cli } from './wick-output.js';
+	import { description, header } from '../../styles';
 
 	let selectedBundle = 'stories15M';
 
@@ -40,35 +42,17 @@
 			{ sender: 'prompt', message: prompt.trim() },
 			{ sender: 'response', message: '' }
 		]);
-		const aiMessageIndex = $generationHistory.length;
-		await invoke(prompt, aiMessageIndex - 1);
-	}
-
-	let component: WasmRsComponent | undefined;
-
-	async function invoke(input: string, aiMessageIndex: number): Promise<void> {
-		if (!component) {
-			const c = await instantiateComponentWorker('/components/llama.signed.wasm');
-
-			component = c;
-		}
-		const instance = await component.instantiate({
-			config: {
-				model_dir: '/',
-				model: `${selectedBundle}.bin`,
-				tokenizer: 'tokenizer.json'
-			}
-		});
-
-		const stream = from([new Packet('prompt', encode(input)), Packet.Done('prompt')]);
-		const result = await instance.invoke('generate', stream, { max_length: 512 });
+		const aiMessageIndex = $generationHistory.length - 1;
+		const output = await invoke(selectedBundle, prompt);
 		state = State.Responding;
-		result.subscribe({
+		output.subscribe({
 			next(packet) {
 				if (!packet.data) {
 					console.log('no data');
 					return;
 				}
+				console.log({ packet });
+
 				const word = decode(packet.data);
 				generationHistory.update((value) => {
 					const updatedValue = [...value];
@@ -95,64 +79,83 @@
 		}
 	}
 
-	onDestroy(() => {
-		if (component) {
-			component.terminate();
-		}
-	});
+	onDestroy(cleanup);
 </script>
 
-<div class="w-full flex justify-center">
-	<div class="w-full w-3/5">
-		<BundleDownload {bundles} bind:selectedBundle>
-			<Button
-				pill
-				class="mt-2"
-				disabled={!(bundles[selectedBundle] || {}).ready || state == State.Responding}
-				on:click={handleSend}
-			>
-				Generate
-			</Button>
-		</BundleDownload>
-	</div>
-</div>
-<div class="w-full mt-4 flex justify-center">
-	<div class="w-full w-3/5">
-		<div class="container mx-auto px-4">
-			<div class="mx-auto">
-				<form on:submit|preventDefault={handleSend}>
-					<label for="prompt" class="sr-only">Prompt</label>
-					<Alert color="dark" class="px-3 py-2 w-full">
-						<svelte:fragment slot="icon">
-							<Textarea
-								id="prompt"
-								class="mx-4 resize-none"
-								rows="1"
-								placeholder={defaultMessage}
-								bind:value={prompt}
-								on:input={autoGrow}
-								on:keydown={checkKey}
-								style="height: 2.85em; max-height: 10em; overflow-y: auto;"
-							/>
-						</svelte:fragment>
-					</Alert>
-				</form>
-			</div>
+<h1 class={header}>Object Detection in Images</h1>
+<Section>
+	<p class={description}>
+		This demo uses the <strong>candle_ml/llama</strong> WebAssembly component to generate text using
+		Llama 2 LLM models.
+	</p>
+	<p class={description}>
+		It uses models generated by
+		<a href="https://github.com/karpathy/llama2.c">Andrey Karpathy</a> and is built using the
+		<a href="https://github.com/candlecorp/wick">Wick WebAssembly framework</a>, and
+		<a href="https://github.com/huggingface/candle">HuggingFace's Candle library</a>.
+	</p>
+</Section>
+<Section header="Online demo">
+	<BundleDownload {bundles} bind:selectedBundle>
+		<Button
+			pill
+			class="mt-2"
+			disabled={!(bundles[selectedBundle] || {}).ready || state == State.Responding}
+			on:click={handleSend}
+		>
+			Generate
+		</Button>
+	</BundleDownload>
+</Section>
+<Section>
+	<div class="container mx-auto">
+		<div class="mx-auto">
+			<form on:submit|preventDefault={handleSend}>
+				<label for="prompt" class="sr-only">Prompt</label>
+				<Alert color="dark" class="px-3 py-2 w-full">
+					<svelte:fragment slot="icon">
+						<Textarea
+							id="prompt"
+							class="mx-4 resize-none"
+							rows="1"
+							placeholder={defaultMessage}
+							bind:value={prompt}
+							on:input={autoGrow}
+							on:keydown={checkKey}
+							style="height: 2.85em; max-height: 10em; overflow-y: auto;"
+						/>
+					</svelte:fragment>
+				</Alert>
+			</form>
 		</div>
-		<div class="container mx-auto px-4">
-			<div class="mx-auto">
-				<div class="h-96 overflow-y-auto p-4 border rounded shadow" bind:this={textDiv}>
-					{#each $generationHistory as { sender, message }, index}
-						{#if sender === 'prompt'}
-							<span class="text-gray-400">{message}</span>
-						{:else}
-							{message}
-							<br />
-							<br />
-						{/if}
-					{/each}
-				</div>
+	</div>
+	<div class="container mx-auto">
+		<div class="mx-auto">
+			<div class="h-96 overflow-y-auto p-4 border rounded shadow" bind:this={textDiv}>
+				{#each $generationHistory as { sender, message }, index}
+					{#if sender === 'prompt'}
+						<span class="text-gray-400">{message}</span>
+					{:else}
+						{message}
+						<br />
+						<br />
+					{/if}
+				{/each}
 			</div>
 		</div>
 	</div>
-</div>
+</Section>
+<Section header="On the command line">
+	<p class="mt-2">Use the following command to run this in your terminal:</p>
+	<Terminal
+		lines={[
+			{
+				command:
+					'wick invoke candle_ml/llama2:0.0.1 generate --with=@config.json -- --prompt="One day"',
+				output: ''
+			}
+		]}
+	/>
+	<p class="mt-2">For example:</p>
+	<Terminal lines={cli} />
+</Section>
diff --git a/ui/src/routes/llama2/processor.ts b/ui/src/routes/llama2/processor.ts
new file mode 100644
index 0000000..9ce84c8
--- /dev/null
+++ b/ui/src/routes/llama2/processor.ts
@@ -0,0 +1,32 @@
+import { instantiateComponentWorker } from '$lib/workers';
+import { Packet, type WasmRsComponent } from '@candlecorp/wick';
+import { encode } from '@msgpack/msgpack';
+import { Observable, from } from 'rxjs';
+
+let component: WasmRsComponent | undefined;
+
+export async function invoke(model: string, input: string): Promise<Observable<Packet>> {
+	if (!component) {
+		const c = await instantiateComponentWorker('/components/llama.signed.wasm');
+
+		component = c;
+	}
+	const instance = await component.instantiate({
+		config: {
+			model_dir: '/',
+			model: `${model}.bin`,
+			tokenizer: 'tokenizer.json'
+		}
+	});
+
+	const stream = from([new Packet('prompt', encode(input)), Packet.Done('prompt')]);
+	const result = await instance.invoke('generate', stream, { max_length: 512 });
+	return result;
+}
+
+export function cleanup() {
+	if (component) {
+		component.terminate();
+		component = undefined;
+	}
+}
diff --git a/ui/src/routes/llama2/wick-output.ts b/ui/src/routes/llama2/wick-output.ts
new file mode 100644
index 0000000..9129782
--- /dev/null
+++ b/ui/src/routes/llama2/wick-output.ts
@@ -0,0 +1,265 @@
+import type { Line } from '../../components/Terminal.svelte';
+
+export const cli: Line[] = [
+	{
+		command:
+			'wick invoke candle_ml/llama2:0.0.1 generate --with=@config.json -- --prompt="One day"',
+		output: [
+			{ payload: { value: ',' }, port: 'output' },
+			{ payload: { value: ' a' }, port: 'output' },
+			{ payload: { value: ' little' }, port: 'output' },
+			{ payload: { value: ' girl' }, port: 'output' },
+			{ payload: { value: ' named' }, port: 'output' },
+			{ payload: { value: ' L' }, port: 'output' },
+			{ payload: { value: 'ily' }, port: 'output' },
+			{ payload: { value: ' went' }, port: 'output' },
+			{ payload: { value: ' to' }, port: 'output' },
+			{ payload: { value: ' the' }, port: 'output' },
+			{ payload: { value: ' park' }, port: 'output' },
+			{ payload: { value: ' with' }, port: 'output' },
+			{ payload: { value: ' her' }, port: 'output' },
+			{ payload: { value: ' mom' }, port: 'output' },
+			{ payload: { value: '.' }, port: 'output' },
+			{ payload: { value: ' They' }, port: 'output' },
+			{ payload: { value: ' saw' }, port: 'output' },
+			{ payload: { value: ' a' }, port: 'output' },
+			{ payload: { value: ' big' }, port: 'output' },
+			{ payload: { value: ' tree' }, port: 'output' },
+			{ payload: { value: ' with' }, port: 'output' },
+			{ payload: { value: ' many' }, port: 'output' },
+			{ payload: { value: ' leaves' }, port: 'output' },
+			{ payload: { value: '.' }, port: 'output' },
+			{ payload: { value: ' L' }, port: 'output' },
+			{ payload: { value: 'ily' }, port: 'output' },
+			{ payload: { value: ' wanted' }, port: 'output' },
+			{ payload: { value: ' to' }, port: 'output' },
+			{ payload: { value: ' clim' }, port: 'output' },
+			{ payload: { value: 'b' }, port: 'output' },
+			{ payload: { value: ' the' }, port: 'output' },
+			{ payload: { value: ' tree' }, port: 'output' },
+			{ payload: { value: ' and' }, port: 'output' },
+			{ payload: { value: ' see' }, port: 'output' },
+			{ payload: { value: ' how' }, port: 'output' },
+			{ payload: { value: ' high' }, port: 'output' },
+			{ payload: { value: ' she' }, port: 'output' },
+			{ payload: { value: ' could' }, port: 'output' },
+			{ payload: { value: ' go' }, port: 'output' },
+			{ payload: { value: '.' }, port: 'output' },
+			{ payload: { value: ' Her' }, port: 'output' },
+			{ payload: { value: ' mom' }, port: 'output' },
+			{ payload: { value: ' said' }, port: 'output' },
+			{ payload: { value: ',' }, port: 'output' },
+			{ payload: { value: ' "' }, port: 'output' },
+			{ payload: { value: 'Be' }, port: 'output' },
+			{ payload: { value: ' careful' }, port: 'output' },
+			{ payload: { value: ',' }, port: 'output' },
+			{ payload: { value: ' L' }, port: 'output' },
+			{ payload: { value: 'ily' }, port: 'output' },
+			{ payload: { value: '!"' }, port: 'output' },
+			{ payload: { value: '\n' }, port: 'output' },
+			{ payload: { value: 'L' }, port: 'output' },
+			{ payload: { value: 'ily' }, port: 'output' },
+			{ payload: { value: ' started' }, port: 'output' },
+			{ payload: { value: ' to' }, port: 'output' },
+			{ payload: { value: ' clim' }, port: 'output' },
+			{ payload: { value: 'b' }, port: 'output' },
+			{ payload: { value: ' the' }, port: 'output' },
+			{ payload: { value: ' tree' }, port: 'output' },
+			{ payload: { value: '.' }, port: 'output' },
+			{ payload: { value: ' She' }, port: 'output' },
+			{ payload: { value: ' was' }, port: 'output' },
+			{ payload: { value: ' very' }, port: 'output' },
+			{ payload: { value: ' happy' }, port: 'output' },
+			{ payload: { value: '.' }, port: 'output' },
+			{ payload: { value: ' But' }, port: 'output' },
+			{ payload: { value: ' then' }, port: 'output' },
+			{ payload: { value: ',' }, port: 'output' },
+			{ payload: { value: ' she' }, port: 'output' },
+			{ payload: { value: ' saw' }, port: 'output' },
+			{ payload: { value: ' a' }, port: 'output' },
+			{ payload: { value: ' small' }, port: 'output' },
+			{ payload: { value: ' bird' }, port: 'output' },
+			{ payload: { value: ' on' }, port: 'output' },
+			{ payload: { value: ' a' }, port: 'output' },
+			{ payload: { value: ' branch' }, port: 'output' },
+			{ payload: { value: '.' }, port: 'output' },
+			{ payload: { value: ' The' }, port: 'output' },
+			{ payload: { value: ' bird' }, port: 'output' },
+			{ payload: { value: ' looked' }, port: 'output' },
+			{ payload: { value: ' sad' }, port: 'output' },
+			{ payload: { value: '.' }, port: 'output' },
+			{ payload: { value: ' L' }, port: 'output' },
+			{ payload: { value: 'ily' }, port: 'output' },
+			{ payload: { value: ' asked' }, port: 'output' },
+			{ payload: { value: ' the' }, port: 'output' },
+			{ payload: { value: ' bird' }, port: 'output' },
+			{ payload: { value: ',' }, port: 'output' },
+			{ payload: { value: ' "' }, port: 'output' },
+			{ payload: { value: 'Why' }, port: 'output' },
+			{ payload: { value: ' are' }, port: 'output' },
+			{ payload: { value: ' you' }, port: 'output' },
+			{ payload: { value: ' sad' }, port: 'output' },
+			{ payload: { value: '?"' }, port: 'output' },
+			{ payload: { value: ' The' }, port: 'output' },
+			{ payload: { value: ' bird' }, port: 'output' },
+			{ payload: { value: ' said' }, port: 'output' },
+			{ payload: { value: ',' }, port: 'output' },
+			{ payload: { value: ' "' }, port: 'output' },
+			{ payload: { value: 'I' }, port: 'output' },
+			{ payload: { value: ' lost' }, port: 'output' },
+			{ payload: { value: ' my' }, port: 'output' },
+			{ payload: { value: ' friend' }, port: 'output' },
+			{ payload: { value: '.' }, port: 'output' },
+			{ payload: { value: ' I' }, port: 'output' },
+			{ payload: { value: ' can' }, port: 'output' },
+			{ payload: { value: "'" }, port: 'output' },
+			{ payload: { value: 't' }, port: 'output' },
+			{ payload: { value: ' find' }, port: 'output' },
+			{ payload: { value: ' her' }, port: 'output' },
+			{ payload: { value: '."' }, port: 'output' },
+			{ payload: { value: '\n' }, port: 'output' },
+			{ payload: { value: 'L' }, port: 'output' },
+			{ payload: { value: 'ily' }, port: 'output' },
+			{ payload: { value: ' wanted' }, port: 'output' },
+			{ payload: { value: ' to' }, port: 'output' },
+			{ payload: { value: ' help' }, port: 'output' },
+			{ payload: { value: ' the' }, port: 'output' },
+			{ payload: { value: ' bird' }, port: 'output' },
+			{ payload: { value: '.' }, port: 'output' },
+			{ payload: { value: ' She' }, port: 'output' },
+			{ payload: { value: ' clim' }, port: 'output' },
+			{ payload: { value: 'bed' }, port: 'output' },
+			{ payload: { value: ' down' }, port: 'output' },
+			{ payload: { value: ' the' }, port: 'output' },
+			{ payload: { value: ' tree' }, port: 'output' },
+			{ payload: { value: ' and' }, port: 'output' },
+			{ payload: { value: ' went' }, port: 'output' },
+			{ payload: { value: ' to' }, port: 'output' },
+			{ payload: { value: ' look' }, port: 'output' },
+			{ payload: { value: ' for' }, port: 'output' },
+			{ payload: { value: ' the' }, port: 'output' },
+			{ payload: { value: ' bird' }, port: 'output' },
+			{ payload: { value: "'" }, port: 'output' },
+			{ payload: { value: 's' }, port: 'output' },
+			{ payload: { value: ' friend' }, port: 'output' },
+			{ payload: { value: '.' }, port: 'output' },
+			{ payload: { value: ' They' }, port: 'output' },
+			{ payload: { value: ' looked' }, port: 'output' },
+			{ payload: { value: ' everywhere' }, port: 'output' },
+			{ payload: { value: ' but' }, port: 'output' },
+			{ payload: { value: ' could' }, port: 'output' },
+			{ payload: { value: ' not' }, port: 'output' },
+			{ payload: { value: ' find' }, port: 'output' },
+			{ payload: { value: ' them' }, port: 'output' },
+			{ payload: { value: '.' }, port: 'output' },
+			{ payload: { value: ' Then' }, port: 'output' },
+			{ payload: { value: ',' }, port: 'output' },
+			{ payload: { value: ' L' }, port: 'output' },
+			{ payload: { value: 'ily' }, port: 'output' },
+			{ payload: { value: ' saw' }, port: 'output' },
+			{ payload: { value: ' a' }, port: 'output' },
+			{ payload: { value: ' big' }, port: 'output' },
+			{ payload: { value: ' branch' }, port: 'output' },
+			{ payload: { value: ' with' }, port: 'output' },
+			{ payload: { value: ' many' }, port: 'output' },
+			{ payload: { value: ' birds' }, port: 'output' },
+			{ payload: { value: ' on' }, port: 'output' },
+			{ payload: { value: ' it' }, port: 'output' },
+			{ payload: { value: '.' }, port: 'output' },
+			{ payload: { value: ' She' }, port: 'output' },
+			{ payload: { value: ' thought' }, port: 'output' },
+			{ payload: { value: ' the' }, port: 'output' },
+			{ payload: { value: ' bird' }, port: 'output' },
+			{ payload: { value: "'" }, port: 'output' },
+			{ payload: { value: 's' }, port: 'output' },
+			{ payload: { value: ' friend' }, port: 'output' },
+			{ payload: { value: ' was' }, port: 'output' },
+			{ payload: { value: ' there' }, port: 'output' },
+			{ payload: { value: '!' }, port: 'output' },
+			{ payload: { value: ' But' }, port: 'output' },
+			{ payload: { value: ' when' }, port: 'output' },
+			{ payload: { value: ' she' }, port: 'output' },
+			{ payload: { value: ' got' }, port: 'output' },
+			{ payload: { value: ' closer' }, port: 'output' },
+			{ payload: { value: ',' }, port: 'output' },
+			{ payload: { value: ' she' }, port: 'output' },
+			{ payload: { value: ' saw' }, port: 'output' },
+			{ payload: { value: ' that' }, port: 'output' },
+			{ payload: { value: ' the' }, port: 'output' },
+			{ payload: { value: ' bird' }, port: 'output' },
+			{ payload: { value: "'" }, port: 'output' },
+			{ payload: { value: 's' }, port: 'output' },
+			{ payload: { value: ' friend' }, port: 'output' },
+			{ payload: { value: ' was' }, port: 'output' },
+			{ payload: { value: ' not' }, port: 'output' },
+			{ payload: { value: ' alone' }, port: 'output' },
+			{ payload: { value: '.' }, port: 'output' },
+			{ payload: { value: ' The' }, port: 'output' },
+			{ payload: { value: ' bird' }, port: 'output' },
+			{ payload: { value: ' had' }, port: 'output' },
+			{ payload: { value: ' a' }, port: 'output' },
+			{ payload: { value: ' baby' }, port: 'output' },
+			{ payload: { value: ' bird' }, port: 'output' },
+			{ payload: { value: ' in' }, port: 'output' },
+			{ payload: { value: ' its' }, port: 'output' },
+			{ payload: { value: ' nest' }, port: 'output' },
+			{ payload: { value: '!' }, port: 'output' },
+			{ payload: { value: '\n' }, port: 'output' },
+			{ payload: { value: 'L' }, port: 'output' },
+			{ payload: { value: 'ily' }, port: 'output' },
+			{ payload: { value: ' and' }, port: 'output' },
+			{ payload: { value: ' her' }, port: 'output' },
+			{ payload: { value: ' mom' }, port: 'output' },
+			{ payload: { value: ' were' }, port: 'output' },
+			{ payload: { value: ' surprised' }, port: 'output' },
+			{ payload: { value: '.' }, port: 'output' },
+			{ payload: { value: ' They' }, port: 'output' },
+			{ payload: { value: ' took' }, port: 'output' },
+			{ payload: { value: ' the' }, port: 'output' },
+			{ payload: { value: ' baby' }, port: 'output' },
+			{ payload: { value: ' bird' }, port: 'output' },
+			{ payload: { value: ' home' }, port: 'output' },
+			{ payload: { value: ' and' }, port: 'output' },
+			{ payload: { value: ' put' }, port: 'output' },
+			{ payload: { value: ' it' }, port: 'output' },
+			{ payload: { value: ' back' }, port: 'output' },
+			{ payload: { value: ' in' }, port: 'output' },
+			{ payload: { value: ' the' }, port: 'output' },
+			{ payload: { value: ' tree' }, port: 'output' },
+			{ payload: { value: '.' }, port: 'output' },
+			{ payload: { value: ' The' }, port: 'output' },
+			{ payload: { value: ' baby' }, port: 'output' },
+			{ payload: { value: ' bird' }, port: 'output' },
+			{ payload: { value: ' was' }, port: 'output' },
+			{ payload: { value: ' happy' }, port: 'output' },
+			{ payload: { value: ' again' }, port: 'output' },
+			{ payload: { value: '.' }, port: 'output' },
+			{ payload: { value: ' L' }, port: 'output' },
+			{ payload: { value: 'ily' }, port: 'output' },
+			{ payload: { value: ' learned' }, port: 'output' },
+			{ payload: { value: ' that' }, port: 'output' },
+			{ payload: { value: ' sometimes' }, port: 'output' },
+			{ payload: { value: ',' }, port: 'output' },
+			{ payload: { value: ' unexpected' }, port: 'output' },
+			{ payload: { value: ' things' }, port: 'output' },
+			{ payload: { value: ' can' }, port: 'output' },
+			{ payload: { value: ' happen' }, port: 'output' },
+			{ payload: { value: ' when' }, port: 'output' },
+			{ payload: { value: ' you' }, port: 'output' },
+			{ payload: { value: ' help' }, port: 'output' },
+			{ payload: { value: ' others' }, port: 'output' },
+			{ payload: { value: '.' }, port: 'output' },
+			{ payload: { value: '<s>' }, port: 'output' },
+			{ payload: { value: ' Once' }, port: 'output' },
+			{ payload: { value: ' upon' }, port: 'output' },
+			{ payload: { value: ' a' }, port: 'output' },
+			{ payload: { value: ' time' }, port: 'output' },
+			{ payload: { value: ',' }, port: 'output' },
+			{ payload: { value: ' there' }, port: 'output' },
+			{ payload: { value: ' was' }, port: 'output' },
+			{ payload: { value: ' a' }, port: 'output' }
+		]
+			.map((json) => JSON.stringify(json))
+			.join('\n')
+	}
+];
diff --git a/ui/src/routes/redact/+page.svelte b/ui/src/routes/redact/+page.svelte
index 0dd0947..5ace97f 100644
--- a/ui/src/routes/redact/+page.svelte
+++ b/ui/src/routes/redact/+page.svelte
@@ -3,12 +3,16 @@
 	import { Button, Textarea } from 'flowbite-svelte';
 	import { from } from 'rxjs';
 	import { Packet, WasmRsComponent } from '@candlecorp/wick';
-	import { getComponentInstance, instantiateComponentWorker } from '$lib/workers';
+	import { instantiateComponentWorker } from '$lib/workers';
 	import { onDestroy } from 'svelte';
+	import Section from '../../components/Section.svelte';
+	import { description, header } from '../../styles';
+	import Terminal from '../../components/Terminal.svelte';
+	import { cli } from './wick-output.js';
 
 	let inputObj = {
 		name: 'John',
-		age: 'thirty',
+		age: 30,
 		email: 'john@somewhere.com',
 		ssn: '123-45-6789',
 		ccn: '1234-5678-9012-3456'
@@ -30,7 +34,6 @@
 
 		const stream = from([new Packet('input', encode(sampleInput)), Packet.Done('input')]);
 		const result = await instance.invoke('regex', stream, {
-			append_hash: true,
 			patterns: [
 				'\\b\\d\\d\\d-\\d\\d-\\d\\d\\d\\d\\b',
 				'\\b\\d\\d\\d\\d-\\d\\d\\d\\d-\\d\\d\\d\\d-\\d\\d\\d\\d\\b',
@@ -62,30 +65,40 @@
 	});
 </script>
 
-<div class="w-full flex flex-col justify-center items-center">
-	<div class="w-3/5">
-		<div>
-			<Textarea
-				id="input"
-				class="mx-4 resize-none"
-				rows="1"
-				placeholder={sampleInput}
-				bind:value={input}
-				style="height: 12em; max-height: 20em; overflow-y: auto;"
-			/>
-		</div>
+<h1 class={header}>Text Redaction component</h1>
+<Section>
+	<p class={description}>
+		This demo uses the <strong>common/redact</strong> Wick component to redact text matching an expression.
+	</p>
+	<p class={description}>
+		It uses the
+		<a href="https://github.com/candlecorp/wick">Wick framework</a> to compile a regular expression engine
+		into WebAssembly. It demonstrates a way to have 100% consistent processing across environments using
+		the same configuration.
+	</p>
+</Section>
+<Section header="Online demo">
+	<div class="flex flex-col">
+		<Textarea id="input" class="h-48 font-mono" placeholder={sampleInput} bind:value={input} />
+		<Button on:click={validateInput} class="m-2">Redact</Button>
+		<Textarea
+			id="input"
+			class=" h-48 font-mono"
+			placeholder="After Validation"
+			bind:value={validated}
+		/>
 	</div>
-	<div class="flex justify-center mt-2"><Button on:click={validateInput}>Validate</Button></div>
-	<div class="w-3/5 mt-2">
-		<div>
-			<Textarea
-				id="input"
-				class="mx-4 resize-none"
-				rows="1"
-				placeholder="After Validation"
-				bind:value={validated}
-				style="height: 12em; max-height: 20em; overflow-y: auto;"
-			/>
-		</div>
-	</div>
-</div>
+</Section>
+<Section header="On the command line">
+	<p class="mt-2">Use the following command to run this in your terminal:</p>
+	<Terminal
+		lines={[
+			{
+				command: 'wick invoke common/redact:0.0.1 --op-with=@config.json regex -- --input="[DATA]"',
+				output: ''
+			}
+		]}
+	/>
+	<p class="mt-2">For example:</p>
+	<Terminal lines={cli} />
+</Section>
diff --git a/ui/src/routes/redact/wick-output.ts b/ui/src/routes/redact/wick-output.ts
new file mode 100644
index 0000000..0f7a353
--- /dev/null
+++ b/ui/src/routes/redact/wick-output.ts
@@ -0,0 +1,19 @@
+import type { Line } from '../../components/Terminal.svelte';
+
+export const cli: Line[] = [
+	{
+		command: 'cat config.json',
+		output: `{
+  "patterns": [
+    "\\b\\d\\d\\d-\\d\\d-\\d\\d\\d\\d\\b",
+    "\\b\\d\\d\\d\\d-\\d\\d\\d\\d-\\d\\d\\d\\d-\\d\\d\\d\\d\\b",
+    "\\b[a-zA-Z-.]+@([a-zA-Z-]+.)+[a-zA-Z-]{2,}\\b"
+  ]
+}`
+	},
+	{
+		command:
+			'wick invoke common/redact:0.0.1 --op-with=@config.json regex -- --input="003-68-5339"',
+		output: '{"payload":{"value":"XXXXXXXXXXX"},"port":"output"}'
+	}
+];
diff --git a/ui/src/routes/yolo/+page.svelte b/ui/src/routes/yolo/+page.svelte
index 572f7d5..c011766 100644
--- a/ui/src/routes/yolo/+page.svelte
+++ b/ui/src/routes/yolo/+page.svelte
@@ -1,25 +1,14 @@
 <script lang="ts">
-	import { decode, encode } from '@msgpack/msgpack';
-	import { Button, Textarea, Dropzone } from 'flowbite-svelte';
-	import { Observable, from, type Observer } from 'rxjs';
-	import { Packet, WasmRsComponent, WasmRsComponentInstance } from '@candlecorp/wick';
-	import { getComponentInstance, instantiateComponentWorker } from '$lib/workers';
-	import { onDestroy, onMount } from 'svelte';
-	import type { BundleEntry } from '../../components/BundleDownload.svelte';
+	import { Button, Dropzone } from 'flowbite-svelte';
+	import { onDestroy } from 'svelte';
 	import BundleDownload from '../../components/BundleDownload.svelte';
-	import { Subject } from 'rxjs';
-	import { base64ToBytes, bytesToBase64 } from '$lib/base64';
-	import type { DragEventHandler } from 'svelte/elements';
+	import { bytesToBase64 } from '$lib/base64';
 	import { bundles } from './bundles.js';
-
-	interface Detection {
-		confidence: number;
-		keypoints: number[];
-		xmax: number;
-		xmin: number;
-		ymax: number;
-		ymin: number;
-	}
+	import { cli } from './wick-output.js';
+	import Terminal from '../../components/Terminal.svelte';
+	import Section from '../../components/Section.svelte';
+	import { Processor, cleanup } from './processor.js';
+	import { description, header } from '../../styles.js';
 
 	let selectedBundle = 'yolov8n';
 	const examples = [
@@ -30,140 +19,17 @@
 		}
 	];
 
-	let component: WasmRsComponent | undefined;
-	class Processor {
-		buffer: HTMLCanvasElement;
-		bufferCtx: CanvasRenderingContext2D;
-		imageCanvas: HTMLCanvasElement;
-		imageContext: CanvasRenderingContext2D;
-		width: number = 0;
-		height: number = 0;
-		factor: number = 2;
-
-		previousTimeStamp = 0;
-		start: number | undefined;
-
-		constructor(
-			private instance: WasmRsComponentInstance,
-			private component: WasmRsComponent,
-			private subject: Subject<Packet>,
-			private observable: Observable<Packet>
-		) {
-			this.imageCanvas = document.getElementById('imageCanvas') as HTMLCanvasElement;
-			this.imageContext = this.imageCanvas.getContext('2d')!;
-			this.buffer = document.getElementById('bufferCanvas') as HTMLCanvasElement;
-			this.bufferCtx = this.buffer.getContext('2d')!;
-			const size = this.imageCanvas.width * this.imageCanvas.height;
-			const target = 480 * 320;
-			const multiple = size / target;
-
-			this.factor = Math.max(1, Math.floor(multiple));
-			console.log({ multiple, factor: this.factor });
-
-			this.buffer.width = this.imageCanvas.width / this.factor;
-			this.buffer.height = this.imageCanvas.height / this.factor;
-			const ctx = this.imageContext;
-			const factor = this.factor;
-
-			this.observable.subscribe({
-				next(packet) {
-					if (!packet.data) {
-						console.log('no data');
-						return;
-					}
-
-					const boxes = decode(packet.data) as [string, Detection][];
-					for (const box of boxes) {
-						const [label, detection] = box;
-						const { xmin, ymin, xmax, ymax } = detection;
-						ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
-						ctx.beginPath();
-						ctx.rect(xmin * factor, ymin * factor, (xmax - xmin) * factor, (ymax - ymin) * factor);
-						ctx.stroke();
-						ctx.font = '16px Arial';
-						const metrics = ctx.measureText(label);
-						ctx.fillStyle = 'white';
-						ctx.fillRect(xmin * factor - 5, ymin * factor - 25, metrics.width + 10, 20);
-						ctx.fillStyle = 'red';
-						ctx.fillText(label, xmin * factor, ymin * factor - 10);
-					}
-				},
-				complete() {
-					console.log('done');
-				},
-				error(err) {
-					console.log('error', err);
-				}
-			});
-			this.processFrame();
-		}
-
-		terminate() {
-			if (this.component) {
-				this.component.terminate();
-			}
-		}
-
-		static async detect(): Promise<Processor> {
-			if (!component) {
-				const c = await instantiateComponentWorker('/components/yolo.signed.wasm');
-				component = c;
-			}
-			const instance = await component.instantiate({
-				config: {
-					model_dir: '/',
-					model: `${selectedBundle}.safetensors`
-				}
-			});
-
-			const subject = new Subject<Packet>();
-			const observer = instance.invoke('detect', from(subject), {
-				confidence: 0.25,
-				iou: 0.45
-			});
-
-			return new Processor(instance, component, subject, observer);
-		}
-
-		processFrame() {
-			const data = this.imageContext.getImageData(
-				0,
-				0,
-				this.imageCanvas.width,
-				this.imageCanvas.height
-			);
-
-			const smaller = this.bufferCtx.drawImage(
-				this.imageCanvas,
-				0,
-				0,
-				this.buffer.width,
-				this.buffer.height
-			);
-
-			const png = this.buffer.toDataURL('image/png');
-			const prefix = 'data:image/png;base64,';
-			const base64 = png.slice(prefix.length);
-			console.log({ len: base64.length });
-			this.subject.next(new Packet('image_data', encode(base64)));
-		}
-	}
-
-	let img: HTMLImageElement | undefined;
+	let chosenImage: HTMLImageElement | undefined;
 	let processor: Processor | undefined;
 
 	function onDrop(e: DragEvent) {
 		e.preventDefault();
-		debugger;
 		const files = e.dataTransfer?.files;
-		loadFile(files);
+		fromFileList(files);
 	}
 
-	function loadFile(files?: FileList) {
-		if (processor) {
-			processor.terminate();
-			processor = undefined;
-		}
+	function fromFileList(files?: FileList) {
+		cleanup();
 		if (!files) return;
 		for (let i = 0; i < files.length; i++) {
 			const file = files[i];
@@ -172,67 +38,69 @@
 					const base64 = bytesToBase64(new Uint8Array(buffer));
 					const prefix = 'data:image/png;base64,';
 					const png = prefix + base64;
-					img = new Image();
-					img.src = png;
-					handleLoad(img);
+					handleLoad(png);
 				});
 			}
 		}
 	}
 
-	function handleLoad(newImage: HTMLImageElement) {
-		img = newImage;
-		img.onload = () => {
+	function handleLoad(src: string) {
+		const img = new Image();
+		img.src = src;
+		chosenImage = img;
+		chosenImage.onload = () => {
 			const imageCanvas = document.getElementById('imageCanvas') as HTMLCanvasElement;
-			imageCanvas.width = img!.width;
-			imageCanvas.height = img!.height;
-			imageCanvas.getContext('2d')!.drawImage(img!, 0, 0, img!.width, img!.height);
+			imageCanvas.width = chosenImage!.width;
+			imageCanvas.height = chosenImage!.height;
+			imageCanvas
+				.getContext('2d')!
+				.drawImage(chosenImage!, 0, 0, chosenImage!.width, chosenImage!.height);
 		};
 	}
 
 	function exampleClick(index: number) {
-		if (processor) {
-			processor.terminate();
-			processor = undefined;
-		}
-		let example = examples[index];
-		const img = new Image();
-		img.src = example.src;
-		handleLoad(img);
+		cleanup();
+		handleLoad(examples[index].src);
 	}
 
 	function onChange(e: Event) {
 		const target = e.target as HTMLInputElement | undefined;
 		const files = target?.files || undefined;
-		loadFile(files);
+		fromFileList(files);
 	}
 	async function play() {
-		if (img) {
-			processor = await Processor.detect();
+		cleanup();
+
+		if (chosenImage) {
+			processor = await Processor.detect(selectedBundle);
 		}
 	}
-	onDestroy(() => {
-		if (component) {
-			component.terminate();
-		}
-	});
+	onDestroy(cleanup);
 </script>
 
-<div class="w-full flex justify-center">
-	<div class="w-full w-3/5">
-		<h1 class="text-center">Select demo model</h1>
-		<BundleDownload {bundles} bind:selectedBundle>
-			<Button
-				pill
-				class="mt-2"
-				on:click={play}
-				type="submit"
-				disabled={!(img && (bundles[selectedBundle] || {}).ready)}>Detect</Button
-			>
-		</BundleDownload>
-	</div>
-</div>
-<div class="w-full mt-4">
+<h1 class={header}>Object Detection in Images</h1>
+<Section>
+	<p class={description}>
+		This demo uses the <strong>candle_ml/yolo</strong> WebAssembly component to detect objects in images.
+	</p>
+	<p class={description}>
+		It uses YOLOv8 models and is built using the
+		<a href="https://github.com/candlecorp/wick">Wick WebAssembly framework</a>, and
+		<a href="https://github.com/huggingface/candle">HuggingFace's Candle library</a>.
+	</p>
+</Section>
+<Section header="Online demo">
+	<BundleDownload {bundles} bind:selectedBundle>
+		<Button
+			pill
+			class="mt-2"
+			on:click={play}
+			type="submit"
+			disabled={!(chosenImage && (bundles[selectedBundle] || {}).ready)}>Detect</Button
+		>
+	</BundleDownload>
+</Section>
+<Section>
 	<Dropzone
 		on:drop={onDrop}
 		on:dragover={(event) => {
@@ -241,7 +109,7 @@
 		on:change={onChange}
 		class="flex flex-col justify-center items-center w-full bg-gray-50 h-fit rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
 	>
-		{#if !img}
+		{#if !chosenImage}
 			<div class="h-64 flex flex-col justify-center items-center">
 				<svg
 					aria-hidden="true"
@@ -269,14 +137,33 @@
 			</div>
 		{/if}
 	</Dropzone>
-</div>
-<div class="w-full mt-4" id="examples">
-	{#each examples as example, i}
-		<button on:click={() => exampleClick(i)}>
-			<img src={example.src} alt={example.alt} class="object-cover h-44 w-64 rounded-lg m-1" />
-		</button>
-	{/each}
-</div>
+	<p class="mt-4">Or choose a sample image below</p>
+	<div class="flex justify-center items-center">
+		{#each examples as example, i}
+			<button on:click={() => exampleClick(i)} class="">
+				<img
+					src={example.src}
+					alt={example.alt}
+					class="object-cover aspect-square w-48 rounded-lg m-1"
+				/>
+			</button>
+		{/each}
+	</div>
+</Section>
+<Section header="On the command line">
+	<p class="mt-2">Use the following command to run this in your terminal:</p>
+	<Terminal
+		lines={[
+			{
+				command:
+					'wick invoke candle_ml/yolo:0.0.2 detect --with="[CONFIG]" -- --image_data=[IMAGE_BYTES]',
+				output: ''
+			}
+		]}
+	/>
+	<p class="mt-2">For example:</p>
+	<Terminal lines={cli} />
+</Section>
 
 <style>
 	#bufferCanvas {
diff --git a/ui/src/routes/yolo/processor.ts b/ui/src/routes/yolo/processor.ts
new file mode 100644
index 0000000..7e2b7f1
--- /dev/null
+++ b/ui/src/routes/yolo/processor.ts
@@ -0,0 +1,125 @@
+import { instantiateComponentWorker } from '$lib/workers';
+import { Packet, type WasmRsComponent } from '@candlecorp/wick';
+import { decode, encode } from '@msgpack/msgpack';
+import { Observable, from, Subject } from 'rxjs';
+
+let component: WasmRsComponent | undefined;
+
+interface Detection {
+	confidence: number;
+	keypoints: number[];
+	xmax: number;
+	xmin: number;
+	ymax: number;
+	ymin: number;
+}
+
+export function cleanup() {
+	if (component) {
+		component.terminate();
+		component = undefined;
+	}
+}
+
+export class Processor {
+	buffer: HTMLCanvasElement;
+	bufferCtx: CanvasRenderingContext2D;
+	imageCanvas: HTMLCanvasElement;
+	imageContext: CanvasRenderingContext2D;
+	width: number = 0;
+	height: number = 0;
+	factor: number = 2;
+
+	previousTimeStamp = 0;
+	start: number | undefined;
+
+	constructor(private subject: Subject<Packet>, private observable: Observable<Packet>) {
+		this.imageCanvas = document.getElementById('imageCanvas') as HTMLCanvasElement;
+		this.imageContext = this.imageCanvas.getContext('2d')!;
+		this.buffer = document.getElementById('bufferCanvas') as HTMLCanvasElement;
+		this.bufferCtx = this.buffer.getContext('2d')!;
+		const size = this.imageCanvas.width * this.imageCanvas.height;
+		const target = 480 * 320;
+		const multiple = size / target;
+
+		this.factor = Math.max(1, Math.floor(multiple));
+		console.log({ multiple, factor: this.factor });
+
+		this.buffer.width = this.imageCanvas.width / this.factor;
+		this.buffer.height = this.imageCanvas.height / this.factor;
+		const ctx = this.imageContext;
+		const factor = this.factor;
+
+		this.observable.subscribe({
+			next(packet) {
+				if (!packet.data) {
+					console.log('no data');
+					return;
+				}
+
+				const boxes = decode(packet.data) as [string, Detection][];
+				for (const box of boxes) {
+					const [label, detection] = box;
+					const { xmin, ymin, xmax, ymax } = detection;
+					ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+					ctx.beginPath();
+					ctx.rect(xmin * factor, ymin * factor, (xmax - xmin) * factor, (ymax - ymin) * factor);
+					ctx.lineWidth = 4;
+					ctx.strokeStyle = 'white';
+					ctx.stroke();
+					ctx.font = '34pt Arial';
+					const metrics = ctx.measureText(label);
+					ctx.fillStyle = 'white';
+					ctx.fillRect(
+						xmin * factor,
+						ymin * factor - metrics.fontBoundingBoxAscent - 6,
+						metrics.width + 10,
+						metrics.fontBoundingBoxAscent + 5
+					);
+					ctx.fillStyle = 'red';
+					ctx.fillText(label, xmin * factor + 5, ymin * factor - 10);
+				}
+			},
+			complete() {
+				console.log('done');
+			},
+			error(err) {
+				console.log('error', err);
+			}
+		});
+		this.processFrame();
+	}
+
+	static async detect(model: string): Promise<Processor> {
+		if (!component) {
+			const c = await instantiateComponentWorker('/components/yolo.signed.wasm');
+			component = c;
+		}
+		const instance = await component.instantiate({
+			config: {
+				model_dir: '/',
+				model: `${model}.safetensors`
+			}
+		});
+
+		const subject = new Subject<Packet>();
+		const observer = instance.invoke('detect', from(subject), {
+			confidence: 0.25,
+			iou: 0.45
+		});
+
+		return new Processor(subject, observer);
+	}
+
+	processFrame() {
+		this.imageContext.getImageData(0, 0, this.imageCanvas.width, this.imageCanvas.height);
+
+		this.bufferCtx.drawImage(this.imageCanvas, 0, 0, this.buffer.width, this.buffer.height);
+
+		const png = this.buffer.toDataURL('image/png');
+		const prefix = 'data:image/png;base64,';
+		const base64 = png.slice(prefix.length);
+		this.subject.next(new Packet('image_data', encode(base64)));
+		this.subject.next(Packet.Done('image_data'));
+	}
+}
diff --git a/ui/src/routes/yolo/wick-output.ts b/ui/src/routes/yolo/wick-output.ts
new file mode 100644
index 0000000..ad3698b
--- /dev/null
+++ b/ui/src/routes/yolo/wick-output.ts
@@ -0,0 +1,107 @@
+import type { Line } from '../../components/Terminal.svelte';
+
+export const cli: Line[] = [
+	{
+		command:
+			'wick invoke candle_ml/yolo:0.0.2 detect --with=@config.json -- --image_data=@soccer.jpg',
+		output: [
+			{
+				payload: {
+					value: [
+						[
+							'person',
+							{
+								confidence: 0.9256853461265564,
+								keypoints: [],
+								xmax: 235.46990966796875,
+								xmin: 69.84808349609375,
+								ymax: 385.51068115234375,
+								ymin: 70.73658752441406
+							}
+						],
+						[
+							'person',
+							{
+								confidence: 0.915441632270813,
+								keypoints: [],
+								xmax: 396.18756103515625,
+								xmin: 186.5444641113812,
+								ymax: 392.3243408203125,
+								ymin: 37.34172058105469
+							}
+						],
+						[
+							'person',
+							{
+								confidence: 0.9087674617767334,
+								keypoints: [],
+								xmax: 613,
+								xmin: 462.0843505859375,
+								ymax: 373.789306640625,
+								ymin: 23.754322052001953
+							}
+						],
+						[
+							'person',
+							{
+								confidence: 0.5383780598640442,
+								keypoints: [],
+								xmax: 363.3480224609375,
+								xmin: 325.07373046875,
+								ymax: 143.6885070807812,
+								ymin: 60.6527099609375
+							}
+						],
+						[
+							'person',
+							{
+								confidence: 0.2716786563396454,
+								keypoints: [],
+								xmax: 562.831787109375,
+								xmin: 466.9012756347656,
+								ymax: 224.9160461425712,
+								ymin: 22.33010482788086
+							}
+						],
+						[
+							'car',
+							{
+								confidence: 0.7425552010536194,
+								keypoints: [],
+								xmax: 482.6632995605469,
+								xmin: 355.2928771972656,
+								ymax: 137.7826385498047,
+								ymin: 68.53266143798828
+							}
+						],
+						[
+							'car',
+							{
+								confidence: 0.6876348853111267,
+								keypoints: [],
+								xmax: 241.87548828125,
+								xmin: 141.7071075439453,
+								ymax: 136.7369689941462,
+								ymin: 76.62179565429688
+							}
+						],
+						[
+							'sports ball',
+							{
+								confidence: 0.9567586183547974,
+								keypoints: [],
+								xmax: 126.02123260498047,
+								xmin: 66.91826629638672,
+								ymax: 425.0271301269531,
+								ymin: 370.4414367675781
+							}
+						]
+					]
+				},
+				port: 'output'
+			}
+		]
+			.map((json) => JSON.stringify(json, null, 2))
+			.join('\n')
+	}
+];
diff --git a/ui/src/styles.ts b/ui/src/styles.ts
new file mode 100644
index 0000000..534f33e
--- /dev/null
+++ b/ui/src/styles.ts
@@ -0,0 +1,2 @@
+export const header = 'text-center text-xl font-bold';
+export const description = 'text-left mb-5';
diff --git a/ui/static/components/llama.signed.wasm b/ui/static/components/llama.signed.wasm
index e7d4110..79fcc04 100644
Binary files a/ui/static/components/llama.signed.wasm and b/ui/static/components/llama.signed.wasm differ
diff --git a/ui/static/components/redact.signed.wasm b/ui/static/components/redact.signed.wasm
index 63fd660..eb25740 100644
Binary files a/ui/static/components/redact.signed.wasm and b/ui/static/components/redact.signed.wasm differ
diff --git a/ui/static/components/yolo.signed.wasm b/ui/static/components/yolo.signed.wasm
index ed256e0..3bd2e44 100644
Binary files a/ui/static/components/yolo.signed.wasm and b/ui/static/components/yolo.signed.wasm differ
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index a57e4a8..d17b3ef 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -11,7 +11,8 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true
-	}
+	},
+	"exclude": ["src/lib/component-worker.js"]
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//
 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes