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;