saqlaindigu

AI Carousel Engine

Transform complex AI concepts into viral, educational Instagram carousels

Features · Quick Start · Architecture · Usage

Overview

saqlaindigu AI Carousel Engine is an AI-powered content creation platform that transforms complex AI topics into professionally designed Instagram carousels.

Using a sophisticated 4-agent AI pipeline, it researches, scripts, designs, and renders high-quality visual content—all automatically.

Style Inspiration: 3Blue1Brown-style deep dives meets Varun Mayya-style AI news. Educational content that makes complex AI concepts click.

Features

Smart Idea Generation

AI-generated viral topics across 5 content categories:

Category	Focus Area
The Dev Accelerator	Developer tools, frameworks, productivity
The Solo Empire	Solo entrepreneurship, indie hacking
Industry Reality Checks	Honest takes on tech trends, market analysis
Hidden Gems	Underrated tools, lesser-known insights
All Topics	Mixed content across all categories

Custom Input Support:

Paste article URLs for reference-based carousels
Write your own script content
Enter custom topics for personalized generation
Automatic input type detection (URL, script, or topic)

Deep Research Engine

Real-time data verification via Google Search
Source citations for credibility
AI-powered fact synthesis
Pattern recognition across sources
Live source count tracking during research

Viral Script Engine

Engaging 2–10 slide storytelling (AI-determined optimal count)
Three layout modes:
- POSTER_HERO – Full-bleed hook slide with headline at bottom
- STANDARD – Clean headline + body paragraph layout
- MINIMAL_DARK – Minimal final CTA slide with brand gradient
Key phrase highlighting (numbers, terms in orange)
Professional typography: Anton for headlines, Poppins for body text

Cinematic Visuals

Gemini Pro image generation with aspect ratio optimization
Modern tech aesthetic with enhanced text contrast
Text-safe composition zones with gradient overlays
Multiple aspect ratios:
- 1:1 Square (1080×1080)
- 3:4 Portrait (1080×1350) - Instagram optimal
- 9:16 Story (1080×1920)
Individual slide image regeneration
Text overlay toggle for preview

Cloud Sync & Background Processing

Supabase authentication with seamless sign-in
Cloud storage for carousels with automatic image upload
Image hosting & CDN for fast loading
Automatic cross-device sync
Offline fallback with IndexedDB
Background job processing - close tab, jobs continue on server
Resume interrupted jobs - automatic detection and resume prompts
Real-time progress streaming via Server-Sent Events (SSE)
Live slide previews as each slide completes generation

Export & Download

ZIP download - All slides as individual PNG files
PDF export - Complete carousel as multi-page PDF
Single slide download - Export current slide with text overlay
Batch progress tracking during export
High-resolution canvas compositing (1080px base)

Developer Tools

Test Lab - Direct JSON script injection for rapid prototyping
Prompt Inspector - View and copy all agent system prompts
Pre-loaded golden scenarios for testing
Quick script generation from topic input
Real-time rendering preview

User Experience

Keyboard navigation - Arrow keys, Home, End for slide navigation
Idea repetition prevention (tracks last 20 ideas)
Persistent settings (aspect ratio, category preference)
Slide counter badges on every slide
Source citations with clickable links

Advanced Features

Live progress streaming - Real-time updates via SSE
Partial slide streaming as images generate
ETA calculations based on current progress
Graceful error handling with retry logic
Job expiration detection and cleanup

Quick Start

Prerequisites

Node.js v18+
Gemini API Key (from Google AI Studio)
Supabase Project (optional, for cloud sync)

Installation

# Clone the repository
git clone <repo-url>
cd insightmatrix-ai-carousel-creator

# Install dependencies
npm install

# Configure environment
cp .env.example .env.local

Environment Variables

# Required
GEMINI_API_KEY=your_gemini_api_key

# Optional (for cloud sync)
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

Run Development Server

npm run dev

Open http://localhost:5173 in your browser.

Architecture

AI Pipeline

┌─────────────────┐      ┌─────────────────┐      ┌─────────────────┐      ┌─────────────────┐
│                 │      │                 │      │                 │      │                 │
│   💡 IDEAS      │  →   │   🔬 RESEARCH   │  →   │   ✍️ SCRIPT     │  →   │   🎨 DESIGN     │
│                 │      │                 │      │                 │      │                 │
│  Gemini Flash   │      │  Gemini Pro +   │      │   Gemini Pro    │      │  Gemini Pro +   │
│                 │      │  Google Search  │      │                 │      │  Image Models   │
│                 │      │                 │      │                 │      │                 │
└─────────────────┘      └─────────────────┘      └─────────────────┘      └─────────────────┘

Agent Breakdown

Agent	Model	Responsibility
Idea Engine	Gemini 2.5 Flash	Generate viral topics with educational hooks, avoid repetition
Research Engine	Gemini 3 Pro + Google Search	Deep analysis with real-time grounding, source verification
Script Engine	Gemini 3 Pro	Create narrative arc with layout mode selection
Design Engine	Gemini 3 Pro + Image	Visual direction & high-res image generation

Project Structure

