Skip to content

ByteCrister/quantipixor

BranchesTags

Repository files navigation

Quantipixor Banner

Quantipixor

A high-performance, privacy-first image processing suite — built for the modern web.

Compress, convert, resize, remove backgrounds, extract text, generate favicons, and explore mock data tools.
All in one place. Most tools run entirely in your browser.

Live Demo Next.js React TypeScript License: MIT

Live Demo · Report Bug · Request Feature

Table of Contents

About

Quantipixor started as a batch image compressor and has evolved into a comprehensive multi-tool image processing and developer utility suite. It is built on a hybrid processing model: privacy-sensitive operations (compression, conversion, resizing, background removal) run entirely client-side in the browser, while tasks requiring binary manipulation or AI inference (favicon generation, OCR, server-side AI, mock data) are handled through secure Next.js API routes.

Built with Next.js 16, React 19, and a Glassmorphism design system, Quantipixor delivers a polished, accessible experience on any modern browser — with zero data leaving your device for core operations.

Feature Suite

1. Batch Image Compressor

100% client-side — your images never leave your device.

Feature Detail
Client-Side Processing Compression via the HTML Canvas API — no server uploads
Batch Upload Up to 20 images per drop, 50 images in the queue simultaneously
Smart Deduplication SHA-256 file hashing prevents duplicate uploads
Configurable Quality Adjust from 20% to 80% (default: 70%)
ZIP Download All compressed images packaged into organized batch-N/ sub-folders
Custom Naming Set a base filename and batch size for output file naming
Real-Time Progress Per-image status tracking: pending → processing → completed / error
Re-Compress Keep files in queue and re-compress with different settings
Upload Feedback Stats on every upload: added, duplicates skipped, invalid, truncated

2. Image Converter

Convert between image formats entirely in the browser.

  • Convert across JPEG, PNG, WebP, AVIF, and other formats
  • Interactive crop tool with aspect ratio presets powered by react-easy-crop
  • Shared CropImage component reused across tools for a consistent UX

3. AI Background Removal

Remove image backgrounds using on-device AI or server-side inference.

  • Powered by @imgly/background-removal for in-browser inference
  • Fallback to HuggingFace Inference API (@huggingface/inference) and Gradio (@gradio/client) for server-side processing
  • Dedicated API route at /api/v1/bg-remove/
  • Shared cropping interface for post-removal refinement

4. OCR Document Formatter

Extract text from images and export as formatted documents.

  • Multi-provider OCR with automatic rotation:
    • Google Gemini (@google/genai) — primary AI provider
    • OCR.Space — fallback REST API
    • Tesseract.js — fully client-side OCR engine
  • Multi-language support: English, Bengali, Arabic, Hindi, Spanish
  • Document export: Download extracted text as .docx via docx and html-docx-js
  • Redis-based rate limiting via Upstash to protect API quotas
  • API route at /api/v1/ocr/

5. Favicon Generator

Generate production-ready .ico favicons from any image.

  • Upload and interactively crop your source image
  • Server-side processing with Sharp for high-quality resizing
  • .ico packaging via to-ico and icojs
  • Generates multi-resolution favicon sets
  • API route at /api/v1/generate-favicon/

6. Image Resizer

Resize images to exact dimensions — 100% client-side, no uploads.

  • Batch resize multiple JPG, PNG, WebP, or GIF files at once
  • Lock aspect ratio to prevent distortion
  • Presets for common sizes: HD, Full HD, 4K, and social media dimensions
  • All processing runs in the browser via the Canvas API — your images never leave your device

7. Mock Tools

Developer utilities for generating and exploring test data.

JSON Viewer

  • Paste raw JSON or upload a .json file to visualize nested structures
  • Interactive card-based layout for exploring arrays and objects
  • Copy formatted output with one click
  • Paginated results for large datasets

Random Profile Generator

  • Generate realistic mock user profiles instantly — names, emails, addresses, and avatars
  • Perfect for design mockups, UI testing, and prototyping
  • Profiles served via /api/v1/mock/profiles/
  • No sign-up required, fully private

Cross-Cutting Capabilities

