radames commited on
Commit
d1f4c77
1 Parent(s): 6a5df00
frontend/src/lib/components/Button.svelte CHANGED
@@ -1,14 +1,15 @@
1
  <script lang="ts">
2
- export let classList: string = '';
3
  export let disabled: boolean = false;
 
4
  </script>
5
 
6
- <button class="button {classList}" on:click {disabled}>
7
  <slot />
8
  </button>
9
 
10
  <style lang="postcss" scoped>
11
  .button {
12
- @apply rounded bg-gray-700 p-2 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;
13
  }
14
  </style>
 
1
  <script lang="ts">
2
+ export let classList: string = 'p-2';
3
  export let disabled: boolean = false;
4
+ export let title: string = '';
5
  </script>
6
 
7
+ <button class="button {classList}" on:click {disabled} {title}>
8
  <slot />
9
  </button>
10
 
11
  <style lang="postcss" scoped>
12
  .button {
13
+ @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;
14
  }
15
  </style>
frontend/src/lib/components/ImagePlayer.svelte CHANGED
@@ -1,38 +1,46 @@
1
  <script lang="ts">
2
  import { lcmLiveStatus, LCMLiveStatus, streamId } from '$lib/lcmLive';
 
 
3
  import Button from '$lib/components/Button.svelte';
 
4
  import { snapImage } from '$lib/utils';
5
 
6
- $: {
7
- console.log('streamId', $streamId);
8
- }
9
  $: isLCMRunning = $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED;
10
  $: console.log('isLCMRunning', isLCMRunning);
11
  let imageEl: HTMLImageElement;
12
  async function takeSnapshot() {
13
  if (isLCMRunning) {
14
- await snapImage(imageEl);
 
 
 
 
 
15
  }
16
  }
17
  </script>
18
 
19
- <div class="flex flex-col">
20
- <div class="relative overflow-hidden rounded-lg border border-slate-300">
21
- <!-- svelte-ignore a11y-missing-attribute -->
22
- {#if isLCMRunning}
23
- <img
24
- bind:this={imageEl}
25
- class="aspect-square w-full rounded-lg"
26
- src={'/stream/' + $streamId}
27
- />
28
- {:else}
29
- <div class="aspect-square w-full rounded-lg" />
30
- {/if}
31
- <div class="absolute left-0 top-0 aspect-square w-1/4">
32
- <slot />
 
33
  </div>
34
- </div>
35
- <Button on:click={takeSnapshot} disabled={!isLCMRunning} classList={'text-sm my-1 ml-auto'}
36
- >Snap</Button
37
- >
 
 
38
  </div>
 
1
  <script lang="ts">
2
  import { lcmLiveStatus, LCMLiveStatus, streamId } from '$lib/lcmLive';
3
+ import { getPipelineValues } from '$lib/store';
4
+
5
  import Button from '$lib/components/Button.svelte';
6
+ import Floppy from '$lib/icons/floppy.svelte';
7
  import { snapImage } from '$lib/utils';
8
 
 
 
 
9
  $: isLCMRunning = $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED;
10
  $: console.log('isLCMRunning', isLCMRunning);
11
  let imageEl: HTMLImageElement;
12
  async function takeSnapshot() {
13
  if (isLCMRunning) {
14
+ await snapImage(imageEl, {
15
+ prompt: getPipelineValues()?.prompt,
16
+ negative_prompt: getPipelineValues()?.negative_prompt,
17
+ seed: getPipelineValues()?.seed,
18
+ guidance_scale: getPipelineValues()?.guidance_scale
19
+ });
20
  }
21
  }
22
  </script>
23
 
24
+ <div
25
+ class="relative mx-auto aspect-square max-w-lg self-center overflow-hidden rounded-lg border border-slate-300"
26
+ >
27
+ <!-- svelte-ignore a11y-missing-attribute -->
28
+ {#if isLCMRunning}
29
+ <img bind:this={imageEl} class="aspect-square w-full rounded-lg" src={'/stream/' + $streamId} />
30
+ <div class="absolute bottom-1 right-1">
31
+ <Button
32
+ on:click={takeSnapshot}
33
+ disabled={!isLCMRunning}
34
+ title={'Take Snapshot'}
35
+ classList={'text-sm ml-auto text-white p-1 shadow-lg rounded-lg opacity-50'}
36
+ >
37
+ <Floppy classList={''} />
38
+ </Button>
39
  </div>
40
+ {:else}
41
+ <img
42
+ class="aspect-square w-full rounded-lg"
43
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
44
+ />
45
+ {/if}
46
  </div>
frontend/src/lib/components/VideoInput.svelte CHANGED
@@ -53,24 +53,23 @@
53
  }
54
  </script>
55
 
56
- <div class="relative z-10 aspect-square w-full object-cover">
57
- <video
58
- class="aspect-square w-full object-cover"
59
- bind:this={videoEl}
60
- playsinline
61
- autoplay
62
- muted
63
- loop
64
- ></video>
 
 
 
 
 
 
 
 
 
 
65
  </div>
66
- <svg
67
- xmlns="http://www.w3.org/2000/svg"
68
- viewBox="0 0 448 448"
69
- width="100"
70
- class="absolute top-0 z-0 w-full p-4 opacity-20"
71
- >
72
- <path
73
- fill="currentColor"
74
- d="M224 256a128 128 0 1 0 0-256 128 128 0 1 0 0 256zm-45.7 48A178.3 178.3 0 0 0 0 482.3 29.7 29.7 0 0 0 29.7 512h388.6a29.7 29.7 0 0 0 29.7-29.7c0-98.5-79.8-178.3-178.3-178.3h-91.4z"
75
- />
76
- </svg>
 
53
  }
