全局风格
盛唐·国风二次元
{renderAssetGroup("角色", assetGroups.role, "新增")}
{renderAssetGroup("场景", assetGroups.scene, "新增")}
{renderAssetGroup("道具", assetGroups.prop, "新增")}
{tableColumns.map((item) => (
{rows.map((row) => (
{item}
))}
{[
row.shot,
row.duration,
row.sceneDescription,
row.shotSize,
row.lighting,
row.dialogue,
row.voiceAndSfx,
row.cameraMovement,
row.imagePrompt,
].map((cell, index) => (
))}
))}
{cell}
{title}
{assets.map((asset) => (
))}
{asset.name}
{asset.description}
{["替换图片", "AI 生角色", "清除图片"].map((item) => (
{item}
))}
删除
event.stopPropagation()}
>
{step === "shots" ? renderShotTable(false) : null}
{step === "assets" ? (
) : null}
{step === "prompts" ? renderShotTable(true) : null}
{promptRow ? (
) : null}
);
}
function getPersistedVideoAnalysisState(node: CloneNode | null | undefined): VideoAnalysisState | null {
if (!node) return null;
const raw =
node?.draftValues?.videoAnalysis &&
typeof node.draftValues.videoAnalysis === "object" &&
!Array.isArray(node.draftValues.videoAnalysis)
? (node.draftValues.videoAnalysis as Record
{node.title || "脚本生成器"}
{steps.map((item, index) => {
const active = item.key === step;
return (
);
})}
3/3 完成后可批量生视频
第 {promptRow.shot} 镜：最终提示词
分镜提示词
分镜图提示词·已生成{promptRow.imagePrompt.includes("[视觉风格") ? promptRow.imagePrompt : `${promptRow.imagePrompt} [视觉风格：盛唐·国风二次元]`}
视频运动提示词
视频运动提示词·已生成{promptRow.motionPrompt.includes("起始状态") ? promptRow.motionPrompt : `起始状态：${promptRow.sceneDescription} 动作过程：${promptRow.cameraMovement}，角色动作自然连贯。 结束状态：镜头停留在关键情绪或剧情转折点。 音效：${promptRow.voiceAndSfx} [视觉风格：盛唐·国风二次元]`}
GVLM 3.1 Flash
消耗 2
{expandedVideoStoryNode ? (
setExpandedVideoStoryNodeId(null)}
/>
) : null}
{lineConnectState ? (
) : null}
{referenceSelectionTargetId ? (
setReferenceSelectionTargetId(null)}
onReturn={() => locateCanvasNode(referenceSelectionTargetId)}
/>
) : null}
{markSelectionTargetId ? (
setMarkSelectionTargetId(null)}
onReturn={() => locateCanvasNode(markSelectionTargetId)}
/>
) : null}
{cancelGenerationConfirmNodeId ? (
setCancelGenerationConfirmNodeId(null)}
onConfirm={() => setCancelGenerationConfirmNodeId(null)}
/>
) : null}
setCanvasCommand(null)}
onCreate={createFreeNode}
onGallerySelect={() => {
setActivePanel("assets");
setCanvasCommand(null);
}}
onHistorySelect={() => {
setActivePanel("historyPicker");
setCanvasCommand(null);
}}
onUploadFiles={addCanvasCommandUploadedFiles}
uploadAccept={videoCanvasFunctionConfig.nodeCreation.upload.accept}
/>
) : null}
{nodeContextMenu && contextNode ? (
setNodeContextMenu(null)}
onConfigure={() => configureNode(contextNode.id)}
onCopy={() => void copyNode(contextNode.id)}
onDelete={() => deleteNode(contextNode.id)}
onDuplicate={() => duplicateNode(contextNode.id)}
onRun={() => runNode(contextNode.id)}
/>
) : null}
{connectionMenu && connectionNode ? (
setConnectionMenu(null)}
onCreate={addConnectedModule}
state={connectionMenu}
/>
) : null}
{selectedPresetAnchor && selectedPresetControlNode ? (
clearNodeGridSplitSelection(selectedPresetControlNode.id)}
onGridSplitCreateNodes={() => createGridSplitImageNodes(selectedPresetControlNode.id)}
onGridSplitUpscale={(scaleFactor) => upscaleSelectedGridSplit(selectedPresetControlNode.id, scaleFactor)}
onComposerSubmit={(payload) => submitSelectedImagePrompt(selectedPresetControlNode.id, payload)}
onImageToolAction={(action, option) => runSelectedImageToolAction(selectedPresetControlNode.id, action, option)}
onPresetSubmit={(prompt, settings) =>
runPresetComposerSubmit(
selectedPresetControlNode.id,
selectedPresetMode ?? "character-three-view",
prompt,
settings
)
}
onStoryToolAction={(action) => runStoryScriptToolbarAction(selectedPresetControlNode.id, action)}
selectedNode={selectedPresetControlNode}
/>
) : null}
{selectedGenericImageNode && selectedGenericImageAnchor ? (
runSelectedImageToolAction(selectedGenericImageNode.id, action, option)}
/>
) : null}
{selectedVideoMediaNode && selectedVideoAnchor ? (
{
setActiveVideoToolbarMode(null);
void requestVideoAnalysis(selectedVideoMediaNode.id);
}}
onAudioVideoSplit={() => splitVideoAudioTrack(selectedVideoMediaNode.id, "audio-video")}
onDownload={() => requestVideoDownload(selectedVideoMediaNode)}
onOpenHd={() => createVideoHdUpscaleFromVideo(selectedVideoMediaNode.id)}
onPreview={() => setVideoPreviewNode(selectedVideoMediaNode)}
onSubtitleErase={(mode) => {
setSubtitleEraseMode(mode);
setActiveVideoToolbarMode("subtitleErase");
}}
onToggleCrop={() => setActiveVideoToolbarMode((current) => current === "crop" ? null : "crop")}
onToggleClip={() => setActiveVideoToolbarMode((current) => current === "clip" ? null : "clip")}
onVoiceSplit={(mode) => splitVideoAudioTrack(selectedVideoMediaNode.id, mode)}
/>
{activeVideoToolbarMode === "crop" ? (
<>
updateVideoCropRect(selectedVideoMediaNode.id, rect)}
/>
applyVideoCropSelection(selectedVideoMediaNode.id)}
onClose={() => setActiveVideoToolbarMode(null)}
title="退出裁剪"
/>
) : null}
{activeVideoToolbarMode === "subtitleErase" && subtitleEraseMode === "smart" ? (
applySubtitleEraseSelection(selectedVideoMediaNode.id, "smart")}
onClose={() => setActiveVideoToolbarMode(null)}
title="关闭去字幕生成器"
/>
) : null}
{activeVideoToolbarMode === "subtitleErase" && subtitleEraseMode === "region" ? (
<>
commitSubtitleEraseRegions(selectedVideoMediaNode.id, [...selectedSubtitleEraseRegions, region])
}
onChangeRegion={(nextRegion) =>
commitSubtitleEraseRegions(
selectedVideoMediaNode.id,
selectedSubtitleEraseRegions.map((region) =>
region.id === nextRegion.id ? nextRegion : region
),
)
}
regions={selectedSubtitleEraseRegions}
/>
0}
canReset={selectedSubtitleEraseRegions.length > 0}
canUndo={selectedSubtitleEraseHistory.past.length > 0}
costLabel={selectedSubtitleEraseRegions.length > 0 ? "0" : "-"}
onApply={() => applySubtitleEraseSelection(selectedVideoMediaNode.id, "region")}
onClose={() => setActiveVideoToolbarMode(null)}
onRedo={() => redoSubtitleEraseRegionChange(selectedVideoMediaNode.id)}
onReset={() => commitSubtitleEraseRegions(selectedVideoMediaNode.id, [])}
onUndo={() => undoSubtitleEraseRegionChange(selectedVideoMediaNode.id)}
regionCount={selectedSubtitleEraseRegions.length}
/>
) : null}
{activeVideoToolbarMode === "clip" ? (
setActiveVideoToolbarMode(null)}
previewUrl={getVideoNodePreviewUrl(selectedVideoMediaNode) || getNodeMediaUrl(selectedVideoMediaNode)}
title={selectedVideoMediaNode.title}
onApply={() => applyVideoClipSelection(selectedVideoMediaNode.id)}
onChange={(range) => updateVideoClipRange(selectedVideoMediaNode.id, range)}
/>
) : null}
) : null}
{selectedNode && selectedTargetModuleKind === "text" && selectedTargetAnchor ? (
{
setNodes((current) =>
current.map((node) =>
node.id === selectedNode.id
? {
...node,
draftValues: {
...(node.draftValues || {}),
content: prompt ? [prompt] : [],
manualEditing: true,
manualTextComposer: true,
params: {
...((node.draftValues?.params as Record | undefined) || {}),
model,
prompt,
},
},
}
: node
)
);
toast.success("文本内容已写入当前模块");
}}
/>
) : null}
{selectedNode && selectedTargetModuleKind === "video" && selectedTargetAnchor ? (
updateVideoCanvasMagicMarks(selectedNode.id, (current) =>
current.filter((mark) => mark.id !== markId)
)
}
onClearMagicMarks={() =>
updateVideoCanvasMagicMarks(selectedNode.id, () => [])
}
onOpenEffectLibrary={() => {
setReferenceSelectionTargetId(null);
setMarkSelectionTargetId(null);
setEffectLibraryTargetNodeId(selectedNode.id);
setSelectedNodeId(selectedNode.id);
setSelectedEdgeId(null);
setCanvasCommand(null);
setNodeContextMenu(null);
setConnectionMenu(null);
setActivePanel("effectLibrary");
setLineConnectState(null);
}}
onOpenRoleLibrary={({ requiresAgreement }) => {
setReferenceSelectionTargetId(null);
setMarkSelectionTargetId(null);
setEffectLibraryTargetNodeId(null);
setRoleLibraryTargetNodeId(selectedNode.id);
setSelectedNodeId(selectedNode.id);
setSelectedEdgeId(null);
setCanvasCommand(null);
setNodeContextMenu(null);
setConnectionMenu(null);
setActivePanel("videoRoleLibrary");
setVideoRoleCompliantLibraryVisible(requiresAgreement);
setVideoRoleAgreementOpen(
requiresAgreement && !videoRoleAgreementAccepted,
);
setLineConnectState(null);
}}
onOpenSubjectLibrary={() => {
setReferenceSelectionTargetId(null);
setMarkSelectionTargetId(null);
setEffectLibraryTargetNodeId(null);
setRoleLibraryTargetNodeId(null);
setSubjectLibraryTargetNodeId(selectedNode.id);
setSelectedNodeId(selectedNode.id);
setSelectedEdgeId(null);
setCanvasCommand(null);
setNodeContextMenu(null);
setConnectionMenu(null);
setActivePanel("videoSubjectLibrary");
setLineConnectState(null);
}}
onModeChange={(mode) => {
setNodes((current) =>
current.map((node) => {
if (node.id !== selectedNode.id) return node;
const params = (node.draftValues?.params || {}) as Record;
const settings =
params.settings && typeof params.settings === "object"
? (params.settings as Record)
: {};
return {
...node,
draftValues: {
...(node.draftValues || {}),
params: {
...params,
mode,
settings: { ...settings, mode },
},
},
};
}),
);
}}
onModelChange={({ model, modelLabel }) => {
const rule = resolveVideoReferenceSelectionRule(
videoCanvasFunctionConfig.videoReferenceSelection,
`${modelLabel} ${model}`,
);
const referenceEdges = edges.filter((edge) => {
if (edge.target !== selectedNode.id) return false;
return isVideoReferenceImageNode(
nodes.find((node) => node.id === edge.source),
);
});
const retainedReferenceIds = new Set(
referenceEdges.slice(0, rule.maxImages).map((edge) => edge.id),
);
const hasRoleReference = Boolean(
getVideoCanvasAttachedRole(selectedNode.draftValues),
);
if (referenceEdges.length > rule.maxImages) {
setEdges((current) =>
current.filter(
(edge) =>
edge.target !== selectedNode.id ||
!isVideoReferenceImageNode(
nodes.find((node) => node.id === edge.source),
) ||
retainedReferenceIds.has(edge.id),
),
);
}
setReferenceSelectionTargetId(null);
setNodes((current) =>
current.map((node) => {
if (node.id !== selectedNode.id) return node;
const params = (node.draftValues?.params || {}) as Record;
const settings =
params.settings && typeof params.settings === "object"
? (params.settings as Record)
: {};
const nextNode = {
...node,
draftValues: {
...(node.draftValues || {}),
params: {
...params,
model,
settings: { ...settings, model, modelLabel },
},
},
};
return withVideoGenerationMode(
nextNode,
retainedReferenceIds.size > 0
? rule.mode
: hasRoleReference
? "first-frame"
: "text-to-video",
);
}),
);
}}
onRemoveEffect={() => {
const legacyEffectIds = new Set(
selectedTargetSourceNodes
.filter(isVideoEffectMaterialNode)
.map((node) => node.id),
);
setNodes((current) =>
current
.filter((node) => !legacyEffectIds.has(node.id))
.map((node) =>
node.id === selectedNode.id
? {
...node,
draftValues: setVideoCanvasAttachedEffect(
node.draftValues,
null,
),
}
: node,
),
);
setEdges((current) =>
current.filter(
(edge) =>
!(
legacyEffectIds.has(edge.source) &&
edge.target === selectedNode.id
),
),
);
setSelectedNodeId(selectedNode.id);
setSelectedEdgeId(null);
}}
onRemoveReference={(sourceId) =>
removeVideoReferenceFromTarget(sourceId, selectedNode.id)
}
onRemoveRole={() => {
const legacyRoleIds = new Set(
selectedTargetSourceNodes
.filter(isVideoRoleMaterialNode)
.map((node) => node.id),
);
const hasImageReference = selectedTargetSourceNodes.some(
(node) => node.inputType === "image",
);
setNodes((current) =>
current
.filter((node) => !legacyRoleIds.has(node.id))
.map((node) => {
if (node.id !== selectedNode.id) return node;
const nextDraftValues = setVideoCanvasAttachedRole(
node.draftValues,
null,
);
const params = (nextDraftValues.params || {}) as Record;
const settings =
params.settings && typeof params.settings === "object"
? (params.settings as Record)
: {};
const mode = hasImageReference ? "first-frame" : "text-to-video";
return {
...node,
draftValues: {
...nextDraftValues,
params: {
...params,
mode,
settings: { ...settings, mode },
},
},
};
}),
);
setEdges((current) =>
current.filter(
(edge) =>
!(legacyRoleIds.has(edge.source) && edge.target === selectedNode.id),
),
);
setSelectedNodeId(selectedNode.id);
setSelectedEdgeId(null);
}}
onRemoveSubject={(subjectId) => {
setNodes((current) =>
current.map((node) =>
node.id === selectedNode.id
? {
...node,
draftValues: removeVideoCanvasAttachedSubject(
node.draftValues,
subjectId,
),
}
: node,
),
);
setSelectedNodeId(selectedNode.id);
setSelectedEdgeId(null);
}}
onAdvancedSettingsChange={(updates) => {
setNodes((current) =>
current.map((node) => {
if (node.id !== selectedNode.id) return node;
const params = (node.draftValues?.params || {}) as Record;
return {
...node,
draftValues: {
...(node.draftValues || {}),
params: mergeVideoCanvasAdvancedSettings(params, updates),
},
};
}),
);
}}
onParameterSettingsChange={(updates) => {
setNodes((current) =>
current.map((node) => {
if (node.id !== selectedNode.id) return node;
const params = (node.draftValues?.params || {}) as Record;
return {
...node,
draftValues: {
...(node.draftValues || {}),
params: mergeVideoCanvasGenerationParameterSettings(
params,
updates,
videoCanvasFunctionConfig.videoGenerationParameters,
),
},
};
}),
);
}}
onPromptChange={(prompt) => {
setNodes((current) =>
current.map((node) =>
node.id === selectedNode.id
? {
...node,
draftValues: {
...(node.draftValues || {}),
prompt,
params: {
...((node.draftValues?.params as
| Record
| undefined) || {}),
prompt,
},
},
}
: node,
),
);
}}
onSmartStoryboardDurationChange={(durationSeconds) => {
setNodes((current) =>
current.map((node) => {
if (node.id !== selectedNode.id) return node;
const params = (node.draftValues?.params || {}) as Record;
const settings =
params.settings && typeof params.settings === "object"
? (params.settings as Record)
: {};
return {
...node,
draftValues: {
...(node.draftValues || {}),
params: {
...params,
duration: durationSeconds,
settings: {
...settings,
duration: `${durationSeconds}s`,
},
},
},
};
}),
);
}}
onSmartStoryboardSave={(smartStoryboard) => {
setNodes((current) =>
current.map((node) =>
node.id === selectedNode.id
? {
...node,
draftValues: setVideoCanvasSmartStoryboard(
node.draftValues,
smartStoryboard,
),
}
: node,
),
);
}}
onMentionsChange={(promptMentions) => {
setNodes((current) =>
current.map((node) =>
node.id === selectedNode.id
? {
...node,
draftValues: {
...(node.draftValues || {}),
promptMentions,
params: {
...((node.draftValues?.params as
| Record
| undefined) || {}),
promptMentions,
},
},
}
: node,
),
);
}}
onMotionMentionsChange={(motionMentions) => {
setNodes((current) =>
current.map((node) =>
node.id === selectedNode.id
? {
...node,
draftValues: {
...(node.draftValues || {}),
motionMentions,
params: {
...((node.draftValues?.params as
| Record
| undefined) || {}),
motionMentions,
},
},
}
: node,
),
);
}}
onStartReferenceSelection={() => {
setMarkSelectionTargetId(null);
setReferenceSelectionTargetId((current) =>
current === selectedNode.id ? null : selectedNode.id
);
setSelectedNodeId(selectedNode.id);
setSelectedEdgeId(null);
setCanvasCommand(null);
setNodeContextMenu(null);
setConnectionMenu(null);
setActivePanel(null);
setLineConnectState(null);
}}
onStartMarkSelection={() => {
setReferenceSelectionTargetId(null);
setMarkSelectionTargetId((current) =>
current === selectedNode.id ? null : selectedNode.id
);
setSelectedNodeId(selectedNode.id);
setSelectedEdgeId(null);
setCanvasCommand(null);
setNodeContextMenu(null);
setConnectionMenu(null);
setActivePanel(null);
setLineConnectState(null);
}}
onUpdateMagicMark={(markId, selectedIndex) =>
updateVideoCanvasMagicMarks(selectedNode.id, (current) =>
current.map((mark) =>
mark.id === markId
? {
...mark,
selectedIndex: Math.max(
0,
Math.min(mark.labelOptions.length - 1, selectedIndex)
),
}
: mark
)
)
}
sourceNodes={selectedTargetSourceNodes}
referenceSelectionActive={referenceSelectionTargetId === selectedNode.id}
onSubmit={(payload) => {
void submitVideoTargetComposer(selectedNode.id, payload);
}}
/>
) : null}
{selectedNode && selectedTargetModuleKind === "audio" && selectedTargetAnchor ? (
setStoryWorkflowNodeId(null)}
onRun={() => {
void runNode(storyWorkflowNode.id);
}}
onStepChange={setStoryWorkflowStep}
step={storyWorkflowStep}
/>
) : null}
toggleTopPanel("account")}
onBeforeCanvasChange={flushCanvasBeforeWorkspaceChange}
onCommitTitle={commitTitle}
onDraftTitleChange={setDraftTitle}
onViewModeChange={(mode) => {
void handleCanvasViewModeChange(mode);
}}
routerBack={() => router.push("/")}
siteLogo={siteBrandSettings?.siteLogo}
siteLogoDark={siteBrandSettings?.siteLogoDark}
siteName={resolvedSiteName}
viewModeSavePending={viewModeSavePending}
/>
{canvasViewMode === "workflow" ? (
<>
{
setCanvasCommand(null);
setNodeContextMenu(null);
setConnectionMenu(null);
setActivePanel((current) => current === panel ? null : panel);
}}
/>
setActivePanel((current) => current === "assetManager" ? null : "assetManager")}
onToggleEdges={() => setEdgesHidden((value) => !value)}
onToggleOverview={() => setDockOverviewOpen((value) => !value)}
onToggleSnap={toggleCanvasGridSnap}
onSetZoom={setZoomAroundViewportCenter}
onViewportChange={setViewport}
onZoomIn={() => zoomBy("in")}
onZoomOut={() => zoomBy("out")}
/>
) : null}
{canvasViewMode === "storyboard" ? (
setActivePanel(null)}
onGallerySelect={() => setActivePanel("assets")}
onHistorySelect={() => setActivePanel("historyPicker")}
onUploadFiles={addUploadedFiles}
uploadAccept={videoCanvasFunctionConfig.nodeCreation.upload.accept}
/>
) : null}
{activePanel === "workflow" && videoCanvasFunctionConfig.toolbox.enabled ? (
setActivePanel(null)}
/>
) : null}
{inspectorNode ? (
edge.target === inspectorNode.id).length}
onAddReference={(node) => addReferenceModulesForTool(node.id)}
onChangeProperty={updateNodeDraft}
onClose={() => setInspectorNodeId(null)}
onGenerate={(node) => void runConfiguredToolNode(node.id)}
/>
) : null}
{activePanel === "assets" ? (
setActivePanel(null)}
onOpenEffectLibrary={() => setActivePanel("effectLibrary")}
onOpenStyleLibrary={() => setActivePanel("styleLibrary")}
/>
) : null}
{activePanel === "effectLibrary" || activePanel === "styleLibrary" ? (
{
setActivePanel(null);
setEffectLibraryTargetNodeId(null);
}}
onApplyStyle={addStyleAssetFromMarket}
selectedEffectId={effectLibraryAttachedEffect?.id || ""}
/>
) : null}
{activePanel === "history" ? (
setActivePanel(null)}
onOpenWatermarkRules={openHistoryWatermarkRules}
onUseNode={reuseHistoryAssetNode}
/>
) : null}
{activePanel === "historyPicker" ? (
setActivePanel(null)}
onConfirm={addHistoryPickerNodes}
/>
) : null}
{historyWatermarkRulesOpen ? (
setVideoPreviewNode(null)}
title={videoPreviewNode.title || "视频"}
/>
) : null}
{activePanel === "assetManager" ? (
setActivePanel(null)}
onDuplicateNode={duplicateNode}
onRenameNode={renameNode}
onResizeStart={startAssetManagerResize}
onSelectNode={locateCanvasNode}
panelWidth={assetManagerWidth}
/>
) : null}
{activePanel === "shortcuts" ? (
setActivePanel(null)} />
) : null}
{activePanel === "tutorial" ? (
setActivePanel(null)}
onOpenCustomerService={() => setCustomerServiceOpen(true)}
/>
) : null}
{customerServiceOpen ? (
setCustomerServiceOpen(false)}
siteLogo={siteBrandSettings?.siteLogoDark || siteBrandSettings?.siteLogo}
siteName={resolvedSiteName}
/>
) : null}
{activePanel === "roleLibrary" ? (
setActivePanel(null)}
roles={videoCanvasFunctionConfig.rolePresets}
/>
) : null}
{activePanel === "videoRoleLibrary" ? (
<>
{
setActivePanel(null);
setRoleLibraryTargetNodeId(null);
setVideoRoleAgreementOpen(false);
setVideoRoleCompliantLibraryVisible(false);
}}
presets={videoCanvasFunctionConfig.rolePresets}
selectedRole={roleLibraryAttachedRole}
showCompliantTab={videoRoleCompliantLibraryVisible}
/>
{videoRoleAgreementOpen ? (
{
setVideoRoleAgreementAccepted(true);
setVideoRoleAgreementOpen(false);
try {
window.localStorage.setItem(
VIDEO_ROLE_AGREEMENT_STORAGE_KEY,
"1",
);
} catch {}
}}
onClose={() => {
setVideoRoleAgreementOpen(false);
setActivePanel(null);
setRoleLibraryTargetNodeId(null);
setVideoRoleCompliantLibraryVisible(false);
}}
/>
) : null}
) : null}
{activePanel === "videoSubjectLibrary" ? (
{
setActivePanel(null);
setSubjectLibraryTargetNodeId(null);
}}
/>
) : null}
{activePanel === "help" ? (
setActivePanel(null)} title="快捷键">
) : null}
{activePanel === "support" ? (
setActivePanel(null)} title="支持中心">
) : null}
{activePanel === "skills" ? (
setActivePanel(null)} siteName={resolvedSiteName} />
) : null}
{activePanel === "share" ? (
setActivePanel(null)}
onCopyLink={() => {
void copyShareLink();
setActivePanel(null);
}}
onPublish={() => setActivePanel("publish")}
siteName={resolvedSiteName}
/>
) : null}
{activePanel === "publish" ? (
setActivePanel(null)}
onTogglePublic={() => setPublishPublic((value) => !value)}
siteName={resolvedSiteName}
/>
) : null}
{activePanel === "member" ? (
setActivePanel(null)} />
) : null}
{activePanel === "notifications" ? (
setActivePanel(null)} />
) : null}
{activePanel === "account" ? (
setActivePanel(null)}
onOpenMember={() => setActivePanel("member")}
/>
) : null}
{previewNode ? (
setPreviewNode(null)} title={previewNode.title || "预览"} width={920}>
) : null}
{directorConsoleNode ? (
persistDirectorCapture(directorConsoleNode, capture)
}
onCaptureDeleted={(capture) =>
scheduleDirectorCaptureDeletion(directorConsoleNode, capture)
}
onAiImportGenerate={generateDirectorAiImport}
onAiImportSourceUpload={(payload) =>
uploadDirectorAiImportSource(directorConsoleNode, payload)
}
onClose={() => setDirectorConsoleNodeId(null)}
onOpenHistoryWatermarkRules={openHistoryWatermarkRules}
onPanoramaAiGenerate={(payload) =>
generateDirectorPanorama(directorConsoleNode, payload)
}
onPanoramaHistoryNodeUse={(historyNode) => {
const mediaType =
getDraftString(historyNode, "mediaType") || historyNode.inputType;
if (
mediaType !== "image" ||
!getNodeReferenceMediaUrl(historyNode)
) {
toast.error("全景图仅支持图片素材");
return Promise.resolve({
error: "全景图仅支持图片素材",
success: false,
});
}
return useDirectorPanoramaHistoryItem(
directorConsoleNode,
historyNode.id,
);
}}
onPanoramaHistoryUse={({ sourceNodeId }) =>
useDirectorPanoramaHistoryItem(directorConsoleNode, sourceNodeId)
}
onPanoramaRemoved={({ edgeId, sourceNodeId }) => {
setEdges((current) =>
current.filter(
(edge) =>
!(
edge.id === edgeId &&
edge.source === sourceNodeId &&
edge.target === directorConsoleNode.id
),
),
);
}}
onPanoramaUpload={(payload) =>
uploadDirectorPanorama(directorConsoleNode, payload)
}
onProjectChange={(project) =>
updateDirectorProject(directorConsoleNode.id, project)
}
onSendCaptures={(captures) => {
void sendDirectorSnapshotsToCanvas(directorConsoleNode, captures);
}}
panorama={directorPanoramaConnection}
panoramaConfig={videoCanvasFunctionConfig.directorDesk.panorama}
panoramaHistory={directorPanoramaHistory}
posePresets={videoCanvasFunctionConfig.directorDesk.posePresets}
project={directorProject}
showBatchCaptureControls={
videoCanvasFunctionConfig.directorDesk.showBatchCaptureControls
}
src={videoCanvasFunctionConfig.directorDesk.embedUrl}
/>
) : null}
{directorTutorialActive && !directorConsoleNode ? (
setDirectorTutorialActive(false)} />
) : null}
{angleEditorNode ? (
{
const angleDefinition = getConfiguredFunction(videoCanvasFunctionConfig, "angle-edit");
const sourceUrl = getNodeMediaUrl(angleEditorNode) || getNodeSourceMediaUrl(angleEditorNode);
let generatedUrl = "";
if (sourceUrl && videoCanvasFunctionConfig.enabled && angleDefinition?.enabled) {
const response = await imageGenerationService.editAngle({
horizontalAngle: settings.horizontalAngle,
imageUrl: sourceUrl,
verticalAngle: settings.verticalAngle,
zoom: settings.zoom,
});
generatedUrl = response.success ? response.data?.url || response.data?.thumbnailUrl || "" : "";
if (!generatedUrl && !response.success) {
toast.error(response.error || "多角度生成失败，已保留参数");
}
}
setNodes((current) =>
current.map((node) =>
node.id === angleEditorNode.id
? {
...node,
draftValues: {
...(node.draftValues || {}),
angleSettings: settings,
params: {
...((node.draftValues?.params as Record | undefined) || {}),
horizontal_angle: settings.horizontalAngle,
prompt: settings.promptEnabled ? "按自定义多角度参数生成视角变化" : "",
vertical_angle: settings.verticalAngle,
zoom: settings.zoom,
},
},
}
: node
)
);
if (generatedUrl) {
const resultNode = createMediaResourceNode({
action: "IMAGE_RESOURCE",
height: 280,
mediaType: "image",
mediaUrl: generatedUrl,
prompt: angleDefinition.prompt,
title: "多角度结果",
width: 420,
x: Math.round(angleEditorNode.x + angleEditorNode.width + OFFICIAL_NODE_GAP),
y: Math.round(angleEditorNode.y + angleEditorNode.height / 2 - 140),
});
setNodes((current) => [
...current,
{
...resultNode,
draftValues: {
...(resultNode.draftValues || {}),
angleSettings: settings,
generated: true,
sourceNodeId: angleEditorNode.id,
sourceUrl,
},
},
]);
setEdges((current) => [
...current,
{ id: makeId("edge"), source: angleEditorNode.id, target: resultNode.id },
]);
setSelectedNodeId(resultNode.id);
}
setAngleEditorNodeId(null);
toast.success(generatedUrl ? "已按多角度参数生成结果" : "已应用多角度参数");
}}
onClose={() => setAngleEditorNodeId(null)}
/>
) : null}
{isBusy ? (
);
}
function TopBar({
canvasId,
canvasViewMode,
draftTitle,
onAccount,
onBeforeCanvasChange,
onCommitTitle,
onDraftTitleChange,
onViewModeChange,
routerBack,
siteLogo,
siteLogoDark,
siteName,
viewModeSavePending,
}: {
canvasId: string;
canvasViewMode: VideoCanvasViewMode;
draftTitle: string;
onAccount: () => void;
onBeforeCanvasChange: () => Promise
正在跟随
按 ESC 退出
0 ? `transform ${viewportTransitionMs}ms ease` : undefined,
width: CANVAS_EXTENT,
}}
>
{edgesHidden ? null : (
openNodeContext(event, node)}
onCancelGeneration={() => cancelGenerationNode(node.id)}
onClearGridSplit={() => dismissNodeGridSplit(node.id)}
onClearGridSplitSelection={() => clearNodeGridSplitSelection(node.id)}
onClearLocalEditRegions={() => clearNodeLocalEditRegions(node.id)}
onExtractVideoFrame={(kind, currentTimeSeconds) => {
void extractVideoFrameNode(node.id, kind, currentTimeSeconds);
}}
onGenerateVideoHd={() => generateVideoHdUpscaleNode(node.id)}
onUpdateVideoHd={(patch) => updateVideoHdUpscaleSettings(node.id, patch)}
onProcessAudio={(request) => processAudioResourceNode(node, request)}
onDownloadAudio={() => downloadMediaNode(node)}
onModuleAction={(actionLabel) => runTargetModuleAction(node.id, actionLabel)}
onOpenConnectionMenu={(event, side) => openConnectionMenu(event, node, side)}
onOpenScriptWorkflow={() => openStoryScriptWorkflow(node.id)}
onOpenVideoStory={() => setExpandedVideoStoryNodeId(node.id)}
onPointerDown={(event) => startNodeDrag(event, node)}
onStartConnectionDrag={(event, side) => startConnectionEndpointDrag(event, node, side)}
onStartConnectionMouseDrag={(event, side) => startConnectionEndpointMouseDrag(event, node, side)}
onRunNode={() => {
const mode = getPresetControlMode(node);
if (mode && !isOfficialImagePresetFunctionKey(mode)) {
void runPresetComposerSubmit(
node.id,
mode,
getDraftString(node, "prompt") || STORY_SCRIPT_PROMPT,
);
return;
}
void runNode(node.id);
}}
onSetLocalEditMode={(enabled) => setNodeLocalEditMode(node.id, enabled)}
onSubmitLocalEdit={(regions) => submitNodeLocalEdit(node.id, regions)}
onToggleGridSplitSelection={(index, behavior) => toggleNodeGridSplitSelection(node.id, index, behavior)}
onUpdateLocalEditRegions={(regions) => updateNodeLocalEditRegions(node.id, regions)}
onTextResourceChange={(content) => updateTextResourceContent(node.id, content)}
nodeCreationConfig={videoCanvasFunctionConfig.nodeCreation}
videoHdConfig={videoCanvasFunctionConfig.videoHd}
/>
))}
{referenceSelectionTargetId
? edges
.filter((edge) => edge.target === referenceSelectionTargetId)
.map((edge) => nodes.find((node) => node.id === edge.source))
.filter((node): node is CloneNode => Boolean(node))
.filter(isVideoReferenceImageNode)
.map((node) => (
updateVideoCanvasMagicMarks(markSelectionTargetId, (current) =>
current.filter((mark) => mark.id !== markId)
)
}
onUpdate={(markId, selectedIndex) =>
updateVideoCanvasMagicMarks(markSelectionTargetId, (current) =>
current.map((mark) =>
mark.id === markId
? {
...mark,
selectedIndex: Math.max(
0,
Math.min(mark.labelOptions.length - 1, selectedIndex)
),
}
: mark
)
)
}
/>
);
})
: null}
{nodes.length === 0 && !activePanel && canvasViewMode === "workflow" ? (
{
event.preventDefault();
event.stopPropagation();
removeVideoReferenceFromTarget(
node.id,
referenceSelectionTargetId,
);
}}
style={{ height: node.height, left: node.x, top: node.y, width: node.width }}
>
取消选择
))
: null}
{markSelectionTargetId
? nodes
.filter((node) => {
const mediaType = getDraftString(node, "mediaType") || node.inputType;
return (
node.id !== markSelectionTargetId &&
node.kind === "media" &&
mediaType === "image" &&
Boolean(getNodeReferenceMediaUrl(node))
);
})
.map((sourceNode) => {
const targetNode = nodes.find((node) => node.id === markSelectionTargetId);
const marks = getVideoCanvasMagicMarks(targetNode).filter(
(mark) => mark.sourceNodeId === sourceNode.id
);
const analysis =
markAnalysisState?.sourceNodeId === sourceNode.id &&
markAnalysisState.targetNodeId === markSelectionTargetId
? markAnalysisState
: null;
if (marks.length === 0 && !analysis) return null;
return (
{STARTER_CARDS.map((card) => {
const cover = card.coverUrl || capturedWorkflows[0]?.cover || "";
return (
);
})}
{[
["V", "选择"],
["Space", "拖动画布"],
["双击画布", "自由生成节点"],
["连接点拖拽", "连接模块"],
["⌘ / Ctrl + S", "保存画布"],
].map(([key, value]) => (
{value}
{key}
))}
onDraftTitleChange(event.target.value)}
onKeyDown={(event) => {
if (event.key === "Enter") event.currentTarget.blur();
}}
value={draftTitle}
/>
{label}
);
}
function StoryboardTextItem({
item,
onOpen,
selected = false,
}: {
item: VideoCanvasStoryboardItem;
onOpen: () => void;
selected?: boolean;
}) {
return (
);
}
function StoryboardMediaItem({
item,
onOpen,
onReference,
selected = false,
}: {
item: VideoCanvasStoryboardItem;
onOpen: () => void;
onReference?: () => void;
selected?: boolean;
}) {
return (
{onReference ? (
) : null}
);
}
function VideoCanvasStoryboardDetailMoreMenu({
itemId,
menuLabel,
onDelete,
onDuplicate,
onSetCategory,
}: {
itemId: string;
menuLabel: string;
onDelete: () => void;
onDuplicate: () => void;
onSetCategory: (category: VideoCanvasKeyElementCategory) => void;
}) {
const [moreMenuOpen, setMoreMenuOpen] = useState(false);
const [categoryMenuOpen, setCategoryMenuOpen] = useState(false);
const moreMenuRef = useRef
{moreMenuOpen ? (
);
}
const STORYBOARD_DETAIL_MODULE_OPTIONS = [
{ label: "文本", value: "text" },
{ label: "图片", value: "image" },
{ label: "视频", value: "video" },
] as const;
function StoryboardTextGenerator({
billingDefinition,
defaultModel,
item,
membershipSummary,
modelOptions,
onGenerate,
}: {
billingDefinition?: VideoCanvasFunctionDefinition;
defaultModel: string;
item: VideoCanvasStoryboardItem;
membershipSummary?: MembershipSummaryResponse;
modelOptions: CanvasModelOption[];
onGenerate: (prompt: string, model: string) => Promise
{categoryMenuOpen ? (
) : null}
{VIDEO_CANVAS_KEY_ELEMENT_CATEGORY_OPTIONS.map((option) => (
))}
) : null}