images rendered

frontend/src/lib/App.svelte

@@ -7,6 +7,7 @@
 	import type { Room } from '@liveblocks/client';
 	import { COLORS, EMOJIS } from '$lib/constants';
 	import { PUBLIC_WS_ENDPOINT } from '$env/static/public';
+	import { onMount } from 'svelte';
 	import {
 		isLoading,
 		loadingState,
@@ -14,7 +15,8 @@
 		myPresence,
 		others,
 		isPrompting,
-		clickedPosition
+		clickedPosition,
+		imagesList
 	} from '$lib/store';
 	import { base64ToBlob, uploadImage } from '$lib/utils';
 	/**
@@ -23,6 +25,7 @@
 	 */
 
 	export let room: Room;
+	onMount(() => {});
 
 	async function onClose(e: CustomEvent) {
 		$isPrompting = false;
@@ -80,6 +83,11 @@
 							const imgsBase64 = data.output.data[0] as string[];
 							const imgBlobs = await Promise.all(imgsBase64.map((base64) => base64ToBlob(base64)));
 							const imgURLs = await Promise.all(imgBlobs.map((blob) => uploadImage(blob, _prompt)));
+							$imagesList.push({
+								prompt: _prompt,
+								images: imgURLs,
+								position: $clickedPosition
+							});
 							console.log(imgURLs);
 							$loadingState = data.success ? 'Complete' : 'Error';
 						} catch (e) {
@@ -117,6 +125,16 @@
 	<Canvas />
 
 	<main class="z-10 relative">
+		{#if $imagesList}
+			{#each $imagesList as image, i}
+				<Frame
+					color={COLORS[0]}
+					position={$imagesList.get(i).position}
+					images={$imagesList.get(i).images}
+					transform={$currZoomTransform}
+				/>
+			{/each}
+		{/if}
 		{#if $clickedPosition}
 			<Frame color={COLORS[0]} position={$clickedPosition} transform={$currZoomTransform} />
 		{/if}

frontend/src/lib/Frame.svelte

@@ -7,6 +7,7 @@
 	export let transform: ZoomTransform;
 	export let color = '';
 	export let position = { x: 0, y: 0 };
+	export let images: string[];
 
 	// Spring animation for cursor
 	const coords = spring(position, {
@@ -28,6 +29,11 @@
 	<h2 class="text-lg">Click to paint</h2>
 
 	<div class="absolute bottom-0 font-bold">A cat on grass</div>
+	{#if images}
+		<div class="absolute top-0 left-0">
+			<img class="w-full" src={images[0]} alt="A cat on grass" />
+		</div>
+	{/if}
 </div>
 
 <style lang="postcss" scoped>

frontend/src/lib/store.ts

@@ -12,6 +12,7 @@ export const currZoomTransform = writable<ZoomTransform>(zoomIdentity);
 
 export const myPresence = writable(null);
 export const others = writable(null);
+export const imagesList = writable(null);
 
 export function createPresenceStore(room: Room) {
 	// Get initial values for presence and others
@@ -36,3 +37,15 @@ export function createPresenceStore(room: Room) {
 		unsubscribeOthers();
 	};
 }
+
+export async function createStorageStore(room: Room) {
+	const { root } = await room.getStorage();
+
+	const _imagesList = root.get('imagesList');
+
+	imagesList.set(_imagesList);
+
+	room.subscribe(_imagesList, () => {
+		imagesList.update((_) => _imagesList);
+	});
+}

frontend/src/routes/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { isLoading, loadingState, createPresenceStore } from '$lib/store';
+	import { isLoading, loadingState, createPresenceStore, createStorageStore } from '$lib/store';
 	import { PUBLIC_WS_ENDPOINT, PUBLIC_DEV_MODE } from '$env/static/public';
 	import type { Client, Room } from '@liveblocks/client';
-	import { createClient } from '@liveblocks/client';
+	import { createClient, LiveList } from '@liveblocks/client';
 
 	import App from '$lib/App.svelte';
 	import type { Presence, Storage } from '$lib/types';
@@ -28,18 +28,15 @@
 			initialPresence: {
 				cursor: null
 			},
-			initialStorage: {}
-		});
-		const unsubscribe = room.subscribe('history', (e) => {
-			// Do something
-			console.log('history', e);
+			initialStorage: { imagesList: new LiveList() }
 		});
+
 		const unsubscribePresence = createPresenceStore(room);
+		createStorageStore(room);
 		return () => {
 			if (client && room) {
 				client.leave(roomId);
 				unsubscribePresence();
-				unsubscribe();
 			}
 		};
 	});