refactor(media-generators): remove redundant initialization calls

src/app/api/media-generate/route.ts

@@ -2,7 +2,6 @@ import { NextRequest, NextResponse } from "next/server";
 import { auth } from "@/lib/auth";
 import { db } from "@/lib/db";
 import {
-  initializeMediaGenerators,
   getMediaGeneratorPlugin,
   getAvailableModels,
   isMediaGenerationAvailable,
@@ -15,8 +14,6 @@ export async function GET() {
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   }
 
-  initializeMediaGenerators();
-
   const available = isMediaGenerationAvailable();
   const imageModels = getAvailableModels("image");
   const videoModels = getAvailableModels("video");
@@ -90,8 +87,6 @@ export async function POST(request: NextRequest) {
       );
     }
 
-    initializeMediaGenerators();
-
     const plugin = getMediaGeneratorPlugin(provider);
 
     if (!plugin) {

src/components/prompts/media-generator.tsx

@@ -40,14 +40,14 @@ const ASPECT_RATIOS: { value: AspectRatio; label: string }[] = [
   { value: "3:2", label: "3:2 (Photo)" },
   { value: "2:3", label: "2:3 (Portrait)" },
 ];
-import { wiroGeneratorPlugin } from "@/lib/plugins/media-generators/wiro";
-import { falGeneratorPlugin } from "@/lib/plugins/media-generators/fal";
+import { getProviderWebSocketHandler } from "@/lib/plugins/media-generators";
 
 interface MediaGeneratorModel {
   id: string;
   name: string;
   type: "image" | "video";
   provider: string;
+  providerName: string;
 }
 
 interface MediaGeneratorProps {
@@ -76,17 +76,6 @@ function fillPromptVariables(prompt: string): string {
   });
 }
 
