Spaces:
Runtime error
Runtime error
better status
Browse files- frontend/src/lib/App.svelte +1 -1
- frontend/src/lib/Frame.svelte +10 -5
frontend/src/lib/App.svelte
CHANGED
@@ -221,7 +221,7 @@
|
|
221 |
{#each [...$others] as { connectionId, presence } (connectionId)}
|
222 |
{#if (presence?.status === Status.loading || presence?.status === Status.prompting || presence?.status === Status.masking) && presence?.frame}
|
223 |
<Frame
|
224 |
-
|
225 |
position={presence?.frame}
|
226 |
prompt={presence?.currentPrompt}
|
227 |
transform={$currZoomTransform}
|
|
|
221 |
{#each [...$others] as { connectionId, presence } (connectionId)}
|
222 |
{#if (presence?.status === Status.loading || presence?.status === Status.prompting || presence?.status === Status.masking) && presence?.frame}
|
223 |
<Frame
|
224 |
+
status={presence.status}
|
225 |
position={presence?.frame}
|
226 |
prompt={presence?.currentPrompt}
|
227 |
transform={$currZoomTransform}
|
frontend/src/lib/Frame.svelte
CHANGED
@@ -2,11 +2,13 @@
|
|
2 |
import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
|
3 |
import { FRAME_SIZE } from '$lib/constants';
|
4 |
import type { ZoomTransform } from 'd3-zoom';
|
|
|
5 |
|
6 |
export let transform: ZoomTransform;
|
7 |
export let position = { x: 0, y: 0 };
|
8 |
export let prompt = '';
|
9 |
-
export let
|
|
|
10 |
$: coord = {
|
11 |
x: transform.applyX(position.x),
|
12 |
y: transform.applyY(position.y)
|
@@ -21,14 +23,17 @@
|
|
21 |
>
|
22 |
<div class="pointer-events-none touch-none">
|
23 |
<div class="font-bold !text-4xl text-white rounded-2xl text-center p-10">
|
24 |
-
{#if
|
25 |
<LoadingIcon classList={'animate-spin text-4xl inline mr-2 mx-auto text-white mb-4'} />
|
26 |
<p class="text-4xl">Someone is painting:</p>
|
27 |
-
{:else}
|
|
|
|
|
28 |
<p class="text-4xl">Someone is typing:</p>
|
29 |
{/if}
|
30 |
-
|
31 |
-
|
|
|
32 |
</div>
|
33 |
</div>
|
34 |
</div>
|
|
|
2 |
import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
|
3 |
import { FRAME_SIZE } from '$lib/constants';
|
4 |
import type { ZoomTransform } from 'd3-zoom';
|
5 |
+
import { Status } from '$lib/types';
|
6 |
|
7 |
export let transform: ZoomTransform;
|
8 |
export let position = { x: 0, y: 0 };
|
9 |
export let prompt = '';
|
10 |
+
export let status: Status;
|
11 |
+
|
12 |
$: coord = {
|
13 |
x: transform.applyX(position.x),
|
14 |
y: transform.applyY(position.y)
|
|
|
23 |
>
|
24 |
<div class="pointer-events-none touch-none">
|
25 |
<div class="font-bold !text-4xl text-white rounded-2xl text-center p-10">
|
26 |
+
{#if status === Status.loading || status === Status.processing}
|
27 |
<LoadingIcon classList={'animate-spin text-4xl inline mr-2 mx-auto text-white mb-4'} />
|
28 |
<p class="text-4xl">Someone is painting:</p>
|
29 |
+
{:else if status === Status.masking}
|
30 |
+
<p class="text-4xl">Someone is masking</p>
|
31 |
+
{:else if status === Status.prompting}
|
32 |
<p class="text-4xl">Someone is typing:</p>
|
33 |
{/if}
|
34 |
+
{#if prompt}
|
35 |
+
<span class="italic font-normal line-clamp-4">"{prompt}"</span>
|
36 |
+
{/if}
|
37 |
</div>
|
38 |
</div>
|
39 |
</div>
|