fix: align Gemini image sizes with official presets

2026-05-26 13:05:27 +08:00
parent cb0659fa00
commit 56a23847a1
6 changed files with 148 additions and 21 deletions
--- a/web/canvas-app/src/components/nodes/ImageConfigNode.vue
+++ b/web/canvas-app/src/components/nodes/ImageConfigNode.vue
@@ -76,7 +76,7 @@
              </n-dropdown>
            </div>
          </div>
-          <div class="flex items-center gap-1.5">
+          <div v-if="supportsCustomSize" class="flex items-center gap-1.5">
            <input
              v-model="customSizeInput"
              @keydown.enter.prevent="applyCustomSize"
@@ -297,6 +297,11 @@ const hasSizeOptions = computed(() => {
  return config?.sizes && config.sizes.length > 0
 })

+const supportsCustomSize = computed(() => {
+  const config = getModelConfig(localModel.value)
+  return config?.supportsCustomSize !== false
+})
+
 // Display size with label | 显示尺寸（带标签）
 const displaySize = computed(() => {
  const option = sizeOptions.value.find(o => o.key === localSize.value)
@@ -345,6 +350,16 @@ onMounted(() => {
  if (props.data?.quality !== localQuality.value) {
    updateNode(props.id, { quality: localQuality.value })
  }
+  const mountedSizeOptions = getModelSizeOptions(localModel.value, localQuality.value)
+  if (mountedSizeOptions.length > 0 && !mountedSizeOptions.some(o => o.key === localSize.value)) {
+    const defaultSize = currentModelConfig.value?.defaultParams?.size
+      || mountedSizeOptions.find(o => o.key === DEFAULT_IMAGE_SIZE)?.key
+      || mountedSizeOptions[0].key
+    localSize.value = defaultSize
+    customSizeInput.value = defaultSize === 'auto' ? '' : defaultSize
+    customSizeError.value = ''
+    updateNode(props.id, { size: defaultSize })
+  }
 })

 // 解析 textNode 内容中的 @ 引用，转换为简短引用（如 图 1）并收集图片
@@ -577,6 +592,7 @@ const updateSize = () => {
 }

 const applyCustomSize = () => {
+  if (!supportsCustomSize.value) return
  const result = validateImageSize(customSizeInput.value)
  if (!result.ok) {
    customSizeError.value = result.message
--- a/web/canvas-app/src/config/models.js
+++ b/web/canvas-app/src/config/models.js
@@ -20,6 +20,31 @@ export const SEEDREAM_SIZE_OPTIONS = [
    { label: '横屏 16:9 · 2048×1152', key: '2048x1152', ratio: '16:9', width: 2048, height: 1152 }
 ]

+// Gemini 3 Pro Image official aspect ratio + imageSize presets.
+// Gemini does not support arbitrary custom pixel dimensions.
+export const GEMINI_SIZE_OPTIONS = [
+    { label: '自动 · 生成后显示实际像素', key: 'auto', ratio: 'auto' },
+    { label: '方图 1:1 · 1K · 1024×1024', key: '1024x1024', ratio: '1:1', imageSize: '1K', width: 1024, height: 1024 },
+    { label: '竖图 2:3 · 1K · 848×1264', key: '848x1264', ratio: '2:3', imageSize: '1K', width: 848, height: 1264 },
+    { label: '横图 3:2 · 1K · 1264×848', key: '1264x848', ratio: '3:2', imageSize: '1K', width: 1264, height: 848 },
+    { label: '竖图 3:4 · 1K · 896×1200', key: '896x1200', ratio: '3:4', imageSize: '1K', width: 896, height: 1200 },
+    { label: '竖图 4:5 · 1K · 928×1152', key: '928x1152', ratio: '4:5', imageSize: '1K', width: 928, height: 1152 },
+    { label: '竖屏 9:16 · 1K · 768×1376', key: '768x1376', ratio: '9:16', imageSize: '1K', width: 768, height: 1376 },
+    { label: '横屏 16:9 · 1K · 1376×768', key: '1376x768', ratio: '16:9', imageSize: '1K', width: 1376, height: 768 },
+    { label: '方图 1:1 · 2K · 2048×2048', key: '2048x2048', ratio: '1:1', imageSize: '2K', width: 2048, height: 2048 },
+    { label: '竖图 2:3 · 2K · 1696×2528', key: '1696x2528', ratio: '2:3', imageSize: '2K', width: 1696, height: 2528 },
+    { label: '横图 3:2 · 2K · 2528×1696', key: '2528x1696', ratio: '3:2', imageSize: '2K', width: 2528, height: 1696 },
+    { label: '竖图 3:4 · 2K · 1792×2400', key: '1792x2400', ratio: '3:4', imageSize: '2K', width: 1792, height: 2400 },
+    { label: '竖图 4:5 · 2K · 1856×2304', key: '1856x2304', ratio: '4:5', imageSize: '2K', width: 1856, height: 2304 },
+    { label: '竖屏 9:16 · 2K · 1536×2752', key: '1536x2752', ratio: '9:16', imageSize: '2K', width: 1536, height: 2752 },
+    { label: '横屏 16:9 · 2K · 2752×1536', key: '2752x1536', ratio: '16:9', imageSize: '2K', width: 2752, height: 1536 },
+    { label: '方图 1:1 · 4K · 4096×4096', key: '4096x4096', ratio: '1:1', imageSize: '4K', width: 4096, height: 4096 },
+    { label: '竖图 2:3 · 4K · 3392×5056', key: '3392x5056', ratio: '2:3', imageSize: '4K', width: 3392, height: 5056 },
+    { label: '横图 3:2 · 4K · 5056×3392', key: '5056x3392', ratio: '3:2', imageSize: '4K', width: 5056, height: 3392 },
+    { label: '竖屏 9:16 · 4K · 3072×5504', key: '3072x5504', ratio: '9:16', imageSize: '4K', width: 3072, height: 5504 },
+    { label: '横屏 16:9 · 4K · 5504×3072', key: '5504x3072', ratio: '16:9', imageSize: '4K', width: 5504, height: 3072 }
+]
+
 // Kept for compatibility with upstream model helpers.
 export const SEEDREAM_4K_SIZE_OPTIONS = SEEDREAM_SIZE_OPTIONS

@@ -46,7 +71,9 @@ export const IMAGE_MODELS = [
        key: 'auto',
        provider: ['chatfire'],
        sizes: SEEDREAM_SIZE_OPTIONS.map(s => s.key),
+        sizeOptions: SEEDREAM_SIZE_OPTIONS,
        qualities: SEEDREAM_QUALITY_OPTIONS,
+        supportsCustomSize: true,
        defaultParams: {
            size: '1024x1536',
            quality: 'high',
@@ -58,7 +85,9 @@ export const IMAGE_MODELS = [
        key: 'gpt-image-2',
        provider: ['chatfire'],
        sizes: SEEDREAM_SIZE_OPTIONS.map(s => s.key),
+        sizeOptions: SEEDREAM_SIZE_OPTIONS,
        qualities: SEEDREAM_QUALITY_OPTIONS,
+        supportsCustomSize: true,
        defaultParams: {
            size: '1024x1536',
            quality: 'high',
@@ -69,10 +98,12 @@ export const IMAGE_MODELS = [
        label: 'Gemini 图片',
        key: 'gemini-3-pro-image-preview',
        provider: ['chatfire'],
-        sizes: SEEDREAM_SIZE_OPTIONS.map(s => s.key),
-        qualities: SEEDREAM_QUALITY_OPTIONS,
+        sizes: GEMINI_SIZE_OPTIONS.map(s => s.key),
+        sizeOptions: GEMINI_SIZE_OPTIONS,
+        qualities: [],
+        supportsCustomSize: false,
        defaultParams: {
-            size: '1024x1536',
+            size: '1024x1024',
            quality: 'high',
            style: 'vivid'
        }
--- a/web/canvas-app/src/stores/models.js
+++ b/web/canvas-app/src/stores/models.js
@@ -78,7 +78,7 @@ export const getModelSizeOptions = (modelKey, quality = 'high') => {
  if (!model?.sizes) return SEEDREAM_SIZE_OPTIONS
  
  // Convert sizes array to dropdown options | 转换 sizes 数组为下拉选项
-  const sizeOptions = quality === '4k' ? SEEDREAM_4K_SIZE_OPTIONS : SEEDREAM_SIZE_OPTIONS
+  const sizeOptions = model.sizeOptions || (quality === '4k' ? SEEDREAM_4K_SIZE_OPTIONS : SEEDREAM_SIZE_OPTIONS)
  return model.sizes.map(size => {
    const option = sizeOptions.find(o => o.key === size)
    return option || { label: size, key: size }