Spaces:

TDN-M
/

plugin

Running

App Files Files Community

TDN-M commited on Jul 29, 2025

Commit

d02188e

verified ·

1 Parent(s): 0981e2a

Update index.html

Browse files

Files changed (1) hide show

index.html +153 -61

index.html CHANGED Viewed

@@ -8,13 +8,14 @@
     <script src="https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/selfie_segmentation.js" crossorigin="anonymous"></script>
 </head>
 <body>
-    <div class="card">
         <h1>OBS AI Background Remover</h1>
         <div>
             <h2>Live Preview</h2>
             <video id="videoPreview" autoplay playsinline></video>
-            <canvas id="canvasOutput" width="1920" height="1080" style="display: none;"></canvas>
             <p id="status">Loading AI Model...</p>
         </div>
         <div>
@@ -38,7 +39,7 @@
             <div>
                 <input type="radio" name="bgType" id="bgCustomImage" value="customImage">
                 <label for="bgCustomImage">Custom Image</label>
-                <input type pigeonhole="file" id="customImageInput" accept="image/*">
             </div>
             <div>
                 <input type="radio" name="bgType" id="bgCustomVideo" value="customVideo">
@@ -60,13 +61,33 @@
                 </select>
             </div>
             <div>
-                <input type="checkbox" id="enableBgRemoval">
                 <label for="enableBgRemoval">Enable Background Removal</label>
             </div>
             <div>
                 <input type="checkbox" id="showPreview" checked>
                 <label for="showPreview">Show Preview</label>
             </div>
         </div>
         <div>
@@ -85,21 +106,36 @@
         </div>
     </div>
     <script>
         const videoElement = document.getElementById('videoPreview');
         const canvasElement = document.getElementById('canvasOutput');
         const canvasCtx = canvasElement.getContext('2d');
         const statusElement = document.getElementById('status');
         const videoSourceSelect = document.getElementById('videoSource');
         const enableBgRemoval = document.getElementById('enableBgRemoval');
         const showPreview = document.getElementById('showPreview');
         const processingTimeElement = document.getElementById('processingTime');
         const fpsElement = document.getElementById('fps');
         const copyUrlButton = document.getElementById('copyUrl');
         let selfieSegmentation;
-        let lastFrameTime = 0;
         let frameCount = 0;
