Refactor API structure: remove Streamlit integration, update Flask app, and enhance documentation

.gitattributes

@@ -33,5 +33,3 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
-assets/demo.gif filter=lfs diff=lfs merge=lfs -text
-assets/demo.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -121,8 +121,4 @@ venv.bak/
 dmypy.json
 
 # Pyre type checker
-.pyre/
-
-frontend
-magic-eraser-api
-magic-eraser
+.pyre/

.streamlit/config.toml

@@ -1,6 +0,0 @@
-[server]
-maxUploadSize = 10
-
-[theme]
-base="light"
-primaryColor="#0074ff"

Dockerfile

@@ -15,10 +15,6 @@ COPY . .
 
 RUN pip install -r requirements.txt
 
-# Default to running both Flask API and Streamlit app
-ENV RUN_MODE=all
 ENV PORT=7860
-ENV STREAMLIT_PORT=8501
 
-# Use our entrypoint script
-CMD [ "python", "entrypoint.py" ]
+CMD [ "python", "app.py" ]

README.md

@@ -1,12 +1,293 @@
 ---
-title: Magic Eraser
-emoji: 👁
-colorFrom: blue
+title: Magic Eraser API
+emoji: 🧹
+colorFrom: indigo
 colorTo: yellow
 sdk: docker
 pinned: false
 license: mit
