Spaces:

MySafeCode
/

depthmap

Sleeping

App Files Files Community

MySafeCode commited on 6 days ago

Commit

066f75f

verified ·

1 Parent(s): e0a1fd2

Upload static/index.html

Browse files

Files changed (1) hide show

static/index.html +158 -0

static/index.html ADDED Viewed

	@@ -0,0 +1,158 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Depth Video BG Remover</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gradient-to-r from-purple-400 to-blue-500 min-h-screen p-4">
+    <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-6">
+        <h1 class="text-3xl font-bold text-center text-gray-800 mb-2">
+            🎥 Depth Video Background Remover
+        </h1>
+        <p class="text-center text-gray-600 mb-6">
+            Remove video backgrounds using AI depth estimation
+        </p>
+        <!-- Upload Area -->
+        <div id="uploadArea" class="border-4 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-purple-500 transition">
+            <input type="file" id="fileInput" accept="video/*" class="hidden">
+            <div class="text-5xl mb-2">📁</div>
+            <p class="text-lg font-medium">Click or drag to upload video</p>
+            <p class="text-sm text-gray-500">MP4, MOV, AVI (max 50MB)</p>
+        </div>
+        <!-- Controls -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
+            <div class="bg-gray-100 p-4 rounded-lg">
+                <label class="block font-medium mb-2">
+                    Depth Threshold: <span id="thresholdVal">0.3</span>
+                </label>
+                <input type="range" id="threshold" min="0.1" max="0.9" step="0.05" value="0.3" class="w-full">
+                <p class="text-xs text-gray-500 mt-1">Lower = more background removed</p>
+            </div>
+            <div class="bg-gray-100 p-4 rounded-lg">
+                <label class="block font-medium mb-2">Background Color</label>
+                <input type="color" id="bgColor" value="#00FF00" class="w-full h-10">
+            </div>
+        </div>
+        <!-- Process Button -->
+        <button id="processBtn" disabled class="w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white font-bold py-3 px-4 rounded-lg text-lg disabled:opacity-50 disabled:cursor-not-allowed mb-6">
+            ✨ Process Video
+        </button>
+        <!-- Loading -->
+        <div id="loading" class="text-center hidden">
+            <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-purple-700 mb-2"></div>
+            <p>Processing video... This may take a minute.</p>
+        </div>
+        <!-- Preview -->
+        <div id="preview" class="hidden grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+                <h3 class="font-medium mb-2">Original</h3>
+                <video id="originalVideo" controls class="w-full rounded-lg bg-black"></video>
+            </div>
+            <div>
+                <h3 class="font-medium mb-2">Result</h3>
+                <video id="resultVideo" controls class="w-full rounded-lg bg-black"></video>
+                <div id="downloadArea" class="mt-2 text-center"></div>
+            </div>
+        </div>
+    </div>
+    <script>
+        const fileInput = document.getElementById('fileInput');
+        const uploadArea = document.getElementById('uploadArea');
+        const processBtn = document.getElementById('processBtn');
+        const loading = document.getElementById('loading');
+        const preview = document.getElementById('preview');
+        const originalVideo = document.getElementById('originalVideo');
+        const resultVideo = document.getElementById('resultVideo');
+        const threshold = document.getElementById('threshold');
+        const thresholdVal = document.getElementById('thresholdVal');
+        const bgColor = document.getElementById('bgColor');
+        const downloadArea = document.getElementById('downloadArea');
+        let currentFile = null;
+        // Update threshold display
+        threshold.addEventListener('input', () => {
+            thresholdVal.textContent = threshold.value;
+        });
+        // Upload handlers
+        uploadArea.addEventListener('click', () => fileInput.click());
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('border-purple-500');
+        });
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('border-purple-500');
+        });
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('border-purple-500');
+            const file = e.dataTransfer.files[0];
+            if (file && file.type.startsWith('video/')) {
+                handleFile(file);
+            }
+        });
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files[0]) handleFile(e.target.files[0]);
+        });
+        function handleFile(file) {
+            currentFile = file;
+            processBtn.disabled = false;
+            originalVideo.src = URL.createObjectURL(file);
+            preview.classList.remove('hidden');
+        }
+        // Process video
+        processBtn.addEventListener('click', async () => {
+            if (!currentFile) return;
+            loading.classList.remove('hidden');
+            processBtn.disabled = true;
+            const formData = new FormData();
+            formData.append('file', currentFile);
+            formData.append('threshold', threshold.value);
+            formData.append('bg_color', bgColor.value);
+            try {
+                const response = await fetch('/process', {
+                    method: 'POST',
+                    body: formData
+                });
+                if (!response.ok) throw new Error('Processing failed');
+                const blob = await response.blob();
+                const url = URL.createObjectURL(blob);
+                resultVideo.src = url;
+                downloadArea.innerHTML = `
+                    <a href="${url}" download="processed.mp4"
+                       class="inline-block bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700">
+                        ⬇️ Download Video
+                    </a>
+                `;
+            } catch (error) {
+                alert('Error: ' + error.message);
+            } finally {
+                loading.classList.add('hidden');
+                processBtn.disabled = false;
+            }
+        });
+    </script>
+</body>
+</html>