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

feat: add ComfyUI integration for image generation

Browse Source 
- Implemented ComfyUI API for generating images with various modes (text-to-image, image-to-image, inpaint, outpaint).
- Created GenerateSheet and associated controls for user input on generation settings.
- Added subtle scrollbar styles for improved UI experience.
- Enhanced canvas input handling to ignore key events when focused on editable elements.
- Optimized canvas resizing logic to prevent unnecessary dispatches.
- Introduced error handling for generation failures and loading models.
- Added functionality to upload images and masks for inpainting.
This commit is contained in:
syntaxbullet
2026-07-04 15:10:30 +02:00
parent af50a165da
commit 7188569672
23 changed files with 981 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
view/BottomControlsIsland.tsx
View File

@@ -1,10 +1,11 @@
import type { AppStore } from "@editor/store";
import type { ImageDocument } from "@core/document";
import type { MaskViewMode, SelectionState, ViewportState } from "@editor/state";
import type { BrushSettings, ChromaKeySettings, MagicWandSettings, ToolId } from "@editor/tools";
import type { BrushSettings, ChromaKeySettings, GenerateSettings, MagicWandSettings, ToolId } from "@editor/tools";
import { BrushControls } from "./bottom-controls/BrushControls";
import { ChromaKeyControls } from "./bottom-controls/ChromaKeyControls";
import { MagicWandControls } from "./bottom-controls/MagicWandControls";
import { GenerateActionControls } from "./bottom-controls/GenerateActionControls";
import { PanControls } from "./bottom-controls/PanControls";
import { TransformControls } from "./bottom-controls/TransformControls";
import { ZoomControls } from "./bottom-controls/ZoomControls";
@@ -20,6 +21,7 @@ export type BottomControlsIslandProps = {
action: BottomControlsAction;
activeTool: ToolId;
brushSettings: BrushSettings;
generateSettings: GenerateSettings;
chromaKeySettings: ChromaKeySettings;
magicWandSettings: MagicWandSettings;
editingMask?: boolean;
@@ -30,7 +32,7 @@ export type BottomControlsIslandProps = {
dispatch: AppStore["dispatch"];
};
export function BottomControlsIsland({ document, selection, viewport, visible, action, activeTool, brushSettings, chromaKeySettings, magicWandSettings, editingMask = false, maskViewMode = "composite", transformBounds, transformTarget, brushHint, dispatch }: BottomControlsIslandProps) {
export function BottomControlsIsland({ document, selection, viewport, visible, action, activeTool, brushSettings, generateSettings, chromaKeySettings, magicWandSettings, editingMask = false, maskViewMode = "composite", transformBounds, transformTarget, brushHint, dispatch }: BottomControlsIslandProps) {
const zoomPercent = Math.round(viewport.zoom * 100);
const x = Math.round(viewport.center.x);
const y = Math.round(viewport.center.y);
@@ -38,11 +40,13 @@ export function BottomControlsIsland({ document, selection, viewport, visible, a
return (
<div
aria-hidden={!visible}
className={`flex h-20 min-w-96 items-center justify-center gap-4 rounded-full px-4 py-2 text-sm text-white backdrop-blur transition-all duration-200 ${
className={`flex h-20 min-w-96 rounded-full px-4 py-2 items-center justify-center gap-4 text-sm text-white backdrop-blur transition-all duration-200 ${
visible ? "pointer-events-auto translate-y-0 opacity-100" : "pointer-events-none translate-y-3 opacity-0"
}`}
>
{(activeTool === "brush" || activeTool === "eraser") && brushHint ? (
{activeTool === "generate" ? (
<GenerateActionControls document={document} selection={selection} viewport={viewport} settings={generateSettings} dispatch={dispatch} />
) : (activeTool === "brush" || activeTool === "eraser") && brushHint ? (
<BrushHint tool={activeTool} hint={brushHint} />
) : activeTool === "brush" || activeTool === "eraser" ? (
<BrushControls tool={activeTool} settings={brushSettings} editingMask={editingMask} maskViewMode={maskViewMode} dispatch={dispatch} />