feat(image): 添加图像质量和尺寸配置功能

- 在 AI 接口和图像输入处理中添加 quality 参数支持
- 更新前端 API 调用函数以传递 quality 参数到后端服务
- 重构图像构建器组件，替换原有的 imageSize 配置为更详细的 ratio、tier、width、height 和 quality 设置
- 在对话存储中添加新的图像参数字段并实现数据迁移
- 更新图像结果组件以根据新的 ratio 字段应用正确的宽高比样式
- 扩展图像任务服务以处理新增的质量和尺寸参数
- 在页面组件中实现完整的图像配置状态管理和本地存储功能

api/ai.py

@@ -23,6 +23,7 @@ class ImageGenerationRequest(BaseModel):
     model: str = "gpt-image-2"
     n: int = Field(default=1, ge=1, le=4)
     size: str | None = None
+    quality: str = "auto"
     response_format: str = "b64_json"
     history_disabled: bool = True
     stream: bool | None = None

api/image_inputs.py

@@ -69,6 +69,7 @@ def _payload_from_fields(fields: dict[str, Any]) -> dict[str, Any]:
         "model": _clean(fields.get("model"), "gpt-image-2"),
         "n": _parse_count(fields.get("n")),
         "size": _clean(fields.get("size")) or None,
+        "quality": _clean(fields.get("quality"), "auto"),
         "response_format": _clean(fields.get("response_format"), "b64_json"),
         "stream": _parse_bool(fields.get("stream")),
     }
@@ -170,7 +171,7 @@ async def parse_image_edit_request(request: Request) -> tuple[dict[str, Any], li
 
     form = await request.form()
     fields: dict[str, Any] = {}
-    for key in ("client_task_id", "prompt", "model", "n", "size", "response_format", "stream"):
+    for key in ("client_task_id", "prompt", "model", "n", "size", "quality", "response_format", "stream"):
         value = form.get(key)
         if isinstance(value, str):
             fields[key] = value

api/image_tasks.py

@@ -16,6 +16,7 @@ class ImageGenerationTaskRequest(BaseModel):
     prompt: str = Field(..., min_length=1)
     model: str = "gpt-image-2"
     size: str | None = None
+    quality: str = "auto"
 
 
 def _parse_task_ids(value: str) -> list[str]:
@@ -57,6 +58,7 @@ def create_router() -> APIRouter:
                 prompt=body.prompt,
                 model=body.model,
                 size=body.size,
+                quality=body.quality,
                 base_url=resolve_image_base_url(request),
             )
         except ValueError as exc:
@@ -84,6 +86,7 @@ def create_router() -> APIRouter:
                 prompt=prompt,
                 model=model,
                 size=payload["size"],
+                quality=payload["quality"],
                 base_url=resolve_image_base_url(request),
                 images=images,
             )

services/image_task_service.py

@@ -68,6 +68,7 @@ def _public_task(task: dict[str, Any]) -> dict[str, Any]:
         "mode": task.get("mode"),
         "model": task.get("model"),
         "size": task.get("size"),
+        "quality": task.get("quality"),
         "created_at": task.get("created_at"),
         "updated_at": task.get("updated_at"),
     }
@@ -109,13 +110,15 @@ class ImageTaskService:
         prompt: str,
         model: str,
         size: str | None,
-        base_url: str,
+        quality: str = "auto",
+        base_url: str = "",
     ) -> dict[str, Any]:
         payload = {
             "prompt": prompt,
             "model": model,
             "n": 1,
             "size": size,
+            "quality": quality,
             "response_format": "url",
             "base_url": base_url,
         }
@@ -129,15 +132,17 @@ class ImageTaskService:
         prompt: str,
         model: str,
         size: str | None,
-        base_url: str,
-        images: list[tuple[bytes, str, str]],
+        quality: str = "auto",
+        base_url: str = "",
+        images: list[tuple[bytes, str, str]] | None = None,
     ) -> dict[str, Any]:
         payload = {
             "prompt": prompt,
-            "images": images,
+            "images": images or [],
             "model": model,
             "n": 1,
             "size": size,
+            "quality": quality,
             "response_format": "url",
             "base_url": base_url,
         }
@@ -196,6 +201,7 @@ class ImageTaskService:
                 "mode": mode,
                 "model": _clean(payload.get("model"), "gpt-image-2"),
                 "size": _clean(payload.get("size")),
+                "quality": _clean(payload.get("quality"), "auto"),
                 "created_at": now,
                 "updated_at": now,
             }
@@ -334,6 +340,7 @@ class ImageTaskService:
                 "mode": "edit" if item.get("mode") == "edit" else "generate",
                 "model": _clean(item.get("model"), "gpt-image-2"),
                 "size": _clean(item.get("size")),
+                "quality": _clean(item.get("quality"), "auto"),
                 "created_at": _clean(item.get("created_at"), _now_iso()),
                 "updated_at": _clean(item.get("updated_at"), _clean(item.get("created_at"), _now_iso())),
             }

services/protocol/conversation.py

@@ -133,19 +133,13 @@ def assistant_history_messages(messages: list[dict[str, Any]]) -> list[str]:
     return [str(item.get("content") or "") for item in messages if item.get("role") == "assistant" and item.get("content")]
 
 
