feat(web): improve media playground controls
This commit is contained in:
@@ -0,0 +1,818 @@
|
||||
import { useEffect, useRef, type CSSProperties, type ReactNode } from 'react';
|
||||
import type { GatewayTask, PlatformModel } from '@easyai-ai-gateway/contracts';
|
||||
import {
|
||||
Download,
|
||||
Edit3,
|
||||
Image as ImageIcon,
|
||||
Images,
|
||||
Link2,
|
||||
LoaderCircle,
|
||||
Sparkles,
|
||||
Square,
|
||||
} from 'lucide-react';
|
||||
import { resolveApiAssetUrl } from '../api';
|
||||
import { Button, Input, Popover, PopoverContent, PopoverTrigger } from '../components/ui';
|
||||
import type { PlaygroundMode } from '../types';
|
||||
|
||||
export type MediaOutputMode = 'single' | 'group';
|
||||
export type MediaCountPreset = 1 | 2 | 3 | 4 | 'custom';
|
||||
export type MediaResolution = string;
|
||||
|
||||
const mediaGridGap = 2;
|
||||
const mediaPreviewMaxHeight = 600;
|
||||
|
||||
export interface MediaGenerationSettings {
|
||||
aspectRatio: string;
|
||||
countPreset: MediaCountPreset;
|
||||
customCount: number;
|
||||
height: number;
|
||||
outputMode: MediaOutputMode;
|
||||
resolution: MediaResolution;
|
||||
width: number;
|
||||
}
|
||||
|
||||
export interface MediaGenerationRun {
|
||||
createdAt: string;
|
||||
error?: string;
|
||||
localId: string;
|
||||
mode: Exclude<PlaygroundMode, 'chat'>;
|
||||
modelLabel: string;
|
||||
prompt: string;
|
||||
settings: MediaGenerationSettings;
|
||||
status: GatewayTask['status'] | 'submitting';
|
||||
task?: GatewayTask;
|
||||
}
|
||||
|
||||
interface AspectRatioOption {
|
||||
label: string;
|
||||
value: string;
|
||||
visual: 'smart' | 'wide' | 'landscape' | 'square' | 'portrait' | 'tall';
|
||||
}
|
||||
|
||||
interface ResolutionOption {
|
||||
label: string;
|
||||
modes: Array<Exclude<PlaygroundMode, 'chat'>>;
|
||||
value: MediaResolution;
|
||||
}
|
||||
|
||||
export interface MediaModelCapabilities {
|
||||
aspectRatios: string[];
|
||||
maxCount: number;
|
||||
resolutions: MediaResolution[];
|
||||
supportsGroup: boolean;
|
||||
}
|
||||
|
||||
const aspectRatioOptions: AspectRatioOption[] = [
|
||||
{ value: 'auto', label: '智能', visual: 'smart' },
|
||||
{ value: '8:1', label: '8:1', visual: 'wide' },
|
||||
{ value: '4:1', label: '4:1', visual: 'wide' },
|
||||
{ value: '21:9', label: '21:9', visual: 'wide' },
|
||||
{ value: '16:9', label: '16:9', visual: 'wide' },
|
||||
{ value: '3:2', label: '3:2', visual: 'landscape' },
|
||||
{ value: '5:4', label: '5:4', visual: 'landscape' },
|
||||
{ value: '4:3', label: '4:3', visual: 'landscape' },
|
||||
{ value: '1:1', label: '1:1', visual: 'square' },
|
||||
{ value: '4:5', label: '4:5', visual: 'portrait' },
|
||||
{ value: '3:4', label: '3:4', visual: 'portrait' },
|
||||
{ value: '2:3', label: '2:3', visual: 'portrait' },
|
||||
{ value: '9:16', label: '9:16', visual: 'tall' },
|
||||
{ value: '1:4', label: '1:4', visual: 'tall' },
|
||||
{ value: '1:8', label: '1:8', visual: 'tall' },
|
||||
];
|
||||
|
||||
const resolutionOptions: ResolutionOption[] = [
|
||||
{ value: '1K', label: '标准 1K', modes: ['image'] },
|
||||
{ value: '2K', label: '高清 2K', modes: ['image'] },
|
||||
{ value: '4K', label: '超清 4K', modes: ['image', 'video'] },
|
||||
{ value: '480p', label: '标清 480p', modes: ['video'] },
|
||||
{ value: '720p', label: '高清 720p', modes: ['video'] },
|
||||
{ value: '1080p', label: '全高清 1080p', modes: ['video'] },
|
||||
{ value: '2160p', label: '超清 2160p', modes: ['video'] },
|
||||
];
|
||||
|
||||
const countPresetOptions: Array<{ label: string; value: MediaCountPreset }> = [
|
||||
{ value: 1, label: '1' },
|
||||
{ value: 2, label: '2' },
|
||||
{ value: 3, label: '3' },
|
||||
{ value: 4, label: '4' },
|
||||
{ value: 'custom', label: '自定义' },
|
||||
];
|
||||
|
||||
export function defaultMediaGenerationSettings(): MediaGenerationSettings {
|
||||
return {
|
||||
aspectRatio: '1:1',
|
||||
countPreset: 1,
|
||||
customCount: 6,
|
||||
height: 2048,
|
||||
outputMode: 'single',
|
||||
resolution: '2K',
|
||||
width: 2048,
|
||||
};
|
||||
}
|
||||
|
||||
export function mediaOutputCount(settings: MediaGenerationSettings) {
|
||||
if (settings.outputMode === 'single') return 1;
|
||||
const raw = settings.countPreset === 'custom' ? settings.customCount : settings.countPreset;
|
||||
return clampNumber(raw, 1, 20);
|
||||
}
|
||||
|
||||
export function mediaRequestPayload(settings: MediaGenerationSettings) {
|
||||
const count = mediaOutputCount(settings);
|
||||
const size = `${settings.width}x${settings.height}`;
|
||||
const highQuality = settings.resolution === '4K' || settings.resolution === '2160p';
|
||||
return {
|
||||
aspect_ratio: settings.aspectRatio === 'auto' ? undefined : settings.aspectRatio,
|
||||
count,
|
||||
height: settings.height,
|
||||
n: count,
|
||||
quality: highQuality ? 'high' : 'medium',
|
||||
resolution: settings.resolution,
|
||||
size,
|
||||
width: settings.width,
|
||||
};
|
||||
}
|
||||
|
||||
export function deriveMediaModelCapabilities(
|
||||
models: PlatformModel[] | PlatformModel | undefined,
|
||||
mode: Exclude<PlaygroundMode, 'chat'>,
|
||||
contextKey?: string,
|
||||
): MediaModelCapabilities {
|
||||
const modelList = (Array.isArray(models) ? models : models ? [models] : []).filter(Boolean);
|
||||
if (!modelList.length) return defaultMediaModelCapabilities(mode);
|
||||
const derived = modelList.map((model) => deriveSingleMediaModelCapabilities(model, mode, contextKey));
|
||||
return {
|
||||
aspectRatios: intersectOptionValues(derived.map((item) => item.aspectRatios), aspectRatioOptions.map((item) => item.value)),
|
||||
maxCount: Math.max(1, Math.min(...derived.map((item) => item.maxCount))),
|
||||
resolutions: intersectOptionValues(derived.map((item) => item.resolutions), resolutionOptionsForMode(mode).map((item) => item.value)),
|
||||
supportsGroup: derived.every((item) => item.supportsGroup),
|
||||
};
|
||||
}
|
||||
|
||||
export function normalizeMediaSettingsForCapabilities(
|
||||
settings: MediaGenerationSettings,
|
||||
capabilities: MediaModelCapabilities,
|
||||
mode: Exclude<PlaygroundMode, 'chat'>,
|
||||
) {
|
||||
const aspectOptions = filterAspectRatioOptions(capabilities);
|
||||
const resolutionItems = filterResolutionOptions(capabilities, mode);
|
||||
const maxCount = Math.max(1, Math.min(capabilities.maxCount, 20));
|
||||
const supportsGroup = capabilities.supportsGroup && maxCount > 1;
|
||||
const next: MediaGenerationSettings = {
|
||||
...settings,
|
||||
aspectRatio: aspectOptions.some((item) => item.value === settings.aspectRatio) ? settings.aspectRatio : aspectOptions[0]?.value ?? 'auto',
|
||||
resolution: resolutionItems.some((item) => item.value === settings.resolution) ? settings.resolution : resolutionItems[0]?.value ?? settings.resolution,
|
||||
};
|
||||
|
||||
if (!supportsGroup) {
|
||||
next.countPreset = 1;
|
||||
next.customCount = 1;
|
||||
next.outputMode = 'single';
|
||||
} else if (next.outputMode === 'group') {
|
||||
if (next.countPreset === 'custom') {
|
||||
next.customCount = clampNumber(next.customCount, 2, maxCount);
|
||||
} else if (next.countPreset > maxCount) {
|
||||
next.countPreset = maxCount <= 4 ? (maxCount as MediaCountPreset) : 'custom';
|
||||
next.customCount = maxCount;
|
||||
} else if (next.countPreset === 1) {
|
||||
next.outputMode = 'single';
|
||||
}
|
||||
} else {
|
||||
next.countPreset = 1;
|
||||
}
|
||||
|
||||
return mediaSettingsEqual(settings, next) ? settings : next;
|
||||
}
|
||||
|
||||
export function MediaSettingsPopover(props: {
|
||||
capabilities?: MediaModelCapabilities;
|
||||
mode: Exclude<PlaygroundMode, 'chat'>;
|
||||
settings: MediaGenerationSettings;
|
||||
onChange: (settings: MediaGenerationSettings) => void;
|
||||
}) {
|
||||
const capabilities = props.capabilities ?? defaultMediaModelCapabilities(props.mode);
|
||||
const aspectOptions = filterAspectRatioOptions(capabilities);
|
||||
const resolutionItems = resolutionOptionsForMode(props.mode);
|
||||
const enabledResolutions = new Set(filterResolutionOptions(capabilities, props.mode).map((item) => item.value));
|
||||
const maxCount = Math.max(1, Math.min(capabilities.maxCount, 20));
|
||||
const supportsGroup = capabilities.supportsGroup && maxCount > 1;
|
||||
const countOptions = countPresetOptions.filter((item) => item.value === 'custom' ? maxCount > 4 : item.value <= Math.min(4, maxCount));
|
||||
const count = mediaOutputCount(props.settings);
|
||||
const unit = props.mode === 'video' ? '条' : '张';
|
||||
|
||||
function patch(next: Partial<MediaGenerationSettings>) {
|
||||
props.onChange(normalizeMediaSettingsForCapabilities({ ...props.settings, ...next }, capabilities, props.mode));
|
||||
}
|
||||
|
||||
function selectCountPreset(value: MediaCountPreset) {
|
||||
if (value !== 1 && !supportsGroup) return;
|
||||
patch({
|
||||
countPreset: value,
|
||||
outputMode: value === 1 ? 'single' : 'group',
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button type="button" className="mediaSettingsTrigger">
|
||||
<Square size={15} />
|
||||
<span>{mediaSettingsSummary(props.settings, props.mode)}</span>
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="start" className="mediaSettingsPanel" side="top" sideOffset={10}>
|
||||
<section className="mediaSettingsSection">
|
||||
<span className="mediaSettingsLabel">选择比例</span>
|
||||
<div className="mediaAspectGrid">
|
||||
{aspectOptions.map((item) => (
|
||||
<button
|
||||
type="button"
|
||||
key={item.value}
|
||||
data-active={props.settings.aspectRatio === item.value}
|
||||
onClick={() => patch({ aspectRatio: item.value })}
|
||||
>
|
||||
<span className="mediaAspectIcon" data-visual={item.visual}>
|
||||
{item.visual === 'smart' && <Sparkles size={16} />}
|
||||
</span>
|
||||
<strong>{item.label}</strong>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mediaSettingsSection">
|
||||
<span className="mediaSettingsLabel">选择分辨率</span>
|
||||
<div className="mediaResolutionSegment">
|
||||
{resolutionItems.map((item) => (
|
||||
<button
|
||||
type="button"
|
||||
key={item.value}
|
||||
data-active={props.settings.resolution === item.value}
|
||||
disabled={!enabledResolutions.has(item.value)}
|
||||
onClick={() => enabledResolutions.has(item.value) && patch({ resolution: item.value })}
|
||||
>
|
||||
{item.label}
|
||||
{item.value === '4K' && <Sparkles size={15} />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mediaSettingsSection">
|
||||
<span className="mediaSettingsLabel">尺寸</span>
|
||||
<div className="mediaSizeRow">
|
||||
<label>
|
||||
<span>W</span>
|
||||
<Input
|
||||
inputMode="numeric"
|
||||
min={128}
|
||||
size="sm"
|
||||
type="number"
|
||||
value={props.settings.width}
|
||||
onChange={(event) => patch({ width: clampNumber(Number(event.target.value), 128, 8192) })}
|
||||
/>
|
||||
</label>
|
||||
<Link2 size={18} />
|
||||
<label>
|
||||
<span>H</span>
|
||||
<Input
|
||||
inputMode="numeric"
|
||||
min={128}
|
||||
size="sm"
|
||||
type="number"
|
||||
value={props.settings.height}
|
||||
onChange={(event) => patch({ height: clampNumber(Number(event.target.value), 128, 8192) })}
|
||||
/>
|
||||
</label>
|
||||
<strong>PX</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mediaSettingsSection">
|
||||
<span className="mediaSettingsLabel">生成数量</span>
|
||||
<div className="mediaOutputModeSegment">
|
||||
<button type="button" data-active={props.settings.outputMode === 'single'} onClick={() => patch({ countPreset: 1, outputMode: 'single' })}>
|
||||
<ImageIcon size={15} />
|
||||
单图
|
||||
</button>
|
||||
<button type="button" disabled={!supportsGroup} data-active={props.settings.outputMode === 'group'} onClick={() => patch({ countPreset: 2, outputMode: 'group' })}>
|
||||
<Images size={15} />
|
||||
{supportsGroup ? '组图' : '不支持组图'}
|
||||
</button>
|
||||
</div>
|
||||
{supportsGroup ? (
|
||||
<>
|
||||
<div className="mediaCountGrid">
|
||||
{countOptions.map((item) => (
|
||||
<button
|
||||
type="button"
|
||||
key={String(item.value)}
|
||||
data-active={props.settings.countPreset === item.value}
|
||||
onClick={() => selectCountPreset(item.value)}
|
||||
>
|
||||
{item.value === 'custom' ? item.label : `${item.label}${unit}`}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{props.settings.countPreset === 'custom' && props.settings.outputMode === 'group' && (
|
||||
<label className="mediaCustomCount">
|
||||
<span>自定义数量</span>
|
||||
<Input
|
||||
inputMode="numeric"
|
||||
min={2}
|
||||
max={maxCount}
|
||||
size="sm"
|
||||
type="number"
|
||||
value={props.settings.customCount}
|
||||
onChange={(event) => patch({ customCount: clampNumber(Number(event.target.value), 2, maxCount) })}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="mediaUnsupportedNote">当前模型不支持组图输出。</p>
|
||||
)}
|
||||
<p className="mediaSettingsHint">
|
||||
<Sparkles size={14} />
|
||||
{count} / {unit}
|
||||
</p>
|
||||
</section>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
export function MediaTaskBoard(props: {
|
||||
composer: ReactNode;
|
||||
message?: string;
|
||||
onEditRun?: (run: MediaGenerationRun) => void;
|
||||
onRerun?: (run: MediaGenerationRun) => void;
|
||||
runs: MediaGenerationRun[];
|
||||
}) {
|
||||
const timelineRef = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const timeline = timelineRef.current;
|
||||
if (!timeline) return;
|
||||
timeline.scrollTo({ behavior: 'smooth', top: timeline.scrollHeight });
|
||||
}, [props.runs.length]);
|
||||
|
||||
return (
|
||||
<div className="mediaTaskPage">
|
||||
<section ref={timelineRef} className="mediaTaskTimeline" aria-label="生成任务列表">
|
||||
<h1>今天</h1>
|
||||
{props.message && <p className="playgroundError">{props.message}</p>}
|
||||
{props.runs.map((run) => (
|
||||
<MediaTaskCard
|
||||
key={run.localId}
|
||||
run={run}
|
||||
onEditRun={props.onEditRun}
|
||||
onRerun={props.onRerun}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
<div className="mediaComposerDock">
|
||||
{props.composer}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MediaTaskCard(props: {
|
||||
run: MediaGenerationRun;
|
||||
onEditRun?: (run: MediaGenerationRun) => void;
|
||||
onRerun?: (run: MediaGenerationRun) => void;
|
||||
}) {
|
||||
const items = mediaResultItems(props.run);
|
||||
const expectedCount = Math.max(mediaOutputCount(props.run.settings), items.length, 1);
|
||||
const columns = expectedCount === 1 ? 1 : expectedCount === 2 ? 2 : Math.min(5, expectedCount);
|
||||
const style = {
|
||||
'--media-grid-columns': columns,
|
||||
'--media-grid-max-width': mediaGridMaxWidth(props.run.settings, columns),
|
||||
'--media-result-aspect': cssAspectRatio(props.run.settings),
|
||||
} as CSSProperties;
|
||||
const status = mediaStatusText(props.run);
|
||||
const unit = props.run.mode === 'video' ? '条' : '张';
|
||||
const isPending = props.run.status === 'submitting' || props.run.status === 'queued' || props.run.status === 'running';
|
||||
const backdropItem = expectedCount === 1 && items[0]?.type === 'image' ? items[0] : undefined;
|
||||
|
||||
return (
|
||||
<article className="mediaTaskItem" data-status={props.run.status}>
|
||||
<header className="mediaTaskHeader">
|
||||
<div>
|
||||
<p>
|
||||
<span>{props.run.prompt}</span>
|
||||
<small>{props.run.mode === 'video' ? '视频' : '图片'} {props.run.modelLabel} {props.run.settings.aspectRatio} {props.run.settings.resolution}</small>
|
||||
</p>
|
||||
<time dateTime={props.run.createdAt}>{formatRunTime(props.run.createdAt)}</time>
|
||||
</div>
|
||||
<span className="mediaTaskStatus" data-status={props.run.status}>{status}</span>
|
||||
</header>
|
||||
|
||||
<div className="mediaPreviewStage" data-count={expectedCount}>
|
||||
{backdropItem && <img aria-hidden="true" className="mediaPreviewBackdrop" src={backdropItem.src} alt="" />}
|
||||
<div className="mediaGrid" data-count={expectedCount} style={style}>
|
||||
{Array.from({ length: expectedCount }).map((_, index) => (
|
||||
<MediaTile
|
||||
expectedCount={expectedCount}
|
||||
index={index}
|
||||
item={items[index]}
|
||||
key={`${props.run.localId}-${index}`}
|
||||
mode={props.run.mode}
|
||||
status={props.run.status}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{props.run.error && <p className="mediaTaskError">{props.run.error}</p>}
|
||||
<footer className="mediaTaskActions">
|
||||
{items[0] ? (
|
||||
<Button asChild size="sm" variant="secondary">
|
||||
<a href={items[0].src} download target="_blank" rel="noreferrer">
|
||||
<Download size={14} />
|
||||
下载
|
||||
</a>
|
||||
</Button>
|
||||
) : (
|
||||
<Button type="button" size="sm" variant="secondary" disabled>
|
||||
<Download size={14} />
|
||||
下载
|
||||
</Button>
|
||||
)}
|
||||
<Button type="button" size="sm" variant="secondary" onClick={() => props.onEditRun?.(props.run)}>
|
||||
<Edit3 size={14} />
|
||||
重新编辑
|
||||
</Button>
|
||||
<Button type="button" size="sm" variant="secondary" disabled={isPending} onClick={() => props.onRerun?.(props.run)}>
|
||||
<Sparkles size={14} />
|
||||
再次生成
|
||||
</Button>
|
||||
<span>
|
||||
<Sparkles size={14} />
|
||||
{expectedCount} / {unit}
|
||||
</span>
|
||||
</footer>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function MediaTile(props: {
|
||||
expectedCount: number;
|
||||
index: number;
|
||||
item?: MediaResultItem;
|
||||
mode: Exclude<PlaygroundMode, 'chat'>;
|
||||
status: MediaGenerationRun['status'];
|
||||
}) {
|
||||
const isLoading = props.status === 'submitting' || props.status === 'queued' || props.status === 'running';
|
||||
const isFailed = props.status === 'failed' || props.status === 'cancelled';
|
||||
return (
|
||||
<div className="mediaTile" data-count={props.expectedCount} data-empty={!props.item && !isLoading} data-kind={props.mode}>
|
||||
{props.item?.type === 'video' && (
|
||||
<video controls muted playsInline poster={props.item.poster}>
|
||||
<source src={props.item.src} />
|
||||
</video>
|
||||
)}
|
||||
{props.item?.type === 'image' && <img src={props.item.src} alt={`生成结果 ${props.index + 1}`} />}
|
||||
{isLoading && !props.item && (
|
||||
<div className="mediaLoading">
|
||||
<LoaderCircle size={24} />
|
||||
<span>{props.mode === 'video' ? '视频生成中' : '图片生成中'}</span>
|
||||
</div>
|
||||
)}
|
||||
{isFailed && !props.item && (
|
||||
<div className="mediaEmptyTile">
|
||||
<span>生成失败</span>
|
||||
</div>
|
||||
)}
|
||||
{!isLoading && !isFailed && !props.item && (
|
||||
<div className="mediaEmptyTile">
|
||||
<span>暂无结果</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function mediaResultItems(run: MediaGenerationRun): MediaResultItem[] {
|
||||
const data = arrayFromUnknown(run.task?.result?.data);
|
||||
return data
|
||||
.map((entry) => mediaResultItemFromEntry(entry, run.mode))
|
||||
.filter((item): item is MediaResultItem => Boolean(item));
|
||||
}
|
||||
|
||||
function mediaResultItemFromEntry(entry: unknown, mode: Exclude<PlaygroundMode, 'chat'>): MediaResultItem | undefined {
|
||||
const record = recordFromUnknown(entry);
|
||||
if (!record) return undefined;
|
||||
const b64 = stringFromUnknown(record.b64_json);
|
||||
if (b64) return { src: `data:image/png;base64,${b64}`, type: 'image' };
|
||||
const videoUrl = firstString(record.video_url, nestedString(record.video_url, 'url'), record.videoUrl, record.output_video_url);
|
||||
if (videoUrl) return { src: resolveApiAssetUrl(videoUrl), type: 'video' };
|
||||
const imageUrl = firstString(record.url, record.image_url, nestedString(record.image_url, 'url'), record.output_url);
|
||||
if (!imageUrl) return undefined;
|
||||
const normalized = resolveApiAssetUrl(imageUrl);
|
||||
const type = mode === 'video' || /\.(mp4|mov|webm|m4v)(\?|#|$)/i.test(normalized) ? 'video' : 'image';
|
||||
return { src: normalized, type };
|
||||
}
|
||||
|
||||
function mediaSettingsSummary(settings: MediaGenerationSettings, mode: Exclude<PlaygroundMode, 'chat'>) {
|
||||
const count = mediaOutputCount(settings);
|
||||
const unit = mode === 'video' ? '条' : '张';
|
||||
const resolutionLabel = resolutionOptionsForMode(mode).find((item) => item.value === settings.resolution)?.label ?? settings.resolution;
|
||||
const modeLabel = settings.outputMode === 'single' ? '单图' : '组图';
|
||||
return `${settings.aspectRatio} | ${resolutionLabel} | ${settings.width}x${settings.height} | ${modeLabel} ${count}${unit}`;
|
||||
}
|
||||
|
||||
function mediaStatusText(run: MediaGenerationRun) {
|
||||
if (run.status === 'submitting') return '提交中';
|
||||
if (run.status === 'queued') return '排队中';
|
||||
if (run.status === 'running') return '生成中';
|
||||
if (run.status === 'succeeded') return '已完成';
|
||||
if (run.status === 'failed') return '失败';
|
||||
if (run.status === 'cancelled') return '已取消';
|
||||
return run.status;
|
||||
}
|
||||
|
||||
function formatRunTime(value: string) {
|
||||
return new Intl.DateTimeFormat('zh-CN', { hour: '2-digit', minute: '2-digit' }).format(new Date(value));
|
||||
}
|
||||
|
||||
function cssAspectRatio(settings: MediaGenerationSettings) {
|
||||
const [aspectWidth, aspectHeight] = settings.aspectRatio.split(':').map((item) => Number(item));
|
||||
if (Number.isFinite(aspectWidth) && Number.isFinite(aspectHeight) && aspectWidth > 0 && aspectHeight > 0) {
|
||||
return `${aspectWidth} / ${aspectHeight}`;
|
||||
}
|
||||
return `${settings.width || 1} / ${settings.height || 1}`;
|
||||
}
|
||||
|
||||
function mediaGridMaxWidth(settings: MediaGenerationSettings, columns: number) {
|
||||
const ratio = numericAspectRatio(settings);
|
||||
const safeColumns = Math.max(1, columns);
|
||||
const maxWidth = (mediaPreviewMaxHeight * ratio * safeColumns) + (mediaGridGap * (safeColumns - 1));
|
||||
return `${Math.max(120, Math.ceil(maxWidth))}px`;
|
||||
}
|
||||
|
||||
function numericAspectRatio(settings: MediaGenerationSettings) {
|
||||
const [aspectWidth, aspectHeight] = settings.aspectRatio.split(':').map((item) => Number(item));
|
||||
if (Number.isFinite(aspectWidth) && Number.isFinite(aspectHeight) && aspectWidth > 0 && aspectHeight > 0) {
|
||||
return aspectWidth / aspectHeight;
|
||||
}
|
||||
const width = Number(settings.width);
|
||||
const height = Number(settings.height);
|
||||
if (Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0) {
|
||||
return width / height;
|
||||
}
|
||||
return 1;
|
||||
}
|
||||
|
||||
function deriveSingleMediaModelCapabilities(
|
||||
model: PlatformModel,
|
||||
mode: Exclude<PlaygroundMode, 'chat'>,
|
||||
contextKey?: string,
|
||||
): MediaModelCapabilities {
|
||||
const source = mergeCapabilityRecords(model.capabilities, model.capabilityOverride);
|
||||
const typeKeys = capabilityTypeKeys(model, source, mode, contextKey);
|
||||
const defaultCapabilities = defaultMediaModelCapabilities(mode);
|
||||
const resolutionValues = normalizeResolutionValues(stringListFromCapability(firstCapabilityValue(source, typeKeys, ['output_resolutions']), [contextKey]));
|
||||
const allowedAspectValues = normalizeAspectRatioValues(stringListFromCapability(firstCapabilityValue(source, typeKeys, ['aspect_ratio_allowed']), [contextKey]));
|
||||
const ratioRange = ratioRangeFromValue(firstCapabilityValue(source, typeKeys, ['aspect_ratio_range']));
|
||||
const rangedAspectValues = ratioRange ? aspectRatioOptions
|
||||
.filter((item) => item.value === 'auto' || aspectRatioWithinRange(item.value, ratioRange))
|
||||
.map((item) => item.value) : [];
|
||||
const aspectRatios = allowedAspectValues.length && rangedAspectValues.length
|
||||
? allowedAspectValues.filter((item) => rangedAspectValues.includes(item))
|
||||
: allowedAspectValues.length ? allowedAspectValues : rangedAspectValues;
|
||||
const maxCountValue = numberFromUnknown(firstCapabilityValue(source, typeKeys, countCapabilityKeys(mode)));
|
||||
const explicitGroupSupport = boolFromUnknown(firstCapabilityValue(source, typeKeys, groupCapabilityKeys(mode)));
|
||||
const maxCount = explicitGroupSupport === false ? 1 : clampNumber(maxCountValue ?? defaultCapabilities.maxCount, 1, 20);
|
||||
const supportsGroup = explicitGroupSupport === false ? false : maxCount > 1;
|
||||
|
||||
return {
|
||||
aspectRatios: aspectRatios.length ? aspectRatios : defaultCapabilities.aspectRatios,
|
||||
maxCount,
|
||||
resolutions: resolutionValues.length ? resolutionValues : defaultCapabilities.resolutions,
|
||||
supportsGroup,
|
||||
};
|
||||
}
|
||||
|
||||
function defaultMediaModelCapabilities(mode: Exclude<PlaygroundMode, 'chat'>): MediaModelCapabilities {
|
||||
return {
|
||||
aspectRatios: aspectRatioOptions.map((item) => item.value),
|
||||
maxCount: 20,
|
||||
resolutions: resolutionOptionsForMode(mode).map((item) => item.value),
|
||||
supportsGroup: true,
|
||||
};
|
||||
}
|
||||
|
||||
function filterAspectRatioOptions(capabilities: MediaModelCapabilities) {
|
||||
const allowed = new Set(capabilities.aspectRatios);
|
||||
const items = aspectRatioOptions.filter((item) => allowed.has(item.value));
|
||||
return items.length ? items : aspectRatioOptions;
|
||||
}
|
||||
|
||||
function filterResolutionOptions(capabilities: MediaModelCapabilities, mode: Exclude<PlaygroundMode, 'chat'>) {
|
||||
const allowed = new Set(capabilities.resolutions);
|
||||
const modeOptions = resolutionOptionsForMode(mode);
|
||||
const items = modeOptions.filter((item) => allowed.has(item.value));
|
||||
return items.length ? items : modeOptions;
|
||||
}
|
||||
|
||||
function resolutionOptionsForMode(mode: Exclude<PlaygroundMode, 'chat'>) {
|
||||
return resolutionOptions.filter((item) => item.modes.includes(mode));
|
||||
}
|
||||
|
||||
function intersectOptionValues(values: string[][], fallback: string[]) {
|
||||
const nonEmptyValues = values.filter((items) => items.length > 0);
|
||||
if (!nonEmptyValues.length) return fallback;
|
||||
const intersection = fallback.filter((item) => nonEmptyValues.every((items) => items.includes(item)));
|
||||
return intersection.length ? intersection : nonEmptyValues[0];
|
||||
}
|
||||
|
||||
function capabilityTypeKeys(
|
||||
model: PlatformModel,
|
||||
source: Record<string, unknown>,
|
||||
mode: Exclude<PlaygroundMode, 'chat'>,
|
||||
contextKey?: string,
|
||||
) {
|
||||
const modeTypeHints = mode === 'image'
|
||||
? ['image_generate', 'image_edit', 'images.generations', 'images.edits', 'image']
|
||||
: [contextKey, 'text_to_video', 'image_to_video', 'omni_video', 'video_generate', 'video'];
|
||||
return uniqueStrings([
|
||||
...stringListFromCapability(source.originalTypes),
|
||||
model.modelType,
|
||||
...modeTypeHints.filter((item): item is string => Boolean(item)),
|
||||
]);
|
||||
}
|
||||
|
||||
function firstCapabilityValue(source: Record<string, unknown>, typeKeys: string[], keys: string[]) {
|
||||
for (const key of keys) {
|
||||
const value = nestedCapabilityValue(source, typeKeys, key);
|
||||
if (hasCapabilityValue(value)) return value;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function nestedCapabilityValue(source: Record<string, unknown>, typeKeys: string[], key: string) {
|
||||
for (const type of typeKeys) {
|
||||
const config = recordFromUnknown(source[type]);
|
||||
if (config && key in config) return config[key];
|
||||
}
|
||||
if (key in source) return source[key];
|
||||
for (const value of Object.values(source)) {
|
||||
const config = recordFromUnknown(value);
|
||||
if (config && key in config) return config[key];
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function groupCapabilityKeys(mode: Exclude<PlaygroundMode, 'chat'>) {
|
||||
return mode === 'image'
|
||||
? ['output_multiple_images', 'multiple_images', 'support_multiple_images', 'supports_group']
|
||||
: ['output_multiple_videos', 'multiple_videos', 'support_multiple_videos', 'supports_group'];
|
||||
}
|
||||
|
||||
function countCapabilityKeys(mode: Exclude<PlaygroundMode, 'chat'>) {
|
||||
return mode === 'image'
|
||||
? ['output_max_images_count', 'max_images', 'max_outputs', 'output_max_count']
|
||||
: ['output_max_videos_count', 'max_videos', 'max_outputs', 'output_max_count'];
|
||||
}
|
||||
|
||||
function mergeCapabilityRecords(...records: Array<Record<string, unknown> | undefined>) {
|
||||
return records.reduce<Record<string, unknown>>((acc, record) => {
|
||||
if (!record) return acc;
|
||||
Object.entries(record).forEach(([key, value]) => {
|
||||
const current = recordFromUnknown(acc[key]);
|
||||
const next = recordFromUnknown(value);
|
||||
acc[key] = current && next ? { ...current, ...next } : value;
|
||||
});
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
function stringListFromCapability(value: unknown, preferredKeys: Array<string | undefined> = []): string[] {
|
||||
if (Array.isArray(value)) return value.map(String).map((item) => item.trim()).filter(Boolean);
|
||||
if (typeof value === 'string') return value.split(/[,，\s]+/).map((item) => item.trim()).filter(Boolean);
|
||||
const record = recordFromUnknown(value);
|
||||
if (!record) return [];
|
||||
const preferred = preferredKeys
|
||||
.filter((key): key is string => Boolean(key))
|
||||
.flatMap((key) => stringListFromCapability(record[key]));
|
||||
if (preferred.length) return preferred;
|
||||
return Object.values(record).flatMap((item) => stringListFromCapability(item));
|
||||
}
|
||||
|
||||
function normalizeAspectRatioValues(values: string[]) {
|
||||
const allowedValues = new Set(aspectRatioOptions.map((item) => item.value));
|
||||
return uniqueStrings(values.map((value) => {
|
||||
const normalized = value.toLowerCase().replace(/[×x]/g, ':').replace(/\s+/g, '');
|
||||
if (['auto', 'smart', 'adaptive', '智能'].includes(normalized)) return 'auto';
|
||||
return normalized;
|
||||
})).filter((value) => allowedValues.has(value));
|
||||
}
|
||||
|
||||
function normalizeResolutionValues(values: string[]) {
|
||||
const allowedValues = new Set(resolutionOptions.map((item) => item.value));
|
||||
return uniqueStrings(values.map((value) => {
|
||||
const normalized = value.trim().toLowerCase();
|
||||
if (normalized.includes('2160')) return '2160p';
|
||||
if (normalized.includes('1080')) return '1080p';
|
||||
if (normalized.includes('720')) return '720p';
|
||||
if (normalized.includes('480')) return '480p';
|
||||
if (normalized.includes('4k') || normalized.includes('4096')) return '4K';
|
||||
if (normalized.includes('2k') || normalized.includes('2048')) return '2K';
|
||||
if (normalized.includes('1k') || normalized.includes('1024')) return '1K';
|
||||
return value.trim();
|
||||
})).filter((value) => allowedValues.has(value));
|
||||
}
|
||||
|
||||
function ratioRangeFromValue(value: unknown): [number, number] | undefined {
|
||||
if (Array.isArray(value) && value.length >= 2) {
|
||||
const min = Number(value[0]);
|
||||
const max = Number(value[1]);
|
||||
if (Number.isFinite(min) && Number.isFinite(max)) return [Math.min(min, max), Math.max(min, max)];
|
||||
}
|
||||
if (typeof value === 'string') {
|
||||
const numbers = value.match(/-?\d+(?:\.\d+)?/g)?.map(Number) ?? [];
|
||||
if (numbers.length >= 2 && numbers.every(Number.isFinite)) return [Math.min(numbers[0], numbers[1]), Math.max(numbers[0], numbers[1])];
|
||||
}
|
||||
const record = recordFromUnknown(value);
|
||||
if (!record) return undefined;
|
||||
for (const item of Object.values(record)) {
|
||||
const nested = ratioRangeFromValue(item);
|
||||
if (nested) return nested;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function aspectRatioWithinRange(value: string, range: [number, number]) {
|
||||
const [width, height] = value.split(':').map(Number);
|
||||
if (!Number.isFinite(width) || !Number.isFinite(height) || height <= 0) return false;
|
||||
const ratio = width / height;
|
||||
return ratio >= range[0] && ratio <= range[1];
|
||||
}
|
||||
|
||||
function hasCapabilityValue(value: unknown) {
|
||||
if (value === undefined || value === null || value === '') return false;
|
||||
if (Array.isArray(value)) return value.length > 0;
|
||||
return true;
|
||||
}
|
||||
|
||||
function boolFromUnknown(value: unknown) {
|
||||
if (value === true || value === 'true') return true;
|
||||
if (value === false || value === 'false') return false;
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function numberFromUnknown(value: unknown) {
|
||||
if (typeof value === 'number' && Number.isFinite(value)) return value;
|
||||
if (typeof value === 'string' && value.trim()) {
|
||||
const parsed = Number(value);
|
||||
if (Number.isFinite(parsed)) return parsed;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function uniqueStrings(values: string[]) {
|
||||
return Array.from(new Set(values.map((item) => item.trim()).filter(Boolean)));
|
||||
}
|
||||
|
||||
function mediaSettingsEqual(left: MediaGenerationSettings, right: MediaGenerationSettings) {
|
||||
return left.aspectRatio === right.aspectRatio
|
||||
&& left.countPreset === right.countPreset
|
||||
&& left.customCount === right.customCount
|
||||
&& left.height === right.height
|
||||
&& left.outputMode === right.outputMode
|
||||
&& left.resolution === right.resolution
|
||||
&& left.width === right.width;
|
||||
}
|
||||
|
||||
function firstString(...values: unknown[]) {
|
||||
return values.map(stringFromUnknown).find(Boolean) ?? '';
|
||||
}
|
||||
|
||||
function nestedString(value: unknown, key: string) {
|
||||
return stringFromUnknown(recordFromUnknown(value)?.[key]);
|
||||
}
|
||||
|
||||
function stringFromUnknown(value: unknown) {
|
||||
return typeof value === 'string' ? value.trim() : '';
|
||||
}
|
||||
|
||||
function arrayFromUnknown(value: unknown) {
|
||||
return Array.isArray(value) ? value : [];
|
||||
}
|
||||
|
||||
function recordFromUnknown(value: unknown): Record<string, unknown> | undefined {
|
||||
if (!value || typeof value !== 'object' || Array.isArray(value)) return undefined;
|
||||
return value as Record<string, unknown>;
|
||||
}
|
||||
|
||||
function clampNumber(value: number, min: number, max: number) {
|
||||
if (!Number.isFinite(value)) return min;
|
||||
return Math.min(max, Math.max(min, Math.round(value)));
|
||||
}
|
||||
|
||||
interface MediaResultItem {
|
||||
poster?: string;
|
||||
src: string;
|
||||
type: 'image' | 'video';
|
||||
}
|
||||
Reference in New Issue
Block a user