844 lines
37 KiB
TypeScript
844 lines
37 KiB
TypeScript
import { useEffect, useMemo, useState, type ReactNode } from 'react';
|
||
import { Brain, Image, ListChecks, Plus, Trash2, Video } from 'lucide-react';
|
||
import { Button, Checkbox, Input, Select } from '../../components/ui';
|
||
import {
|
||
addCapabilityType,
|
||
defaultCapabilityConfig,
|
||
modelTypeGroup,
|
||
modelTypeLabel,
|
||
removeCapabilityType,
|
||
updateCapabilityConfig,
|
||
type CapabilityEditorState,
|
||
} from './base-model-capabilities';
|
||
|
||
type FieldType =
|
||
| 'boolean'
|
||
| 'number'
|
||
| 'text'
|
||
| 'list'
|
||
| 'numberList'
|
||
| 'range'
|
||
| 'ratioRange'
|
||
| 'scopedList'
|
||
| 'scopedNumberList'
|
||
| 'scopedRange'
|
||
| 'scopedNumber';
|
||
|
||
type FieldScope = 'mode' | 'resolution' | 'mixed';
|
||
|
||
type FieldDefinition = {
|
||
key: string;
|
||
label: string;
|
||
hint?: string;
|
||
placeholder?: string;
|
||
type: FieldType;
|
||
scope?: FieldScope;
|
||
};
|
||
|
||
type ValueOption = { label: string; value: string };
|
||
|
||
const textFields: FieldDefinition[] = [
|
||
{ key: 'supportTool', label: '工具调用', hint: 'function calling / tools', type: 'boolean' },
|
||
{ key: 'supportStructuredOutput', label: '结构化输出', hint: 'JSON Schema 等输出', type: 'boolean' },
|
||
{ key: 'supportThinking', label: '推理能力', hint: '支持 reasoning / thinking 参数', type: 'boolean' },
|
||
{ key: 'supportThinkingModeSwitch', label: '思考开关', hint: '可按请求切换', type: 'boolean' },
|
||
{ key: 'supportWebSearch', label: '联网搜索', type: 'boolean' },
|
||
{ key: 'max_context_tokens', label: '上下文 Token', placeholder: '128000', type: 'number' },
|
||
{ key: 'max_input_tokens', label: '最大输入 Token', placeholder: '64000', type: 'number' },
|
||
{ key: 'max_output_tokens', label: '最大输出 Token', placeholder: '8192', type: 'number' },
|
||
{ key: 'max_thinking_tokens', label: '最大思考 Token', placeholder: '32768', type: 'number' },
|
||
{ key: 'thinkingEffortLevels', label: '推理深度', hint: '声明模型支持的 reasoning_effort 取值，可填写 max 等供应商自定义值', placeholder: 'none, minimal, low, medium, high, xhigh, max', type: 'list' },
|
||
];
|
||
|
||
const embeddingFields: FieldDefinition[] = [
|
||
{ key: 'dimensions', label: '向量维度', placeholder: '1024, 768, 512', type: 'numberList' },
|
||
];
|
||
|
||
const imageFields: FieldDefinition[] = [
|
||
{ key: 'support_base64_input', label: 'Base64 输入', type: 'boolean' },
|
||
{ key: 'support_url_input', label: 'URL 输入', type: 'boolean' },
|
||
{ key: 'input_multiple_images', label: '多图输入', type: 'boolean' },
|
||
{ key: 'input_max_images_count', label: '最多输入图片', placeholder: '10', type: 'number' },
|
||
{ key: 'output_multiple_images', label: '多图输出', type: 'boolean' },
|
||
{ key: 'output_max_images_count', label: '最多输出图片', placeholder: '4', type: 'number' },
|
||
{ key: 'output_resolutions', label: '输出分辨率', placeholder: '1K, 2K, 4K', type: 'list' },
|
||
{ key: 'output_max_size', label: '最大输出尺寸', placeholder: '16777216', type: 'number' },
|
||
{ key: 'aspect_ratio_allowed', label: '支持宽高比', placeholder: '16:9, 1:1, 9:16', type: 'list' },
|
||
{ key: 'aspect_ratio_range', label: '宽高比范围', hint: '按宽/高数值限制，如 0.125 - 8', placeholder: '0.125 - 8', type: 'ratioRange' },
|
||
];
|
||
|
||
const videoFields: FieldDefinition[] = [
|
||
{ key: 'support_base64_input', label: 'Base64 输入', type: 'boolean' },
|
||
{ key: 'support_url_input', label: 'URL 输入', type: 'boolean' },
|
||
{ key: 'output_resolutions', label: '输出分辨率', hint: '可直接配置，也可按首帧/首尾帧等模式配置', placeholder: '720p, 1080p', type: 'scopedList', scope: 'mode' },
|
||
{ key: 'aspect_ratio_allowed', label: '支持宽高比', hint: '支持按分辨率配置可选宽高比', placeholder: '16:9, 9:16, 1:1', type: 'scopedList', scope: 'resolution' },
|
||
{ key: 'aspect_ratio_range', label: '宽高比范围', hint: '按宽/高数值限制，如 0.125 - 8', placeholder: '0.125 - 8', type: 'ratioRange' },
|
||
{ key: 'duration_range', label: '时长范围', hint: '支持按分辨率或模式配置不同范围', placeholder: '5 - 10', type: 'scopedRange', scope: 'mixed' },
|
||
{ key: 'duration_options', label: '可选时长', hint: '与时长范围二选一；只允许这些秒数', placeholder: '5, 10', type: 'scopedNumberList', scope: 'mixed' },
|
||
{ key: 'duration_step', label: '时长间隔', hint: '自定义时长按该秒数递增或取整', placeholder: '1', type: 'scopedNumber', scope: 'mixed' },
|
||
{ key: 'input_audio', label: '音频输入', type: 'boolean' },
|
||
{ key: 'output_audio', label: '输出音频', type: 'boolean' },
|
||
{ key: 'output_bgm', label: '背景音乐', type: 'boolean' },
|
||
{ key: 'input_first_frame', label: '首帧输入', type: 'boolean' },
|
||
{ key: 'input_last_frame', label: '尾帧输入', type: 'boolean' },
|
||
{ key: 'input_first_last_frame', label: '首尾帧模式', type: 'boolean' },
|
||
{ key: 'input_reference_generate_single', label: '单参考图', type: 'boolean' },
|
||
{ key: 'input_reference_generate_multiple', label: '多参考图', type: 'boolean' },
|
||
{ key: 'input_smart_multi_frame', label: '智能多帧', type: 'boolean' },
|
||
{ key: 'smart_multi_frame_range', label: '智能多帧数量', placeholder: '2 - 9', type: 'range' },
|
||
{ key: 'smart_multi_frame_mode', label: '智能多帧模式', placeholder: 'native 或 stitch', type: 'text' },
|
||
{ key: 'smart_multi_frame_duration_range', label: '智能多帧每段时长', placeholder: '2 - 7', type: 'range' },
|
||
{ key: 'support_video_effect_template', label: '视频特效模板', type: 'boolean' },
|
||
{ key: 'supported_modes', label: '支持模式', placeholder: 'text_to_video, image_reference', type: 'list' },
|
||
{ key: 'max_videos', label: '最多视频', placeholder: '1', type: 'number' },
|
||
{ key: 'max_images', label: '最多图片', placeholder: '4', type: 'number' },
|
||
{ key: 'max_audios', label: '最多音频', placeholder: '1', type: 'number' },
|
||
{ key: 'max_elements', label: '最多主体', placeholder: '4', type: 'number' },
|
||
{ key: 'max_images_and_elements', label: '图片主体合计', placeholder: '4', type: 'number' },
|
||
{ key: 'support_instruction_edit', label: '指令编辑', type: 'boolean' },
|
||
];
|
||
|
||
const model3dFields: FieldDefinition[] = [
|
||
{ key: 'support_texture', label: '纹理生成', type: 'boolean' },
|
||
{ key: 'support_part_generation', label: '分部生成', type: 'boolean' },
|
||
{ key: 'support_image_autofix', label: '图片自动优化', type: 'boolean' },
|
||
{ key: 'support_quad', label: '四边面输出', type: 'boolean' },
|
||
{ key: 'support_smart_low_poly', label: '智能低模', type: 'boolean' },
|
||
{ key: 'geometry_quality_options', label: '几何质量', placeholder: 'standard, detailed', type: 'list' },
|
||
{ key: 'max_face_limit', label: '三角面上限', placeholder: '20000', type: 'number' },
|
||
{ key: 'max_face_limit_quad', label: '四边面上限', placeholder: '10000', type: 'number' },
|
||
];
|
||
|
||
export function BaseModelCapabilityEditor(props: {
|
||
modelType: string;
|
||
typeOptions: string[];
|
||
value: CapabilityEditorState;
|
||
onChange: (value: CapabilityEditorState) => void;
|
||
}) {
|
||
const enabledTypes = props.value.types;
|
||
const [activeType, setActiveType] = useState(enabledTypes[0] ?? props.modelType);
|
||
const [pendingType, setPendingType] = useState('');
|
||
const availableTypes = useMemo(
|
||
() => Array.from(new Set([props.modelType, ...props.typeOptions].filter(Boolean))),
|
||
[props.modelType, props.typeOptions],
|
||
);
|
||
const addableTypes = availableTypes.filter((type) => !enabledTypes.includes(type));
|
||
const activeConfig = props.value.typeConfigs[activeType] ?? defaultCapabilityConfig(activeType);
|
||
const fieldGroups = capabilityFieldGroups(activeType);
|
||
const capabilitySummary = useMemo(
|
||
() => summarizeEnabledCapabilities(enabledTypes, props.value.typeConfigs),
|
||
[enabledTypes, props.value.typeConfigs],
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (!enabledTypes.includes(activeType)) setActiveType(enabledTypes[0] ?? props.modelType);
|
||
}, [activeType, enabledTypes, props.modelType]);
|
||
|
||
function addType() {
|
||
const nextType = pendingType || addableTypes[0];
|
||
if (!nextType) return;
|
||
props.onChange(addCapabilityType(props.value, nextType));
|
||
setActiveType(nextType);
|
||
setPendingType('');
|
||
}
|
||
|
||
function removeType(type: string) {
|
||
const next = removeCapabilityType(props.value, type);
|
||
props.onChange(next);
|
||
setActiveType(next.types[0] ?? props.modelType);
|
||
}
|
||
|
||
function patchConfig(key: string, value: unknown) {
|
||
const nextConfig = { ...activeConfig };
|
||
if (value === undefined) delete nextConfig[key];
|
||
else nextConfig[key] = value;
|
||
const exclusiveKey = exclusiveCapabilityFields[key];
|
||
if (exclusiveKey && hasMeaningfulValue(value)) delete nextConfig[exclusiveKey];
|
||
props.onChange(updateCapabilityConfig(props.value, activeType, sanitizeCapabilityConfig(nextConfig)));
|
||
}
|
||
|
||
return (
|
||
<section className="baseCapabilityEditor spanTwo bg-card text-foreground">
|
||
<header>
|
||
<div>
|
||
<strong>模型能力</strong>
|
||
<span>左侧维护已启用能力，右侧编辑该能力的默认配置。</span>
|
||
</div>
|
||
</header>
|
||
|
||
<div className="capabilityWorkbench">
|
||
<aside className="capabilitySidebar">
|
||
<div className="capabilitySidebarTitle">
|
||
<ListChecks size={15} />
|
||
<strong>已启用能力</strong>
|
||
</div>
|
||
<div className="capabilityList">
|
||
{enabledTypes.map((type) => (
|
||
<button className="capabilityListItem" data-active={type === activeType} key={type} type="button" onClick={() => setActiveType(type)}>
|
||
<span>
|
||
<strong>{modelTypeLabel(type)}</strong>
|
||
<small>{modelTypeGroup(type)} / {type}</small>
|
||
</span>
|
||
{enabledTypes.length > 1 && (
|
||
<Trash2
|
||
size={14}
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
removeType(type);
|
||
}}
|
||
/>
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="capabilityAddBox">
|
||
<Select size="sm" value={pendingType} onChange={(event) => setPendingType(event.target.value)}>
|
||
<option value="">{addableTypes.length ? '选择要添加的能力' : '没有可添加能力'}</option>
|
||
{addableTypes.map((type) => <option key={type} value={type}>{modelTypeLabel(type)} / {type}</option>)}
|
||
</Select>
|
||
<Button size="sm" type="button" variant="outline" disabled={!addableTypes.length} onClick={addType}>
|
||
<Plus size={14} />
|
||
添加能力
|
||
</Button>
|
||
</div>
|
||
<div className="capabilitySummary">
|
||
<strong>能力总结</strong>
|
||
<p>{capabilitySummary}</p>
|
||
</div>
|
||
</aside>
|
||
|
||
<div className="capabilityFormPanel">
|
||
{fieldGroups.length ? (
|
||
fieldGroups.map((group) => (
|
||
<CapabilityFormGroup key={group.title} icon={group.icon} title={group.title}>
|
||
{group.fields.map((field) => (
|
||
<CapabilityFormRow
|
||
key={field.key}
|
||
config={activeConfig}
|
||
defaultConfig={defaultCapabilityConfig(activeType)}
|
||
field={field}
|
||
onChange={(value) => patchConfig(field.key, value)}
|
||
/>
|
||
))}
|
||
</CapabilityFormGroup>
|
||
))
|
||
) : (
|
||
<div className="capabilityPreserveNote">
|
||
<strong>当前能力暂无通用表单</strong>
|
||
<span>仍会保存该能力条目，并保留原始能力字段；后续可按平台专属能力继续扩展。</span>
|
||
</div>
|
||
)}
|
||
|
||
<CapabilityFormGroup icon={<Brain size={15} />} title="保留字段">
|
||
<div className="capabilityPreserveNote">
|
||
<strong>{preservedConfigCount(activeConfig, fieldGroups)} 个未展示字段</strong>
|
||
<span>这些字段保存时会继续保留在 {activeType} 能力配置内。</span>
|
||
</div>
|
||
</CapabilityFormGroup>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function CapabilityFormGroup(props: { children: ReactNode; icon: ReactNode; title: string }) {
|
||
return (
|
||
<section className="capabilityFormGroup">
|
||
<header>
|
||
{props.icon}
|
||
<strong>{props.title}</strong>
|
||
</header>
|
||
<div className="capabilityFormRows">{props.children}</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function CapabilityFormRow(props: {
|
||
config: Record<string, unknown>;
|
||
defaultConfig: Record<string, unknown>;
|
||
field: FieldDefinition;
|
||
onChange: (value: unknown) => void;
|
||
}) {
|
||
const value = props.config[props.field.key];
|
||
return (
|
||
<div className="capabilityFormRow">
|
||
<div>
|
||
<strong>{props.field.label}</strong>
|
||
{props.field.hint && <small title={props.field.hint}>{props.field.hint}</small>}
|
||
</div>
|
||
<FieldControl
|
||
config={props.config}
|
||
defaultValue={props.defaultConfig[props.field.key]}
|
||
field={props.field}
|
||
value={value}
|
||
onChange={props.onChange}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function FieldControl(props: {
|
||
config: Record<string, unknown>;
|
||
defaultValue: unknown;
|
||
field: FieldDefinition;
|
||
value: unknown;
|
||
onChange: (value: unknown) => void;
|
||
}) {
|
||
if (props.field.type === 'boolean') {
|
||
return <BooleanFieldControl defaultText={booleanDefaultText(props.field, props.defaultValue)} value={props.value} onChange={props.onChange} />;
|
||
}
|
||
if (props.field.type === 'range') {
|
||
const range = Array.isArray(props.value) ? props.value : [];
|
||
return (
|
||
<div className="capabilityRange">
|
||
<Input size="sm" min="0" step="1" type="number" value={stringValue(range[0])} placeholder="最小" onChange={(event) => props.onChange([numberValue(event.target.value), numberValue(range[1])])} />
|
||
<Input size="sm" min="0" step="1" type="number" value={stringValue(range[1])} placeholder="最大" onChange={(event) => props.onChange([numberValue(range[0]), numberValue(event.target.value)])} />
|
||
</div>
|
||
);
|
||
}
|
||
if (props.field.type === 'ratioRange') {
|
||
const range = Array.isArray(props.value) ? props.value : [];
|
||
return (
|
||
<div className="capabilityRange">
|
||
<Input size="sm" min="0" step="0.001" type="number" value={stringValue(range[0])} placeholder="最小宽/高" onChange={(event) => props.onChange([numberValue(event.target.value), numberValue(range[1])])} />
|
||
<Input size="sm" min="0" step="0.001" type="number" value={stringValue(range[1])} placeholder="最大宽/高" onChange={(event) => props.onChange([numberValue(range[0]), numberValue(event.target.value)])} />
|
||
</div>
|
||
);
|
||
}
|
||
if (props.field.type === 'number') {
|
||
return <Input size="sm" min="0" step="1" type="number" value={stringValue(props.value)} placeholder={props.field.placeholder} onChange={(event) => props.onChange(numberValue(event.target.value))} />;
|
||
}
|
||
if (isScopedField(props.field)) {
|
||
return <ScopedFieldControl field={props.field} value={props.value} config={props.config} onChange={props.onChange} />;
|
||
}
|
||
if (props.field.type === 'text') {
|
||
return <Input size="sm" value={stringValue(props.value)} placeholder={props.field.placeholder} onChange={(event) => props.onChange(event.target.value)} />;
|
||
}
|
||
return <MultiValueControl config={props.config} field={props.field} value={props.value} onChange={props.onChange} />;
|
||
}
|
||
|
||
function BooleanFieldControl(props: {
|
||
defaultText: string;
|
||
onChange: (value: unknown) => void;
|
||
value: unknown;
|
||
}) {
|
||
return (
|
||
<Select
|
||
className="capabilityBooleanSelect"
|
||
size="sm"
|
||
value={booleanSelectValue(props.value)}
|
||
onChange={(event) => props.onChange(booleanValueFromSelect(event.target.value))}
|
||
>
|
||
<option value="unset">未设置（{props.defaultText}）</option>
|
||
<option value="true">支持</option>
|
||
<option value="false">不支持</option>
|
||
</Select>
|
||
);
|
||
}
|
||
|
||
function ScopedFieldControl(props: {
|
||
config: Record<string, unknown>;
|
||
field: FieldDefinition;
|
||
value: unknown;
|
||
onChange: (value: unknown) => void;
|
||
}) {
|
||
const grouped = isPlainRecord(props.value);
|
||
const directValue = grouped ? defaultDirectValue(props.field) : props.value;
|
||
const scopeOptions = scopeOptionsForField(props.field, props.config, props.value);
|
||
const entries = grouped ? Object.entries(props.value as Record<string, unknown>) : [];
|
||
const canGroup = scopeOptions.length > 0 || entries.length > 0;
|
||
|
||
function switchMode(nextGrouped: boolean) {
|
||
if (nextGrouped === grouped) return;
|
||
if (!nextGrouped) {
|
||
props.onChange(entries[0]?.[1] ?? defaultDirectValue(props.field));
|
||
return;
|
||
}
|
||
const firstKey = firstAvailableScopeKey(scopeOptions, []);
|
||
props.onChange({ [firstKey]: normalizeScopedValue(props.field, props.value) });
|
||
}
|
||
|
||
function setEntryKey(oldKey: string, nextKey: string) {
|
||
if (!nextKey || !grouped) return;
|
||
const next = { ...(props.value as Record<string, unknown>) };
|
||
const current = next[oldKey];
|
||
delete next[oldKey];
|
||
next[nextKey] = current;
|
||
props.onChange(next);
|
||
}
|
||
|
||
function setEntryValue(key: string, nextValue: unknown) {
|
||
props.onChange({ ...(props.value as Record<string, unknown>), [key]: nextValue });
|
||
}
|
||
|
||
function removeEntry(key: string) {
|
||
const next = { ...(props.value as Record<string, unknown>) };
|
||
delete next[key];
|
||
props.onChange(Object.keys(next).length ? next : defaultDirectValue(props.field));
|
||
}
|
||
|
||
function addEntry() {
|
||
const used = entries.map(([key]) => key);
|
||
const nextKey = firstAvailableScopeKey(scopeOptions, used);
|
||
const current = grouped ? (props.value as Record<string, unknown>) : {};
|
||
props.onChange({ ...current, [nextKey]: defaultDirectValue(props.field) });
|
||
}
|
||
|
||
return (
|
||
<div className="capabilityScopedControl">
|
||
<div className="capabilitySegmented" role="tablist" aria-label={`${props.field.label}配置方式`}>
|
||
<button type="button" data-active={!grouped} onClick={() => switchMode(false)}>统一配置</button>
|
||
<button type="button" disabled={!canGroup} data-active={grouped} onClick={() => switchMode(true)}>条件分组</button>
|
||
</div>
|
||
|
||
{!grouped ? (
|
||
<ScopedValueInput config={props.config} field={props.field} value={directValue} placeholder={props.field.placeholder} onChange={props.onChange} />
|
||
) : (
|
||
<div className="capabilityScopedRows">
|
||
{entries.map(([key, value]) => (
|
||
<div className="capabilityScopedRow" key={key}>
|
||
<Select size="sm" value={key} onChange={(event) => setEntryKey(key, event.target.value)}>
|
||
{ensureScopeOption(scopeOptions, key).map((option) => (
|
||
<option key={option.value} value={option.value}>{option.label}</option>
|
||
))}
|
||
</Select>
|
||
<ScopedValueInput config={props.config} field={props.field} value={value} placeholder={props.field.placeholder} onChange={(nextValue) => setEntryValue(key, nextValue)} />
|
||
<Button type="button" size="icon" variant="ghost" aria-label="删除条件" onClick={() => removeEntry(key)}>
|
||
<Trash2 size={14} />
|
||
</Button>
|
||
</div>
|
||
))}
|
||
<Button type="button" size="sm" variant="outline" onClick={addEntry}>
|
||
<Plus size={14} />
|
||
添加条件
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ScopedValueInput(props: {
|
||
config: Record<string, unknown>;
|
||
field: FieldDefinition;
|
||
onChange: (value: unknown) => void;
|
||
placeholder?: string;
|
||
value: unknown;
|
||
}) {
|
||
if (props.field.type === 'scopedRange') {
|
||
const range = Array.isArray(props.value) ? props.value : [];
|
||
return (
|
||
<div className="capabilityRange">
|
||
<Input size="sm" min="0" step="1" type="number" value={stringValue(range[0])} placeholder="最小" onChange={(event) => props.onChange([numberValue(event.target.value), numberValue(range[1])])} />
|
||
<Input size="sm" min="0" step="1" type="number" value={stringValue(range[1])} placeholder="最大" onChange={(event) => props.onChange([numberValue(range[0]), numberValue(event.target.value)])} />
|
||
</div>
|
||
);
|
||
}
|
||
if (props.field.type === 'scopedNumber') {
|
||
return <Input size="sm" min="0" step="1" type="number" value={stringValue(props.value)} placeholder={props.placeholder} onChange={(event) => props.onChange(numberValue(event.target.value))} />;
|
||
}
|
||
return <MultiValueControl config={props.config} field={props.field} value={props.value} onChange={props.onChange} />;
|
||
}
|
||
|
||
function MultiValueControl(props: {
|
||
config: Record<string, unknown>;
|
||
field: FieldDefinition;
|
||
onChange: (value: unknown) => void;
|
||
value: unknown;
|
||
}) {
|
||
const [customValue, setCustomValue] = useState('');
|
||
const selected = valueArray(props.value);
|
||
const options = multiOptionsForField(props.field, props.config, props.value);
|
||
const selectedSet = new Set(selected);
|
||
|
||
function emit(nextValues: string[]) {
|
||
const values = uniqueStrings(nextValues);
|
||
props.onChange(isNumberListField(props.field) ? values.map(Number).filter(Number.isFinite) : values);
|
||
}
|
||
|
||
function toggle(value: string) {
|
||
emit(selectedSet.has(value) ? selected.filter((item) => item !== value) : [...selected, value]);
|
||
}
|
||
|
||
function addCustom() {
|
||
const values = customValue.split(/[,，]/).map((item) => item.trim()).filter(Boolean);
|
||
if (!values.length) return;
|
||
emit([...selected, ...values]);
|
||
setCustomValue('');
|
||
}
|
||
|
||
return (
|
||
<div className="capabilityMultiValue">
|
||
<div className="capabilityMultiOptions">
|
||
{options.map((option) => (
|
||
<label key={option.value} className="capabilityCheckboxOption">
|
||
<Checkbox
|
||
checked={selectedSet.has(option.value)}
|
||
onCheckedChange={() => toggle(option.value)}
|
||
/>
|
||
{option.label}
|
||
</label>
|
||
))}
|
||
</div>
|
||
<div className="capabilityCustomValue">
|
||
<Input
|
||
size="sm"
|
||
value={customValue}
|
||
placeholder={props.field.placeholder ? `自定义：${props.field.placeholder}` : '自定义值'}
|
||
onChange={(event) => setCustomValue(event.target.value)}
|
||
onKeyDown={(event) => {
|
||
if (event.key === 'Enter') {
|
||
event.preventDefault();
|
||
addCustom();
|
||
}
|
||
}}
|
||
/>
|
||
<Button className="capabilityAddValueButton" type="button" size="sm" variant="outline" onClick={addCustom}>添加</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
type ScopeOption = { label: string; requires?: string; value: string };
|
||
|
||
const modeScopeOptions: ScopeOption[] = [
|
||
{ value: 'input_first_frame', label: '首帧模式 (input_first_frame)', requires: 'input_first_frame' },
|
||
{ value: 'input_first_last_frame', label: '首尾帧模式 (input_first_last_frame)', requires: 'input_first_last_frame' },
|
||
{ value: 'input_last_frame', label: '尾帧模式 (input_last_frame)', requires: 'input_last_frame' },
|
||
{ value: 'input_smart_multi_frame', label: '智能多帧 (input_smart_multi_frame)', requires: 'input_smart_multi_frame' },
|
||
];
|
||
|
||
const videoResolutionOptions = ['480p', '720p', '1080p', '1440p', '2160p'];
|
||
const imageResolutionOptions = ['1K', '2K', '3K', '4K', '8K'];
|
||
const videoAspectRatioOptions = ['adaptive', '16:9', '9:16', '1:1', '4:3', '3:4'];
|
||
const imageAspectRatioOptions = [
|
||
'adaptive',
|
||
'1:1',
|
||
'16:9',
|
||
'9:16',
|
||
'4:3',
|
||
'3:4',
|
||
'3:2',
|
||
'2:3',
|
||
'5:4',
|
||
'4:5',
|
||
'5:3',
|
||
'3:5',
|
||
'21:9',
|
||
'9:21',
|
||
'2:1',
|
||
'1:2',
|
||
'4:1',
|
||
'1:4',
|
||
'8:1',
|
||
'1:8',
|
||
'7:4',
|
||
'4:7',
|
||
];
|
||
const thinkingEffortOptions = ['none', 'minimal', 'low', 'medium', 'high', 'xhigh', 'max'];
|
||
const omniVideoModeOptions = ['text_to_video', 'image_reference', 'element_reference', 'first_last_frame', 'video_reference', 'video_edit', 'multi_shot'];
|
||
const durationOptionValues = ['1', '2', '3', '4', '5', '6', '8', '10', '15', '20', '25', '30'];
|
||
const exclusiveCapabilityFields: Record<string, string> = {
|
||
duration_range: 'duration_options',
|
||
duration_options: 'duration_range',
|
||
};
|
||
|
||
function isScopedField(field: FieldDefinition) {
|
||
return field.type === 'scopedList' || field.type === 'scopedNumberList' || field.type === 'scopedRange' || field.type === 'scopedNumber';
|
||
}
|
||
|
||
function scopeOptionsForField(field: FieldDefinition, config: Record<string, unknown>, value: unknown): ScopeOption[] {
|
||
const options: ScopeOption[] = [];
|
||
if (field.scope === 'mode' || field.scope === 'mixed') {
|
||
options.push(...modeScopeOptions.filter((option) => !option.requires || config[option.requires] === true));
|
||
flattenStringValues(config.supported_modes).forEach((mode) => options.push({ value: mode, label: `${friendlyScopeLabel(mode)} (${mode})` }));
|
||
}
|
||
if (field.scope === 'resolution' || field.scope === 'mixed') {
|
||
[...flattenStringValues(config.output_resolutions), ...videoResolutionOptions].forEach((resolution) => {
|
||
options.push({ value: resolution, label: `${friendlyScopeLabel(resolution)} (${resolution})` });
|
||
});
|
||
}
|
||
if (isPlainRecord(value)) {
|
||
Object.keys(value).forEach((key) => options.push({ value: key, label: `${friendlyScopeLabel(key)} (${key})` }));
|
||
}
|
||
return dedupeScopeOptions(options);
|
||
}
|
||
|
||
function ensureScopeOption(options: ScopeOption[], value: string) {
|
||
if (!value || options.some((option) => option.value === value)) return options;
|
||
return [...options, { value, label: `${friendlyScopeLabel(value)} (${value})` }];
|
||
}
|
||
|
||
function firstAvailableScopeKey(options: ScopeOption[], used: string[]) {
|
||
return options.find((option) => !used.includes(option.value))?.value ?? `condition_${used.length + 1}`;
|
||
}
|
||
|
||
function sanitizeCapabilityConfig(config: Record<string, unknown>) {
|
||
const supportedModeKeys = new Set([
|
||
...modeScopeOptions.filter((option) => !option.requires || config[option.requires] === true).map((option) => option.value),
|
||
...flattenStringValues(config.supported_modes),
|
||
]);
|
||
const keepScopedModeKey = (key: string) => !isKnownModeScopeKey(key) || supportedModeKeys.has(key);
|
||
return Object.fromEntries(
|
||
Object.entries(config).map(([key, value]) => {
|
||
if (!isScopedConfigKey(key) || !isPlainRecord(value)) return [key, value];
|
||
const filtered = Object.fromEntries(Object.entries(value).filter(([scopeKey]) => keepScopedModeKey(scopeKey)));
|
||
if (Object.keys(filtered).length > 0) return [key, filtered];
|
||
return [key, defaultDirectValueForConfigKey(key)];
|
||
}),
|
||
);
|
||
}
|
||
|
||
function isScopedConfigKey(key: string) {
|
||
return key === 'output_resolutions' || key === 'aspect_ratio_allowed' || key === 'duration_range' || key === 'duration_options' || key === 'duration_step';
|
||
}
|
||
|
||
function isKnownModeScopeKey(key: string) {
|
||
return modeScopeOptions.some((option) => option.value === key) || ['text_to_video', 'image_reference', 'element_reference', 'first_last_frame', 'video_reference', 'video_edit', 'multi_shot'].includes(key);
|
||
}
|
||
|
||
function defaultDirectValueForConfigKey(key: string) {
|
||
if (key === 'duration_range') return [0, 0];
|
||
if (key === 'duration_step') return 0;
|
||
return [];
|
||
}
|
||
|
||
function multiOptionsForField(field: FieldDefinition, config: Record<string, unknown>, value: unknown): ValueOption[] {
|
||
let options: string[] = [];
|
||
if (field.key === 'output_resolutions') options = field.scope ? videoResolutionOptions : imageResolutionOptions;
|
||
if (field.key === 'aspect_ratio_allowed') options = field.scope ? videoAspectRatioOptions : imageAspectRatioOptions;
|
||
if (field.key === 'supported_modes') options = omniVideoModeOptions;
|
||
if (field.key === 'thinkingEffortLevels') options = thinkingEffortOptions;
|
||
if (field.key === 'duration_options') options = durationOptionValues;
|
||
if (field.key === 'dimensions') options = ['3072', '1536', '1024', '768', '512', '256'];
|
||
if (field.key === 'geometry_quality_options') options = ['standard', 'detailed'];
|
||
options = orderedOptionValues(options, [...valueArray(value), ...flattenStringValues(config[field.key])], field);
|
||
return options.map((item) => ({ value: item, label: friendlyOptionLabel(field, item) }));
|
||
}
|
||
|
||
function orderedOptionValues(baseOptions: string[], extraOptions: string[], field: FieldDefinition) {
|
||
const base = uniqueStrings(baseOptions);
|
||
const baseSet = new Set(base);
|
||
const extras = uniqueStrings(extraOptions).filter((item) => !baseSet.has(item));
|
||
if (field.key === 'duration_options') {
|
||
return uniqueStrings([...base, ...extras]).sort((a, b) => Number(a) - Number(b));
|
||
}
|
||
const sortedExtras = isNumberListField(field)
|
||
? extras.sort((a, b) => Number(a) - Number(b))
|
||
: extras.sort((a, b) => a.localeCompare(b));
|
||
return [...base, ...sortedExtras];
|
||
}
|
||
|
||
function friendlyOptionLabel(field: FieldDefinition, value: string) {
|
||
if (field.key === 'duration_options') return `${value}秒`;
|
||
if (field.key === 'supported_modes') return friendlyScopeLabel(value);
|
||
return value;
|
||
}
|
||
|
||
function valueArray(value: unknown): string[] {
|
||
if (Array.isArray(value)) return value.map(String).filter(Boolean);
|
||
if (value === undefined || value === null || value === '') return [];
|
||
return [String(value)];
|
||
}
|
||
|
||
function isNumberListField(field: FieldDefinition) {
|
||
return field.type === 'numberList' || field.type === 'scopedNumberList';
|
||
}
|
||
|
||
function friendlyScopeLabel(key: string) {
|
||
const labels: Record<string, string> = {
|
||
input_first_frame: '首帧模式',
|
||
input_first_last_frame: '首尾帧模式',
|
||
input_last_frame: '尾帧模式',
|
||
input_smart_multi_frame: '智能多帧',
|
||
text_to_video: '文生视频',
|
||
image_reference: '图片参考',
|
||
element_reference: '主体参考',
|
||
first_last_frame: '首尾帧',
|
||
video_reference: '视频参考',
|
||
video_edit: '视频编辑',
|
||
multi_shot: '多镜头',
|
||
};
|
||
return labels[key] ?? key;
|
||
}
|
||
|
||
function dedupeScopeOptions(options: ScopeOption[]) {
|
||
const seen = new Set<string>();
|
||
return options.filter((option) => {
|
||
if (!option.value || seen.has(option.value)) return false;
|
||
seen.add(option.value);
|
||
return true;
|
||
});
|
||
}
|
||
|
||
function flattenStringValues(value: unknown): string[] {
|
||
if (Array.isArray(value)) return value.map(String).filter(Boolean);
|
||
if (!isPlainRecord(value)) return [];
|
||
return Object.values(value).flatMap((item) => Array.isArray(item) ? item.map(String).filter(Boolean) : []);
|
||
}
|
||
|
||
function defaultDirectValue(field: FieldDefinition) {
|
||
if (field.type === 'scopedRange') return [0, 0];
|
||
if (field.type === 'scopedNumber') return 0;
|
||
return [];
|
||
}
|
||
|
||
function normalizeScopedValue(field: FieldDefinition, value: unknown) {
|
||
if (isPlainRecord(value)) return Object.values(value)[0] ?? defaultDirectValue(field);
|
||
if (field.type === 'scopedRange') return Array.isArray(value) ? value : defaultDirectValue(field);
|
||
if (field.type === 'scopedNumber') return typeof value === 'number' || typeof value === 'string' ? numberValue(value) : 0;
|
||
return Array.isArray(value) ? value : defaultDirectValue(field);
|
||
}
|
||
|
||
function hasMeaningfulValue(value: unknown): boolean {
|
||
if (value === undefined || value === null || value === '') return false;
|
||
if (Array.isArray(value)) return value.length > 0;
|
||
if (isPlainRecord(value)) return Object.keys(value).length > 0;
|
||
return true;
|
||
}
|
||
|
||
function capabilityFieldGroups(type: string): Array<{ title: string; icon: ReactNode; fields: FieldDefinition[] }> {
|
||
if (isTextType(type)) return [{ title: '文本默认能力', icon: <Brain size={15} />, fields: textFields }];
|
||
if (type === 'text_embedding') return [{ title: '向量默认能力', icon: <Brain size={15} />, fields: embeddingFields }];
|
||
if (isImageType(type)) return [{ title: '图像默认能力', icon: <Image size={15} />, fields: imageFieldsFor(type) }];
|
||
if (isVideoType(type)) return [{ title: '视频默认能力', icon: <Video size={15} />, fields: videoFieldsFor(type) }];
|
||
if (isModel3dType(type)) return [{ title: '3D 默认能力', icon: <Brain size={15} />, fields: model3dFields }];
|
||
return [];
|
||
}
|
||
|
||
function imageFieldsFor(type: string) {
|
||
if (type === 'image_edit') return imageFields;
|
||
return imageFields.filter((field) => !field.key.startsWith('input_'));
|
||
}
|
||
|
||
function videoFieldsFor(type: string) {
|
||
if (type === 'video_generate') return videoFields.filter((field) => !field.key.startsWith('input_') && field.key !== 'supported_modes');
|
||
if (type === 'image_to_video') return videoFields.filter((field) => field.key !== 'supported_modes' && field.key !== 'max_audios');
|
||
if (type === 'video_edit') return videoFields.filter((field) => !field.key.includes('reference_generate') && field.key !== 'supported_modes');
|
||
return videoFields;
|
||
}
|
||
|
||
function preservedConfigCount(config: Record<string, unknown>, groups: Array<{ fields: FieldDefinition[] }>) {
|
||
const shown = new Set(groups.flatMap((group) => group.fields.map((field) => field.key)));
|
||
return Object.keys(config).filter((key) => !shown.has(key)).length;
|
||
}
|
||
|
||
function summarizeEnabledCapabilities(types: string[], typeConfigs: Record<string, Record<string, unknown>>) {
|
||
if (!types.length) return '暂无启用能力，添加能力后会在这里显示模型支持范围。';
|
||
const groups = uniqueStrings(types.map(modelTypeGroup));
|
||
const names = types.map(modelTypeLabel);
|
||
const nameText = names.length > 3 ? `${names.slice(0, 3).join('、')}等 ${names.length} 项能力` : names.join('、');
|
||
const highlights = capabilitySummaryHighlights(types, typeConfigs);
|
||
const base = `已启用 ${types.length} 项能力，覆盖${groups.join('、')}。包含 ${nameText}`;
|
||
return highlights.length ? `${base}；${highlights.join('，')}。` : `${base}。`;
|
||
}
|
||
|
||
function capabilitySummaryHighlights(types: string[], typeConfigs: Record<string, Record<string, unknown>>) {
|
||
const highlights: string[] = [];
|
||
const textLimits = uniqueStrings(types.flatMap((type) => stringValue(typeConfigs[type]?.max_context_tokens ? typeConfigs[type].max_context_tokens : '').split(',').filter(Boolean)));
|
||
if (textLimits.length) highlights.push(`上下文 ${textLimits[0]} Token`);
|
||
|
||
const resolutions = uniqueStrings(types.flatMap((type) => flattenStringValues(typeConfigs[type]?.output_resolutions)));
|
||
if (resolutions.length) highlights.push(`输出分辨率 ${resolutions.slice(0, 4).join('/')}`);
|
||
|
||
const aspectRatioRanges = uniqueStrings(types.flatMap((type) => aspectRatioRangeSummaryValues(typeConfigs[type])));
|
||
if (aspectRatioRanges.length) highlights.push(`宽高比 ${aspectRatioRanges.slice(0, 2).join('/')}`);
|
||
|
||
const durations = uniqueStrings(types.flatMap((type) => durationSummaryValues(typeConfigs[type])));
|
||
if (durations.length) highlights.push(`时长 ${durations.slice(0, 3).join('/')}`);
|
||
|
||
const booleanLabels = types.flatMap((type) => enabledBooleanLabels(typeConfigs[type]));
|
||
if (booleanLabels.length) highlights.push(`支持${uniqueStrings(booleanLabels).slice(0, 3).join('、')}`);
|
||
|
||
return highlights.slice(0, 4);
|
||
}
|
||
|
||
function aspectRatioRangeSummaryValues(config?: Record<string, unknown>) {
|
||
const range = config?.aspect_ratio_range;
|
||
if (!Array.isArray(range) || range.length < 2) return [];
|
||
return [`${range[0]}-${range[1]}`];
|
||
}
|
||
|
||
function durationSummaryValues(config?: Record<string, unknown>) {
|
||
if (!config) return [];
|
||
const options = flattenStringValues(config.duration_options).map((item) => `${item}秒`);
|
||
if (options.length) return options;
|
||
const range = config.duration_range;
|
||
if (Array.isArray(range) && range.length >= 2) return [`${range[0]}-${range[1]}秒`];
|
||
if (!isPlainRecord(range)) return [];
|
||
return Object.values(range).flatMap((item) => Array.isArray(item) && item.length >= 2 ? [`${item[0]}-${item[1]}秒`] : []);
|
||
}
|
||
|
||
function enabledBooleanLabels(config?: Record<string, unknown>) {
|
||
if (!config) return [];
|
||
const labels: Record<string, string> = {
|
||
supportTool: '工具调用',
|
||
supportStructuredOutput: '结构化输出',
|
||
supportThinking: '思考能力',
|
||
supportWebSearch: '联网搜索',
|
||
support_base64_input: 'Base64 输入',
|
||
support_url_input: 'URL 输入',
|
||
input_multiple_images: '多图输入',
|
||
output_multiple_images: '多图输出',
|
||
input_audio: '音频输入',
|
||
output_audio: '输出音频',
|
||
output_bgm: '背景音乐',
|
||
input_first_frame: '首帧输入',
|
||
input_first_last_frame: '首尾帧模式',
|
||
input_reference_generate_single: '单参考图',
|
||
input_reference_generate_multiple: '多参考图',
|
||
support_video_effect_template: '视频特效模板',
|
||
};
|
||
return Object.entries(labels).filter(([key]) => config[key] === true).map(([, label]) => label);
|
||
}
|
||
|
||
function isTextType(type: string) {
|
||
return ['text_generate', 'image_analysis', 'video_understanding', 'audio_understanding', 'omni', 'tools_call'].includes(type);
|
||
}
|
||
|
||
function isImageType(type: string) {
|
||
return type === 'image_generate' || type === 'image_edit';
|
||
}
|
||
|
||
function isVideoType(type: string) {
|
||
return ['video_generate', 'image_to_video', 'video_edit', 'omni_video'].includes(type);
|
||
}
|
||
|
||
function isModel3dType(type: string) {
|
||
return ['text_to_model', 'image_to_model', 'multiview_to_model', 'mesh_edit'].includes(type);
|
||
}
|
||
|
||
function numberValue(value: unknown) {
|
||
const parsed = Number(value);
|
||
return Number.isFinite(parsed) ? parsed : 0;
|
||
}
|
||
|
||
function booleanSelectValue(value: unknown) {
|
||
if (value === true) return 'true';
|
||
if (value === false) return 'false';
|
||
return 'unset';
|
||
}
|
||
|
||
function booleanDefaultText(field: FieldDefinition, defaultValue: unknown) {
|
||
if (field.key === 'support_base64_input' || field.key === 'support_url_input') return '默认自动判断';
|
||
return defaultValue === true ? '默认支持' : '默认不支持';
|
||
}
|
||
|
||
function booleanValueFromSelect(value: string) {
|
||
if (value === 'true') return true;
|
||
if (value === 'false') return false;
|
||
return undefined;
|
||
}
|
||
|
||
function stringValue(value: unknown) {
|
||
return value === undefined || value === null ? '' : String(value);
|
||
}
|
||
|
||
function uniqueStrings(values: string[]) {
|
||
return Array.from(new Set(values.map((item) => item.trim()).filter(Boolean)));
|
||
}
|
||
|
||
function isPlainRecord(value: unknown): value is Record<string, unknown> {
|
||
return Boolean(value) && !Array.isArray(value) && typeof value === 'object';
|
||
}
|