first

frontend/src/app.d.ts

@@ -6,7 +6,11 @@ declare global {
 		// interface Locals {}
 		// interface PageData {}
 		// interface Platform {}
+		interface Window {
+			parentIFrame: {
+				scrollTo: (x: number, y: number) => void;
+			};
+		}
 	}
 }
-
-export {};
+export { };

frontend/src/lib/App.svelte

@@ -1,29 +1,44 @@
 <script lang="ts">
 	import { PUBLIC_BACKEND_WS_URL } from '$env/static/public';
-	import { onMount } from 'svelte';
+	import { onMount, tick } from 'svelte';
 	import { nanoid } from 'nanoid';
-	import { chatsStore, selectedChatId, loadingState } from '$lib/store';
-	import type { Message, Chat } from '$lib/types';
+	import { chatsStore, selectedChatId, loadingState, lastBase64Image } from '$lib/store';
+	import type { Message, Chat, InferenceResponse, ImageFile } from '$lib/types';
 	import { MessageType, Sender } from '$lib/types';
+	import { timeFormater, fetchImageBase64 } from '$lib/utils';
 	import ChatInput from '$lib/ChatInput.svelte';
 	import ChatMessage from '$lib/ChatMessage.svelte';
 	import ChatNewBtn from '$lib/ChatNewBtn.svelte';
+	import IconDelete from './Icons/IconDelete.svelte';
 
-	$: isLoading = false;
+	$: isLoading = !($loadingState === '' || $loadingState === 'Complete');
 
+	let chatBoxEl: HTMLDivElement;
+	let chatInputEl: HTMLInputElement;
 	function clearStateMsg(t = 5000) {
 		setTimeout(() => {
 			$loadingState = '';
 		}, t);
 	}
 	onMount(() => {
+		const observer = new ResizeObserver(() => {
+			window.scrollTo(0, chatBoxEl.getBoundingClientRect().height);
+			if ('parentIFrame' in window) {
+				(window as any).parentIFrame.scrollTo(0, chatBoxEl.getBoundingClientRect().height);
+			}
+		});
+		observer.observe(chatBoxEl);
 		// generateImage();
 	});
 
 	$: chatData = $chatsStore.find((chat) => chat.id === $selectedChatId);
-	$: messages = chatData?.messages || [];
-
-	$: console.log($chatsStore);
+	$: messages = chatData?.messages.sort((a, b) => a.timestamp - b.timestamp) || [];
+	$: if ($selectedChatId) {
+		// find last message with image type
+		$lastBase64Image =
+			[...messages].reverse().find((message) => message.type === MessageType.IMAGE)?.content ||
+			null;
+	}
 
 	function newChat() {
 		const chatId = nanoid();
@@ -36,16 +51,45 @@
 		$chatsStore = [chat].concat($chatsStore);
 		$selectedChatId = chat.id;
 	}
+	function deleteChat(id: string) {
+		$chatsStore = $chatsStore.filter((chat) => chat.id !== id);
+	}
 
 	function submitMessage(event: CustomEvent) {
-		const value = event.detail;
+		if ($chatsStore.length === 0) {
+			newChat();
+		}
+		const { type, content } = event.detail;
 		const message: Message = {
 			sender: Sender.USER,
 			id: nanoid(),
-			type: MessageType.TEXT,
-			content: value,
+			type: type,
+			content: content,
 			timestamp: new Date().getTime()
 		};
+		updateChatStore(message);
+
+		if (type === MessageType.IMAGE) {
+			// upate last image to be the last image sent
+			$lastBase64Image = content;
+		} else if (type === MessageType.TEXT) {
+			// if the last message was an image, then we want to run inference
+			// on the image and the text
+			if (!$lastBase64Image) {
+				const message: Message = {
+					sender: Sender.BOT,
+					id: nanoid(),
+					type: MessageType.TEXT,
+					content: "Sorry, I don't have an image to work with.",
+					timestamp: new Date().getTime()
+				};
+				updateChatStore(message);
+				return;
+			}
+			runInference($lastBase64Image, content);
+		}
+	}
+	function updateChatStore(message: Message) {
 		$chatsStore = $chatsStore.map((chat) => {
 			if (chat.id === $selectedChatId) {
 				chat.messages.push(message);
@@ -53,14 +97,11 @@
 			return chat;
 		});
 	}
-	const timeFormater = new Intl.DateTimeFormat('en-US', {
-		day: 'numeric',
-		month: 'short',
-		hour: 'numeric',
-		minute: 'numeric'
-	}).format;
-	async function generateImage() {
-		if (isLoading) return;
+
+	async function runInference(image: string, prompt: string) {
+		if (isLoading || image === '' || prompt === '') {
+			return;
+		}
 
 		$loadingState = 'Pending';
 
@@ -69,10 +110,9 @@
 			fn_index: 1,
 			session_hash: sessionHash
 		};
-		const image = '';
 		const datapayload = {
 			data: [
-				'make him wear shirts', // prompt
+				prompt, // prompt
 				10.5, // text guidance
 				1.5, // image guidance
 				image,
@@ -83,8 +123,7 @@
 				0 // seed
 			]
 		};
-
-		const websocket = new WebSocket(PUBLIC_BACKEND_WS_URL);
+		const websocket = new WebSocket(`wss://${PUBLIC_BACKEND_WS_URL}/queue/join`);
 		// websocket.onopen = async function (event) {
 		// 	websocket.send(JSON.stringify({ hash: sessionHash }));
 		// };
@@ -119,25 +158,37 @@
 						break;
 					case 'process_completed':
 						try {
-							console.log(data);
-							// const params = data.output.data[0] as {
-							// 	is_nsfw: boolean;
-							// 	image: {
-							// 		url: string;
-							// 		filename: string;
-							// 	};
-							// };
-							// const isNSWF = params.is_nsfw;
-							// if (isNSWF) {
-							// 	throw new Error('NFSW');
-							// }
-							// // const imgBlob = await base64ToBlob(imgBase64);
-							// const promptImgParams = {
-							// 	imgURL: params.image.filename
-							// };
-							// // const imgURL = await uploadImage(imgBlob, promptImgParams);
-							// // $promptImgStorage.set(imageKey, promptImgParams);
-							// console.log(params.image.url);
+							const response = data.output as InferenceResponse;
+							const imageData = response.data[0] as ImageFile[];
+							const nsfwData = data.output.data[1] as boolean[] | null;
+							console.log('imageData', imageData);
+							console.log('nsfwData', nsfwData);
+
+							if (nsfwData && nsfwData[0]) {
+								const message: Message = {
+									sender: Sender.BOT,
+									id: nanoid(),
+									type: MessageType.TEXT,
+									content:
+										'Sorry this prompt possibly generates NSFW content. Please try another prompt.',
+									timestamp: new Date().getTime()
+								};
+								updateChatStore(message);
+							} else {
+								const fileName = imageData[0].name;
+								const imageBase64 = await fetchImageBase64(
+									`https://${PUBLIC_BACKEND_WS_URL}/file=${fileName}`
+								);
+								const message: Message = {
+									sender: Sender.BOT,
+									id: nanoid(),
+									type: MessageType.IMAGE,
+									content: imageBase64,
+									timestamp: new Date().getTime()
+								};
+								$lastBase64Image = imageBase64;
+								updateChatStore(message);
+							}
 							$loadingState = data.success ? 'Complete' : 'Error';
 							clearStateMsg();
 						} catch (err) {
@@ -163,38 +214,57 @@
 <div>
 	<h1 class="text-2xl">CHATS</h1>
 	<div class="grid min-h-[40rem] grid-cols-4">
-		<div class="col-span-1 flex flex-col border-r p-4">
-			<ChatNewBtn on:click={newChat} />
-			<div class="max-h-[40rem] flex flex-col gap-2 overflow-y-scroll">
-				{#if $chatsStore.length}
-					{#each $chatsStore as chat}
-						<button on:click={() => ($selectedChatId = chat.id)}>
-							<div
-								class="flex h-16 flex-col items-start justify-center rounded-xl bg-gray-100 px-4 text-gray-900 
+		<div class="col-span-1 flex flex-col border-r p-4 relative">
+			<div class="sticky top-3">
+				<ChatNewBtn on:click={newChat} />
+				<div class="max-h-[40rem] flex flex-col gap-2 overflow-y-scroll">
+					{#if $chatsStore.length}
+						{#each $chatsStore as chat}
+							<div class="flex flex-col relative">
+								<button
+									class="disabled:opacity-60 disabled:cursor-progress"
+									on:click={() => ($selectedChatId = chat.id)}
+									disabled={isLoading}
+								>
+									<div
+										class=" flex flex-col h-16 items-start justify-center rounded-xl bg-gray-100 px-4 text-gray-900  
 						{chat.id === $selectedChatId ? 'bg-gray-400' : ''}"
-							>
-								<h3 class="w-full truncate font-semibold">{chat.blurb}</h3>
-								<p class="w-full truncate text-sm text-gray-500">
-									{timeFormater(new Date(chat.timestamp))}
-								</p>
+									>
+										<h3 class="w-full truncate font-semibold">{chat.blurb}</h3>
+										<p class="w-full truncate text-sm text-gray-500">
+											{timeFormater(new Date(chat.timestamp))}
+										</p>
+									</div>
+								</button>
+								<button
+									class="text-black absolute right-1 bottom-1 disabled:opacity-60"
+									on:click={() => deleteChat(chat.id)}
+									disabled={isLoading}
+								>
+									<IconDelete />
+								</button>
 							</div>
-						</button>
-					{/each}
-				{:else}
-					<div
-						class="flex h-16 flex-col items-start justify-center rounded-xl bg-gray-100 px-4 text-gray-900"
-					>
-						<h3 class="w-full truncate font-semibold">No chats</h3>
-						<p class="w-full truncate text-sm text-gray-500">Start a new Chat!</p>
-					</div>
-				{/if}
+						{/each}
+					{:else}
+						<div
+							class="flex h-16 flex-col items-start justify-center rounded-xl bg-gray-100 px-4 text-gray-900"
+						>
+							<h3 class="w-full truncate font-semibold">No chats</h3>
+							<p class="w-full truncate text-sm text-gray-500">Start a new Chat!</p>
+						</div>
+					{/if}
+				</div>
 			</div>
 		</div>
-		<div class="col-span-3 flex flex-col">
+
+		<div class="col-span-3 flex flex-col" bind:this={chatBoxEl}>
 			{#each messages as message}
 				<ChatMessage {message} />
 			{/each}
-			<ChatInput on:submitMessage={submitMessage} />
+			<ChatInput on:submitMessage={submitMessage} bind:inputEl={chatInputEl} disabled={isLoading} />
+		</div>
+		<div class="top-0 right-0 z-10">
+			Loading: {$loadingState}
 		</div>
 	</div>
 </div>

frontend/src/lib/ChatInput.svelte

@@ -1,39 +1,89 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from 'svelte';
+	import { MessageType } from '$lib/types';
+
+	export let inputEl: HTMLInputElement;
+	export let disabled: boolean = true;
 
 	const dispatch = createEventDispatcher();
 
 	let textInput: string = '';
-	let inputEl: HTMLInputElement;
+	let isDragOver: boolean = false;
 
 	function onSubmit(event: Event) {
 		event.stopPropagation();
 		event.preventDefault();
 		event.stopImmediatePropagation();
-
 		if (textInput.trim() !== '') {
-			dispatch('submitMessage', textInput);
+			dispatch('submitMessage', {
+				type: MessageType.TEXT,
+				content: textInput
+			});
 			textInput = '';
 		}
 	}
+	function onDrop(event: DragEvent) {
+		event.stopPropagation();
+		event.preventDefault();
+		event.stopImmediatePropagation();
+		if (event && event.dataTransfer) {
+			const files = [...event.dataTransfer.files];
+			if (files.length) {
+				const file = files[0];
+				if (file.type.startsWith('image/') && file.size < 1.5e7) {
+					const reader = new FileReader();
+					reader.readAsDataURL(file);
+					reader.onload = () => {
+						dispatch('submitMessage', {
+							type: MessageType.IMAGE,
+							content: reader.result
+						});
+					};
+				}
+			}
+		}
+		isDragOver = false;
+	}
+
+	function onDragover(event: DragEvent) {
+		event.stopPropagation();
+		event.preventDefault();
+		if (event && event.dataTransfer) {
+			event.dataTransfer.dropEffect = 'copy';
+		}
+		isDragOver = true;
+	}
+
 	onMount(() => {
 		inputEl.focus();
+		window.addEventListener('dragover', onDragover, false);
+		window.addEventListener('drop', onDrop, false);
+		window.addEventListener('dragleave', () => (isDragOver = false), false);
 	});
 </script>
 
-<form class="mt-auto flex w-full gap-2 border-t px-3 pt-4 pb-6" on:submit={onSubmit}>
-	<input
-		bind:value={textInput}
-		bind:this={inputEl}
-		on:click|stopPropagation
-		type="text"
-		class="flex h-11 flex-1 items-center rounded-full border bg-gray-100 px-4 text-black"
-		placeholder="Type here"
-		title="Type here to send a message"
-	/>
-	<button
-		title="Send your message"
-		type="submit"
-		class="rounded-full bg-black dark:bg-white dark:text-black px-4 font-semibold text-gray-200">Submit</button
-	>
-</form>
+<div class="mt-auto {isDragOver ? 'bg-yellow-50' : ''} py-4">
+	<form class="flex selection:w-full gap-2 border-t px-3 pt-4 pb-6" on:submit={onSubmit}>
+		<input
+			bind:value={textInput}
+			bind:this={inputEl}
+			on:click|stopPropagation
+			{disabled}
+			type="text"
+			class="flex h-11 flex-1 items-center rounded-full border bg-gray-100 px-4 text-black disabled:opacity-60 disabled:cursor-progress"
+			placeholder="Type here"
+			title="Type here to send a message"
+		/>
+		<button
+			{disabled}
+			title="Send your message"
+			type="submit"
+			class="rounded-full bg-black dark:bg-white dark:text-black px-4 font-semibold text-gray-200 disabled:opacity-60 disabled:cursor-progress"
+			>Submit</button
+		>
+	</form>
+	<div class="flex items-center px-3 pt-4 pb-6 bg-yellow-50 py-3 rounded">
+		<i class="fas fa-image text-2xl text-gray-500 mr-2" />
+		<h2 class="text-xl font-bold text-gray-500">Drop your image here to start</h2>
+	</div>
+</div>

frontend/src/lib/ChatMessage.svelte

@@ -3,22 +3,24 @@
 	import { MessageType, Sender } from '$lib/types';
 
 	export let message: Message;
+	export let loading: boolean = false;
 </script>
 
 <div class="flex flex-col gap-4 p-4">
-	<img
-		class="self-end max-h-[328px] rounded-xl bg-gray-200"
-		src="https://huggingface.co/datasets/victor/assets/resolve/main/Frame%201.png"
-		alt=""
-	/>
-	<p
-		class="self-end rounded-3 -mt-2 rounded-t rounded-b-2xl bg-black dark:bg-white py-2 px-4 text-white dark:text-black"
-	>
-		{message.content}
-	</p>
-	<img
-		class="max-h-[328px] self-start rounded-xl bg-gray-200"
-		src="https://huggingface.co/datasets/victor/assets/resolve/main/Frame%202.png"
-		alt=""
-	/>
+	<div class={message.sender === Sender.USER ? 'self-end' : 'self-start'}>
+		{#if loading}
+			<div class="flex flex-col gap-2">
+				<div class="w-32 h-8 bg-gray-200 rounded-xl animate-pulse" />
+				<div class="w-32 h-8 bg-gray-200 rounded-xl animate-pulse" />
+			</div>
+		{:else if message.type === MessageType.TEXT}
+			<p
+				class="self-end rounded-3 -mt-2 rounded-t rounded-b-2xl bg-black dark:bg-white py-2 px-4 text-white dark:text-black"
+			>
+				{message.content}
+			</p>
+		{:else if message.type === MessageType.IMAGE}
+			<img class="max-h-[328px] self-start rounded-xl bg-gray-200" src={message.content} alt="" />
+		{/if}
+	</div>
 </div>

frontend/src/lib/Icons/IconDelete.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+>
+	<path d="M12 12h2v12h-2z" fill="currentColor" /><path d="M18 12h2v12h-2z" fill="currentColor" /><path
+		d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z"
+		fill="currentColor"
+	/><path d="M12 2h8v2h-8z" fill="currentColor" />
+</svg>

frontend/src/lib/initImage.ts

@@ -0,0 +1,2 @@
+export const initImage =
+  "data:image/jpeg;base64,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";

frontend/src/lib/store.ts

@@ -1,17 +1,25 @@
 import localforage from 'localforage';
 import { writable } from 'svelte/store';
-import type { ChatData } from './types';
+import { MessageType, Sender, type ChatData, type Message } from './types';
 import { nanoid } from 'nanoid';
+import { initImage } from './initImage';
 
 const intitalChatId = nanoid();
+const initMessage: Message = {
+    id: nanoid(),
+    content: initImage,
+    sender: Sender.USER,
+    type: MessageType.IMAGE,
+    timestamp: new Date().getTime()
+}
 const initialData: ChatData = [{
     id: intitalChatId,
-    messages: [],
+    messages: [initMessage],
     blurb: `New Chat - ${intitalChatId}`,
     timestamp: new Date().getTime()
 }];
 
-
+const lastBase64Image = writable<string | null>(initMessage.content);
 const loadingState = writable<string>('');
 const chatsStore = writable<ChatData>(initialData);
 const selectedChatId = writable<string>(intitalChatId);
@@ -29,7 +37,10 @@ localforage.getItem<ChatData>('chatsStore').then((value) => {
     }
 });
 
-chatsStore.subscribe((value) => localforage.setItem<ChatData>('chatsStore', value));
+chatsStore.subscribe((value) => {
+    localforage.setItem<ChatData>('chatsStore', value)
+    return value;
+});
 
 localforage.getItem<string>('selectedChatId').then((value) => {
     if (value) {
@@ -39,39 +50,9 @@ localforage.getItem<string>('selectedChatId').then((value) => {
     }
 });
 
-selectedChatId.subscribe((value) => localforage.setItem<string>('selectedChatId', value));
-
-export { loadingState, chatsStore, selectedChatId };
-
-// import { writable } from 'svelte/store';
-// import { browser } from '$app/environment';
-// import type { ChatData } from './types';
-// import { nanoid } from 'nanoid';
-
-
-// const intitalChatId = nanoid();
-// const initialData: ChatData = [{
-//     id: intitalChatId,
-//     messages: [],
-//     blurb: `New Chat - ${new Date().getTime()}`
-// }
-// ]
-
-// export const loadingState = writable<string>('');
-// export const chatsStore = writable<ChatData>(
-//     browser ? JSON.parse(localStorage['chatsStore'] || JSON.stringify(initialData)) : initialData
-// );
-// chatsStore.subscribe((value) => {
-//     if (browser) {
-//         return (localStorage['chatsStore'] = JSON.stringify(value));
-//     }
-// });
+selectedChatId.subscribe((value) => {
+    localforage.setItem<string>('selectedChatId', value)
+    return value;
+});
 
-// export const selectedChatId = writable<string>(
-//     browser ? JSON.parse(localStorage['selectedChatId'] || JSON.stringify(intitalChatId)) : intitalChatId
-// );
-// selectedChatId.subscribe((value) => {
-//     if (browser) {
-//         return (localStorage['selectedChatId'] = JSON.stringify(value));
-//     }
-// });
+export { loadingState, chatsStore, selectedChatId, lastBase64Image };

frontend/src/lib/types.ts

@@ -26,4 +26,16 @@ export interface Chat {
     timestamp: number;
 }
 
-export type ChatData = Chat[];
+export type ChatData = Chat[];
+
+export type ImageFile = {
+    name: string;
+    data: null | string;
+    is_file: boolean;
+}
+export interface InferenceResponse {
+    data: Array<Array<ImageFile | boolean> | null | number>;
+    is_generating: boolean;
+    duration: number;
+    average_duration: number;
+}

frontend/src/lib/utils.ts

@@ -0,0 +1,22 @@
+function blobToBase64(blob: Blob): Promise<string> {
+    return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onloadend = () => resolve(reader.result as string);
+        reader.readAsDataURL(blob);
+    });
+}
+
+export const timeFormater = new Intl.DateTimeFormat('en-US', {
+    day: 'numeric',
+    month: 'short',
+    hour: 'numeric',
+    minute: 'numeric'
+}).format;
+
+export async function fetchImageBase64(url: string): Promise<string> {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    const base64 = await blobToBase64(blob);
+    return base64;
+}
+