metadata

title: Magic Eraser API
emoji: 🧹
colorFrom: indigo
colorTo: yellow
sdk: docker
pinned: false
license: mit
short_description: Image processing API for removing objects from images

Magic Eraser API

An AI-powered REST API that helps you remove unwanted objects from images and perform content-aware resizing.

Features

Object Removal: Remove unwanted objects from images with advanced AI inpainting
Seam Carving: Content-aware image resizing and object removal
REST API: Simple endpoints for integrating image processing into your applications

API Documentation

The REST API provides these endpoints for image processing:

GET / - Health check endpoint
POST /api/inpaint - For inpainting/object removal
POST /api/seam-carve - For seam carving/content-aware resizing

Inpainting API

Endpoint: POST /api/inpaint

Request Body:

{
  "image": "data:image/png;base64,<base64-encoded-image>",
  "mask": "data:image/png;base64,<base64-encoded-mask>"
}

Response:

{
  "result": "data:image/png;base64,<base64-encoded-result>"
}

JavaScript Example:

async function removeObject(imageBase64, maskBase64) {
    const response = await fetch('https://yourdeployment.hf.space/api/inpaint', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        image: imageBase64,
        mask: maskBase64,
    }),
    });
    
    const data = await response.json();
    return data.result; // Base64 encoded result image
}

Seam Carving API

Endpoint: POST /api/seam-carve

Request Body:

{
  "image": "data:image/png;base64,<base64-encoded-image>",
  "mask": "data:image/png;base64,<base64-encoded-mask>",
  "vs": 50,
  "hs": 30,
  "mode": "resize"
}

Response:

{
  "result": "data:image/png;base64,<base64-encoded-result>"
}

JavaScript Example:

async function resizeImage(imageBase64, maskBase64) {
    const response = await fetch('https://yourdeployment.hf.space/api/seam-carve', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        image: imageBase64,
        mask: maskBase64,
        vs: -50,          // Remove 50 vertical seams (make narrower)
        hs: 30,           // Add 30 horizontal seams (make taller)
        mode: 'resize',   // or 'remove' to remove objects
    }),
    });
    
    const data = await response.json();
    return data.result;
}

Creating a Drawing Canvas for Masks

To integrate with our API, you'll need a way for users to draw masks over images. Here's how to set up a canvas in different frameworks:

Using HTML5 Canvas (JavaScript)

function setupCanvas(imageUrl) {
    // Create canvas elements
    const imageCanvas = document.createElement('canvas');
    const maskCanvas = document.createElement('canvas');
    const container = document.getElementById('canvas-container');
    container.appendChild(imageCanvas);
    container.appendChild(maskCanvas);
    
    // Load image
    const img = new Image();
    img.onload = function() {
        // Set canvas dimensions
        imageCanvas.width = maskCanvas.width = img.width;
        imageCanvas.height = maskCanvas.height = img.height;
        
        // Draw image on image canvas
        const imgCtx = imageCanvas.getContext('2d');
        imgCtx.drawImage(img, 0, 0);
        
        // Setup mask canvas for drawing
        const maskCtx = maskCanvas.getContext('2d');
        maskCtx.fillStyle = 'rgba(255, 0, 0, 0.5)';
        
        // Drawing state
        let isDrawing = false;
        
        // Mouse/touch event handlers
        maskCanvas.addEventListener('mousedown', startDrawing);
        maskCanvas.addEventListener('mousemove', draw);
        maskCanvas.addEventListener('mouseup', stopDrawing);
        maskCanvas.addEventListener('mouseleave', stopDrawing);
        
        function startDrawing(e) {
            isDrawing = true;
            draw(e);
        }
        
        function draw(e) {
            if (!isDrawing) return;
            const rect = maskCanvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            maskCtx.beginPath();
            maskCtx.arc(x, y, 15, 0, Math.PI * 2);
            maskCtx.fill();
        }
        
        function stopDrawing() {
            isDrawing = false;
        }
        
        // Add button to get mask data
        const button = document.createElement('button');
        button.textContent = 'Process Image';
        button.onclick = function() {
            const maskData = maskCanvas.toDataURL('image/png');
            const imageData = imageCanvas.toDataURL('image/png');
            
            // Send to API
            sendToAPI(imageData, maskData);
        };
        container.appendChild(button);
    };
    img.src = imageUrl;
}

function sendToAPI(imageData, maskData) {
    fetch('https://yourdeployment.hf.space/api/inpaint', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            image: imageData,
            mask: maskData
        }),
    })
    .then(response => response.json())
    .then(data => {
        // Display the result
        const resultImg = document.createElement('img');
        resultImg.src = data.result;
        document.getElementById('result-container').appendChild(resultImg);
    });
}

Using React with Canvas

For React applications, consider using libraries like:

react-konva for general canvas operations
react-canvas-draw for simple drawing tools
fabric.js wrapped in a React component for more complex drawing

Example with react-canvas-draw:

import React, { useRef, useState } from 'react';
import CanvasDraw from 'react-canvas-draw';

function MaskDrawer({ imageUrl, onSubmit }) {
    const canvasRef = useRef(null);
    const [brushSize, setBrushSize] = useState(15);
    
    const handleSubmit = () => {
        if (canvasRef.current) {
            // Get the mask data
            const maskData = canvasRef.current.canvas.drawing.toDataURL();
            onSubmit(imageUrl, maskData);
        }
    };
    
    const handleClear = () => {
        if (canvasRef.current) {
            canvasRef.current.clear();
        }
    };
    
    return (
        <div>
            <div>
                <label>
                    Brush Size:
                    <input 
                        type="range" 
                        min="5" 
                        max="50" 
                        value={brushSize} 
                        onChange={e => setBrushSize(parseInt(e.target.value))} 
                    />
                </label>
            </div>
            
            <CanvasDraw
                ref={canvasRef}
                brushColor="rgba(255, 0, 0, 0.5)"
                brushRadius={brushSize}
                lazyRadius={0}
                canvasWidth={800}
                canvasHeight={600}
                imgSrc={imageUrl}
            />
            
            <div>
                <button onClick={handleClear}>Clear</button>
                <button onClick={handleSubmit}>Process Image</button>
            </div>
        </div>
    );
}

Tips for Creating Effective Masks

Use a contrasting color for the mask (red or magenta works well)
Keep brush strokes within the boundaries of the object to remove
For best results, completely cover the object you want to remove
When sending to the API, make sure the mask's alpha channel is 0 for areas to remove

Local Development

To run the API locally:

# Install dependencies
pip install -r requirements.txt

# Run Flask API
python api.py

License

This project is licensed under the MIT License - see the LICENSE file for details.