fix: fixed worker issues across dev vs build

ui/package.json

@@ -12,7 +12,8 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@bjorn3/browser_wasi_shim": "file:../../browser_wasi_shim",
+		"@candlecorp/wick": "^0.2.1",
+		"@msgpack/msgpack": "^3.0.0-beta2",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
@@ -31,20 +32,16 @@
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
+		"rxjs": "^7.8.1",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
 		"tailwindcss": "^3.3.2",
 		"tslib": "^2.4.1",
 		"typescript": "^5.2.2",
 		"vite": "^4.4.2",
 		"vite-plugin-mkcert": "^1.16.0",
-		"vite-plugin-node-polyfills": "^0.15.0"
+		"vite-plugin-node-polyfills": "^0.15.0",
+		"wasmrs-js": "^0.2.4"
 	},
-	"type": "module",
-	"dependencies": {
-		"@msgpack/msgpack": "^3.0.0-beta2",
-		"rxjs": "^7.8.1",
-		"wasmrs-js": "file:../../wasmrs-js",
-		"wick-js": "file:../../wick-js"
-	}
+	"type": "module"
 }

ui/src/components/BundleDownload.svelte

@@ -36,9 +36,7 @@
 
 	async function startDownload() {
 		downloading = true;
-		console.log({ selectedModel: selectedBundle });
 		const bundle = bundles[selectedBundle];
-		console.log({ files: bundle });
 		const path = selectedBundle;
 		downloadPercentage.set(Object.fromEntries(bundle.files.map((entry) => [entry.path, 0])));
 		for (let i = 0; i < bundle.files.length; i++) {
@@ -78,15 +76,14 @@
 
 	<div class="w-full text-center">
 		{#each Object.entries($downloadPercentage) as [path, pct]}
-			<span class="flex content-center">
-				<span class="w-1/3 font-mono" style="font-size:1em;">{path}</span>
-				<span class="w-2/3 content-center" style=";">
-					{#if pct === 100}
-						<Progressbar class="mt-2 mr-5" progress={pct} color="green" />
-					{:else}
-						<Progressbar class="mt-2 mr-5" progress={pct} />
-					{/if}
-				</span>
+			<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}
 	</div>

ui/src/components/Llama.svelte

@@ -5,45 +5,11 @@
 
 	import { decode, encode } from '@msgpack/msgpack';
 	import { from } from 'rxjs';
-	import { Packet, Wick, wasi } from 'wick-js';
+	import { Packet } from '@candlecorp/wick';
+	import { instantiateComponentWorker } from '$lib/workers';
 
 	export let bundleName: string;
 
-	async function instantiateComponent() {
-		const wasiOpts: wasi.WasiOptions = {
-			version: wasi.WasiVersions.SnapshotPreview1,
-			args: [],
-			env: { RUST_LOG: 'trace' },
-			preopens: {
-				'/': 'opfs:/'
-			},
-			stdin: 0,
-			stdout: 1,
-			stderr: 2
-		};
-
-		let wasm = await (await fetch('/infer.signed.wasm')).arrayBuffer();
-
-		try {
-			const workerUrl = new URL('../lib/component-worker.ts', import.meta.url);
-			const component = await Wick.Component.WasmRs.FromBytes(wasm, { wasi: wasiOpts, workerUrl });
-
-			const config = {
-				config: {
-					model_dir: '/',
-					model: `${bundleName}.bin`,
-					tokenizer: 'tokenizer.json'
-				}
-			};
-			console.log({ config });
-
-			const instance = await component.instantiate(config);
-			return instance;
-		} catch (e) {
-			console.error(`Error instantiating component: ${e}`);
-		}
-	}
-
 	let message = 'Once upon a time, in a land far away...';
 	let chatHistory: Writable<Array<{ sender: string; message: string }>> = writable([]);
 	let isResponding = false;
@@ -70,11 +36,11 @@
 	}
 
 	async function getAIResponse(input: string, aiMessageIndex: number): Promise<void> {
-		const inst = await instantiateComponent();
-		if (!inst) {
-			console.log('no instance running');
-			return;
-		}
+		const inst = await instantiateComponentWorker('/infer.signed.wasm', {
+			model_dir: '/',
+			model: `${bundleName}.bin`,
+			tokenizer: 'tokenizer.json'
+		});
 
 		const stream = from([new Packet('prompt', encode(input)), Packet.Done('prompt')]);
 		const result = await inst.invoke('generate', stream, { max_length: 512 });

ui/src/lib/component-worker.ts → ui/src/lib/component-worker.js

@@ -1,3 +1,2 @@
 import { worker } from 'wasmrs-js';
-
 worker.main();