neuro_llc/ComfyBox
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Gradio dark theme

Browse Source
This commit is contained in:
space-nuko
2023-05-12 11:22:35 -05:00
parent 34c18dea90
commit 3bf774ba0c
11 changed files with 735 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/api.ts
View File

@@ -154,7 +154,7 @@ export default class ComfyAPI {
this.clientId = msg.data.sid;
sessionStorage["Comfy.SessionId"] = this.clientId;
}
this.eventBus.emit("status", msg.data.status);
this.eventBus.emit("status", { execInfo: { queueRemaining: msg.data.status.exec_info.queue_remaining } });
break;
case "progress":
this.eventBus.emit("progress", msg.data as Progress);
@@ -172,10 +172,10 @@ export default class ComfyAPI {
this.eventBus.emit("execution_error", msg.data.prompt_id, msg.data.message);
break;
default:
throw new Error(`Unknown message type: ${msg.type} ${msg}`);
console.warn("Unhandled message:", event.data);
}
} catch (error) {
console.warn("Unhandled message:", event.data);
console.error("Error handling message", event.data, error);
}
});
}

4
src/lib/components/AccordionContainer.svelte
View File

@@ -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;
}

34
src/lib/components/ComfyApp.svelte
View File

@@ -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;
}

7
src/lib/components/ComfyApp.ts
View File

