Spaces:

MaxonML
/

Neo_Vid_enhancer_watermark_remover

Sleeping

App Files Files Community

MaxonML commited on Mar 7

Commit

03548af

verified ·

1 Parent(s): 98f824b

Upload 3 files

Browse files

Files changed (3) hide show

Dockerfile +31 -0
requirements.txt +4 -0
templates/index.html +624 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,31 @@

+FROM python:3.11-slim
+# Install system ffmpeg
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends ffmpeg && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/*
+# Create a non-root user (HF Spaces requirement)
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+WORKDIR /home/user/app
+# Install Python dependencies
+COPY --chown=user requirements.txt .
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
+# Copy application files
+COPY --chown=user app.py .
+COPY --chown=user templates/ templates/
+# Create working directories under /tmp (writable in HF Spaces)
+RUN mkdir -p /tmp/uploads /tmp/processed
+EXPOSE 7860
+CMD ["python", "app.py"]

requirements.txt ADDED Viewed

	@@ -0,0 +1,4 @@

+flask
+opencv-python-headless
+numpy
+gunicorn

templates/index.html ADDED Viewed

	@@ -0,0 +1,624 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes">
+    <title>Vid Enhancer & Watermark Remover</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-base: #0f172a;
+            --glass-bg: rgba(30, 41, 59, 0.6);
+            --glass-border: rgba(255, 255, 255, 0.08);
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+            --accent: #6366f1;
+            --accent-hover: #4f46e5;
+            --accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
+            --danger: #ef4444;
+            --success: #10b981;
+            --radius-sm: 12px;
+            --radius-md: 16px;
+            --radius-lg: 24px;
+        }
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-base);
+            color: var(--text-main);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            padding: 20px 16px 60px 16px;
+            position: relative;
+            overflow-x: hidden;
+        }
+        /* Ambient glowing background */
+        body::before {
+            content: ''; position: fixed; top: -20%; left: -10%; width: 60vw; height: 60vw;
+            background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
+            filter: blur(80px); z-index: -1; pointer-events: none;
+        }
+        body::after {
+            content: ''; position: fixed; bottom: -20%; right: -10%; width: 50vw; height: 50vw;
+            background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 60%);
+            filter: blur(80px); z-index: -1; pointer-events: none;
+        }
+        .app-container {
+            width: 100%;
+            max-width: 800px;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+        }
+        header {
+            text-align: center;
+            margin-bottom: 8px;
+            margin-top: 16px;
+            animation: fadeInDown 0.6s ease-out;
+        }
+        h1 {
+            font-size: 2.2rem; margin-bottom: 8px; font-weight: 800; letter-spacing: -0.02em;
+            background: linear-gradient(to right, #ffffff, #a5b4fc);
+            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+        }
+        p.subtitle { color: var(--text-muted); font-size: 1rem; line-height: 1.5; }
+        /* Stepper */
+        .stepper {
+            display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
+            position: relative;
+            animation: fadeIn 0.8s ease-out;
+         }
+        .stepper::before {
+            content: ''; position: absolute; left: 10%; right: 10%; height: 2px;
+            background: var(--glass-border); z-index: 1; top: 50%; transform: translateY(-50%);
+        }
+        .step {
+            display: flex; flex-direction: column; align-items: center; gap: 8px;
+            position: relative; z-index: 2; width: 60px;
+        }
+        .step-circle {
+            width: 32px; height: 32px; border-radius: 50%; background: var(--bg-base); border: 2px solid var(--glass-border);
+            display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 600;
+            color: var(--text-muted); transition: all 0.3s ease;
+        }
+        .step.active .step-circle {
+            border-color: var(--accent); background: var(--accent); color: white;
+            box-shadow: 0 0 16px rgba(99, 102, 241, 0.4);
+        }
+        .step.completed .step-circle {
+            border-color: var(--success); background: var(--success); color: white;
+        }
+        .step-label { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.6; transition: 0.3s;}
+        .step.active .step-label { color: var(--text-main); opacity: 1; }
+        /* Glassmorphism Cards */
+        .card {
+            background: var(--glass-bg);
+            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
+            border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
+            padding: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.2);
+            animation: fadeInUp 0.5s ease-out backwards;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        /* Section visibility */
+        #section-upload, #section-mark, #section-process, #section-download { display: none; }
+        #section-upload.active, #section-mark.active, #section-process.active, #section-download.active { display: flex; flex-direction: column; gap: 20px; }
+        /* Upload area */
+        .upload-area {
+            border: 2px dashed var(--glass-border); border-radius: var(--radius-md);
+            padding: 40px 20px; text-align: center; cursor: pointer; transition: 0.3s;
+            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
+            background: rgba(255, 255, 255, 0.02);
+        }
+        .upload-area:hover, .upload-area.dragover {
+            border-color: var(--accent); background: rgba(99, 102, 241, 0.05); transform: translateY(-2px);
+        }
+        .upload-area i { font-size: 3rem; margin-bottom: 8px; font-style: normal; }
+        .upload-area input { display: none; }
+        /* Buttons */
+        .btn {
+            appearance: none; border: none; outline: none; padding: 16px 24px;
+            border-radius: var(--radius-md); font-family: inherit; font-size: 1rem; font-weight: 600;
+            cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
+            position: relative; overflow: hidden;
+        }
+        .btn:active { transform: scale(0.97); }
+        .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+        .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0.2), transparent); opacity: 0; transition: 0.2s; }
+        .btn:hover::after { opacity: 1; }
+        .btn-primary { background: var(--accent-gradient); color: white; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); }
+        .btn-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); }
+        .btn-secondary { background: rgba(255,255,255,0.1); color: var(--text-main); border: 1px solid var(--glass-border); }
+        .btn-secondary:hover { background: rgba(255,255,255,0.15); }
+        /* Image/Canvas Container */
+        .workspace-wrapper {
+            position: relative; width: 100%; border-radius: var(--radius-md);
+            overflow: hidden; background: #000; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+            display: flex; justify-content: center; align-items: center; border: 1px solid var(--glass-border);
+            touch-action: pinch-zoom; /* allowing native zoom, prevent inline scroll */
+        }
+        .editor-container { position: relative; max-width: 100%; display: inline-block; }
+        #video-frame { max-width: 100%; max-height: 60vh; width: auto; height: auto; display: block; object-fit: contain; pointer-events: none; user-select: none; }
+        #overlay-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: crosshair; z-index: 10; touch-action: none; }
+        /* Tools */
+        .tool-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px;}
+        .tool-btn {
+            padding: 14px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border);
+            background: rgba(255,255,255,0.05); color: var(--text-muted); font-weight: 500; font-size: 0.95rem;
+            cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
+        }
+        .tool-btn.active { background: rgba(99, 102, 241, 0.15); border-color: var(--accent); color: white; box-shadow: inset 0 0 10px rgba(99,102,241,0.2); }
+        .slider-container { display: none; flex-direction: column; gap: 8px; margin-bottom: 20px; transition: 0.3s; }
+        .slider-header { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--text-muted); }
+        input[type="range"] {
+            -webkit-appearance: none; width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 4px; outline: none;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); cursor: pointer; transition: 0.2s; box-shadow: 0 0 10px rgba(99,102,241,0.5);
+        }
+        input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); }
+        /* Form elements */
+        .form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
+        .form-group label { font-size: 0.9rem; font-weight: 500; color: var(--text-muted); }
+        select {
+            appearance: none; width: 100%; padding: 16px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border);
+            background: rgba(15, 23, 42, 0.8) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") no-repeat right 1rem center;
+            background-size: 1.2em; color: white; font-family: inherit; font-size: 1rem; outline: none; transition: 0.3s; cursor: pointer;
+        }
+        select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); }
+        select option { background: var(--bg-base); color: white; }
+        /* Status Toast */
+        .toast-container { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 100; pointer-events: none; display: flex; flex-direction: column; gap: 10px; width: 90%; max-width: 400px; }
+        .toast {
+            background: rgba(30, 41, 59, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+            border: 1px solid var(--glass-border); padding: 16px 20px; border-radius: var(--radius-md); font-weight: 500;
+            display: flex; gap: 12px; align-items: center; box-shadow: 0 10px 25px rgba(0,0,0,0.3); pointer-events: auto;
+            animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+        }
+        .toast.hiding { animation: fadeOut 0.4s ease forwards; }
+        .toast-icon { width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center; font-size: 1.2rem; }
+        .toast-content { flex-grow: 1; font-size: 0.95rem; word-break: break-word;}
+        @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes slideUp { from { opacity: 0; transform: translateY(50px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
+        @keyframes fadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }
+        /* Mobile specific adjustments */
+        @media (max-width: 600px) {
+            body { padding: 16px 12px 80px 12px; }
+            h1 { font-size: 1.8rem; }
+            .card { padding: 20px 16px; }
+            .step-label { font-size: 0.65rem; }
+            .upload-area { padding: 30px 10px; }
+            .btn { padding: 18px 20px; font-size: 1.05rem; /* Larger for mobile thumbs */ }
+            select { padding: 18px 16px; }
+            .workspace-wrapper { border-radius: 8px; }
+            #video-frame { max-height: 50vh; }
+        }
+    </style>
+</head>
+<body>
+<div class="app-container">
+    <header>
+        <h1>Vid Enhancer & Watermark Remover</h1>
+        <p class="subtitle">AI-powered watermark & object removal</p>
+    </header>
+    <div class="stepper" id="stepper">
+        <div class="step active" id="step1">
+            <div class="step-circle">1</div>
+            <span class="step-label">Upload</span>
+        </div>
+        <div class="step" id="step2">
+            <div class="step-circle">2</div>
+            <span class="step-label">Mark</span>
+        </div>
+        <div class="step" id="step3">
+            <div class="step-circle">3</div>
+            <span class="step-label">Refine</span>
+        </div>
+        <div class="step" id="step4">
+            <div class="step-circle">4</div>
+            <span class="step-label">Done</span>
+        </div>
+    </div>
+    <!-- Upload Section -->
+    <div class="card active" id="section-upload">
+        <label class="upload-area" id="upload-dropzone">
+            <i>📥</i>
+            <h3 style="font-weight: 600; color: white;">Tap to select video</h3>
+            <p style="color: var(--text-muted); font-size: 0.9rem;">or drag and drop here</p>
+            <input type="file" id="video-upload" accept="video/*" multiple>
+        </label>
+        <button class="btn btn-primary" id="upload-btn">Upload & Continue</button>
+    </div>
+    <!-- Mark Section (Workspace) -->
+    <div class="card" id="section-mark">
+        <div class="tool-bar">
+            <div class="tool-btn active" data-tool="box"><span>🟥</span> Rectangle</div>
+            <div class="tool-btn" data-tool="brush"><span>🖌️</span> FreeBrush</div>
+        </div>
+        <div class="slider-container" id="brush-size-container">
+            <div class="slider-header">
+                <span>Brush Size</span>
+                <span id="brush-size-val">30px</span>
+            </div>
+            <input type="range" id="brush-size" min="10" max="80" value="30">
+        </div>
+        <div class="workspace-wrapper" id="workspace">
+            <div class="editor-container">
+                <img id="video-frame" src="" alt="Video Frame">
+                <canvas id="overlay-canvas"></canvas>
+            </div>
+        </div>
+        <div style="display: flex; gap: 12px; margin-top: 8px;">
+            <button class="btn btn-secondary" id="clear-btn" style="flex: 1;">↺ Undo</button>
+            <button class="btn btn-primary" id="next-to-process" style="flex: 2;">Next ➞</button>
+        </div>
+    </div>
+    <!-- Process Options Section -->
+    <div class="card" id="section-process">
+        <h3 style="margin-bottom: 8px; color: white;">Processing Options</h3>
+        <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 20px;">Choose how the marked area should be handled.</p>
+        <div class="form-group">
+            <label>Removal Method</label>
+            <select id="method-select">
+                <option value="blur_heavy">Heavy Blur (Best for text/faces)</option>
+                <option value="blur_light">Soft Frosted Blur (Subtle blend)</option>
+                <option value="pixelate">Mosaic / Pixelate (TV look)</option>
+                <option value="delogo">AI Interpolation (Best for see-through logos)</option>
+                <option value="black_box">Solid Black Box (Total redaction)</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label>Upscaling (Optional)</label>
+            <select id="upscale-select">
+                <option value="none">📐 No Upscale (Original Quality)</option>
+                <option value="1.5x">🔺 1.5× Upscale (Sharper)</option>
+                <option value="2x">🔺 2× Upscale (Double Resolution)</option>
+                <option value="4k">🎬 4K Upscale (3840×2160)</option>
+            </select>
+        </div>
+        <div style="display: flex; gap: 12px; margin-top: 12px;">
+            <button class="btn btn-secondary" id="back-to-mark" style="flex: 1;">⬅ Back</button>
+            <button class="btn btn-primary" id="process-btn" style="flex: 2;">⚡ Start Processing</button>
+        </div>
+    </div>
+    <!-- Download Section -->
+    <div class="card" id="section-download">
+        <div style="text-align: center; padding: 20px 0;">
+            <div style="font-size: 4rem; margin-bottom: 16px; animation: fadeInUp 0.5s ease 0.2s both;">🎉</div>
+            <h2 style="color: white; margin-bottom: 8px;">Processing Complete</h2>
+            <p style="color: var(--text-muted); margin-bottom: 24px;">Your video is ready for download.</p>
+            <a id="download-link" style="display: block; text-decoration: none;">
+                <button class="btn btn-success" style="font-size: 1.1rem; padding: 20px;">⬇ Download Clean Video</button>
+            </a>
+            <button class="btn btn-secondary" id="start-over-btn" style="margin-top: 16px;">Start Over with New Video</button>
+        </div>
+    </div>
+</div>
+<div class="toast-container" id="toast-container"></div>
+<script>
+    // Elements
+    const fileInput = document.getElementById('video-upload');
+    const uploadArea = document.getElementById('upload-dropzone');
+    const uploadBtn = document.getElementById('upload-btn');
+    const sections = {
+        upload: document.getElementById('section-upload'),
+        mark: document.getElementById('section-mark'),
+        process: document.getElementById('section-process'),
+        download: document.getElementById('section-download')
+    };
+    const steps = [
+        document.getElementById('step1'), document.getElementById('step2'),
+        document.getElementById('step3'), document.getElementById('step4')
+    ];
+    const img = document.getElementById('video-frame');
+    const canvas = document.getElementById('overlay-canvas');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    const toolBtns = document.querySelectorAll('.tool-btn');
+    const brushSizeContainer = document.getElementById('brush-size-container');
+    const brushSize = document.getElementById('brush-size');
+    const brushSizeVal = document.getElementById('brush-size-val');
+    const clearBtn = document.getElementById('clear-btn');
+    const nextToProcessBtn = document.getElementById('next-to-process');
+    const backToMarkBtn = document.getElementById('back-to-mark');
+    const processBtn = document.getElementById('process-btn');
+    const downloadLink = document.getElementById('download-link');
+    const startOverBtn = document.getElementById('start-over-btn');
+    // State
+    let currentFilenames = [];
+    let origVideoW = 0, origVideoH = 0;
+    let isDrawing = false;
+    let startX = 0, startY = 0, rectW = 0, rectH = 0;
+    let currentTool = 'box';
+    let hasPainted = false;
+    let currentStepIndex = 0;
+    // --- Toast System ---
+    function showToast(msg, type = 'info') {
+        const container = document.getElementById('toast-container');
+        const toast = document.createElement('div');
+        toast.className = 'toast';
+        let icon = 'ℹ️';
+        if (type === 'success') icon = '✅';
+        if (type === 'error') icon = '❌';
+        if (type === 'loading') icon = '⏳';
+        toast.innerHTML = `<span class="toast-icon">${icon}</span><span class="toast-content">${msg}</span>`;
+        container.appendChild(toast);
+        // Haptic feedback if available
+        if (navigator.vibrate) {
+            if (type === 'error') navigator.vibrate([100, 50, 100]);
+            else if (type === 'success') navigator.vibrate(100);
+            else navigator.vibrate(50);
+        }
+        setTimeout(() => {
+            toast.classList.add('hiding');
+            toast.addEventListener('animationend', () => toast.remove());
+        }, 4000);
+    }
+    // --- Navigation System ---
+    function goToStep(stepKey, index) {
+        Object.values(sections).forEach(sec => sec.classList.remove('active'));
+        sections[stepKey].classList.add('active');
+        steps.forEach((st, i) => {
+            if (i < index) { st.classList.add('completed'); st.classList.remove('active'); }
+            else if (i === index) { st.classList.add('active'); st.classList.remove('completed'); }
+            else { st.classList.remove('active', 'completed'); }
+        });
+        currentStepIndex = index;
+        // Resize canvas if we enter mark step
+        if (stepKey === 'mark') setTimeout(resizeCanvas, 100);
+    }
+    startOverBtn.addEventListener('click', () => {
+        currentFilenames = []; fileInput.value = '';
+        clearCanvas(); goToStep('upload', 0);
+    });
+    nextToProcessBtn.addEventListener('click', () => {
+        const isBoxEmpty = (currentTool === 'box' && rectW === 0 && rectH === 0);
+        const isBrushEmpty = (currentTool === 'brush' && !hasPainted);
+        if (isBoxEmpty || isBrushEmpty) {
+            showToast('Please mark an area on the video first.', 'error');
+            return;
+        }
+        goToStep('process', 2);
+    });
+    backToMarkBtn.addEventListener('click', () => goToStep('mark', 1));
+    // --- Upload Logic ---
+    uploadArea.addEventListener('dragover', (e) => { e.preventDefault(); uploadArea.classList.add('dragover'); });
+    uploadArea.addEventListener('dragleave', () => uploadArea.classList.remove('dragover'));
+    uploadArea.addEventListener('drop', (e) => {
+        e.preventDefault(); uploadArea.classList.remove('dragover');
+        if (e.dataTransfer.files.length) { fileInput.files = e.dataTransfer.files; handleFiles(); }
+    });
+    fileInput.addEventListener('change', handleFiles);
+    function handleFiles() {
+        if (fileInput.files.length) {
+            uploadArea.querySelector('h3').innerText = `${fileInput.files.length} file(s) selected`;
+            uploadArea.style.borderColor = 'var(--success)';
+            uploadArea.style.background = 'rgba(16, 185, 129, 0.05)';
+        }
+    }
+    uploadBtn.addEventListener('click', async () => {
+        if (!fileInput.files.length) return showToast('Please select a video file first.', 'error');
+        const formData = new FormData();
+        for (let i = 0; i < fileInput.files.length; i++) formData.append('videos', fileInput.files[i]);
+        showToast('Uploading and analyzing...', 'loading');
+        uploadBtn.disabled = true; uploadBtn.innerText = 'Uploading...';
+        try {
+            const response = await fetch('/upload', { method: 'POST', body: formData });
+            const data = await response.json();
+            if (data.filenames) {
+                currentFilenames = data.filenames;
+                origVideoW = data.orig_w; origVideoH = data.orig_h;
+                img.onload = () => { goToStep('mark', 1); showToast('Video loaded! Draw over the watermark.', 'success'); };
+                img.src = data.frame_url;
+            } else {
+                throw new Error(data.error || 'Upload failed');
+            }
+        } catch (err) {
+            showToast(`Error: ${err.message}`, 'error');
+        } finally {
+            uploadBtn.disabled = false; uploadBtn.innerText = 'Upload & Continue';
+        }
+    });
+    // --- Workspace / Canvas Logic ---
+    function resizeCanvas() {
+        if (!img.clientWidth) return;
+        canvas.width = img.clientWidth; canvas.height = img.clientHeight;
+        clearCanvas();
+    }
+    window.addEventListener('resize', () => { if (currentStepIndex === 1) resizeCanvas(); });
+    // Tool toggle
+    toolBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            toolBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            currentTool = btn.dataset.tool;
+            brushSizeContainer.style.display = currentTool === 'brush' ? 'flex' : 'none';
+            if(navigator.vibrate) navigator.vibrate(40);
+            // Re-apply box dimensions if returning to box
+            if (currentTool === 'box') {
+                handleBoxRedraw();
+            }
+        });
+    });
+    brushSize.addEventListener('input', (e) => { brushSizeVal.innerText = `${e.target.value}px`; });
+    clearBtn.addEventListener('click', clearCanvas);
+    function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); rectW = rectH = 0; hasPainted = false; }
+    function handleBoxRedraw() {
+        if (rectW !== 0 || rectH !== 0) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = 'rgba(99, 102, 241, 0.2)';
+            ctx.fillRect(startX, startY, rectW, rectH);
+            ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 2;
+            ctx.strokeRect(startX, startY, rectW, rectH);
+        }
+    }
+    function getPos(e) {
+        const rect = canvas.getBoundingClientRect();
+        const clientX = e.clientX !== undefined ? e.clientX : (e.touches && e.touches.length > 0 ? e.touches[0].clientX : 0);
+        const clientY = e.clientY !== undefined ? e.clientY : (e.touches && e.touches.length > 0 ? e.touches[0].clientY : 0);
+        return { x: clientX - rect.left, y: clientY - rect.top };
+    }
+    function handleStart(e) {
+        if (e.type === 'touchstart' && e.touches.length > 1) return; // Allow pinch object
+        // Only prevent scroll inside canvas interaction (e.touches > 1 does not hit here)
+        if (e.cancelable) e.preventDefault();
+        isDrawing = true;
+        const pos = getPos(e);
+        if (currentTool === 'box') {
+            startX = pos.x; startY = pos.y;
+            rectW = 0; rectH = 0; // reset for new box
+        } else if (currentTool === 'brush') {
+            startX = pos.x; startY = pos.y;
+            ctx.beginPath();
+            ctx.moveTo(startX, startY);
+            ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+            ctx.lineWidth = brushSize.value;
+            ctx.strokeStyle = 'rgba(99, 102, 241, 0.7)';
+        }
+    }
+    function handleMove(e) {
+        if (!isDrawing) return;
+        if (e.cancelable) e.preventDefault();
+        const { x: currentX, y: currentY } = getPos(e);
+        if (currentTool === 'box') {
+            rectW = currentX - startX; rectH = currentY - startY;
+            handleBoxRedraw();
+        } else if (currentTool === 'brush') {
+            ctx.lineTo(currentX, currentY);
+            ctx.stroke();
+            hasPainted = true;
+        }
+    }
+    function handleEnd() { isDrawing = false; }
+    canvas.addEventListener('mousedown', handleStart);
+    canvas.addEventListener('mousemove', handleMove);
+    window.addEventListener('mouseup', handleEnd);
+    canvas.addEventListener('touchstart', handleStart, {passive: false});
+    canvas.addEventListener('touchmove', handleMove, {passive: false});
+    window.addEventListener('touchend', handleEnd);
+    // --- Processing Logic ---
+    processBtn.addEventListener('click', async () => {
+        let x = startX, y = startY, rW = rectW, rH = rectH;
+        // Normalize box coordinates handles drag-up-left
+        if (rW < 0) { x = startX + rW; rW = Math.abs(rW); }
+        if (rH < 0) { y = startY + rH; rH = Math.abs(rH); }
+        const payload = {
+            filenames: currentFilenames,
+            method: document.getElementById('method-select').value,
+            tool: currentTool,
+            upscale: document.getElementById('upscale-select').value,
+            orig_w: origVideoW, orig_h: origVideoH,
+            px: x / canvas.width, py: y / canvas.height,
+            pw: Math.abs(rW) / canvas.width, ph: Math.abs(rH) / canvas.height,
+            mask_b64: currentTool === 'brush' ? canvas.toDataURL('image/png') : ''
+        };
+        showToast('Rendering video... this won\'t take long! 🚀', 'loading');
+        processBtn.disabled = true; processBtn.innerHTML = '⚡ Processing...';
+        try {
+            const response = await fetch('/process', {
+                method: 'POST', headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+            const data = await response.json();
+            if (data.download_url) {
+                const name = data.download_name || '';
+                downloadLink.href = data.download_url + (name ? '?name=' + encodeURIComponent(name) : '');
+                goToStep('download', 3);
+                showToast('Success! Video is ready.', 'success');
+                if(navigator.vibrate) navigator.vibrate([100,50,100,50,200]);
+            } else {
+                throw new Error(data.error || 'Unknown error');
+            }
+        } catch (err) {
+            showToast(`Processing failed: ${err.message}`, 'error');
+        } finally {
+            processBtn.disabled = false; processBtn.innerHTML = '⚡ Start Processing';
+        }
+    });
+</script>
+</body>
+</html>