new

app_init.py

@@ -139,7 +139,8 @@ def init_app(app: FastAPI, user_queue_map: UserQueueDict, args: Args, pipeline):
     # route to setup frontend
     @app.get("/settings")
     async def settings():
-        params = pipeline.InputParams()
-        return JSONResponse(params.model_json_schema())
+        info = pipeline.Info.schema()
+        input_params = pipeline.InputParams.schema()
+        return JSONResponse({"info": info, "input_params": input_params})
 
     app.mount("/", StaticFiles(directory="public", html=True), name="public")

frontend/src/lib/components/Button.svelte

@@ -1,4 +1,10 @@
-<button class="button" on:click> <slot /> </button>
+<script lang="ts">
+  export let classList: string = '';
+</script>
+
+<button class="button {classList}" on:click>
+  <slot />
+</button>
 
 <style lang="postcss">
   .button {

frontend/src/lib/components/InputRange.svelte

@@ -24,6 +24,6 @@
     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"
+    class="rounded-md border border-gray-700 px-1 py-1 text-center text-xs font-bold dark:text-black"
   />
 </div>

frontend/src/lib/icons/spinner.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let classList: string;
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" class={classList}>
+  <path
+    fill="currentColor"
+    d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"
+  />
+</svg>

frontend/src/lib/types.ts

@@ -13,4 +13,9 @@ export interface FieldProps {
     step?: number;
     disabled?: boolean;
     hide?: boolean;
+}
+export interface PipelineInfo {
+    name: string;
+    description: string;
+    mode: string;
 }

frontend/src/routes/+page.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { PUBLIC_BASE_URL } from '$env/static/public';
-  import type { FieldProps } from '$lib/types';
+  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(() => {
@@ -16,8 +18,10 @@
 
   async function getSettings() {
     const settings = await fetch(`${PUBLIC_BASE_URL}/settings`).then((r) => r.json());
-    pipelineParams = Object.values(settings.properties);
+    pipelineParams = Object.values(settings.input_params.properties);
+    pipelineInfo = settings.info.properties;
     pipelineParams = pipelineParams.filter((e) => e?.disabled !== true);
+    console.log('SETTINGS', pipelineInfo);
   }
 
   $: {
@@ -53,24 +57,32 @@
       > and run it on your own GPU.
     </p>
   </article>
-  <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>Snapshot</Button>
-  </div>
+  {#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>
+    <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">

pipelines/txt2img.py

@@ -20,6 +20,10 @@ default_prompt = "Portrait of The Terminator with , glare pose, detailed, intric
 
 
 class Pipeline:
+    class Info(BaseModel):
+        name: str = "txt2img"
+        description: str = "Generates an image from a text prompt"
+
     class InputParams(BaseModel):
         prompt: str = Field(
             default_prompt,