fix: fixed OPFS collisions across examples

candlecorp · Oct 16, 2023 · ed5719b · ed5719b
1 parent b9a50ec
commit ed5719b
Show file tree

Hide file tree

Showing 17 changed files with 761 additions and 199 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -3,7 +3,7 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --host",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

diff --git a/ui/src/components/BundleDownload.svelte b/ui/src/components/BundleDownload.svelte
@@ -1,6 +1,7 @@
 <script context="module" lang="ts">
 	export interface BundleEntry {
 		label: string;
+		ready?: boolean;
 		files: FileEntry[];
 	}
 </script>
@@ -52,6 +53,10 @@
 							break;
 						}
 					}
+					if (allDone) {
+						bundle.ready = true;
+						downloading = false;
+					}
 					return v;
 				});
 			});
@@ -65,26 +70,33 @@
 
 <!-- Main Content Container -->
 <div class="flex flex-col justify-center">
-	<div class="w-full items-center">
-		<form on:submit|preventDefault={startDownload} class="text-center">
-			<Select items={selectOptions} bind:value={selectedBundle} on:change={resetState} />
-			{#if !downloading}
-				<Button pill class="mt-2" type="submit">Download Files</Button>
-			{/if}
-		</form>
+	<div class="w-full items-center text-center">
+		<Select items={selectOptions} bind:value={selectedBundle} on:change={resetState} />
+		{#if !downloading}
+			<Button
+				pill
+				class="mt-2"
+				on:click={startDownload}
+				type="submit"
+				disabled={(bundles[selectedBundle] || {}).ready}>Download Files</Button
+			>
+			<slot />
+		{/if}
 	</div>
 
 	<div class="w-full text-center">
-		{#each Object.entries($downloadPercentage) as [path, pct]}
-			<span class="pr-5 pl-5 mt-0">
-				{#if pct === 100}
-					<Progressbar progress={pct} color="green" labelOutside={path} />
-				{:else if pct === undefined}
-					<Progressbar progress={5} color="yellow" labelOutside={path} />
-				{:else}
-					<Progressbar progress={pct} labelOutside={path} />
-				{/if}
-			</span>
-		{/each}
+		{#if downloading}
+			{#each Object.entries($downloadPercentage) as [path, pct]}
+				<span class="pr-5 pl-5 mt-0">
+					{#if pct === 100}
+						<Progressbar progress={pct} color="green" labelOutside={path} />
+					{:else if pct === undefined}
+						<Progressbar progress={5} color="yellow" labelOutside={path} />
+					{:else}
+						<Progressbar progress={pct} labelOutside={path} />
+					{/if}
+				</span>
+			{/each}
+		{/if}
 	</div>
 </div>
diff --git a/ui/src/components/Header.svelte b/ui/src/components/Header.svelte
@@ -26,6 +26,9 @@
 		>
 		<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="/yolo"
+			>Object detection</DropdownItem
+		>
 		<DropdownItem class="flex justify-center items-center" href="/redact"
 			>Text Redaction</DropdownItem
 		>
@@ -39,7 +42,8 @@
 			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">AI Chatbot</DropdownItem>
+			<DropdownItem href="/llama2">Llama Text Generation</DropdownItem>
+			<DropdownItem href="/yolo">Object detection</DropdownItem>
 			<DropdownItem href="/redact">Text Redaction</DropdownItem>
 		</Dropdown>
 	</NavUl>

diff --git a/ui/src/components/Llama.svelte b/ui/src/components/Llama.svelte