refactor(canvas): 重构画布图像设置组件为独立面板

- 将图像设置弹层提取为独立的 CanvasImageSettingsPopover 组件
- 在节点对话框中集成新的紧凑图像设置面板
- 移除旧的 ImageSettingsPopover 内联实现
- 更新画布助手面板以使用新组件
- 修复节点工具栏在图像设置打开时的显示逻辑
- 调整节点配置中的质量属性继承顺序

web/src/app/(user)/canvas/[id]/canvas-client-page.tsx

@@ -267,6 +267,7 @@ function InfiniteCanvasPage() {
   const [assetPickerTab, setAssetPickerTab] = useState<AssetPickerTab>("my-assets");
   const [projectLoaded, setProjectLoaded] = useState(false);
   const [toolbarNodeId, setToolbarNodeId] = useState<string | null>(null);
+  const [nodeImageSettingsOpen, setNodeImageSettingsOpen] = useState(false);
   const [dialogNodeId, setDialogNodeId] = useState<string | null>(null);
   const [editingNodeId, setEditingNodeId] = useState<string | null>(null);
   const [editRequestNonce, setEditRequestNonce] = useState(0);
@@ -372,6 +373,10 @@ function InfiniteCanvasPage() {
     updateProject(projectId, { nodes, connections, chatSessions, activeChatId, backgroundMode });
   }, [activeChatId, backgroundMode, chatSessions, connections, nodes, projectId, projectLoaded, updateProject]);
 
