Video quality iteration: Alex's v2 feedback fixes

Three PRs: infographic-first SceneRouter (keep CodeMorphScene), Gemini generateContent model detection, longer scripts (2-4 min), purple #7c3aed, black backgrounds, aggressive Ken Burns, no-text hook frame.

Author: codercatdev

app/api/cron/check-research/route.ts

@@ -686,7 +686,7 @@ Return ONLY a JSON object:
         "list": { "items": ["Item 1", "Item 2"], "icon": "🚀" },
         "comparison": { "leftLabel": "A", "rightLabel": "B", "rows": [{ "left": "...", "right": "..." }] },
         "mockup": { "deviceType": "browser | phone | terminal", "screenContent": "..." },
-        "imagePrompts": ["Infographic 2D architecture style, black background. [specific visual for this scene]. Highlighted elements filled with #15b27b. White lines connecting components and white text annotations."]
+        "imagePrompts": ["Infographic 2D architecture style. STRICTLY black (#000000) background only \u2014 no gradients, no blue. [specific visual for this scene]. Highlighted elements filled with vivid purple (#7c3aed) only. White lines connecting components and white text annotations. Large, readable labels."]
       }
     ],
     "cta": "string - call to action"
@@ -697,8 +697,9 @@ Return ONLY a JSON object:
 Requirements:
 - 3-5 scenes totaling 60-90 seconds
 - Use at least 2 different scene types
-- Each scene MUST include 2-5 imagePrompts following this exact template: "Infographic 2D architecture style, black background. [specific visual]. Highlighted elements filled with #15b27b. White lines connecting components and white text annotations."
+- Each scene MUST include 2-5 imagePrompts following this exact template: "Infographic 2D architecture style. STRICTLY black (#000000) background only \u2014 no gradients, no blue. [specific visual]. Highlighted elements filled with vivid purple (#7c3aed) only. White lines connecting components and white text annotations. Large, readable labels."
 - imagePrompts should describe specific 2D infographic visuals that illustrate the narration content
+- The FIRST scene's imagePrompts must be purely visual and eye-catching — no text labels, no annotations, no words. This is the thumbnail/hook frame.
 - Do NOT include any script text, titles, or word overlays in the video. The narration audio carries all words.
 - Think of each imagePrompt as a frame that will be shown for 3-5 seconds while the narration plays
 - Include REAL code snippets from the research where applicable

app/api/cron/ingest/route.ts

@@ -258,7 +258,7 @@ Your style is inspired by Cleo Abram's "Huge If True" — you make complex techn
 - End with a clear takeaway that makes the viewer feel smarter
 - Target audience: developers who want to stay current but don't have time to read everything
 
