Spaces:
Runtime error
Runtime error
images rendered
Browse files- frontend/src/lib/App.svelte +19 -1
- frontend/src/lib/Frame.svelte +6 -0
- frontend/src/lib/store.ts +13 -0
- frontend/src/routes/+page.svelte +5 -8
frontend/src/lib/App.svelte
CHANGED
@@ -7,6 +7,7 @@
|
|
7 |
import type { Room } from '@liveblocks/client';
|
8 |
import { COLORS, EMOJIS } from '$lib/constants';
|
9 |
import { PUBLIC_WS_ENDPOINT } from '$env/static/public';
|
|
|
10 |
import {
|
11 |
isLoading,
|
12 |
loadingState,
|
@@ -14,7 +15,8 @@
|
|
14 |
myPresence,
|
15 |
others,
|
16 |
isPrompting,
|
17 |
-
clickedPosition
|
|
|
18 |
} from '$lib/store';
|
19 |
import { base64ToBlob, uploadImage } from '$lib/utils';
|
20 |
/**
|
@@ -23,6 +25,7 @@
|
|
23 |
*/
|
24 |
|
25 |
export let room: Room;
|
|
|
26 |
|
27 |
async function onClose(e: CustomEvent) {
|
28 |
$isPrompting = false;
|
@@ -80,6 +83,11 @@
|
|
80 |
const imgsBase64 = data.output.data[0] as string[];
|
81 |
const imgBlobs = await Promise.all(imgsBase64.map((base64) => base64ToBlob(base64)));
|
82 |
const imgURLs = await Promise.all(imgBlobs.map((blob) => uploadImage(blob, _prompt)));
|
|
|
|
|
|
|
|
|
|
|
83 |
console.log(imgURLs);
|
84 |
$loadingState = data.success ? 'Complete' : 'Error';
|
85 |
} catch (e) {
|
@@ -117,6 +125,16 @@
|
|
117 |
<Canvas />
|
118 |
|
119 |
<main class="z-10 relative">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
120 |
{#if $clickedPosition}
|
121 |
<Frame color={COLORS[0]} position={$clickedPosition} transform={$currZoomTransform} />
|
122 |
{/if}
|
|
|
7 |
import type { Room } from '@liveblocks/client';
|
8 |
import { COLORS, EMOJIS } from '$lib/constants';
|
9 |
import { PUBLIC_WS_ENDPOINT } from '$env/static/public';
|
10 |
+
import { onMount } from 'svelte';
|
11 |
import {
|
12 |
isLoading,
|
13 |
loadingState,
|
|
|
15 |
myPresence,
|
16 |
others,
|
17 |
isPrompting,
|
18 |
+
clickedPosition,
|
19 |
+
imagesList
|
20 |
} from '$lib/store';
|
21 |
import { base64ToBlob, uploadImage } from '$lib/utils';
|
22 |
/**
|
|
|
25 |
*/
|
26 |
|
27 |
export let room: Room;
|
28 |
+
onMount(() => {});
|
29 |
|
30 |
async function onClose(e: CustomEvent) {
|
31 |
$isPrompting = false;
|
|
|
83 |
const imgsBase64 = data.output.data[0] as string[];
|
84 |
const imgBlobs = await Promise.all(imgsBase64.map((base64) => base64ToBlob(base64)));
|
85 |
const imgURLs = await Promise.all(imgBlobs.map((blob) => uploadImage(blob, _prompt)));
|
86 |
+
$imagesList.push({
|
87 |
+
prompt: _prompt,
|
88 |
+
images: imgURLs,
|
89 |
+
position: $clickedPosition
|
90 |
+
});
|
91 |
console.log(imgURLs);
|
92 |
$loadingState = data.success ? 'Complete' : 'Error';
|
93 |
} catch (e) {
|
|
|
125 |
<Canvas />
|
126 |
|
127 |
<main class="z-10 relative">
|
128 |
+
{#if $imagesList}
|
129 |
+
{#each $imagesList as image, i}
|
130 |
+
<Frame
|
131 |
+
color={COLORS[0]}
|
132 |
+
position={$imagesList.get(i).position}
|
133 |
+
images={$imagesList.get(i).images}
|
134 |
+
transform={$currZoomTransform}
|
135 |
+
/>
|
136 |
+
{/each}
|
137 |
+
{/if}
|
138 |
{#if $clickedPosition}
|
139 |
<Frame color={COLORS[0]} position={$clickedPosition} transform={$currZoomTransform} />
|
140 |
{/if}
|
frontend/src/lib/Frame.svelte
CHANGED
@@ -7,6 +7,7 @@
|
|
7 |
export let transform: ZoomTransform;
|
8 |
export let color = '';
|
9 |
export let position = { x: 0, y: 0 };
|
|
|
10 |
|
11 |
// Spring animation for cursor
|
12 |
const coords = spring(position, {
|
@@ -28,6 +29,11 @@
|
|
28 |
<h2 class="text-lg">Click to paint</h2>
|
29 |
|
30 |
<div class="absolute bottom-0 font-bold">A cat on grass</div>
|
|
|
|
|
|
|
|
|
|
|
31 |
</div>
|
32 |
|
33 |
<style lang="postcss" scoped>
|
|
|
7 |
export let transform: ZoomTransform;
|
8 |
export let color = '';
|
9 |
export let position = { x: 0, y: 0 };
|
10 |
+
export let images: string[];
|
11 |
|
12 |
// Spring animation for cursor
|
13 |
const coords = spring(position, {
|
|
|
29 |
<h2 class="text-lg">Click to paint</h2>
|
30 |
|
31 |
<div class="absolute bottom-0 font-bold">A cat on grass</div>
|
32 |
+
{#if images}
|
33 |
+
<div class="absolute top-0 left-0">
|
34 |
+
<img class="w-full" src={images[0]} alt="A cat on grass" />
|
35 |
+
</div>
|
36 |
+
{/if}
|
37 |
</div>
|
38 |
|
39 |
<style lang="postcss" scoped>
|
frontend/src/lib/store.ts
CHANGED
@@ -12,6 +12,7 @@ export const currZoomTransform = writable<ZoomTransform>(zoomIdentity);
|
|
12 |
|
13 |
export const myPresence = writable(null);
|
14 |
export const others = writable(null);
|
|
|
15 |
|
16 |
export function createPresenceStore(room: Room) {
|
17 |
// Get initial values for presence and others
|
@@ -36,3 +37,15 @@ export function createPresenceStore(room: Room) {
|
|
36 |
unsubscribeOthers();
|
37 |
};
|
38 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
12 |
|
13 |
export const myPresence = writable(null);
|
14 |
export const others = writable(null);
|
15 |
+
export const imagesList = writable(null);
|
16 |
|
17 |
export function createPresenceStore(room: Room) {
|
18 |
// Get initial values for presence and others
|
|
|
37 |
unsubscribeOthers();
|
38 |
};
|
39 |
}
|
40 |
+
|
41 |
+
export async function createStorageStore(room: Room) {
|
42 |
+
const { root } = await room.getStorage();
|
43 |
+
|
44 |
+
const _imagesList = root.get('imagesList');
|
45 |
+
|
46 |
+
imagesList.set(_imagesList);
|
47 |
+
|
48 |
+
room.subscribe(_imagesList, () => {
|
49 |
+
imagesList.update((_) => _imagesList);
|
50 |
+
});
|
51 |
+
}
|
frontend/src/routes/+page.svelte
CHANGED
@@ -1,9 +1,9 @@
|
|
1 |
<script lang="ts">
|
2 |
import { onMount } from 'svelte';
|
3 |
-
import { isLoading, loadingState, createPresenceStore } from '$lib/store';
|
4 |
import { PUBLIC_WS_ENDPOINT, PUBLIC_DEV_MODE } from '$env/static/public';
|
5 |
import type { Client, Room } from '@liveblocks/client';
|
6 |
-
import { createClient } from '@liveblocks/client';
|
7 |
|
8 |
import App from '$lib/App.svelte';
|
9 |
import type { Presence, Storage } from '$lib/types';
|
@@ -28,18 +28,15 @@
|
|
28 |
initialPresence: {
|
29 |
cursor: null
|
30 |
},
|
31 |
-
initialStorage: {}
|
32 |
-
});
|
33 |
-
const unsubscribe = room.subscribe('history', (e) => {
|
34 |
-
// Do something
|
35 |
-
console.log('history', e);
|
36 |
});
|
|
|
37 |
const unsubscribePresence = createPresenceStore(room);
|
|
|
38 |
return () => {
|
39 |
if (client && room) {
|
40 |
client.leave(roomId);
|
41 |
unsubscribePresence();
|
42 |
-
unsubscribe();
|
43 |
}
|
44 |
};
|
45 |
});
|
|
|
1 |
<script lang="ts">
|
2 |
import { onMount } from 'svelte';
|
3 |
+
import { isLoading, loadingState, createPresenceStore, createStorageStore } from '$lib/store';
|
4 |
import { PUBLIC_WS_ENDPOINT, PUBLIC_DEV_MODE } from '$env/static/public';
|
5 |
import type { Client, Room } from '@liveblocks/client';
|
6 |
+
import { createClient, LiveList } from '@liveblocks/client';
|
7 |
|
8 |
import App from '$lib/App.svelte';
|
9 |
import type { Presence, Storage } from '$lib/types';
|
|
|
28 |
initialPresence: {
|
29 |
cursor: null
|
30 |
},
|
31 |
+
initialStorage: { imagesList: new LiveList() }
|
|
|
|
|
|
|
|
|
32 |
});
|
33 |
+
|
34 |
const unsubscribePresence = createPresenceStore(room);
|
35 |
+
createStorageStore(room);
|
36 |
return () => {
|
37 |
if (client && room) {
|
38 |
client.leave(roomId);
|
39 |
unsubscribePresence();
|
|
|
40 |
}
|
41 |
};
|
42 |
});
|