📦 saqlaindigu-ai-carousel-engine
├── 📄 App.tsx                    # Main app & routing
├── 📁 components/
│   ├── Step1_Ideas.tsx           # Idea selection UI with custom input
│   ├── ProcessingView.tsx        # Pipeline visualization with SSE streaming
│   ├── FinalGallery.tsx          # Carousel viewer, export (ZIP/PDF), regeneration
│   ├── GalleryView.tsx           # Saved carousels with delete confirmation
│   ├── TestLab.tsx               # Debug & testing with JSON injection
│   ├── PromptInspector.tsx       # Agent prompt viewer
│   ├── SlideLayout.tsx           # Slide renderer with layout modes
│   ├── AuthModal.tsx             # Authentication
│   ├── UserMenu.tsx              # Account menu
│   └── ErrorBoundary.tsx         # Error handling
├── 📁 services/
│   ├── geminiService.ts          # AI orchestration
│   ├── supabase.ts               # Supabase client
│   ├── supabaseService.ts        # Auth & cloud storage
│   └── storage.ts                # IndexedDB layer
├── 📄 prompts.ts                 # AI system prompts
├── 📄 types.ts                   # TypeScript interfaces
└── 📄 goldenData.ts              # Test scenarios

Usage Guide

Creating a Carousel

1️⃣

Select Topic

Browse AI ideas, filter by category, or enter custom input (URL/script/topic)

2️⃣

Configure

Choose aspect ratio (1:1, 3:4, 9:16) - slide count is AI-determined

3️⃣

Generate

Watch 4-phase AI pipeline with live progress & streaming slides

4️⃣

Export

Download ZIP/PDF, single slides, or copy captions

Test Lab

Access via the Lab button in the navigation for:

Direct JSON script injection
Pre-loaded golden scenarios
Quick script generation from topic
Real-time rendering preview
Rapid prototyping and debugging

Prompt Inspector

View all agent system prompts:

Idea Generator prompt
Research Agent prompt
Fact Agent prompt
Script Agent prompt
Script Editor prompt
Design Agent prompt

Copy prompts for customization or analysis.

Cloud Sync & Background Processing

Sign in to enable:

Cross-device access
Image hosting with automatic upload
Carousel cloud storage
Background job processing (close tab, continue generating)
Resume interrupted jobs automatically

Keyboard Shortcuts

In the Final Gallery:

← / → - Navigate between slides
↑ / ↓ - Navigate between slides
Home - Jump to first slide
End - Jump to last slide

Export Options

ZIP Download - All slides as individual PNG files (1080px base)
PDF Export - Complete carousel as multi-page PDF
Single Slide - Download current slide with text overlay
Regenerate Image - Regenerate individual slide images
Copy Caption - Copy Instagram caption with hashtags

Design System

Brand Colors

AI Purple

#7C3AED

Slate Dark

#0F172A

Tech Cyan

#06B6D4

Electric Blue

#3B82F6

Pink

#EC4899

Green

#10B981

Typography

Font: Poppins
Weights: Regular (400) · Medium (500) · SemiBold (600) · Bold (700) · ExtraBold (800)

Tech Stack

React 19
_{UI Framework}

TypeScript
_{Type Safety}

Vite 6
_{Build Tool}

Gemini AI
_{AI Engine}

Supabase
_{Auth & DB}

Tailwind
_Styling

Configuration

Customization Points

File	What to Customize
`prompts.ts`	AI behavior & personality
`Step1_Ideas.tsx`	Topic categories
`geminiService.ts`	Visual style tokens
`index.html`	Brand colors & fonts

API Rate Limits

Built-in handling includes:

Exponential backoff (5 retries)
Auto-fallback to Flash models
Graceful text-only degradation
Job expiration detection (55-minute TTL)
Automatic cleanup of expired jobs

Background Processing

Jobs run on the server, not in the browser
Close the tab - generation continues
Resume prompts appear when returning
Real-time progress via Server-Sent Events (SSE)
Live slide previews stream in as they complete
Polling fallback if SSE unavailable

License

This project is private. See repository settings for license details.

Built with ❤️ by saqlaindigu

Name		Name	Last commit message	Last commit date
components		components
constants		constants
deploy		deploy
product_outputs		product_outputs
server		server
services		services
utils		utils
App.tsx		App.tsx
README.md		README.md
goldenData.ts		goldenData.ts
index.html		index.html
index.tsx		index.tsx
metadata.json		metadata.json
package-lock.json		package-lock.json
package.json		package.json
prompts.ts		prompts.ts
tsconfig.json		tsconfig.json
types.ts		types.ts
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation

saqlaindigu

AI Carousel Engine

Overview

Features

Smart Idea Generation

Deep Research Engine

Viral Script Engine

Cinematic Visuals

Cloud Sync & Background Processing

Export & Download

Developer Tools

User Experience

Advanced Features

Quick Start

Prerequisites

Installation

Environment Variables

Run Development Server

Architecture

AI Pipeline

Agent Breakdown

Project Structure

Usage Guide

Creating a Carousel

Test Lab

Prompt Inspector

Cloud Sync & Background Processing

Keyboard Shortcuts

Export Options

Design System

Brand Colors

Typography

Tech Stack

Configuration

Customization Points

API Rate Limits

Background Processing

License

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages