feat(examples): provider optgroups in video model dropdown, use grok-imagine-video-1.5-preview

Groups the video model dropdown by provider (fal.ai / xAI direct) the
same way the image generator does, adds the model version to the
direct-xAI entry names, and switches them to the
grok-imagine-video-1.5-preview model.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: tombeckenham

examples/ts-react-media/src/components/VideoGenerator.tsx

@@ -42,6 +42,8 @@ export default function VideoGenerator({
   const pollingRefs = useRef<Map<string, NodeJS.Timeout>>(new Map())
 
   const filteredModels = VIDEO_MODELS.filter((m) => m.mode === mode)
+  const falModels = filteredModels.filter((m) => m.provider === 'fal')
+  const xaiModels = filteredModels.filter((m) => m.provider === 'xai')
 
   useEffect(() => {
     if (initialImageUrl) {
@@ -166,8 +168,8 @@ export default function VideoGenerator({
       }))
 
       // Poll keyed by the UI model id, not result.model: the direct-xAI
-      // entries share one adapter model ('grok-imagine-video'), so
-      // result.model wouldn't identify the card (or the adapter) uniquely.
+      // entries share one adapter model ('grok-imagine-video-1.5-preview'),
+      // so result.model wouldn't identify the card (or the adapter) uniquely.
       const interval = setInterval(() => {
         pollStatus(result.jobId, modelId)
       }, 4000)
@@ -253,11 +255,20 @@ export default function VideoGenerator({
             className="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50"
           >
             <option value="all">All Models</option>
-            {filteredModels.map((model) => (
-              <option key={model.id} value={model.id}>
-                {model.name}
-              </option>
-            ))}
+            <optgroup label="fal.ai">
+              {falModels.map((model) => (
+                <option key={model.id} value={model.id}>
+                  {model.name}
+                </option>
+              ))}
+            </optgroup>
+            <optgroup label="xAI (direct)">
+              {xaiModels.map((model) => (
+                <option key={model.id} value={model.id}>
+                  {model.name}
+                </option>
+              ))}
+            </optgroup>
           </select>
         </div>
 

examples/ts-react-media/src/lib/models.ts

@@ -79,60 +79,70 @@ export const VIDEO_MODELS = [
     name: 'Kling 3 Pro (Text-to-Video)',
     description: 'High-quality text-to-video generation',
     mode: 'text-to-video' as const,
+    provider: 'fal' as const,
   },
   {
     id: 'fal-ai/kling-video/v3/pro/image-to-video',
     name: 'Kling 3 Pro (Image-to-Video)',
     description: 'Animate images with Kling',
     mode: 'image-to-video' as const,
+    provider: 'fal' as const,
   },
   {
     id: 'fal-ai/veo3.1',
     name: 'Veo 3.1 (Text-to-Video)',
     description: 'Google Veo text-to-video',
     mode: 'text-to-video' as const,
+    provider: 'fal' as const,
   },
   {
     id: 'fal-ai/veo3.1/image-to-video',
     name: 'Veo 3.1 (Image-to-Video)',
     description: 'Google Veo image-to-video',
     mode: 'image-to-video' as const,
+    provider: 'fal' as const,
   },
   {
     id: 'xai/grok-imagine-video/text-to-video',
     name: 'Grok Imagine Video (Text-to-Video)',
     description: 'xAI video generation from text',
     mode: 'text-to-video' as const,
+    provider: 'fal' as const,
   },
   {
     id: 'xai/grok-imagine-video/image-to-video',
     name: 'Grok Imagine Video (Image-to-Video)',
     description: 'xAI animate images to video',
     mode: 'image-to-video' as const,
+    provider: 'fal' as const,
   },
   {
-    id: 'grok-imagine-video',
-    name: 'Grok Imagine Video (xAI Direct, Text-to-Video)',
+    id: 'grok-imagine-video-1.5-preview',
+    name: 'Grok Imagine Video 1.5 (Text-to-Video)',
     description: 'xAI Imagine API via the native grokVideo adapter',
     mode: 'text-to-video' as const,
+    provider: 'xai' as const,
   },
   {
-    id: 'grok-imagine-video/image-to-video',
-    name: 'Grok Imagine Video (xAI Direct, Image-to-Video)',
+    id: 'grok-imagine-video-1.5-preview/image-to-video',
+    name: 'Grok Imagine Video 1.5 (Image-to-Video)',
     description: 'Animate a starting frame via the native grokVideo adapter',
     mode: 'image-to-video' as const,
+    provider: 'xai' as const,
   },
   {
     id: 'fal-ai/ltx-2.3/text-to-video/fast',
     name: 'LTX-2.3 Fast (Text-to-Video)',
     description: 'Fast text-to-video generation',
     mode: 'text-to-video' as const,
+    provider: 'fal' as const,
   },
   {
     id: 'fal-ai/ltx-2.3/image-to-video/fast',
     name: 'LTX-2.3 Fast (Image-to-Video)',
     description: 'Fast image-to-video animation',
     mode: 'image-to-video' as const,
+    provider: 'fal' as const,
   },
 ] as const
 

examples/ts-react-media/src/lib/server-functions.ts

@@ -74,10 +74,10 @@ function asImageToVideoPrompt(
  */
 function videoAdapterForModel(model: string) {
   if (
-    model === 'grok-imagine-video' ||
-    model === 'grok-imagine-video/image-to-video'
+    model === 'grok-imagine-video-1.5-preview' ||
+    model === 'grok-imagine-video-1.5-preview/image-to-video'
   ) {
-    return grokVideo('grok-imagine-video')
+    return grokVideo('grok-imagine-video-1.5-preview')
   }
   return falVideo(model)
 }
@@ -229,13 +229,13 @@ export const createVideoJobFn = createServerFn({ method: 'POST' })
           },
         })
       }
-      case 'grok-imagine-video': {
+      case 'grok-imagine-video-1.5-preview': {
         // Direct xAI Imagine API (XAI_API_KEY) — no fal in between. Sizing is
         // an "aspectRatio_resolution" template; durations are 1-15 integer
         // seconds. Completed jobs report usage.unitsBilled (billed seconds)
         // and usage.cost (exact USD).
         return generateVideo({
-          adapter: grokVideo('grok-imagine-video'),
+          adapter: grokVideo('grok-imagine-video-1.5-preview'),
           prompt: asTextPrompt(data.prompt),
           size: '16:9_720p',
           duration: 5,
@@ -279,12 +279,12 @@ export const createVideoJobFn = createServerFn({ method: 'POST' })
           },
         })
       }
-      case 'grok-imagine-video/image-to-video': {
+      case 'grok-imagine-video-1.5-preview/image-to-video': {
         // Direct xAI Imagine API. The starting frame is supplied as an image
         // prompt part (asImageToVideoPrompt requires one); the grokVideo
         // adapter forwards it to the Imagine endpoint as the start frame.
         return generateVideo({
-          adapter: grokVideo('grok-imagine-video'),
+          adapter: grokVideo('grok-imagine-video-1.5-preview'),
           prompt: asImageToVideoPrompt(data.prompt),
           size: '16:9_720p',
           duration: 5,