admin/infinite-canvas
1
0
Fork 0
mirror of https://github.com/basketikun/infinite-canvas.git synced 2026-08-05 00:34:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(image-settings): add transparent background toggle for image generation

Browse Source
This commit is contained in:
HouYunFei
2026-07-16 15:45:02 +08:00
parent 2f9776bee3
commit 2959b5d340
8 changed files with 39 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/canvas/canvas-config-node-panel.tsx
+1
View File
@@ -156,6 +156,7 @@ function buildNodeConfig(globalConfig: AiConfig, node: CanvasNodeData, mode: Can
model,
quality: node.metadata?.quality || globalConfig.quality || defaultConfig.quality,
size: node.metadata?.size || globalConfig.size || defaultConfig.size,
background: node.metadata?.background ?? globalConfig.background ?? defaultConfig.background,
videoSeconds: node.metadata?.seconds || globalConfig.videoSeconds || defaultConfig.videoSeconds,
vquality: node.metadata?.vquality || globalConfig.vquality || defaultConfig.vquality,
videoGenerateAudio: node.metadata?.generateAudio || globalConfig.videoGenerateAudio || defaultConfig.videoGenerateAudio,
web/src/components/canvas/canvas-node-prompt-panel.tsx
+1
View File
@@ -145,6 +145,7 @@ function buildNodeConfig(globalConfig: AiConfig, node: CanvasNodeData, mode: Can
model,
quality: node.metadata?.quality || globalConfig.quality || defaultConfig.quality,
size: node.metadata?.size || globalConfig.size || defaultConfig.size,
background: node.metadata?.background ?? globalConfig.background ?? defaultConfig.background,
videoSeconds: node.metadata?.seconds || globalConfig.videoSeconds || defaultConfig.videoSeconds,
vquality: node.metadata?.vquality || globalConfig.vquality || defaultConfig.vquality,
videoGenerateAudio: node.metadata?.generateAudio || globalConfig.videoGenerateAudio || defaultConfig.videoGenerateAudio,
web/src/components/image-settings-panel.tsx
+13 -1
View File
@@ -33,7 +33,7 @@ export const imageAspectOptions = aspectOptions.map((item) => ({ value: item.siz
type ImageSettingsPanelProps = {
config: AiConfig;
onConfigChange: (key: "quality" | "size" | "count", value: string) => void;
onConfigChange: (key: "quality" | "size" | "count" | "background", value: string) => void;
theme: CanvasTheme;
showTitle?: boolean;
className?: string;
@@ -46,6 +46,7 @@ export function ImageSettingsPanel({ config, onConfigChange, theme, showTitle =
const quality = config.quality || "auto";
const count = Math.max(1, Math.min(maxCount, Math.floor(Math.abs(Number(config.count)) || 1)));
const activeSize = config.size || "auto";
const transparentBackground = config.background === "transparent";
const selectedAspect = aspectOptions.find((item) => (item.size || item.value) === activeSize || item.value === activeSize);
const dimensions = readSizeDimensions(activeSize, selectedAspect || aspectOptions[0]);
const selectAspect = (value: string) => {
@@ -117,6 +118,17 @@ export function ImageSettingsPanel({ config, onConfigChange, theme, showTitle =
))}
</div>
</div>
<div className="flex items-center justify-between gap-3">
<div className="space-y-0.5">
<SettingTitle color={theme.node.muted}>透明背景</SettingTitle>
<div className="text-xs" style={{ color: theme.node.muted, opacity: 0.75 }}>
开启后生成无背景的透明图像
</div>
</div>
<span onMouseDown={(event) => event.stopPropagation()}>
<Switch size="small" checked={transparentBackground} onChange={(checked) => onConfigChange("background", checked ? "transparent" : "")} />
</span>
</div>
<div className="space-y-2.5">
<SettingTitle color={theme.node.muted}>生成张数</SettingTitle>
<div className="grid grid-cols-4 gap-2.5">