-Script format: 60-90 second explainer videos. Think TikTok/YouTube Shorts energy with real educational depth.
+Script format: 2-4 minute explainer videos for horizontal YouTube, 60-90 seconds for Shorts. Think Cleo Abram energy with real educational depth.
 
 CodingCat.dev covers: React, Next.js, TypeScript, Svelte, web APIs, CSS, Node.js, cloud services, AI/ML for developers, and web platform updates.`;
 
@@ -311,7 +311,7 @@ function buildPrompt(trends: TrendResult[], research?: ResearchPayload): string
 
 ${topicList}${researchContext}
 
-Pick the MOST interesting and timely topic for a short explainer video (60-90 seconds). Then generate a complete video script as JSON.
+Pick the MOST interesting and timely topic for an explainer video (2-4 minutes for horizontal YouTube). Then generate a complete video script as JSON.
 
 ## Scene Types
 
@@ -337,7 +337,7 @@ CRITICAL: This video will be a visual infographic explainer. There will be NO te
 
 For EACH scene, generate an "imagePrompts" array with 2-5 image generation prompts. Each prompt should follow this exact template:
 
-"Infographic 2D architecture style, black background. [SPECIFIC VISUAL FOR THIS SCENE]. Highlighted elements filled with #15b27b. White lines connecting components and white text annotations."
+"Infographic 2D architecture style, pure black background. [SPECIFIC VISUAL FOR THIS SCENE]. Highlighted elements filled with vivid purple (#7c3aed). White lines connecting components and white text annotations. Color palette: ONLY black, purple (#7c3aed), and white — no blue, no green, no gradients."
 
 Replace [SPECIFIC VISUAL FOR THIS SCENE] with a detailed description of what the infographic should show for that particular scene. Be specific — reference the actual technical concepts, comparisons, or workflows being discussed.
 
@@ -349,6 +349,8 @@ Guidelines for image prompts:
 - For comparison scenes: show side-by-side comparison charts or feature matrices
 - For list scenes: show each item as a distinct visual element in the infographic
 - Make prompts visually varied — don't repeat the same layout
+- STRICT color palette: pure black background (#000000), vivid purple (#7c3aed) for highlighted elements, white for lines and text annotations. Do NOT use blue, green, orange, red, or gradient backgrounds
+- FIRST SCENE image prompts must be purely visual and eye-catching — NO text labels, NO annotations, NO words. This is the thumbnail/hook frame that needs to stop the scroll. Show a striking visual metaphor for the topic
 
 ## JSON Schema
 
@@ -369,7 +371,7 @@ Return ONLY a JSON object matching this exact schema:
         "visualDescription": "string - what to show on screen (fallback for all types)",
         "bRollKeywords": ["keyword1", "keyword2"],
         "durationEstimate": 15,
-        "imagePrompts": ["Infographic 2D architecture style, black background. [specific visual]. Highlighted elements filled with #15b27b. White lines connecting components and white text annotations."],
+        "imagePrompts": ["Infographic 2D architecture style, pure black background. [specific visual]. Highlighted elements filled with vivid purple (#7c3aed). White lines and text annotations. ONLY black, purple, white colors."],
         "code": {
           "snippet": "string - actual code to display (only for sceneType: code)",
           "language": "typescript | javascript | jsx | tsx | css | html | json | bash",
@@ -398,14 +400,14 @@ Return ONLY a JSON object matching this exact schema:
 }
 
 Requirements:
-- The script should have 3-5 scenes totaling 60-90 seconds
+- The script should have 8-15 scenes totaling 2-4 minutes (120-240 seconds)
 - The hook should be punchy and curiosity-driven
 - Use at least 2 different scene types for visual variety
 - Only include the type-specific field that matches the sceneType (e.g., only include "code" when sceneType is "code")
 - For "code" scenes, provide real, syntactically correct code
 - The qualityScore should be your honest self-assessment (0-100)
 - Each scene MUST include an "imagePrompts" array with 2-5 image generation prompts
-- Image prompts must follow the template: "Infographic 2D architecture style, black background. [specific]. Highlighted elements filled with #15b27b. White lines connecting components and white text annotations."
+- Image prompts must follow the template: "Infographic 2D architecture style, pure black background. [specific]. Highlighted elements filled with vivid purple (#7c3aed). White lines connecting components and white text annotations. Color palette: ONLY black, purple (#7c3aed), and white."
 - Do NOT include any text overlays, titles, or script words in the video — narration audio carries all words
 - Calculate prompt count per scene: Math.ceil(durationEstimate / 4)
 - Return ONLY the JSON object, no markdown or extra text`;

lib/services/gemini-infographics.ts

