feat(*): 模型能力配置 - 支持模型级视频限制校验与协议管理
This commit is contained in:
ddCat
@@ -2,13 +2,12 @@ import { type ReactNode } from "react";
|
||||
import { Switch } from "antd";
|
||||
|
||||
import { ImageSettingsTheme } from "@/components/image-settings-panel";
|
||||
import { boolConfig, isSeedanceFastModel, isSeedanceVideoConfig, normalizeSeedanceDuration, normalizeSeedanceRatio, normalizeSeedanceResolution, seedanceDurationOptions, seedanceRatioOptions, seedanceResolutionOptions } from "@/lib/seedance-video";
|
||||
import { boolConfig, isSeedanceFastModel, isSeedanceVideoConfig, normalizeSeedanceDuration, normalizeSeedanceRatio, normalizeSeedanceResolution, seedanceRatioOptions } from "@/lib/seedance-video";
|
||||
import { type CanvasTheme } from "@/lib/canvas-theme";
|
||||
import { normalizeVideoDuration, normalizeVideoResolution, VIDEO_DURATION_MIN, VIDEO_DURATION_OPTIONS, VIDEO_RESOLUTION_OPTIONS } from "@/lib/video-generation-options";
|
||||
import { normalizeVideoDuration, normalizeVideoResolution, VIDEO_DURATION_MIN } from "@/lib/video-generation-options";
|
||||
import { modelCapabilityConfigFor, videoDurationOptions, type VideoCapabilityConfig } from "@/lib/model-capabilities";
|
||||
import { modelOptionName, resolveModelRequestConfig, type AiConfig } from "@/stores/use-config-store";
|
||||
|
||||
const resolutionOptions = VIDEO_RESOLUTION_OPTIONS.map((value) => ({ value: String(value), label: `${value}P` }));
|
||||
|
||||
const sizeOptions = [
|
||||
{ value: "1280x720", label: "横屏", width: 1280, height: 720 },
|
||||
{ value: "720x1280", label: "竖屏", width: 720, height: 1280 },
|
||||
@@ -18,9 +17,6 @@ const sizeOptions = [
|
||||
{ value: "auto", label: "auto", width: 0, height: 0 },
|
||||
];
|
||||
|
||||
const defaultSecondOptions = VIDEO_DURATION_OPTIONS;
|
||||
const jiMengRatioOptions = ["16:9", "4:3", "1:1", "3:4", "9:16", "21:9"];
|
||||
|
||||
type VideoSettingsPanelProps = {
|
||||
config: AiConfig;
|
||||
onConfigChange: (key: "vquality" | "size" | "videoSeconds" | "videoGenerateAudio" | "videoWatermark", value: string) => void;
|
||||
@@ -30,18 +26,23 @@ type VideoSettingsPanelProps = {
|
||||
};
|
||||
|
||||
export function VideoSettingsPanel({ config, onConfigChange, theme, showTitle = true, className = "w-[292px] space-y-3" }: VideoSettingsPanelProps) {
|
||||
const profile = modelCapabilityConfigFor(config, config.model).video!;
|
||||
if (resolveModelRequestConfig(config, config.model).interfaceType === "volcengine-jimeng-video") {
|
||||
return <JiMengVideoSettingsPanel config={config} onConfigChange={onConfigChange} theme={theme} showTitle={showTitle} className={className} />;
|
||||
return <JiMengVideoSettingsPanel config={config} profile={profile} onConfigChange={onConfigChange} theme={theme} showTitle={showTitle} className={className} />;
|
||||
}
|
||||
if (isSeedanceVideoConfig(config)) {
|
||||
return <SeedanceVideoSettingsPanel config={config} onConfigChange={onConfigChange} theme={theme} showTitle={showTitle} className={className} />;
|
||||
return <SeedanceVideoSettingsPanel config={config} profile={profile} onConfigChange={onConfigChange} theme={theme} showTitle={showTitle} className={className} />;
|
||||
}
|
||||
|
||||
const seconds = normalizeVideoDuration(config.videoSeconds);
|
||||
const secondOptions = defaultSecondOptions;
|
||||
const secondOptions = videoDurationOptions(profile);
|
||||
const durationColumns = secondOptions.length + (profile.duration.selection === "range" ? 1 : 0);
|
||||
const size = normalizeVideoSizeValue(config.size);
|
||||
const dimensions = readSizeDimensions(size);
|
||||
const resolution = normalizeVideoResolutionValue(config.vquality);
|
||||
const configuredResolutions = profile.resolutions.map((value) => ({ value: value.replace(/p$/i, ""), label: value.toUpperCase() }));
|
||||
const generateAudio = boolConfig(config.videoGenerateAudio, profile.generateAudio.default);
|
||||
const watermark = boolConfig(config.videoWatermark, profile.watermark.default);
|
||||
const updateDimension = (key: "width" | "height", value: number | null) => {
|
||||
const next = Math.max(1, Math.floor(value || dimensions[key] || 720));
|
||||
onConfigChange("size", `${key === "width" ? next : dimensions.width}x${key === "height" ? next : dimensions.height}`);
|
||||
@@ -53,7 +54,7 @@ export function VideoSettingsPanel({ config, onConfigChange, theme, showTitle =
|
||||
{showTitle ? <div className="text-sm font-semibold">视频设置</div> : null}
|
||||
<SettingGroup title="分辨率" color={theme.node.muted}>
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
{resolutionOptions.map((item) => (
|
||||
{configuredResolutions.map((item) => (
|
||||
<OptionPill key={item.value} selected={resolution === item.value} theme={theme} onClick={() => onConfigChange("vquality", item.value)}>
|
||||
{item.label}
|
||||
</OptionPill>
|
||||
@@ -67,37 +68,38 @@ export function VideoSettingsPanel({ config, onConfigChange, theme, showTitle =
|
||||
<DimensionInput prefix="H" value={dimensions.height} disabled={size === "auto"} theme={theme} onChange={(value) => updateDimension("height", value)} />
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
{sizeOptions.map((item) => (
|
||||
{profile.ratios.map((value) => (
|
||||
<button
|
||||
key={item.value}
|
||||
key={value}
|
||||
type="button"
|
||||
className="flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md px-1 text-[var(--fs-label)] font-medium transition-colors hover:brightness-110 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1"
|
||||
style={{ background: size === item.value ? theme.toolbar.activeBg : "transparent", color: theme.node.text, outlineColor: theme.node.muted }}
|
||||
style={{ background: normalizeRatioValue(config.size) === value ? theme.toolbar.activeBg : "transparent", color: theme.node.text, outlineColor: theme.node.muted }}
|
||||
onMouseDown={(event) => event.stopPropagation()}
|
||||
onClick={() => onConfigChange("size", item.value)}
|
||||
onClick={() => onConfigChange("size", value)}
|
||||
>
|
||||
<SizePreview width={item.width} height={item.height} color={theme.node.text} />
|
||||
<span>{item.label}</span>
|
||||
<SizePreview width={ratioPreview(value).width} height={ratioPreview(value).height} color={theme.node.text} />
|
||||
<span>{value}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</SettingGroup>
|
||||
<SettingGroup title="秒数" color={theme.node.muted}>
|
||||
<div className="grid gap-1.5" style={{ gridTemplateColumns: `repeat(${secondOptions.length}, minmax(0, 1fr)) 72px` }}>
|
||||
<div className="grid gap-1.5" style={{ gridTemplateColumns: `repeat(${durationColumns}, minmax(0, 1fr))` }}>
|
||||
{secondOptions.map((value) => (
|
||||
<OptionPill key={value} selected={seconds === String(value)} theme={theme} onClick={() => onConfigChange("videoSeconds", String(value))}>
|
||||
{value}s
|
||||
</OptionPill>
|
||||
))}
|
||||
<DurationInput value={Number(seconds)} min={VIDEO_DURATION_MIN} theme={theme} onChange={(value) => onConfigChange("videoSeconds", String(value))} />
|
||||
{profile.duration.selection === "range" ? <DurationInput value={Number(seconds)} min={profile.duration.min || VIDEO_DURATION_MIN} max={profile.duration.max} theme={theme} onChange={(value) => onConfigChange("videoSeconds", String(value))} /> : null}
|
||||
</div>
|
||||
</SettingGroup>
|
||||
{profile.generateAudio.supported || profile.watermark.supported ? <SettingGroup title="输出" color={theme.node.muted}><div className="grid grid-cols-2 gap-3 rounded-md px-2" style={{ background: theme.toolbar.itemHover }}>{profile.generateAudio.supported ? <SwitchRow label="生成声音" checked={generateAudio} theme={theme} onChange={(checked) => onConfigChange("videoGenerateAudio", String(checked))} /> : null}{profile.watermark.supported ? <SwitchRow label="添加水印" checked={watermark} theme={theme} onChange={(checked) => onConfigChange("videoWatermark", String(checked))} /> : null}</div></SettingGroup> : null}
|
||||
</div>
|
||||
</ImageSettingsTheme>
|
||||
);
|
||||
}
|
||||
|
||||
function JiMengVideoSettingsPanel({ config, onConfigChange, theme, showTitle, className }: VideoSettingsPanelProps) {
|
||||
function JiMengVideoSettingsPanel({ config, profile, onConfigChange, theme, showTitle, className }: VideoSettingsPanelProps & { profile: VideoCapabilityConfig }) {
|
||||
const seconds = normalizeVideoDuration(config.videoSeconds);
|
||||
return (
|
||||
<ImageSettingsTheme theme={theme}>
|
||||
@@ -105,12 +107,12 @@ function JiMengVideoSettingsPanel({ config, onConfigChange, theme, showTitle, cl
|
||||
{showTitle ? <div className="text-sm font-semibold">视频设置</div> : null}
|
||||
<SettingGroup title="比例" color={theme.node.muted}>
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
{jiMengRatioOptions.map((value) => <OptionPill key={value} selected={config.size === value} theme={theme} onClick={() => onConfigChange("size", value)}>{value}</OptionPill>)}
|
||||
{profile.ratios.map((value) => <OptionPill key={value} selected={config.size === value} theme={theme} onClick={() => onConfigChange("size", value)}>{value}</OptionPill>)}
|
||||
</div>
|
||||
</SettingGroup>
|
||||
<SettingGroup title="秒数" color={theme.node.muted}>
|
||||
<div className="grid grid-cols-2 gap-1.5">
|
||||
{[5, 10].map((value) => <OptionPill key={value} selected={seconds === String(value)} theme={theme} onClick={() => onConfigChange("videoSeconds", String(value))}>{value}s</OptionPill>)}
|
||||
{videoDurationOptions(profile).map((value) => <OptionPill key={value} selected={seconds === String(value)} theme={theme} onClick={() => onConfigChange("videoSeconds", String(value))}>{value}s</OptionPill>)}
|
||||
</div>
|
||||
</SettingGroup>
|
||||
</div>
|
||||
@@ -118,13 +120,15 @@ function JiMengVideoSettingsPanel({ config, onConfigChange, theme, showTitle, cl
|
||||
);
|
||||
}
|
||||
|
||||
function SeedanceVideoSettingsPanel({ config, onConfigChange, theme, showTitle, className }: VideoSettingsPanelProps) {
|
||||
function SeedanceVideoSettingsPanel({ config, profile, onConfigChange, theme, showTitle, className }: VideoSettingsPanelProps & { profile: VideoCapabilityConfig }) {
|
||||
const model = modelOptionName(config.model || config.videoModel);
|
||||
const resolution = normalizeSeedanceResolution(config.vquality, model);
|
||||
const ratio = normalizeSeedanceRatio(config.size);
|
||||
const duration = normalizeSeedanceDuration(config.videoSeconds);
|
||||
const generateAudio = boolConfig(config.videoGenerateAudio, true);
|
||||
const watermark = boolConfig(config.videoWatermark, false);
|
||||
const generateAudio = boolConfig(config.videoGenerateAudio, profile.generateAudio.default);
|
||||
const watermark = boolConfig(config.videoWatermark, profile.watermark.default);
|
||||
const durationOptions = videoDurationOptions(profile);
|
||||
const durationColumns = durationOptions.length + (profile.duration.selection === "range" ? 1 : 0);
|
||||
|
||||
return (
|
||||
<ImageSettingsTheme theme={theme}>
|
||||
@@ -132,7 +136,8 @@ function SeedanceVideoSettingsPanel({ config, onConfigChange, theme, showTitle,
|
||||
{showTitle ? <div className="text-sm font-semibold">视频设置</div> : null}
|
||||
<SettingGroup title="分辨率" color={theme.node.muted}>
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
{seedanceResolutionOptions.map((item) => {
|
||||
{profile.resolutions.map((value) => {
|
||||
const item = { value, label: value.toUpperCase() };
|
||||
const disabled = item.value === "1080p" && isSeedanceFastModel(model);
|
||||
return (
|
||||
<OptionPill key={item.value} selected={resolution === item.value} disabled={disabled} theme={theme} onClick={() => onConfigChange("vquality", item.value)}>
|
||||
@@ -145,7 +150,9 @@ function SeedanceVideoSettingsPanel({ config, onConfigChange, theme, showTitle,
|
||||
</SettingGroup>
|
||||
<SettingGroup title="比例" color={theme.node.muted}>
|
||||
<div className="grid grid-cols-4 gap-1.5">
|
||||
{seedanceRatioOptions.map((item) => (
|
||||
{profile.ratios.map((value) => {
|
||||
const item = { value, label: value };
|
||||
return (
|
||||
<button
|
||||
key={item.value}
|
||||
type="button"
|
||||
@@ -159,23 +166,24 @@ function SeedanceVideoSettingsPanel({ config, onConfigChange, theme, showTitle,
|
||||
</span>
|
||||
<span className="whitespace-nowrap">{item.label}</span>
|
||||
</button>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</SettingGroup>
|
||||
<SettingGroup title="时长" color={theme.node.muted}>
|
||||
<div className="grid grid-cols-[repeat(4,minmax(0,1fr))_72px] gap-1.5">
|
||||
{seedanceDurationOptions.map((value) => (
|
||||
<div className="grid gap-1.5" style={{ gridTemplateColumns: `repeat(${durationColumns}, minmax(0, 1fr))` }}>
|
||||
{durationOptions.map((value) => (
|
||||
<OptionPill key={value} selected={duration === value} theme={theme} onClick={() => onConfigChange("videoSeconds", String(value))}>
|
||||
{value}s
|
||||
</OptionPill>
|
||||
))}
|
||||
<DurationInput value={duration} min={VIDEO_DURATION_MIN} theme={theme} onChange={(value) => onConfigChange("videoSeconds", String(value))} />
|
||||
{profile.duration.selection === "range" ? <DurationInput value={duration} min={profile.duration.min || VIDEO_DURATION_MIN} max={profile.duration.max} theme={theme} onChange={(value) => onConfigChange("videoSeconds", String(value))} /> : null}
|
||||
</div>
|
||||
</SettingGroup>
|
||||
<SettingGroup title="输出" color={theme.node.muted}>
|
||||
<div className="grid grid-cols-2 gap-3 rounded-md px-2" style={{ background: theme.toolbar.itemHover }}>
|
||||
<SwitchRow label="生成声音" checked={generateAudio} theme={theme} onChange={(checked) => onConfigChange("videoGenerateAudio", String(checked))} />
|
||||
<SwitchRow label="添加水印" checked={watermark} theme={theme} onChange={(checked) => onConfigChange("videoWatermark", String(checked))} />
|
||||
{profile.generateAudio.supported ? <SwitchRow label="生成声音" checked={generateAudio} theme={theme} onChange={(checked) => onConfigChange("videoGenerateAudio", String(checked))} /> : null}
|
||||
{profile.watermark.supported ? <SwitchRow label="添加水印" checked={watermark} theme={theme} onChange={(checked) => onConfigChange("videoWatermark", String(checked))} /> : null}
|
||||
</div>
|
||||
</SettingGroup>
|
||||
</div>
|
||||
@@ -239,9 +247,9 @@ function DimensionInput({ prefix, value, disabled, theme, onChange }: { prefix:
|
||||
);
|
||||
}
|
||||
|
||||
function DurationInput({ value, min, theme, onChange }: { value: number; min: number; theme: CanvasTheme; onChange: (value: number) => void }) {
|
||||
function DurationInput({ value, min, max, theme, onChange }: { value: number; min: number; max?: number; theme: CanvasTheme; onChange: (value: number) => void }) {
|
||||
const commit = (input: HTMLInputElement) => {
|
||||
const next = Math.max(min, Math.floor(Number(input.value) || value || min));
|
||||
const next = Math.min(max || Number.POSITIVE_INFINITY, Math.max(min, Math.floor(Number(input.value) || value || min)));
|
||||
input.value = String(next);
|
||||
onChange(next);
|
||||
};
|
||||
@@ -253,6 +261,7 @@ function DurationInput({ value, min, theme, onChange }: { value: number; min: nu
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
min={min}
|
||||
max={max}
|
||||
defaultValue={value}
|
||||
aria-label="视频时长（秒）"
|
||||
className="min-w-0 flex-1 bg-transparent pl-2 text-right outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
|
||||
@@ -303,3 +312,9 @@ function readSizeDimensions(size: string) {
|
||||
const match = size.match(/^(\d+)x(\d+)$/);
|
||||
return { width: Number(match?.[1]) || 1280, height: Number(match?.[2]) || 720 };
|
||||
}
|
||||
|
||||
function normalizeRatioValue(value: string) {
|
||||
const match = String(value || "").match(/^(\d+(?:\.\d+)?)x(\d+(?:\.\d+)?)$/);
|
||||
if (!match) return value;
|
||||
return `${match[1]}:${match[2]}`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user