-        let lastFpsUpdate = 0;
         // Initialize MediaPipe Selfie Segmentation
         async function initModel() {
@@ -107,7 +143,8 @@
                 locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`
             });
             selfieSegmentation.setOptions({
-                modelSelection: 1, // 0 for general, 1 for landscape
             });
             selfieSegmentation.onResults(onResults);
             await selfieSegmentation.initialize();
@@ -116,42 +153,66 @@
         // Populate video sources
         async function populateVideoSources() {
-            const devices = await navigator.mediaDevices.enumerateDevices();
-            videoSourceSelect.innerHTML = '<option value="">Select a video source</option>';
-            devices.forEach(device => {
-                if (device.kind === 'videoinput') {
-                    const option = document.createElement('option');
-                    option.value = device.deviceId;
-                    option.text = device.label || `Camera ${videoSourceSelect.options.length + 1}`;
-                    videoSourceSelect.appendChild(option);
-                }
-            });
         }
         // Start video stream
         async function startVideo(deviceId) {
-            const stream = await navigator.mediaDevices.getUserMedia({
-                video: { deviceId: deviceId ? { exact: deviceId } : undefined }
-            });
-            videoElement.srcObject = stream;
-            videoElement.play();
         }
         // Process video frames
         function onResults(results) {
             if (!enableBgRemoval.checked) {
                 canvasCtx.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
-                updatePerformance();
                 return;
             }
-            canvasCtx.save();
-            canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
-            // Draw segmented background
             const bgType = document.querySelector('input[name="bgType"]:checked').value;
             if (bgType === 'transparent') {
-                canvasCtx.globalCompositeOperation = 'destination-over';
                 canvasCtx.fillStyle = 'rgba(0, 0, 0, 0)';
                 canvasCtx.fillRect(0, 0, canvasElement.width, canvasElement.height);
             } else if (bgType === 'black') {
@@ -163,41 +224,33 @@
             } else if (bgType === 'green') {
                 canvasCtx.fillStyle = 'green';
                 canvasCtx.fillRect(0, 0, canvasElement.width, canvasElement.height);
-            } else if (bgType === 'customImage') {
-                const img = document.getElementById('customImageInput').files[0];
-                if (img) {
-                    const image = new Image();
-                    image.src = URL.createObjectURL(img);
-                    canvasCtx.drawImage(image, 0, 0, canvasElement.width, canvasElement.height);
-                }
-            } else if (bgType === 'customVideo') {
-                const vid = document.getElementById('customVideoInput').files[0];
-                if (vid) {
-                    const video = document.createElement('video');
-                    video.src = URL.createObjectURL(vid);
-                    video.loop = true;
-                    video.play();
-                    canvasCtx.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
-                }
             } else if (bgType === 'blur') {
-                canvasCtx.filter = 'blur(10px)';
                 canvasCtx.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
                 canvasCtx.filter = 'none';
             }
-            // Draw foreground (person)
             canvasCtx.globalCompositeOperation = 'destination-atop';
             canvasCtx.drawImage(results.segmentationMask, 0, 0, canvasElement.width, canvasElement.height);
             canvasCtx.globalCompositeOperation = 'source-over';
             canvasCtx.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
             canvasCtx.restore();
-            updatePerformance();
         }
         // Update performance metrics
-        function updatePerformance() {
-            const now = performance.now();
             frameCount++;
             if (now - lastFpsUpdate > 1000) {
                 const fps = frameCount / ((now - lastFpsUpdate) / 1000);
@@ -209,13 +262,13 @@
             lastFrameTime = now;
         }
-        // Copy URL
-        copyUrlButton.addEventListener('click', () => {
-            const url = window.location.href;
-            navigator.clipboard.writeText(url).then(() => {
-                alert('URL copied to clipboard!');
-            });
-        });
         // Event listeners
         videoSourceSelect.addEventListener('change', () => {
@@ -223,17 +276,53 @@
         });
         enableBgRemoval.addEventListener('change', () => {
             canvasElement.style.display = enableBgRemoval.checked ? 'block' : 'none';
-            videoElement.style.display = !enableBgRemoval.checked ? 'block' : 'none';
         });
         showPreview.addEventListener('change', () => {
-            document.querySelector('.card').style.display = showPreview.checked ? 'block' : 'none';
         });
         // Process video frames
         async function processFrame() {
-            if (enableBgRemoval.checked) {
                 await selfieSegmentation.send({ image: videoElement });
             }
             requestAnimationFrame(processFrame);
@@ -243,11 +332,14 @@
         async function init() {
             await initModel();
             await populateVideoSources();
-            await startVideo();
             processFrame();
         }
-        init();
     </script>
 </body>
 </html>

     <script src="https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/selfie_segmentation.js" crossorigin="anonymous"></script>
 </head>
 <body>
+    <div class="card" id="controlPanel">
         <h1>OBS AI Background Remover</h1>
         <div>
             <h2>Live Preview</h2>
             <video id="videoPreview" autoplay playsinline></video>
+            <canvas id="canvasOutput" width="1920" height="1080"></canvas>
             <p id="status">Loading AI Model...</p>
+            <p id="noVideo" style="display: none;">No video source selected</p>
         </div>
         <div>
             <div>
                 <input type="radio" name="bgType" id="bgCustomImage" value="customImage">
                 <label for="bgCustomImage">Custom Image</label>
+                <input type="file" id="customImageInput" accept="image/*">
             </div>
             <div>
                 <input type="radio" name="bgType" id="bgCustomVideo" value="customVideo">
                 </select>
             </div>
             <div>
+                <input type="checkbox" id="enableBgRemoval" checked>
                 <label for="enableBgRemoval">Enable Background Removal</label>
             </div>
             <div>
                 <input type="checkbox" id="showPreview" checked>
                 <label for="showPreview">Show Preview</label>
             </div>
+            <div>
+                <label for="modelQuality">AI Model Quality</label>
+                <input type="range" id="modelQuality" min="0" max="1" value="1" step="1">
+                <span id="modelQualityLabel">High Quality (Slow)</span>
+            </div>
+            <div>
+                <label for="edgeSmoothness">Edge Smoothness</label>
+                <input type="range" id="edgeSmoothness" min="0" max="1" value="0.5" step="0.1">
+                <span id="edgeSmoothnessLabel">Medium</span>
+            </div>
+            <div>
+                <label for="bgBlur">Background Blur</label>
+                <input type="range" id="bgBlur" min="0" max="20" value="0" step="1">
+                <span id="bgBlurLabel">Off</span>
+            </div>
+            <div>
+                <label for="fgBrightness">Foreground Brightness</label>
+                <input type="range" id="fgBrightness" min="0.5" max="1.5" value="1" step="0.1">
+                <span id="fgBrightnessLabel">Normal</span>
+            </div>
         </div>
         <div>
         </div>
     </div>
+    <p>Made with DeepSite - 🧬 Remix</p>
     <script>
+        // Initialize elements
         const videoElement = document.getElementById('videoPreview');
         const canvasElement = document.getElementById('canvasOutput');
         const canvasCtx = canvasElement.getContext('2d');
         const statusElement = document.getElementById('status');
+        const noVideoElement = document.getElementById('noVideo');
         const videoSourceSelect = document.getElementById('videoSource');
         const enableBgRemoval = document.getElementById('enableBgRemoval');
         const showPreview = document.getElementById('showPreview');
+        const controlPanel = document.getElementById('controlPanel');
         const processingTimeElement = document.getElementById('processingTime');
         const fpsElement = document.getElementById('fps');
         const copyUrlButton = document.getElementById('copyUrl');
+        const modelQuality = document.getElementById('modelQuality');
+        const edgeSmoothness = document.getElementById('edgeSmoothness');
+        const bgBlur = document.getElementById('bgBlur');
+        const fgBrightness = document.getElementById('fgBrightness');
+        const modelQualityLabel = document.getElementById('modelQualityLabel');
+        const edgeSmoothnessLabel = document.getElementById('edgeSmoothnessLabel');
+        const bgBlurLabel = document.getElementById('bgBlurLabel');
+        const fgBrightnessLabel = document.getElementById('fgBrightnessLabel');
         let selfieSegmentation;
+        let customImage = null;
+        let customVideo = null;
+        let lastFrameTime = performance.now();
         let frameCount = 0;
+        let lastFpsUpdate = performance.now();
         // Initialize MediaPipe Selfie Segmentation
         async function initModel() {
                 locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`
             });
             selfieSegmentation.setOptions({
+                modelSelection: parseInt(modelQuality.value), // 0: General, 1: Landscape
+                selfieMode: true
             });
             selfieSegmentation.onResults(onResults);
             await selfieSegmentation.initialize();
         // Populate video sources
         async function populateVideoSources() {
+            try {
+                const devices = await navigator.mediaDevices.enumerateDevices();
+                videoSourceSelect.innerHTML = '<option value="">Select a video source</option>';
+                devices.forEach(device => {
+                    if (device.kind === 'videoinput') {
+                        const option = document.createElement('option');
+                        option.value = device.deviceId;
+                        option.text = device.label || `Camera ${videoSourceSelect.options.length + 1}`;
+                        videoSourceSelect.appendChild(option);
+                    }
+                });
+            } catch (err) {
+                statusElement.textContent = 'Error accessing video devices';
+                console.error(err);
+            }
         }
         // Start video stream
         async function startVideo(deviceId) {
+            try {
+                if (videoElement.srcObject) {
+                    videoElement.srcObject.getTracks().forEach(track => track.stop());
+                }
+                if (!deviceId) {
+                    noVideoElement.style.display = 'block';
+                    videoElement.style.display = 'none';
+                    canvasElement.style.display = 'none';
+                    return;
+                }
+                const stream = await navigator.mediaDevices.getUserMedia({
+                    video: { deviceId: deviceId ? { exact: deviceId } : undefined }
+                });
+                videoElement.srcObject = stream;
+                videoElement.play();
+                noVideoElement.style.display = 'none';
+                videoElement.style.display = enableBgRemoval.checked ? 'none' : 'block';
+                canvasElement.style.display = enableBgRemoval.checked ? 'block' : 'none';
+            } catch (err) {
+                statusElement.textContent = 'Error starting video stream';
+                console.error(err);
+            }
         }
         // Process video frames
         function onResults(results) {
+            const now = performance.now();
+            canvasCtx.save();
+            canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
             if (!enableBgRemoval.checked) {
                 canvasCtx.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
+                canvasCtx.restore();
+                updatePerformance(now);
                 return;
             }
+            // Draw background
             const bgType = document.querySelector('input[name="bgType"]:checked').value;
+            canvasCtx.globalCompositeOperation = 'destination-over';
             if (bgType === 'transparent') {
                 canvasCtx.fillStyle = 'rgba(0, 0, 0, 0)';
                 canvasCtx.fillRect(0, 0, canvasElement.width, canvasElement.height);
             } else if (bgType === 'black') {
             } else if (bgType === 'green') {
                 canvasCtx.fillStyle = 'green';
                 canvasCtx.fillRect(0, 0, canvasElement.width, canvasElement.height);
+            } else if (bgType === 'customImage' && customImage) {
+                canvasCtx.drawImage(customImage, 0, 0, canvasElement.width, canvasElement.height);
+            } else if (bgType === 'customVideo' && customVideo) {
+                canvasCtx.drawImage(customVideo, 0, 0, canvasElement.width, canvasElement.height);
             } else if (bgType === 'blur') {
+                canvasCtx.filter = `blur(${bgBlur.value}px)`;
                 canvasCtx.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
                 canvasCtx.filter = 'none';
             }
+            // Apply edge smoothness (simulated via alpha threshold)
             canvasCtx.globalCompositeOperation = 'destination-atop';
+            canvasCtx.globalAlpha = parseFloat(edgeSmoothness.value);
             canvasCtx.drawImage(results.segmentationMask, 0, 0, canvasElement.width, canvasElement.height);
+            // Draw foreground with brightness adjustment
             canvasCtx.globalCompositeOperation = 'source-over';
+            canvasCtx.filter = `brightness(${fgBrightness.value})`;
             canvasCtx.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
+            canvasCtx.filter = 'none';
             canvasCtx.restore();
+            updatePerformance(now);
         }
         // Update performance metrics
