fix: increase generate API timeout to 15 minutes for video generation

CLAUDE.md

@@ -231,3 +231,6 @@ All routes in `src/app/api/`:
 - Each commit should be atomic and self-contained: one task = one commit.
 - The .planning directory is untracked, do not attempt to commit any changes to the files in this directory.
 
+## Web Crawling
+- Always use `cf crawl` when needing to crawl or fetch website content.
+

package.json

@@ -13,13 +13,13 @@
   },
   "dependencies": {
     "@ai-sdk/google": "^3.0.13",
-    "@ai-sdk/react": "^3.0.51",
+    "@ai-sdk/react": "^3.0.118",
     "@google/genai": "^1.30.0",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
     "@tailwindcss/postcss": "^4.1.17",
     "@xyflow/react": "^12.9.3",
-    "ai": "^6.0.49",
+    "ai": "^6.0.116",
     "autoprefixer": "^10.4.22",
     "jszip": "^3.10.1",
     "konva": "^10.0.12",

src/app/api/generate/route.ts

@@ -22,7 +22,7 @@ import { generateWithWaveSpeed } from "./providers/wavespeed";
 // Re-export for backward compatibility (test file imports from route)
 export const clearFalInputMappingCache = _clearFalInputMappingCache;
 
-export const maxDuration = 300; // 5 minute timeout (Vercel hobby plan limit)
+export const maxDuration = 800; // ~13 minute timeout (Vercel Pro limit)
 export const dynamic = 'force-dynamic'; // Ensure this route is always dynamic
 
 

src/store/execution/generateVideoExecutor.ts

@@ -8,6 +8,7 @@
 import type { GenerateVideoNodeData } from "@/types";
 import { buildGenerateHeaders } from "@/store/utils/buildApiHeaders";
 import type { NodeExecutionContext } from "./types";
+import { compressImagesForUpload } from "@/utils/imageCompression";
 
 export interface GenerateVideoOptions {
   /** When true, falls back to stored inputImages/inputPrompt if no connections provide them. */
@@ -87,12 +88,32 @@ export async function executeGenerateVideo(
   const provider = nodeData.selectedModel.provider;
   const headers = buildGenerateHeaders(provider, providerSettings);
 
+  // Compress images to fit within Vercel's 4.5MB payload limit
+  const compressedImages = images.length > 0 ? await compressImagesForUpload(images) : [];
+
+  // Also compress any images in dynamicInputs
+  const compressedDynamicInputs: Record<string, string | string[]> = {};
+  for (const [key, value] of Object.entries(dynamicInputs)) {
+    if (typeof value === "string" && value.startsWith("data:image")) {
+      compressedDynamicInputs[key] = await compressImagesForUpload([value]).then(arr => arr[0]);
+    } else if (Array.isArray(value)) {
+      const hasImages = value.some(v => typeof v === "string" && v.startsWith("data:image"));
+      if (hasImages) {
+        compressedDynamicInputs[key] = await compressImagesForUpload(value);
+      } else {
+        compressedDynamicInputs[key] = value;
+      }
+    } else {
+      compressedDynamicInputs[key] = value;
+    }
+  }
+
   const requestPayload = {
-    images,
+    images: compressedImages,
     prompt: text,
     selectedModel: nodeData.selectedModel,
     parameters: nodeData.parameters,
-    dynamicInputs,
+    dynamicInputs: compressedDynamicInputs,
     mediaType: "video" as const,
   };
 

src/utils/imageCompression.ts

@@ -0,0 +1,70 @@
+/**
+ * Image compression utility to ensure images fit within API payload limits.
+ * Vercel serverless functions have a 4.5MB body size limit.
+ */
+
+const MAX_PAYLOAD_SIZE = 4 * 1024 * 1024; // 4MB to leave room for other request data
+const MAX_DIMENSION = 2048; // Max width/height
+
+/**
+ * Compress a base64 image to fit within payload limits.
+ * Returns the original if already small enough, otherwise compresses.
+ */
+export async function compressImageForUpload(base64DataUrl: string): Promise<string> {
+  // Not a data URL, return as-is
+  if (!base64DataUrl.startsWith("data:")) return base64DataUrl;
+
+  // Check if already small enough
+  const estimatedSize = Math.ceil((base64DataUrl.length - base64DataUrl.indexOf(",") - 1) * 3 / 4);
+  if (estimatedSize < MAX_PAYLOAD_SIZE) return base64DataUrl;
+
+  // Need to compress - use canvas
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      try {
+        // Calculate new dimensions
+        let { width, height } = img;
+        if (width > MAX_DIMENSION || height > MAX_DIMENSION) {
+          const scale = Math.min(MAX_DIMENSION / width, MAX_DIMENSION / height);
+          width = Math.round(width * scale);
+          height = Math.round(height * scale);
+        }
+
+        // Draw to canvas
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          reject(new Error("Failed to get canvas context"));
+          return;
+        }
+        ctx.drawImage(img, 0, 0, width, height);
+
+        // Try progressively lower quality until under limit
+        let quality = 0.9;
+        let result = canvas.toDataURL("image/jpeg", quality);
+
+        while (result.length > MAX_PAYLOAD_SIZE * 1.33 && quality > 0.1) { // 1.33 accounts for base64 overhead
+          quality -= 0.1;
+          result = canvas.toDataURL("image/jpeg", quality);
+        }
+
+        console.log(`[ImageCompression] Compressed from ${(estimatedSize / 1024 / 1024).toFixed(2)}MB to ${(result.length / 1024 / 1024).toFixed(2)}MB (quality: ${quality.toFixed(1)})`);
+        resolve(result);
+      } catch (error) {
+        reject(error);
+      }
+    };
+    img.onerror = () => reject(new Error("Failed to load image for compression"));
+    img.src = base64DataUrl;
+  });
+}
+
+/**
+ * Compress multiple images
+ */
+export async function compressImagesForUpload(images: string[]): Promise<string[]> {
+  return Promise.all(images.map(compressImageForUpload));
+}

vercel.json

@@ -0,0 +1,7 @@
+{
+  "functions": {
+    "src/app/api/generate/route.ts": {
+      "maxDuration": 800
+    }
+  }
+}