| <!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; |
| |
| |
| 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; |
| }); |
| |
| |
| 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, |
| |
| px: x / canvas.width, |
| py: y / canvas.height, |
| pw: Math.abs(rectW) / canvas.width, |
| ph: Math.abs(rectH) / canvas.height, |
| |
| 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> |