+        function updatePerformance(now) {
             frameCount++;
             if (now - lastFpsUpdate > 1000) {
                 const fps = frameCount / ((now - lastFpsUpdate) / 1000);
             lastFrameTime = now;
         }
+        // Update slider labels
+        function updateSliderLabels() {
+            modelQualityLabel.textContent = modelQuality.value === '0' ? 'Fast (Low Quality)' : 'High Quality (Slow)';
+            edgeSmoothnessLabel.textContent = edgeSmoothness.value <= 0.3 ? 'Low' : edgeSmoothness.value <= 0.7 ? 'Medium' : 'High';
+            bgBlurLabel.textContent = bgBlur.value === '0' ? 'Off' : `${bgBlur.value}px`;
+            fgBrightnessLabel.textContent = fgBrightness.value < 1 ? 'Darker' : fgBrightness.value > 1 ? 'Brighter' : 'Normal';
+        }
         // Event listeners
         videoSourceSelect.addEventListener('change', () => {
         });
         enableBgRemoval.addEventListener('change', () => {
+            videoElement.style.display = enableBgRemoval.checked ? 'none' : 'block';
             canvasElement.style.display = enableBgRemoval.checked ? 'block' : 'none';
         });
         showPreview.addEventListener('change', () => {
+            controlPanel.style.display = showPreview.checked ? 'block' : 'none';
+        });
+        modelQuality.addEventListener('input', () => {
+            updateSliderLabels();
+            selfieSegmentation.setOptions({ modelSelection: parseInt(modelQuality.value) });
+        });
+        edgeSmoothness.addEventListener('input', updateSliderLabels);
+        bgBlur.addEventListener('input', updateSliderLabels);
+        fgBrightness.addEventListener('input', updateSliderLabels);
+        document.getElementById('customImageInput').addEventListener('change', (e) => {
+            if (e.target.files[0]) {
+                customImage = new Image();
+                customImage.src = URL.createObjectURL(e.target.files[0]);
+                document.getElementById('bgCustomImage').checked = true;
+            }
+        });
+        document.getElementById('customVideoInput').addEventListener('change', (e) => {
+            if (e.target.files[0]) {
+                customVideo = document.createElement('video');
+                customVideo.src = URL.createObjectURL(e.target.files[0]);
+                customVideo.loop = true;
+                customVideo.play();
+                document.getElementById('bgCustomVideo').checked = true;
+            }
+        });
+        copyUrlButton.addEventListener('click', () => {
+            const url = window.location.href;
+            navigator.clipboard.writeText(url).then(() => {
+                alert('URL copied to clipboard!');
+            }).catch(err => {
+                console.error('Failed to copy URL:', err);
+            });
         });
         // Process video frames
         async function processFrame() {
+            if (videoElement.srcObject && enableBgRemoval.checked) {
                 await selfieSegmentation.send({ image: videoElement });
             }
             requestAnimationFrame(processFrame);
         async function init() {
             await initModel();
             await populateVideoSources();
+            updateSliderLabels();
             processFrame();
         }
+        init().catch(err => {
+            statusElement.textContent = 'Initialization failed';
+            console.error(err);
+        });
     </script>
 </body>
 </html>