-// Get WebSocket handler for a provider
-function getProviderHandler(provider: string): WebSocketHandler {
-  switch (provider) {
-    case "wiro":
-      return wiroGeneratorPlugin.webSocketHandler;
-    case "fal":
-      return falGeneratorPlugin.webSocketHandler;
-    default:
-      throw new Error(`Unknown provider: ${provider}`);
-  }
-}
 
 export function MediaGenerator({
   prompt,
@@ -172,7 +161,7 @@ export function MediaGenerator({
       const { socketAccessToken, webSocketUrl, provider } = await response.json();
 
       // Get provider-specific handler
-      const handler = getProviderHandler(provider);
+      const handler = getProviderWebSocketHandler(provider);
 
       // Connect to WebSocket for progress tracking
       setStatus("queued");
@@ -271,10 +260,7 @@ export function MediaGenerator({
     return acc;
   }, {} as Record<string, MediaGeneratorModel[]>);
 
-  const providerNames: Record<string, string> = {
-    wiro: "Wiro.ai",
-    fal: "Fal.ai",
-  };
+  const providerDisplayName = selectedModel?.providerName || selectedModel?.provider || "";
 
   return (
     <>
@@ -300,7 +286,7 @@ export function MediaGenerator({
             {Object.entries(modelsByProvider).map(([provider, providerModels]) => (
               <div key={provider}>
                 <DropdownMenuLabel className="text-xs text-muted-foreground">
-                  {providerNames[provider] || provider}
+                  {providerModels[0]?.providerName || provider}
                 </DropdownMenuLabel>
                 {providerModels.map((model) => (
                   <DropdownMenuItem
@@ -340,7 +326,7 @@ export function MediaGenerator({
             <DialogTitle>{t("confirmGeneration")}</DialogTitle>
             <DialogDescription>
               {t("confirmGenerationDescription", { 
-                provider: providerNames[selectedModel?.provider || ""] || selectedModel?.provider || "",
+                provider: providerDisplayName,
                 model: selectedModel?.name || ""
               })}
             </DialogDescription>
@@ -403,7 +389,7 @@ export function MediaGenerator({
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
               <Loader2 className="h-5 w-5 animate-spin" />
-              {t("generatingMedia", { provider: selectedModel?.provider || "" })}
+              {t("generatingMedia", { provider: providerDisplayName })}
             </DialogTitle>
             <DialogDescription>
               {t("doNotCloseWindow")}

src/lib/plugins/media-generators/index.ts

@@ -2,6 +2,10 @@
  * Media Generators Plugin Registry
  * 
  * Manages AI-powered media generation plugins for images and videos.
+ * 
+ * To add a new plugin:
+ * 1. Create your plugin file (e.g., ./my-provider.ts) implementing MediaGeneratorPlugin
+ * 2. Import and add it to the `plugins` array below
  */
 
 import { wiroGeneratorPlugin } from "./wiro";
@@ -10,23 +14,33 @@ import type { MediaGeneratorPlugin, MediaGeneratorModel, MediaType, WebSocketHan
 
 export * from "./types";
 
-// Export individual plugins for direct access to handlers
-export { wiroGeneratorPlugin } from "./wiro";
-export { falGeneratorPlugin } from "./fal";
+/**
+ * Register all plugins here - just add your plugin to this array
+ */
+const plugins: MediaGeneratorPlugin[] = [
+  wiroGeneratorPlugin,
+  falGeneratorPlugin,
+  // Add new plugins here:
+  // myNewPlugin,
+];
 
 const mediaGeneratorRegistry = new Map<string, MediaGeneratorPlugin>();
 
 let initialized = false;
 
-export function registerMediaGeneratorPlugin(plugin: MediaGeneratorPlugin): void {
-  mediaGeneratorRegistry.set(plugin.id, plugin);
+function initializeMediaGenerators(): void {
+  if (initialized) return;
+  plugins.forEach((plugin) => mediaGeneratorRegistry.set(plugin.id, plugin));
+  initialized = true;
 }
 
 export function getMediaGeneratorPlugin(id: string): MediaGeneratorPlugin | undefined {
+  initializeMediaGenerators();
   return mediaGeneratorRegistry.get(id);
 }
 
 export function getAllMediaGeneratorPlugins(): MediaGeneratorPlugin[] {
+  initializeMediaGenerators();
   return Array.from(mediaGeneratorRegistry.values());
 }
 
@@ -34,22 +48,13 @@ export function getEnabledMediaGeneratorPlugins(): MediaGeneratorPlugin[] {
   return getAllMediaGeneratorPlugins().filter((p) => p.isEnabled());
 }
 
-export function initializeMediaGenerators(): void {
-  if (initialized) return;
-
-  registerMediaGeneratorPlugin(wiroGeneratorPlugin);
-  registerMediaGeneratorPlugin(falGeneratorPlugin);
-
-  initialized = true;
-}
-
 /**
  * Get all available models from enabled generators
  */
-export function getAvailableModels(type?: MediaType): Array<MediaGeneratorModel & { provider: string }> {
+export function getAvailableModels(type?: MediaType): Array<MediaGeneratorModel & { provider: string; providerName: string }> {
   initializeMediaGenerators();
 
-  const models: Array<MediaGeneratorModel & { provider: string }> = [];
+  const models: Array<MediaGeneratorModel & { provider: string; providerName: string }> = [];
 
   for (const plugin of getEnabledMediaGeneratorPlugins()) {
     const pluginModels = plugin.getModels();
@@ -58,6 +63,7 @@ export function getAvailableModels(type?: MediaType): Array<MediaGeneratorModel
         models.push({
           ...model,
           provider: plugin.id,
+          providerName: plugin.name,
         });
       }
     }
@@ -73,3 +79,15 @@ export function isMediaGenerationAvailable(): boolean {
   initializeMediaGenerators();
   return getEnabledMediaGeneratorPlugins().length > 0;
 }
+
+/**
+ * Get WebSocket handler for a provider
+ */
+export function getProviderWebSocketHandler(providerId: string): WebSocketHandler {
+  initializeMediaGenerators();
+  const plugin = getMediaGeneratorPlugin(providerId);
+  if (!plugin) {
+    throw new Error(`Unknown provider: ${providerId}`);
+  }
+  return plugin.webSocketHandler;
+}