Skip to content

README.md

Latest commit

 

History

History
157 lines (117 loc) · 4.71 KB

README.md

File metadata and controls

157 lines (117 loc) · 4.71 KB

YOU-SNAP 🎬

AI-powered YouTube content remixer. Scrape any YouTube channel, remix titles with Gemini AI, and recreate thumbnails — including replacing the person in the thumbnail with your own face using Nano Banana Pro.

YOU-SNAP Landing Page

Features

  • 📺 YouTube Channel Scraper — Fetch recent videos, thumbnails, titles, and stats from any channel via YouTube Data API v3
  • ✍️ Title Remixer — Generate 5 high-CTR title variations + 3 opening hooks using google/gemini-2.0-flash via OpenRouter
  • 🖼️ Thumbnail Remixer — Style-remix thumbnails (cinematic, vibrant, dramatic) using google/gemini-2.5-flash-image (Nano Banana)
  • 🤳 Face Placement — Replace the person in any thumbnail with your own photo using google/gemini-3-pro-image-preview (Nano Banana Pro)

Tech Stack

Layer Tech
Frontend React 19, TypeScript, Tailwind CSS v4, Motion
Backend Node.js, Express, tsx
AI (text) OpenRouter → google/gemini-2.0-flash-001
AI (images) OpenRouter → google/gemini-2.5-flash-image + google/gemini-3-pro-image-preview
YouTube YouTube Data API v3

Agent Team

This project uses a structured multi-agent architecture documented in the /agents folder:

Agent File Responsibility
Orchestrator agents/ORCHESTRATOR.md Coordinates the full pipeline
YouTube Agent agents/YOUTUBE_AGENT.md Channel scraping & video metadata
Title Agent agents/TITLE_AGENT.md Gemini title remix via OpenRouter
Thumbnail Agent agents/THUMBNAIL_AGENT.md Image remix & face placement
Frontend Agent agents/FRONTEND_AGENT.md React UI integration

Getting Started

1. Clone the repo

git clone https://github.com/cryptoeights/YouSnap.git
cd YouSnap

2. Install dependencies

npm install

3. Configure environment variables

cp .env.example .env

Then fill in your keys in .env:

YOUTUBE_API_KEY=      # console.cloud.google.com → Enable YouTube Data API v3
OPENROUTER_API_KEY=   # openrouter.ai/keys

Getting your keys:

  • YouTube API Key → Google Cloud Console → Enable YouTube Data API v3 → Credentials → Create API Key
  • OpenRouter Key → openrouter.ai/keys → Create Key (pay-as-you-go, use your existing credits)

4. Run the app

Open two terminals:

# Terminal 1 — Frontend (Vite)
npm run dev
# Terminal 2 — Backend (Express API)
npm run server

Then open http://localhost:3001 in your browser.

How It Works

1. Enter a YouTube channel URL or handle (e.g. @mkbhd)
        ↓
2. Browse the channel's latest 20 videos
        ↓
3. Click any video to select it
        ↓
4. Remix Titles tab  →  Gemini generates 5 title variations + hooks
   Remix Thumbnails tab  →  3 style remixes generated automatically
        ↓
5. Upload your photo  →  AI places your face into the thumbnail

Project Structure

you-snap/
├── src/                        # React frontend
│   ├── App.tsx                 # Page routing
│   ├── pages/
│   │   └── Dashboard.tsx       # Main app workflow
│   └── components/
│       ├── ChannelInput.tsx    # Channel URL input
│       ├── VideoCard.tsx       # Video grid card
│       ├── TitleRemixer.tsx    # Title variations UI
│       └── ThumbnailRemixer.tsx # Thumbnail remix + face swap UI
├── server/                     # Express backend
│   ├── index.ts                # Server entry point
│   ├── routes/
│   │   ├── youtube.ts          # YouTube API routes
│   │   ├── titles.ts           # Title remix routes
│   │   └── thumbnails.ts       # Thumbnail/face swap routes
│   └── lib/
│       ├── youtube.ts          # YouTube Data API client
│       └── openrouter.ts       # OpenRouter AI client (all models)
├── agents/                     # Agent team documentation
│   ├── ORCHESTRATOR.md
│   ├── YOUTUBE_AGENT.md
│   ├── TITLE_AGENT.md
│   ├── THUMBNAIL_AGENT.md
│   └── FRONTEND_AGENT.md
├── .env.example                # Environment variable template
└── vite.config.ts              # Vite config (proxies /api → port 3002)

Environment Variables

Variable Required Description
YOUTUBE_API_KEY ✅ YouTube Data API v3 key
OPENROUTER_API_KEY ✅ OpenRouter key (all AI features)
SERVER_PORT Optional API server port (default: 3002)

License

MIT