168 lines
4.0 KiB
Svelte
168 lines
4.0 KiB
Svelte
<script lang="ts">
|
|
import queueState from "$lib/stores/queueState";
|
|
import ProgressBar from "./ProgressBar.svelte";
|
|
|
|
function getNodeInfo(nodeId: number): string {
|
|
let app = (window as any).app;
|
|
if (!app)
|
|
return String(nodeId);
|
|
|
|
const title = app.lGraph.getNodeById(nodeId)?.title || String(nodeId);
|
|
return title + " (" + nodeId + ")"
|
|
}
|
|
|
|
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 _entries: any[] = []
|
|
|
|
$: if (entries) {
|
|
_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
|
|
// });
|
|
//
|
|
// _entries.push({ allImages, name: "Output" })
|
|
// }
|
|
// }
|
|
}
|
|
</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-details">
|
|
{entry.name}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<div class="bottom">
|
|
{#if $queueState.runningNodeId || $queueState.progress}
|
|
<div class="node-name">
|
|
<span>Node: {getNodeInfo($queueState.runningNodeId)}</span>
|
|
</div>
|
|
<div>
|
|
<ProgressBar value={$queueState.progress?.value} max={$queueState.progress?.max} />
|
|
</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>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.queue-remaining {
|
|
height: 5em;
|
|
width: 100%;
|
|
text-align: center;
|
|
border: 5px solid #CCC;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.queue-entry {
|
|
padding: 0.5rem 0.5rem 0 0.5rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.queue-entry-image {
|
|
width: var(--size-20)
|
|
}
|
|
|
|
.queue-entry-details {
|
|
width: var(--size-20)
|
|
}
|
|
|
|
.node-name {
|
|
border: 5px solid #CCC;
|
|
background-color: var(--color-red-300);
|
|
padding: 0.2em;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
height: auto;
|
|
position: absolute;
|
|
bottom: 0;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.in-progress {
|
|
background-color: var(--secondary-300);
|
|
}
|
|
.done {
|
|
background-color: var(--color-grey-200);
|
|
}
|
|
|
|
.queue-item {
|
|
height: 1.5em;
|
|
width: 10em;
|
|
text-align: center;
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|