BrandKit Generator ✨

Generate a complete set of brand assets (logos, banners, icons) in multiple formats and sizes from a single image.

BrandKit is a web application designed to streamline the creation of brand assets. Upload one source image (like your logo), select desired formats, and BrandKit intelligently resizes, pads, and exports everything you need for websites, web apps, social media, and more. It uses Flask, Pillow, and Alpine.js, and is fully containerized for easy deployment.

Table of Contents

• Screenshots
• Key Features
• Technology Stack
• Quick Start
• Usage Guide
• Keyboard Shortcuts
• Performance Features
• Configuration
• File Structure
• Development
• Docker Details
• Security Features
• Deployment & Security
• Troubleshooting
• Contributing
• Changelog
• License

Screenshots

---

Key Features

🎯 AI-Powered Background Removal

• Advanced Background Removal: Powered by the rembg library with multiple AI models for different content types
• Smart Method Selection: Choose from Auto (best guess), Person/Portrait, Object/Product, or Anime/Illustration modes
• Background Color Options: Replace transparent areas with solid colors or keep transparency
• Edge Smoothing: Automatically smooth edges after background removal for professional results

🎨 Enhanced Image Processing

• Single Image Source: Upload one image (PNG, JPG, GIF, WEBP) and generate dozens of assets
• Advanced Preprocessing: Apply 15+ effects including grayscale, B&W, inversion, hue shifts, temperature adjustments, contrast enhancement, blur, vignette, saturation, brightness, sharpening, and watermarking
• Auto Crop: Intelligent cropping to remove unnecessary transparent/white areas
• Noise Reduction: Clean up image artifacts for better quality
• Drop Shadow Effects: Add professional drop shadows with customizable opacity and blur
• Quality Enhancement: Automatic sharpness, color, and contrast improvements

📐 Format & Output Management

• Wide Format Support: 25+ predefined formats for web, mobile, social media, business documents, and publishing
• Smart Background Fill: Automatically adds tasteful radial gradient backgrounds based on prominent colors
• Format Presets: Quick selection for Social Media Pack, Website Essentials, Mobile App Pack, and Complete Branding
• Multiple Output Types: Export as PNG, JPG, WEBP, and ICO (for favicons)
• Bulk Download: Download all generated assets in organized zip files

🚀 User Experience & Performance

• Format Search: Easily find specific formats using the search functionality
• Recent Uploads: Quick access to recently used images
• Color Variations: Generate multiple thematic variations for each format
• Keyboard Shortcuts: Power-user features for faster workflows (Shift+? for help)
• Intelligent Caching: Improved performance for repeat operations
• Visual Processing Feedback: Real-time progress information
• Modern UI: Responsive interface built with Tailwind CSS and Alpine.js

🔒 Security & Deployment

• Security Hardened: CSRF protection, rate limiting, CSP headers, and metadata stripping
• Memory Management: Automatic cleanup and optimization for stability
• Containerized: Easy deployment with Docker and Docker Compose
• Production Ready: Optimized for both development and production environments

---

Technology Stack

• Backend: Flask (Python 3.11+)
• AI Background Removal: rembg library with multiple neural network models
• Image Processing: Pillow (PIL), OpenCV, NumPy
• Frontend: Alpine.js, Tailwind CSS
• Security: Flask-WTF (CSRF), Flask-Limiter (rate limiting), Flask-Talisman (security headers)
• Performance: Flask-Caching, intelligent memory management, psutil monitoring
• Containerization: Docker, Docker Compose

---

Quick Start (Docker Compose)

The fastest way to get BrandKit running is with Docker Compose:

1. Clone the repository:

   git clone https://github.com/fabriziosalmi/brandkit.git
   cd brandkit
   

2. Build and run with Docker Compose:

   docker-compose up --build -d
   

   The -d flag runs containers in detached mode (background).

3. Open in your browser: Visit http://localhost:8000

4. Upload an image, select formats/options, and generate your brand kit!

5. Stop the application:

   docker-compose down
   

Troubleshooting Docker:

• Ensure Docker daemon is running
• Check port 8000 is not already in use: lsof -i :8000 (macOS/Linux) or netstat -ano | findstr :8000 (Windows)
• View logs: docker-compose logs -f brandkit

---

Usage Guide

Basic Workflow

1. Upload: Drag and drop an image file (PNG, JPG, GIF, WEBP, max 16MB) onto the upload area, or click to select a file. You can also select from your recent uploads.

Background Removal (NEW!)

2. AI Background Removal:
   • Toggle "🎯 Remove Background" to enable AI-powered background removal
   • Method Selection: Choose the best AI model for your content:
     • Auto: Best general-purpose detection
     • Person/Portrait: Optimized for human subjects
     • Object/Product: Best for products and objects
     • Anime/Illustration: Specialized for anime and illustrations
   • Background Color: Choose what replaces the removed background:
     • Keep Transparent, White, Black, Gray variations, or custom colors
     • Color picker available for precise color matching
   • Edge Smoothing: Automatically smooth edges for professional results

Advanced Preprocessing

3. Image Effects (Optional): Apply 15+ preprocessing effects before generating formats:
   • Basic Effects: Grayscale, B&W, Invert, Contrast Enhancement
   • Color Adjustments: Hue Shift (-180° to +180°), Temperature, Saturation, Brightness
   • Quality Enhancement: Auto Crop, Noise Reduction, Sharpen, Quality Enhancement
   • Artistic Effects: Blur with radius control, Vignette, Drop Shadow
   • Watermarking: Add custom text watermarks with opacity control

Format Selection & Generation

4. Select Formats:

   • Individual Selection: Check boxes for specific dimensions
   • Format Presets: Quick selection buttons:
     • Social Media Pack, Website Essentials, Mobile App Pack, Complete Branding
   • Format Search: Use the search bar to quickly find specific formats
   • Categories: Browse by Web Application, Website, Social Media, Mobile, Business Documents, Publishing

5. Output Options: Select file types (PNG, JPG, WEBP, ICO)

6. Advanced Options (Optional):

   • Control image quality (compression)
   • Strip metadata for privacy
   • Generate Color Variations (creates themed versions of each format)

7. Generate: Click Generate Brand Kit or use Ctrl+Enter

8. Download:

   • Individual assets via direct links
   • Bulk download as organized zip file with "Download All (.zip)"

---

Keyboard Shortcuts

Press Shift+? anywhere in the application to view the available keyboard shortcuts:

• Space - Open file selector when focused on upload area
• Ctrl+Enter or ⌘+Enter - Generate assets (submit form)
• Escape - Reset form or close dialogs

View complete shortcut documentation in KEYBOARD_SHORTCUTS.md

---

Performance Features

BrandKit includes several performance and reliability optimizations:

• AI Processing: GPU-accelerated background removal with multiple specialized models
• Image Caching: Processed images are cached and reused when possible, reducing processing time
• Memory Management: Intelligent garbage collection, memory monitoring with psutil, automatic cleanup
• Disk Space Management: Automatic cleanup of old files to prevent storage issues
• Processing Progress: Real-time visual feedback on processing steps and completion status
• Error Handling: Robust error handling and fallbacks for all processing steps
• Batch Operations: Efficient bulk processing of multiple formats simultaneously

---

Configuration (config.json)

The config.json file defines the available output formats, their dimensions, descriptions, and categories. You can customize this file to add, remove, or modify formats according to your needs.

Configuration Structure:

• formats: Dictionary defining each output format with width, height, and description
• format_categories: Groups formats logically for UI organization (Web Application, Website, Social Media, Mobile, Business Documents, Publishing)
• output_formats: Lists the supported export file types (png, jpg, webp, ico)
• preprocessing_options: Defines default values for preprocessing controls

Available Format Categories:

• Web Application: webapp, favicon, square logos, rectangle logos
• Website: website b