Fix/grok video image urls (#46)

* fix: update GitHub Actions to support Node.js 24

- Update actions/checkout from v4 to v6.0.2
- Update softprops/action-gh-release from v2 to v2.5.0
- Resolves Node.js 20 deprecation warnings

These action versions support Node.js 24 which will become the default
on GitHub Actions runners starting June 2nd, 2026.

* fix: limit grok-video to single reference frame and set ffmpeg permissions

- Change grok-video from interpolation (2 frames) to single reference frame
- Update buildPollinationsUrl to use `image` param only for grok-video
- Add maxVideoReferenceImages enforcement in useGenerationSettings hook
- Normalize videoReferenceImages on load and update to respect frame limits
- Add chmod 0o755 to ffmpeg-static binary in video preview/thumbnail modules
- Add test coverage for grok-video single frame limit

Author: Simplereally

components/studio/features/generation/controls-view.test.tsx

@@ -342,4 +342,21 @@ describe("ControlsView", () => {
     // Video settings section should NOT assume to be present if videoSettings is missing (but logic requires it as per current implementation)
     expect(screen.queryByTestId("video-settings-section")).not.toBeInTheDocument();
   });
+
+  it("limits non-interpolation video frames to maxReferenceFrames", () => {
+    render(
+      <ControlsView
+        {...defaultProps}
+        isVideoModel={true}
+        videoReferenceImages={["https://example.com/first.jpg", "https://example.com/second.jpg"]}
+        onVideoReferenceImagesChange={vi.fn()}
+        maxReferenceFrames={1}
+        videoSettings={undefined}
+        onVideoSettingsChange={undefined}
+      />
+    );
+
+    expect(screen.getByTestId("video-reference-frames-picker")).toHaveTextContent("Frames: 1");
+    expect(screen.getByTestId("video-frames-section-collapsed-content")).toHaveTextContent("1 frame");
+  });
 });

components/studio/features/generation/controls-view.tsx

