Skip to content
BranchesTags

Repository files navigation

🖼️ ImageLab v2.0 — AI-Powered Image Optimization & SaaS Suite

PHP Version MySQL Bootstrap JavaScript HTML5 CSS3 Fabric.js ImageMagick Python FastAPI OpenCV PyTorch Real--ESRGAN GFPGAN XAMPP Git GitHub VS Code

ImageLab is a modern, high-performance image processing, editing, and optimization platform. It combines traditional CLI-driven image operations (format conversion, resizing, metadata management, watermarking, and compression) with state-of-the-art Python AI processing models (upscaling, face restoration, background removal) in a premium, glassmorphic workspace.

ImageLab v2.0 introduces major UX improvements, real-time client-side compression estimates, automated file-size checks, a fully wired Undo/Redo stack, inline billing calculators, unified popbar alerts, and a complete visual theme adaptability engine.

📋 Table of Contents

1. Core v2.0 Feature Enhancements

🔔 Toast Notification System

  • A non-blocking, responsive floating toast notification stack located at the bottom-right (bottom-center on mobile devices).
  • Auto-dismisses with smooth slide-up and fade transitions after 4 seconds.
  • Uses semantic aria-live="polite" accessibility tags to report operations (success, warning, error) instantly.

🎞️ Session Gallery

  • Automatically logs all processed image outputs during a session in a horizontal scrollable rail.
  • Hovering over cards exposes direct Download and Copy to Clipboard options (always visible on mobile viewports).

↩️ Fully-Wired Undo/Redo Stack

  • Circular state buffer tracking up to 15 consecutive image enhancements.
  • Automatically seeds the baseline state on file upload/carry-over and pushes states on adjustment.
  • Uses an isOperating lock inside features.js to eliminate recursive state-pushing loops during restoration.

📂 Active File Carry-Over Banner

  • Swapping panels (e.g., Convert to Resize) prompts a slide-in alert banner to carry over the active uploaded image, avoiding redundant file uploads.

🎨 Live CSS Filter Previews

  • Uploading an image in the Enhancement workspace dynamically populates the filter cards with a real-time, CSS-filtered preview of the user's actual image.

📋 Copy-to-Clipboard Action

  • Instantly fetches the processed asset as a blob, converts it to a standard PNG representation, and copies it to the system clipboard for immediate sharing in other apps.

📊 Compression Size Estimate & Safeguards

  • Card selectors show calculated compression estimates instantly before hitting the server.
  • Size Inflation Safeguard: In ImageService.php, if compression produces a file larger than the original, it reverts to the original file to prevent file size inflation.
  • Indexed PNG Fallback: The Python CLI fallback (magick_fallback.py) parses the -colors argument and uses Pillow's .quantize(colors=N), optimize=True, and compress_level=9 to compress PNGs by ~70%.

📱 Mobile Navigation Bar

  • A sticky 60px bottom navigation bar that handles Apple safe-areas (env(safe-area-inset-bottom)) and provides interactive panel transitions on viewport sizes < 992px.

💳 SaaS Pricing Switchers

  • An interactive monthly/annual pricing toggle with animated transitions and a 20% discount badge.
  • Real-time license calculators, hash-persistent deep-linking, and transaction invoice tables.
  • Simulated Payment Sandbox: Localized checkout modal containing credit card inputs for sandbox testing. Includes "Simulate Success" and "Simulate Decline" buttons to demonstrate transactional database actions without external gateways.

🌟 Orbit Glows

  • Glowing radial gradients in key interface areas (like active upload zones and dashboard metrics) to deliver a modern, high-fidelity UI experience.

🎴 Unified Popbar Alerts

  • Replaces native blocking browser popups (alert, confirm, prompt) with an elegant top-floating glass banner featuring a translucent backdrop blur (25px), slide-down entrance, and inline text inputs.

2. Dynamic Visual Themes & Adaptability

ImageLab v2.0 introduces a robust, client-side CSS variables-based theme engine. The theme state is persisted in localStorage (imagelab-theme key) and instantly applied to document.documentElement (<html> element) as .theme-[name].

Theme Profiles

  1. Void Slate (Default Dark): A professional slate dark theme with charcoal grays, deep navy, and subtle blue highlights.
  2. Neon Cyberpunk: A vibrant, high-contrast dark theme with electric pink, neon cyan, and glowing borders.
  3. Classic Light: A clean, modern light theme with soft gray borders, rich slate text, and crisp backgrounds.

Complete Theme Adaptability

  • Custom Scrollbars: Slim scrollbars styled dynamically to match the active theme. Vertical scrollbars are 6px wide (4px in sidebar), and horizontal scrollbars are 4px, adapting track and thumb colors seamlessly.
  • Responsive Tables: Redrawn conversion history and queue lists utilize theme-adaptable color classes, avoiding hardcoded Bootstrap table classes.
  • Modal Close Buttons: Uses theme-aware SVG filters (--btn-close-filter) to match the color palette of Void, Cyberpunk, or Light.
  • Accordion Components: Styling for accordion headers, panels, borders, and expansion arrows adapts dynamically.
  • Inputs and Buttons: Hover effects, active press feedback, and focus rings match the theme parameters perfectly.