+  useEffect(() => {
+    if (!dialogNodeId) setNodeImageSettingsOpen(false);
+  }, [dialogNodeId]);
+
   useEffect(() => {
     if (!projectLoaded) return;
     if (viewportSaveTimerRef.current) clearTimeout(viewportSaveTimerRef.current);
@@ -444,13 +449,13 @@ function InfiniteCanvasPage() {
   }, []);
 
   const keepNodeToolbar = useCallback((nodeId: string) => {
-    if (nodeDraggingRef.current) return;
+    if (nodeDraggingRef.current || nodeImageSettingsOpen) return;
     if (toolbarHideTimerRef.current) {
       clearTimeout(toolbarHideTimerRef.current);
       toolbarHideTimerRef.current = null;
     }
     setToolbarNodeId(nodeId);
-  }, []);
+  }, [nodeImageSettingsOpen]);
 
   const hideNodeToolbar = useCallback(() => {
     if (toolbarHideTimerRef.current) clearTimeout(toolbarHideTimerRef.current);
@@ -1891,6 +1896,10 @@ function InfiniteCanvasPage() {
                   onPromptChange={handleNodePromptChange}
                   onConfigChange={handleConfigNodeChange}
                   onGenerate={handleGenerateNode}
+                  onImageSettingsOpenChange={(open) => {
+                    setNodeImageSettingsOpen(open);
+                    if (open) setToolbarNodeId(null);
+                  }}
                 />
               )}
               renderNodeContent={(contentNode) => (
@@ -1955,7 +1964,7 @@ function InfiniteCanvasPage() {
         </InfiniteCanvas>
 
         <CanvasNodeHoverToolbar
-          node={isNodeDragging ? null : toolbarNode}
+          node={isNodeDragging || nodeImageSettingsOpen ? null : toolbarNode}
           viewport={viewport}
           onKeep={keepNodeToolbar}
           onLeave={hideNodeToolbar}
@@ -2370,7 +2379,7 @@ function buildGenerationConfig(config: AiConfig, node: CanvasNodeData | undefine
   return {
     ...config,
     model: node?.metadata?.model || defaultModel || config.model || defaultConfig.model,
-    quality: config.quality || defaultConfig.quality,
+    quality: node?.metadata?.quality || config.quality || defaultConfig.quality,
     size: node?.metadata?.size || config.size || defaultConfig.size,
     count: String(node?.metadata?.count || (mode === "image" ? 3 : config.count) || defaultConfig.count),
   };

web/src/app/(user)/canvas/components/canvas-assistant-panel.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { ArrowUp, History, ImageIcon, LoaderCircle, MessageSquare, PanelRightClose, Plus, RotateCcw, Settings2, Sparkles, Trash2, X } from "lucide-react";
-import { Button, ConfigProvider, Input, InputNumber, Modal, Popover, Segmented, Tooltip } from "antd";
+import { Button, ConfigProvider, Modal, Segmented, Tooltip } from "antd";
 import { motion } from "motion/react";
 
 import { ImageGenerationPending } from "@/components/image-generation-pending";
@@ -17,6 +17,7 @@ import { useAssetStore } from "@/stores/use-asset-store";
 import { useThemeStore } from "@/stores/use-theme-store";
 import type { ReferenceImage } from "@/types/image";
 import { DiaTextReveal } from "@/components/ui/dia-text-reveal";
+import { CanvasImageSettingsPopover } from "./canvas-image-settings-popover";
 import { CanvasPromptLibrary } from "./canvas-prompt-library";
 import { CanvasNodeType, type CanvasAssistantImage, type CanvasAssistantMessage, type CanvasAssistantReference, type CanvasAssistantSession, type CanvasNodeData } from "../types";
 
@@ -401,7 +402,10 @@ function AssistantComposer({
               />
             </CanvasThemeProvider>
             {mode === "image" ? (
-              <ImageSettingsPopover config={config} onConfigChange={onConfigChange} onMissingConfig={onMissingConfig} />
+              <>
+                <ModelPicker config={config} value={config.imageModel || config.model} onChange={(model) => onConfigChange("imageModel", model)} onMissingConfig={onMissingConfig} />
+                <CanvasImageSettingsPopover config={config} onConfigChange={onConfigChange} onMissingConfig={onMissingConfig} />
+              </>
             ) : (
               <ModelPicker config={config} value={config.textModel || config.model} onChange={(model) => onConfigChange("textModel", model)} onMissingConfig={onMissingConfig} />
             )}
@@ -413,60 +417,6 @@ function AssistantComposer({
   );
 }
 
-function ImageSettingsPopover({ config, onConfigChange, onMissingConfig }: { config: AiConfig; onConfigChange: (key: keyof AiConfig, value: string) => void; onMissingConfig: () => void }) {
-  const theme = canvasThemes[useThemeStore((state) => state.theme)];
-  const quality = config.quality || "auto";
-  const count = String(Math.max(1, Math.min(15, Math.floor(Math.abs(Number(config.count)) || 1))));
-  const sizes = ["1:1", "3:2", "2:3", "16:9", "9:16", "auto"];
-  const customSize = sizes.includes(config.size || "auto") ? "" : config.size;
-  return (
-    <Popover
-      trigger="click"
-      placement="topLeft"
-      arrow={false}
-      overlayClassName="canvas-image-settings-popover"
-      color={theme.toolbar.panel}
-      content={(
-        <CanvasThemeProvider theme={theme}>
-          <div className="w-[330px] space-y-4" style={{ color: theme.node.text }} onMouseDown={(event) => event.stopPropagation()}>
-            <div className="text-base font-semibold">图像设置</div>
-            <div className="space-y-1.5">
-              <SettingTitle color={theme.node.muted}>模型</SettingTitle>
-              <ModelPicker className="!h-9 !w-full !max-w-none" config={config} value={config.imageModel || config.model} onChange={(model) => onConfigChange("imageModel", model)} onMissingConfig={onMissingConfig} fullWidth />
-            </div>
-            <div className="space-y-1.5">
-              <SettingTitle color={theme.node.muted}>质量</SettingTitle>
-              <Segmented block value={quality} onChange={(value) => onConfigChange("quality", String(value))} options={[{ value: "auto", label: "自动" }, { value: "high", label: "高" }, { value: "medium", label: "中" }, { value: "low", label: "低" }]} />
-            </div>
-            <div className="space-y-1.5">
-              <SettingTitle color={theme.node.muted}>宽高比</SettingTitle>
-              <div className="grid grid-cols-4 gap-1.5">
-                {sizes.map((size) => (
-                  <Button key={size} size="small" type={(config.size || "auto") === size ? "primary" : "default"} className="!h-7 !rounded-md !px-1.5" onClick={() => onConfigChange("size", size)}>
-                    {size}
-                  </Button>
-                ))}
-                <Input size="small" className="col-span-2 !h-7" placeholder="自定义比例" value={customSize} onChange={(event) => onConfigChange("size", event.target.value.trim() || "auto")} />
-              </div>
-            </div>
-            <div className="space-y-1.5">
-              <SettingTitle color={theme.node.muted}>生成数量</SettingTitle>
-              <div className="grid grid-cols-[minmax(0,1fr)_92px] gap-2">
-                <Segmented block value={["1", "2", "3", "4"].includes(count) ? count : undefined} onChange={(value) => onConfigChange("count", String(value))} options={["1", "2", "3", "4"].map((value) => ({ value, label: `${value} 张` }))} />
-                <InputNumber min={1} max={15} size="small" className="canvas-control-number !h-8 !w-full" value={Number(count)} onChange={(value) => onConfigChange("count", String(value || 1))} />
-              </div>
-            </div>
-          </div>
-        </CanvasThemeProvider>
-      )}
-    >
-      <Button size="small" type="text" className="!h-8 !max-w-[180px] !justify-start !rounded-full !px-2.5" style={{ background: theme.node.fill, color: theme.node.text }} icon={<Settings2 className="size-3.5" />}>
-        <span className="truncate">{qualityLabel(quality)} · {config.size || "auto"} · {count} 张</span>
-      </Button>
-    </Popover>
-  );
-}
-
 function CanvasThemeProvider({ theme, children }: { theme: (typeof canvasThemes)[keyof typeof canvasThemes]; children: ReactNode }) {
   return (
     <ConfigProvider theme={{ token: { colorBgContainer: theme.toolbar.panel, colorBgElevated: theme.toolbar.panel, colorBorder: theme.node.stroke, colorPrimary: theme.node.activeStroke, colorText: theme.node.text, colorTextLightSolid: theme.node.panel }, components: { Button: { defaultBg: theme.toolbar.panel, defaultBorderColor: theme.node.stroke, defaultColor: theme.node.text }, Input: { activeBorderColor: theme.node.activeStroke, hoverBorderColor: theme.node.activeStroke }, InputNumber: { activeBorderColor: theme.node.activeStroke, hoverBorderColor: theme.node.activeStroke }, Segmented: { itemColor: theme.node.text, itemHoverBg: theme.node.fill, itemSelectedBg: theme.node.activeStroke, itemSelectedColor: theme.node.panel, trackBg: theme.toolbar.panel, trackPadding: 2 } } }}>

web/src/app/(user)/canvas/components/canvas-image-settings-popover.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { Settings2 } from "lucide-react";
+import { Button, ConfigProvider, Popover } from "antd";
+
+import { canvasThemes } from "@/lib/canvas-theme";
+import { useThemeStore } from "@/stores/use-theme-store";
+import type { AiConfig } from "@/stores/use-config-store";
+
+const qualityOptions = [{ value: "auto", label: "自动" }, { value: "high", label: "高" }, { value: "medium", label: "中" }, { value: "low", label: "低" }];
+const aspectOptions = [
+  { value: "1:1", label: "1:1", width: 1024, height: 1024, icon: "square" },
+  { value: "3:2", label: "3:2", width: 1536, height: 1024, icon: "landscape" },
+  { value: "2:3", label: "2:3", width: 1024, height: 1536, icon: "portrait" },
+  { value: "4:3", label: "4:3", width: 1344, height: 1024, icon: "landscape" },
+  { value: "3:4", label: "3:4", width: 1024, height: 1344, icon: "portrait" },
+  { value: "9:16", label: "9:16", width: 1024, height: 1792, icon: "portrait" },
+  { value: "1:1-2k", label: "1:1(2k)", size: "2048x2048", width: 2048, height: 2048, icon: "square" },
+  { value: "16:9-2k", label: "16:9(2k)", size: "2048x1152", width: 2048, height: 1152, icon: "landscape" },
+  { value: "9:16-2k", label: "9:16(2k)", size: "1152x2048", width: 1152, height: 2048, icon: "portrait" },
+  { value: "16:9-4k", label: "16:9(4k)", size: "3840x2160", width: 3840, height: 2160, icon: "landscape" },
+  { value: "9:16-4k", label: "9:16(4k)", size: "2160x3840", width: 2160, height: 3840, icon: "portrait" },
+  { value: "auto", label: "auto", width: 0, height: 0, icon: "auto" },
+];
+
+type CanvasImageSettingsPopoverProps = {
+  config: AiConfig;
+  onConfigChange: (key: keyof AiConfig, value: string) => void;
+  onMissingConfig?: () => void;
+  onOpenChange?: (open: boolean) => void;
+  buttonClassName?: string;
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  placement?: "topLeft" | "top" | "topRight" | "bottomLeft" | "bottom" | "bottomRight";
+};
+
+export function CanvasImageSettingsPopover({ config, onConfigChange, onOpenChange, buttonClassName, getPopupContainer, placement = "topLeft" }: CanvasImageSettingsPopoverProps) {
+  const theme = canvasThemes[useThemeStore((state) => state.theme)];
+  const quality = config.quality || "auto";
+  const count = Math.max(1, Math.min(15, Math.floor(Math.abs(Number(config.count)) || 1)));
+  const activeSize = config.size || "auto";
+  const selectedAspect = aspectOptions.find((item) => (item.size || item.value) === activeSize || item.value === activeSize);
+  const dimensions = readSizeDimensions(activeSize, selectedAspect || aspectOptions[0]);
+  const selectAspect = (value: string) => {
+    const option = aspectOptions.find((item) => item.value === value);
+    onConfigChange("size", option?.size || option?.value || "auto");
+  };
+  const updateDimension = (key: "width" | "height", value: number | null) => {
+    const next = Math.max(1, Math.floor(value || dimensions[key] || 1024));
+    onConfigChange("size", `${key === "width" ? next : dimensions.width}x${key === "height" ? next : dimensions.height}`);
+  };
+
+  return (
+    <Popover
+      trigger="click"
+      placement={placement}
+      arrow={false}
+      overlayClassName="canvas-image-settings-popover"
+      color={theme.toolbar.panel}
+      getPopupContainer={getPopupContainer || ((triggerNode) => triggerNode.parentElement || document.body)}
+      onOpenChange={onOpenChange}
+      content={(
+        <CanvasImageSettingsTheme theme={theme}>
+          <div className="w-[360px] space-y-5 rounded-3xl px-1 py-0.5" style={{ color: theme.node.text }} onMouseDown={(event) => event.stopPropagation()}>
+            <div className="text-xl font-semibold">图像设置</div>
+            <div className="space-y-3">
+              <SettingTitle color={theme.node.muted}>质量</SettingTitle>
+              <div className="grid grid-cols-4 gap-3">
+                {qualityOptions.map((item) => <OptionPill key={item.value} selected={quality === item.value} theme={theme} onClick={() => onConfigChange("quality", item.value)}>{item.label}</OptionPill>)}
+              </div>
+            </div>
+            <div className="space-y-3">
+              <SettingTitle color={theme.node.muted}>尺寸</SettingTitle>
+              <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3">
+                <DimensionInput prefix="W" value={dimensions.width} disabled={activeSize === "auto"} theme={theme} onChange={(value) => updateDimension("width", value)} />
+                <span className="text-lg opacity-45">↔</span>
+                <DimensionInput prefix="H" value={dimensions.height} disabled={activeSize === "auto"} theme={theme} onChange={(value) => updateDimension("height", value)} />
+              </div>
+            </div>
+            <div className="space-y-3">
+              <SettingTitle color={theme.node.muted}>宽高比</SettingTitle>
+              <div className="grid grid-cols-4 gap-3">
+                {aspectOptions.map((item) => (
+                  <button key={item.value} type="button" className="flex h-[86px] cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border bg-transparent text-sm transition hover:opacity-80" style={{ borderColor: selectedAspect?.value === item.value ? theme.node.text : theme.node.stroke, background: "transparent", color: theme.node.text }} onMouseDown={(event) => event.stopPropagation()} onClick={() => selectAspect(item.value)}>
+                    <AspectIcon type={item.icon} width={item.width} height={item.height} color={theme.node.text} />
+                    <span>{item.label}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div className="space-y-3">
+              <SettingTitle color={theme.node.muted}>生成数量</SettingTitle>
+              <div className="grid grid-cols-4 gap-3">
+                {Array.from({ length: 10 }, (_, index) => index + 1).map((value) => <OptionPill key={value} selected={count === value} theme={theme} onClick={() => onConfigChange("count", String(value))}>{value} 张</OptionPill>)}
+                <CountInput value={count} theme={theme} onChange={(value) => onConfigChange("count", String(value || 1))} />
+              </div>
+            </div>
+          </div>
+        </CanvasImageSettingsTheme>
+      )}
+    >
+      <Button size="small" type="text" className={buttonClassName || "!h-8 !max-w-[180px] !justify-start !rounded-full !px-2.5"} style={{ background: theme.node.fill, color: theme.node.text }} icon={<Settings2 className="size-3.5" />}>
+        <span className="truncate">{qualityLabel(quality)} · {selectedAspect?.label || activeSize} · {count} 张</span>
+      </Button>
+    </Popover>
+  );
+}
+
+export function CanvasImageSettingsTheme({ theme, children }: { theme: (typeof canvasThemes)[keyof typeof canvasThemes]; children: ReactNode }) {
+  return (
+    <ConfigProvider theme={{ token: { colorBgContainer: theme.toolbar.panel, colorBgElevated: theme.toolbar.panel, colorBorder: theme.node.stroke, colorPrimary: theme.node.activeStroke, colorText: theme.node.text, colorTextLightSolid: theme.node.panel }, components: { Button: { defaultBg: theme.toolbar.panel, defaultBorderColor: theme.node.stroke, defaultColor: theme.node.text } } }}>
+      {children}
+    </ConfigProvider>
+  );
+}
+
+function OptionPill({ selected, theme, onClick, children }: { selected: boolean; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; onClick: () => void; children: ReactNode }) {
+  return (
+    <button
+      type="button"
+      className="h-10 cursor-pointer rounded-full border px-2 text-sm transition hover:opacity-80"
+      style={{ background: "transparent", borderColor: selected ? theme.node.text : theme.node.stroke, color: theme.node.text }}
+      onMouseDown={(event) => event.stopPropagation()}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+
+function DimensionInput({ prefix, value, disabled, theme, onChange }: { prefix: string; value: number; disabled: boolean; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; onChange: (value: number | null) => void }) {
+  return (
+    <label className="flex h-10 overflow-hidden rounded-xl text-sm" style={{ background: theme.node.fill, color: theme.node.text, opacity: disabled ? 0.55 : 1 }}>
+      <span className="grid w-10 place-items-center" style={{ color: theme.node.muted }}>{prefix}</span>
+      <input type="number" min={1} disabled={disabled} className="min-w-0 flex-1 bg-transparent px-2 outline-none" value={value || ""} onChange={(event) => onChange(Number(event.target.value) || null)} onMouseDown={(event) => event.stopPropagation()} />
+    </label>
+  );
+}
+
+function CountInput({ value, theme, onChange }: { value: number; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; onChange: (value: number | null) => void }) {
+  return (
+    <label className="col-span-2 flex h-10 overflow-hidden rounded-full border text-sm" style={{ borderColor: theme.node.stroke, color: theme.node.text }}>
+      <input type="number" min={1} max={15} className="min-w-0 flex-1 bg-transparent px-3 text-center outline-none" style={{ color: theme.node.text, WebkitTextFillColor: theme.node.text }} value={value || ""} onChange={(event) => onChange(Number(event.target.value) || null)} onMouseDown={(event) => event.stopPropagation()} />
+    </label>
+  );
+}
+
+function AspectIcon({ type, width, height, color }: { type: string; width: number; height: number; color: string }) {
+  if (type === "auto") return null;
+  const ratio = width / Math.max(1, height);
+  const boxWidth = ratio >= 1 ? 28 : Math.max(12, 28 * ratio);
+  const boxHeight = ratio >= 1 ? Math.max(12, 28 / ratio) : 28;
+  return (
+    <span className="grid h-8 w-10 place-items-center">
+      <span className="rounded-md border-2" style={{ width: boxWidth, height: boxHeight, borderColor: color }} />
+    </span>
+  );
+}
+
+function SettingTitle({ children, color }: { children: string; color: string }) {
+  return <div className="text-xs font-medium" style={{ color }}>{children}</div>;
+}
+
+function qualityLabel(value: string) {
+  return ({ auto: "自动", high: "高", medium: "中", low: "低" } as Record<string, string>)[value] || value;
+}
+
+function readSizeDimensions(size: string, fallback: { width: number; height: number }) {
+  const match = size?.match(/^(\d+)x(\d+)$/);
+  return {
+    width: match ? Number(match[1]) : fallback.width,
+    height: match ? Number(match[2]) : fallback.height,
+  };
+}

web/src/app/(user)/canvas/components/canvas-node-prompt-panel.tsx

@@ -2,14 +2,14 @@
 
 import { useEffect, useState } from "react";
 import { ArrowUp, LoaderCircle } from "lucide-react";
-import { Button, InputNumber } from "antd";
+import { Button } from "antd";
 
 import { ModelPicker } from "@/components/model-picker";
 import { defaultConfig, useConfigStore, type AiConfig } from "@/stores/use-config-store";
 import { canvasThemes } from "@/lib/canvas-theme";
 import { useThemeStore } from "@/stores/use-theme-store";
+import { CanvasImageSettingsPopover } from "./canvas-image-settings-popover";
 import { CanvasPromptLibrary } from "./canvas-prompt-library";
-import { CanvasSizePicker } from "./canvas-size-picker";
 import { CanvasNodeType, type CanvasGenerationMode, type CanvasNodeData } from "../types";
 
 export type CanvasNodeGenerationMode = CanvasGenerationMode;
@@ -20,9 +20,10 @@ type CanvasNodePromptPanelProps = {
   onPromptChange: (nodeId: string, prompt: string) => void;
   onConfigChange: (nodeId: string, patch: Partial<CanvasNodeData["metadata"]>) => void;
   onGenerate: (nodeId: string, mode: CanvasNodeGenerationMode, prompt: string) => void;
+  onImageSettingsOpenChange?: (open: boolean) => void;
 };
 
-export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfigChange, onGenerate }: CanvasNodePromptPanelProps) {
+export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfigChange, onGenerate, onImageSettingsOpenChange }: CanvasNodePromptPanelProps) {
   const globalConfig = useConfigStore((state) => state.config);
   const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
   const theme = canvasThemes[useThemeStore((state) => state.theme)];
@@ -73,13 +74,21 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
       <div className="mt-2 flex min-w-0 items-center justify-between gap-2">
         <div className="flex min-w-0 items-center gap-2">
           <CanvasPromptLibrary onSelect={updatePrompt} />
-          <ModelPicker config={config} value={config.model} onChange={(model) => onConfigChange(node.id, { model })} onMissingConfig={() => openConfigDialog(true)} />
           {mode === "image" ? (
-            <CanvasSizePicker className="h-10 w-[92px] shrink-0" value={config.size} onChange={(value) => onConfigChange(node.id, { size: value })} />
-          ) : null}
-          {mode === "image" ? (
-            <InputNumber min={1} max={15} className="canvas-compact-control canvas-control-number h-10 shrink-0 !w-[58px]" value={Math.floor(Math.abs(Number(config.count)) || 1)} onChange={(value) => onConfigChange(node.id, { count: Number(value) || 1 })} />
-          ) : null}
+            <>
+              <ModelPicker config={config} value={config.model} onChange={(model) => onConfigChange(node.id, { model })} onMissingConfig={() => openConfigDialog(true)} />
+              <CanvasImageSettingsPopover
+                config={config}
+                placement="topLeft"
+                buttonClassName="!h-10 !max-w-[170px] !justify-start !rounded-full !px-3"
+                onConfigChange={(key, value) => onConfigChange(node.id, key === "count" ? { count: Number(value) || 1 } : { [key]: value })}
+                onMissingConfig={() => openConfigDialog(true)}
+                onOpenChange={onImageSettingsOpenChange}
+              />
+            </>
+          ) : (
+            <ModelPicker config={config} value={config.model} onChange={(model) => onConfigChange(node.id, { model })} onMissingConfig={() => openConfigDialog(true)} />
+          )}
         </div>
         <Button
           type="primary"
@@ -104,7 +113,7 @@ function buildNodeConfig(globalConfig: AiConfig, node: CanvasNodeData, mode: Can
   return {
     ...globalConfig,
     model: node.metadata?.model || defaultModel || globalConfig.model || defaultConfig.model,
-    quality: globalConfig.quality || defaultConfig.quality,
+    quality: node.metadata?.quality || globalConfig.quality || defaultConfig.quality,
     size: node.metadata?.size || globalConfig.size || defaultConfig.size,
     count: String(node.metadata?.count || (mode === "image" ? 3 : globalConfig.count) || defaultConfig.count),
   };