🎨 AI YouTube Thumbnail Generator

A professional, full-stack React application powered by Google Gemini AI and Supabase. Generate click-worthy thumbnails from text prompts or edit existing images with generative AI magic.

🚀 Features

• Text-to-Image Generation: Create stunning 16:9 (or other ratios) thumbnails using the latest Imagen 4.0 model.
• Generative Image Editing: Upload an image and use AI to modify it (e.g., "Change the background to a nebula").
• Pro Image Editor: Built-in tools for brightness, contrast, saturation, rotation, and flipping.
• Text Overlay Tool: Add professional-style text with customizable fonts, outlines, and drop shadows.
• History Tracking: Securely save all your generated masterpieces to your private history.
• Modern UI: Responsive design with full Dark/Light mode support.

---

💻 Local Setup Instructions

1. Prerequisites

• Node.js: Version 18 or higher.
• NPM: Usually comes with Node.js.

2. Installation

Clone or download this repository to your local machine, then run:

npm install

3. Environment Configuration

Create a file named .env in the root of your project and add the following keys:

# Get your API key from https://aistudio.google.com/
API_KEY=your_gemini_api_key_here

# Get these from your Supabase Project Settings -> API
VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_ANON_KEY=your_public_anon_key_here

4. Database Setup (Supabase)

To make the authentication and history features work, go to your Supabase Dashboard → SQL Editor and run this script:

-- 1. Create Storage Bucket for thumbnails
INSERT INTO storage.buckets (id, name, public)
VALUES ('thumbnails', 'thumbnails', TRUE)
ON CONFLICT (id) DO NOTHING;

-- 2. Create Generations Table
CREATE TABLE IF NOT EXISTS public.generations (
  id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
  prompt TEXT,
  url TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW() NOT NULL
);
CREATE INDEX IF NOT EXISTS generations_user_id_idx ON public.generations (user_id);

-- 3. Enable Row Level Security (RLS)
ALTER TABLE public.generations ENABLE ROW LEVEL SECURITY;

-- 4. Database Access Policies
CREATE POLICY "Allow users to view their own generations" ON public.generations FOR SELECT TO authenticated USING (auth.uid() = user_id);
CREATE POLICY "Allow users to insert their own generations" ON public.generations FOR INSERT TO authenticated WITH CHECK (auth.uid() = user_id);
CREATE POLICY "Allow users to delete their own generations" ON public.generations FOR DELETE TO authenticated USING (auth.uid() = user_id);

-- 5. Storage Policies (allows users to upload/view their own images)
CREATE POLICY "Public Access" ON storage.objects FOR SELECT USING (bucket_id = 'thumbnails');
CREATE POLICY "Auth Upload" ON storage.objects FOR INSERT TO authenticated WITH CHECK (bucket_id = 'thumbnails');
CREATE POLICY "Auth Delete" ON storage.objects FOR DELETE TO authenticated USING (bucket_id = 'thumbnails');

---

🛠️ Tech Stack

• Frontend: React 19, TypeScript, Vite, Tailwind CSS.
• Backend: Supabase (Authentication, PostgreSQL, Storage).
• AI: Google Gemini SDK (@google/genai).
• Models: imagen-4.0-generate-001 (Generation), gemini-2.5-flash-image (Editing).

🏃 Running the App

Start the development server:

npm run dev

The app will be available at http://localhost:5173.

📦 Build for Production

npm run build

---

🚀 Deploy to Vercel

Quick Deploy

1. Push your code to a GitHub repository
2. Go to Vercel and sign in
3. Click "New Project" and import your repository
4. Add your environment variables in the Vercel dashboard:
   • API_KEY - Your Gemini API key
   • VITE_SUPABASE_URL - Your Supabase project URL
   • VITE_SUPABASE_ANON_KEY - Your Supabase anon key
5. Click "Deploy"

Manual Deploy

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

During deployment, you'll be prompted to add your environment variables. Make sure to add all three variables from your .env file.

---

📄 License

This project is licensed under the MIT License.