54
  </script>
55
 
56
+ <div class="relative overflow-hidden rounded-lg border border-slate-300">
57
+ <div class="relative z-10 aspect-square w-full object-cover">
58
+ <video
59
+ class="aspect-square w-full object-cover"
60
+ bind:this={videoEl}
61
+ playsinline
62
+ autoplay
63
+ muted
64
+ loop
65
+ ></video>
66
+ </div>
67
+ <div class="absolute left-0 top-0 flex aspect-square w-full items-center justify-center">
68
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448" class="w-40 p-5 opacity-20">
69
+ <path
70
+ fill="currentColor"
71
+ d="M224 256a128 128 0 1 0 0-256 128 128 0 1 0 0 256zm-45.7 48A178.3 178.3 0 0 0 0 482.3 29.7 29.7 0 0 0 29.7 512h388.6a29.7 29.7 0 0 0 29.7-29.7c0-98.5-79.8-178.3-178.3-178.3h-91.4z"
72
+ />
73
+ </svg>
74
+ </div>
75
  </div>
 
 
 
 
 
 
 
 
 
 
 
frontend/src/lib/icons/floppy.svelte ADDED
@@ -0,0 +1,10 @@
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ export let classList: string;
3
+ </script>
4
+
5
+ <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" class={classList}>
6
+ <path
7
+ fill="currentColor"
8
+ d="M48 96v320a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V170.5a16 16 0 0 0-4.7-11.3l33.9-33.9a64 64 0 0 1 18.7 45.3V416a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V96a64 64 0 0 1 64-64h245.5a64 64 0 0 1 45.3 18.7l74.5 74.5-33.9 33.9-74.6-74.4-.8-.8V184a24 24 0 0 1-24 24H104a24 24 0 0 1-24-24V80H64a16 16 0 0 0-16 16zm80-16v80h144V80H128zm32 240a64 64 0 1 1 128 0 64 64 0 1 1-128 0z"
9
+ />
10
+ </svg>
frontend/src/lib/utils.ts CHANGED
@@ -1,12 +1,19 @@
1
  import * as piexif from "piexifjs";
2
 
3
- export function snapImage(imageEl: HTMLImageElement) {
 
 
 
 
 
 
 
4
  try {
5
  const zeroth: { [key: string]: any } = {};
6
  const exif: { [key: string]: any } = {};
7
  const gps: { [key: string]: any } = {};
8
  zeroth[piexif.ImageIFD.Make] = "LCM Image-to-Image ControNet";
9
- // zeroth[piexif.ImageIFD.ImageDescription] = `prompt: ${getValue("#prompt")} | seed: ${getValue("#seed")} | guidance_scale: ${getValue("#guidance-scale")} | strength: ${getValue("#strength")} | controlnet_start: ${getValue("#controlnet_start")} | controlnet_end: ${getValue("#controlnet_end")} | steps: ${getValue("#steps")}`;
10
  zeroth[piexif.ImageIFD.Software] = "https://github.com/radames/Real-Time-Latent-Consistency-Model";
11
  exif[piexif.ExifIFD.DateTimeOriginal] = new Date().toISOString();
12
 
 
1
  import * as piexif from "piexifjs";
2
 
3
+ interface IImageInfo {
4
+ prompt?: string;
5
+ negative_prompt?: string;
6
+ seed?: number;
7
+ guidance_scale?: number;
8
+ }
9
+
10
+ export function snapImage(imageEl: HTMLImageElement, info: IImageInfo) {
11
  try {
12
  const zeroth: { [key: string]: any } = {};
13
  const exif: { [key: string]: any } = {};
14
  const gps: { [key: string]: any } = {};
15
  zeroth[piexif.ImageIFD.Make] = "LCM Image-to-Image ControNet";
16
+ zeroth[piexif.ImageIFD.ImageDescription] = `prompt: ${info?.prompt} | negative_prompt: ${info?.negative_prompt} | seed: ${info?.seed} | guidance_scale: ${info?.guidance_scale}`;
17
  zeroth[piexif.ImageIFD.Software] = "https://github.com/radames/Real-Time-Latent-Consistency-Model";
18
  exif[piexif.ExifIFD.DateTimeOriginal] = new Date().toISOString();
19
 
frontend/src/routes/+page.svelte CHANGED
@@ -68,7 +68,7 @@
68
  }
69
  </script>
70
 
71
- <main class="container mx-auto flex flex-col gap-3 px-4 py-4">
72
  <article class="text-center">
73
  <h1 class="text-3xl font-bold">Real-Time Latent Consistency Model</h1>
74
  {#if pipelineInfo?.title?.default}
@@ -108,23 +108,24 @@
108
  {/if}
109
  </article>
110
  {#if pipelineParams}
111
- <article class="my-3 grid grid-cols-1 gap-3 lg:grid-cols-2">
112
- <div>
113
- <PipelineOptions {pipelineParams}></PipelineOptions>
114
- <Button on:click={toggleLcmLive} {disabled} classList={'text-lg my-1'}>
 
 
 
 
 
 
 
115
  {#if isLCMRunning}
116
  Stop
117
  {:else}
118
  Start
119
  {/if}
120
  </Button>
121
- </div>
122
- <div>
123
- <ImagePlayer>
124
- {#if isImageMode}
125
- <VideoInput></VideoInput>
126
- {/if}
127
- </ImagePlayer>
128
  </div>
129
  </article>
130
  {:else}
 
68
  }
69
  </script>
70
 
71
+ <main class="container mx-auto flex max-w-5xl flex-col gap-3 px-4 py-4">
72
  <article class="text-center">
73
  <h1 class="text-3xl font-bold">Real-Time Latent Consistency Model</h1>
74
  {#if pipelineInfo?.title?.default}
 
108
  {/if}
109
  </article>
110
  {#if pipelineParams}
111
+ <article class="my-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
112
+ {#if isImageMode}
113
+ <div class="col-start-1">
114
+ <VideoInput></VideoInput>
115
+ </div>
116
+ {/if}
117
+ <div class={isImageMode ? 'col-start-2' : 'col-span-2'}>
118
+ <ImagePlayer />
119
+ </div>
120
+ <div class="col-span-2">
121
+ <Button on:click={toggleLcmLive} {disabled} classList={'text-lg my-1 p-2'}>
122
  {#if isLCMRunning}
123
  Stop
124
  {:else}
125
  Start
126
  {/if}
127
  </Button>
128
+ <PipelineOptions {pipelineParams}></PipelineOptions>
 
 
 
 
 
 
129
  </div>
130
  </article>
131
  {:else}
pipelines/controlnet.py CHANGED
@@ -53,7 +53,7 @@ class Pipeline:
53
  guidance_scale: float = Field(
54
  0.2,
55
  min=0,
56
- max=2,
57
  step=0.001,
58
  title="Guidance Scale",
59
  field="range",
 
53
  guidance_scale: float = Field(
54
  0.2,
55
  min=0,
56
+ max=5,
57
  step=0.001,
58
  title="Guidance Scale",
59
  field="range",