adding new components

README.md

@@ -102,6 +102,12 @@ or with environment variables
 ```bash
 docker run -ti -e TIMEOUT=0 -e SAFETY_CHECKER=False -p 7860:7860 --gpus all lcm-live
 ```
+# Development Mode
+
+
+```bash
+python run.py --reload  
+```
 
 # Demo on Hugging Face
 

app_init.py

@@ -140,6 +140,6 @@ def init_app(app: FastAPI, user_queue_map: UserQueueDict, args: Args, pipeline):
     @app.get("/settings")
     async def settings():
         params = pipeline.InputParams()
-        return JSONResponse({"settings": params.dict()})
+        return JSONResponse(params.model_json_schema())
 
     app.mount("/", StaticFiles(directory="public", html=True), name="public")

frontend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.1",
       "devDependencies": {
         "@sveltejs/adapter-auto": "^2.0.0",
+        "@sveltejs/adapter-static": "^2.0.3",
         "@sveltejs/kit": "^1.20.4",
         "@typescript-eslint/eslint-plugin": "^6.0.0",
         "@typescript-eslint/parser": "^6.0.0",
@@ -614,6 +615,15 @@
         "@sveltejs/kit": "^1.0.0"
       }
     },
+    "node_modules/@sveltejs/adapter-static": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-2.0.3.tgz",
+      "integrity": "sha512-VUqTfXsxYGugCpMqQv1U0LIdbR3S5nBkMMDmpjGVJyM6Q2jHVMFtdWJCkeHMySc6mZxJ+0eZK3T7IgmUCDrcUQ==",
+      "dev": true,
+      "peerDependencies": {
+        "@sveltejs/kit": "^1.5.0"
+      }
+    },
     "node_modules/@sveltejs/kit": {
       "version": "1.27.5",
       "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.27.5.tgz",

frontend/package.json

@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/adapter-static": "^2.0.3",
     "@sveltejs/kit": "^1.20.4",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",

frontend/src/lib/components/Button.svelte

@@ -0,0 +1,7 @@
+<button class="button" on:click> <slot /> </button>
+
+<style lang="postcss">
+  .button {
+    @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;
+  }
+</style>

frontend/src/lib/components/ImagePlayer.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+</script>
+
+<div class="relative overflow-hidden rounded-lg border border-slate-300">
+  <!-- svelte-ignore a11y-missing-attribute -->
+  <img
+    class="aspect-square w-full rounded-lg"
+    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
+  />
+  <div class="absolute left-0 top-0 aspect-square w-1/4">
+    <div class="relative z-10 aspect-square w-full object-cover">
+      <slot />
+    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 448 448"
+      width="100"
+      class="absolute top-0 z-0 w-full p-4 opacity-20"
+    >
+      <path
+        fill="currentColor"
+        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"
+      />
+    </svg>
+  </div>
+</div>

frontend/src/lib/components/InputRange.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { FieldProps } from '$lib/types';
+  import { onMount } from 'svelte';
+  export let value = 8.0;
+  export let params: FieldProps;
+  onMount(() => {
+    value = Number(params?.default) ?? 8.0;
+  });
+</script>
+
+<div class="grid max-w-md grid-cols-4 items-center gap-3">
+  <label class="text-sm font-medium" for="guidance-scale">{params?.title}</label>
+  <input
+    class="col-span-2"
+    bind:value
+    type="range"
+    id="guidance-scale"
+    name="guidance-scale"
+    min={params?.min}
+    max={params?.max}
+    step={params?.step ?? 1}
+  />
+  <input
+    type="number"
+    step={params?.step ?? 1}
+    bind:value
+    class="rounded-md border border-gray-700 px-1 py-1 text-center text-xs font-light"
+  />
+</div>

frontend/src/lib/components/PipelineOptions.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import type { FieldProps } from '$lib/types';
+  import { FieldType } from '$lib/types';
+  import InputRange from './InputRange.svelte';
+  import SeedInput from './SeedInput.svelte';
+  import TextArea from './TextArea.svelte';
+
+  export let pipelineParams: FieldProps[];
+  export let pipelineValues = {} as any;
+
+  $: advanceOptions = pipelineParams?.filter((e) => e?.hide == true);
+  $: featuredOptions = pipelineParams?.filter((e) => e?.hide !== true);
+</script>
+
+<div>
+  {#if featuredOptions}
+    {#each featuredOptions as params}
+      {#if params.field === FieldType.range}
+        <InputRange {params} bind:value={pipelineValues[params.title]}></InputRange>
+      {:else if params.field === FieldType.seed}
+        <SeedInput bind:value={pipelineValues[params.title]}></SeedInput>
+      {:else if params.field === FieldType.textarea}
+        <TextArea {params} bind:value={pipelineValues[params.title]}></TextArea>
+      {/if}
+    {/each}
+  {/if}
+</div>
+
+<details open>
+  <summary class="cursor-pointer font-medium">Advanced Options</summary>
+  <div class="flex flex-col gap-3 py-3">
+    {#if advanceOptions}
+      {#each advanceOptions as params}
+        {#if params.field === FieldType.range}
+          <InputRange {params} bind:value={pipelineValues[params.title]}></InputRange>
+        {:else if params.field === FieldType.seed}
+          <SeedInput bind:value={pipelineValues[params.title]}></SeedInput>
+        {:else if params.field === FieldType.textarea}
+          <TextArea {params} bind:value={pipelineValues[params.title]}></TextArea>
+        {/if}
+      {/each}
+    {/if}
+  </div>
+</details>

frontend/src/lib/components/SeedInput.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import Button from './Button.svelte';
+  export let value = 299792458;
+
+  function randomize() {
+    value = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
+  }
+</script>
+
+<div class="grid max-w-md grid-cols-4 items-center gap-3">
+  <label class="text-sm font-medium" for="seed">Seed</label>
+  <input
+    bind:value
+    type="number"
+    id="seed"
+    name="seed"
+    class="col-span-2 rounded-md border border-gray-700 p-2 text-right font-light dark:text-black"
+  />
+  <Button on:click={randomize}>Randomize</Button>
+</div>

frontend/src/lib/components/TextArea.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { FieldProps } from '$lib/types';
+  import { onMount } from 'svelte';
+  export let value: string;
+  export let params: FieldProps;
+  onMount(() => {
+    value = String(params?.default ?? '');
+  });
+</script>
+
+<div class="text-normal flex items-center rounded-md border border-gray-700 px-1 py-1">
+  <textarea
+    class="mx-1 w-full px-3 py-2 font-light outline-none dark:text-black"
+    title={params?.title}
+    placeholder="Add your prompt here..."
+    bind:value
+  ></textarea>
+</div>

frontend/src/lib/components/VideoInput.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<video playsinline autoplay muted loop />

frontend/src/lib/types.ts

@@ -0,0 +1,16 @@
+export const enum FieldType {
+    range = "range",
+    seed = "seed",
+    textarea = "textarea",
+}
+
+export interface FieldProps {
+    default: number | string;
+    max?: number;
+    min?: number;
+    title: string;
+    field: FieldType;
+    step?: number;
+    disabled?: boolean;
+    hide?: boolean;
+}

frontend/src/routes/+page.svelte

@@ -1,21 +1,34 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { PUBLIC_BASE_URL } from '$env/static/public';
+  import type { FieldProps } 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';
+
+  let pipelineParams: FieldProps[];
+  let pipelineValues = {};
 
   onMount(() => {
     getSettings();
   });
+
   async function getSettings() {
     const settings = await fetch(`${PUBLIC_BASE_URL}/settings`).then((r) => r.json());
-    console.log(settings);
+    pipelineParams = Object.values(settings.properties);
+    pipelineParams = pipelineParams.filter((e) => e?.disabled !== true);
+  }
+
+  $: {
+    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-4 px-4 py-4">
-  <article class="mx-auto max-w-xl text-center">
+<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>
-    <h2 class="mb-4 text-2xl font-bold">Image to Image</h2>
     <p class="text-sm">
       This demo showcases
       <a
@@ -40,121 +53,28 @@
       > and run it on your own GPU.
     </p>
   </article>
-  <div>
-    <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>
-    <div class="text-normal flex items-center rounded-md border border-gray-700 px-1 py-1">
-      <textarea
-        type="text"
-        id="prompt"
-        class="mx-1 w-full px-3 py-2 font-light outline-none dark:text-black"
-        title="Prompt, this is an example, feel free to modify"
-        placeholder="Add your prompt here..."
-        >Portrait of The Terminator with , glare pose, detailed, intricate, full of colour,
-        cinematic lighting, trending on artstation, 8k, hyperrealistic, focused, extreme details,
-        unreal engine 5, cinematic, masterpiece</textarea
-      >
-    </div>
-  </div>
-  <div class="">
-    <details>
-      <summary class="cursor-pointer font-medium">Advanced Options</summary>
-      <div class="grid max-w-md grid-cols-3 items-center gap-3 py-3">
-        <label class="text-sm font-medium" for="guidance-scale">Guidance Scale </label>
-        <input
-          type="range"
-          id="guidance-scale"
-          name="guidance-scale"
-          min="1"
-          max="30"
-          step="0.001"
-          value="8.0"
-          oninput="this.nextElementSibling.value = Number(this.value).toFixed(2)"
-        />
-        <output
-          class="w-[50px] rounded-md border border-gray-700 px-1 py-1 text-center text-xs font-light"
-        >
-          8.0</output
-        >
-        <label class="text-sm font-medium" for="strength">Strength</label>
-        <input
-          type="range"
-          id="strength"
-          name="strength"
-          min="0.20"
-          max="1"
-          step="0.001"
-          value="0.50"
-          oninput="this.nextElementSibling.value = Number(this.value).toFixed(2)"
-        />
-        <output
-          class="w-[50px] rounded-md border border-gray-700 px-1 py-1 text-center text-xs font-light"
-        >
-          0.5</output
-        >
-        <label class="text-sm font-medium" for="seed">Seed</label>
-        <input
-          type="number"
-          id="seed"
-          name="seed"
-          value="299792458"
-          class="rounded-md border border-gray-700 p-2 text-right font-light dark:text-black"
-        />
-        <button
-          onclick="document.querySelector('#seed').value = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER)"
-          class="button"
-        >
-          Rand
-        </button>
-      </div>
-    </details>
-  </div>
+  <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 id="start" class="button"> Start </button>
-    <button id="stop" class="button"> Stop </button>
-    <button id="snap" disabled class="button ml-auto"> Snapshot </button>
-  </div>
-  <div class="relative overflow-hidden rounded-lg border border-slate-300">
-    <img
-      id="player"
-      class="aspect-square w-full rounded-lg"
-      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
-    />
-    <div class="absolute left-0 top-0 aspect-square w-1/4">
-      <video
-        id="webcam"
-        class="relative z-10 aspect-square w-full object-cover"
-        playsinline
-        autoplay
-        muted
-        loop
-      />
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 448 448"
-        width="100"
-        class="absolute top-0 z-0 w-full p-4 opacity-20"
-      >
-        <path
-          fill="currentColor"
-          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"
-        />
-      </svg>
-    </div>
+    <Button>Start</Button>
+    <Button>Stop</Button>
+    <Button>Snapshot</Button>
   </div>
+
+  <ImagePlayer>
+    <VideoInput></VideoInput>
+  </ImagePlayer>
 </main>
 
 <style lang="postcss">
   :global(html) {
     @apply text-black dark:bg-gray-900 dark:text-white;
   }
-  .button {
-    @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;
-  }
 </style>

pipelines/txt2img.py

@@ -9,23 +9,48 @@ except:
 
 import psutil
 from config import Args
-from pydantic import BaseModel
+from pydantic import BaseModel, Field
 from PIL import Image
 from typing import Callable
 
 base_model = "SimianLuo/LCM_Dreamshaper_v7"
 taesd_model = "madebyollin/taesd"
 
+default_prompt = "Portrait of The Terminator with , glare pose, detailed, intricate, full of colour, cinematic lighting, trending on artstation, 8k, hyperrealistic, focused, extreme details, unreal engine 5 cinematic, masterpiece"
+
 
 class Pipeline:
     class InputParams(BaseModel):
-        seed: int = 2159232
-        prompt: str = ""
-        guidance_scale: float = 8.0
-        strength: float = 0.5
-        steps: int = 4
-        width: int = 512
-        height: int = 512
+        prompt: str = Field(
+            default_prompt,
+            title="Prompt",
+            field="textarea",
+        )
+        seed: int = Field(2159232, min=0, title="Seed", field="seed", hide=True)
+        strength: float = Field(
+            0.5,
+            min=0,
+            max=1,
+            step=0.001,
+            title="Strength",
+            field="range",
+            hide=True,
+        )
+
+        steps: int = Field(4, min=2, max=15, title="Steps", field="range", hide=True)
+        width: int = Field(512, min=2, max=15, title="Width", disabled=True, hide=True)
+        height: int = Field(
+            512, min=2, max=15, title="Height", disabled=True, hide=True
+        )
+        guidance_scale: float = Field(
+            8.0,
+            min=1,
+            max=30,
+            step=0.001,
+            title="Guidance Scale",
+            field="range",
+            hide=True,
+        )
 
     def __init__(self, args: Args, device: torch.device, torch_dtype: torch.dtype):
         if args.safety_checker:

util.py

@@ -1,5 +1,7 @@
 from importlib import import_module
 from types import ModuleType
+from typing import Dict, Any
+from pydantic import BaseModel as PydanticBaseModel, Field
 
 
 def get_pipeline_class(pipeline_name: str) -> ModuleType:
@@ -11,6 +13,6 @@ def get_pipeline_class(pipeline_name: str) -> ModuleType:
     pipeline_class = getattr(module, "Pipeline", None)
 
     if pipeline_class is None:
-        raise ValueError(f"'Pipeline' class not found in module '{module_name}'.")
+        raise ValueError(f"'Pipeline' class not found in module '{pipeline_name}'.")
 
     return pipeline_class