@twick/studio 0.15.23 → 0.15.24

package/dist/index.mjs

@@ -4908,141 +4908,13 @@ function CaptionsPanelContainer() {
   const captionsPanelProps = useCaptionsPanel();
   return /* @__PURE__ */ jsx(CaptionsPanel, { ...captionsPanelProps });
 }
-const FAL_IMAGE_ENDPOINTS = [
-  {
-    provider: "fal",
-    endpointId: "fal-ai/flux-pro/kontext",
-    label: "FLUX.1 Kontext [pro]",
-    description: "Professional image generation with context-aware editing",
-    popularity: 5,
-    category: "image",
-    inputAsset: ["image"],
-    availableDimensions: [
-      { width: 1024, height: 1024, label: "1024x1024 (1:1)" },
-      { width: 1024, height: 576, label: "1024x576 (16:9)" },
-      { width: 576, height: 1024, label: "576x1024 (9:16)" }
-    ]
-  },
-  {
-    provider: "fal",
-    endpointId: "fal-ai/flux/dev",
-    label: "FLUX.1 [dev]",
-    description: "High-quality image generation",
-    popularity: 5,
-    category: "image",
-    minSteps: 1,
-    maxSteps: 50,
-    defaultSteps: 28,
-    minGuidanceScale: 1,
-    maxGuidanceScale: 20,
-    defaultGuidanceScale: 3.5,
-    hasSeed: true
-  },
-  {
-    provider: "fal",
-    endpointId: "fal-ai/flux/schnell",
-    label: "FLUX.1 [schnell]",
-    description: "Ultra-fast image generation",
-    popularity: 4,
-    category: "image",
-    defaultSteps: 4,
-    availableDimensions: [
-      { width: 1024, height: 1024, label: "1024x1024 (1:1)" },
-      { width: 1024, height: 576, label: "1024x576 (16:9)" },
-      { width: 576, height: 1024, label: "576x1024 (9:16)" }
-    ]
-  },
-  {
-    provider: "fal",
-    endpointId: "fal-ai/gemini-25-flash-image",
-    label: "Gemini 2.5 Flash Image",
-    description: "Rapid text-to-image generation",
-    popularity: 5,
-    category: "image",
-    availableDimensions: [
-      { width: 1024, height: 1024, label: "1024x1024 (1:1)" },
-      { width: 1024, height: 768, label: "1024x768 (4:3)" },
-      { width: 768, height: 1024, label: "768x1024 (3:4)" },
-      { width: 1024, height: 576, label: "1024x576 (16:9)" },
-      { width: 576, height: 1024, label: "576x1024 (9:16)" }
-    ]
-  },
-  {
-    provider: "fal",
-    endpointId: "fal-ai/ideogram/v3",
-    label: "Ideogram V3",
-    description: "Advanced text-to-image with superior text rendering",
-    popularity: 5,
-    category: "image",
-    hasSeed: true,
-    hasNegativePrompt: true
-  }
-];
-const FAL_VIDEO_ENDPOINTS = [
-  {
-    provider: "fal",
-    endpointId: "fal-ai/veo3",
-    label: "Veo 3",
-    description: "Google Veo 3 text-to-video",
-    popularity: 5,
-    category: "video",
-    availableDurations: [4, 6, 8],
-    defaultDuration: 8,
-    availableDimensions: [
-      { width: 576, height: 1024, label: "576x1024 (9:16)" },
-      { width: 1024, height: 576, label: "1024x576 (16:9)" },
-      { width: 1024, height: 1024, label: "1024x1024 (1:1)" }
-    ]
-  },
-  {
-    provider: "fal",
-    endpointId: "fal-ai/veo3/fast",
-    label: "Veo 3 Fast",
-    description: "Accelerated Veo 3 text-to-video",
-    popularity: 5,
-    category: "video",
-    availableDurations: [4, 6, 8],
-    defaultDuration: 8,
-    availableDimensions: [
-      { width: 576, height: 1024, label: "576x1024 (9:16)" },
-      { width: 1024, height: 576, label: "1024x576 (16:9)" },
-      { width: 1024, height: 1024, label: "1024x1024 (1:1)" }
-    ]
-  },
-  {
-    provider: "fal",
-    endpointId: "fal-ai/veo3/image-to-video",
-    label: "Veo 3 Image-to-Video",
-    description: "Animate images with Veo 3",
-    popularity: 5,
-    category: "video",
-    inputAsset: ["image"],
-    availableDurations: [8],
-    defaultDuration: 8
-  },
-  {
-    provider: "fal",
-    endpointId: "fal-ai/kling-video/v2.5-turbo/pro/text-to-video",
-    label: "Kling 2.5 Turbo Pro",
-    description: "Text-to-video with fluid motion",
-    popularity: 5,
-    category: "video",
-    availableDurations: [5, 10],
-    defaultDuration: 5,
-    availableDimensions: [
-      { width: 1024, height: 576, label: "1024x576 (16:9)" },
-      { width: 576, height: 1024, label: "576x1024 (9:16)" },
-      { width: 1024, height: 1024, label: "1024x1024 (1:1)" }
-    ]
-  }
-];
 const DEFAULT_IMAGE_DURATION = 5;
 function GenerateMediaPanelContainer({
   videoResolution,
   addElement,
   studioConfig
 }) {
-  var _a;
+  var _a, _b, _c;
   const { getCurrentTime } = useLivePlayerContext();
   const [tab, setTab] = useState("image");
   const [prompt2, setPrompt] = useState("");
@@ -5053,8 +4925,12 @@ function GenerateMediaPanelContainer({
   const imageService = studioConfig == null ? void 0 : studioConfig.imageGenerationService;
   const videoService = studioConfig == null ? void 0 : studioConfig.videoGenerationService;
   const hasAnyService = !!imageService || !!videoService;
-  const endpoints = tab === "image" ? FAL_IMAGE_ENDPOINTS : FAL_VIDEO_ENDPOINTS;
-  const defaultEndpointId = ((_a = endpoints[0]) == null ? void 0 : _a.endpointId) ?? "";
+  const imageModels = ((_a = imageService == null ? void 0 : imageService.getAvailableModels) == null ? void 0 : _a.call(imageService)) ?? [];
+  const videoModels = ((_b = videoService == null ? void 0 : videoService.getAvailableModels) == null ? void 0 : _b.call(videoService)) ?? [];
+  const endpoints = tab === "image" ? imageModels : videoModels;
+  const defaultEndpointId = ((_c = endpoints[0]) == null ? void 0 : _c.endpointId) ?? "";
+  const selectedEndpoint = endpoints.find((endpoint) => endpoint.endpointId === selectedEndpointId) ?? endpoints[0];
+  const selectedProvider = selectedEndpoint == null ? void 0 : selectedEndpoint.provider;
   useEffect(() => {
     if (!selectedEndpointId && defaultEndpointId) {
       setSelectedEndpointId(defaultEndpointId);
@@ -5116,9 +4992,16 @@ function GenerateMediaPanelContainer({
     setStatus("Starting...");
     try {
       const endpointId = selectedEndpointId || defaultEndpointId;
+      const provider = selectedProvider;
+      if (!endpointId || !provider) {
+        setError("No model is configured for this tab");
+        setIsGenerating(false);
+        setStatus(null);
+        return;
+      }
       if (tab === "image" && imageService) {
         const requestId = await imageService.generateImage({
-          provider: "fal",
+          provider,
           endpointId,
           prompt: prompt2.trim()
         });
@@ -5128,7 +5011,7 @@ function GenerateMediaPanelContainer({
         }
       } else if (tab === "video" && videoService) {
         const requestId = await videoService.generateVideo({
-          provider: "fal",
+          provider,
           endpointId,
           prompt: prompt2.trim()
         });
@@ -5150,7 +5033,8 @@ function GenerateMediaPanelContainer({
     defaultEndpointId,
     imageService,
     videoService,
-    pollStatus
+    pollStatus,
+    selectedProvider
   ]);
   if (!hasAnyService) {
     return /* @__PURE__ */ jsx("div", { className: "panel-container", children: /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "Image and video generation require configuration. Add imageGenerationService and videoGenerationService to StudioConfig." }) });