Creating Infographics with AI

// src/hooks/useGeneration.ts
export interface EpisodeContext {
  episodeNumber: string
  guestName: string
  transcript: string
  prf?: string
  hooks?: string
}

const spec = await generateInfographicSpec(
  selectedText,      // Your content
  transcriptText,    // Full transcript for context
  prfText,          // PRF for insights
  episodeNumber,
  guestName,
  generatedHistory, // Past designs for variety
  designType        // 'infographic' | 'quote'
)

interface InfographicSpec {
  layout: string           // e.g., "Hub & Spoke", "Pyramid", "Split Screen"
  template: string         // e.g., "Strategic Framework", "Data Story"
  title: string           // Main headline (under 10 words)
  colorSystem: string     // e.g., "ybh_gradient", "blueprint_dark"
  iconStyle: 'isometric' | 'flat2d'
  aspectRatio: string     // e.g., "16:9", "1:1"
  prompt: string          // Complete Nano Banana Pro prompt
}

// From DesignStudioPage.tsx:131-141
const quotePrompt = `1:1 square format quote card in flat 2D typographic blueprint style. 
Blue-Dark mode background (#0F2A44) with optional subtle alternate band (#123455).

The quote text reads: "${sourceText}" displayed in bold, condensed sans-serif.
Text color is white (#FFFFFF) with key impactful words highlighted in orange (#F17529).
The quote is broken into multiple lines for rhythm and readability.

Below the quote, attribution reads "— ${guestName}" in light gray (#B8C7D6).

Footer: "Subscribe and share with your peers" (orange), "Episode ${episodeNum}" (gray),
"We don't sell. We unsell." (gray).

NO logo in the design.`

// Blueprint framework style with isometric elements
const cinematicPrompt = `16:9 landscape infographic in flat 2D blueprint framework style.
Blue-Dark mode background (#0F2A44) with header bar (#123455).

Title "${title}" in bold white condensed sans-serif at the top, 
with key words highlighted in orange (#F17529). No 3D. No glow. No rim lighting.

Content based on: ${sourceText}

Footer: "Subscribe and share with your peers" (orange), 
"Episode ${episodeNum}" (gray), "When IT leaders rise... so does everything else." (gray).

NO logo in the design.`

// Editorial style for data-heavy content
const datavizPrompt = `16:9 landscape infographic with light gray background (#F5F5F5).
Title "${title}" in bold dark text (#333333) at the top.

Professional data visualization with white content panels (#FFFFFF), 
clean editorial style. Orange (#F17529) accent for key data points.

Content based on: ${sourceText}

Footer: "Subscribe and share with your peers" (orange), 
"Episode ${episodeNum}" (gray), "Real IT leaders. Real talk." (gray).

NO logo in the design.`

// From DesignStudioPage.tsx:254-259
const generatedHistory = episode?.generatedAssets?.map(a => {
  const spec = a.spec
  if (!spec) return null
  return `${spec.template || 'unknown'}|${spec.layout || 'unknown'}|${spec.colorSystem || 'unknown'}`
}).filter(Boolean) as string[] || []

--ybh-yellow: #F7B500
--ybh-orange: #F17529
--ybh-red: #EF4136

--bg-primary: #0F2A44
--bg-secondary: #123455
--text-primary: #FFFFFF
--accent: #F17529

--bg-primary: #F5F5F5
--text-primary: #333333
--content-panel: #FFFFFF
--accent: #F17529

--problem: #EF4136 → #F17529 (red to orange)
--solution: #27AE60 → #3498DB (green to blue)

--primary: #16213E (navy)
--secondary: #0F3460 (teal)
--accent: #F17529 (orange)

// src/services/kieai.ts
await createTask({
  prompt: "Adjust colors to be more vibrant",
  imageInput: [generatedImageUrl],  // Up to 8 reference images
  aspectRatio: '16:9',
  resolution: '2K'
})