-short_description: Erase unwanted object in your images
+short_description: Image processing API for removing objects from images
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 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:**
+```json
+{
+  "image": "data:image/png;base64,<base64-encoded-image>",
+  "mask": "data:image/png;base64,<base64-encoded-mask>"
+}
+```
+
+**Response:**
+```json
+{
+  "result": "data:image/png;base64,<base64-encoded-result>"
+}
+```
+
+**JavaScript Example:**
+```javascript
+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:**
+```json
+{
+  "image": "data:image/png;base64,<base64-encoded-image>",
+  "mask": "data:image/png;base64,<base64-encoded-mask>",
+  "vs": 50,
+  "hs": 30,
+  "mode": "resize"
+}
+```
+
+**Response:**
+```json
+{
+  "result": "data:image/png;base64,<base64-encoded-result>"
+}
+```
+**JavaScript Example:**
+```javascript
+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)
+
+```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:
+
+```jsx
+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
+
+1. Use a contrasting color for the mask (red or magenta works well)
+2. Keep brush strokes within the boundaries of the object to remove
+3. For best results, completely cover the object you want to remove
+4. 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:
+
+```bash
+# 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.

api.py

@@ -1,76 +0,0 @@
-from flask import Flask, request, jsonify
-from flask_cors import CORS
-import numpy as np
-import cv2
-import base64
-from src.core import process_inpaint, s_image
-import os
-
-app = Flask(__name__)
-CORS(app) 
-
-# endpoint for health checks
-@app.route('/', methods=['GET'])
-def health_check():
-    return jsonify({"status": "API is running"})
-
-@app.route('/api/inpaint', methods=['POST'])
-def inpaint():
-    # Get data from request
-    data = request.json
-    image_data = data.get('image')
-    mask_data = data.get('mask')
-    
-    # Convert base64 to numpy arrays
-    image = base64_to_image(image_data)
-    mask = base64_to_image(mask_data)
-    
-    # Process the image
-    result = process_inpaint(image, mask)
-    
-    # Convert back to base64
-    result_base64 = image_to_base64(result)
-    
-    return jsonify({'result': result_base64})
-
-@app.route('/api/seam-carve', methods=['POST'])
-def seam_carve():
-    # Get data from request
-    data = request.json
-    image_data = data.get('image')
-    mask_data = data.get('mask')
-    vs = int(data.get('vs', 0))  # vertical seams
-    hs = int(data.get('hs', 0))  # horizontal seams
-    mode = data.get('mode', 'resize')  # resize or remove
-    
-    # Convert base64 to numpy arrays
-    image = base64_to_image(image_data)
-    mask = base64_to_image(mask_data)
-    
-    # Process the image
-    result = s_image(image, mask, vs, hs, mode)
-    
-    # Convert back to base64
-    result_base64 = image_to_base64(result)
-    
-    return jsonify({'result': result_base64})
-
-def base64_to_image(base64_str):
-    img_bytes = base64.b64decode(base64_str.split(',')[1])
-    img_array = np.frombuffer(img_bytes, np.uint8)
-    img = cv2.imdecode(img_array, cv2.IMREAD_UNCHANGED)
-    return img
-
-def image_to_base64(image):
-    # Convert to BGR if it's RGB
-    if len(image.shape) > 2 and image.shape[2] == 3:
-        image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
-    
-    _, buffer = cv2.imencode('.png', image)
-    img_bytes = base64.b64encode(buffer).decode('utf-8')
-    return f"data:image/png;base64,{img_bytes}"
-
-if __name__ == '__main__':
-    # Use the PORT environment variable provided by Hugging Face or default to 7860
-    port = int(os.environ.get("PORT", 7860))
-    app.run(debug=True, host='0.0.0.0', port=port)

app.py

@@ -1,138 +1,83 @@
+from flask import Flask, request, jsonify, render_template
+from flask_cors import CORS
 import numpy as np
-import pandas as pd
-import streamlit as st
+import cv2
+import base64
+from src.core import process_inpaint, s_image
 import os
-from datetime import datetime
-from PIL import Image
-from streamlit_drawable_canvas import st_canvas
-from io import BytesIO
-from copy import deepcopy
 
-from src.core import process_inpaint
+app = Flask(__name__)
+CORS(app) 
 
-# API availability
-st.sidebar.info("""
-## API Endpoints
-REST API endpoints are available at:
-- `GET /` - Health check
-- `POST /api/inpaint` - For inpainting/object removal
-- `POST /api/seam-carve` - For seam carving
-""")
+# Add the API URL
+API_URL = os.environ.get("API_URL", "https://walidadebayo-image-eraser-api.hf.space/") 
 
-def image_download_button(pil_image, filename: str, fmt: str, label="Download"):
-    if fmt not in ["jpg", "png"]:
-        raise Exception(f"Unknown image format (Available: {fmt} - case sensitive)")
+# endpoint for health checks
+@app.route('/', methods=['GET'])
+def health_check():
+    # For browser requests, return HTML documentation
+    if request.headers.get('Accept', '').find('text/html') != -1:
+        return render_template('index.html', api_url=API_URL)
     
-    pil_format = "JPEG" if fmt == "jpg" else "PNG"
-    file_format = "jpg" if fmt == "jpg" else "png"
-    mime = "image/jpeg" if fmt == "jpg" else "image/png"
+    # For API health checks, return JSON
+    return jsonify({"status": "API is running"})
+
+@app.route('/api/inpaint', methods=['POST'])
+def inpaint():
+    # Get data from request
+    data = request.json
+    image_data = data.get('image')
+    mask_data = data.get('mask')
     
-    buf = BytesIO()
-    pil_image.save(buf, format=pil_format)
+    # Convert base64 to numpy arrays
+    image = base64_to_image(image_data)
+    mask = base64_to_image(mask_data)
     
-    return st.download_button(
-        label=label,
-        data=buf.getvalue(),
-        file_name=f'{filename}.{file_format}',
-        mime=mime,
-    )
-
-if "button_id" not in st.session_state:
-    st.session_state["button_id"] = ""
-if "color_to_label" not in st.session_state:
-    st.session_state["color_to_label"] = {}
-
-if 'reuse_image' not in st.session_state:
-    st.session_state.reuse_image = None
-def set_image(img):
-    st.session_state.reuse_image = img
-
-st.title("Magic-Eraser")
-
-st.image(open("assets/demo.png", "rb").read())
-
-st.markdown(
-    """
-    You don't have to worry about mastering photo editing techniques to remove an object from your photo. **Simply mark over the areas you want to erase, and our AI will take care of the rest.**
-    """
-)
-uploaded_file = st.file_uploader("Choose image", accept_multiple_files=False, type=["png", "jpg", "jpeg"])
-
-if uploaded_file is not None:
+    # Process the image
+    result = process_inpaint(image, mask)
     
-    if st.session_state.reuse_image is not None:
-        img_input = Image.fromarray(st.session_state.reuse_image)
-    else:
-        bytes_data = uploaded_file.getvalue()
-        img_input = Image.open(BytesIO(bytes_data)).convert("RGBA")
-
- #resize
-    max_size = 2000
-    img_width, img_height = img_input.size
-    if img_width > max_size or img_height > max_size:
-        if img_width > img_height:
-            new_width = max_size
-            new_height = int((max_size / img_width) * img_height)
-        else:
-            new_height = max_size
-            new_width = int((max_size / img_height) * img_width)
-        img_input = img_input.resize((new_width, new_height))
+    # Convert back to base64
+    result_base64 = image_to_base64(result)
     
-    stroke_width = st.slider("Brush size", 1, 100, 50)
+    return jsonify({'result': result_base64})
 
-    st.write("**Now draw (brush) the part of image that you want to remove.**")
+@app.route('/api/seam-carve', methods=['POST'])
+def seam_carve():
+    # Get data from request
+    data = request.json
+    image_data = data.get('image')
+    mask_data = data.get('mask')
+    vs = int(data.get('vs', 0))  # vertical seams
+    hs = int(data.get('hs', 0))  # horizontal seams
+    mode = data.get('mode', 'resize')  # resize or remove
+    
+    # Convert base64 to numpy arrays
+    image = base64_to_image(image_data)
+    mask = base64_to_image(mask_data)
     
-    canvas_bg = deepcopy(img_input)
-    aspect_ratio = canvas_bg.width / canvas_bg.height
-    streamlit_width = 720
+    # Process the image
+    result = s_image(image, mask, vs, hs, mode)
     
-    if canvas_bg.width > streamlit_width:
-        canvas_bg = canvas_bg.resize((streamlit_width, int(streamlit_width / aspect_ratio)))
+    # Convert back to base64
+    result_base64 = image_to_base64(result)
     
-    canvas_result = st_canvas(
-        stroke_color="rgba(255, 0, 255, 1)",
-        stroke_width=stroke_width,
-        background_image=canvas_bg,
-        width=canvas_bg.width,
-        height=canvas_bg.height,
-        drawing_mode="freedraw",
-        key="compute_arc_length", 
-    )
+    return jsonify({'result': result_base64})
+
+def base64_to_image(base64_str):
+    img_bytes = base64.b64decode(base64_str.split(',')[1])
+    img_array = np.frombuffer(img_bytes, np.uint8)
+    img = cv2.imdecode(img_array, cv2.IMREAD_UNCHANGED)
+    return img
+
+def image_to_base64(image):
+    # Convert to BGR if it's RGB
+    if len(image.shape) > 2 and image.shape[2] == 3:
+        image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
     
-    if canvas_result.image_data is not None:
-        im = np.array(Image.fromarray(canvas_result.image_data.astype(np.uint8)).resize(img_input.size))
-        background = np.where(
-            (im[:, :, 0] == 0) & 
-            (im[:, :, 1] == 0) & 
-            (im[:, :, 2] == 0)
-        )
-        drawing = np.where(
-            (im[:, :, 0] == 255) & 
-            (im[:, :, 1] == 0) & 
-            (im[:, :, 2] == 255)
-        )
-        im[background]=[0,0,0,255]
-        im[drawing]=[0,0,0,0] # RGBA
-        
-        reuse = False
-        
-        if st.button('Submit'):
-            
-            with st.spinner("AI is doing the magic!"):
-                output = process_inpaint(np.array(img_input), np.array(im)) #TODO Put button here
-                img_output = Image.fromarray(output).convert("RGB")
-            
-            st.write("AI has finished the job!")
-            st.image(img_output)
-            # reuse = st.button('Edit again (Re-use this image)', on_click=set_image, args=(inpainted_img, ))
-            
-            uploaded_name = os.path.splitext(uploaded_file.name)[0]
-            image_download_button(
-                pil_image=img_output,
-                filename=uploaded_name,
-                fmt="jpg",
-                label="Download Image"
-            )
-            
-            st.info("**TIP**: If the result is not perfect, you can download it then "
-                    "upload then remove the artifacts.")
+    _, buffer = cv2.imencode('.png', image)
+    img_bytes = base64.b64encode(buffer).decode('utf-8')
+    return f"data:image/png;base64,{img_bytes}"
+
+if __name__ == '__main__':
+    port = int(os.environ.get("PORT", 7860))
+    app.run(debug=True, host='0.0.0.0', port=port)

entrypoint.py

@@ -1,37 +0,0 @@
-import os
-import subprocess
-import threading
-import sys
-
-def run_flask():
-    print("Starting Flask API server...")
-    from api import app
-    # Use the PORT environment variable provided by Hugging Face or default to 7860
-    port = int(os.environ.get("PORT", 7860))
-    app.run(host='0.0.0.0', port=port)
-
-def run_streamlit():
-    print("Starting Streamlit app...")
-    # Start Streamlit on a different port
-    streamlit_port = int(os.environ.get("STREAMLIT_PORT", 8501))
-    subprocess.run([
-        "streamlit", "run", "app.py", 
-        "--server.port", str(streamlit_port),
-        "--server.address", "0.0.0.0"
-    ])
-
-if __name__ == "__main__":
-    mode = os.environ.get("RUN_MODE", "all").lower()
-    
-    if mode == "flask":
-        run_flask()
-    elif mode == "streamlit":
-        run_streamlit()
-    else:
-        # Run both in different threads
-        flask_thread = threading.Thread(target=run_flask)
-        flask_thread.daemon = True
-        flask_thread.start()
-        
-        # Run Streamlit in main thread
-        run_streamlit()

requirements.txt

@@ -1,5 +1,3 @@
-streamlit
-streamlit-drawable-canvas
 flask
 flask-cors
 numpy

src/st_style.py

@@ -1,42 +0,0 @@
-button_style = """
-<style>
-div.stButton > button:first-child {
-    background-color: rgb(255, 75, 75);
-    color: rgb(255, 255, 255);
-}
-div.stButton > button:hover {
-    background-color: rgb(255, 75, 75);
-    color: rgb(255, 255, 255);
-}
-div.stButton > button:active {
-    background-color: rgb(255, 75, 75);
-    color: rgb(255, 255, 255);
-}
-div.stButton > button:focus {
-    background-color: rgb(255, 75, 75);
-    color: rgb(255, 255, 255);
-}
-.css-1cpxqw2:focus:not(:active) {
-    background-color: rgb(255, 75, 75);
-    border-color: rgb(255, 75, 75);
-    color: rgb(255, 255, 255);
-}
-"""
-
-style = """
-<style>
-#MainMenu {
-    visibility: hidden;
-}
-footer {
-    visibility: hidden;
-}
-header {
-    visibility: hidden;
-}
-</style>
-"""
-
-
-def apply_prod_style(st):
-    return st.markdown(style, unsafe_allow_html=True)

templates/index.html

@@ -0,0 +1,317 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Magic Eraser API Documentation</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            line-height: 1.6;
+            color: #333;
+            max-width: 1100px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        header {
+            border-bottom: 1px solid #eee;
+            padding-bottom: 20px;
+            margin-bottom: 30px;
+        }
+        h1 {
+            color: #2c3e50;
+        }
+        h2 {
+            color: #3498db;
+            margin-top: 40px;
+        }
+        h3 {
+            color: #2980b9;
+        }
+        pre {
+            background-color: #f5f7f9;
+            border-radius: 5px;
+            padding: 15px;
+            overflow-x: auto;
+        }
+        code {
+            font-family: 'Courier New', Courier, monospace;
+        }
+        .endpoint {
+            background-color: #f8f9fa;
+            border-left: 4px solid #3498db;
+            padding: 15px;
+            margin-bottom: 20px;
+        }
+        .method {
+            display: inline-block;
+            padding: 3px 6px;
+            border-radius: 4px;
+            color: white;
+            font-size: 14px;
+            margin-right: 10px;
+        }
+        .get {
+            background-color: #3498db;
+        }
+        .post {
+            background-color: #2ecc71;
+        }
+        table {
+            border-collapse: collapse;
+            width: 100%;
+        }
+        th, td {
+            text-align: left;
+            padding: 12px;
+            border-bottom: 1px solid #ddd;
+        }
+        th {
+            background-color: #f2f2f2;
+        }
+        .container {
+            margin-top: 20px;
+        }
+        .demo-section {
+            margin-top: 40px;
+            padding: 20px;
+            background-color: #f9f9f9;
+            border-radius: 8px;
+        }
+        .btn {
+            display: inline-block;
+            padding: 10px 15px;
+            background-color: #3498db;
+            color: white;
+            text-decoration: none;
+            border-radius: 4px;
+            border: none;
+            cursor: pointer;
+        }
+        .btn:hover {
+            background-color: #2980b9;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>📷 Magic Eraser API</h1>
+        <p>An AI-powered REST API for removing unwanted objects from images and performing content-aware resizing.</p>
+        <p>Check out the InnoAI Space for the streamline demo frontend: <a href="https://huggingface.co/spaces/innoai/Magic-Eraser-Pub" target="_blank">Magic Eraser Demo</a></p>
+    </header>
+
+    <section>
+        <h2>Features</h2>
+        <ul>
+            <li><strong>Object Removal</strong>: Remove unwanted objects from images with advanced AI inpainting</li>
+            <li><strong>Seam Carving</strong>: Content-aware image resizing and object removal</li>
+            <li><strong>Simple Integration</strong>: Easy-to-use REST API endpoints</li>
+        </ul>
+    </section>
+
+    <section>
+        <h2>API Endpoints</h2>
+
+        <div class="endpoint">
+            <h3><span class="method get">GET</span> /</h3>
+            <p>Health check endpoint. Returns a status message if the API is running.</p>
+            <h4>Response</h4>
+            <pre><code>{
+  "status": "API is running"
+}</code></pre>
+        </div>
+
+        <div class="endpoint">
+            <h3><span class="method post">POST</span> /api/inpaint</h3>
+            <p>Removes objects from images and fills in the background using AI.</p>
+            <h4>Request Body</h4>
+            <pre><code>{
+  "image": "data:image/png;base64,<base64-encoded-image>",
+  "mask": "data:image/png;base64,<base64-encoded-mask>"
+}</code></pre>
+            <table>
+                <tr>
+                    <th>Parameter</th>
+                    <th>Type</th>
+                    <th>Description</th>
+                </tr>
+                <tr>
+                    <td>image</td>
+                    <td>string</td>
+                    <td>Base64-encoded image with data URL prefix</td>
+                </tr>
+                <tr>
+                    <td>mask</td>
+                    <td>string</td>
+                    <td>Base64-encoded mask where transparent areas (alpha=0) indicate what to remove</td>
+                </tr>
+            </table>
+            <h4>Response</h4>
+            <pre><code>{
+  "result": "data:image/png;base64,<base64-encoded-result>"
+}</code></pre>
+        </div>
+
+        <div class="endpoint">
+            <h3><span class="method post">POST</span> /api/seam-carve</h3>
+            <p>Content-aware resizing or object removal using the seam carving algorithm.</p>
+            <h4>Request Body</h4>
+            <pre><code>{
+  "image": "data:image/png;base64,<base64-encoded-image>",
+  "mask": "data:image/png;base64,<base64-encoded-mask>",
+  "vs": 50,
+  "hs": 30,
+  "mode": "resize"
+}</code></pre>
+            <table>
+                <tr>
+                    <th>Parameter</th>
+                    <th>Type</th>
+                    <th>Description</th>
+                </tr>
+                <tr>
+                    <td>image</td>
+                    <td>string</td>
+                    <td>Base64-encoded image with data URL prefix</td>
+                </tr>
+                <tr>
+                    <td>mask</td>
+                    <td>string</td>
+                    <td>Base64-encoded mask (optional for resize mode, required for remove mode)</td>
+                </tr>
+                <tr>
+                    <td>vs</td>
+                    <td>integer</td>
+                    <td>Number of vertical seams to add/remove (positive = add, negative = remove)</td>
+                </tr>
+                <tr>
+                    <td>hs</td>
+                    <td>integer</td>
+                    <td>Number of horizontal seams to add/remove (positive = add, negative = remove)</td>
+                </tr>
+                <tr>
+                    <td>mode</td>
+                    <td>string</td>
+                    <td>Either "resize" (change dimensions) or "remove" (remove objects)</td>
+                </tr>
+            </table>
+            <h4>Response</h4>
+            <pre><code>{
+  "result": "data:image/png;base64,<base64-encoded-result>"
+}</code></pre>
+        </div>
+    </section>
+
+    <section>
+        <h2>JavaScript Example</h2>
+        <p>Here's how to use the API in a JavaScript application:</p>
+
+        <h3>Inpainting Example</h3>
+        <pre><code>async function removeObject(imageBase64, maskBase64) {
+  const response = await fetch('{{ api_url }}/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
+}</code></pre>
+
+        <h3>Seam Carving Example</h3>
+        <pre><code>async function resizeImage(imageBase64, maskBase64) {
+  const response = await fetch('{{ api_url }}/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;
+}</code></pre>
+    </section>
+
+    <section>
+        <h2>Setting Up a Drawing Canvas</h2>
+        <p>To integrate with our API, you'll need a way for users to draw masks over images. Here's a simple HTML5 Canvas example:</p>
+
+        <pre><code>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;
+        }
+    };
+    img.src = imageUrl;
+}</code></pre>
+    </section>
+
+    <section class="demo-section">
+        <h2>Try It Out</h2>
+        <p>Visit our interactive demo frontend:</p>
+        <a href="https://walidadebayo-magic-eraser.netlify.app" class="btn" target="_blank">Open Demo Frontend</a>
+        <p><small>Demo frontend connects to this API for processing images.</small></p>
+    </section>
+
+    <footer>
+        <p><small>© 2023 Magic Eraser API. MIT License.</small></p>
+    </footer>
+</body>
+</html>