syntaxbullet/image-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refine candidate handling in generation commands and update UI interactions

Browse Source
This commit is contained in:
syntaxbullet
2026-07-09 22:00:23 +02:00
parent 317a7bbf5f
commit 41bbd1e16b
5 changed files with 73 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
view/bottom-controls/GenerateActionControls.tsx
View File

@@ -79,8 +79,8 @@ export function GenerateActionControls({ document, selection, viewport, settings
function CandidatePicker({ generation, dispatch }: { generation: GenerationState; dispatch: AppStore["dispatch"] }) {
if (generation.candidates.length < 2) return null;
return (
<div className="flex items-center gap-1 rounded-full bg-white/[0.04] px-1.5 py-1 ring-1 ring-white/[0.05]">
{generation.candidates.slice(0, 6).map((candidate) => {
<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
@@ -142,11 +142,11 @@ function CandidateControls({
/>
<CandidateButton disabled={disabled} label="Reuse seed" title="Regenerate with the same seed" busy={busy === "Reuse seed"} onClick={() => rerun("Reuse seed", { ...candidate.settings, seed: candidate.seed })} />
<CandidateButton disabled={disabled} label="New seed" title="Regenerate with a new seed" busy={busy === "New seed"} onClick={() => rerun("New seed", { ...candidate.settings, seed: -1 })} />
<CandidateButton disabled={disabled} label="Accept layer" title="Accept candidate as a normal layer" onClick={() => applyCandidateAsLayer(candidate, false, dispatch)} />
<CandidateButton disabled={disabled} label="Add as layer" title="Add candidate to the document as a layer" onClick={() => applyCandidateAsLayer(candidate, dispatch)} />
<CandidateButton
disabled={disabled}
label="Accept + mask"
title="Accept candidate as a layer with a fresh refinement mask"
label="Add + mask"
title="Add candidate as a layer with a fresh refinement mask"
busy={busy === "Refine"}
onClick={() => {
setBusy("Refine");
@@ -156,10 +156,9 @@ function CandidateControls({
.finally(() => setBusy(undefined));
}}
/>
<CandidateButton disabled={disabled} label="Accept variant" title="Stack candidate as another variant layer" onClick={() => applyCandidateAsLayer(candidate, true, dispatch)} />
<CandidateButton
disabled={disabled || !candidate.inpaint}
label="Accept replace"
label="Replace pixels"
title={candidate.inpaint ? "Replace masked pixels and preserve unmasked pixels" : "Only inpaint candidates can replace masked pixels"}
busy={busy === "Replace"}
onClick={() => {
@@ -249,15 +248,15 @@ function selectedCandidate(generation: GenerationState): GenerationCandidate | u
return generation.candidates.find((candidate) => candidate.id === generation.selectedCandidateId) ?? generation.candidates[0];
}
function applyCandidateAsLayer(candidate: GenerationCandidate, variant: boolean, dispatch: AppStore["dispatch"]) {
applyCandidateAsLayerWithIds(candidate, { layerId: crypto.randomUUID(), assetId: crypto.randomUUID() }, variant, dispatch);
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() }, true, dispatch);
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 createSolidMaskSource(width, height, "white");
@@ -289,12 +288,11 @@ async function applyCandidateAsRefinementLayer(candidate: GenerationCandidate, d
dispatch(commandIds.toolSetActive, { tool: "eraser" });
}
function applyCandidateAsLayerWithIds(candidate: GenerationCandidate, ids: { layerId: string; assetId: string }, variant: boolean, dispatch: AppStore["dispatch"]) {
function applyCandidateAsLayerWithIds(candidate: GenerationCandidate, ids: { layerId: string; assetId: string }, dispatch: AppStore["dispatch"]) {
dispatch(commandIds.generationApplyCandidateAsLayer, {
candidateId: candidate.id,
assetId: ids.assetId,
layerId: ids.layerId,
variant,
});
}