Gradio dark theme

2023-05-12 11:22:35 -05:00
parent 34c18dea90
commit 3bf774ba0c
11 changed files with 735 additions and 492 deletions
--- a/src/lib/components/AccordionContainer.svelte
+++ b/src/lib/components/AccordionContainer.svelte
@@ -179,8 +179,8 @@
     }
 }

- :global(.label-wrap > span:not(.icon)) {
-     /* color: var(--block-title-text-color); */
+ :global(.label-wrap > span) {
+     color: var(--block-title-text-color);
     font-size: 16px;
 }

--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -31,7 +31,7 @@
 let containerElem: HTMLDivElement;
 let resizeTimeout: NodeJS.Timeout | null;
 let hasShownUIHelpToast: boolean = false;
- let uiTheme: string = "";
+ let uiTheme: string = "gradio-dark";
 let fileInput: HTMLInputElement = undefined;

 let debugLayout: boolean = false;
@@ -182,6 +182,13 @@
 async function doRefreshCombos() {
     await app.refreshComboInNodes(true)
 }
+
+ $: if (uiTheme === "gradio-dark") {
+     document.getElementById("app").classList.add("dark")
+ }
+ else {
+     document.getElementById("app").classList.remove("dark")
+ }
 </script>

 <svelte:head>
@@ -190,7 +197,7 @@
    {/if}
 </svelte:head>

-<div id="main">
+<div id="main" class:dark={uiTheme === "gradio-dark"}>
    <div id="dropzone" class="dropzone"></div>
    <div id="container" bind:this={containerElem}>
        <Splitpanes theme="comfy" on:resize={refreshView}>
@@ -264,7 +271,8 @@
            <span class="label" for="ui-theme">
                <BlockTitle>Theme</BlockTitle>
                <select id="ui-theme" name="ui-theme" bind:value={uiTheme}>
-                    <option value="">None</option>
+                    <option value="gradio-dark">Gradio Dark</option>
+                    <option value="gradio-light">Gradio Light</option>
                    <option value="anapnoe">Anapnoe</option>
                </select>
            </span>
@@ -280,8 +288,10 @@
 <SvelteToast options={toastOptions} />

 <style lang="scss">
+ $bottom-bar-height: 70px;
+
 #container {
-     height: calc(100vh - 70px);
+     height: calc(100vh - $bottom-bar-height);
     max-width: 100vw;
     display: grid;
     width: 100%;
@@ -301,7 +311,7 @@
     padding-right: 1em;
     margin-top: auto;
     overflow-x: auto;
-     height: 70px;
+     height: $bottom-bar-height;

     > .left {
         flex-shrink: 0;
@@ -338,28 +348,30 @@
 }

 :global(.splitpanes.comfy>.splitpanes__splitter) {
-     background-color: var(--secondary-100);
+     background: var(--comfy-splitpanes-background-fill);

     &:hover:not([disabled]) {
-         background-color: var(--secondary-300);
+         background: var(--comfy-splitpanes-background-fill-hover);
     }
     &:active:not([disabled]) {
-         background-color: var(--secondary-400);
+         background: var(--comfy-splitpanes-background-fill-active);
     }
 }

+ $splitter-size: 1rem;
+
 :global(.splitpanes.comfy.splitpanes--horizontal>.splitpanes__splitter) {
-     min-height: 20px;
+     min-height: $splitter-size;
     cursor: row-resize;
 }

 :global(.splitpanes.comfy.splitpanes--vertical>.splitpanes__splitter) {
-     min-width: 20px;
+     min-width: $splitter-size;
     cursor: col-resize;
 }

 :global(.splitpanes.comfy) {
-     max-height: calc(100vh - 70px);
+     max-height: calc(100vh - $bottom-bar-height);
     max-width: 100vw;
 }

--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -346,10 +346,6 @@ export default class ComfyApp {
            this.lGraph.setDirtyCanvas(true, false);
        });