@@ -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() {

9
src/lib/components/ComfyProperties.svelte
View File

@@ -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 {

192
src/lib/components/ComfyQueue.svelte
View File

@@ -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 {

93
src/lib/stores/queueState.ts
View File

@@ -1,7 +1,7 @@
import type { ComfyAPIHistoryItem, ComfyAPIQueueResponse, ComfyAPIStatusResponse, NodeID, PromptID } from "$lib/api";
import type { Progress, SerializedPrompt, SerializedPromptOutputs } from "$lib/components/ComfyApp";
import type { GalleryOutput } from "$lib/nodes/ComfyWidgetNodes";
import { writable, type Writable } from "svelte/store";
import { get, writable, type Writable } from "svelte/store";
export type QueueItem = {
name: string
@@ -20,6 +20,8 @@ type QueueStateOps = {
export type QueueEntry = {
number: number,
queuedAt?: Date,
finishedAt?: Date,
promptID: PromptID,
prompt: SerializedPrompt,
extraData: any,
@@ -36,9 +38,9 @@ export type CompletedQueueEntry = {
}
export type QueueState = {
queueRunning: QueueEntry[],
queuePending: QueueEntry[],
queueCompleted: CompletedQueueEntry[],
queueRunning: Writable<QueueEntry[]>,
queuePending: Writable<QueueEntry[]>,
queueCompleted: Writable<CompletedQueueEntry[]>,
queueRemaining: number | "X" | null;
runningNodeID: number | null;
progress: Progress | null
@@ -46,9 +48,9 @@ export type QueueState = {
type WritableQueueStateStore = Writable<QueueState> & QueueStateOps;
const store: Writable<QueueState> = writable({
queueRunning: [],
queuePending: [],
queueCompleted: [],
queueRunning: writable([]),
queuePending: writable([]),
queueCompleted: writable([]),
queueRemaining: null,
runningNodeID: null,
progress: null
@@ -58,6 +60,8 @@ function toQueueEntry(resp: ComfyAPIHistoryItem): QueueEntry {
const [num, promptID, prompt, extraData, goodOutputs] = resp
return {
number: num,
queuedAt: null, // TODO when ComfyUI passes the date
finishedAt: null,
promptID,
prompt,
extraData,
@@ -67,15 +71,17 @@ function toQueueEntry(resp: ComfyAPIHistoryItem): QueueEntry {
}
function queueUpdated(queue: ComfyAPIQueueResponse) {
console.debug("[queueState] queueUpdated", queue.running.length, queue.pending.length)
store.update((s) => {
s.queueRunning = queue.running.map(toQueueEntry);
s.queuePending = queue.pending.map(toQueueEntry);
s.queueRemaining = s.queuePending.length;
s.queueRunning.set(queue.running.map(toQueueEntry));
s.queuePending.set(queue.pending.map(toQueueEntry));
s.queueRemaining = queue.pending.length;
return s
})
}
function progressUpdated(progress: Progress) {
// console.debug("[queueState] progressUpdated", progress)
store.update((s) => {
s.progress = progress;
return s
@@ -83,6 +89,7 @@ function progressUpdated(progress: Progress) {
}
function statusUpdated(status: ComfyAPIStatusResponse | null) {
console.debug("[queueState] statusUpdated", status)
store.update((s) => {
if (status !== null)
s.queueRemaining = status.execInfo.queueRemaining;
@@ -99,9 +106,20 @@ function executingUpdated(promptID: PromptID | null, runningNodeID: NodeID | nul
}
else if (promptID != null) {
// Prompt finished executing.
const index = s.queuePending.findIndex(e => e.promptID === promptID)
const queuePending = get(s.queuePending)
const index = queuePending.findIndex(e => e.promptID === promptID)
if (index) {
s.queuePending = s.queuePending.splice(index, 1);
const entry = queuePending[index]
entry.finishedAt = new Date() // Now
s.queuePending.update(qp => { qp.splice(index, 1); return qp });
s.queueCompleted.update(qc => {
const completed: CompletedQueueEntry = {
entry,
type: "success",
}
qc.push(completed)
return qc
})
}
s.progress = null;
s.runningNodeID = null;
@@ -113,17 +131,22 @@ function executingUpdated(promptID: PromptID | null, runningNodeID: NodeID | nul
function executionCached(promptID: PromptID, nodes: NodeID[]) {
console.debug("[queueState] executionCached", promptID, nodes)
store.update(s => {
const index = s.queuePending.findIndex(e => e.promptID === promptID)
const queuePending = get(s.queuePending)
const index = queuePending.findIndex(e => e.promptID === promptID)
if (index) {
const entry = s.queuePending[index]
const entry = queuePending[index]
if (nodes.length >= Object.keys(entry.prompt.output).length) {
s.queuePending = s.queuePending.splice(index, 1);
const completed: CompletedQueueEntry = {
entry,
type: "all_cached"
}
s.queueCompleted.push(completed)
entry.finishedAt = new Date() // Now
s.queuePending.update(qp => { qp.splice(index, 1); return qp });
s.queueCompleted.update(qc => {
const completed: CompletedQueueEntry = {
entry,
type: "all_cached",
}
qc.push(completed)
return qc
})
}
}
s.progress = null;
@@ -135,16 +158,21 @@ function executionCached(promptID: PromptID, nodes: NodeID[]) {
function executionError(promptID: PromptID, message: string) {
console.debug("[queueState] executionError", promptID, message)
store.update(s => {
const index = s.queuePending.findIndex(e => e.promptID === promptID)
const queuePending = get(s.queuePending)
const index = queuePending.findIndex(e => e.promptID === promptID)
if (index) {
const entry = s.queuePending[index]
s.queuePending = s.queuePending.splice(index, 1);
const completed: CompletedQueueEntry = {
entry,
type: "error",
error: message
}
s.queueCompleted.push(completed)
entry.finishedAt = new Date() // Now
s.queuePending.update(qp => { qp.splice(index, 1); return qp });
s.queueCompleted.update(qc => {
const completed: CompletedQueueEntry = {
entry,
type: "error",
error: message
}
qc.push(completed)
return qc
})
}
s.progress = null;
s.runningNodeID = null;
@@ -157,13 +185,15 @@ function afterQueued(promptID: PromptID, number: number, prompt: SerializedPromp
store.update(s => {
const entry: QueueEntry = {
number,
queuedAt: new Date(), // Now
finishedAt: null,
promptID,
prompt,
extraData,
goodOutputs: [],
outputs: {}
}
s.queuePending.push(entry)
s.queuePending.update(qp => { qp.push(entry); return qp })
return s
})
}
@@ -171,10 +201,11 @@ function afterQueued(promptID: PromptID, number: number, prompt: SerializedPromp
function onExecuted(promptID: PromptID, nodeID: NodeID, output: GalleryOutput) {
console.debug("[queueState] onExecuted", promptID, nodeID, output)
store.update(s => {
const entry = s.queuePending.find(e => e.promptID === promptID)
const queuePending = get(s.queuePending)
const entry = queuePending.find(e => e.promptID === promptID)
if (entry) {
entry.outputs[nodeID] = output;
s.queuePending.push(entry)
s.queuePending.update(qp => { qp.push(entry); return qp; })
}
return s
})

2
src/lib/utils.ts
View File

@@ -104,7 +104,7 @@ export function promptToGraphVis(prompt: SerializedPrompt): string {
export function getNodeInfo(nodeId: number): string {
let app = (window as any).app;
if (!app)
if (!app || !app.lGraph)
return String(nodeId);
const title = app.lGraph.getNodeById(nodeId)?.title || String(nodeId);

38
src/lib/widgets/ComboWidget.svelte
View File

@@ -246,6 +246,22 @@
width: auto;
--font-size: 13px;
--height: 32px;
--background: var(--input-background-fill);
--selected-item-color: var(--body-text-color);
--input-color: var(--body-text-color);
--chevron-color: var(--body-text-color);
--border: 1px solid var(--input-border-color);
--border-hover: 1px solid var(--input-border-color-hover);
--border-focused: 1px solid var(--input-border-color-focus);
--border-radius-focused: 0px;
--border-radius: 0px;
--list-background: var(--comfy-dropdown-list-background);
--item-border: var(--comfy-dropdown-border-color);
--item-color: var(--body-text-color);
--item-color-hover: var(--comfy-dropdown-item-color-hover);
--item-background-hover: var(--comfy-dropdown-item-background-hover);
--item-color-active: var(--comfy-dropdown-item-color-active);
--item-background-active: var(--comfy-dropdown-item-background-active);
}
:global(.svelte-select-list) {
@@ -263,10 +279,11 @@
.comfy-select-list {
width: 30rem;
color: var(--item-color);
> :global(.virtual-list-wrapper) {
box-shadow: var(--block-shadow);
background-color: white;
background-color: var(--list-background);
}
.comfy-empty-list {
@@ -279,35 +296,34 @@
}
.comfy-select-item {
border: 1px solid var(--neutral-300);
border: 1px solid var(--item-border);
border-top: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
background-color: white;
background-color: var(--list-background);
font-size: 14px;
padding: 0.2rem;
.comfy-select-label {
}
&.mobile {
font-size: 16px;
padding: 1.2rem;
}
&.hover {
color: white;
background: var(--neutral-400);
color: var(--item-color-hover);
background: var(--item-background-hover);
cursor: pointer;
}
&.active {
color: white;
background: var(--color-blue-500);
}
.comfy-select-label {
color: var(--item-color-active);
background: var(--item-background-active);
}
}