@@ -271,11 +271,15 @@ export const ControlsView = React.memo(function ControlsView({
   historyImages,
 }: ControlsViewProps) {
   const [modelExpanded, setModelExpanded] = React.useState(true);
+  const displayedVideoReferenceImages = React.useMemo(
+    () => videoReferenceImages?.slice(0, maxReferenceFrames) ?? [],
+    [maxReferenceFrames, videoReferenceImages]
+  );
 
   // Calculate frame count for video reference display
   const videoFrameCount = supportsInterpolation
     ? (videoInterpolationImages?.firstFrame ? 1 : 0) + (videoInterpolationImages?.lastFrame ? 1 : 0)
-    : (videoReferenceImages?.length ?? 0)
+    : displayedVideoReferenceImages.length
 
   const handleModelChange = React.useCallback(
     (newModel: string) => {
@@ -359,7 +363,7 @@ export const ControlsView = React.memo(function ControlsView({
       ) && (
         <VideoFramesSection
           isInterpolation={supportsInterpolation}
-          frames={videoReferenceImages}
+          frames={displayedVideoReferenceImages}
           onFramesChange={onVideoReferenceImagesChange}
           selectedImages={videoInterpolationImages}
           onImagesChange={onVideoInterpolationImagesChange}

convex/lib/pollinations.test.ts

@@ -10,13 +10,32 @@
 
 import { describe, it, expect } from "vitest"
 import {
+    buildPollinationsUrl,
     classifyHttpError,
     classifyApiError,
     isFluxModelUnavailable,
     matchNonRetryablePattern,
     NON_RETRYABLE_ERROR_PATTERNS,
 } from "./pollinations"
 
+describe("buildPollinationsUrl", () => {
+    it("encodes grok-video reference image through the image query param only", () => {
+        const url = buildPollinationsUrl({
+            prompt: "test prompt",
+            model: "grok-video",
+            image: "https://example.com/first.jpg",
+            lastFrameImage: "https://example.com/second.jpg",
+            duration: 5,
+            aspectRatio: "16:9",
+        })
+
+        const parsed = new URL(url)
+
+        expect(parsed.searchParams.get("image")).toBe("https://example.com/first.jpg")
+        expect(parsed.searchParams.get("image_urls")).toBeNull()
+    })
+})
+
 // ============================================================
 // classifyHttpError — pure status-code classification
 // ============================================================

convex/lib/pollinations.ts

@@ -104,13 +104,20 @@ export function buildPollinationsUrl(params: PollinationsUrlParams): string {
     // Video-specific parameters - only include for video models
     const isVideoModel = params.model && VIDEO_MODELS.includes(params.model as typeof VIDEO_MODELS[number])
     if (isVideoModel) {
-        // Reference image(s): for models that support interpolation (two reference images),
-        // join both URLs with "|" in a single `image` param so the Pollinations gateway
-        // splits them into the upstream `image_urls` array.
-        if (params.image && params.lastFrameImage) {
-            queryParams.append("image", `${params.image}|${params.lastFrameImage}`)
-        } else if (params.image) {
-            queryParams.append("image", params.image)
+        // Reference image(s): handle different formats for different video models
+        if (params.model === "grok-video") {
+            if (params.image) {
+                queryParams.append("image", params.image)
+            }
+        } else {
+            // Other video models: for models that support interpolation (two reference images),
+            // join both URLs with "|" in a single `image` param so the Pollinations gateway
+            // splits them into the upstream `image_urls` array.
+            if (params.image && params.lastFrameImage) {
+                queryParams.append("image", `${params.image}|${params.lastFrameImage}`)
+            } else if (params.image) {
+                queryParams.append("image", params.image)
+            }
         }
 
         if (params.duration !== undefined && params.duration > 0) {

convex/lib/videoPreview.ts

@@ -22,7 +22,7 @@
 
 import { tmpdir } from "os"
 import { join } from "path"
-import { writeFile, readFile, unlink, mkdir } from "fs/promises"
+import { writeFile, readFile, unlink, mkdir, chmod } from "fs/promises"
 import { randomUUID } from "crypto"
 
 // ============================================================
@@ -94,6 +94,7 @@ function getFfmpeg(): Promise<typeof Ffmpeg> {
                 throw new Error("ffmpeg-static binary not found")
             }
 
+            await chmod(ffmpegStatic, 0o755).catch(() => undefined)
             ffmpegModule.default.setFfmpegPath(ffmpegStatic)
             return ffmpegModule.default
         })()

convex/lib/videoThumbnail.ts

@@ -25,7 +25,7 @@
 
 import { tmpdir } from "os"
 import { join } from "path"
-import { writeFile, unlink, mkdir } from "fs/promises"
+import { writeFile, unlink, mkdir, chmod } from "fs/promises"
 import { randomUUID } from "crypto"
 
 // ============================================================
@@ -73,6 +73,7 @@ function getFfmpeg(): Promise<typeof Ffmpeg> {
                 throw new Error("ffmpeg-static binary not found")
             }
 
+            await chmod(ffmpegStatic, 0o755).catch(() => undefined)
             ffmpegModule.default.setFfmpegPath(ffmpegStatic)
             return ffmpegModule.default
         })()

hooks/use-generation-settings.test.ts

@@ -15,6 +15,7 @@ vi.mock("@/hooks/use-random-seed", () => ({
 describe("useGenerationSettings", () => {
     beforeEach(() => {
         vi.clearAllMocks()
+        window.localStorage.clear()
     })
 
     it("initializes with default values", () => {
@@ -176,6 +177,36 @@ describe("useGenerationSettings", () => {
         expect(result.current.model).toBe("flux-realism")
     })
 
+    it("limits grok-video reference frames to a single image from persisted state", () => {
+        window.localStorage.setItem("ps:gen:model", JSON.stringify("grok-video"))
+        window.localStorage.setItem(
+            "ps:gen:videoReferenceFrames",
+            JSON.stringify(["https://example.com/first.jpg", "https://example.com/second.jpg"])
+        )
+
+        const { result } = renderHook(() => useGenerationSettings())
+
+        expect(result.current.model).toBe("grok-video")
+        expect(result.current.videoReferenceImages).toEqual(["https://example.com/first.jpg"])
+    })
+
+    it("limits grok-video reference frame updates to a single image", () => {
+        const { result } = renderHook(() => useGenerationSettings())
+
+        act(() => {
+            result.current.handleModelChange("grok-video")
+        })
+
+        act(() => {
+            result.current.setVideoReferenceImages([
+                "https://example.com/first.jpg",
+                "https://example.com/second.jpg",
+            ])
+        })
+
+        expect(result.current.videoReferenceImages).toEqual(["https://example.com/first.jpg"])
+    })
+
     it("provides aspectRatios based on model", () => {
         const { result } = renderHook(() => useGenerationSettings())
 

hooks/use-generation-settings.ts

@@ -190,13 +190,29 @@ export function useGenerationSettings(): UseGenerationSettingsReturn {
         duration: 5,
         audio: false,
     })
-    const [videoReferenceImages, setVideoReferenceImages] = useLocalStorage<string[]>("ps:gen:videoReferenceFrames", [])
+    const [videoReferenceImages, setStoredVideoReferenceImages] = useLocalStorage<string[]>("ps:gen:videoReferenceFrames", [])
 
     // ========================================
     // Model-specific Data (Memoized)
     // ========================================
     const modelDef = React.useMemo(() => getModel(model), [model])
     const isVideoModel = modelDef?.type === "video"
+    const maxVideoReferenceImages = React.useMemo(() => {
+        if (!modelDef) return undefined
+        return modelDef.supportsInterpolation ? 2 : modelDef.referenceFrameCount
+    }, [modelDef])
+    const normalizedVideoReferenceImages = React.useMemo(() => {
+        if (maxVideoReferenceImages === undefined) return videoReferenceImages
+        return videoReferenceImages.slice(0, maxVideoReferenceImages)
+    }, [maxVideoReferenceImages, videoReferenceImages])
+    const setVideoReferenceImages = React.useCallback<React.Dispatch<React.SetStateAction<string[]>>>((value) => {
+        setStoredVideoReferenceImages((prev) => {
+            const nextValue = value instanceof Function ? value(prev) : value
+            return maxVideoReferenceImages === undefined
+                ? nextValue
+                : nextValue.slice(0, maxVideoReferenceImages)
+        })
+    }, [maxVideoReferenceImages, setStoredVideoReferenceImages])
 
     const aspectRatios = React.useMemo(
         () => getModelAspectRatios(model) ?? [],
@@ -213,6 +229,12 @@ export function useGenerationSettings(): UseGenerationSettingsReturn {
         [constraints]
     )
 
+    React.useEffect(() => {
+        if (maxVideoReferenceImages !== undefined && videoReferenceImages.length > maxVideoReferenceImages) {
+            setStoredVideoReferenceImages(videoReferenceImages.slice(0, maxVideoReferenceImages))
+        }
+    }, [maxVideoReferenceImages, setStoredVideoReferenceImages, videoReferenceImages])
+
     // ========================================
     // Resolution Tier Handler
     // ========================================
@@ -434,7 +456,7 @@ export function useGenerationSettings(): UseGenerationSettingsReturn {
         isVideoModel,
         videoSettings,
         setVideoSettings,
-        videoReferenceImages,
+        videoReferenceImages: normalizedVideoReferenceImages,
         setVideoReferenceImages,
     }
 }

lib/config/models.test.ts

@@ -840,9 +840,9 @@ describe("Video Model Properties", () => {
             expect(model.supportsReferenceImage).toBe(true)
         })
 
-        it("should support 2 reference frames", () => {
+        it("should support 1 reference frame", () => {
             const model = getModel("grok-video")!
-            expect(model.referenceFrameCount).toBe(2)
+            expect(model.referenceFrameCount).toBe(1)
         })
 
         it("should not support audio", () => {

lib/config/models.ts

@@ -897,8 +897,8 @@ export const MODEL_REGISTRY: Record<string, ModelDefinition> = {
     aspectRatios: VIDEO_ASPECT_RATIOS,
     supportsNegativePrompt: false,
     supportsReferenceImage: true,
-    supportsInterpolation: true,
-    referenceFrameCount: 2,
+    supportsInterpolation: false,
+    referenceFrameCount: 1,
     durationConstraints: {
       // Gateway validates min: 1 (enter.pollinations.ai/src/schemas/image.ts line 107).
       // Duration is approximate — not enforced by api.airforce backend.