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

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 {