570 lines
29 KiB
TypeScript
570 lines
29 KiB
TypeScript
import { App, Button, Empty, Input, InputNumber, Progress, Select, Switch } from "antd";
|
||
import { FileAudio, FileImage, Film, Grip, Play, RotateCcw, Square, Upload, WandSparkles } from "lucide-react";
|
||
import { useEffect, useMemo, useRef, useState, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
|
||
|
||
import { generationErrorMessage } from "@/lib/generation-error";
|
||
import { resourceFileUrl, resourceIdFromStorageKey } from "@/services/api/resources";
|
||
import { runBackendGenerationTask, type BackendGenerationResult } from "@/services/api/generation-task";
|
||
import { useConfigStore, type AiConfig, type RunningHubCapability, type WorkflowFieldMapping } from "@/stores/use-config-store";
|
||
import type { ReferenceImage } from "@/types/image";
|
||
import type { ReferenceAudio, ReferenceVideo } from "@/types/media";
|
||
|
||
type WorkflowProvider = "runninghub" | "comfyui";
|
||
type MediaKind = "image" | "video" | "audio";
|
||
type Point = { x: number; y: number };
|
||
type NodePositionMap = Record<string, Point>;
|
||
type TestFile = { id: string; file: File; url: string };
|
||
|
||
type WorkflowTestWorkbenchProps = {
|
||
provider: WorkflowProvider;
|
||
workflowId: string;
|
||
workflowKind?: "workflow" | "app";
|
||
title: string;
|
||
capability: RunningHubCapability;
|
||
fields: WorkflowFieldMapping[];
|
||
disabled?: boolean;
|
||
disabledReason?: string;
|
||
};
|
||
|
||
const initialPositions: NodePositionMap = {
|
||
prompt: { x: 36, y: 46 },
|
||
image: { x: 36, y: 244 },
|
||
video: { x: 36, y: 410 },
|
||
audio: { x: 36, y: 576 },
|
||
workflow: { x: 382, y: 132 },
|
||
output: { x: 758, y: 188 },
|
||
};
|
||
|
||
export function WorkflowTestWorkbench({ provider, workflowId, workflowKind = "workflow", title, capability, fields, disabled = false, disabledReason }: WorkflowTestWorkbenchProps) {
|
||
const { message } = App.useApp();
|
||
const config = useConfigStore((state) => state.config);
|
||
const [prompt, setPrompt] = useState("");
|
||
const [files, setFiles] = useState<Record<MediaKind, TestFile[]>>({ image: [], video: [], audio: [] });
|
||
const [fieldValues, setFieldValues] = useState<Record<string, unknown>>(() => initialFieldValues(fields, config));
|
||
const [positions, setPositions] = useState<NodePositionMap>(initialPositions);
|
||
const [running, setRunning] = useState(false);
|
||
const [progress, setProgress] = useState(0);
|
||
const [stage, setStage] = useState("等待运行");
|
||
const [result, setResult] = useState<BackendGenerationResult | null>(null);
|
||
const [error, setError] = useState("");
|
||
const canvasRef = useRef<HTMLDivElement>(null);
|
||
const autoOutputXRef = useRef(initialPositions.output.x);
|
||
const [canvasWidth, setCanvasWidth] = useState(1040);
|
||
const abortRef = useRef<AbortController | null>(null);
|
||
const filesRef = useRef(files);
|
||
|
||
const activeFields = useMemo(() => fields.filter((field) => field.enabled !== false), [fields]);
|
||
const slots = useMemo(() => mediaSlotCounts(activeFields), [activeFields]);
|
||
const imageReferenceCount = useMemo(() => referenceImageSlotCount(activeFields), [activeFields]);
|
||
const maskEnabled = useMemo(() => activeFields.some((field) => field.source === "mask"), [activeFields]);
|
||
const parameterFields = useMemo(() => uniqueParameterFields(activeFields), [activeFields]);
|
||
const visibleMediaKinds = (Object.keys(slots) as MediaKind[]).filter((kind) => slots[kind] > 0);
|
||
const resultUrls = generationResultUrls(result, capability);
|
||
|
||
useEffect(() => {
|
||
setFieldValues(initialFieldValues(fields, config));
|
||
setResult(null);
|
||
setError("");
|
||
setProgress(0);
|
||
setStage("等待运行");
|
||
}, [workflowId, workflowKind, fields, config.size, config.quality, config.vquality]);
|
||
|
||
useEffect(() => {
|
||
filesRef.current = files;
|
||
}, [files]);
|
||
|
||
useEffect(() => {
|
||
const canvas = canvasRef.current;
|
||
const scroll = canvas?.parentElement;
|
||
if (!scroll) return;
|
||
const measure = () => setCanvasWidth(Math.max(1040, scroll.clientWidth));
|
||
measure();
|
||
const observer = new ResizeObserver(measure);
|
||
observer.observe(scroll);
|
||
return () => observer.disconnect();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const nextOutputX = Math.max(758, canvasWidth - 324 - 36);
|
||
setPositions((current) => {
|
||
// 用户手动拖动过输出节点后尊重其位置，不再被窗口尺寸变化覆盖。
|
||
if (current.output.x !== autoOutputXRef.current || current.output.x === nextOutputX) return current;
|
||
autoOutputXRef.current = nextOutputX;
|
||
return { ...current, output: { ...current.output, x: nextOutputX } };
|
||
});
|
||
}, [canvasWidth]);
|
||
|
||
useEffect(
|
||
() => () => {
|
||
abortRef.current?.abort();
|
||
Object.values(filesRef.current)
|
||
.flat()
|
||
.forEach((item) => URL.revokeObjectURL(item.url));
|
||
},
|
||
[],
|
||
);
|
||
|
||
const replaceFiles = (kind: MediaKind, selected: FileList | null) => {
|
||
if (!selected?.length) return;
|
||
const limit = Math.max(1, slots[kind]);
|
||
const next = Array.from(selected)
|
||
.slice(0, limit)
|
||
.map((file) => ({ id: crypto.randomUUID(), file, url: URL.createObjectURL(file) }));
|
||
setFiles((current) => {
|
||
current[kind].forEach((item) => URL.revokeObjectURL(item.url));
|
||
return { ...current, [kind]: next };
|
||
});
|
||
};
|
||
|
||
const resetTest = () => {
|
||
Object.values(files)
|
||
.flat()
|
||
.forEach((item) => URL.revokeObjectURL(item.url));
|
||
setFiles({ image: [], video: [], audio: [] });
|
||
setPrompt("");
|
||
setFieldValues(initialFieldValues(fields, config));
|
||
const nextOutputX = Math.max(758, canvasWidth - 324 - 36);
|
||
autoOutputXRef.current = nextOutputX;
|
||
setPositions({ ...initialPositions, output: { ...initialPositions.output, x: nextOutputX } });
|
||
setResult(null);
|
||
setError("");
|
||
setProgress(0);
|
||
setStage("等待运行");
|
||
};
|
||
|
||
const runTest = async () => {
|
||
if (disabled) return message.warning(disabledReason || "请先完成工作流配置");
|
||
const missing = missingRequiredInput(activeFields, prompt, files, fieldValues);
|
||
if (missing) return message.warning(missing);
|
||
const controller = new AbortController();
|
||
abortRef.current = controller;
|
||
setRunning(true);
|
||
setResult(null);
|
||
setError("");
|
||
setProgress(0);
|
||
setStage("正在提交任务");
|
||
try {
|
||
const testConfig = buildTestConfig(config, provider, workflowId, workflowKind, activeFields, fieldValues);
|
||
const response = await runBackendGenerationTask({
|
||
mode: capability,
|
||
prompt,
|
||
config: testConfig,
|
||
referenceImages: files.image.slice(0, imageReferenceCount).map(toReferenceImage),
|
||
referenceVideos: files.video.map(toReferenceVideo),
|
||
referenceAudios: files.audio.map(toReferenceAudio),
|
||
mask: maskEnabled && files.image[imageReferenceCount] ? toReferenceImage(files.image[imageReferenceCount]) : undefined,
|
||
signal: controller.signal,
|
||
metadata: { source: "workflow_settings_test", workflowProvider: provider, workflowId },
|
||
onTaskUpdate: (task) => {
|
||
setProgress(Math.max(0, Math.min(100, Number(task.progress) || 0)));
|
||
setStage(taskStageLabel(task.status, task.stage));
|
||
},
|
||
});
|
||
setResult(response);
|
||
setProgress(100);
|
||
setStage("测试完成");
|
||
message.success("工作流测试完成");
|
||
} catch (reason) {
|
||
if (controller.signal.aborted) {
|
||
setStage("已停止等待");
|
||
return;
|
||
}
|
||
const detail = generationErrorMessage(reason);
|
||
setError(detail);
|
||
setStage("测试失败");
|
||
message.error(detail);
|
||
} finally {
|
||
if (abortRef.current === controller) abortRef.current = null;
|
||
setRunning(false);
|
||
}
|
||
};
|
||
|
||
const stopTest = () => {
|
||
abortRef.current?.abort();
|
||
setStage("正在停止等待");
|
||
};
|
||
|
||
return (
|
||
<div className="workflow-test-workbench">
|
||
<div className="workflow-test-toolbar">
|
||
<div className="min-w-0">
|
||
<strong>{title || workflowId || "未选择工作流"}</strong>
|
||
<span>
|
||
{provider === "runninghub" ? "RunningHub" : "ComfyUI Bridge"} · {capabilityName(capability)}工作流 · 测试值不会覆盖保存配置
|
||
</span>
|
||
</div>
|
||
<div className="workflow-test-toolbar-actions">
|
||
<Button icon={<RotateCcw className="size-4" />} disabled={running} onClick={resetTest}>
|
||
重置测试
|
||
</Button>
|
||
{running ? (
|
||
<Button danger icon={<Square className="size-4" />} onClick={stopTest}>
|
||
停止等待
|
||
</Button>
|
||
) : (
|
||
<Button type="primary" icon={<Play className="size-4" />} disabled={disabled} onClick={() => void runTest()}>
|
||
运行测试
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
{disabled && disabledReason ? <div className="workflow-test-notice">{disabledReason}</div> : null}
|
||
<div className="workflow-test-canvas-scroll">
|
||
<div ref={canvasRef} className="workflow-test-canvas" data-canvas-no-zoom>
|
||
<svg className="workflow-test-lines" aria-hidden="true" viewBox={`0 0 ${canvasWidth} 760`} preserveAspectRatio="none">
|
||
<WorkflowLine from={positions.prompt} to={positions.workflow} fromWidth={284} toOffsetY={74} />
|
||
{visibleMediaKinds.map((kind, index) => (
|
||
<WorkflowLine key={kind} from={positions[kind]} to={positions.workflow} fromWidth={284} fromOffsetY={64} toOffsetY={112 + index * 26} />
|
||
))}
|
||
<WorkflowLine from={positions.workflow} to={positions.output} fromWidth={324} fromOffsetY={84} toOffsetY={70} />
|
||
</svg>
|
||
|
||
<WorkflowNode id="prompt" title="提示词" icon={<WandSparkles />} position={positions.prompt} onMove={(point) => setPositions((current) => ({ ...current, prompt: point }))}>
|
||
<Input.TextArea value={prompt} autoSize={{ minRows: 4, maxRows: 7 }} placeholder="输入本次测试提示词" onChange={(event) => setPrompt(event.target.value)} />
|
||
</WorkflowNode>
|
||
|
||
{visibleMediaKinds.map((kind) => (
|
||
<WorkflowNode
|
||
key={kind}
|
||
id={kind}
|
||
title={`${kind === "image" && maskEnabled ? "图片 / 蒙版" : mediaName(kind)}素材 · ${slots[kind]} 个槽位`}
|
||
icon={mediaIcon(kind)}
|
||
position={positions[kind]}
|
||
onMove={(point) => setPositions((current) => ({ ...current, [kind]: point }))}
|
||
>
|
||
<MediaPicker kind={kind} limit={slots[kind]} files={files[kind]} maskIndex={kind === "image" && maskEnabled ? imageReferenceCount : undefined} onChange={(selected) => replaceFiles(kind, selected)} />
|
||
</WorkflowNode>
|
||
))}
|
||
|
||
<WorkflowNode id="workflow" title={title || "工作流动态参数"} icon={<Grip />} position={positions.workflow} wide onMove={(point) => setPositions((current) => ({ ...current, workflow: point }))}>
|
||
<div className="workflow-test-parameters">
|
||
{parameterFields.length ? (
|
||
parameterFields.map((field) => {
|
||
const key = testFieldKey(field);
|
||
return <WorkflowParameter key={key} field={field} value={fieldValues[key]} onChange={(value) => setFieldValues((current) => ({ ...current, [key]: value }))} />;
|
||
})
|
||
) : (
|
||
<span className="workflow-test-empty-text">此工作流没有额外动态参数</span>
|
||
)}
|
||
</div>
|
||
</WorkflowNode>
|
||
|
||
<WorkflowNode
|
||
id="output"
|
||
title={`${capabilityName(capability)}输出`}
|
||
icon={capability === "image" ? <FileImage /> : capability === "video" ? <Film /> : <FileAudio />}
|
||
position={positions.output}
|
||
onMove={(point) => setPositions((current) => ({ ...current, output: point }))}
|
||
>
|
||
<div className="workflow-test-output">{resultUrls.length ? <ResultPreview capability={capability} urls={resultUrls} /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={error || stage} />}</div>
|
||
<Progress percent={progress} size="small" status={error ? "exception" : running ? "active" : undefined} showInfo={running || progress > 0} />
|
||
</WorkflowNode>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function WorkflowNode({ id, title, icon, position, onMove, wide = false, children }: { id: string; title: string; icon: ReactNode; position: Point; onMove: (point: Point) => void; wide?: boolean; children: ReactNode }) {
|
||
const dragRef = useRef<{ pointerId: number; offsetX: number; offsetY: number } | null>(null);
|
||
const startDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
|
||
const target = event.currentTarget.parentElement;
|
||
const canvas = target?.parentElement;
|
||
if (!target || !canvas) return;
|
||
const rect = target.getBoundingClientRect();
|
||
dragRef.current = { pointerId: event.pointerId, offsetX: event.clientX - rect.left, offsetY: event.clientY - rect.top };
|
||
event.currentTarget.setPointerCapture(event.pointerId);
|
||
};
|
||
const moveDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
|
||
if (!dragRef.current || dragRef.current.pointerId !== event.pointerId) return;
|
||
const canvas = event.currentTarget.parentElement?.parentElement;
|
||
const node = event.currentTarget.parentElement;
|
||
if (!canvas) return;
|
||
const rect = canvas.getBoundingClientRect();
|
||
const width = wide ? 324 : 284;
|
||
const height = node?.offsetHeight || 92;
|
||
onMove({ x: Math.max(12, Math.min(rect.width - width - 12, event.clientX - rect.left - dragRef.current.offsetX)), y: Math.max(12, Math.min(rect.height - height - 12, event.clientY - rect.top - dragRef.current.offsetY)) });
|
||
};
|
||
const finishDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
|
||
dragRef.current = null;
|
||
if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
|
||
};
|
||
return (
|
||
<section className={`workflow-test-node${wide ? " is-wide" : ""}`} style={{ transform: `translate(${position.x}px, ${position.y}px)` }} data-node-id={id}>
|
||
<div className="workflow-test-node-header" onPointerDown={startDrag} onPointerMove={moveDrag} onPointerUp={finishDrag} onPointerCancel={finishDrag}>
|
||
<span>{icon}</span>
|
||
<strong title={title}>{title}</strong>
|
||
<Grip className="workflow-test-node-grip" />
|
||
</div>
|
||
<div className="workflow-test-node-body">{children}</div>
|
||
<i className="workflow-test-port is-input" />
|
||
<i className="workflow-test-port is-output" />
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function WorkflowLine({ from, to, fromWidth, fromOffsetY = 54, toOffsetY }: { from: Point; to: Point; fromWidth: number; fromOffsetY?: number; toOffsetY: number }) {
|
||
const x1 = from.x + fromWidth;
|
||
const y1 = from.y + fromOffsetY;
|
||
const x2 = to.x;
|
||
const y2 = to.y + toOffsetY;
|
||
const curve = Math.max(52, Math.abs(x2 - x1) * 0.46);
|
||
return <path d={`M ${x1} ${y1} C ${x1 + curve} ${y1}, ${x2 - curve} ${y2}, ${x2} ${y2}`} />;
|
||
}
|
||
|
||
function MediaPicker({ kind, limit, files, maskIndex, onChange }: { kind: MediaKind; limit: number; files: TestFile[]; maskIndex?: number; onChange: (files: FileList | null) => void }) {
|
||
return (
|
||
<label className="workflow-test-upload">
|
||
<input
|
||
type="file"
|
||
hidden
|
||
multiple={limit > 1}
|
||
accept={kind === "image" ? "image/*" : kind === "video" ? "video/*" : "audio/*"}
|
||
onChange={(event) => {
|
||
onChange(event.target.files);
|
||
event.currentTarget.value = "";
|
||
}}
|
||
/>
|
||
{files.length ? (
|
||
<div className="workflow-test-file-list">
|
||
{files.map((item, index) => (
|
||
<span key={item.id} title={item.file.name}>
|
||
{kind === "image" ? <img src={item.url} alt="" /> : mediaIcon(kind)}
|
||
<b>{maskIndex === index ? "蒙版" : index + 1}</b>
|
||
<em>{item.file.name}</em>
|
||
</span>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<span>
|
||
<Upload />
|
||
选择{mediaName(kind)}（最多 {limit} 个）
|
||
</span>
|
||
)}
|
||
</label>
|
||
);
|
||
}
|
||
|
||
function WorkflowParameter({ field, value, onChange }: { field: WorkflowFieldMapping; value: unknown; onChange: (value: unknown) => void }) {
|
||
const label = field.label || field.fieldName;
|
||
const type = String(field.fieldType || "").toUpperCase();
|
||
if (field.randomEnabled && !field.source)
|
||
return (
|
||
<label>
|
||
<span title={`${field.nodeId}.${field.fieldName}`}>
|
||
{label}
|
||
<small>
|
||
{field.nodeId}.{field.fieldName}
|
||
</small>
|
||
</span>
|
||
<Input value="每次运行随机生成" disabled />
|
||
</label>
|
||
);
|
||
return (
|
||
<label>
|
||
<span title={`${field.nodeId}.${field.fieldName}`}>
|
||
{label}
|
||
<small>
|
||
{field.nodeId}.{field.fieldName}
|
||
</small>
|
||
</span>
|
||
{Array.isArray(field.options) && field.options.length ? (
|
||
<Select showSearch value={value} options={field.options.map((option) => ({ label: String(option), value: option }))} onChange={onChange} />
|
||
) : type === "BOOLEAN" || typeof value === "boolean" ? (
|
||
<Switch checked={value === true || value === "true"} onChange={onChange} />
|
||
) : type === "NUMBER" || typeof value === "number" ? (
|
||
<InputNumber className="w-full" value={numberValue(value)} min={numberValue(field.min)} max={numberValue(field.max)} step={numberValue(field.step)} onChange={onChange} />
|
||
) : (
|
||
<Input value={displayValue(value)} onChange={(event) => onChange(event.target.value)} />
|
||
)}
|
||
</label>
|
||
);
|
||
}
|
||
|
||
function ResultPreview({ capability, urls }: { capability: RunningHubCapability; urls: string[] }) {
|
||
if (capability === "video") return <video src={urls[0]} controls playsInline />;
|
||
if (capability === "audio") return <audio src={urls[0]} controls />;
|
||
return (
|
||
<div className="workflow-test-image-results">
|
||
{urls.map((url) => (
|
||
<img key={url} src={url} alt="工作流测试输出" />
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 测试参数只写入本次任务配置副本，正式工作流仍由设置页的显式保存动作维护。
|
||
function buildTestConfig(config: AiConfig, provider: WorkflowProvider, workflowId: string, workflowKind: "workflow" | "app", fields: WorkflowFieldMapping[], values: Record<string, unknown>): AiConfig {
|
||
const patchedFields = fields.map((field) => {
|
||
const value = values[testFieldKey(field)];
|
||
return value === undefined ? { ...field } : { ...field, fieldValue: value };
|
||
});
|
||
const next: AiConfig = { ...config, taskWorkflowProvider: provider };
|
||
applySourceValues(next, fields, values);
|
||
if (provider === "runninghub") {
|
||
next.runningHub = {
|
||
...config.runningHub,
|
||
enabled: true,
|
||
workflowId,
|
||
selectedKind: workflowKind,
|
||
workflows: config.runningHub.workflows.map((item) => (item.workflowId.trim() === workflowId.trim() && (item.kind === "app" ? "app" : "workflow") === workflowKind ? { ...item, fields: patchedFields } : item)),
|
||
};
|
||
} else {
|
||
next.comfyBridge = { ...config.comfyBridge, enabled: true, workflowId, workflows: config.comfyBridge.workflows.map((item) => (item.workflowId.trim() === workflowId.trim() ? { ...item, fields: patchedFields } : item)) };
|
||
}
|
||
return next;
|
||
}
|
||
|
||
function applySourceValues(config: AiConfig, fields: WorkflowFieldMapping[], values: Record<string, unknown>) {
|
||
const assigned = new Set<string>();
|
||
fields.forEach((field) => {
|
||
const source = String(field.source || "");
|
||
if (!source || assigned.has(source) || isPromptOrMediaSource(source)) return;
|
||
assigned.add(source);
|
||
const value = values[testFieldKey(field)];
|
||
if (source === "size" || source === "aspectRatio") config.size = String(value || config.size);
|
||
else if (source === "width" || source === "height") {
|
||
const width = String(values[sourceValueKey(fields, "width")] || dimensionFromSize(config.size, 0));
|
||
const height = String(values[sourceValueKey(fields, "height")] || dimensionFromSize(config.size, 1));
|
||
if (width && height) config.size = `${width}x${height}`;
|
||
} else if (source in config && typeof config[source as keyof AiConfig] === "string") {
|
||
(config as unknown as Record<string, unknown>)[source] = String(value ?? "");
|
||
}
|
||
});
|
||
}
|
||
|
||
function initialFieldValues(fields: WorkflowFieldMapping[], config: AiConfig) {
|
||
const values: Record<string, unknown> = {};
|
||
fields.forEach((field) => {
|
||
if (isPromptOrMediaSource(String(field.source || ""))) return;
|
||
const source = String(field.source || "");
|
||
const workflowValue = field.fieldValue ?? field.value ?? field.defaultValue ?? field.default;
|
||
const configValue = source === "aspectRatio" ? config.size : source === "width" ? dimensionFromSize(config.size, 0) : source === "height" ? dimensionFromSize(config.size, 1) : (config as unknown as Record<string, unknown>)[source];
|
||
values[testFieldKey(field)] = workflowValue !== undefined && workflowValue !== "" ? workflowValue : configValue !== undefined && configValue !== "" ? configValue : "";
|
||
});
|
||
return values;
|
||
}
|
||
|
||
function uniqueParameterFields(fields: WorkflowFieldMapping[]) {
|
||
const keys = new Set<string>();
|
||
return fields.filter((field) => {
|
||
const source = String(field.source || "");
|
||
if (isPromptOrMediaSource(source)) return false;
|
||
const key = testFieldKey(field);
|
||
if (keys.has(key)) return false;
|
||
keys.add(key);
|
||
return true;
|
||
});
|
||
}
|
||
|
||
function testFieldKey(field: WorkflowFieldMapping) {
|
||
const source = String(field.source || "");
|
||
return source ? `source:${source}` : `field:${field.nodeId}:${field.fieldName}`;
|
||
}
|
||
|
||
function sourceValueKey(fields: WorkflowFieldMapping[], source: string) {
|
||
const field = fields.find((item) => item.source === source);
|
||
return field ? testFieldKey(field) : `source:${source}`;
|
||
}
|
||
|
||
function mediaSlotCounts(fields: WorkflowFieldMapping[]) {
|
||
const result: Record<MediaKind, number> = { image: 0, video: 0, audio: 0 };
|
||
const imageReferences = referenceImageSlotCount(fields);
|
||
const hasMask = fields.some((field) => field.source === "mask");
|
||
result.image = imageReferences + (hasMask ? 1 : 0);
|
||
fields.forEach((field) => {
|
||
const source = String(field.source || "");
|
||
if (source === "referenceVideo") result.video = Math.max(result.video, Number(field.sourceIndex) + 1 || 1);
|
||
if (source === "referenceAudio") result.audio = Math.max(result.audio, Number(field.sourceIndex) + 1 || 1);
|
||
});
|
||
return result;
|
||
}
|
||
|
||
function missingRequiredInput(fields: WorkflowFieldMapping[], prompt: string, files: Record<MediaKind, TestFile[]>, values: Record<string, unknown>) {
|
||
if (!prompt.trim()) return "请填写测试提示词";
|
||
const imageReferences = referenceImageSlotCount(fields);
|
||
for (const field of fields) {
|
||
if (!field.required) continue;
|
||
const source = String(field.source || "");
|
||
if (source === "prompt" && !prompt.trim()) return "请填写测试提示词";
|
||
const kind = source === "referenceImage" || source === "mask" ? "image" : source === "referenceVideo" ? "video" : source === "referenceAudio" ? "audio" : null;
|
||
const index = source === "mask" ? imageReferences : source === "referenceImage" ? Math.max(0, (Number(field.imageOrder) || 1) - 1) : Math.max(0, Number(field.sourceIndex) || 0);
|
||
if (kind && !files[kind][index]) return `请上传第 ${index + 1} 个${mediaName(kind)}素材`;
|
||
if (!source && !field.randomEnabled && isEmptyTestValue(values[testFieldKey(field)])) return `请填写动态参数：${field.label || field.fieldName}`;
|
||
}
|
||
return "";
|
||
}
|
||
|
||
function referenceImageSlotCount(fields: WorkflowFieldMapping[]) {
|
||
return fields.reduce((count, field) => (field.source === "referenceImage" ? Math.max(count, Number(field.imageOrder) || Number(field.sourceIndex) + 1 || 1) : count), 0);
|
||
}
|
||
|
||
function isPromptOrMediaSource(source: string) {
|
||
return ["prompt", "referenceImage", "referenceVideo", "referenceAudio", "mask"].includes(source);
|
||
}
|
||
|
||
function generationResultUrls(result: BackendGenerationResult | null, capability: RunningHubCapability) {
|
||
const media = capability === "image" ? result?.images || [] : capability === "video" ? (result?.video ? [result.video] : []) : result?.audio ? [result.audio] : [];
|
||
return media
|
||
.map((item) => {
|
||
const resourceId = resourceIdFromStorageKey(item.storageKey);
|
||
return resourceId ? resourceFileUrl(resourceId) : item.dataUrl || "";
|
||
})
|
||
.filter(Boolean);
|
||
}
|
||
|
||
function toReferenceImage(item: TestFile): ReferenceImage {
|
||
return { id: item.id, name: item.file.name, type: item.file.type, dataUrl: item.url, bytes: item.file.size };
|
||
}
|
||
function toReferenceVideo(item: TestFile): ReferenceVideo {
|
||
return { id: item.id, name: item.file.name, type: item.file.type, url: item.url, bytes: item.file.size };
|
||
}
|
||
function toReferenceAudio(item: TestFile): ReferenceAudio {
|
||
return { id: item.id, name: item.file.name, type: item.file.type, url: item.url, bytes: item.file.size };
|
||
}
|
||
function dimensionFromSize(size: string, index: number) {
|
||
const normalized = size.toLowerCase().trim();
|
||
const pixels = normalized.split("x");
|
||
if (pixels.length === 2 && pixels.every((item) => Number(item.trim()) > 0)) return pixels[index]?.trim() || "";
|
||
const ratio = normalized
|
||
.replace(/-(1k|2k|4k)$/, "")
|
||
.split(":")
|
||
.map(Number);
|
||
if (ratio.length !== 2 || ratio.some((item) => !Number.isFinite(item) || item <= 0)) return "";
|
||
const longEdgeTier = normalized.endsWith("-4k") ? 3840 : normalized.endsWith("-2k") ? 2048 : 0;
|
||
const dimensions =
|
||
longEdgeTier > 0
|
||
? ratio[0] >= ratio[1]
|
||
? [longEdgeTier, Math.round((longEdgeTier * ratio[1]) / ratio[0])]
|
||
: [Math.round((longEdgeTier * ratio[0]) / ratio[1]), longEdgeTier]
|
||
: ratio[0] >= ratio[1]
|
||
? [Math.round((1024 * ratio[0]) / ratio[1]), 1024]
|
||
: [1024, Math.round((1024 * ratio[1]) / ratio[0])];
|
||
return String(dimensions[index]);
|
||
}
|
||
function isEmptyTestValue(value: unknown) {
|
||
return value === undefined || value === null || (typeof value === "string" && !value.trim());
|
||
}
|
||
function numberValue(value: unknown) {
|
||
const parsed = Number(value);
|
||
return Number.isFinite(parsed) ? parsed : undefined;
|
||
}
|
||
function displayValue(value: unknown) {
|
||
return value === undefined || value === null ? "" : typeof value === "string" ? value : JSON.stringify(value);
|
||
}
|
||
function capabilityName(value: RunningHubCapability) {
|
||
return value === "video" ? "视频" : value === "audio" ? "音频" : "图片";
|
||
}
|
||
function mediaName(value: MediaKind) {
|
||
return value === "video" ? "视频" : value === "audio" ? "音频" : "图片";
|
||
}
|
||
function mediaIcon(value: MediaKind) {
|
||
return value === "video" ? <Film /> : value === "audio" ? <FileAudio /> : <FileImage />;
|
||
}
|
||
function taskStageLabel(status: string, stage?: string) {
|
||
if (status === "queued") return "任务已排队";
|
||
if (status === "succeeded") return "正在读取结果";
|
||
if (status === "failed") return "任务失败";
|
||
return stage ? `运行中 · ${stage}` : "工作流运行中";
|
||
}
|