File size: 3,303 Bytes
cb92d2b 43148fd 1123781 43148fd 1123781 43148fd 1123781 cb92d2b 1123781 cb92d2b 43148fd 1123781 43148fd 1123781 cb92d2b 1123781 cb92d2b 43148fd 1123781 43148fd cb92d2b |
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 |
<script lang="ts">
import { onMount } from 'svelte';
import { PUBLIC_BASE_URL } from '$env/static/public';
import type { FieldProps, PipelineInfo } from '$lib/types';
import ImagePlayer from '$lib/components/ImagePlayer.svelte';
import VideoInput from '$lib/components/VideoInput.svelte';
import Button from '$lib/components/Button.svelte';
import PipelineOptions from '$lib/components/PipelineOptions.svelte';
import Spinner from '$lib/icons/spinner.svelte';
let pipelineParams: FieldProps[];
let pipelineInfo: PipelineInfo;
let pipelineValues = {};
onMount(() => {
getSettings();
});
async function getSettings() {
const settings = await fetch(`${PUBLIC_BASE_URL}/settings`).then((r) => r.json());
pipelineParams = Object.values(settings.input_params.properties);
pipelineInfo = settings.info.properties;
pipelineParams = pipelineParams.filter((e) => e?.disabled !== true);
console.log('SETTINGS', pipelineInfo);
}
$: {
console.log('PARENT', pipelineValues);
}
</script>
<div class="fixed right-2 top-2 max-w-xs rounded-lg p-4 text-center text-sm font-bold" id="error" />
<main class="container mx-auto flex max-w-4xl flex-col gap-3 px-4 py-4">
<article class="flex- mx-auto max-w-xl text-center">
<h1 class="text-3xl font-bold">Real-Time Latent Consistency Model</h1>
<p class="text-sm">
This demo showcases
<a
href="https://huggingface.co/SimianLuo/LCM_Dreamshaper_v7"
target="_blank"
class="text-blue-500 underline hover:no-underline">LCM</a
>
Image to Image pipeline using
<a
href="https://github.com/huggingface/diffusers/tree/main/examples/community#latent-consistency-pipeline"
target="_blank"
class="text-blue-500 underline hover:no-underline">Diffusers</a
> with a MJPEG stream server.
</p>
<p class="text-sm">
There are <span id="queue_size" class="font-bold">0</span> user(s) sharing the same GPU,
affecting real-time performance. Maximum queue size is 4.
<a
href="https://huggingface.co/spaces/radames/Real-Time-Latent-Consistency-Model?duplicate=true"
target="_blank"
class="text-blue-500 underline hover:no-underline">Duplicate</a
> and run it on your own GPU.
</p>
</article>
{#if pipelineParams}
<h2 class="font-medium">Prompt</h2>
<p class="text-sm text-gray-500">
Change the prompt to generate different images, accepts <a
href="https://github.com/damian0815/compel/blob/main/doc/syntax.md"
target="_blank"
class="text-blue-500 underline hover:no-underline">Compel</a
> syntax.
</p>
<PipelineOptions {pipelineParams} bind:pipelineValues></PipelineOptions>
<div class="flex gap-3">
<Button>Start</Button>
<Button>Stop</Button>
<Button classList={'ml-auto'}>Snapshot</Button>
</div>
<ImagePlayer>
<VideoInput></VideoInput>
</ImagePlayer>
{: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>
|