feat: add ComfyUI integration for image generation and management
- 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.
This commit is contained in:
syntaxbullet
@@ -16,16 +16,23 @@ export const initialEditorState: EditorState = {
|
||||
candidates: [],
|
||||
selectedCandidateId: undefined,
|
||||
compareMode: "result",
|
||||
jobs: [],
|
||||
resources: { status: "idle" },
|
||||
},
|
||||
commandPalette: {
|
||||
open: false,
|
||||
query: "",
|
||||
selectedIndex: 0,
|
||||
},
|
||||
workspace: {
|
||||
panel: "none",
|
||||
previousNonGenerateTool: "select",
|
||||
},
|
||||
transformSession: undefined,
|
||||
maskEdit: undefined,
|
||||
brushPreview: undefined,
|
||||
brushStrokePreview: undefined,
|
||||
pointerSession: undefined,
|
||||
};
|
||||
|
||||
export function createInitialAppState(name = "Untitled"): AppState {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { ImageDocument } from "@core/document";
|
||||
import type { Angle, Rect, Size, Transform, Vec2D } from "@core/geometry";
|
||||
import type { ArtboardId, AssetId, LayerId } from "@core/id";
|
||||
import type { GenerateSettings, ToolState } from "./tools";
|
||||
import type { ArtboardId, AssetId, GenerationCandidateId, GenerationJobId, LayerId } from "@core/id";
|
||||
import type { GenerateArchitecture, GenerateMode, GenerateSettings, ToolId, ToolState } from "./tools";
|
||||
import type { TransformSession } from "./transform";
|
||||
|
||||
export type ViewportState = {
|
||||
@@ -35,7 +35,7 @@ export type BrushStrokePreviewState = {
|
||||
};
|
||||
|
||||
export type GenerationCandidate = {
|
||||
id: string;
|
||||
id: GenerationCandidateId;
|
||||
source: string;
|
||||
mimeType: string;
|
||||
intrinsicSize: Size;
|
||||
@@ -81,28 +81,71 @@ export type GenerationCandidate = {
|
||||
|
||||
export type GenerationCompareMode = "result" | "before" | "split";
|
||||
|
||||
export type GenerationJobKind = "generate" | "regenerate" | "refine" | "replace";
|
||||
export type GenerationJobStatus = "running" | "succeeded" | "failed";
|
||||
|
||||
export type GenerationJob = {
|
||||
id: GenerationJobId;
|
||||
kind: GenerationJobKind;
|
||||
label: string;
|
||||
status: GenerationJobStatus;
|
||||
startedAt: number;
|
||||
finishedAt?: number;
|
||||
error?: string;
|
||||
};
|
||||
|
||||
export type GenerationState = {
|
||||
candidates: GenerationCandidate[];
|
||||
selectedCandidateId?: string;
|
||||
compareMode: GenerationCompareMode;
|
||||
jobs: GenerationJob[];
|
||||
resources: GenerationResourcesState;
|
||||
};
|
||||
|
||||
export type GenerationArchitectureOption = {
|
||||
value: GenerateArchitecture;
|
||||
label: string;
|
||||
defaultModel: string;
|
||||
models: string[];
|
||||
supportedModes: GenerateMode[];
|
||||
};
|
||||
|
||||
export type GenerationOptions = {
|
||||
architectures?: GenerationArchitectureOption[];
|
||||
models?: string[];
|
||||
textEncoders?: string[];
|
||||
vaes?: string[];
|
||||
samplers?: string[];
|
||||
schedulers?: string[];
|
||||
};
|
||||
|
||||
export type GenerationResourcesState = { status: "idle" | "loading" | "ready" | "failed"; options?: GenerationOptions; error?: string };
|
||||
|
||||
export type CommandPaletteState = {
|
||||
open: boolean;
|
||||
query: string;
|
||||
selectedIndex: number;
|
||||
};
|
||||
|
||||
export type WorkspacePanel = "none" | "generate" | "layers";
|
||||
|
||||
export type WorkspaceState = {
|
||||
panel: WorkspacePanel;
|
||||
previousNonGenerateTool: ToolId;
|
||||
};
|
||||
|
||||
export type EditorState = {
|
||||
viewport: ViewportState;
|
||||
selection: SelectionState;
|
||||
tools: ToolState;
|
||||
generation: GenerationState;
|
||||
commandPalette: CommandPaletteState;
|
||||
workspace: WorkspaceState;
|
||||
transformSession?: TransformSession;
|
||||
maskEdit?: MaskEditState;
|
||||
brushPreview?: BrushPreviewState;
|
||||
brushStrokePreview?: BrushStrokePreviewState;
|
||||
pointerSession?: { type: "pan" };
|
||||
};
|
||||
|
||||
export type HistorySnapshot = {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { describe, expect, test } from "bun:test";
|
||||
import type { ImageDocument } from "@core/document";
|
||||
import { applyTransformTargetBounds, resolveTransformTargetBounds, selectedTransformTarget } from "./transform-targets";
|
||||
import { resolveTransformTargetBounds, selectedTransformTarget } from "./transform-targets";
|
||||
import { applyTransformTargetBounds } from "@commands/transform-document";
|
||||
|
||||
const document: ImageDocument = {
|
||||
id: "d1",
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import type { ImageDocument } from "@core/document";
|
||||
import type { Rect } from "@core/geometry";
|
||||
import type { Layer } from "@core/layer";
|
||||
import { getLayerMask } from "@core/layer-mask-utils";
|
||||
import type { ArtboardId, LayerId } from "@core/id";
|
||||
import type { TransformTarget } from "./transform";
|
||||
|
||||
@@ -16,129 +15,12 @@ export function resolveTransformTargetBounds(document: ImageDocument, target: Tr
|
||||
}
|
||||
}
|
||||
|
||||
export function applyTransformTargetBounds(document: ImageDocument, target: TransformTarget, bounds: Rect): ImageDocument {
|
||||
switch (target.type) {
|
||||
case "artboard":
|
||||
return {
|
||||
...document,
|
||||
artboards: document.artboards.map((artboard) => (artboard.id === target.id ? { ...artboard, bounds: { ...bounds } } : artboard)),
|
||||
};
|
||||
case "layer":
|
||||
return applyLayerBounds(document, target.id, bounds);
|
||||
}
|
||||
}
|
||||
|
||||
export function selectedTransformTarget(document: ImageDocument, selection: { artboardId?: ArtboardId; layerIds: LayerId[] }): TransformTarget | undefined {
|
||||
if (selection.layerIds.length === 1 && selection.layerIds[0]) return { type: "layer", id: selection.layerIds[0] };
|
||||
if (selection.artboardId) return { type: "artboard", id: selection.artboardId };
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function applyLayerBounds(document: ImageDocument, layerId: LayerId, bounds: Rect): ImageDocument {
|
||||
const layer = findLayer(document, layerId);
|
||||
if (!layer) return document;
|
||||
if (layer.type === "group") return applyGroupLayerBounds(document, layer.id, bounds);
|
||||
|
||||
const layerMask = getLayerMask(layer);
|
||||
const targetLayerIds = layerMask ? [layerId, layerMask.maskLayerId] : [layerId];
|
||||
|
||||
return targetLayerIds.reduce(
|
||||
(nextDocument, targetLayerId) => ({
|
||||
...nextDocument,
|
||||
artboards: nextDocument.artboards.map((artboard) => ({
|
||||
...artboard,
|
||||
layers: applyLayerBoundsInTree(nextDocument, artboard.layers, targetLayerId, bounds),
|
||||
})),
|
||||
}),
|
||||
document,
|
||||
);
|
||||
}
|
||||
|
||||
function applyGroupLayerBounds(document: ImageDocument, groupId: LayerId, bounds: Rect): ImageDocument {
|
||||
const group = findLayer(document, groupId);
|
||||
if (!group || group.type !== "group") return document;
|
||||
|
||||
const initialBounds = resolveLayerBounds(document, group);
|
||||
if (!initialBounds || initialBounds.w === 0 || initialBounds.h === 0) return document;
|
||||
|
||||
const scale = {
|
||||
x: bounds.w / initialBounds.w,
|
||||
y: bounds.h / initialBounds.h,
|
||||
};
|
||||
|
||||
return {
|
||||
...document,
|
||||
artboards: document.artboards.map((artboard) => ({
|
||||
...artboard,
|
||||
layers: applyGroupLayerBoundsInTree(document, artboard.layers, groupId, initialBounds, bounds, scale),
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
function applyGroupLayerBoundsInTree(document: ImageDocument, layers: Layer[], groupId: LayerId, initialBounds: Rect, bounds: Rect, scale: { x: number; y: number }): Layer[] {
|
||||
return layers.map((layer) => {
|
||||
if (layer.type === "group" && layer.id === groupId) {
|
||||
return {
|
||||
...layer,
|
||||
children: layer.children.map((child) => scaleLayerSubtree(document, child, initialBounds, bounds, scale)),
|
||||
};
|
||||
}
|
||||
if (layer.type === "group") return { ...layer, children: applyGroupLayerBoundsInTree(document, layer.children, groupId, initialBounds, bounds, scale) };
|
||||
return layer;
|
||||
});
|
||||
}
|
||||
|
||||
function scaleLayerSubtree(document: ImageDocument, layer: Layer, initialBounds: Rect, bounds: Rect, scale: { x: number; y: number }): Layer {
|
||||
if (layer.type === "group") {
|
||||
return {
|
||||
...layer,
|
||||
children: layer.children.map((child) => scaleLayerSubtree(document, child, initialBounds, bounds, scale)),
|
||||
};
|
||||
}
|
||||
|
||||
const asset = document.assets.find((candidate) => candidate.id === layer.assetId);
|
||||
if (!asset) return layer;
|
||||
|
||||
return {
|
||||
...layer,
|
||||
transform: {
|
||||
...layer.transform,
|
||||
position: {
|
||||
x: bounds.x + (layer.transform.position.x - initialBounds.x) * scale.x,
|
||||
y: bounds.y + (layer.transform.position.y - initialBounds.y) * scale.y,
|
||||
},
|
||||
scale: {
|
||||
x: layer.transform.scale.x * scale.x,
|
||||
y: layer.transform.scale.y * scale.y,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function applyLayerBoundsInTree(document: ImageDocument, layers: Layer[], layerId: LayerId, bounds: Rect): Layer[] {
|
||||
return layers.map((layer) => {
|
||||
if (layer.id === layerId && (layer.type === "image" || layer.type === "raster")) {
|
||||
const asset = document.assets.find((candidate) => candidate.id === layer.assetId);
|
||||
if (!asset) return layer;
|
||||
|
||||
return {
|
||||
...layer,
|
||||
transform: {
|
||||
...layer.transform,
|
||||
position: { x: bounds.x, y: bounds.y },
|
||||
scale: {
|
||||
x: bounds.w / asset.intrinsicSize.w,
|
||||
y: bounds.h / asset.intrinsicSize.h,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
if (layer.type === "group") return { ...layer, children: applyLayerBoundsInTree(document, layer.children, layerId, bounds) };
|
||||
return layer;
|
||||
});
|
||||
}
|
||||
|
||||
function findLayer(document: ImageDocument, layerId: LayerId): Layer | undefined {
|
||||
for (const artboard of document.artboards) {
|
||||
const layer = findLayerInTree(artboard.layers, layerId);
|
||||
|
||||
Reference in New Issue
Block a user