Spaces:
Running
on
A100
Running
on
A100
small fixes
Browse files
frontend/src/lib/components/ImagePlayer.svelte
CHANGED
@@ -7,8 +7,8 @@
|
|
7 |
import Expand from '$lib/icons/expand.svelte';
|
8 |
import { snapImage, expandWindow } from '$lib/utils';
|
9 |
|
10 |
-
$: isLCMRunning =
|
11 |
-
|
12 |
let imageEl: HTMLImageElement;
|
13 |
let expandedWindow: Window;
|
14 |
let isExpanded = false;
|
@@ -42,9 +42,9 @@
|
|
42 |
<!-- svelte-ignore a11y-missing-attribute -->
|
43 |
{#if $lcmLiveStatus === LCMLiveStatus.CONNECTING}
|
44 |
<!-- Show connecting spinner -->
|
45 |
-
<div class="flex items-center justify-center
|
46 |
-
<div class="animate-spin rounded-full
|
47 |
-
<p class="text-white
|
48 |
</div>
|
49 |
{:else if isLCMRunning}
|
50 |
{#if !isExpanded}
|
@@ -81,10 +81,10 @@
|
|
81 |
</div>
|
82 |
{:else if $lcmLiveStatus === LCMLiveStatus.ERROR}
|
83 |
<!-- Show error state with red border -->
|
84 |
-
<div
|
85 |
-
|
86 |
-
|
87 |
-
</p>
|
88 |
</div>
|
89 |
{:else}
|
90 |
<img
|
|
|
7 |
import Expand from '$lib/icons/expand.svelte';
|
8 |
import { snapImage, expandWindow } from '$lib/utils';
|
9 |
|
10 |
+
$: isLCMRunning =
|
11 |
+
$lcmLiveStatus !== LCMLiveStatus.DISCONNECTED && $lcmLiveStatus !== LCMLiveStatus.ERROR;
|
12 |
let imageEl: HTMLImageElement;
|
13 |
let expandedWindow: Window;
|
14 |
let isExpanded = false;
|
|
|
42 |
<!-- svelte-ignore a11y-missing-attribute -->
|
43 |
{#if $lcmLiveStatus === LCMLiveStatus.CONNECTING}
|
44 |
<!-- Show connecting spinner -->
|
45 |
+
<div class="flex h-full w-full items-center justify-center">
|
46 |
+
<div class="h-16 w-16 animate-spin rounded-full border-b-2 border-white"></div>
|
47 |
+
<p class="ml-2 text-white">Connecting...</p>
|
48 |
</div>
|
49 |
{:else if isLCMRunning}
|
50 |
{#if !isExpanded}
|
|
|
81 |
</div>
|
82 |
{:else if $lcmLiveStatus === LCMLiveStatus.ERROR}
|
83 |
<!-- Show error state with red border -->
|
84 |
+
<div
|
85 |
+
class="flex h-full w-full items-center justify-center rounded-lg border-2 border-red-500 bg-gray-900"
|
86 |
+
>
|
87 |
+
<p class="p-4 text-center text-white">Connection error</p>
|
88 |
</div>
|
89 |
{:else}
|
90 |
<img
|
frontend/src/lib/components/Warning.svelte
CHANGED
@@ -12,16 +12,20 @@
|
|
12 |
</script>
|
13 |
|
14 |
{#if message}
|
15 |
-
<div class="fixed right-0 top-0 m-4
|
16 |
-
<
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
20 |
</div>
|
21 |
{/if}
|
22 |
|
23 |
<style lang="postcss" scoped>
|
24 |
-
.button {
|
25 |
-
@apply rounded bg-gray-700 font-normal text-white hover:bg-gray-800 disabled:cursor-not-allowed disabled:bg-gray-300 dark:disabled:bg-gray-700 dark:disabled:text-black;
|
26 |
-
}
|
27 |
</style>
|
|
|
12 |
</script>
|
13 |
|
14 |
{#if message}
|
15 |
+
<div role="alert" class="fixed right-0 top-0 m-4">
|
16 |
+
<button
|
17 |
+
type="button"
|
18 |
+
class="w-full"
|
19 |
+
on:click={() => (message = '')}
|
20 |
+
on:keydown={(e) => e.key === 'Enter' && (message = '')}
|
21 |
+
>
|
22 |
+
<div class="rounded bg-red-800 p-4 text-white">
|
23 |
+
{message}
|
24 |
+
</div>
|
25 |
+
<div class="bar transition-all duration-500" style="width: 0;"></div>
|
26 |
+
</button>
|
27 |
</div>
|
28 |
{/if}
|
29 |
|
30 |
<style lang="postcss" scoped>
|
|
|
|
|
|
|
31 |
</style>
|
frontend/src/lib/lcmLive.ts
CHANGED
@@ -76,7 +76,7 @@ export const lcmLiveActions = {
|
|
76 |
}
|
77 |
|
78 |
// If connection was never established (close without open)
|
79 |
-
if (event.code === 1006 &&
|
80 |
reject(new Error('Cannot connect to server. Please try again later.'));
|
81 |
}
|
82 |
};
|
|
|
76 |
}
|
77 |
|
78 |
// If connection was never established (close without open)
|
79 |
+
if (event.code === 1006 && get(streamId) === null) {
|
80 |
reject(new Error('Cannot connect to server. Please try again later.'));
|
81 |
}
|
82 |
};
|
frontend/src/piexifjs.d.ts
ADDED
@@ -0,0 +1,12 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
declare module 'piexifjs' {
|
2 |
+
export const ImageIFD: {
|
3 |
+
Make: number;
|
4 |
+
ImageDescription: number;
|
5 |
+
Software: number;
|
6 |
+
};
|
7 |
+
export const ExifIFD: {
|
8 |
+
DateTimeOriginal: number;
|
9 |
+
};
|
10 |
+
export function dump(exifObj: any): any;
|
11 |
+
export function insert(exifBytes: any, dataURL: string): string;
|
12 |
+
}
|
frontend/src/routes/+page.svelte
CHANGED
@@ -57,10 +57,10 @@
|
|
57 |
}
|
58 |
}
|
59 |
|
60 |
-
$: isLCMRunning =
|
61 |
-
|
62 |
$: isConnecting = $lcmLiveStatus === LCMLiveStatus.CONNECTING;
|
63 |
-
|
64 |
$: {
|
65 |
// Set warning messages based on lcmLiveStatus
|
66 |
if ($lcmLiveStatus === LCMLiveStatus.TIMEOUT) {
|
@@ -76,17 +76,17 @@
|
|
76 |
if (isConnecting) {
|
77 |
return; // Don't allow multiple connection attempts
|
78 |
}
|
79 |
-
|
80 |
// Clear any previous warning messages
|
81 |
warningMessage = '';
|
82 |
disabled = true;
|
83 |
-
|
84 |
try {
|
85 |
if (isImageMode) {
|
86 |
await mediaStreamActions.enumerateDevices();
|
87 |
await mediaStreamActions.start();
|
88 |
}
|
89 |
-
|
90 |
await lcmLiveActions.start(getSreamdata);
|
91 |
toggleQueueChecker(false);
|
92 |
} finally {
|
@@ -96,7 +96,7 @@
|
|
96 |
} else {
|
97 |
// Handle stopping - disable button during this process too
|
98 |
disabled = true;
|
99 |
-
|
100 |
try {
|
101 |
if (isImageMode) {
|
102 |
mediaStreamActions.stop();
|
@@ -114,19 +114,19 @@
|
|
114 |
toggleQueueChecker(true);
|
115 |
}
|
116 |
}
|
117 |
-
|
118 |
// Reconnect function for automatic reconnection
|
119 |
async function reconnect() {
|
120 |
try {
|
121 |
disabled = true;
|
122 |
warningMessage = 'Reconnecting...';
|
123 |
-
|
124 |
if (isImageMode) {
|
125 |
await mediaStreamActions.stop();
|
126 |
await mediaStreamActions.enumerateDevices();
|
127 |
await mediaStreamActions.start();
|
128 |
}
|
129 |
-
|
130 |
await lcmLiveActions.reconnect(getSreamdata);
|
131 |
warningMessage = '';
|
132 |
toggleQueueChecker(false);
|
@@ -162,13 +162,10 @@
|
|
162 |
> and run it on your own GPU.
|
163 |
</p>
|
164 |
{/if}
|
165 |
-
|
166 |
{#if $lcmLiveStatus === LCMLiveStatus.ERROR}
|
167 |
-
<p class="text-sm
|
168 |
-
<button
|
169 |
-
class="text-blue-500 underline hover:no-underline"
|
170 |
-
on:click={reconnect}
|
171 |
-
disabled={disabled}>
|
172 |
Try reconnecting
|
173 |
</button>
|
174 |
</p>
|
|
|
57 |
}
|
58 |
}
|
59 |
|
60 |
+
$: isLCMRunning =
|
61 |
+
$lcmLiveStatus !== LCMLiveStatus.DISCONNECTED && $lcmLiveStatus !== LCMLiveStatus.ERROR;
|
62 |
$: isConnecting = $lcmLiveStatus === LCMLiveStatus.CONNECTING;
|
63 |
+
|
64 |
$: {
|
65 |
// Set warning messages based on lcmLiveStatus
|
66 |
if ($lcmLiveStatus === LCMLiveStatus.TIMEOUT) {
|
|
|
76 |
if (isConnecting) {
|
77 |
return; // Don't allow multiple connection attempts
|
78 |
}
|
79 |
+
|
80 |
// Clear any previous warning messages
|
81 |
warningMessage = '';
|
82 |
disabled = true;
|
83 |
+
|
84 |
try {
|
85 |
if (isImageMode) {
|
86 |
await mediaStreamActions.enumerateDevices();
|
87 |
await mediaStreamActions.start();
|
88 |
}
|
89 |
+
|
90 |
await lcmLiveActions.start(getSreamdata);
|
91 |
toggleQueueChecker(false);
|
92 |
} finally {
|
|
|
96 |
} else {
|
97 |
// Handle stopping - disable button during this process too
|
98 |
disabled = true;
|
99 |
+
|
100 |
try {
|
101 |
if (isImageMode) {
|
102 |
mediaStreamActions.stop();
|
|
|
114 |
toggleQueueChecker(true);
|
115 |
}
|
116 |
}
|
117 |
+
|
118 |
// Reconnect function for automatic reconnection
|
119 |
async function reconnect() {
|
120 |
try {
|
121 |
disabled = true;
|
122 |
warningMessage = 'Reconnecting...';
|
123 |
+
|
124 |
if (isImageMode) {
|
125 |
await mediaStreamActions.stop();
|
126 |
await mediaStreamActions.enumerateDevices();
|
127 |
await mediaStreamActions.start();
|
128 |
}
|
129 |
+
|
130 |
await lcmLiveActions.reconnect(getSreamdata);
|
131 |
warningMessage = '';
|
132 |
toggleQueueChecker(false);
|
|
|
162 |
> and run it on your own GPU.
|
163 |
</p>
|
164 |
{/if}
|
165 |
+
|
166 |
{#if $lcmLiveStatus === LCMLiveStatus.ERROR}
|
167 |
+
<p class="mt-2 text-sm">
|
168 |
+
<button class="text-blue-500 underline hover:no-underline" on:click={reconnect} {disabled}>
|
|
|
|
|
|
|
169 |
Try reconnecting
|
170 |
</button>
|
171 |
</p>
|