Spaces:
Runtime error
Runtime error
File size: 5,264 Bytes
d16b52d 63e4d9a d16b52d 63e4d9a d16b52d 63e4d9a d16b52d 63e4d9a d16b52d 069dfe4 63e4d9a d16b52d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 |
<script lang="ts">
import Button from '$lib/components/Button.svelte';
import ImagePlayer from '$lib/components/ImagePlayer.svelte';
import PipelineOptions from '$lib/components/PipelineOptions.svelte';
import VideoInput from '$lib/components/VideoInput.svelte';
import Warning from '$lib/components/Warning.svelte';
import Spinner from '$lib/icons/spinner.svelte';
import { lcmLiveActions, lcmLiveStatus, LCMLiveStatus } from '$lib/lcmLive';
import {
mediaStreamActions,
mediaStreamStatus,
MediaStreamStatusEnum,
onFrameChangeStore
} from '$lib/mediaStream';
import { deboucedPipelineValues, getPipelineValues } from '$lib/store';
import type { Fields, PipelineInfo } from '$lib/types';
import { PipelineMode } from '$lib/types';
import { onMount } from 'svelte';
let pipelineParams: Fields;
let pipelineInfo: PipelineInfo;
let pageContent: string;
let isImageMode: boolean = false;
let maxQueueSize: number = 0;
let currentQueueSize: number = 0;
let queueCheckerRunning: boolean = false;
let warningMessage: string = '';
onMount(() => {
getSettings();
});
async function getSettings() {
const settings = await fetch('/api/settings').then((r) => r.json());
pipelineParams = settings.input_params.properties;
pipelineInfo = settings.info.properties;
isImageMode = pipelineInfo.input_mode.default === PipelineMode.IMAGE;
maxQueueSize = settings.max_queue_size;
pageContent = settings.page_content;
console.log(pipelineParams);
toggleQueueChecker(true);
}
function toggleQueueChecker(start: boolean) {
queueCheckerRunning = start && maxQueueSize > 0;
if (start) {
getQueueSize();
}
}
async function getQueueSize() {
if (!queueCheckerRunning) {
return;
}
const data = await fetch('/api/queue').then((r) => r.json());
currentQueueSize = data.queue_size;
setTimeout(getQueueSize, 10000);
}
function getSreamdata() {
if (isImageMode) {
return [getPipelineValues(), $onFrameChangeStore?.blob];
} else {
return [$deboucedPipelineValues];
}
}
$: isLCMRunning = $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED;
$: if ($lcmLiveStatus === LCMLiveStatus.TIMEOUT) {
warningMessage = 'Session timed out. Please try again.';
}
let disabled = false;
async function toggleLcmLive() {
try {
if (!isLCMRunning) {
if (isImageMode) {
if ($mediaStreamStatus === MediaStreamStatusEnum.DISCONNECTED) {
warningMessage = 'Please allow camera access.';
return;
}
// await mediaStreamActions.enumerateDevices();
// await mediaStreamActions.start();
}
disabled = true;
await lcmLiveActions.start(getSreamdata);
disabled = false;
toggleQueueChecker(false);
} else {
// if (isImageMode) {
// mediaStreamActions.stop();
// }
lcmLiveActions.stop();
mediaStreamActions.stop();
toggleQueueChecker(true);
}
} catch (e) {
warningMessage = e instanceof Error ? e.message : '';
console.error(warningMessage);
disabled = false;
toggleQueueChecker(true);
}
}
</script>
<svelte:head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.9/iframeResizer.contentWindow.min.js"
></script>
</svelte:head>
{@debug isImageMode, pipelineParams}
<main class="container mx-auto flex max-w-5xl flex-col gap-3 px-4 py-4">
<Warning bind:message={warningMessage}></Warning>
<article class="text-center">
{#if pageContent}
{@html pageContent}
{/if}
{#if maxQueueSize > 0}
<p class="text-sm">
There are <span id="queue_size" class="font-bold">{currentQueueSize}</span>
user(s) sharing the same GPU, affecting real-time performance. Maximum queue size is {maxQueueSize}.
<br>
To avoid network latency and queuing, we strongly recommend cloning
<a href="https://github.com/open-mmlab/Live2Diff">our official repository</a> and running it
locally.
</p>
{/if}
</article>
{#if pipelineParams}
<article class="my-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
{#if isImageMode}
<div class="sm:col-start-1">
<VideoInput
width={Number(pipelineParams.width.default)}
height={Number(pipelineParams.height.default)}
></VideoInput>
</div>
{/if}
<div class={isImageMode ? 'sm:col-start-2' : 'col-span-2'}>
<ImagePlayer />
</div>
<div class="sm:col-span-2">
<Button on:click={toggleLcmLive} {disabled} classList={'text-lg my-1 p-2'}>
{#if isLCMRunning}
Stop
{:else}
Start
{/if}
</Button>
<PipelineOptions {pipelineParams} disabled={isLCMRunning}></PipelineOptions>
</div>
</article>
{:else}
<!-- loading -->
<div class="flex items-center justify-center gap-3 py-48 text-2xl">
<Spinner classList={'animate-spin opacity-50'}></Spinner>
<p>Loading...</p>
</div>
{/if}
</main>
<style lang="postcss">
:global(html) {
@apply text-black dark:bg-gray-900 dark:text-white;
}
</style>
|