-        this.api.addEventListener("status", (status: ComfyAPIStatusResponse | null) => {
-            queueState.statusUpdated(status);
-        });
-
        this.api.addEventListener("executed", (promptID: PromptID, nodeID: NodeID, output: GalleryOutput) => {
            this.nodeOutputs[nodeID] = output;
            const node = this.lGraph.getNodeById(parseInt(nodeID)) as ComfyGraphNode;
@@ -388,8 +384,7 @@ export default class ComfyApp {
    private async updateHistoryAndQueue() {
        const queue = await this.api.getQueue();
        const history = await this.api.getHistory();
-        console.warn("QUEUE", queue)
-        console.warn("HISTORY", history)
+        queueState.queueUpdated(queue);
    }

    private requestPermissions() {
--- a/src/lib/components/ComfyProperties.svelte
+++ b/src/lib/components/ComfyProperties.svelte
@@ -443,8 +443,8 @@
     flex-direction: row;
 }

- .target-name {
-     border-color: var(--neutral-400);
+ .target-name {
+     background: var(--input-background-fill);
     border-color: var(--input-border-color);
     padding: 0.8rem 1.0rem;

@@ -458,13 +458,14 @@
     }
 }

+ .category-name {
+     background: var(--panel-background-fill);
     border-color: var(--panel-border-color);
-     padding: 0.4rem 1.0rem;
-     border-color: var(--neutral-300);
     padding: 0.4rem 1.0rem;
 }

 .target-name, .category-name {
+     border-width: var(--block-border-width);
     color: var(--body-text-color);

     .type {
--- a/src/lib/components/ComfyQueue.svelte
+++ b/src/lib/components/ComfyQueue.svelte
@@ -1,76 +1,89 @@
 <script lang="ts">
- import queueState from "$lib/stores/queueState";
+ import queueState, { type QueueEntry } from "$lib/stores/queueState";
 import ProgressBar from "./ProgressBar.svelte";
 import { getNodeInfo } from "$lib/utils"
+	import type { Writable } from "svelte/store";

- const entries = [
-     {
-         "outputs": {
-             44: {
-                 "images": [
-                     {
-                         "filename": "ComfyUI_00052_.png",
-                         "subfolder": "",
-                         "type": "output"
-                     }
-                 ]
-             }
-         }
-     },
-     {
-         "outputs": {
-             44: {
-                 "images": [
-                     {
-                         "filename": "ComfyUI_00052_.png",
-                         "subfolder": "",
-                         "type": "output"
-                     }
-                 ]
-             }
-         }
-     },
-     {
-         "outputs": {
-             44: {
-                 "images": [
-                     {
-                         "filename": "ComfyUI_00052_.png",
-                         "subfolder": "",
-                         "type": "output"
-                     }
-                 ]
-             }
-         }
-     }
- ]
+ let queuePending: Writable<QueueEntry[]> | null = null;
+ let queueRunning: Writable<QueueEntry[]> | null = null;

- let _entries: any[] = []
+ type QueueUIEntry = {
+     message: string,
+     submessage: string,
+     date?: string,
+     status: "success" | "error" | "pending" | "running" | "all_cached",
+     images?: string[] // URLs
+ }

- $: if (entries) {
+ $: if ($queueState) {
+     queuePending = $queueState.queuePending
+     queueRunning = $queueState.queueRunning
+ }
+
+ let _entries: QueueUIEntry[] = []
+
+ $: if ($queuePending && $queuePending.length != _entries.length) {
     _entries = []
-     for (const entry of entries) {
-         for (const outputs of Object.values(entry.outputs)) {
-             const allImages = outputs.images.map(r => {
-                 // TODO configure backend URL
-                 const url = "http://localhost:8188/view?"
-                 const params = new URLSearchParams(r)
-                 return url + params
-             });
+     for (const entry of $queuePending) {
+         // for (const outputs of Object.values(entry.outputs)) {
+         //     const allImages = outputs.images.map(r => {
+         //         // TODO configure backend URL
+         //         const url = "http://localhost:8188/view?"
+         //         const params = new URLSearchParams(r)
+         //         return url + params
+         //     });
+         //
+         //     _entries.push({ allImages, name: "Output" })
+         // }

-             _entries.push({ allImages, name: "Output" })
+         let date = null;
+         if (entry.queuedAt) {
+             const options: Intl.DateTimeFormatOptions = {
+                 year: 'numeric',
+                 month: '2-digit',
+                 day: '2-digit',
+                 hour: 'numeric',
+                 minute: 'numeric'
+             };
+             const dateTimeFormat = new Intl.DateTimeFormat('en-US', options);
+             date = dateTimeFormat.format(entry.queuedAt);
         }
+
+         _entries.push({
+             message: "Prompt",
+             submessage: ".......",
+             date,
+             status: "pending",
+             images: null
+         })
     }
+     console.error("BUILDENTRIES", _entries, $queuePending)
 }
 </script>

 <div class="queue">
    <div class="queue-entries">
        {#each _entries as entry}
-            <div class="queue-entry">
-                <img class="queue-entry-image" src={entry.allImages[0]} alt="thumbnail" />
+            <div class="queue-entry {entry.status}">
+                {#if entry.images}
+                    <img class="queue-entry-image" src={entry.images[0]} alt="thumbnail" />
+                {:else}
+                    <div class="queue-entry-image-placeholder" />
+                {/if}
                <div class="queue-entry-details">
-                    {entry.name}
+                    <div class="queue-entry-message">
+                        {entry.message}
+                    </div>
+                    <div class="queue-entry-submessage">
+                        {entry.submessage}
+                    </div>
+                </div>
+                <div class="queue-entry-rest">
+                    {#if entry.date != null}
+                        <span class="queue-entry-queued-at">
+                            {entry.date}
+                        </span>
+                    {/if}
                </div>
            </div>
        {/each}
@@ -101,6 +114,11 @@
 </div>

 <style lang="scss">
+ $pending-height: 300px;
+
+ .queue {
+ }
+
 .queue-remaining {
     height: 5em;
     width: 100%;
@@ -112,18 +130,70 @@
     align-items: center;
 }

+ .queue-entries {
+     overflow-y: scroll;
+     max-height: calc(100vh - $pending-height);
+ }
+
 .queue-entry {
-     padding: 0.5rem 0.5rem 0 0.5rem;
+     padding: 0.5rem;
     display: flex;
     flex-direction: row;
+     border-top: 2px solid var(--neutral-200);
+     border-bottom: 1px solid var(--neutral-400);
+
+     &.success {
+         background: green
+     }
+     &.error {
+         background: red
+     }
+     &.cached {
+         background: grey
+     }
 }

 .queue-entry-image {
-     width: var(--size-20)
+     width: var(--size-20);
+ }
+
+ .queue-entry-image-placeholder {
+     width: var(--size-20);
+     background: grey;
+ }
+
+ .queue-entry-rest {
+     width: 100%;
+     position: relative;
 }

 .queue-entry-details {
-     width: var(--size-20)
+     position: relative;
+     padding: 1rem;
+     width: 100%;
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+ }
+
+ .queue-entry-message {
+     width: var(--size-20);
+     font-size: large;
+ }
+
+ .queue-entry-submessage {
+     width: var(--size-20);
+ }
+
+ .queue-entry-queued-at {
+     width: auto;
+     font-size: 14px;
+     position:absolute;
+     right: 0px;
+     bottom:0px;
+     padding: 0.0rem 0.4rem;
+     /* color: var(--neutral-600) */
+     color: var(--neutral-600);
 }

 .node-name {
@@ -137,10 +207,8 @@

 .bottom {
     width: 100%;
-     height: auto;
+     height: $pending-height;
     position: absolute;
-     bottom: 0;
-     padding: 0.5em;
 }

 .in-progress {