diff --git a/src/components/nodes/GenerateImageNode.tsx b/src/components/nodes/GenerateImageNode.tsx index 4606a69b..9e5e6d3b 100644 --- a/src/components/nodes/GenerateImageNode.tsx +++ b/src/components/nodes/GenerateImageNode.tsx @@ -11,6 +11,27 @@ import { ModelSearchDialog } from "@/components/modals/ModelSearchDialog"; import { useToast } from "@/components/Toast"; import { getImageDimensions, calculateNodeSize } from "@/utils/nodeDimensions"; +// Provider badge component - shows small provider icon for external providers +function ProviderBadge({ provider }: { provider: ProviderType }) { + if (provider === "gemini") return null; + + return ( + + {provider === "replicate" ? ( + + + + + + ) : ( + + + + )} + + ); +} + // All 10 aspect ratios supported by both models const ASPECT_RATIOS: AspectRatio[] = ["1:1", "2:3", "3:2", "3:4", "4:3", "4:5", "5:4", "9:16", "16:9", "21:9"]; @@ -373,17 +394,20 @@ export function GenerateImageNode({ id, data, selected }: NodeProps ); } else { - // External providers: browse button + // External providers: badge + browse button return ( - + <> + + + ); } - }, [isGeminiOnly, nodeData.model, handleModelChange]); + }, [isGeminiOnly, nodeData.model, handleModelChange, currentProvider]); const isNanoBananaPro = isGeminiProvider && nodeData.model === "nano-banana-pro"; const hasCarouselImages = (nodeData.imageHistory || []).length > 1; diff --git a/src/components/nodes/GenerateVideoNode.tsx b/src/components/nodes/GenerateVideoNode.tsx index 66838d4b..6b37ffea 100644 --- a/src/components/nodes/GenerateVideoNode.tsx +++ b/src/components/nodes/GenerateVideoNode.tsx @@ -11,6 +11,25 @@ import { ModelSearchDialog } from "@/components/modals/ModelSearchDialog"; import { useToast } from "@/components/Toast"; import { getVideoDimensions, calculateNodeSize } from "@/utils/nodeDimensions"; +// Provider badge component - shows small provider icon for external providers +function ProviderBadge({ provider }: { provider: ProviderType }) { + return ( + + {provider === "replicate" ? ( + + + + + + ) : ( + + + + )} + + ); +} + // Video generation capabilities const VIDEO_CAPABILITIES: ModelCapability[] = ["text-to-video", "image-to-video"]; @@ -253,15 +272,18 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps ( - - ), []); + <> + + + + ), [currentProvider]); const hasCarouselVideos = (nodeData.videoHistory || []).length > 1;