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

Thumbnail option for gallery/queue images

Browse Source
This commit is contained in:
space-nuko
2023-06-05 21:15:49 -05:00
parent eb02561906
commit 27d0a4bd30
9 changed files with 174 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,3 @@
<script lang="ts" context="module">
export type QueueUIEntryStatus = QueueEntryStatus | "pending" | "running";
export type QueueUIEntry = {
entry: QueueEntry,
message: string,
submessage: string,
date?: string,
status: QueueUIEntryStatus,
images?: string[], // URLs
details?: string, // shown in a tooltip on hover
error?: WorkflowError
}
</script>
<script lang="ts">
import queueState, { type CompletedQueueEntry, type QueueEntry, type QueueEntryStatus } from "$lib/stores/queueState";
import ProgressBar from "./ProgressBar.svelte";
@@ -20,7 +5,7 @@
import Spinner from "./Spinner.svelte";
import PromptDisplay from "./PromptDisplay.svelte";
import { List, ListUl, Grid } from "svelte-bootstrap-icons";
import { convertComfyOutputToComfyURL, convertFilenameToComfyURL, getNodeInfo, truncateString } from "$lib/utils"
import { getNodeInfo, type ComfyImageLocation } from "$lib/utils"
import type { Writable } from "svelte/store";
import type { QueueItemType } from "$lib/api";
import { Button } from "@gradio/button";
@@ -31,7 +16,7 @@
import ComfyQueueListDisplay from "./ComfyQueueListDisplay.svelte";
import ComfyQueueGridDisplay from "./ComfyQueueGridDisplay.svelte";
import { WORKFLOWS_VIEW } from "./ComfyBoxWorkflowsView.svelte";
import uiQueueState from "$lib/stores/uiQueueState";
import uiQueueState, { type QueueUIEntry } from "$lib/stores/uiQueueState";
export let app: ComfyApp;
@@ -125,7 +110,7 @@
let showModal = false;
let expandAll = false;
let selectedPrompt = null;
let selectedImages = [];
let selectedImages: ComfyImageLocation[] = [];
function showPrompt(entry: QueueUIEntry) {
if (entry.error != null) {
showModal = false;

7
src/lib/components/ComfyQueueGridDisplay.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import type { QueueItemType } from "$lib/api";
import { showLightbox } from "$lib/utils";
import { convertComfyOutputToComfyURL, showLightbox } from "$lib/utils";
import type { QueueUIEntry } from "./ComfyQueue.svelte";
import queueState from "$lib/stores/queueState";
@@ -19,7 +19,7 @@
allEntries = []
for (const entry of entries) {
for (const image of entry.images) {
allEntries.push([entry, image]);
allEntries.push([entry, convertComfyOutputToComfyURL(image, true)]);
}
}
allImages = allEntries.map(p => p[1]);
@@ -56,6 +56,7 @@
<img class="grid-entry-image"
on:click={(e) => handleClick(e, entry, i)}
src={image}
loading="lazy"
alt="thumbnail" />
</div>
{/each}
@@ -130,6 +131,8 @@
.grid-entry-image {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
max-width: unset;
&:hover {
cursor: pointer;

8
src/lib/components/ComfyQueueListDisplay.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import type { QueueItemType } from "$lib/api";
import { showLightbox, truncateString } from "$lib/utils";
import type { QueueUIEntry } from "./ComfyQueue.svelte";
import { convertComfyOutputToComfyURL, showLightbox, truncateString } from "$lib/utils";
import queueState from "$lib/stores/queueState";
import type { QueueUIEntry } from "$lib/stores/uiQueueState";
export let entries: QueueUIEntry[] = [];
export let showPrompt: (entry: QueueUIEntry) => void;
@@ -39,11 +39,13 @@
<div class="list-entry-images"
style="--cols: {Math.ceil(Math.sqrt(Math.min(entry.images.length, 4)))}" >
{#each entry.images.slice(0, 4) as image, i}
{@const imageURL = convertComfyOutputToComfyURL(image, true)}
<div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<img class="list-entry-image"
on:click={(e) => showLightbox(entry.images, i, e)}
src={image}
src={imageURL}
loading="lazy"
alt="thumbnail" />
</div>
{/each}

11
src/lib/components/PromptDisplay.svelte
View File

@@ -8,7 +8,7 @@
import Gallery from "$lib/components/gradio/gallery/Gallery.svelte";
import { ImageViewer } from "$lib/ImageViewer";
import type { Styles } from "@gradio/utils";
import { comfyFileToComfyBoxMetadata, comfyURLToComfyFile, countNewLines } from "$lib/utils";
import { comfyFileToComfyBoxMetadata, comfyURLToComfyFile, countNewLines, type ComfyImageLocation, convertComfyOutputToComfyURL } from "$lib/utils";
import ReceiveOutputTargets from "./modal/ReceiveOutputTargets.svelte";
import workflowState, { type ComfyBoxWorkflow, type WorkflowReceiveOutputTargets } from "$lib/stores/workflowState";
import type { ComfyReceiveOutputNode } from "$lib/nodes/actions";
@@ -17,7 +17,7 @@
const splitLength = 50;
export let prompt: SerializedPromptInputsAll;
export let images: string[] = []; // list of image URLs to ComfyUI's /view? endpoint
export let images: ComfyImageLocation[] = [];
export let isMobile: boolean = false;
export let expandAll: boolean = false;
export let closeModal: () => void;
@@ -36,10 +36,7 @@
let litegraphType = "(none)"
$: if (images.length > 0) {
// since the image links come from gradio, have to parse the URL for the
// ComfyImageLocation params
comfyBoxImages = images.map(comfyURLToComfyFile)
.map(comfyFileToComfyBoxMetadata);
comfyBoxImages = images.map(comfyFileToComfyBoxMetadata);
}
else {
comfyBoxImages = []
@@ -199,7 +196,7 @@
<div class="image-container">
<Block>
<Gallery
value={images}
value={images.map(convertComfyOutputToComfyURL)}
label=""
show_label={false}
style={galleryStyle}