-def build_image_prompt(prompt: str, size: str | None) -> str:
-    if not size:
-        return prompt
-    if size not in {"1:1", "16:9", "9:16", "4:3", "3:4"}:
-        return f"{prompt.strip()}\n\n输出图片，宽高比为 {size}。"
-    hint = {
-        "1:1": "输出为 1:1 正方形构图，主体居中，适合正方形画幅。",
-        "16:9": "输出为 16:9 横屏构图，适合宽画幅展示。",
-        "9:16": "输出为 9:16 竖屏构图，适合竖版画幅展示。",
-        "4:3": "输出为 4:3 比例，兼顾宽度与高度，适合展示画面细节。",
-        "3:4": "输出为 3:4 比例，纵向构图，适合人物肖像或竖向场景。",
-    }[size]
-    return f"{prompt.strip()}\n\n{hint}"
+def build_image_prompt(prompt: str, size: str | None, quality: str = "auto") -> str:
+    hints = []
+    if size:
+        hints.append(f"输出图片尺寸为 {size}。")
+    if quality:
+        hints.append(f"输出图片质量为 {quality}。")
+    return f"{prompt.strip()}\n\n{''.join(hints)}" if hints else prompt
 
 
 def encoding_for_model(model: str):
@@ -215,6 +209,7 @@ class ConversationRequest:
     images: list[str] | None = None
     n: int = 1
     size: str | None = None
+    quality: str = "auto"
     response_format: str = "b64_json"
     base_url: str | None = None
     message_as_error: bool = False
@@ -478,12 +473,13 @@ def conversation_events(
     prompt: str = "",
     images: list[str] | None = None,
     size: str | None = None,
+    quality: str = "auto",
 ) -> Iterator[dict[str, Any]]:
     normalized = normalize_messages(messages or ([{"role": "user", "content": prompt}] if prompt else []))
     image_model = str(model or "").strip() in IMAGE_MODELS
     history_text = "" if image_model else assistant_history_text(normalized)
     history_messages = [] if image_model else assistant_history_messages(normalized)
