Spaces:

MaxonML
/

Video_enhancer_Watermark_remover

Running

App Files Files Community

MaxonML commited on Mar 7

Commit

3e997d4

verified ·

1 Parent(s): bba6d0a

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +263 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,263 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pro Watermark Remover</title>
+    <style>
+        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #1e1e2f; color: #fff; margin: 0; padding: 30px; display: flex; flex-direction: column; align-items: center; }
+        .container { background: #2a2a40; padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); max-width: 900px; width: 100%; text-align: center; }
+        .controls { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 25px; flex-wrap: wrap; }
+        input[type="file"], select, button { padding: 12px; border-radius: 8px; border: none; font-size: 16px; outline: none; }
+        select { background: #fff; color: #333; cursor: pointer; min-width: 250px; }
+        button { background: #ff4757; color: white; cursor: pointer; font-weight: bold; transition: 0.2s; }
+        button:hover { background: #ff6b81; transform: scale(1.05); }
+        button:disabled { background: #57606f; cursor: not-allowed; transform: none; }
+        .tool-panel { display: none; background: #353b48; padding: 10px 20px; border-radius: 8px; margin-bottom: 15px; justify-content: center; gap: 20px; align-items: center;}
+        .tool-panel label { cursor: pointer; font-weight: bold; }
+        .tool-panel input[type="range"] { vertical-align: middle; }
+        .workspace-wrapper { display: none; justify-content: center; margin-bottom: 25px; }
+        .editor-container { display: grid; position: relative; max-width: 100%; border: 2px solid #ff4757; border-radius: 8px; overflow: hidden; }
+        #video-frame { grid-area: 1 / 1; max-width: 100%; max-height: 60vh; width: auto; height: auto; display: block; }
+        #overlay-canvas { grid-area: 1 / 1; width: 100%; height: 100%; cursor: crosshair; z-index: 10; }
+        #status { padding: 15px; border-radius: 8px; background: #3742fa; font-weight: bold; display: none; margin-bottom: 20px; }
+        .btn-success { background: #2ed573; } .btn-success:hover { background: #7bed9f; }
+        .btn-clear { background: #718093; padding: 8px 15px; font-size: 14px; } .btn-clear:hover { background: #fbc531; color: #000; }
+    </style>
+</head>
+<body>
+<div class="container">
+    <h1 style="margin-top:0;">Pro Watermark Remover</h1>
+    <p style="color:#a4b0be;">Powered by FFmpeg. Draw a box or paint freely to remove watermarks.</p>
+    <div class="controls">
+        <input type="file" id="video-upload" multiple accept="video/*">
+        <button id="upload-btn">1. Upload File(s)</button>
+    </div>
+    <div class="tool-panel" id="tool-panel">
+        <label><input type="radio" name="tool" value="box" checked> 🟥 Rectangle</label>
+        <label><input type="radio" name="tool" value="brush"> 🖌️ Freehand Brush</label>
+        <span id="brush-size-container" style="display: none; margin-left: 10px;">
+            Size: <input type="range" id="brush-size" min="10" max="80" value="30">
+        </span>
+        <button class="btn-clear" id="clear-btn" style="margin-left: auto;">Undo / Clear</button>
+    </div>
+    <div class="workspace-wrapper" id="workspace">
+        <div class="editor-container">
+            <img id="video-frame" src="" draggable="false">
+            <canvas id="overlay-canvas"></canvas>
+        </div>
+    </div>
+    <div class="controls" id="process-controls" style="display: none;">
+        <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>
+        <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>
+        <button id="process-btn">2. Process Video</button>
+    </div>
+    <div id="status"></div>
+    <a id="download-link" style="display: none;"><button class="btn-success">3. Download Clean Video</button></a>
+</div>
+<script>
+    const uploadBtn = document.getElementById('upload-btn');
+    const fileInput = document.getElementById('video-upload');
+    const workspace = document.getElementById('workspace');
+    const toolPanel = document.getElementById('tool-panel');
+    const processControls = document.getElementById('process-controls');
+    const img = document.getElementById('video-frame');
+    const canvas = document.getElementById('overlay-canvas');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    const processBtn = document.getElementById('process-btn');
+    const statusBox = document.getElementById('status');
+    const downloadLink = document.getElementById('download-link');
+    const clearBtn = document.getElementById('clear-btn');
+    const brushSizeSlider = document.getElementById('brush-size');
+    const brushSizeContainer = document.getElementById('brush-size-container');
+    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;
+    // Tool toggle logic
+    document.querySelectorAll('input[name="tool"]').forEach(radio => {
+        radio.addEventListener('change', (e) => {
+            currentTool = e.target.value;
+            brushSizeContainer.style.display = currentTool === 'brush' ? 'inline-block' : 'none';
+            clearCanvas();
+        });
+    });
+    clearBtn.addEventListener('click', clearCanvas);
+    function clearCanvas() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        rectW = rectH = 0;
+        hasPainted = false;
+    }
+    function showStatus(msg) {
+        statusBox.style.display = 'block';
+        statusBox.innerText = msg;
+    }
+    uploadBtn.addEventListener('click', async () => {
+        if (!fileInput.files.length) return alert('Select videos first.');
+        const formData = new FormData();
+        for (let i = 0; i < fileInput.files.length; i++) { formData.append('videos', fileInput.files[i]); }
+        showStatus('Uploading and analyzing video...');
+        uploadBtn.disabled = true;
+        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 = () => {
+                    workspace.style.display = 'flex';
+                    processControls.style.display = 'flex';
+                    toolPanel.style.display = 'flex';
+                    canvas.width = img.clientWidth;
+                    canvas.height = img.clientHeight;
+                    showStatus('Draw over the watermark, then click Process.');
+                };
+                img.src = data.frame_url;
+            }
+        } catch (err) {
+            showStatus('Upload failed.');
+        }
+        uploadBtn.disabled = false;
+    });
+    // Mouse logic handles BOTH Rectangle and Brush
+    canvas.addEventListener('mousedown', (e) => {
+        const rect = canvas.getBoundingClientRect();
+        startX = e.clientX - rect.left;
+        startY = e.clientY - rect.top;
+        isDrawing = true;
+        if (currentTool === 'brush') {
+            ctx.beginPath();
+            ctx.moveTo(startX, startY);
+            ctx.lineCap = 'round';
+            ctx.lineJoin = 'round';
+            ctx.lineWidth = brushSizeSlider.value;
+            ctx.strokeStyle = 'rgba(255, 71, 87, 0.7)';
+        }
+    });
+    canvas.addEventListener('mousemove', (e) => {
+        if (!isDrawing) return;
+        const rect = canvas.getBoundingClientRect();
+        const currentX = e.clientX - rect.left;
+        const currentY = e.clientY - rect.top;
+        if (currentTool === 'box') {
+            rectW = currentX - startX;
+            rectH = currentY - startY;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = 'rgba(255, 71, 87, 0.3)';
+            ctx.fillRect(startX, startY, rectW, rectH);
+            ctx.strokeStyle = '#ff4757';
+            ctx.lineWidth = 2;
+            ctx.strokeRect(startX, startY, rectW, rectH);
+        } else if (currentTool === 'brush') {
+            ctx.lineTo(currentX, currentY);
+            ctx.stroke();
+            hasPainted = true;
+        }
+    });
+    canvas.addEventListener('mouseup', () => { isDrawing = false; });
+    canvas.addEventListener('mouseleave', () => { isDrawing = false; });
+    window.addEventListener('resize', () => {
+        if (workspace.style.display === 'flex') {
+            canvas.width = img.clientWidth;
+            canvas.height = img.clientHeight;
+            clearCanvas();
+        }
+    });
+    processBtn.addEventListener('click', async () => {
+        const isBoxEmpty = (currentTool === 'box' && rectW === 0 && rectH === 0);
+        const isBrushEmpty = (currentTool === 'brush' && !hasPainted);
+        if (isBoxEmpty || isBrushEmpty) {
+            return alert('You must mark the area on the video first.');
+        }
+        const x = rectW < 0 ? startX + rectW : startX;
+        const y = rectH < 0 ? startY + rectH : startY;
+        const payload = {
+            filenames: currentFilenames,
+            method: document.getElementById('method-select').value,
+            tool: currentTool,
+            upscale: document.getElementById('upscale-select').value,
+            orig_w: origVideoW,
+            orig_h: origVideoH,
+            // Only used if tool = box
+            px: x / canvas.width,
+            py: y / canvas.height,
+            pw: Math.abs(rectW) / canvas.width,
+            ph: Math.abs(rectH) / canvas.height,
+            // Only used if tool = brush
+            mask_b64: currentTool === 'brush' ? canvas.toDataURL('image/png') : ''
+        };
+        showStatus('Rendering video... This will be fast.');
+        processBtn.disabled = true;
+        downloadLink.style.display = 'none';
+        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) {
+                showStatus('Success! Download is ready.');
+                const name = data.download_name || '';
+                downloadLink.href = data.download_url + (name ? '?name=' + encodeURIComponent(name) : '');
+                downloadLink.style.display = 'inline-block';
+            } else {
+                showStatus('Error processing video: ' + (data.error || 'Unknown'));
+            }
+        } catch (err) {
+            showStatus('Processing failed. Please try again.');
+        }
+        processBtn.disabled = false;
+    });
+</script>
+</body>
+</html>