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

Queue/history bar

Browse Source
This commit is contained in:
space-nuko
2023-05-12 13:46:42 -05:00
parent 3bf774ba0c
commit f64db2035a
11 changed files with 321 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/lib/api.ts
View File

@@ -1,14 +1,15 @@
import type { Progress, SerializedPrompt, SerializedPromptOutput, SerializedPromptOutputs } from "./components/ComfyApp";
import type { Progress, SerializedPrompt, SerializedPromptInputs, SerializedPromptInputsAll, SerializedPromptOutput, SerializedPromptOutputs } from "./components/ComfyApp";
import type TypedEmitter from "typed-emitter";
import EventEmitter from "events";
import type { GalleryOutput } from "./nodes/ComfyWidgetNodes";
import type { SerializedLGraph } from "@litegraph-ts/core";
type PromptRequestBody = {
client_id: string,
prompt: any,
extra_data: any,
front: boolean,
number: number | undefined
export type ComfyPromptRequest = {
client_id?: string,
prompt: SerializedPromptInputsAll,
extra_data: ComfyPromptExtraData,
front?: boolean,
number?: number
}
export type QueueItemType = "queue" | "history";
@@ -34,8 +35,8 @@ export type PromptID = string; // UUID
export type ComfyAPIHistoryItem = [
number, // prompt number
PromptID,
SerializedPrompt,
any, // extra data
SerializedPromptInputsAll,
ComfyPromptExtraData,
NodeID[] // good outputs
]
@@ -54,6 +55,16 @@ export type ComfyAPIHistoryResponse = {
error?: string
}
export type ComfyPromptPNGInfo = {
workflow: SerializedLGraph
}
export type ComfyPromptExtraData = {
extra_pnginfo?: ComfyPromptPNGInfo,
client_id?: string, // UUID
subgraphs: string[]
}
type ComfyAPIEvents = {
status: (status: ComfyAPIStatusResponse | null, error?: Error | null) => void,
progress: (progress: Progress) => void,
@@ -219,19 +230,11 @@ export default class ComfyAPI {
* @param {number} number The index at which to queue the prompt, passing -1 will insert the prompt at the front of the queue
* @param {object} prompt The prompt data to queue
*/
async queuePrompt(number: number, { output, workflow }, extra_data: any): Promise<ComfyAPIPromptResponse> {
const body: PromptRequestBody = {
client_id: this.clientId,
prompt: output,
extra_data,
front: false,
number: number
};
async queuePrompt(body: ComfyPromptRequest): Promise<ComfyAPIPromptResponse> {
body.client_id = this.clientId;
if (number === -1) {
if (body.number === -1) {
body.front = true;
} else if (number != 0) {
body.number = number;
}
let postBody = null;

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

@@ -78,7 +78,7 @@
}
}
let propsSidebarSize = 15; //15;
let propsSidebarSize = 0;
function toggleProps() {
if (propsSidebarSize == 0) {
@@ -90,11 +90,11 @@
}
}
let queueSidebarSize = 15;
let queueSidebarSize = 20;
function toggleQueue() {
if (queueSidebarSize == 0) {
queueSidebarSize = 15;
queueSidebarSize = 20;
app.resizeCanvas();
}
else {

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

@@ -1,6 +1,6 @@
import { LiteGraph, LGraph, LGraphCanvas, LGraphNode, type LGraphNodeConstructor, type LGraphNodeExecutable, type SerializedLGraph, type SerializedLGraphGroup, type SerializedLGraphNode, type SerializedLLink, NodeMode, type Vector2, BuiltInSlotType, type INodeInputSlot } from "@litegraph-ts/core";
import type { LConnectionKind, INodeSlot } from "@litegraph-ts/core";
import ComfyAPI, { type ComfyAPIStatusResponse, type NodeID, type PromptID } from "$lib/api"
import ComfyAPI, { type ComfyAPIStatusResponse, type ComfyPromptExtraData, type ComfyPromptRequest, type NodeID, type PromptID } from "$lib/api"
import { getPngMetadata, importA1111 } from "$lib/pnginfo";
import EventEmitter from "events";
import type TypedEmitter from "typed-emitter";
@@ -385,6 +385,7 @@ export default class ComfyApp {
const queue = await this.api.getQueue();
const history = await this.api.getHistory();
queueState.queueUpdated(queue);
queueState.historyUpdated(history);
}
private requestPermissions() {
@@ -739,13 +740,24 @@ export default class ComfyApp {
const p = await this.graphToPrompt(tag);
console.debug(promptToGraphVis(p))
const extra_data = { extra_pnginfo: { workflow: p.workflow } }
const extraData: ComfyPromptExtraData = {
extra_pnginfo: {
workflow: p.workflow
},
subgraphs: [tag]
}
let error = null;
let promptID = null;
const request: ComfyPromptRequest = {
number: num,
extra_data: extraData,
prompt: p.output
}
try {
const response = await this.api.queuePrompt(num, p, extra_data);
const response = await this.api.queuePrompt(request);
promptID = response.promptID;
error = response.error;
} catch (error) {
@@ -768,7 +780,7 @@ export default class ComfyApp {
}
this.lCanvas.draw(true, true);
queueState.afterQueued(promptID, num, p, extra_data)
queueState.afterQueued(promptID, num, p.output, extraData)
}
}
} finally {

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

@@ -1,74 +1,113 @@
<script lang="ts">
import queueState, { type QueueEntry } from "$lib/stores/queueState";
import queueState, { type CompletedQueueEntry, type QueueEntry, type QueueEntryStatus } from "$lib/stores/queueState";
import ProgressBar from "./ProgressBar.svelte";
import { getNodeInfo } from "$lib/utils"
import type { Writable } from "svelte/store";
import Spinner from "./Spinner.svelte";
import { convertComfyOutputToComfyURL, convertFilenameToComfyURL, getNodeInfo } from "$lib/utils"
import type { Writable } from "svelte/store";
import type { QueueItemType } from "$lib/api";
let queuePending: Writable<QueueEntry[]> | null = null;
let queueRunning: Writable<QueueEntry[]> | null = null;
let queueCompleted: Writable<CompletedQueueEntry[]> | null = null;
type QueueUIEntry = {
message: string,
submessage: string,
date?: string,
status: "success" | "error" | "pending" | "running" | "all_cached",
images?: string[] // URLs
status: QueueEntryStatus | "pending" | "running",
images?: string[], // URLs
error?: string
}
$: if ($queueState) {
queuePending = $queueState.queuePending
queueRunning = $queueState.queueRunning
queueCompleted = $queueState.queueCompleted
}
let mode: QueueItemType = "queue";
function switchMode(newMode: QueueItemType) {
console.warn("SwitchMode", newMode)
const changed = mode !== newMode
mode = newMode
if (changed)
_entries = []
}
let _entries: QueueUIEntry[] = []
$: if ($queuePending && $queuePending.length != _entries.length) {
_entries = []
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" })
// }
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)
$: if (mode === "queue" && $queuePending && $queuePending.length != _entries.length) {
updateFromQueue();
}
else if (mode === "history" && $queueCompleted && $queueCompleted.length != _entries.length) {
updateFromHistory();
}
function convertEntry(entry: QueueEntry): QueueUIEntry {
const images = Object.values(entry.outputs).flatMap(o => o.images)
.map(convertComfyOutputToComfyURL);
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);
}
let message = "Prompt";
if (entry.extraData.subgraphs)
message = `Prompt: ${entry.extraData.subgraphs.join(', ')}`
let submessage = `Nodes: ${Object.keys(entry.prompt).length}`
return {
message,
submessage,
date,
status: "pending",
images
}
}
function convertCompletedEntry(entry: CompletedQueueEntry): QueueUIEntry {
const result = convertEntry(entry.entry);
result.status = entry.status;
result.error = entry.error;
return result;
}
function updateFromQueue() {
_entries = $queuePending.map(convertEntry);
console.warn("[ComfyQueue] BUILDQUEUE", _entries, $queuePending)
}
function updateFromHistory() {
_entries = $queueCompleted.map(convertCompletedEntry);
console.warn("[ComfyQueue] BUILDHISTORY", _entries, $queueCompleted)
}
let queued = false
$: queued = Boolean($queueState.runningNodeID || $queueState.progress);
let inProgress = false;
$: inProgress = typeof $queueState.queueRemaining === "number" && $queueState.queueRemaining > 0;
</script>
<div class="queue">
<div class="queue-entries">
{#each _entries as entry}
<div class="queue-entry {entry.status}">
{#if entry.images}
{#if entry.images.length > 0}
<img class="queue-entry-image" src={entry.images[0]} alt="thumbnail" />
{:else}
<div class="queue-entry-image-placeholder" />
<!-- <div class="queue-entry-image-placeholder" /> -->
{/if}
<div class="queue-entry-details">
<div class="queue-entry-message">
@@ -88,68 +127,79 @@
</div>
{/each}
</div>
<div class="mode-buttons">
<div class="mode-button"
on:click={() => switchMode("queue")}
class:mode-selected={mode === "queue"}>
Queue
</div>
<div class="mode-button"
on:click={() => switchMode("history")}
class:mode-selected={mode === "history"}>
History
</div>
</div>
<div class="bottom">
{#if $queueState.runningNodeID || $queueState.progress}
<div class="queue-remaining" class:queued class:in-progress={inProgress}>
{#if inProgress}
<Spinner />
<div class="status">
Queued prompts: {$queueState.queueRemaining}
</div>
{:else}
<div>
Nothing queued.
</div>
{/if}
</div>
{#if queued}
<div class="node-name">
<span>Node: {getNodeInfo($queueState.runningNodeID)}</span>
</div>
<div>
<ProgressBar value={$queueState.progress?.value} max={$queueState.progress?.max} styles="height: 30px;" />
</div>
{/if}
{#if typeof $queueState.queueRemaining === "number" && $queueState.queueRemaining > 0}
<div class="queue-remaining in-progress">
<div>
Queued prompts: {$queueState.queueRemaining}.
</div>
</div>
{:else}
<div class="queue-remaining done">
<div>
Nothing queued.
</div>
<ProgressBar value={$queueState.progress?.value} max={$queueState.progress?.max} />
</div>
{/if}
</div>
</div>
<style lang="scss">
$pending-height: 300px;
$pending-height: 200px;
$bottom-bar-height: 70px;
$mode-buttons-height: 30px;
$queue-height: calc(100vh - #{$pending-height} - #{$mode-buttons-height} - #{$bottom-bar-height});
.queue {
}
.queue-remaining {
height: 5em;
width: 100%;
text-align: center;
border: 5px solid #CCC;
position: relative;
display: flex;
justify-content: center;
align-items: center;
color: var(--body-text-color);
}
.queue-entries {
overflow-y: scroll;
max-height: calc(100vh - $pending-height);
height: $queue-height;
max-height: $queue-height;
}
.queue-entry {
padding: 0.5rem;
padding: 1.0rem;
display: flex;
flex-direction: row;
border-top: 2px solid var(--neutral-200);
border-bottom: 1px solid var(--neutral-400);
border-bottom: 1px solid var(--panel-border-color);
background: var(--panel-background-fill);
&.success {
background: green
/* background: green; */
}
&.error {
background: red
background: red;
}
&.cached {
background: grey
&.all_cached {
background: grey;
}
&.running {
/* background: lightblue; */
}
&.pending, &.unknown {
/* background: orange; */
}
}
@@ -174,54 +224,86 @@
display: flex;
flex-direction: column;
justify-content: center;
white-space: nowrap;
}
.queue-entry-message {
width: var(--size-20);
font-size: large;
font-size: 15px;
}
.queue-entry-submessage {
width: var(--size-20);
font-size: 12px;
}
.queue-entry-queued-at {
width: auto;
font-size: 14px;
font-size: 10px;
position:absolute;
right: 0px;
bottom:0px;
padding: 0.0rem 0.4rem;
/* color: var(--neutral-600) */
color: var(--neutral-600);
color: var(--body-text-color);
}
.node-name {
border: 5px solid #CCC;
background-color: var(--color-red-300);
padding: 0.2em;
.mode-buttons {
height: calc($mode-buttons-height);
display: flex;
flex-direction: row;
text-align: center;
justify-content: center;
align-items: center;
.mode-button {
padding: 0.2rem;
width: 100%;
height: 100%;
border: 1px solid var(--panel-border-color);
font-weight: bold;
background: var(--button-secondary-background-fill);
&:hover {
background: var(--button-secondary-background-fill-hover);
filter: brightness(120%);
}
&:active {
filter: brightness(50%)
}
&.mode-selected {
filter: brightness(150%)
}
}
}
.bottom {
width: 100%;
height: $pending-height;
height: calc($pending-height);
position: absolute;
}
border: 2px solid var(--panel-border-color);
.in-progress {
background-color: var(--secondary-300);
}
.done {
background-color: var(--color-grey-200);
}
.node-name {
background-color: var(--comfy-node-name-background);
color: var(--comfy-node-name-foreground);
padding: 0.2em;
display: flex;
justify-content: center;
align-items: center;
}
.queue-item {
height: 1.5em;
width: 10em;
text-align: center;
border: 1px solid black;
.queue-remaining {
height: calc($pending-height - $bottom-bar-height - 50px);
width: 100%;
text-align: center;
position: relative;
display: flex;
justify-content: space-evenly;
align-items: center;
background: var(--panel-background-fill);
> .status {
}
&.queued {
height: calc($pending-height - $bottom-bar-height);
}
}
}
</style>

6
src/lib/components/ProgressBar.svelte
View File

@@ -24,16 +24,16 @@
<style>
.progress {
width: 100%;
height: 100%;
height: 30px;
text-align: center;
background-color: lightgrey;
background: var(--comfy-progress-bar-background);
padding: 0px;
position: relative;
}
.bar {
height: 100%;
background-color: #B3D8A9;
background: var(--comfy-progress-bar-foreground);
}
.label {

24
src/lib/components/Spinner.svelte Normal file
View File

@@ -0,0 +1,24 @@
<span class="loader" {...$$restProps}/>
<style lang="scss">
$border-bottom-color_1: var(--comfy-spinner-accent-color);
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader {
width: 48px;
height: 48px;
border: 5px solid var(--comfy-spinner-main-color);
border-bottom-color: $border-bottom-color_1;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 2s linear infinite;
}
</style>

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

@@ -1,5 +1,5 @@
import type { ComfyAPIHistoryItem, ComfyAPIQueueResponse, ComfyAPIStatusResponse, NodeID, PromptID } from "$lib/api";
import type { Progress, SerializedPrompt, SerializedPromptOutputs } from "$lib/components/ComfyApp";
import type { ComfyAPIHistoryEntry, ComfyAPIHistoryItem, ComfyAPIHistoryResponse, ComfyAPIQueueResponse, ComfyAPIStatusResponse, ComfyPromptExtraData, NodeID, PromptID } from "$lib/api";
import type { Progress, SerializedPrompt, SerializedPromptInputsAll, SerializedPromptOutputs } from "$lib/components/ComfyApp";
import type { GalleryOutput } from "$lib/nodes/ComfyWidgetNodes";
import { get, writable, type Writable } from "svelte/store";
@@ -7,33 +7,39 @@ export type QueueItem = {
name: string
}
export type QueueEntryStatus = "success" | "error" | "all_cached" | "unknown";
type QueueStateOps = {
queueUpdated: (queue: ComfyAPIQueueResponse) => void,
queueUpdated: (resp: ComfyAPIQueueResponse) => void,
historyUpdated: (resp: ComfyAPIHistoryResponse) => void,
statusUpdated: (status: ComfyAPIStatusResponse | null) => void,
executingUpdated: (promptID: PromptID | null, runningNodeID: NodeID | null) => void,
executionCached: (promptID: PromptID, nodes: NodeID[]) => void,
executionError: (promptID: PromptID, message: string) => void,
progressUpdated: (progress: Progress) => void
afterQueued: (promptID: PromptID, number: number, prompt: SerializedPrompt, extraData: any) => void
afterQueued: (promptID: PromptID, number: number, prompt: SerializedPromptInputsAll, extraData: any) => void
onExecuted: (promptID: PromptID, nodeID: NodeID, output: GalleryOutput) => void
}
export type QueueEntry = {
/* Data preserved on page refresh */
number: number,
queuedAt?: Date,
finishedAt?: Date,
promptID: PromptID,
prompt: SerializedPrompt,
extraData: any,
prompt: SerializedPromptInputsAll,
extraData: ComfyPromptExtraData,
goodOutputs: NodeID[],
// Collected while the prompt is still executing
/* Data not sent by Comfy's API, lost on page refresh */
/* Prompt outputs, collected while the prompt is still executing */
outputs: SerializedPromptOutputs,
}
export type CompletedQueueEntry = {
entry: QueueEntry,
type: "success" | "error" | "all_cached",
status: QueueEntryStatus,
error?: string,
}
@@ -70,12 +76,31 @@ function toQueueEntry(resp: ComfyAPIHistoryItem): QueueEntry {
}
}
function queueUpdated(queue: ComfyAPIQueueResponse) {
console.debug("[queueState] queueUpdated", queue.running.length, queue.pending.length)
function toCompletedQueueEntry(resp: ComfyAPIHistoryEntry): CompletedQueueEntry {
const entry = toQueueEntry(resp.prompt)
entry.outputs = resp.outputs;
return {
entry,
status: Object.values(entry.outputs).length > 0 ? "success" : "all_cached",
error: null
}
}
function queueUpdated(resp: ComfyAPIQueueResponse) {
console.debug("[queueState] queueUpdated", resp.running.length, resp.pending.length)
store.update((s) => {
s.queueRunning.set(queue.running.map(toQueueEntry));
s.queuePending.set(queue.pending.map(toQueueEntry));
s.queueRemaining = queue.pending.length;
s.queueRunning.set(resp.running.map(toQueueEntry));
s.queuePending.set(resp.pending.map(toQueueEntry));
s.queueRemaining = resp.pending.length;
return s
})
}
function historyUpdated(resp: ComfyAPIHistoryResponse) {
console.debug("[queueState] historyUpdated", Object.values(resp.history).length)
store.update((s) => {
const values = Object.values(resp.history) // TODO Order by prompt finished date!
s.queueCompleted.set(values.map(toCompletedQueueEntry));
return s
})
}
@@ -115,7 +140,7 @@ function executingUpdated(promptID: PromptID | null, runningNodeID: NodeID | nul
s.queueCompleted.update(qc => {
const completed: CompletedQueueEntry = {
entry,
type: "success",
status: "success",
}
qc.push(completed)
return qc
@@ -142,7 +167,7 @@ function executionCached(promptID: PromptID, nodes: NodeID[]) {
s.queueCompleted.update(qc => {
const completed: CompletedQueueEntry = {
entry,
type: "all_cached",
status: "all_cached",
}
qc.push(completed)
return qc
@@ -167,7 +192,7 @@ function executionError(promptID: PromptID, message: string) {
s.queueCompleted.update(qc => {
const completed: CompletedQueueEntry = {
entry,
type: "error",
status: "error",
error: message
}
qc.push(completed)
@@ -180,8 +205,8 @@ function executionError(promptID: PromptID, message: string) {
})
}
function afterQueued(promptID: PromptID, number: number, prompt: SerializedPrompt, extraData: any) {
console.debug("[queueState] afterQueued", promptID, Object.keys(prompt.workflow.nodes))
function afterQueued(promptID: PromptID, number: number, prompt: SerializedPromptInputsAll, extraData: any) {
console.debug("[queueState] afterQueued", promptID, Object.keys(prompt.nodes))
store.update(s => {
const entry: QueueEntry = {
number,
@@ -215,6 +240,7 @@ const queueStateStore: WritableQueueStateStore =
{
...store,
queueUpdated,
historyUpdated,
statusUpdated,
progressUpdated,
executingUpdated,

6
src/lib/utils.ts
View File

@@ -135,6 +135,12 @@ export function convertComfyOutputToGradio(output: GalleryOutput): GradioFileDat
});
}
export function convertComfyOutputToComfyURL(output: GalleryOutputEntry): string {
const params = new URLSearchParams(output)
const url = `http://${location.hostname}:8188` // TODO make configurable
return url + "/view?" + params
}
export function convertFilenameToComfyURL(filename: string,
subfolder: string = "",
type: "input" | "output" | "temp" = "output"): string {

14
src/mobile/index.html
View File

@@ -1,14 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- <link rel="icon" href="%sveltekit.assets%/favicon.png" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#2196f3">
</head>
<body>
<div id="app">
<script type="module" src='/src/main-mobile.ts'></script>
</body>
</html>

17
src/scss/global.scss
View File

@@ -21,6 +21,12 @@ body {
--comfy-dropdown-item-background-hover: var(--neutral-400);
--comfy-dropdown-item-color-active: var(--neutral-100);
--comfy-dropdown-item-background-active: var(--secondary-600);
--comfy-progress-bar-background: var(--secondary-300);
--comfy-progress-bar-foreground: #var(--body-text-color);
--comfy-node-name-background: var(--color-red-300);
--comfy-node-name-foreground: var(--body-text-color);
--comfy-spinner-main-color: var(--neutral-400);
--comfy-spinner-accent-color: var(--secondary-500);
}
.dark {
@@ -34,6 +40,17 @@ body {
--comfy-dropdown-item-background-hover: var(--neutral-600);
--comfy-dropdown-item-background-active: var(--secondary-600);
--comfy-dropdown-border-color: var(--neutral-600);
--comfy-progress-bar-background: var(--secondary-400);
--comfy-progress-bar-foreground: #var(--body-text-color);
--comfy-node-name-background: var(--primary-500);
--comfy-node-name-foreground: var(--body-text-color);
--comfy-spinner-main-color: var(--neutral-600);
--comfy-spinner-accent-color: var(--secondary-600);
}
.mobile {
--comfy-progress-bar-background: lightgrey;
--comfy-progress-bar-foreground: #B3D8A9
}
@mixin disable-input {