@@ -85,25 +85,97 @@ function getAI(): GoogleGenAI {
 // ---------------------------------------------------------------------------
 
 /**
- * Generate a single infographic image using Imagen 4 Fast.
+ * Detect if a model uses the Gemini generateContent API (for image generation)
+ * vs the Imagen generateImages API.
+ *
+ * Gemini image models: gemini-*-image-*, gemini-*-flash-image-*
+ * Imagen models: imagen-*
+ */
+function isGeminiImageModel(model: string): boolean {
+  return model.startsWith('gemini-');
+}
+
+/**
+ * Generate a single image using Gemini's generateContent API.
+ * Used for models like gemini-3.1-flash-image-preview.
+ */
+async function generateWithGeminiContent(
+  prompt: string,
+  model: string,
+  aspectRatio: string,
+): Promise<{ imageBase64: string; mimeType: string }> {
+  const ai = getAI();
+
+  const response = await ai.models.generateContent({
+    model,
+    contents: prompt,
+    config: {
+      responseModalities: ['IMAGE'],
+      imageConfig: {
+        aspectRatio: aspectRatio as '1:1' | '3:4' | '4:3' | '9:16' | '16:9',
+      },
+    },
+  });
+
+  // Extract image from response
+  const parts = response.candidates?.[0]?.content?.parts;
+  if (!parts || parts.length === 0) {
+    throw new Error(`Gemini returned no parts for prompt "${prompt.slice(0, 80)}…"`);
+  }
+
+  // Find the image part
+  for (const part of parts) {
+    if (part.inlineData?.data) {
+      return {
+        imageBase64: part.inlineData.data,
+        mimeType: part.inlineData.mimeType || 'image/png',
+      };
+    }
+  }
+
+  throw new Error(`Gemini returned no image data for prompt "${prompt.slice(0, 80)}…"`);
+}
+
+/**
+ * Generate a single infographic image.
+ *
+ * Automatically detects whether to use Gemini generateContent (for gemini-*
+ * models) or Imagen generateImages (for imagen-* models).
  *
  * @param request - Prompt and generation options.
- * @param model - Imagen model ID (e.g. "imagen-4.0-fast-generate-001").
+ * @param model - Model ID (e.g. "gemini-3.1-flash-image-preview" or "imagen-4.0-fast-generate-001").
  * @returns InfographicResult with base64 image bytes.
  * @throws If the API call fails or no image is returned.
  */
 export async function generateInfographic(
   request: InfographicRequest,
   model: string = "imagen-4.0-fast-generate-001",
 ): Promise<InfographicResult> {
+  const aspectRatio = request.aspectRatio ?? "16:9";
+
+  if (isGeminiImageModel(model)) {
+    // Gemini path: generateContent with responseModalities: ["IMAGE"]
+    const result = await generateWithGeminiContent(
+      request.prompt,
+      model,
+      aspectRatio,
+    );
+    return {
+      imageBase64: result.imageBase64,
+      mimeType: result.mimeType,
+      prompt: request.prompt,
+    };
+  }
+
+  // Imagen path: generateImages (existing code)
   const ai = getAI();
 
   const response = await ai.models.generateImages({
     model,
     prompt: request.prompt,
     config: {
       numberOfImages: 1,
-      aspectRatio: request.aspectRatio ?? "16:9",
+      aspectRatio: aspectRatio,
       ...(request.negativePrompt && { negativePrompt: request.negativePrompt }),
     },
   });
@@ -117,7 +189,6 @@ export async function generateInfographic(
   }
 
   const imageBytes = generated.image.imageBytes;
-  // imageBytes may be a Uint8Array or base64 string depending on SDK version
   const imageBase64 =
     typeof imageBytes === "string"
       ? imageBytes
@@ -210,11 +281,11 @@ export function buildInfographicPrompt(
 
 /** Default infographic instructions if Sanity contentConfig is not set up */
 const DEFAULT_INSTRUCTIONS: string[] = [
-  'Infographic 2D architecture style, black background. A high-level technical architecture overview showing system components and data flow. Highlighted elements filled with #15b27b. White lines connecting components and white text annotations.',
-  'Infographic 2D architecture style, black background. A comparison chart showing key features and alternatives side by side. Highlighted elements filled with #15b27b. White lines connecting components and white text annotations.',
-  'Infographic 2D architecture style, black background. A step-by-step workflow diagram showing the process from start to finish. Highlighted elements filled with #15b27b. White lines connecting components and white text annotations.',
-  'Infographic 2D architecture style, black background. A timeline of key developments, milestones, and version releases. Highlighted elements filled with #15b27b. White lines connecting components and white text annotations.',
-  'Infographic 2D architecture style, black background. A pros and cons visual summary with clear icons and labels. Highlighted elements filled with #15b27b. White lines connecting components and white text annotations.',
+  'Infographic 2D architecture style. STRICTLY black (#000000) background only \u2014 no gradients, no blue. A high-level technical architecture overview showing system components and data flow. Highlighted elements filled with vivid purple (#7c3aed) only. White lines connecting components and white text annotations. Large, readable text labels suitable for mobile viewing at 360px width. No watermarks.',
+  'Infographic 2D architecture style. STRICTLY black (#000000) background only \u2014 no gradients, no blue. A comparison chart showing key features and alternatives side by side. Highlighted elements filled with vivid purple (#7c3aed) only. White lines connecting components and white text annotations. Large, readable text labels suitable for mobile viewing at 360px width. No watermarks.',
+  'Infographic 2D architecture style. STRICTLY black (#000000) background only \u2014 no gradients, no blue. A step-by-step workflow diagram showing the process from start to finish. Highlighted elements filled with vivid purple (#7c3aed) only. White lines connecting components and white text annotations. Large, readable text labels suitable for mobile viewing at 360px width. No watermarks.',
+  'Infographic 2D architecture style. STRICTLY black (#000000) background only \u2014 no gradients, no blue. A timeline of key developments, milestones, and version releases. Highlighted elements filled with vivid purple (#7c3aed) only. White lines connecting components and white text annotations. Large, readable text labels suitable for mobile viewing at 360px width. No watermarks.',
+  'Infographic 2D architecture style. STRICTLY black (#000000) background only \u2014 no gradients, no blue. A pros and cons visual summary with clear icons and labels. Highlighted elements filled with vivid purple (#7c3aed) only. White lines connecting components and white text annotations. Large, readable text labels suitable for mobile viewing at 360px width. No watermarks.',
 ];
 
 // ---------------------------------------------------------------------------