918 lines
36 KiB
TypeScript
918 lines
36 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { ChevronDown, ChevronUp, Link2, Scan, SlidersHorizontal, Sparkles } from "lucide-react";
|
||
import { getGrsaiGptImageOutputSize } from "@/lib/ai/grsai-gpt-image-sizes";
|
||
import { cn } from "@/lib/utils";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Switch } from "@/components/ui/switch";
|
||
import {
|
||
Popover,
|
||
PopoverContent,
|
||
PopoverTrigger,
|
||
} from "@/components/ui/popover";
|
||
|
||
// 图片生成参数接口
|
||
export interface ImageGenerationParams {
|
||
aspectRatio: string;
|
||
imageSize: string;
|
||
imageCount?: number; // 生成图片数量
|
||
quality?: "auto" | "low" | "medium" | "high";
|
||
// 🆕 阿里生图专用参数
|
||
size?: string; // 自定义分辨率，如 "1024*1024"
|
||
negativePrompt?: string; // 反向提示词
|
||
promptExtend?: boolean; // 提示词智能优化
|
||
watermark?: boolean; // 水印
|
||
seed?: number; // 随机种子
|
||
}
|
||
|
||
interface ImageParamsBarProps {
|
||
modelName?: string;
|
||
initialParams?: Partial<ImageGenerationParams>;
|
||
onParamsChange?: (params: ImageGenerationParams) => void;
|
||
inline?: boolean; // 内联模式：只显示参数按钮，不显示外层容器
|
||
providerType?: string; // 模型类型：gemini, volcano-vision, alibaba-image, ruxa-image 等
|
||
hideImageCount?: boolean; // 隐藏图片数量按钮（仅个别页面需要）
|
||
hideAdvancedOptions?: boolean; // 隐藏高级设置按钮
|
||
inlineTheme?: "light" | "dark" | "minimal";
|
||
showInlineDivider?: boolean;
|
||
// 🆕 图片生成模型特性配置（从模型配置中读取）
|
||
imageGenConfig?: {
|
||
maxImages?: number;
|
||
supportsSize?: boolean;
|
||
supports1K?: boolean;
|
||
supports2K?: boolean;
|
||
supports4K?: boolean;
|
||
supportsPromptExtend?: boolean;
|
||
supportsNegativePrompt?: boolean;
|
||
supportsWatermark?: boolean;
|
||
supportsSeed?: boolean;
|
||
supportsQuality?: boolean;
|
||
supportedAspectRatios?: string[];
|
||
supportedImageSizes?: string[];
|
||
};
|
||
}
|
||
|
||
const DEFAULT_ASPECT_RATIO_OPTIONS = [
|
||
{ value: "auto", label: "自动" },
|
||
{ value: "1:1", label: "1:1" },
|
||
{ value: "16:9", label: "16:9" },
|
||
{ value: "9:16", label: "9:16" },
|
||
{ value: "4:3", label: "4:3" },
|
||
{ value: "3:4", label: "3:4" },
|
||
{ value: "3:2", label: "3:2" },
|
||
{ value: "2:3", label: "2:3" },
|
||
{ value: "5:4", label: "5:4" },
|
||
{ value: "4:5", label: "4:5" },
|
||
{ value: "21:9", label: "21:9" },
|
||
] as const;
|
||
type AspectRatioValue = string;
|
||
|
||
const DEFAULT_IMAGE_SIZE_OPTIONS = [
|
||
{ value: "1K", label: "1K", disabled: false },
|
||
{ value: "2K", label: "2K", disabled: false },
|
||
{ value: "4K", label: "4K", disabled: false },
|
||
] as const;
|
||
type ImageSizeValue = string;
|
||
|
||
function normalizeImageSizeValue(value?: string, fallback: ImageSizeValue = "2K"): ImageSizeValue {
|
||
const trimmed = String(value || "").trim();
|
||
if (!trimmed) return fallback;
|
||
const kMatch = trimmed.match(/^(\d+(?:\.\d+)?)\s*k$/i);
|
||
if (kMatch?.[1]) {
|
||
return `${Number(kMatch[1]).toString()}K`;
|
||
}
|
||
return trimmed;
|
||
}
|
||
|
||
const IMAGE_SIZE_PIXEL_MAP: Record<string, number> = {
|
||
"0.5K": 512,
|
||
"1K": 1024,
|
||
"2K": 2048,
|
||
"4K": 4096,
|
||
"8K": 8192,
|
||
"10K": 10240,
|
||
"12K": 12288,
|
||
};
|
||
|
||
const DEFAULT_IMAGE_SIZE_VALUE = "2K";
|
||
|
||
function getImageSizePixelValue(imageSize: string) {
|
||
const normalized = normalizeImageSizeValue(imageSize, DEFAULT_IMAGE_SIZE_VALUE);
|
||
if (IMAGE_SIZE_PIXEL_MAP[normalized]) {
|
||
return IMAGE_SIZE_PIXEL_MAP[normalized];
|
||
}
|
||
|
||
const kMatch = normalized.match(/^(\d+(?:\.\d+)?)K$/i);
|
||
if (kMatch?.[1]) {
|
||
return Math.max(1, Math.round(Number(kMatch[1]) * 1024));
|
||
}
|
||
|
||
return IMAGE_SIZE_PIXEL_MAP[DEFAULT_IMAGE_SIZE_VALUE];
|
||
}
|
||
|
||
function uniqueValues(values: string[]) {
|
||
const seen = new Set<string>();
|
||
const result: string[] = [];
|
||
for (const value of values) {
|
||
const normalized = String(value || "").trim();
|
||
if (!normalized || seen.has(normalized)) continue;
|
||
seen.add(normalized);
|
||
result.push(normalized);
|
||
}
|
||
return result;
|
||
}
|
||
|
||
export function ImageParamsBar({
|
||
modelName = "Gemini 图片生成",
|
||
initialParams,
|
||
onParamsChange,
|
||
inline = false,
|
||
providerType = "gemini", // 默认 gemini
|
||
hideImageCount = false,
|
||
hideAdvancedOptions = false,
|
||
inlineTheme = "light",
|
||
showInlineDivider = true,
|
||
imageGenConfig,
|
||
}: ImageParamsBarProps) {
|
||
const hasNormalizedParamDiff = (
|
||
source: Partial<ImageGenerationParams> | undefined,
|
||
normalized: ImageGenerationParams
|
||
) => {
|
||
if (!source) return false;
|
||
|
||
const keys: Array<keyof ImageGenerationParams> = [
|
||
"aspectRatio",
|
||
"imageSize",
|
||
"imageCount",
|
||
"quality",
|
||
"size",
|
||
"negativePrompt",
|
||
"promptExtend",
|
||
"watermark",
|
||
"seed",
|
||
];
|
||
|
||
return keys.some(
|
||
(key) => source[key] !== undefined && source[key] !== normalized[key]
|
||
);
|
||
};
|
||
|
||
const getImageCountOptions = () => {
|
||
if (imageGenConfig?.maxImages) {
|
||
return Array.from({ length: imageGenConfig.maxImages }, (_, i) => i + 1);
|
||
}
|
||
|
||
if (inlineTheme === "minimal") {
|
||
return Array.from({ length: 10 }, (_, i) => i + 1);
|
||
}
|
||
|
||
if (providerType === "ruxa-image") {
|
||
return [1];
|
||
}
|
||
|
||
if (
|
||
providerType === "openai-image" ||
|
||
providerType === "bananaimage" ||
|
||
providerType === "visionary" ||
|
||
providerType === "atlascloud" ||
|
||
providerType === "stepfun-image" ||
|
||
providerType === "midjourney"
|
||
) {
|
||
return [1];
|
||
}
|
||
|
||
// 否则根据 providerType 判断
|
||
if (providerType === "alibaba-image") {
|
||
// 阿里生图：1~6 张（qwen-image-edit-plus）
|
||
return [1, 2, 3, 4, 5, 6];
|
||
}
|
||
if (providerType === "volcano-vision") {
|
||
// 即梦4.5（豆包）：1~3 张
|
||
return [1, 2, 3];
|
||
}
|
||
// Gemini：1~2 张
|
||
return [1, 2];
|
||
};
|
||
const configuredImageSizes = uniqueValues(
|
||
Array.isArray(imageGenConfig?.supportedImageSizes)
|
||
? imageGenConfig.supportedImageSizes.map((size) =>
|
||
normalizeImageSizeValue(size, "")
|
||
)
|
||
: []
|
||
);
|
||
|
||
const buildImageSizeOptions = () => {
|
||
if (imageGenConfig?.supportsSize === false) {
|
||
return [];
|
||
}
|
||
|
||
if (configuredImageSizes.length > 0) {
|
||
return configuredImageSizes.map((value) => ({ value, label: value, disabled: false }));
|
||
}
|
||
|
||
return DEFAULT_IMAGE_SIZE_OPTIONS.filter((option) => {
|
||
if (option.disabled) return false;
|
||
if (!imageGenConfig) return true;
|
||
if (option.value === "1K") return imageGenConfig.supports1K !== false;
|
||
if (option.value === "2K") return imageGenConfig.supports2K !== false;
|
||
if (option.value === "4K") return imageGenConfig.supports4K !== false;
|
||
return true;
|
||
});
|
||
};
|
||
|
||
const availableSizeOptions = buildImageSizeOptions();
|
||
|
||
const isImageSizeAllowed = (s: ImageSizeValue) => {
|
||
if (availableSizeOptions.length === 0) return true;
|
||
const normalized = normalizeImageSizeValue(s, "");
|
||
return availableSizeOptions.some((option) => option.value === normalized);
|
||
};
|
||
|
||
const getFallbackImageSize = () =>
|
||
["2K", "1K", "4K", DEFAULT_IMAGE_SIZE_VALUE].find(isImageSizeAllowed) ||
|
||
availableSizeOptions[0]?.value ||
|
||
DEFAULT_IMAGE_SIZE_VALUE;
|
||
|
||
const configuredAspectRatios = uniqueValues(
|
||
Array.isArray(imageGenConfig?.supportedAspectRatios)
|
||
? imageGenConfig.supportedAspectRatios.map((ratio) => String(ratio || "").trim())
|
||
: []
|
||
);
|
||
|
||
const defaultAspectRatioLabel = new Map<string, string>(
|
||
DEFAULT_ASPECT_RATIO_OPTIONS.map((option) => [option.value, option.label])
|
||
);
|
||
const availableAspectRatioOptions = (
|
||
configuredAspectRatios.length > 0
|
||
? configuredAspectRatios
|
||
: DEFAULT_ASPECT_RATIO_OPTIONS.map((option) => option.value)
|
||
).map((value) => ({
|
||
value,
|
||
label: defaultAspectRatioLabel.get(value) || value,
|
||
}));
|
||
|
||
const isAspectRatioAllowed = (aspectRatio: string) =>
|
||
availableAspectRatioOptions.some((option) => option.value === aspectRatio);
|
||
|
||
const getFallbackAspectRatio = (): AspectRatioValue =>
|
||
availableAspectRatioOptions.find((option) => option.value === "1:1")?.value ||
|
||
availableAspectRatioOptions[0]?.value ||
|
||
"1:1";
|
||
|
||
const clampParamsByProvider = (raw: ImageGenerationParams): ImageGenerationParams => {
|
||
const options = getImageCountOptions();
|
||
const fallbackCount = options[0] ?? 1;
|
||
const imageCount = options.includes(raw.imageCount || fallbackCount) ? (raw.imageCount || fallbackCount) : fallbackCount;
|
||
let aspectRatio = raw.aspectRatio;
|
||
if (!isAspectRatioAllowed(aspectRatio)) {
|
||
aspectRatio = getFallbackAspectRatio();
|
||
}
|
||
// 根据模型配置校正分辨率：如果当前选择的档位被禁用，则降级到可用的档位
|
||
let imageSize = normalizeImageSizeValue(raw.imageSize, getFallbackImageSize());
|
||
if (availableSizeOptions.length > 0 && !isImageSizeAllowed(imageSize)) {
|
||
imageSize = getFallbackImageSize();
|
||
}
|
||
return {
|
||
...raw,
|
||
aspectRatio,
|
||
imageSize,
|
||
imageCount,
|
||
};
|
||
};
|
||
|
||
const isSameParams = (a: ImageGenerationParams, b: ImageGenerationParams) =>
|
||
a.aspectRatio === b.aspectRatio &&
|
||
a.imageSize === b.imageSize &&
|
||
(a.imageCount || 1) === (b.imageCount || 1) &&
|
||
(a.quality || "medium") === (b.quality || "medium") &&
|
||
a.size === b.size &&
|
||
a.negativePrompt === b.negativePrompt &&
|
||
a.promptExtend === b.promptExtend &&
|
||
a.watermark === b.watermark &&
|
||
a.seed === b.seed;
|
||
|
||
const buildBaseParams = (source?: Partial<ImageGenerationParams>) => {
|
||
const hasSourceAspectRatio =
|
||
typeof source?.aspectRatio === "string" && source.aspectRatio.trim().length > 0;
|
||
|
||
return clampParamsByProvider({
|
||
aspectRatio: inlineTheme === "minimal" ? "1:1" : "auto",
|
||
imageSize: "2K",
|
||
imageCount: 1,
|
||
quality: "medium",
|
||
promptExtend: true,
|
||
watermark: false,
|
||
...source,
|
||
...(inlineTheme === "minimal" && !hasSourceAspectRatio
|
||
? { aspectRatio: "1:1" }
|
||
: {}),
|
||
});
|
||
};
|
||
|
||
const [params, setParams] = useState<ImageGenerationParams>({
|
||
...buildBaseParams(initialParams),
|
||
});
|
||
const [minimalParamsOpen, setMinimalParamsOpen] = useState(false);
|
||
const qualityOptions = [
|
||
{ label: "自动", value: "auto" },
|
||
{ label: "高", value: "high" },
|
||
{ label: "中", value: "medium" },
|
||
{ label: "低", value: "low" },
|
||
] as const;
|
||
const qualityLabel =
|
||
qualityOptions.find((option) => option.value === params.quality)?.label || "中";
|
||
|
||
const imageCountOptions = getImageCountOptions();
|
||
const showImageCountSelector = !hideImageCount && imageCountOptions.length > 1;
|
||
|
||
// 是否显示阿里生图专用参数
|
||
const isAlibabaImage = providerType === "alibaba-image";
|
||
const showPromptExtend = isAlibabaImage || imageGenConfig?.supportsPromptExtend;
|
||
const showNegativePrompt = isAlibabaImage || imageGenConfig?.supportsNegativePrompt;
|
||
|
||
const getComputedOutputSize = (aspectRatio: string, imageSize: string) => {
|
||
if (providerType === "grsai-gpt-image") {
|
||
return getGrsaiGptImageOutputSize(aspectRatio, imageSize);
|
||
}
|
||
|
||
const size = getImageSizePixelValue(imageSize);
|
||
if (aspectRatio === "auto" || aspectRatio === "1:1") {
|
||
return { width: size, height: size };
|
||
}
|
||
|
||
const [wRaw, hRaw] = aspectRatio.split(":").map((item) => Number(item));
|
||
if (!wRaw || !hRaw) {
|
||
return { width: size, height: size };
|
||
}
|
||
|
||
if (wRaw >= hRaw) {
|
||
return {
|
||
width: size,
|
||
height: Math.max(1, Math.round((size * hRaw) / wRaw)),
|
||
};
|
||
}
|
||
|
||
return {
|
||
width: Math.max(1, Math.round((size * wRaw) / hRaw)),
|
||
height: size,
|
||
};
|
||
};
|
||
|
||
const renderRatioGlyph = (ratioValue: string) => {
|
||
if (ratioValue === "auto") {
|
||
return <Scan className="h-4 w-4" />;
|
||
}
|
||
|
||
const [wRaw, hRaw] = ratioValue.split(":").map((item) => Number(item));
|
||
if (!wRaw || !hRaw) {
|
||
return <Scan className="h-4 w-4" />;
|
||
}
|
||
const maxSide = 14;
|
||
let width = maxSide;
|
||
let height = maxSide;
|
||
if (wRaw >= hRaw) {
|
||
width = maxSide;
|
||
height = Math.max(6, Math.round((maxSide * hRaw) / wRaw));
|
||
} else {
|
||
height = maxSide;
|
||
width = Math.max(6, Math.round((maxSide * wRaw) / hRaw));
|
||
}
|
||
|
||
return (
|
||
<span
|
||
className="inline-block rounded-[6px] border-2 border-current"
|
||
style={{ width, height }}
|
||
/>
|
||
);
|
||
};
|
||
|
||
// 仅同步展示状态；只有确实发生参数校正时才回写父层，避免和父组件互相触发更新。
|
||
useEffect(() => {
|
||
const nextParams = buildBaseParams(initialParams);
|
||
setParams((prevParams) => (isSameParams(prevParams, nextParams) ? prevParams : nextParams));
|
||
if (onParamsChange && hasNormalizedParamDiff(initialParams, nextParams)) {
|
||
onParamsChange(nextParams);
|
||
}
|
||
}, [
|
||
imageGenConfig?.maxImages,
|
||
imageGenConfig?.supports1K,
|
||
imageGenConfig?.supports2K,
|
||
imageGenConfig?.supports4K,
|
||
imageGenConfig?.supportsSize,
|
||
imageGenConfig?.supportedAspectRatios,
|
||
imageGenConfig?.supportedImageSizes,
|
||
initialParams,
|
||
onParamsChange,
|
||
providerType,
|
||
]);
|
||
|
||
const updateParam = <K extends keyof ImageGenerationParams>(
|
||
key: K,
|
||
value: ImageGenerationParams[K]
|
||
) => {
|
||
const newParams = clampParamsByProvider({ ...params, [key]: value });
|
||
setParams((prevParams) => (isSameParams(prevParams, newParams) ? prevParams : newParams));
|
||
if (!isSameParams(params, newParams)) {
|
||
onParamsChange?.(newParams);
|
||
}
|
||
};
|
||
|
||
const updateParams = (patch: Partial<ImageGenerationParams>) => {
|
||
const newParams = clampParamsByProvider({ ...params, ...patch });
|
||
setParams((prevParams) => (isSameParams(prevParams, newParams) ? prevParams : newParams));
|
||
if (!isSameParams(params, newParams)) {
|
||
onParamsChange?.(newParams);
|
||
}
|
||
};
|
||
|
||
// 内联模式：只返回参数按钮，嵌入工具栏
|
||
if (inline) {
|
||
const isDarkInline = inlineTheme === "dark";
|
||
const isMinimalInline = inlineTheme === "minimal";
|
||
const outputSize = getComputedOutputSize(params.aspectRatio, params.imageSize);
|
||
|
||
if (isMinimalInline) {
|
||
const currentImageSize = params.imageSize || getFallbackImageSize();
|
||
const currentAspectRatio = isAspectRatioAllowed(params.aspectRatio)
|
||
? params.aspectRatio
|
||
: getFallbackAspectRatio();
|
||
const sizeOptionKeySet = new Set<string>();
|
||
const sizeOptions = [
|
||
...availableAspectRatioOptions.map((option) => ({
|
||
label: option.value === "auto" ? "auto" : option.label,
|
||
aspectRatio: option.value,
|
||
imageSize: currentImageSize,
|
||
})),
|
||
...availableSizeOptions.map((option) => ({
|
||
label: option.label,
|
||
aspectRatio: currentAspectRatio,
|
||
imageSize: option.value,
|
||
})),
|
||
].filter((option) => {
|
||
const key = `${option.aspectRatio}:${option.imageSize}`;
|
||
if (sizeOptionKeySet.has(key)) return false;
|
||
sizeOptionKeySet.add(key);
|
||
return true;
|
||
});
|
||
const imageCountOptions = getImageCountOptions();
|
||
const selectedAspectLabel = params.aspectRatio === "auto" ? "auto" : params.aspectRatio;
|
||
const selectedImageCount = params.imageCount || 1;
|
||
const renderMinimalRatioGlyph = (ratioValue: string) => {
|
||
if (ratioValue === "auto") {
|
||
return <span className="text-[11px] leading-none">auto</span>;
|
||
}
|
||
|
||
const [wRaw, hRaw] = ratioValue.split(":").map((item) => Number(item));
|
||
if (!wRaw || !hRaw) {
|
||
return <Scan className="h-4 w-4" />;
|
||
}
|
||
const maxSide = 18;
|
||
let width = maxSide;
|
||
let height = maxSide;
|
||
if (wRaw >= hRaw) {
|
||
width = maxSide;
|
||
height = Math.max(7, Math.round((maxSide * hRaw) / wRaw));
|
||
} else {
|
||
height = maxSide;
|
||
width = Math.max(7, Math.round((maxSide * wRaw) / hRaw));
|
||
}
|
||
|
||
return (
|
||
<span
|
||
className="inline-block rounded-[3px] border border-current"
|
||
style={{ width, height }}
|
||
/>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<Popover open={minimalParamsOpen} onOpenChange={setMinimalParamsOpen}>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant="ghost"
|
||
className="h-8 shrink-0 rounded-full bg-[#f1f1f2] px-2.5 text-[13px] font-normal text-[#20242a] hover:bg-[#e9eaec] focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[#242529] dark:text-zinc-100 dark:hover:bg-[#2c2d33]"
|
||
title="生成参数"
|
||
>
|
||
{qualityLabel} · {selectedAspectLabel} · {selectedImageCount} img
|
||
{minimalParamsOpen ? (
|
||
<ChevronUp className="ml-1 h-3 w-3" />
|
||
) : (
|
||
<ChevronDown className="ml-1 h-3 w-3" />
|
||
)}
|
||
</Button>
|
||
</PopoverTrigger>
|
||
<PopoverContent
|
||
align="center"
|
||
side="top"
|
||
sideOffset={8}
|
||
className="w-[304px] max-w-[calc(100vw-32px)] rounded-[18px] border border-[#c7ccd5] bg-white p-3.5 text-[#252b33] shadow-[0_22px_56px_rgba(15,23,42,0.16)] dark:border-white/12 dark:bg-[#141416] dark:text-zinc-100 dark:shadow-[0_24px_64px_rgba(0,0,0,0.42)]"
|
||
>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<div className="mb-2 text-[14px] font-medium leading-none">质量</div>
|
||
<div className="grid h-9 grid-cols-4 rounded-full bg-[#f4f4f5] p-0.5 dark:bg-white/8">
|
||
{qualityOptions.map((quality) => (
|
||
<button
|
||
key={quality.value}
|
||
type="button"
|
||
className={cn(
|
||
"rounded-full text-[13px] font-medium transition-colors",
|
||
params.quality === quality.value
|
||
? "border border-[#c8cdd5] bg-white shadow-[0_1px_4px_rgba(15,23,42,0.1)] dark:border-white/12 dark:bg-white/16"
|
||
: "text-[#3d434d] hover:bg-white/55 dark:text-zinc-300 dark:hover:bg-white/10"
|
||
)}
|
||
onClick={() => updateParam("quality", quality.value)}
|
||
>
|
||
{quality.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="mb-2 text-[14px] font-medium leading-none">尺寸</div>
|
||
<div className="grid grid-cols-[1fr_20px_1fr] items-center gap-2">
|
||
<div className="flex h-10 items-center gap-2 rounded-[10px] bg-[#f3f3f4] px-3 text-[15px] dark:bg-white/8">
|
||
<span className="text-[#68707c] dark:text-zinc-400">W</span>
|
||
<span>{outputSize.width}</span>
|
||
</div>
|
||
<Link2 className="mx-auto h-3.5 w-3.5 text-[#8b929c]" />
|
||
<div className="flex h-10 items-center gap-2 rounded-[10px] bg-[#f3f3f4] px-3 text-[15px] dark:bg-white/8">
|
||
<span className="text-[#68707c] dark:text-zinc-400">H</span>
|
||
<span>{outputSize.height}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{sizeOptions.length > 0 && (
|
||
<div>
|
||
<div className="mb-2 text-[14px] font-medium leading-none">Size</div>
|
||
<div className="grid grid-cols-4 gap-2">
|
||
{sizeOptions.map((option) => {
|
||
const selected =
|
||
params.aspectRatio === option.aspectRatio &&
|
||
(option.aspectRatio === "auto" || params.imageSize === option.imageSize);
|
||
return (
|
||
<button
|
||
key={`${option.aspectRatio}-${option.imageSize}-${option.label}`}
|
||
type="button"
|
||
className={cn(
|
||
"flex h-[66px] flex-col items-center justify-center gap-1.5 rounded-[10px] border text-[13px] transition-colors",
|
||
selected
|
||
? "border-[#bfc4cc] bg-[#e4e4e5] text-[#171b21] dark:border-white/18 dark:bg-white/16 dark:text-zinc-50"
|
||
: "border-[#d0d3d9] bg-white text-[#4c535d] hover:bg-[#f5f5f6] dark:border-white/12 dark:bg-transparent dark:text-zinc-300 dark:hover:bg-white/8"
|
||
)}
|
||
onClick={() =>
|
||
updateParams({
|
||
aspectRatio: option.aspectRatio,
|
||
imageSize: option.imageSize,
|
||
})
|
||
}
|
||
>
|
||
<span className="flex h-5 items-center justify-center text-[#30353c] dark:text-zinc-200">
|
||
{renderMinimalRatioGlyph(option.aspectRatio)}
|
||
</span>
|
||
<span>{option.label}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<div className="mb-2 text-[14px] font-medium leading-none">Image</div>
|
||
<div className="grid grid-cols-4 gap-2">
|
||
{imageCountOptions.map((count) => (
|
||
<button
|
||
key={count}
|
||
type="button"
|
||
className={cn(
|
||
"h-9 rounded-[9px] border text-[14px] transition-colors",
|
||
selectedImageCount === count
|
||
? "border-[#bfc4cc] bg-[#e4e4e5] text-[#171b21] dark:border-white/18 dark:bg-white/16 dark:text-zinc-50"
|
||
: "border-[#d0d3d9] bg-white text-[#4c535d] hover:bg-[#f5f5f6] dark:border-white/12 dark:bg-transparent dark:text-zinc-300 dark:hover:bg-white/8"
|
||
)}
|
||
onClick={() => updateParams({ imageCount: count })}
|
||
>
|
||
{count} img
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</PopoverContent>
|
||
</Popover>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"flex min-w-0 items-center",
|
||
isMinimalInline ? "ml-0 gap-2 pl-0" : "ml-1 gap-1 pl-1",
|
||
showInlineDivider &&
|
||
!isMinimalInline &&
|
||
(isDarkInline ? "border-l border-white/10" : "border-l border-border/50")
|
||
)}
|
||
>
|
||
<Popover>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant="ghost"
|
||
className={cn(
|
||
"shrink-0 p-0",
|
||
isMinimalInline
|
||
? "h-11 w-11 rounded-full border border-transparent bg-transparent text-[#555b66] hover:bg-[#f3f4f6] hover:text-[#20242a]"
|
||
: "h-8 w-11 rounded-[12px]",
|
||
!isMinimalInline && isDarkInline
|
||
? "border border-white/12 bg-white/[0.06] text-white hover:bg-white/[0.1]"
|
||
: !isMinimalInline
|
||
? "border border-[#d6dbe2] bg-[#f3f4f6]/90 text-[#2f3b48] hover:bg-[#edeff2]/90"
|
||
: ""
|
||
)}
|
||
aria-label={`比例：${params.aspectRatio}，分辨率：${params.imageSize}`}
|
||
title={`比例：${params.aspectRatio}，分辨率：${params.imageSize}`}
|
||
>
|
||
<span
|
||
className={cn(
|
||
"flex h-5 w-5 items-center justify-center",
|
||
isMinimalInline
|
||
? "text-current"
|
||
: isDarkInline
|
||
? "text-white/80"
|
||
: "text-[#20262f]"
|
||
)}
|
||
>
|
||
{renderRatioGlyph(params.aspectRatio)}
|
||
</span>
|
||
</Button>
|
||
</PopoverTrigger>
|
||
<PopoverContent
|
||
align="center"
|
||
side="top"
|
||
sideOffset={10}
|
||
className={cn(
|
||
"w-[312px] max-w-[calc(100vw-24px)] rounded-[14px] p-2 shadow-[0_10px_24px_rgba(15,23,42,0.14)]",
|
||
isDarkInline
|
||
? "border border-white/12 bg-[#0d1013]/98 text-white backdrop-blur-xl"
|
||
: "border border-[#d8dde4] bg-[#f3f4f6]/90"
|
||
)}
|
||
>
|
||
<div className="space-y-2.5">
|
||
<div>
|
||
<p className={cn("text-[11px] font-medium", isDarkInline ? "text-white/45" : "text-[#8a94a3]")}>选择比例</p>
|
||
<div
|
||
className={cn(
|
||
"mt-1.5 grid grid-cols-4 gap-1.5 rounded-[12px] p-1.5 md:grid-cols-5",
|
||
isDarkInline ? "bg-white/[0.04]" : "bg-[#eceff2]/90"
|
||
)}
|
||
>
|
||
{availableAspectRatioOptions.map((option) => (
|
||
<button
|
||
key={option.value}
|
||
type="button"
|
||
className={cn(
|
||
"flex h-[46px] flex-col items-center justify-center rounded-[10px] border transition",
|
||
params.aspectRatio === option.value
|
||
? isDarkInline
|
||
? "border-emerald-400/50 bg-emerald-500/12 text-emerald-200 shadow-[0_1px_5px_rgba(15,23,42,0.18)]"
|
||
: "border-white bg-white text-[#1f2937] shadow-[0_1px_5px_rgba(15,23,42,0.08)]"
|
||
: isDarkInline
|
||
? "border-transparent text-white/62 hover:bg-white/[0.06]"
|
||
: "border-transparent text-[#5f6b7a] hover:bg-white/70"
|
||
)}
|
||
onClick={() => updateParam("aspectRatio", option.value)}
|
||
>
|
||
<span className="mb-0.5 flex h-4 items-center justify-center">
|
||
{renderRatioGlyph(option.value)}
|
||
</span>
|
||
<span className="text-[12px] font-semibold leading-none">
|
||
{option.value === "auto" ? "智能" : option.label}
|
||
</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{availableSizeOptions.length > 0 && (
|
||
<div>
|
||
<p className={cn("text-[11px] font-medium", isDarkInline ? "text-white/45" : "text-[#8a94a3]")}>选择分辨率</p>
|
||
<div
|
||
className={cn(
|
||
"mt-1.5 grid grid-cols-2 gap-1.5 rounded-[12px] p-1",
|
||
isDarkInline ? "bg-white/[0.04]" : "bg-[#eceff2]/90"
|
||
)}
|
||
>
|
||
{availableSizeOptions.map((option) => (
|
||
<button
|
||
key={option.value}
|
||
type="button"
|
||
className={cn(
|
||
"h-8 rounded-[9px] text-[12px] font-semibold transition",
|
||
params.imageSize === option.value
|
||
? isDarkInline
|
||
? "bg-emerald-500/12 text-emerald-200 shadow-[0_1px_5px_rgba(15,23,42,0.18)]"
|
||
: "bg-white text-[#111827] shadow-[0_1px_5px_rgba(15,23,42,0.08)]"
|
||
: isDarkInline
|
||
? "bg-transparent text-white/62 hover:bg-white/[0.06]"
|
||
: "bg-transparent text-[#5f6b7a] hover:bg-white/70"
|
||
)}
|
||
onClick={() => updateParam("imageSize", option.value)}
|
||
>
|
||
<span className="inline-flex items-center gap-1">
|
||
{option.label}
|
||
</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<p className={cn("text-[11px] font-medium", isDarkInline ? "text-white/45" : "text-[#8a94a3]")}>尺寸</p>
|
||
<div className="mt-1.5 grid grid-cols-[1fr_auto_1fr_auto] items-center gap-1.5">
|
||
<div className={cn("h-7 rounded-[9px] px-2", isDarkInline ? "border border-white/10 bg-white/[0.04] text-white/68" : "border border-[#dce1e8] bg-[#eef1f4]/90 text-[#b0b8c4]")}>
|
||
<div className="flex h-full items-center justify-between gap-1.5">
|
||
<span className="text-[10px] font-semibold">W</span>
|
||
<span className="text-[12px] font-semibold">{outputSize.width}</span>
|
||
</div>
|
||
</div>
|
||
<Link2 className={cn("h-3 w-3", isDarkInline ? "text-white/35" : "text-[#adb6c3]")} />
|
||
<div className={cn("h-7 rounded-[9px] px-2", isDarkInline ? "border border-white/10 bg-white/[0.04] text-white/68" : "border border-[#dce1e8] bg-[#eef1f4]/90 text-[#b0b8c4]")}>
|
||
<div className="flex h-full items-center justify-between gap-1.5">
|
||
<span className="text-[10px] font-semibold">H</span>
|
||
<span className="text-[12px] font-semibold">{outputSize.height}</span>
|
||
</div>
|
||
</div>
|
||
<span className={cn("text-[11px] font-semibold", isDarkInline ? "text-white/45" : "text-[#8a94a3]")}>PX</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</PopoverContent>
|
||
</Popover>
|
||
|
||
{showImageCountSelector && (
|
||
<Popover>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant="ghost"
|
||
className={cn(
|
||
"text-[12px] font-semibold focus-visible:ring-0 focus-visible:ring-offset-0",
|
||
isMinimalInline
|
||
? "h-11 min-w-11 rounded-full border border-transparent bg-transparent px-0 text-[#555b66] hover:bg-[#f3f4f6] hover:text-[#20242a]"
|
||
: "h-8 min-w-[56px] rounded-[12px] px-2.5",
|
||
!isMinimalInline && isDarkInline
|
||
? "border border-white/12 bg-white/[0.06] text-white hover:bg-white/[0.1]"
|
||
: !isMinimalInline
|
||
? "border border-[#d6dbe2] bg-[#f3f4f6]/90 text-[#2f3b48] hover:bg-[#edeff2]/90"
|
||
: ""
|
||
)}
|
||
title={`数量：${params.imageCount || 1}张`}
|
||
>
|
||
<Sparkles
|
||
className={cn(
|
||
isMinimalInline ? "h-5 w-5" : "mr-1 h-3.5 w-3.5",
|
||
isMinimalInline
|
||
? "text-current"
|
||
: isDarkInline
|
||
? "text-emerald-300"
|
||
: "text-[#6b7280]"
|
||
)}
|
||
/>
|
||
{isMinimalInline ? (
|
||
<span className="sr-only">{params.imageCount || 1}张</span>
|
||
) : (
|
||
`${params.imageCount || 1}张`
|
||
)}
|
||
</Button>
|
||
</PopoverTrigger>
|
||
<PopoverContent
|
||
align="center"
|
||
side="top"
|
||
sideOffset={10}
|
||
className={cn(
|
||
"w-auto min-w-[120px] rounded-[14px] p-2 shadow-[0_10px_24px_rgba(15,23,42,0.14)]",
|
||
isDarkInline
|
||
? "border border-white/12 bg-[#0d1013]/98 text-white backdrop-blur-xl"
|
||
: "border border-[#d8dde4] bg-[#f3f4f6]/95"
|
||
)}
|
||
>
|
||
<div>
|
||
<p className={cn("text-[11px] font-medium", isDarkInline ? "text-white/45" : "text-[#8a94a3]")}>生成数量</p>
|
||
<div className={cn(
|
||
"mt-1.5 grid gap-1.5 rounded-[12px] p-1.5",
|
||
isDarkInline ? "bg-white/[0.04]" : "bg-[#eceff2]/90",
|
||
imageCountOptions.length <= 3 ? "grid-cols-3" : "grid-cols-3"
|
||
)}>
|
||
{imageCountOptions.map((count) => (
|
||
<button
|
||
key={count}
|
||
type="button"
|
||
className={cn(
|
||
"flex h-8 min-w-[36px] items-center justify-center rounded-[9px] border text-[12px] font-semibold transition",
|
||
(params.imageCount || 1) === count
|
||
? isDarkInline
|
||
? "border-emerald-400/50 bg-emerald-500/12 text-emerald-200 shadow-[0_1px_5px_rgba(15,23,42,0.18)]"
|
||
: "border-white bg-white text-[#1f2937] shadow-[0_1px_5px_rgba(15,23,42,0.08)]"
|
||
: isDarkInline
|
||
? "border-transparent text-white/62 hover:bg-white/[0.06]"
|
||
: "border-transparent text-[#5f6b7a] hover:bg-white/70"
|
||
)}
|
||
onClick={() => updateParam("imageCount", count)}
|
||
>
|
||
{count}张
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</PopoverContent>
|
||
</Popover>
|
||
)}
|
||
|
||
{/* 🆕 阿里生图专用：提示词优化 & 反向提示词 */}
|
||
{!hideAdvancedOptions && (showPromptExtend || showNegativePrompt) && (
|
||
<Popover>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant="ghost"
|
||
className={cn(
|
||
"shrink-0 p-0 focus-visible:ring-0 focus-visible:ring-offset-0",
|
||
isMinimalInline
|
||
? "h-11 w-11 rounded-full border border-transparent bg-transparent text-[#555b66] hover:bg-[#f3f4f6] hover:text-[#20242a]"
|
||
: "h-8 w-8 rounded-[12px]",
|
||
!isMinimalInline && isDarkInline
|
||
? "border border-white/12 bg-white/[0.06] text-white/70 hover:bg-white/[0.1]"
|
||
: !isMinimalInline
|
||
? "border border-[#d6dbe2] bg-[#f3f4f6]/90 text-[#5f6b7a] hover:bg-[#edeff2]/90"
|
||
: "",
|
||
(params.promptExtend || params.negativePrompt) &&
|
||
(isMinimalInline
|
||
? "text-[#20242a]"
|
||
: isDarkInline
|
||
? "text-emerald-300"
|
||
: "text-primary")
|
||
)}
|
||
title="高级设置"
|
||
>
|
||
<SlidersHorizontal size={14} />
|
||
<span className="sr-only">高级设置</span>
|
||
</Button>
|
||
</PopoverTrigger>
|
||
<PopoverContent
|
||
align="end"
|
||
side="top"
|
||
sideOffset={10}
|
||
className={cn(
|
||
"w-[280px] max-w-[calc(100vw-24px)] rounded-[14px] p-2 shadow-[0_10px_24px_rgba(15,23,42,0.14)]",
|
||
isDarkInline
|
||
? "border border-white/12 bg-[#0d1013]/98 text-white backdrop-blur-xl"
|
||
: "border border-[#d8dde4] bg-[#f3f4f6]/95"
|
||
)}
|
||
>
|
||
<div className="space-y-2.5">
|
||
{/* 提示词智能优化 */}
|
||
{showPromptExtend && (
|
||
<div className="flex items-center justify-between">
|
||
<div className="space-y-0.5">
|
||
<span className={cn("text-[12px] font-semibold", isDarkInline ? "text-white/88" : "text-[#2f3b48]")}>提示词优化</span>
|
||
<p className={cn("text-[11px]", isDarkInline ? "text-white/45" : "text-[#8a94a3]")}>AI 自动优化您的描述</p>
|
||
</div>
|
||
<Switch
|
||
checked={params.promptExtend ?? true}
|
||
onCheckedChange={(checked) => updateParam("promptExtend", checked)}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* 反向提示词 */}
|
||
{showNegativePrompt && (
|
||
<div className="space-y-1">
|
||
<span className={cn("text-[12px] font-semibold", isDarkInline ? "text-white/88" : "text-[#2f3b48]")}>反向提示词</span>
|
||
<Input
|
||
placeholder="不希望出现的内容，如：低质量、模糊..."
|
||
value={params.negativePrompt || ""}
|
||
onChange={(e) => updateParam("negativePrompt", e.target.value)}
|
||
className={cn(
|
||
"h-7 rounded-[8px] text-[12px]",
|
||
isDarkInline
|
||
? "border-white/12 bg-white/[0.04] text-white placeholder:text-white/28"
|
||
: "border-[#dce1e8] bg-[#eef1f4]/90 text-[#2f3b48] placeholder:text-[#b0b8c4]"
|
||
)}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</PopoverContent>
|
||
</Popover>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 非内联模式（暂时不实现，因为只需要内联模式）
|
||
return null;
|
||
}
|