{/* Preview area */}
diff --git a/src/components/nodes/GenerateVideoNode.tsx b/src/components/nodes/GenerateVideoNode.tsx
index f2770b3e..bbe2ea7a 100644
--- a/src/components/nodes/GenerateVideoNode.tsx
+++ b/src/components/nodes/GenerateVideoNode.tsx
@@ -1,7 +1,7 @@
"use client";
import React, { useCallback, useState, useEffect, useMemo, useRef } from "react";
-import { Handle, Position, NodeProps, Node, useReactFlow } from "@xyflow/react";
+import { Handle, Position, NodeProps, Node, useReactFlow, useUpdateNodeInternals } from "@xyflow/react";
import { BaseNode } from "./BaseNode";
import { useCommentNavigation } from "@/hooks/useCommentNavigation";
import { ModelParameters } from "./ModelParameters";
@@ -14,6 +14,7 @@ import { useToast } from "@/components/Toast";
import { getVideoDimensions, calculateNodeSizePreservingHeight } from "@/utils/nodeDimensions";
import { ProviderBadge } from "./ProviderBadge";
import { useVideoBlobUrl } from "@/hooks/useVideoBlobUrl";
+import { isVeoModel, getVeoMetadata } from "@/utils/veoUtils";
// Video generation capabilities
const VIDEO_CAPABILITIES: ModelCapability[] = ["text-to-video", "image-to-video"];
@@ -23,32 +24,61 @@ const VEO_ASPECT_RATIOS = ["16:9", "9:16"] as const;
const VEO_DURATIONS = ["4", "6", "8"] as const;
const VEO_RESOLUTIONS = ["720p", "1080p", "4k"] as const;
-/** Returns true for Gemini-native Veo video models */
-function isVeoModel(modelId: string | undefined): boolean {
- if (!modelId) return false;
- return modelId.startsWith("veo-");
-}
-
-/** Build the hardcoded inputSchema for a Veo model, or undefined for non-Veo */
+/**
+ * Builds a hardcoded input schema for Veo models.
+ * @param modelId - The model ID to build the schema for.
+ * @returns Array of input definitions or undefined if not a Veo model.
+ */
function buildVeoInputSchema(modelId: string): ModelInputDef[] | undefined {
- if (!isVeoModel(modelId)) return undefined;
- const isI2V = modelId.includes("image-to-video");
- const inputs: ModelInputDef[] = [
- { name: "prompt", type: "text", required: true, label: "Prompt" },
- { name: "negative_prompt", type: "text", required: false, label: "Neg. Prompt" },
- ];
- if (isI2V) {
- inputs.unshift({ name: "image", type: "image", required: true, label: "Image" });
+ const metadata = getVeoMetadata(modelId);
+ if (!metadata.isVeo) return undefined;
+
+ const schema: ModelInputDef[] = [];
+
+ // Only include image for Image-to-Video models
+ if (metadata.isI2V) {
+ schema.push({
+ name: metadata.imageParamName,
+ type: "image",
+ required: true,
+ label: "Image",
+ description: "Starting image frame for video"
+ });
}
- return inputs;
+
+ // Prompt and Neg Prompt are always included for Veo
+ schema.push({
+ name: "prompt",
+ type: "text",
+ required: true,
+ label: "Prompt",
+ description: "Text description of the video to generate"
+ });
+
+ schema.push({
+ name: "negative_prompt",
+ type: "text",
+ required: false,
+ label: "Neg. Prompt",
+ description: "Things to avoid in the generated video"
+ });
+
+ return schema;
}
type GenerateVideoNodeType = Node
;
+/**
+ * GenerateVideoNode component for AI video generation.
+ * Supports Google Veo and other external video models.
+ * @param props - Node properties from React Flow.
+ * @returns React component for the video generation node.
+ */
export function GenerateVideoNode({ id, data, selected }: NodeProps) {
const nodeData = data;
const commentNavigation = useCommentNavigation(id);
const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
+ const updateNodeInternals = useUpdateNodeInternals();
// Use stable selector for API keys to prevent unnecessary re-fetches
const { geminiApiKey, replicateApiKey, falApiKey, kieApiKey, replicateEnabled, kieEnabled } = useProviderApiKeys();
const generationsPath = useWorkflowStore((state) => state.generationsPath);
@@ -82,6 +112,10 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps {
setIsLoadingModels(true);
setModelsFetchError(null);
@@ -179,6 +213,11 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps {
const current = nodeData.parameters || {};
@@ -218,18 +257,49 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps updateNodeInternals(id));
},
- [id, setNodes]
+ [id, setNodes, updateNodeInternals]
);
+
+ // Migrate existing/legacy Veo nodes to use the new stable schema automatically
+ useEffect(() => {
+ const modelId = nodeData.selectedModel?.modelId;
+ if (isVeoModel(modelId)) {
+ const stableSchema = buildVeoInputSchema(modelId!);
+ // Use JSON comparison to avoid infinite update loops
+ const currentSchemaJson = JSON.stringify(nodeData.inputSchema);
+ const stableSchemaJson = JSON.stringify(stableSchema);
+
+ if (currentSchemaJson !== stableSchemaJson) {
+ updateNodeData(id, { inputSchema: stableSchema });
+ }
+ }
+ }, [id, nodeData.selectedModel?.modelId, nodeData.inputSchema, updateNodeData]);
+
+ // Update React Flow internals when schema changes so handles are correctly positioned
+ useEffect(() => {
+ updateNodeInternals(id);
+ }, [id, nodeData.inputSchema, updateNodeInternals]);
const regenerateNode = useWorkflowStore((state) => state.regenerateNode);
const isRunning = useWorkflowStore((state) => state.isRunning);
+ /**
+ * Triggers the regeneration of the current node's video.
+ */
const handleRegenerate = useCallback(() => {
regenerateNode(id);
}, [id, regenerateNode]);
// Load video by ID from generations folder
+ /**
+ * Loads a video by its unique ID from the local generations path.
+ * @param videoId - The ID of the video/generation to load.
+ * @returns A promise resolving to the video data or null if not found.
+ */
const loadVideoById = useCallback(async (videoId: string) => {
if (!generationsPath) {
console.error("Generations path not configured");
@@ -301,6 +371,10 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps {
const newSelectedModel: SelectedModel = {
provider: model.provider,
@@ -383,9 +457,12 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps updateNodeInternals(id));
});
});
- }, [id, nodeData.outputVideo, setNodes]);
+ }, [id, nodeData.outputVideo, setNodes, updateNodeInternals]);
return (
<>
@@ -403,213 +480,113 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps
- {/* Dynamic input handles based on model schema */}
- {nodeData.inputSchema && nodeData.inputSchema.length > 0 ? (
- // Render handles from schema, sorted by type (images first, text second)
- // IMPORTANT: Always render "image" and "text" handles to maintain connection
- // compatibility. Schema may only have text inputs (text-to-video models) but
- // we still need the image handle to preserve connections made before model selection.
- (() => {
- const imageInputs = nodeData.inputSchema!.filter(i => i.type === "image");
- const textInputs = nodeData.inputSchema!.filter(i => i.type === "text");
-
- // Always include at least one image and one text handle for connection stability
- const hasImageInput = imageInputs.length > 0;
- const hasTextInput = textInputs.length > 0;
-
- // Build the handles array: schema inputs + fallback defaults if missing
- const handles: Array<{
- id: string;
- type: "image" | "text";
- label: string;
- schemaName: string | null;
- description: string | null;
- isPlaceholder: boolean;
- }> = [];
-
- // Add image handles from schema, or a placeholder if none exist
- if (hasImageInput) {
- imageInputs.forEach((input, index) => {
- handles.push({
- // Always use indexed IDs for schema inputs for consistency
- id: `image-${index}`,
- type: "image",
- label: input.label,
- schemaName: input.name,
- description: input.description || null,
- isPlaceholder: false,
- });
- });
- } else {
- // No image inputs in schema - add placeholder to preserve connections
- handles.push({
- id: "image",
- type: "image",
- label: "Image",
- schemaName: null,
- description: "Not used by this model",
- isPlaceholder: true,
- });
- }
-
- // Add text handles from schema, or a placeholder if none exist
- if (hasTextInput) {
- textInputs.forEach((input, index) => {
- handles.push({
- // Always use indexed IDs for schema inputs for consistency
- id: `text-${index}`,
- type: "text",
- label: input.label,
- schemaName: input.name,
- description: input.description || null,
- isPlaceholder: false,
+ handles={
+ <>
+ {/* Dynamic input handles based on model schema */}
+ {nodeData.inputSchema && nodeData.inputSchema.length > 0 ? (
+ (() => {
+ const imageInputs = nodeData.inputSchema!.filter(i => i.type === "image");
+ const textInputs = nodeData.inputSchema!.filter(i => i.type === "text");
+ const hasImageInput = imageInputs.length > 0;
+ const hasTextInput = textInputs.length > 0;
+
+ const handles: Array<{
+ id: string;
+ type: "image" | "text";
+ label: string;
+ schemaName: string | null;
+ description: string | null;
+ isPlaceholder: boolean;
+ }> = [];
+
+ if (hasImageInput) {
+ imageInputs.forEach((input, index) => {
+ handles.push({
+ id: index === 0 ? "image" : `image-${index}`,
+ type: "image",
+ label: input.label,
+ schemaName: input.name,
+ description: input.description || null,
+ isPlaceholder: false,
+ });
+ });
+ }
+
+ if (hasTextInput) {
+ textInputs.forEach((input, index) => {
+ handles.push({
+ id: index === 0 ? "text" : `text-${index}`,
+ type: "text",
+ label: input.label,
+ schemaName: input.name,
+ description: input.description || null,
+ isPlaceholder: false,
+ });
+ });
+ }
+
+ const imageHandles = handles.filter(h => h.type === "image");
+ const textHandles = handles.filter(h => h.type === "text");
+ const totalSlots = imageHandles.length + textHandles.length + 1;
+
+ return handles.map((handle) => {
+ const isImage = handle.type === "image";
+ const typeIndex = isImage
+ ? imageHandles.findIndex(h => h.id === handle.id)
+ : textHandles.findIndex(h => h.id === handle.id);
+ const adjustedIndex = isImage ? typeIndex : imageHandles.length + 1 + typeIndex;
+ const topPercent = ((adjustedIndex + 1) / (totalSlots + 1)) * 100;
+
+ // Hide handles that are placeholders (not supported by current model)
+ const isHidden = handle.isPlaceholder;
+
+ return (
+
+
+ {!isHidden && (
+
+ {handle.label}
+
+ )}
+
+ );
});
- });
- } else {
- // No text inputs in schema - add placeholder to preserve connections
- handles.push({
- id: "text",
- type: "text",
- label: "Prompt",
- schemaName: null,
- description: "Not used by this model",
- isPlaceholder: true,
- });
- }
-
- // Calculate positions
- const imageHandles = handles.filter(h => h.type === "image");
- const textHandles = handles.filter(h => h.type === "text");
- const totalSlots = imageHandles.length + textHandles.length + 1; // +1 for gap
-
- const renderedHandles = handles.map((handle, index) => {
- // Position: images first, then gap, then text
- const isImage = handle.type === "image";
- const typeIndex = isImage
- ? imageHandles.findIndex(h => h.id === handle.id)
- : textHandles.findIndex(h => h.id === handle.id);
- const adjustedIndex = isImage ? typeIndex : imageHandles.length + 1 + typeIndex;
- const topPercent = ((adjustedIndex + 1) / (totalSlots + 1)) * 100;
-
- return (
-
-
- {/* Handle label - positioned outside node, above the connector */}
-
- {handle.label}
-
-
- );
- });
-
- // Add hidden backward-compatibility handles for edges using non-indexed IDs
- // This ensures edges created with "image"/"text" still work when schema uses "image-0"/"text-0"
- // Note: No data-handletype to avoid being counted in tests - these are purely for edge routing
- return (
+ })()
+ ) : (
<>
- {renderedHandles}
- {hasImageInput && (
-
- )}
- {hasTextInput && (
-
- )}
+
+ Image
+
+ Prompt
- );
- })()
- ) : (
- // Default handles when no schema
- <>
-
- {/* Default image label */}
-
- Image
-
-
- {/* Default text label */}
-
- Prompt
-
+ )}
+
+ {/* Video output handle */}
+
+ Video
- )}
- {/* Video output */}
-
- {/* Output label */}
-
- Video
-
+ }
+ >
{/* Preview area */}
diff --git a/src/store/utils/connectedInputs.ts b/src/store/utils/connectedInputs.ts
index 2a852087..23878beb 100644
--- a/src/store/utils/connectedInputs.ts
+++ b/src/store/utils/connectedInputs.ts
@@ -45,6 +45,11 @@ export interface ConnectedInputs {
/**
* Helper to determine if a handle ID is an image type
*/
+/**
+ * Checks if a handle ID corresponds to an image input/output.
+ * @param handleId - The ID of the handle to check.
+ * @returns True if the handle is related to image data.
+ */
function isImageHandle(handleId: string | null | undefined): boolean {
if (!handleId) return false;
return handleId === "image" || handleId.startsWith("image-") || handleId.includes("frame");
@@ -53,6 +58,11 @@ function isImageHandle(handleId: string | null | undefined): boolean {
/**
* Helper to determine if a handle ID is a text type
*/
+/**
+ * Checks if a handle ID corresponds to a text input/output.
+ * @param handleId - The ID of the handle to check.
+ * @returns True if the handle is related to text data.
+ */
function isTextHandle(handleId: string | null | undefined): boolean {
if (!handleId) return false;
return handleId === "text" || handleId.startsWith("text-") || handleId.includes("prompt");
@@ -61,6 +71,13 @@ function isTextHandle(handleId: string | null | undefined): boolean {
/**
* Extract output data and type from a source node
*/
+/**
+ * Extracts the output data and its type from a source node based on the handle.
+ * @param sourceNode - The node from which data originates.
+ * @param sourceHandle - The specific handle ID on the source node.
+ * @param edgeData - Optional metadata associated with the workflow edge.
+ * @returns An object containing the data type and the actual value.
+ */
function getSourceOutput(
sourceNode: WorkflowNode,
sourceHandle: string | null | undefined,
@@ -123,6 +140,16 @@ function getSourceOutput(
* Get all connected inputs for a node.
* Pure function version of workflowStore.getConnectedInputs.
*/
+/**
+ * Recursively retrieves all connected input data for a specific node.
+ * This is a pure function used for dependency tracking and data flow.
+ * @param nodeId - The ID of the target node.
+ * @param nodes - The complete list of nodes in the workflow.
+ * @param edges - The complete list of edges in the workflow.
+ * @param visited - A set of already visited node IDs to prevent infinite loops.
+ * @param dimmedNodeIds - Optional set of node IDs that are considered inactive.
+ * @returns A structured object containing all connected inputs (images, text, etc.).
+ */
export function getConnectedInputsPure(
nodeId: string,
nodes: WorkflowNode[],
@@ -150,6 +177,7 @@ export function getConnectedInputsPure(
if (inputSchema && inputSchema.length > 0) {
const imageInputs = inputSchema.filter(i => i.type === "image");
const textInputs = inputSchema.filter(i => i.type === "text");
+ const audioInputs = inputSchema.filter(i => i.type === "audio");
imageInputs.forEach((input, index) => {
handleToSchemaName[`image-${index}`] = input.name;
@@ -164,6 +192,13 @@ export function getConnectedInputsPure(
handleToSchemaName["text"] = input.name;
}
});
+
+ audioInputs.forEach((input, index) => {
+ handleToSchemaName[`audio-${index}`] = input.name;
+ if (index === 0) {
+ handleToSchemaName["audio"] = input.name;
+ }
+ });
}
edges
@@ -285,12 +320,27 @@ export function getConnectedInputsPure(
model3d = value;
} else if (type === "video") {
videos.push(value);
- } else if (type === "audio") {
+ } else if (type === "audio" || handleId === "audio" || handleId?.startsWith("audio-")) {
audio.push(value);
} else if (type === "text" || isTextHandle(handleId)) {
- // Defensive: ensure text values are always strings
- // (Guards against corrupted node data during parallel execution)
- text = typeof value === 'string' ? value : String(value);
+ // Multi-handle text input handling:
+ // By default, the first text input (prompt) should populate the main 'text' variable.
+ // Secondary inputs (e.g. text-1/negative_prompt) are handled via dynamicInputs.
+ const stringValue = typeof value === "string" ? value : String(value);
+
+ // Normalize handleId: if it's the primary handle for prompt, set the root 'text'
+ let isPrimaryText = !handleId || handleId === "text" || handleId === "text-0" || handleId === "prompt";
+ if (inputSchema && inputSchema.length > 0) {
+ const textInputs = inputSchema.filter((i) => i.type === "text");
+ if (textInputs.length > 0 && handleId) {
+ const schemaName = handleToSchemaName[handleId];
+ isPrimaryText = schemaName === textInputs[0].name;
+ }
+ }
+
+ if (isPrimaryText) {
+ text = stringValue;
+ }
} else if (isImageHandle(handleId) || !handleId) {
images.push(value);
}
@@ -320,6 +370,12 @@ export function getConnectedInputsPure(
* Validate workflow structure.
* Pure function version of workflowStore.validateWorkflow.
*/
+/**
+ * Validates the integrity and requirements of the workflow structure.
+ * @param nodes - The list of nodes to validate.
+ * @param edges - The list of edges to validate.
+ * @returns An object indicating if the workflow is valid and a list of error messages.
+ */
export function validateWorkflowPure(
nodes: WorkflowNode[],
edges: WorkflowEdge[]
diff --git a/src/types/nodes.ts b/src/types/nodes.ts
index 65725dbd..2769c7a1 100644
--- a/src/types/nodes.ts
+++ b/src/types/nodes.ts
@@ -154,7 +154,7 @@ export interface CarouselVideoItem {
*/
export interface ModelInputDef {
name: string;
- type: "image" | "text";
+ type: "image" | "text" | "audio";
required: boolean;
label: string;
description?: string;
diff --git a/src/utils/veoUtils.ts b/src/utils/veoUtils.ts
new file mode 100644
index 00000000..746b76d0
--- /dev/null
+++ b/src/utils/veoUtils.ts
@@ -0,0 +1,32 @@
+/**
+ * Utility functions for Google Veo models.
+ */
+
+/**
+ * Checks if a model ID corresponds to a Google Veo model.
+ * Supports native Gemini IDs (e.g., "veo-") and Kie IDs (e.g., "veo3/").
+ * @param modelId - The model ID to check.
+ * @returns True if the model is a Veo model.
+ */
+export function isVeoModel(modelId: string | undefined): boolean {
+ if (!modelId) return false;
+ const id = modelId.toLowerCase();
+ return id.startsWith("veo-") || id.startsWith("veo3/") || id.includes("/veo");
+}
+
+/**
+ * Returns complete metadata for a Veo model.
+ * @param modelId - The ID of the model.
+ * @returns An object containing Veo status, I2V status, and correct image parameter name.
+ */
+export function getVeoMetadata(modelId: string | undefined): { isVeo: boolean; isI2V: boolean; imageParamName: string } {
+ if (!isVeoModel(modelId)) {
+ return { isVeo: false, isI2V: false, imageParamName: "image" };
+ }
+
+ const id = modelId!.toLowerCase();
+ const isI2V = id.includes("image-to-video") || id.includes("i2v") || id.includes("image to video");
+ const imageParamName = id.startsWith("veo3") ? "imageUrls" : "image";
+
+ return { isVeo: true, isI2V, imageParamName };
+}