Capability Detail
Glassmorphism UI Frosted glass aesthetic with translucent layers, backdrop blur, and luminous borders
Dark / Light Mode System-preference-aware theme with CSS variable tokens
Accessibility WCAG 2.2 AA compliant — keyboard-first interactions, visible focus states
SEO Optimized Full Open Graph, Twitter Card, and JSON-LD structured data
Animations Purposeful motion via Framer Motion and react-type-animation
Toast Notifications Global toast system via a dedicated Zustand store

How It Works

flowchart TD
    User(["User"])

    subgraph "Client-Side (Browser)"
        Compress["Batch Compressor\n(Canvas API)"]
        Convert["Image Converter\n(Canvas API)"]
        Resize["Image Resizer\n(Canvas API)"]
        RMBG_Client["Background Removal\n(@imgly/background-removal)"]
        OCR_Client["OCR\n(Tesseract.js)"]
        Crop["Shared CropImage\n(react-easy-crop)"]
        JsonViewer["JSON Viewer\n(Client-Side)"]
    end

    subgraph "Next.js API Routes (/api/v1/)"
        OCR_API["/ocr\n(Gemini / OCR.Space)"]
        RMBG_API["/bg-remove\n(HuggingFace / Gradio)"]
        Favicon_API["/generate-favicon\n(Sharp + to-ico)"]
        Mock_API["/mock/profiles\n(Profile Data)"]
    end

    subgraph "External Services"
        Gemini["Google Gemini AI"]
        OCRSpace["OCR.Space API"]
        HF["HuggingFace Inference"]
        Gradio["Gradio Client"]
        Redis["Upstash Redis\n(Rate Limiting)"]
        Blob["Vercel Blob\n(Storage)"]
    end

    User --> Compress
    User --> Convert
    User --> Resize
    User --> RMBG_Client
    User --> OCR_Client
    User --> Crop
    User --> JsonViewer
    User --> Mock_API

    OCR_Client -->|"fallback"| OCR_API
    RMBG_Client -->|"fallback"| RMBG_API
    Crop --> Favicon_API

    OCR_API --> Redis
    OCR_API --> Gemini
    OCR_API --> OCRSpace
    RMBG_API --> HF
    RMBG_API --> Gradio
    Favicon_API --> Blob
Loading

Tech Stack

Layer Technology
Framework Next.js 16 (App Router)
UI Library React 19
Language TypeScript 5
State Management Zustand 5
Styling Tailwind CSS v4 · Glassmorphism design system
UI Primitives Radix UI (Dialog, AlertDialog, Slot)
Animations Framer Motion · react-type-animation
Icons Lucide React · React Icons
Image Cropping react-easy-crop
ZIP Generation JSZip
Server Image Processing Sharp
Favicon Packaging to-ico · icojs
OCR (Client) Tesseract.js
OCR (Server) Google Gemini · OCR.Space
Background Removal @imgly/background-removal · HuggingFace · Gradio
AI (Additional) Groq SDK
Rate Limiting Upstash Redis
Storage Vercel Blob
Document Export docx · html-docx-js
Typography Plus Jakarta Sans (primary) · JetBrains Mono (monospace)

Project Structure

quantipixor/
├── public/
│   └── og-images/              # Open Graph images
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── about/              # About page
│   │   ├── help/               # Help & documentation page
│   │   ├── image/              # Image tools hub
│   │   │   ├── batch-compressor/   # Batch compression tool
│   │   │   ├── converter/          # Image format converter
│   │   │   ├── remove-bg/          # AI background removal
│   │   │   ├── ocr-doc-formatter/  # OCR document formatter
│   │   │   ├── generate-favicon/   # Favicon generator
│   │   │   └── resize/             # Image resizer
│   │   ├── mock/               # Mock & developer tools hub
│   │   │   ├── json-viewer/        # JSON viewer & explorer
│   │   │   └── profile/            # Random profile generator
│   │   ├── api/
│   │   │   ├── v1/
│   │   │   │   ├── ocr/            # OCR API (Gemini / OCR.Space)
│   │   │   │   ├── bg-remove/      # Background removal API
│   │   │   │   ├── generate-favicon/  # Favicon generation API
│   │   │   │   └── mock/
│   │   │   │       └── profiles/   # Mock profile data API
│   │   │   └── test/               # Test routes
│   │   ├── layout.tsx          # Root layout (fonts, header, footer)
│   │   ├── page.tsx            # Landing page with SEO & JSON-LD
│   │   ├── globals.css         # Global styles & design tokens
│   │   ├── robots.ts           # robots.txt generation
│   │   └── sitemap.ts          # sitemap.xml generation
│   ├── components/
│   │   ├── about/              # About page components
│   │   ├── global/             # Shared components (Loading, QuantipixorIcon)
│   │   ├── help/               # Help page components
│   │   ├── image/
│   │   │   ├── batch-compressor/   # Compressor UI (DropZone, ImageList, etc.)
│   │   │   ├── converter/          # Converter UI
│   │   │   ├── generate-favicon/   # Favicon UI (CropImage)
│   │   │   ├── ocr-doc-formatter/  # OCR UI (OutputPanel, LanguageSelector)
│   │   │   ├── remove-bg/          # Background removal UI
│   │   │   └── resize/             # Image resizer UI
│   │   ├── mock/
│   │   │   ├── json-viewer/        # JSON Viewer UI (DataCard, ValueRenderer, etc.)
│   │   │   └── profile/            # Profile generator UI (MockProfilePage, ProfileSkeleton)
│   │   ├── landing/            # Landing page sections (Hero, Features)
│   │   ├── layout/             # Header & Footer
│   │   └── ui/                 # Reusable primitives (Button, Card, Dialog, Badge, Toaster)
│   ├── config/                 # App-level configuration
│   ├── const/
│   │   ├── image-extensions.ts     # 18 extensions, MIME maps, validation helpers
│   │   ├── imageCompressorLimits.ts # Upload & queue limits
│   │   ├── languages.ts            # OCR language codes (eng, ben, ara, hin, spa)
│   │   └── social-links.ts         # Creator social links
│   ├── fonts/                  # Local font assets
│   ├── hooks/
│   │   └── useImageCompressor.ts   # Custom hook for compressor logic
│   ├── lib/                    # Shared utility helpers
│   ├── store/
│   │   ├── imageCompressorStore.ts # Zustand store (state + actions)
│   │   └── toastStore.ts           # Global toast notification store
│   ├── types/
│   │   ├── index.ts            # Core interfaces (ImageItem, CompressionConfig, etc.)
│   │   └── ocr-space.ts        # OCR.Space API response types
│   └── utils/
│       └── image/
│           ├── compressors/    # Canvas-based compression engine
│           ├── converters/     # Format conversion utilities
│           ├── favicons/       # Favicon generation helpers
│           ├── ocr/            # OCR processing utilities
│           └── rmbg/           # Background removal utilities
├── AGENTS.md                   # Next.js agent rules
├── CLAUDE.md                   # Glassmorphism design system guidelines
├── next.config.ts
├── postcss.config.mjs
├── eslint.config.mjs
├── tsconfig.json
└── package.json

Getting Started

Prerequisites

  • Node.js >= 18
  • npm, yarn, pnpm, or bun

Installation

# Clone the repository
git clone https://github.com/ByteCrister/quantipixor.git
cd quantipixor

# Install dependencies
npm install

# Copy the environment template and fill in your values
cp .env.example .env.local

# Start the development server
npm run dev

Open http://localhost:3000 in your browser.

Available Scripts

Command Description
npm run dev Start the development server
npm run build Create a production build
npm run start Start the production server
npm run lint Run ESLint

Environment Variables

Create a .env.local file in the project root. Variables marked required are needed for the corresponding feature to function.

Variable Feature Required Description
NEXT_PUBLIC_SITE_URL SEO / JSON-LD Yes Canonical site URL (e.g. https://quantipixor.vercel.app)
GOOGLE_GEMINI_API_KEY OCR For OCR Google Gemini API key for AI-powered OCR
OCR_SPACE_API_KEY OCR For OCR OCR.Space API key (fallback OCR provider)
GROQ_API_KEY AI Optional Groq API key for additional AI inference
UPSTASH_REDIS_REST_URL Rate Limiting For OCR API Upstash Redis REST URL
UPSTASH_REDIS_REST_TOKEN Rate Limiting For OCR API Upstash Redis REST token
BLOB_READ_WRITE_TOKEN Storage For Favicon API Vercel Blob read/write token
HUGGINGFACE_API_KEY Background Removal For BG Remove API HuggingFace Inference API key

Note: The Batch Compressor, Image Converter, Image Resizer, and client-side Background Removal (@imgly/background-removal) work with no environment variables. Only the server-side API features (OCR, Favicon, server-side BG removal, Mock Profiles) require the above keys.

Configuration & Limits

Batch Compressor

Setting Range Default Description
Quality 0.2 – 0.8 0.7 Compression quality (affects JPEG & WebP output)
Batch Size 1 – 100 10 Images per sub-folder in the ZIP
Base Name any string "image" Prefix for output filenames
Max File Size — 15 MB Individual file size limit
Per Upload — 20 Max images accepted per file picker / drop
Total Queue — 50 Max images in the queue at once

OCR Languages

Language Code
English eng
Bengali ben
Arabic ara
Hindi hin
Spanish spa

ZIP Output Structure

compressed-images-<timestamp>.zip
├── batch-1/
│   ├── image-1.jpg
│   ├── image-2.png
│   └── image-3.webp
├── batch-2/
│   ├── image-1.jpg
│   └── image-2.png
└── ...

Files are named {baseName}-{sequenceWithinBatch}.{extension} and grouped into batch-{N}/ folders based on the configured batch size.

API Routes

All server-side routes are versioned under /api/v1/.

Route Method Description
POST /api/v1/ocr POST Extract text from an image using Gemini or OCR.Space with Redis rate limiting
POST /api/v1/bg-remove POST Remove image background via HuggingFace or Gradio inference
POST /api/v1/generate-favicon POST Generate a multi-resolution .ico favicon using Sharp and to-ico
GET /api/v1/mock/profiles GET Fetch randomly generated mock user profile data

Supported Formats

Quantipixor accepts 18 image extensions across 20+ MIME types:

Category Formats
JPEG family .jpg, .jpeg, .jfif, .pjpeg
PNG family .png, .apng
Modern formats .webp, .avif, .heic, .heif
Legacy / Other .gif, .bmp, .svg, .ico, .cur, .tiff, .tif

Note: The Canvas API reliably re-encodes to JPEG, WebP, and PNG only. All other input formats are rasterized to PNG during compression. Browser support for decoding HEIC/HEIF varies.

Roadmap

  • Batch image compression with quality control
  • ZIP download with organized batch folders
  • SHA-256 duplicate detection
  • Drag & drop + file picker upload
  • Real-time compression progress
  • Re-compress with different settings
  • SEO optimization (Open Graph, Twitter Cards, JSON-LD)
  • WCAG 2.2 AA accessibility
  • Image Format Converter — Convert between formats (PNG → WebP, HEIC → JPEG, etc.)
  • AI Background Removal — Client-side and server-side AI background removal
  • OCR Document Formatter — Extract text from images and export as .docx
  • Favicon Generator — Generate multi-resolution .ico favicons from any image
  • Multi-language OCR — English, Bengali, Arabic, Hindi, Spanish
  • Dark / Light Theme — System-preference-aware theme
  • Image Resizer — Resize by dimensions, percentage, or aspect ratio with presets
  • JSON Viewer — Paste or upload JSON and explore nested structures in a card-based UI
  • Random Profile Generator — Generate realistic mock user profiles for testing and prototyping
  • Bulk Resize + Compress — Combined resize and compress pipeline
  • Image Metadata Viewer / Stripper — View and strip EXIF, IPTC, and XMP metadata
  • Watermark Tool — Add text or image watermarks with position, opacity, and size controls
  • Before/After Preview — Side-by-side or slider comparison of original vs. processed
  • Compression Presets — Save and load named quality/format/size presets
  • PWA Support — Installable progressive web app with offline capability
  • Web Worker Compression — Non-blocking compression for large batches
  • Drag-to-Reorder Queue — Reorder images in the queue before processing
  • Individual Image Settings — Per-image quality and format overrides
  • Cloud Export — One-click export to Google Drive, Dropbox, or clipboard

Contributing

Contributions are welcome! Please follow these steps:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Please ensure your code passes linting (npm run lint) and follows the existing code style and Glassmorphism design guidelines documented in CLAUDE.md.

License

Distributed under the MIT License. See LICENSE for more information.

Author

Sadiqul Islam Shakib

GitHub LinkedIn Facebook Instagram

If you find Quantipixor useful, please consider giving it a ⭐

About

Quantipixor is a high-performance, privacy-focused web application designed for advanced image processing.

quantipixor.vercel.app

Topics

react typescript nextjs jszip tailwindcss framer-motion react-type-animation shadcn-ui zustand-state-management

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages