feat: add ComfyUI integration for image generation

- 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.

commands/tool.ts

@@ -3,7 +3,7 @@ import type { Vec2D } from "@core/geometry";
 import type { LayerId, ArtboardId, AssetId } from "@core/id";
 import type { Layer } from "@core/layer";
 import type { MaskViewMode } from "@editor/state";
-import type { BrushSettings, ChromaKeySettings, MagicWandSettings, ToolId } from "@editor/tools";
+import type { BrushSettings, ChromaKeySettings, GenerateSettings, MagicWandSettings, ToolId } from "@editor/tools";
 import type { Command } from "./command";
 import { commandIds } from "./ids";
 
@@ -13,6 +13,8 @@ export type ToolSetActivePayload = {
 
 export type ToolSetBrushSettingsPayload = Partial<BrushSettings>;
 
+export type ToolSetGenerateSettingsPayload = Partial<GenerateSettings>;
+
 export type ToolSetChromaKeySettingsPayload = Partial<ChromaKeySettings>;
 
 export type ToolSetMagicWandSettingsPayload = Partial<MagicWandSettings>;
@@ -56,6 +58,44 @@ export const toolSetActiveCommand: Command<ToolSetActivePayload> = {
   },
 };
 
+export const toolSetGenerateSettingsCommand: Command<ToolSetGenerateSettingsPayload> = {
+  id: commandIds.toolSetGenerateSettings,
+  name: "Set generate settings",
+  execute({ state }, payload) {
+    const mode = payload.mode ?? state.editor.tools.generate.mode;
+    return {
+      ...state,
+      editor: {
+        ...state.editor,
+        tools: {
+          ...state.editor.tools,
+          generate: {
+            mode,
+            model: payload.model ?? state.editor.tools.generate.model,
+            prompt: payload.prompt ?? state.editor.tools.generate.prompt,
+            negativePrompt: payload.negativePrompt ?? state.editor.tools.generate.negativePrompt,
+            strength: clampNumber(payload.strength ?? state.editor.tools.generate.strength, 0, 100),
+            steps: Math.round(clampNumber(payload.steps ?? state.editor.tools.generate.steps, 1, 150)),
+            cfg: clampNumber(payload.cfg ?? state.editor.tools.generate.cfg, 0, 30),
+            seed: Math.round(clampNumber(payload.seed ?? state.editor.tools.generate.seed, -1, Number.MAX_SAFE_INTEGER)),
+            sampler: payload.sampler ?? state.editor.tools.generate.sampler,
+            scheduler: payload.scheduler ?? state.editor.tools.generate.scheduler,
+            width: Math.round(clampNumber(payload.width ?? state.editor.tools.generate.width, 64, 4096)),
+            height: Math.round(clampNumber(payload.height ?? state.editor.tools.generate.height, 64, 4096)),
+            outpaint: {
+              left: Math.round(clampNumber(payload.outpaint?.left ?? state.editor.tools.generate.outpaint.left, 0, 2048)),
+              top: Math.round(clampNumber(payload.outpaint?.top ?? state.editor.tools.generate.outpaint.top, 0, 2048)),
+              right: Math.round(clampNumber(payload.outpaint?.right ?? state.editor.tools.generate.outpaint.right, 0, 2048)),
+              bottom: Math.round(clampNumber(payload.outpaint?.bottom ?? state.editor.tools.generate.outpaint.bottom, 0, 2048)),
+              feathering: Math.round(clampNumber(payload.outpaint?.feathering ?? state.editor.tools.generate.outpaint.feathering, 0, 512)),
+            },
+          },
+        },
+      },
+    };
+  },
+};
+
 export const toolSetBrushSettingsCommand: Command<ToolSetBrushSettingsPayload> = {
   id: commandIds.toolSetBrushSettings,
   name: "Set brush settings",
@@ -274,6 +314,7 @@ export const toolExitTemporaryPanCommand: Command = {
 
 export const toolCommands = [
   toolSetActiveCommand,
+  toolSetGenerateSettingsCommand,
   toolSetBrushSettingsCommand,
   toolSetChromaKeySettingsCommand,
   toolSetMagicWandSettingsCommand,