Gemini Censor AI

Describe what to hide. The AI does the rest.

An intelligent image censorship tool powered by Gemini 3 Pro that detects and obscures objects in images based on plain-language descriptions. Upload a photo, type something like “blur the license plate”, and get a clean, censored result in seconds.

Try it in AI Studio · Report Bug · Request Feature

---

How It Works

1. Upload any JPG, PNG, or WebP image.
2. Describe what should be censored in natural language — faces, text, license plates, logos, anything.
3. Gemini 3 Pro analyzes the image and returns precise bounding boxes around matching regions.
4. Review & adjust — drag to reposition or resize any detected area directly on the canvas.
5. Download the censored image as a PNG.

Features

• Natural-language detection — no manual selection needed; just describe what to hide and Gemini finds it.
• Pixelate or Blur — toggle between censorship styles with a single click.
• Adjustable intensity — fine-tune the effect strength from subtle to fully obscured (5–100 px).
• Interactive editor — drag to move, corner-handle resize, and click-to-select detected regions.
• Undo / Redo — full edit history so you can experiment freely.
• Client-side rendering — censorship is applied on an HTML5 Canvas; your images are never stored on a server.
• One-click download — export the final result as a timestamped PNG.

Tech Stack

Layer	Technology
Framework	React 19 + TypeScript
AI	Gemini 3 Pro via @google/genai (structured JSON output)
Build	Vite 6
Styling	Tailwind CSS
Icons	Lucide React

Getting Started

Prerequisites

• Node.js ≥ 18
• A Gemini API key — get one free at Google AI Studio

Installation

# Clone the repo
git clone https://github.com/<your-username>/Gemini-Censor.git
cd Gemini-Censor

# Install dependencies
npm install

Configuration

Create a .env.local file in the project root:

API_KEY=your_gemini_api_key_here

Run

npm run dev

Open the URL shown in your terminal (usually http://localhost:5173).

Build for Production

npm run build
npm run preview   # preview the production build locally

Project Structure

├── App.tsx                   # Main application component & state management
├── components/
│   ├── ImageEditor.tsx       # Canvas renderer, drag/resize interaction layer
│   └── Button.tsx            # Reusable button component
├── services/
│   └── geminiService.ts      # Gemini API integration & bounding-box detection
├── types.ts                  # Shared TypeScript types & enums
├── index.html                # HTML entry point
├── index.tsx                 # React entry point
├── vite.config.ts            # Vite configuration
└── package.json

How the AI Detection Works

The app sends the uploaded image (as base64) along with the user’s description to Gemini 3 Pro. The model is prompted to return a structured JSON response containing an array of bounding boxes (coordinates scaled 0–1000) for every region matching the description. These boxes are then rendered as interactive overlays on an HTML5 Canvas where the pixelation or blur effect is applied at the native image resolution.

License

Distributed under the MIT License. See LICENSE for details.

Acknowledgments

• Google Gemini for the multimodal vision model
• Lucide for the icon set
• Built with Google AI Studio