working

package-lock.json

@@ -7,6 +7,9 @@
 		"": {
 			"name": "chat-ui",
 			"version": "0.0.1",
+			"dependencies": {
+				"@microsoft/fetch-event-source": "^2.0.1"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^2.0.0",
 				"@sveltejs/kit": "^1.5.0",
@@ -457,6 +460,11 @@
 				"@jridgewell/sourcemap-codec": "1.4.14"
 			}
 		},
+		"node_modules/@microsoft/fetch-event-source": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@microsoft/fetch-event-source/-/fetch-event-source-2.0.1.tgz",
+			"integrity": "sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA=="
+		},
 		"node_modules/@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",

package.json

@@ -27,5 +27,8 @@
 		"typescript": "^4.9.3",
 		"vite": "^4.0.0"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@microsoft/fetch-event-source": "^2.0.1"
+	}
 }

src/app.html

@@ -12,14 +12,6 @@
 					extend: {
 						fontSize: {
 							smd: '0.94rem'
-						},
-						colors: {
-							// 'bg-dark':
-							// 'bg-darker':
-							// 'text-light':
-							// 'softlight': '#f5f5f5',
-							// 'light': '#e0e0e0',
-							// 'gray': '#9e9e9e',
 						}
 					}
 				}

src/routes/+page.svelte

@@ -1,3 +1,63 @@
+<script lang="ts">
+	import { fetchEventSource } from '@microsoft/fetch-event-source';
+	const ENDPOINT = 'https://joi-20b.ngrok.io/generate_stream';
+	type Message =
+		| {
+				from: 'user';
+				content: string;
+		  }
+		| {
+				from: 'bot';
+				content: string;
+		  };
+
+	let messages: Message[] = [];
+	let message = '';
+
+	function onWrite() {
+		messages = [...messages, { from: 'user', content: message }];
+		message = '';
+		let incoming = '';
+		const inputs =
+			messages
+				.map((m) => (m.from === 'user' ? `User: ${m.content}\n` : `Joi:${m.content}\n`))
+				.join('\n') + '\nJoi:';
+
+		fetchEventSource(ENDPOINT, {
+			method: 'POST',
+			headers: {
+				Accept: 'text/event-stream',
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				inputs: inputs,
+				parameters: {
+					temperature: 0.5,
+					top_p: 0.95,
+					do_sample: true,
+					max_new_tokens: 512,
+					top_k: 4,
+					repetition_penalty: 1.03,
+					stop: ['User:']
+				}
+			}),
+			async onopen(response) {
+				if (response.ok && response.headers.get('content-type') === 'text/event-stream') {
+					messages = [...messages, { from: 'bot', content: incoming }];
+				} else {
+					console.error('error opening the SSE endpoint');
+				}
+			},
+			onmessage(msg) {
+				const data = JSON.parse(msg.data);
+				// console.log(data);
+				messages.at(-1)!.content += data.token.text;
+				messages = messages;
+			}
+		});
+	}
+</script>
+
 <div class="grid h-screen w-screen md:grid-cols-[256px,1fr] overflow-hidden text-smd">
 	<div class="max-md:hidden bg-gray-900/20 pt-6 px-6">
 		<button
@@ -7,29 +67,28 @@
 	</div>
 	<div class="overflow-y-auto">
 		<div class="max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8">
-			{#each Array(4) as _}
-				<div class="flex items-start justify-start gap-4 leading-relaxed">
-					<img
-						src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
-						class="mt-4 w-3 h-3 flex-none rounded-full shadow-lg shadow-white/40"
-					/>
-					<div
-						class="group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 py-3.5"
-					>
-						Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
-						consectetur adipisicing iciis? Lorem ipsum dolor sit amet consectetur adipisicing elit.
-						Rem, qui consequatur voluptas inventore recusandae animi voluptate consectetur aperiam,
-						sapiente aliqm possimus quasi accusamus, dolores nobis officiis vitae tenetur? Porro,
-						corporis.
+			{#each messages as { from, content }}
+				{#if from === 'bot'}
+					<div class="flex items-start justify-start gap-4 leading-relaxed">
+						<img
+							src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
+							class="mt-4 w-3 h-3 flex-none rounded-full shadow-lg shadow-white/40"
+						/>
+						<div
+							class="group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 py-3.5"
+						>
+							{content}
+						</div>
 					</div>
-				</div>
-				<div class="mb-2 flex items-start justify-start gap-4 text-gray-300/80">
-					<div class="mt-4 w-3 h-3 flex-none rounded-full" />
-					<div class="rounded-2xl px-5 py-3.5">
-						Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
-						consectetur adipisicing eLorem ipsum
+				{/if}
+				{#if from === 'user'}
+					<div class="flex items-start justify-start gap-4 text-gray-300/80">
+						<div class="mt-4 w-3 h-3 flex-none rounded-full" />
+						<div class="rounded-2xl px-5 py-3.5">
+							{content}
+						</div>
 					</div>
-				</div>
+				{/if}
 			{/each}
 			<div class="h-32" />
 		</div>
@@ -37,7 +96,8 @@
 	<div
 		class="flex items-center justify-center absolute left-[256px] right-0 px-24 bottom-0 h-32 bg-gradient-to-t from-gray-900/50 to-black/0"
 	>
-		<div
+		<form
+			on:submit={onWrite}
 			class="shadow-alternate relative flex items-center rounded-xl border border-gray-900 bg-black shadow-xl flex-1 max-w-4xl"
 		>
 			<svg
@@ -58,9 +118,12 @@
 			>
 			<input
 				class="flex-1 border-none bg-transparent px-1 py-3 pr-3 pl-10 outline-none placeholder:text-gray-400"
-				placeholder="Ask anything..."
+				bind:value={message}
+				on:submit={onWrite}
+				placeholder="Ask anything"
+				autofocus
 			/>
-		</div>
+		</form>
 		<!-- <input
 			type="text"
 			placeholder="Type anything..."