-    final_prompt = prompt_with_global_system(build_image_prompt(prompt, size)) if image_model else prompt
+    final_prompt = prompt_with_global_system(build_image_prompt(prompt, size, quality)) if image_model else prompt
     payloads = backend.stream_conversation(
         messages=normalized,
         model=model,
@@ -545,6 +541,7 @@ def stream_image_outputs(
             model=request.model,
             images=request.images or [],
             size=request.size,
+            quality=request.quality,
     ):
         last = event
         if event.get("type") == "conversation.delta":

services/protocol/openai_v1_image_edit.py

@@ -18,6 +18,7 @@ def handle(body: dict[str, Any]) -> dict[str, Any] | Iterator[dict[str, Any]]:
     model = str(body.get("model") or "gpt-image-2")
     n = int(body.get("n") or 1)
     size = body.get("size")
+    quality = str(body.get("quality") or "auto")
     response_format = str(body.get("response_format") or "b64_json")
     base_url = str(body.get("base_url") or "") or None
     encoded_images = encode_images(images)
@@ -28,6 +29,7 @@ def handle(body: dict[str, Any]) -> dict[str, Any] | Iterator[dict[str, Any]]:
         model=model,
         n=n,
         size=size,
+        quality=quality,
         response_format=response_format,
         base_url=base_url,
         images=encoded_images,

services/protocol/openai_v1_image_generations.py

@@ -15,6 +15,7 @@ def handle(body: dict[str, Any]) -> dict[str, Any] | Iterator[dict[str, Any]]:
     model = str(body.get("model") or "gpt-image-2")
     n = int(body.get("n") or 1)
     size = body.get("size")
+    quality = str(body.get("quality") or "auto")
     response_format = str(body.get("response_format") or "b64_json")
     base_url = str(body.get("base_url") or "") or None
     outputs = stream_image_outputs_with_pool(ConversationRequest(
@@ -22,6 +23,7 @@ def handle(body: dict[str, Any]) -> dict[str, Any] | Iterator[dict[str, Any]]:
         model=model,
         n=n,
         size=size,
+        quality=quality,
         response_format=response_format,
         base_url=base_url,
         message_as_error=True,

services/protocol/openai_v1_response.py

@@ -22,6 +22,13 @@ def is_text_response_request(body: dict[str, Any]) -> bool:
     return not has_response_image_generation_tool(body)
 
 
+def response_image_tool(body: dict[str, Any]) -> dict[str, object]:
+    for tool in body.get("tools") or []:
+        if isinstance(tool, dict) and tool.get("type") == "image_generation":
+            return tool
+    return {}
+
+
 def extract_response_image(input_value: object) -> tuple[bytes, str] | None:
     if isinstance(input_value, dict):
         images = extract_image_from_message_content(input_value.get("content"))
@@ -199,10 +206,12 @@ def response_events(body: dict[str, Any]) -> Iterator[dict[str, Any]]:
         images = encode_images([(image_data, "image.png", mime_type)])
     else:
         images = None
+    tool = response_image_tool(body)
     image_outputs = stream_image_outputs_with_pool(ConversationRequest(
         prompt=prompt,
         model=model,
-        size=None if images else "1:1",
+        size=tool.get("size"),
+        quality=str(tool.get("quality") or "auto"),
         response_format="b64_json",
         images=images,
     ))

web/src/app/image/components/image-composer.tsx

@@ -1,17 +1,23 @@
 "use client";
-import { ArrowUp, Check, ChevronDown, ImagePlus, LoaderCircle, X } from "lucide-react";
+import { ArrowUp, ChevronDown, ImagePlus, Info, LoaderCircle, RectangleHorizontal, RectangleVertical, Square, X } from "lucide-react";
 import { useEffect, useMemo, useRef, useState, type ClipboardEvent, type RefObject } from "react";
 
 import { ImageLightbox } from "@/components/image-lightbox";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+import type { ImageModel } from "@/lib/api";
 import { cn } from "@/lib/utils";
 
 type ImageComposerProps = {
   prompt: string;
   imageCount: string;
-  imageSize: string;
+  imageRatio: string;
+  imageTier: string;
+  imageWidth: string;
+  imageHeight: string;
+  imageQuality: string;
+  imageModel: ImageModel;
   availableQuota: string;
   activeTaskCount: number;
   referenceImages: Array<{ name: string; dataUrl: string }>;
@@ -19,17 +25,55 @@ type ImageComposerProps = {
   fileInputRef: RefObject<HTMLInputElement | null>;
   onPromptChange: (value: string) => void;
   onImageCountChange: (value: string) => void;
-  onImageSizeChange: (value: string) => void;
+  onImageRatioChange: (value: string) => void;
+  onImageTierChange: (value: string) => void;
+  onImageWidthChange: (value: string) => void;
+  onImageHeightChange: (value: string) => void;
+  onImageQualityChange: (value: string) => void;
+  onImageModelChange: (value: ImageModel) => void;
   onSubmit: () => void | Promise<void>;
   onPickReferenceImage: () => void;
   onReferenceImageChange: (files: File[]) => void | Promise<void>;
   onRemoveReferenceImage: (index: number) => void;
 };
 
+const qualityOptions = [
+  { value: "auto", label: "自动" },
+  { value: "low", label: "低" },
+  { value: "medium", label: "中" },
+  { value: "high", label: "高" },
+];
+const modelOptions: Array<{ value: ImageModel; label: string }> = [
+  { value: "gpt-image-2", label: "gpt-image-2" },
+  { value: "codex-gpt-image-2", label: "codex-gpt-image-2" },
+];
+
+const aspectOptions = [
+  { ratio: "1:1", tier: "1k", width: "1024", height: "1024", label: "1:1", icon: Square },
+  { ratio: "2:3", tier: "1k", width: "1024", height: "1536", label: "2:3", icon: RectangleVertical },
+  { ratio: "3:2", tier: "1k", width: "1536", height: "1024", label: "3:2", icon: RectangleHorizontal },
+  { ratio: "3:4", tier: "1k", width: "1024", height: "1365", label: "3:4", icon: RectangleVertical },
+  { ratio: "4:3", tier: "1k", width: "1365", height: "1024", label: "4:3", icon: RectangleHorizontal },
+  { ratio: "9:16", tier: "1k", width: "1088", height: "1920", label: "9:16", icon: RectangleVertical },
+  { ratio: "16:9", tier: "1k", width: "1920", height: "1088", label: "16:9", icon: RectangleHorizontal },
+  { ratio: "1:1", tier: "2k", width: "2048", height: "2048", label: "1:1(2k)", icon: Square },
+  { ratio: "16:9", tier: "2k", width: "2560", height: "1440", label: "16:9(2k)", icon: RectangleHorizontal },
+  { ratio: "9:16", tier: "2k", width: "1440", height: "2560", label: "9:16(2k)", icon: RectangleVertical },
+  { ratio: "16:9", tier: "4k", width: "3840", height: "2160", label: "16:9(4k)", icon: RectangleHorizontal },
+  { ratio: "9:16", tier: "4k", width: "2160", height: "3840", label: "9:16(4k)", icon: RectangleVertical },
+  { ratio: "auto", tier: "auto", width: "1024", height: "1024", label: "auto", icon: null },
+];
+const countOptions = Array.from({ length: 10 }, (_, index) => String(index + 1));
+
 export function ImageComposer({
   prompt,
   imageCount,
-  imageSize,
+  imageRatio,
+  imageTier,
+  imageWidth,
+  imageHeight,
+  imageQuality,
+  imageModel,
   availableQuota,
   activeTaskCount,
   referenceImages,
@@ -37,7 +81,12 @@ export function ImageComposer({
   fileInputRef,
   onPromptChange,
   onImageCountChange,
-  onImageSizeChange,
+  onImageRatioChange,
+  onImageTierChange,
+  onImageWidthChange,
+  onImageHeightChange,
+  onImageQualityChange,
+  onImageModelChange,
   onSubmit,
   onPickReferenceImage,
   onReferenceImageChange,
@@ -53,15 +102,9 @@ export function ImageComposer({
     () => referenceImages.map((image, index) => ({ id: `${image.name}-${index}`, src: image.dataUrl })),
     [referenceImages],
   );
-  const imageSizeOptions = [
-    { value: "", label: "未指定" },
-    { value: "1:1", label: "1:1 (正方形)" },
-    { value: "16:9", label: "16:9 (横版)" },
-    { value: "4:3", label: "4:3 (横版)" },
-    { value: "3:4", label: "3:4 (竖版)" },
-    { value: "9:16", label: "9:16 (竖版)" },
-  ];
-  const imageSizeLabel = imageSizeOptions.find((option) => option.value === imageSize)?.label || "未指定";
+  const qualityLabel = qualityOptions.find((option) => option.value === imageQuality)?.label || "自动";
+  const ratioLabel = imageRatio === "auto" ? "auto" : `${imageRatio}(${imageTier})`;
+  const imageSizeLabel = `${qualityLabel} · ${ratioLabel} · ${imageCount || 1} 张`;
 
   useEffect(() => {
     if (!isSizeMenuOpen) {
@@ -192,31 +235,15 @@ export function ImageComposer({
                       {activeTaskCount}<span className="hidden sm:inline"> 个任务处理中</span>
                     </div>
                   )}
-                  <div className="flex h-9 shrink-0 items-center gap-1.5 rounded-full border border-stone-200 bg-white px-2 py-0.5 sm:h-auto sm:gap-2 sm:px-3 sm:py-1">
-                    <span className="hidden text-[11px] font-medium text-stone-700 sm:inline sm:text-sm">张数</span>
-                    <Input
-                      type="number"
-                      inputMode="numeric"
-                      min="1"
-                      max="100"
-                      step="1"
-                      value={imageCount}
-                      onChange={(event) => onImageCountChange(event.target.value)}
-                      className="h-7 w-[40px] border-0 bg-transparent px-0 text-center text-xs font-medium text-stone-700 shadow-none focus-visible:ring-0 sm:h-8 sm:w-[64px] sm:text-sm"
-                    />
-                  </div>
-                  <div
-                    className="relative flex h-9 shrink-0 items-center gap-1.5 rounded-full border border-stone-200 bg-white px-2 py-0.5 text-[11px] sm:h-auto sm:gap-2 sm:px-3 sm:py-1 sm:text-[13px]"
-                  >
-                    <span className="hidden font-medium text-stone-700 sm:inline sm:text-sm">比例</span>
+                  <div className="relative flex h-9 min-w-0 shrink items-center rounded-full bg-transparent text-[11px] sm:h-auto sm:shrink-0 sm:text-[13px]">
                     <button
                       ref={sizeMenuBtnRef}
                       type="button"
-                      className="flex h-7 w-[78px] items-center justify-between bg-transparent text-left text-xs font-bold text-stone-700 min-[390px]:w-[96px] sm:h-8 sm:w-[132px]"
+                      className="inline-flex h-9 w-fit max-w-[calc(100vw-12rem)] items-center justify-between gap-2 rounded-full bg-stone-100 px-4 text-left text-xs font-semibold text-stone-900 sm:h-10 sm:max-w-none sm:text-sm"
                       onClick={() => {
                         if (!isSizeMenuOpen && sizeMenuBtnRef.current) {
                           const rect = sizeMenuBtnRef.current.getBoundingClientRect();
-                          const menuWidth = Math.min(186, window.innerWidth - 32);
+                          const menuWidth = Math.min(460, window.innerWidth - 32);
                           setSizeMenuPos({ top: rect.top - 8, left: Math.max(16, Math.min(rect.left, window.innerWidth - menuWidth - 16)) });
                         }
                         setIsSizeMenuOpen((open) => !open);
@@ -228,34 +255,154 @@ export function ImageComposer({
                     {isSizeMenuOpen ? (
                       <div
                         ref={sizeMenuRef}
-                        className="fixed z-[80] max-h-[45dvh] overflow-y-auto rounded-3xl border border-white/80 bg-white p-2 shadow-[0_24px_80px_-32px_rgba(15,23,42,0.35)]"
+                        className="fixed z-[80] max-h-[62dvh] overflow-y-auto rounded-[24px] border border-stone-200/70 bg-white p-4 shadow-[0_30px_90px_-34px_rgba(15,23,42,0.42)] sm:max-h-none sm:overflow-visible"
                         style={{
                           top: sizeMenuPos.top,
                           left: sizeMenuPos.left,
                           transform: "translateY(-100%)",
-                          width: "min(186px, calc(100vw - 2rem))",
+                          width: "min(460px, calc(100vw - 2rem))",
                         }}
                       >
-                        {imageSizeOptions.map((option) => {
-                          const active = option.value === imageSize;
-                          return (
-                            <button
-                              key={option.label}
-                              type="button"
-                              className={cn(
-                                "flex w-full items-center justify-between rounded-2xl px-3 py-2 text-left text-sm text-stone-700 transition hover:bg-stone-100",
-                                active && "bg-stone-100 font-medium text-stone-950",
-                              )}
-                              onClick={() => {
-                                onImageSizeChange(option.value);
-                                setIsSizeMenuOpen(false);
-                              }}
-                            >
-                              <span>{option.label}</span>
-                              {active ? <Check className="size-4" /> : null}
-                            </button>
-                          );
-                        })}
+                        <h3 className="mb-3 text-base font-semibold text-stone-950">图像设置</h3>
+                        <div className="mb-3">
+                          <div className="mb-2 text-sm font-medium text-stone-900">模型</div>
+                          <div className="grid grid-cols-2 gap-2">
+                            {modelOptions.map((option) => {
+                              const active = option.value === imageModel;
+                              return (
+                                <button
+                                  key={option.value}
+                                  type="button"
+                                  className={cn(
+                                    "h-9 cursor-pointer rounded-full border border-stone-200 bg-white px-3 text-sm text-stone-800 transition hover:border-stone-300 hover:bg-stone-50",
+                                    active && "border-stone-950 bg-white font-medium text-stone-950",
+                                  )}
+                                  onClick={() => onImageModelChange(option.value)}
+                                >
+                                  {option.label}
+                                </button>
+                              );
+                            })}
+                          </div>
+                        </div>
+                        <div className="mb-3">
+                          <div className="mb-2 text-sm font-medium text-stone-900">质量</div>
+                          <div className="grid grid-cols-4 gap-2">
+                            {qualityOptions.map((option) => {
+                              const active = option.value === imageQuality;
+                              return (
+                                <button
+                                  key={option.value}
+                                  type="button"
+                                  className={cn(
+                                    "h-9 cursor-pointer rounded-full border border-stone-200 bg-white text-sm text-stone-800 transition hover:border-stone-300 hover:bg-stone-50",
+                                    active && "border-stone-950 bg-white font-medium text-stone-950",
+                                  )}
+                                  onClick={() => onImageQualityChange(option.value)}
+                                >
+                                  {option.label}
+                                </button>
+                              );
+                            })}
+                          </div>
+                        </div>
+                        <div className="mb-3">
+                          <div className="mb-2 flex items-center gap-1.5 text-sm font-medium text-stone-900">
+                            尺寸 <Info className="size-3.5 text-stone-400" />
+                          </div>
+                          <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2">
+                            <div className="flex items-center rounded-lg bg-stone-100 px-3 py-1.5 text-sm text-stone-700">
+                              <span className="mr-2 text-stone-500">W</span>
+                              <Input
+                                type="number"
+                                inputMode="numeric"
+                                min="1"
+                                value={imageWidth}
+                                onChange={(event) => onImageWidthChange(event.target.value)}
+                                className="h-7 border-0 bg-transparent px-0 text-sm font-medium text-stone-800 shadow-none focus-visible:ring-0"
+                              />
+                            </div>
+                            <span className="text-stone-400">×</span>
+                            <div className="flex items-center rounded-lg bg-stone-100 px-3 py-1.5 text-sm text-stone-700">
+                              <span className="mr-2 text-stone-500">H</span>
+                              <Input
+                                type="number"
+                                inputMode="numeric"
+                                min="1"
+                                value={imageHeight}
+                                onChange={(event) => onImageHeightChange(event.target.value)}
+                                className="h-7 border-0 bg-transparent px-0 text-sm font-medium text-stone-800 shadow-none focus-visible:ring-0"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                        <div className="mb-3">
+                          <div className="mb-2 flex items-center gap-1.5 text-sm font-medium text-stone-900">
+                            宽高比 <Info className="size-3.5 text-stone-400" />
+                          </div>
+                          <div className="grid grid-cols-4 gap-2 sm:grid-cols-5">
+                            {aspectOptions.map((option) => {
+                              const active = option.ratio === imageRatio && option.tier === imageTier && option.width === imageWidth && option.height === imageHeight;
+                              const Icon = option.icon;
+                              return (
+                                <button
+                                  key={`${option.ratio}-${option.tier}-${option.label}`}
+                                  type="button"
+                                  className={cn(
+                                    "flex h-[64px] cursor-pointer flex-col items-center justify-center gap-1 rounded-2xl border border-stone-200 bg-white text-sm text-stone-800 transition hover:border-stone-300 hover:bg-stone-50",
+                                    active && "border-stone-950",
+                                  )}
+                                  onClick={() => {
+                                    onImageRatioChange(option.ratio);
+                                    onImageTierChange(option.tier);
+                                    onImageWidthChange(option.width);
+                                    onImageHeightChange(option.height);
+                                  }}
+                                >
+                                  {Icon ? (
+                                    <>
+                                      <Icon className="size-3.5 stroke-[1.8]" />
+                                      <span>{option.label}</span>
+                                    </>
+                                  ) : (
+                                    <span>{option.label}</span>
+                                  )}
+                                </button>
+                              );
+                            })}
+                          </div>
+                        </div>
+                        <div className="border-t border-stone-100 pt-3">
+                          <div className="mb-2 text-sm font-medium text-stone-900">生成数量</div>
+                          <div className="grid grid-cols-4 gap-2 sm:grid-cols-5">
+                            {countOptions.map((option) => {
+                              const active = imageCount === option;
+                              return (
+                                <button
+                                  key={option}
+                                  type="button"
+                                  className={cn(
+                                    "h-9 cursor-pointer rounded-full border border-stone-200 bg-white text-sm text-stone-800 transition hover:border-stone-300 hover:bg-stone-50",
+                                    active && "border-stone-950 bg-white font-medium text-stone-950",
+                                  )}
+                                  onClick={() => onImageCountChange(option)}
+                                >
+                                  {option} 张
+                                </button>
+                              );
+                            })}
+                            <Input
+                              type="number"
+                              inputMode="numeric"
+                              min="1"
+                              max="100"
+                              step="1"
+                              value={imageCount}
+                              onChange={(event) => onImageCountChange(event.target.value)}
+                              className="h-9 rounded-full border-stone-200 bg-white px-3 text-center text-sm font-medium text-stone-800 shadow-none focus-visible:ring-0"
+                            />
+                          </div>
+                        </div>
                       </div>
                     ) : null}
                   </div>
@@ -279,4 +426,3 @@ export function ImageComposer({
     </div>
   );
 }
-

web/src/app/image/components/image-results.tsx

@@ -275,12 +275,11 @@ export function ImageResults({
                             className={cn(
                               "break-inside-avoid overflow-hidden rounded-xl border border-rose-200 bg-rose-50 sm:rounded-none",
                               "aspect-square",
-                              turn.size === "1:1" && "sm:aspect-square",
-                              turn.size === "16:9" && "sm:aspect-video",
-                              turn.size === "9:16" && "sm:aspect-[9/16]",
-                              turn.size === "4:3" && "sm:aspect-[4/3]",
-                              turn.size === "3:4" && "sm:aspect-[3/4]",
-                              !["1:1", "16:9", "9:16", "4:3", "3:4"].includes(turn.size) && "sm:aspect-square",
+                              turn.ratio === "1:1" && "sm:aspect-square",
+                              turn.ratio === "16:9" && "sm:aspect-video",
+                              turn.ratio === "9:16" && "sm:aspect-[9/16]",
+                              turn.ratio === "4:3" && "sm:aspect-[4/3]",
+                              turn.ratio === "3:4" && "sm:aspect-[3/4]",
                             )}
                           >
                             <div className="flex h-full min-h-16 flex-col items-center justify-center gap-1.5 px-2 py-2 text-center text-[11px] leading-4 text-rose-600 sm:gap-3 sm:px-6 sm:py-8 sm:text-sm sm:leading-6">
@@ -302,12 +301,11 @@ export function ImageResults({
                           key={image.id}
                           className={cn(
                             "break-inside-avoid overflow-hidden rounded-xl border border-stone-200/80 bg-stone-100/80 sm:rounded-none",
-                            turn.size === "1:1" && "aspect-square",
-                            turn.size === "16:9" && "aspect-video",
-                            turn.size === "9:16" && "aspect-[9/16]",
-                            turn.size === "4:3" && "aspect-[4/3]",
-                            turn.size === "3:4" && "aspect-[3/4]",
-                            !["1:1", "16:9", "9:16", "4:3", "3:4"].includes(turn.size) && "aspect-square",
+                            turn.ratio === "1:1" && "aspect-square",
+                            turn.ratio === "16:9" && "aspect-video",
+                            turn.ratio === "9:16" && "aspect-[9/16]",
+                            turn.ratio === "4:3" && "aspect-[4/3]",
+                            turn.ratio === "3:4" && "aspect-[3/4]",
                           )}
                         >
                           <div className="flex h-full flex-col items-center justify-center gap-1.5 px-2 py-3 text-center text-stone-500 sm:gap-3 sm:px-6 sm:py-8">

web/src/app/image/page.tsx

@@ -23,6 +23,7 @@ import {
   fetchAccounts,
   fetchImageTasks,
   type Account,
+  type ImageModel,
   type ImageTask,
 } from "@/lib/api";
 import { useAuthGuard } from "@/lib/use-auth-guard";
@@ -43,12 +44,20 @@ import {
 } from "@/store/image-conversations";
 
 const ACTIVE_CONVERSATION_STORAGE_KEY = "chatgpt2api:image_active_conversation_id";
-const IMAGE_SIZE_STORAGE_KEY = "chatgpt2api:image_last_size";
+const IMAGE_RATIO_STORAGE_KEY = "chatgpt2api:image_last_ratio";
+const IMAGE_TIER_STORAGE_KEY = "chatgpt2api:image_last_tier";
+const IMAGE_QUALITY_STORAGE_KEY = "chatgpt2api:image_last_quality";
+const IMAGE_MODEL_STORAGE_KEY = "chatgpt2api:image_last_model";
 const IMAGE_COUNT_STORAGE_KEY = "chatgpt2api:image_last_count";
 
 function clampImageCount(value: string) {
   return String(Math.min(100, Math.max(1, Math.floor(Number(value) || 1))));
 }
+function parseImageSize(size: string) {
+  const match = size.match(/^(\d+)x(\d+)$/);
+  return match ? { width: match[1], height: match[2] } : { width: "1024", height: "1024" };
+}
+
 const activeConversationQueueIds = new Set<string>();
 
 function buildConversationTitle(prompt: string) {
@@ -345,8 +354,13 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const [imagePrompt, setImagePrompt] = useState("");
-  const [imageCount, setImageCount] = useState("1");
-  const [imageSize, setImageSize] = useState("");
+  const [imageCount, setImageCount] = useState("3");
+  const [imageRatio, setImageRatio] = useState("auto");
+  const [imageTier, setImageTier] = useState("1k");
+  const [imageWidth, setImageWidth] = useState("1024");
+  const [imageHeight, setImageHeight] = useState("1024");
+  const [imageQuality, setImageQuality] = useState("auto");
+  const [imageModel, setImageModel] = useState<ImageModel>("gpt-image-2");
   const [isHistoryOpen, setIsHistoryOpen] = useState(false);
   const [referenceImageFiles, setReferenceImageFiles] = useState<File[]>([]);
   const [referenceImages, setReferenceImages] = useState<StoredReferenceImage[]>([]);
@@ -408,9 +422,17 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
 
     const loadHistory = async () => {
       try {
-        const storedSize = typeof window !== "undefined" ? window.localStorage.getItem(IMAGE_SIZE_STORAGE_KEY) : null;
+        const storedRatio = typeof window !== "undefined" ? window.localStorage.getItem(IMAGE_RATIO_STORAGE_KEY) : null;
+        const storedTier = typeof window !== "undefined" ? window.localStorage.getItem(IMAGE_TIER_STORAGE_KEY) : null;
+        const storedQuality = typeof window !== "undefined" ? window.localStorage.getItem(IMAGE_QUALITY_STORAGE_KEY) : null;
+        const storedModel = typeof window !== "undefined" ? window.localStorage.getItem(IMAGE_MODEL_STORAGE_KEY) : null;
         const storedCount = typeof window !== "undefined" ? window.localStorage.getItem(IMAGE_COUNT_STORAGE_KEY) : null;
-        setImageSize(storedSize || "");
+        setImageRatio(storedRatio || "1:1");
+        setImageTier(storedTier || "1k");
+        setImageWidth("1024");
+        setImageHeight("1024");
+        setImageQuality(storedQuality || "auto");
+        setImageModel(storedModel === "codex-gpt-image-2" ? "codex-gpt-image-2" : "gpt-image-2");
         setImageCount(storedCount ? clampImageCount(storedCount) : "1");
 
         const items = await listImageConversations();
@@ -502,12 +524,11 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
       return;
     }
 
-    if (imageSize) {
-      window.localStorage.setItem(IMAGE_SIZE_STORAGE_KEY, imageSize);
-      return;
-    }
-    window.localStorage.removeItem(IMAGE_SIZE_STORAGE_KEY);
-  }, [imageSize]);
+    window.localStorage.setItem(IMAGE_RATIO_STORAGE_KEY, imageRatio);
+    window.localStorage.setItem(IMAGE_TIER_STORAGE_KEY, imageTier);
+    window.localStorage.setItem(IMAGE_QUALITY_STORAGE_KEY, imageQuality);
+    window.localStorage.setItem(IMAGE_MODEL_STORAGE_KEY, imageModel);
+  }, [imageRatio, imageTier, imageQuality, imageModel]);
 
   useEffect(() => {
     if (typeof window !== "undefined" && parsedCount > 0) {
@@ -779,7 +800,13 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
     setSelectedConversationId(conversationId);
     setImagePrompt(turn.prompt);
     setImageCount(String(Math.max(1, turn.count || turn.images.length || 1)));
-    setImageSize(turn.size);
+    setImageRatio(turn.ratio);
+    setImageTier(turn.tier);
+    const parsedSize = parseImageSize(turn.size);
+    setImageWidth(parsedSize.width);
+    setImageHeight(parsedSize.height);
+    setImageQuality(turn.quality);
+    setImageModel(turn.model);
     setReferenceImages(turn.referenceImages);
     setReferenceImageFiles(
       turn.referenceImages.map((image) => dataUrlToFile(image.dataUrl, image.name, image.type)),
@@ -890,8 +917,8 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
           pendingImages.map((image) => {
             const taskId = image.taskId || image.id;
             return activeTurn.mode === "edit"
-              ? createImageEditTask(taskId, referenceFiles, activeTurn.prompt, activeTurn.model, activeTurn.size)
-              : createImageGenerationTask(taskId, activeTurn.prompt, activeTurn.model, activeTurn.size);
+              ? createImageEditTask(taskId, referenceFiles, activeTurn.prompt, activeTurn.model, activeTurn.size, activeTurn.quality)
+              : createImageGenerationTask(taskId, activeTurn.prompt, activeTurn.model, activeTurn.size, activeTurn.quality);
           }),
         );
         await applyTasks(submitted);
@@ -919,8 +946,8 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
             const resubmitted = await Promise.all(
               missingImages.map((image) =>
                 activeTurn.mode === "edit"
-                  ? createImageEditTask(image.taskId || image.id, referenceFiles, activeTurn.prompt, activeTurn.model, activeTurn.size)
-                  : createImageGenerationTask(image.taskId || image.id, activeTurn.prompt, activeTurn.model, activeTurn.size),
+                  ? createImageEditTask(image.taskId || image.id, referenceFiles, activeTurn.prompt, activeTurn.model, activeTurn.size, activeTurn.quality)
+                  : createImageGenerationTask(image.taskId || image.id, activeTurn.prompt, activeTurn.model, activeTurn.size, activeTurn.quality),
               ),
             );
             if (resubmitted.length > 0) {
@@ -991,6 +1018,9 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
         referenceImages: sourceTurn.referenceImages,
         count,
         size: sourceTurn.size,
+        ratio: sourceTurn.ratio,
+        tier: sourceTurn.tier,
+        quality: sourceTurn.quality,
         images: createLoadingImages(nextTurnId, count),
         createdAt: now,
         status: "queued",
@@ -1085,14 +1115,18 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
     const now = new Date().toISOString();
     const conversationId = targetConversation?.id ?? createId();
     const turnId = createId();
+    const imageSize = `${imageWidth || 1024}x${imageHeight || 1024}`;
     const draftTurn: ImageTurn = {
       id: turnId,
       prompt,
-      model: "gpt-image-2",
+      model: imageModel,
       mode: effectiveImageMode,
       referenceImages: effectiveImageMode === "edit" ? referenceImages : [],
       count: parsedCount,
       size: imageSize,
+      ratio: imageRatio,
+      tier: imageTier,
+      quality: imageQuality,
       images: createLoadingImages(turnId, parsedCount),
       createdAt: now,
       status: "queued",
@@ -1223,7 +1257,12 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
           <ImageComposer
             prompt={imagePrompt}
             imageCount={imageCount}
-            imageSize={imageSize}
+            imageRatio={imageRatio}
+            imageTier={imageTier}
+            imageWidth={imageWidth}
+            imageHeight={imageHeight}
+            imageQuality={imageQuality}
+            imageModel={imageModel}
             availableQuota={availableQuota}
             activeTaskCount={activeTaskCount}
             referenceImages={referenceImages}
@@ -1231,7 +1270,12 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
             fileInputRef={fileInputRef}
             onPromptChange={setImagePrompt}
             onImageCountChange={(value) => setImageCount(value ? clampImageCount(value) : "")}
-            onImageSizeChange={setImageSize}
+            onImageRatioChange={setImageRatio}
+            onImageTierChange={setImageTier}
+            onImageWidthChange={setImageWidth}
+            onImageHeightChange={setImageHeight}
+            onImageQualityChange={setImageQuality}
+            onImageModelChange={setImageModel}
             onSubmit={handleSubmit}
             onPickReferenceImage={() => fileInputRef.current?.click()}
             onReferenceImageChange={handleReferenceImageChange}

web/src/lib/api.ts

@@ -210,6 +210,7 @@ export type ImageTask = {
   mode: "generate" | "edit";
   model?: ImageModel;
   size?: string;
+  quality?: string;
   created_at: string;
   updated_at: string;
   data?: Array<{ b64_json?: string; url?: string; revised_prompt?: string }>;
@@ -359,7 +360,7 @@ export async function updateAccount(
   });
 }
 
-export async function generateImage(prompt: string, model?: ImageModel, size?: string) {
+export async function generateImage(prompt: string, model?: ImageModel, size?: string, quality = "auto") {
   return httpRequest<ImageResponse>(
     "/v1/images/generations",
     {
@@ -368,6 +369,7 @@ export async function generateImage(prompt: string, model?: ImageModel, size?: s
         prompt,
         ...(model ? { model } : {}),
         ...(size ? { size } : {}),
+        quality,
         n: 1,
         response_format: "b64_json",
       },
@@ -375,7 +377,7 @@ export async function generateImage(prompt: string, model?: ImageModel, size?: s
   );
 }
 
-export async function editImage(files: File | File[], prompt: string, model?: ImageModel, size?: string) {
+export async function editImage(files: File | File[], prompt: string, model?: ImageModel, size?: string, quality = "auto") {
   const formData = new FormData();
   const uploadFiles = Array.isArray(files) ? files : [files];
 
@@ -389,6 +391,7 @@ export async function editImage(files: File | File[], prompt: string, model?: Im
   if (size) {
     formData.append("size", size);
   }
+  formData.append("quality", quality);
   formData.append("n", "1");
 
   return httpRequest<ImageResponse>(
@@ -400,7 +403,7 @@ export async function editImage(files: File | File[], prompt: string, model?: Im
   );
 }
 
-export async function createImageGenerationTask(clientTaskId: string, prompt: string, model?: ImageModel, size?: string) {
+export async function createImageGenerationTask(clientTaskId: string, prompt: string, model?: ImageModel, size?: string, quality = "auto") {
   return httpRequest<ImageTask>("/api/image-tasks/generations", {
     method: "POST",
     body: {
@@ -408,6 +411,7 @@ export async function createImageGenerationTask(clientTaskId: string, prompt: st
       prompt,
       ...(model ? { model } : {}),
       ...(size ? { size } : {}),
+      quality,
     },
   });
 }
@@ -418,6 +422,7 @@ export async function createImageEditTask(
   prompt: string,
   model?: ImageModel,
   size?: string,
+  quality = "auto",
 ) {
   const formData = new FormData();
   const uploadFiles = Array.isArray(files) ? files : [files];
@@ -433,6 +438,7 @@ export async function createImageEditTask(
   if (size) {
     formData.append("size", size);
   }
+  formData.append("quality", quality);
 
   return httpRequest<ImageTask>("/api/image-tasks/edits", {
     method: "POST",

web/src/store/image-conversations.ts

@@ -32,6 +32,9 @@ export type ImageTurn = {
   referenceImages: StoredReferenceImage[];
   count: number;
   size: string;
+  ratio: string;
+  tier: string;
+  quality: string;
   images: StoredImage[];
   createdAt: string;
   status: ImageTurnStatus;
@@ -136,6 +139,9 @@ function normalizeTurn(turn: ImageTurn & Record<string, unknown>): ImageTurn {
     referenceImages: getLegacyReferenceImages(turn),
     count: Math.max(1, Number(turn.count || normalizedImages.length || 1)),
     size: typeof turn.size === "string" ? turn.size : "",
+    ratio: typeof turn.ratio === "string" && turn.ratio ? turn.ratio : "1:1",
+    tier: typeof turn.tier === "string" && turn.tier ? turn.tier : "1k",
+    quality: typeof turn.quality === "string" && turn.quality ? turn.quality : "auto",
     images: normalizedImages,
     createdAt: String(turn.createdAt || new Date().toISOString()),
     status:
@@ -163,6 +169,9 @@ function normalizeConversation(conversation: ImageConversation & Record<string,
           referenceImages: getLegacyReferenceImages(conversation),
           count: Number(conversation.count || 1),
           size: typeof conversation.size === "string" ? conversation.size : "",
+          ratio: typeof conversation.ratio === "string" && conversation.ratio ? conversation.ratio : "1:1",
+          tier: typeof conversation.tier === "string" && conversation.tier ? conversation.tier : "1k",
+          quality: typeof conversation.quality === "string" && conversation.quality ? conversation.quality : "auto",
           images: Array.isArray(conversation.images) ? (conversation.images as StoredImage[]) : [],
           createdAt: String(conversation.createdAt || new Date().toISOString()),
           status: