cleanup, added examples, hardened usage against edge cases

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'
-			}
-		}
-	]
+	}
 };

ui/.gitignore

@@ -8,3 +8,5 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+archive/

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",

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}

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>

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>

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>

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>

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>

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>