A pro-grade generative AI image studio and visual design suite powered by Google Gemini models via the @google/genai SDK. Built with modern React 19, TypeScript, Tailwind CSS v4, and Vite.
Atlas is engineered for creators, marketers, educators, and visual designers who demand granular control over composition, prompt engineering, and visual style.
- Advanced Composition Controls: Granular control over camera angles (wide, close-up, drone, low/high angle), studio lighting presets, aspect ratios (1:1, 16:9, 9:16, 4:3, 3:4, etc.), and depth of field.
- Resolution & Quality Settings: Native support for standard, 1K, 2K, and 4K output resolutions on compatible Gemini image models.
- Inpainting & Masking: Canvas-based brush masking tool for precise localized image editing and prompt-directed inpainting.
- Face Reference & Likeness Preservation: Upload face reference images for seamless subject identity blending and face swaps.
- AI Prompt Enhancer: One-click prompt expansion and cinematic prompt rewriting powered by
gemini-3.1-flash-lite. - Search-Grounded Generation: Real-time Google Search grounding to accurately depict recent trends, real-world entities, and memes.
- High-CTR Visual Architecture: Automatic composition optimized for mobile feeds and YouTube recommended cards.
- Catchy Power-Phrasing: AI-driven headline rewriter that condenses topics into 3–5 high-impact visual power words.
- Expression & Sticker Badges: Configurable facial emotion emphasis (shock, curiosity, intensity) and visual overlay stickers.
- Variant Generation: Generate multiple thumbnail variations with estimated CTR potential scores.
- Visual Hierarchy & Depth: Produces multi-panel educational infographics inspired by premium notebook aesthetics (soft shadows, structured cards, harmonious spacing).
- Style Preset System:
- Auto-Select: Automatically analyzes topic, audience level, and density to choose the optimal style.
- Sketch Note: Hand-drawn notebook aesthetic with imperfect lines and doodle icons.
- Kawaii: Soft pastel palette, rounded geometry, friendly typography.
- Professional: Clean corporate layout with neutral palettes and balanced margins.
- Scientific: High-precision diagrams, clean charts, and technical annotations.
- Anime, Clay, Editorial, Instructional, Bento Grid, Brick: Specialized aesthetic presets for diverse communication needs.
- Explain Then Visualize: Multi-stage concept compression that synthesizes complex topics or uploaded documents before rendering.
- Multi-Format Source Input: Accepts text topics, pasted notes, PDFs, and presentation materials.
Atlas provides a built-in model selector with dynamic configuration:
| Model ID | Display Name | Best For |
|---|---|---|
gemini-3.1-flash-image |
Gemini 3.1 Flash Image | High-quality balanced generation, multi-resolution editing (Recommended) |
gemini-3-pro-image |
Gemini 3 Pro Image | Ultra-high visual fidelity, complex scene rendering, and fine typography |
gemini-3.1-flash-lite-image |
Gemini 3.1 Flash Lite Image | Rapid, lightweight prototyping and budget-conscious generations |
gemini-2.5-flash-image |
Gemini 2.5 Flash Image | Fast generation and legacy workflow compatibility |
Note on Prompt Enhancements: The built-in prompt enhancement feature is powered by
gemini-3.1-flash-litefor ultra-fast, low-latency prompt rewrites.
- Framework: React 19 + TypeScript
- Bundler: Vite 6
- AI SDK: @google/genai
- Styling: Tailwind CSS v4
- Icons: Lucide React
- Animations: Motion
- Node.js (version 18 or higher recommended)
- npm or bun
- A Google Gemini API Key
-
Clone the repository:
git clone https://github.com/your-username/atlas-advanced-image-generation.git cd atlas-advanced-image-generation -
Install dependencies:
npm install
-
Configure environment variables: Create a
.envfile in the root directory (or copy from.env.example):cp .env.example .env
Edit
.envand provide your Gemini API key:GEMINI_API_KEY="your_gemini_api_key_here"
(Alternatively, you can launch the app and input your API key directly through the in-app modal.)
-
Start the development server:
npm run dev
The application will be accessible at
http://localhost:3000.
npm run dev: Starts the Vite development server on port 3000.npm run build: Type-checks and compiles production static assets intodist/.npm run preview: Locally previews the production build.npm run lint: Runs TypeScript validation (tsc --noEmit).npm run clean: Removes thedist/directory.
├── index.html # Main HTML entry point
├── metadata.json # Application metadata & capabilities configuration
├── package.json # Package configuration & scripts
├── tsconfig.json # TypeScript compiler configuration
├── vite.config.ts # Vite build configuration
├── src/
│ ├── main.tsx # Application bootstrap
│ ├── App.tsx # Root shell, mode routing, and global nav
│ ├── api.ts # Gemini API SDK interface & prompt engineering pipelines
│ ├── store.tsx # Global state context and persistent storage
│ ├── types.ts # TypeScript interfaces and model definitions
│ ├── index.css # Tailwind CSS styling and theme setup
│ └── components/
│ ├── ApiKeyModal.tsx # In-app Gemini API key and model manager
│ ├── Sidebar.tsx # Studio Mode parameters & generation controls
│ ├── ThumbnailSidebar.tsx # Viral Engine parameters & CTR controls
│ ├── InfographicSidebar.tsx # Infographic Maker parameters & presets
│ ├── MainArea.tsx # Canvas viewer, prompt bar, and outputs gallery
│ ├── MaskingTool.tsx # Canvas inpainting and brush masking interface
│ └── ErrorAlert.tsx # User-friendly diagnostic error displays
- Users can safely store their Gemini API key in
localStoragedirectly inside the browser using the in-app API Key Modal (accessed via the top-right header pill or the sidebar). - If an API key or quota issue occurs, Atlas provides descriptive diagnostics explaining the root cause (e.g., authentication failure, quota exhaustion, safety filter triggered) with actionable steps to resolve it.
This project is licensed under the Apache-2.0 License.