5e4b548ad4
- Implemented ComfyGenerateRequest type and associated functions for generating images using various architectures and modes. - Added functions for listing generation options and handling image uploads. - Created workflows for different generation modes including SDXL, Z-Image, Z-Image Turbo, and Anima. - Introduced GenerationJobStatus component to display the status of ongoing generation jobs. - Developed MaskControls for managing mask operations and displaying mask analysis. - Created palette items for tool selection, layer management, and generation settings.
260 lines
12 KiB
TypeScript
260 lines
12 KiB
TypeScript
import { commandIds } from "@commands/ids";
|
|
import type { ImageDocument } from "@core/document";
|
|
import type { GenerationCandidate, GenerationCompareMode, GenerationState, SelectionState, ViewportState } from "@editor/state";
|
|
import type { GenerateSettings } from "@editor/tools";
|
|
import type { AppStore } from "@editor/store";
|
|
import { createMaskedPixelReplacementSource } from "@operations/generation/candidateActions";
|
|
import { runGenerate, runGenerateFromCandidate } from "@operations/generation/runGenerate";
|
|
import { runGenerationJob } from "@operations/generation/generationJob";
|
|
import { currentGenerationJob, GenerationJobStatus } from "../GenerationJobStatus";
|
|
import { createRefinementMask } from "@operations/masks/rasterActions";
|
|
|
|
export type GenerateActionControlsProps = {
|
|
document: ImageDocument;
|
|
selection: SelectionState;
|
|
viewport: ViewportState;
|
|
settings: GenerateSettings;
|
|
generation: GenerationState;
|
|
dispatch: AppStore["dispatch"];
|
|
};
|
|
|
|
export function GenerateActionControls({ document, selection, viewport, settings, generation, dispatch }: GenerateActionControlsProps) {
|
|
const job = currentGenerationJob(generation);
|
|
const busy = job?.status === "running";
|
|
const candidate = selectedCandidate(generation);
|
|
const canGenerate = Boolean(settings.prompt.trim()) && !busy;
|
|
|
|
return (
|
|
<div className="flex max-w-[calc(100vw-2rem)] flex-wrap items-center justify-center gap-2 px-2">
|
|
<button
|
|
type="button"
|
|
disabled={!canGenerate}
|
|
className="h-12 rounded-full bg-white px-7 text-base font-semibold !text-black transition hover:bg-white/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40 disabled:pointer-events-none disabled:opacity-35"
|
|
title={job?.status === "failed" ? job.error : "Generate with ComfyUI"}
|
|
onClick={() => {
|
|
void runGenerationJob({ kind: "generate", label: "Generating", dispatch, task: () => runGenerate({ document, selection, viewport, settings, dispatch }) });
|
|
}}
|
|
>
|
|
{busy && job?.kind === "generate" ? "Generating..." : "Generate"}
|
|
</button>
|
|
<GenerationJobStatus generation={generation} />
|
|
{candidate ? (
|
|
<>
|
|
<CandidatePicker generation={generation} dispatch={dispatch} />
|
|
<CandidateControls
|
|
document={document}
|
|
candidate={candidate}
|
|
compareMode={generation.compareMode ?? "result"}
|
|
settings={settings}
|
|
busy={busy}
|
|
dispatch={dispatch}
|
|
/>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CandidatePicker({ generation, dispatch }: { generation: GenerationState; dispatch: AppStore["dispatch"] }) {
|
|
if (generation.candidates.length < 2) return null;
|
|
return (
|
|
<div className="subtle-scrollbar flex max-w-[min(28rem,calc(100vw-2rem))] items-center gap-1 overflow-x-auto rounded-full bg-white/[0.04] px-1.5 py-1 ring-1 ring-white/[0.05]" role="group" aria-label="Generation candidates">
|
|
{generation.candidates.map((candidate) => {
|
|
const selected = candidate.id === (generation.selectedCandidateId ?? generation.candidates[0]?.id);
|
|
return (
|
|
<button
|
|
key={candidate.id}
|
|
type="button"
|
|
className={`h-9 w-9 overflow-hidden rounded-full ring-2 transition ${selected ? "ring-white" : "ring-white/10 hover:ring-white/40"}`}
|
|
title={`Candidate seed ${candidate.seed}`}
|
|
onClick={() => dispatch(commandIds.generationSelectCandidate, { candidateId: candidate.id })}
|
|
>
|
|
<img src={candidate.source} alt="" className="h-full w-full object-cover" />
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CandidateControls({
|
|
document,
|
|
candidate,
|
|
compareMode,
|
|
settings,
|
|
busy,
|
|
dispatch,
|
|
}: {
|
|
document: ImageDocument;
|
|
candidate: GenerationCandidate;
|
|
compareMode: GenerationCompareMode;
|
|
settings: GenerateSettings;
|
|
busy: boolean;
|
|
dispatch: AppStore["dispatch"];
|
|
}) {
|
|
const rerun = (label: string, nextSettings: GenerateSettings) => {
|
|
dispatch(commandIds.toolSetGenerateSettings, nextSettings);
|
|
void runGenerationJob({ kind: "regenerate", label, dispatch, task: () => runGenerateFromCandidate({ candidate, settings: nextSettings, dispatch }) });
|
|
};
|
|
const disabled = busy;
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center justify-center gap-1 rounded-full bg-white/[0.04] px-2 py-1 ring-1 ring-white/[0.05]">
|
|
<CandidatePreview candidate={candidate} />
|
|
<span className="px-2 text-xs font-medium text-white/55">Seed {candidate.seed}</span>
|
|
<CandidateCompareControls compareMode={compareMode} disabled={disabled} dispatch={dispatch} />
|
|
<CandidateButton disabled={disabled} label="Regenerate" title="Regenerate same mask and crop" onClick={() => rerun("Regenerate", candidate.settings)} />
|
|
<CandidateButton
|
|
disabled={disabled}
|
|
label="Lower"
|
|
title="Lower strength and regenerate same mask"
|
|
onClick={() => rerun("Lower", { ...candidate.settings, strength: Math.max(0, candidate.settings.strength - 10), seed: candidate.seed })}
|
|
/>
|
|
<CandidateButton disabled={disabled} label="Reuse seed" title="Regenerate with the same seed" onClick={() => rerun("Reuse seed", { ...candidate.settings, seed: candidate.seed })} />
|
|
<CandidateButton disabled={disabled} label="New seed" title="Regenerate with a new seed" onClick={() => rerun("New seed", { ...candidate.settings, seed: -1 })} />
|
|
<CandidateButton disabled={disabled} label="Add as layer" title="Add candidate to the document as a layer" onClick={() => applyCandidateAsLayer(candidate, dispatch)} />
|
|
<CandidateButton
|
|
disabled={disabled}
|
|
label="Add + mask"
|
|
title="Add candidate as a layer with a fresh refinement mask"
|
|
onClick={() => {
|
|
void runGenerationJob({ kind: "refine", label: "Adding refinement mask", dispatch, task: () => applyCandidateAsRefinementLayer(candidate, dispatch) });
|
|
}}
|
|
/>
|
|
<CandidateButton
|
|
disabled={disabled || !candidate.inpaint}
|
|
label="Replace pixels"
|
|
title={candidate.inpaint ? "Replace masked pixels and preserve unmasked pixels" : "Only inpaint candidates can replace masked pixels"}
|
|
onClick={() => {
|
|
void runGenerationJob({ kind: "replace", label: "Replacing pixels", dispatch, task: async () => {
|
|
const source = await createMaskedPixelReplacementSource(document, candidate);
|
|
dispatch(commandIds.generationReplaceCandidatePixels, { candidateId: candidate.id, source, mimeType: "image/png" });
|
|
} });
|
|
}}
|
|
/>
|
|
<CandidateButton
|
|
disabled={disabled || !candidate.inpaint}
|
|
label="Edit mask"
|
|
title={candidate.inpaint ? "Paint refinement mask over the source layer" : "Only inpaint candidates have a mask to edit"}
|
|
onClick={() => {
|
|
if (!candidate.inpaint) return;
|
|
dispatch(commandIds.selectionSet, { artboardId: candidate.placement.artboardId, layerIds: [candidate.inpaint.targetLayerId] });
|
|
dispatch(commandIds.toolEnterMaskEdit, { targetLayerId: candidate.inpaint.targetLayerId, maskLayerId: candidate.inpaint.maskLayerId });
|
|
}}
|
|
/>
|
|
<CandidateButton disabled={disabled} label="Dismiss" title="Remove this candidate" onClick={() => dispatch(commandIds.generationRemoveCandidate, { candidateId: candidate.id })} />
|
|
{settings.seed !== candidate.seed ? null : <span className="sr-only">Current settings reuse this seed</span>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CandidateCompareControls({ compareMode, disabled, dispatch }: { compareMode: GenerationCompareMode; disabled: boolean; dispatch: AppStore["dispatch"] }) {
|
|
return (
|
|
<span className="flex items-center gap-1 rounded-full bg-black/20 p-1" aria-label="Compare candidate">
|
|
{generationCompareOptions.map((option) => {
|
|
const active = compareMode === option.mode;
|
|
return (
|
|
<button
|
|
key={option.mode}
|
|
type="button"
|
|
className={`h-7 rounded-full px-2 text-[0.7rem] font-semibold transition ${
|
|
active ? "bg-white text-black" : "text-white/55 hover:bg-white/10 hover:text-white"
|
|
} disabled:pointer-events-none disabled:opacity-35`}
|
|
disabled={disabled}
|
|
title={option.title}
|
|
onClick={() => dispatch(commandIds.generationSetCompareMode, { mode: option.mode })}
|
|
>
|
|
{option.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
const generationCompareOptions: Array<{ mode: GenerationCompareMode; label: string; title: string }> = [
|
|
{ mode: "result", label: "After", title: "Show the generated result over the document" },
|
|
{ mode: "before", label: "Before", title: "Hide the generated result and show the source document" },
|
|
{ mode: "split", label: "Split", title: "Compare source on the left with result on the right" },
|
|
];
|
|
|
|
function CandidatePreview({ candidate }: { candidate: GenerationCandidate }) {
|
|
if (!candidate.inputImage) {
|
|
return <img src={candidate.source} alt="" className="h-10 w-10 rounded-full bg-black/25 object-cover ring-1 ring-white/10" />;
|
|
}
|
|
|
|
return (
|
|
<span className="flex items-center -space-x-2" title={candidate.maskImage ? "Input crop, normalized mask, generated candidate" : "Before and generated candidate"}>
|
|
<img src={candidate.inputImage} alt="" className="h-10 w-10 rounded-full bg-black/25 object-cover ring-1 ring-white/10" />
|
|
{candidate.maskImage ? <img src={candidate.maskImage} alt="" className="h-10 w-10 rounded-full bg-black/25 object-cover ring-1 ring-white/20" /> : null}
|
|
<img src={candidate.source} alt="" className="h-10 w-10 rounded-full bg-black/25 object-cover ring-2 ring-white/40" />
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function CandidateButton({ label, title, disabled, busy, onClick }: { label: string; title: string; disabled?: boolean; busy?: boolean; onClick: () => void }) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
className="h-9 rounded-full bg-white/5 px-3 text-xs font-semibold text-white/70 transition hover:bg-white/10 hover:text-white disabled:pointer-events-none disabled:opacity-35"
|
|
disabled={disabled}
|
|
title={title}
|
|
onClick={onClick}
|
|
>
|
|
{busy ? "..." : label}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function selectedCandidate(generation: GenerationState): GenerationCandidate | undefined {
|
|
return generation.candidates.find((candidate) => candidate.id === generation.selectedCandidateId) ?? generation.candidates[0];
|
|
}
|
|
|
|
function applyCandidateAsLayer(candidate: GenerationCandidate, dispatch: AppStore["dispatch"]) {
|
|
applyCandidateAsLayerWithIds(candidate, { layerId: crypto.randomUUID(), assetId: crypto.randomUUID() }, dispatch);
|
|
}
|
|
|
|
async function applyCandidateAsRefinementLayer(candidate: GenerationCandidate, dispatch: AppStore["dispatch"]) {
|
|
const layerId = crypto.randomUUID();
|
|
const maskLayerId = crypto.randomUUID();
|
|
const maskAssetId = crypto.randomUUID();
|
|
applyCandidateAsLayerWithIds(candidate, { layerId, assetId: crypto.randomUUID() }, dispatch);
|
|
const width = Math.max(1, Math.round(candidate.intrinsicSize.w));
|
|
const height = Math.max(1, Math.round(candidate.intrinsicSize.h));
|
|
const source = await createRefinementMask(width, height);
|
|
|
|
dispatch(commandIds.documentAddLayerMask, {
|
|
layerId,
|
|
asset: {
|
|
id: maskAssetId,
|
|
name: `${candidate.placement.layerName} refinement mask`,
|
|
mimeType: "image/png",
|
|
source,
|
|
intrinsicSize: { w: width, h: height },
|
|
},
|
|
maskLayer: {
|
|
id: maskLayerId,
|
|
type: "raster",
|
|
name: `${candidate.placement.layerName} refinement mask`,
|
|
visible: true,
|
|
locked: false,
|
|
opacity: 1,
|
|
assetId: maskAssetId,
|
|
transform: {
|
|
position: { ...candidate.placement.transform.position },
|
|
scale: { ...candidate.placement.transform.scale },
|
|
rotation: candidate.placement.transform.rotation,
|
|
},
|
|
},
|
|
});
|
|
dispatch(commandIds.toolSetActive, { tool: "eraser" });
|
|
}
|
|
|
|
function applyCandidateAsLayerWithIds(candidate: GenerationCandidate, ids: { layerId: string; assetId: string }, dispatch: AppStore["dispatch"]) {
|
|
dispatch(commandIds.generationApplyCandidateAsLayer, {
|
|
candidateId: candidate.id,
|
|
assetId: ids.assetId,
|
|
layerId: ids.layerId,
|
|
});
|
|
}
|