🗜️ UltraPixel - AI Image Compressor

UltraPixel is a 100% client-side, browser-based AI Image Compressor built with React and Web Workers.

Ever needed to compress an image but didn't want to upload your private data to a remote server? UltraPixel uses a lightweight on-device AI model to intelligently process and compress your images directly in your browser.

(Note: While originally an experiment with image upscaling, the model's unique capability to effectively reduce file size and quality made it a perfect fit for a client-side compressor!)

✨ Features

• 🔒 100% Client-Side & Private: Your images never leave your device. All processing is done locally in your browser.
• ⚡ Non-Blocking UI: Heavy AI computations are offloaded to Web Workers, ensuring the user interface remains smooth and responsive even during processing.
• 🎨 Modern Glassmorphic UI: A beautifully designed, drag-and-drop enabled interface that is easy to use.
• 📦 No Backend Required: Can be deployed statically anywhere (Vercel, Netlify, GitHub Pages, etc.).

🚀 Demo You can try ai-image-compressor live here:

🚀 Technologies Used

• React.js: Core frontend framework.
• Web Workers: For background processing to prevent UI freezing.
• Transformers.js: To run the AI model directly in the browser via ONNX runtime.
• HTML5 Canvas: For image data extraction and reconstruction.

---

🛠️ Getting Started

Prerequisites

Make sure you have Node.js and npm installed on your machine.

Installation

1. Clone the repository or download the source code.
2. Open your terminal and navigate to the project directory:

   cd image-upscaler

3. Install the dependencies:

   npm install

Running the App

Start the development server:

npm start

Open http://localhost:3000 to view it in your browser.

Note: On the very first run, it might take a moment to download the AI model into your browser cache.

💡 How It Works

1. Upload: You drop an image into the UI.
2. Preprocessing: The app reads the image and resizes it to an optimal dimension to prevent browser Out-Of-Memory (OOM) errors.
3. Background Processing: The raw RGBA pixel data is sent to a Web Worker.
4. AI Compression: The Transformer model processes the pixels, compressing the image.
5. Reconstruction: The Web Worker sends the compressed pixel data back to the main thread, where it is painted onto an HTML Canvas and made available for download!

📜 License

This project is open-source and available under the MIT License.