3. System Architecture

graph TD
    User[Browser Client]
    App[ImageLab Web Client]
    PHP[PHP API Backend]
    DB[(MySQL Database)]
    Python[Python CLI / FastAPI Fallback]
    Disk[(Uploads / Processed Storage)]

    User -->|HTTP Requests / WebSockets| App
    App -->|JSON / Forms| PHP
    PHP -->|SQL Queries| DB
    PHP -->|Shell Exec / Bat Commands| Python
    Python -->|File Reads & Writes| Disk
    PHP -->|Serve Images| User
Loading

4. Technology Stack

  • Frontend: HTML5, Vanilla ES6 JavaScript, CSS3 Custom Properties, Bootstrap 5.3, Fabric.js (Canvas editor), Chart.js (Dashboard analytics).
  • Backend: PHP 8.2+ (OOP Core, PDO, Config Managers, Security Validators).
  • Processing Engine: ImageMagick CLI (primary), Python 3.10+ with Pillow & OpenCV (magick_fallback wrapper and AI REST service).

5. Database Schema

All database migrations are consolidated in schema.sql. It defines the full database structure:

  • users: Core system authentication, authorization roles, and rate limit counters.
  • conversion_history: Tracks image processing runs, operations, and file size savings.
  • queue_jobs: For background processing queue orchestration.
  • enhancement_history: Audits applied enhancement actions.
  • saved_presets: User custom enhancement filter profiles.
  • ai_jobs: Audits deep-learning async requests.
  • projects: Stores multi-layer canvas configurations.
  • subscriptions: Details billing tier status and daily credits.
  • transactions & invoices: Audit logs for sandbox purchases.
  • api_keys & usage_logs: Tracks developer credentials and rate-limits.
  • user_credits_transactions: Log ledger for credit balances.
  • macro_scripts: Automated batch command scripts.

6. Project Directory Structure

ImageLab/
├── ai-service/              # Python FastAPI, models, and CLI fallback
│   ├── magick_fallback.py   # ImageMagick fallback script using Pillow/OpenCV
│   └── requirements.txt     # Python libraries
├── api/                     # Backend API endpoints
│   ├── auth/                # Login, registration, password reset endpoints
│   ├── saas/                # Billing, API keys, projects, metrics
│   ├── compress.php         # Compression logic
│   └── download.php         # Secure file serving with directory safety checks
├── assets/                  # Frontend assets
│   ├── css/style.css        # Main stylesheet with visual theme variables
│   ├── js/app.js            # Core UI event loops & processing actions
│   └── js/features.js       # v2.0 UX enhancements module
├── bin/                     # Command wrappers (magick.bat, convert.bat)
├── core/                    # Core PHP classes (Config, DB, Services)
├── includes/                # Shared layout templates (header, navbar, footer)
├── logs/                    # Security logs and error files
├── processed/               # Output destination for optimized images
├── public/                  # Document root
│   └── index.php            # Main dashboard and tab workspace views
├── uploads/                 # Storage path for original uploads
└── schema.sql               # MySQL database migration script

7. Installation & Setup

Prerequisites

  • XAMPP / WampServer (with PHP 8.2+ and MySQL 8.0+).
  • Python 3.10+ (for fallback processing and AI services).

Steps

  1. Clone the Repository: Clone this repository into your local web root (e.g., C:/xampp/htdocs/ImageLab).
  2. Set Up Database: Create a database named imagelab in phpMyAdmin or MySQL command line, and import schema.sql: 
    mysql -u root -p imagelab < schema.sql
  3. Configure Settings: Check and edit database details and base URLs inside core/Config.php.
  4. Initialize Python Environment: Run the following commands inside the ai-service directory to initialize the virtual environment and install dependencies: 
    cd ai-service
python -m venv venv
.\venv\Scripts\activate
pip install -r requirements.txt
  5. Start Web Server: Launch Apache and MySQL via the XAMPP Control Panel. Navigate to http://localhost/ImageLab/public/index.php.

8. Shortcuts Menu

Press ? inside the workspace to toggle the shortcuts panel:

  • 1-6: Switch workspace panels (Dashboard, Convert, Resize, Compress, Enhance, AI).
  • U: Trigger upload dialog for the active panel.
  • D: Download the last processed image result.
  • Ctrl + Z: Undo the last enhancement adjustment.
  • Ctrl + Shift + Z / Ctrl + Y: Redo the last enhancement adjustment.

9. Security Features

  • Path Traversal Protection: Validator::isPathSafe audits directories and prevents directory traversal attacks via upload or download parameters.
  • SQL Injection Prevention: All queries utilize PDO prepared statements.
  • Sanitized Filenames: Uploads are renamed using cryptographically secure hashes to avoid command injection and shell uploads.

About

ImageLab — web-based image processing, annotation and analysis platform (PHP · JavaScript · Python)

Topics

background-removaldark-themeface-restorationglassmorphismimage-conversionimage-processingimage-resizerimage-upscaler-freemetadatawatermark

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages