index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OBS AI Background Remover</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/obs-websocket-js@5"></script>
</head>
<body>
    <div class="card">
        <h1>Live Preview</h1>
        <div style="position: relative;">
            <video id="preview" autoplay style="width: 100%; height: auto;"></video>
            <p id="loading" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">Loading AI Model...</p>
        </div>
        <p id="no-video">No video source selected</p>
    </div>

    <div class="card">
        <h1>Background Replacement</h1>
        <label><input type="radio" name="bg-type" value="transparent"> Transparent</input></label>
        <label><input type="radio" name="bg-type" value="black"> Solid Black</input></label>
        <label><input type="radio" name="bg-type" value="gray"> Solid Gray</input></label>
        <label><input type="radio" name="bg-type" value="green"> Solid Green</input></label>
        <label><input type="radio" name="bg-type" value="custom-image"> Custom Image <input type="file" id="custom-image-input" accept="image/*"></input></label>
        <label><input type="radio" name="bg-type" value="custom-video"> Custom Video <input type="file" id="custom-video-input" accept="video/*"></input></label>
        <label><input type="radio" name="bg-type" value="blurred" id="blur-checkbox"> Blurred</input></label>
    </div>

    <div class="card">
        <h1>Controls</h1>
        <label>Video Source: <select id="video-source"><option>Select a video source</option></select></label>
        <label><input type="checkbox" id="enable-bg-removal"> Enable Background Removal</input></label>
        <label><input type="checkbox" id="show-preview"> Show Preview</input></label>
    </div>

    <div class="card">
        <h1>Performance</h1>
        <p>Processing Time: <span id="processing-time">0 ms</span></p>
        <p>FPS: <span id="fps">0</span></p>
    </div>

    <div class="card">
        <h1>OBS Integration</h1>
        <p>Add this as a Browser Source in OBS with these settings:</p>
        <p>Width: 1920</p>
        <p>Height: 1080</p>
        <p>Custom CSS: None</p>
        <button id="copy-url">Copy OBS Browser Source URL</button>
    </div>

    <script>
        const obs = new OBSWebSocket();

        async function connectToOBS() {
            try {
                await obs.connect('ws://localhost:4455', 'your-password');
                console.log('Connected to OBS WebSocket');
            } catch (err) {
                console.error('Failed to connect to OBS:', err);
            }
        }

        connectToOBS();

        // Stream video
        obs.on('SourceFilterVideoFrame', (data) => {
            if (data.sourceName === 'AI_remove_bg') {
                const video = document.getElementById('preview');
                const blob = new Blob([data.frameData], { type: 'video/webm' });
                video.src = URL.createObjectURL(blob);
                document.getElementById('loading').style.display = 'none';
                document.getElementById('no-video').style.display = 'none';
            }
        });

        // Update performance metrics
        obs.on('CustomEvent', (data) => {
            if (data.event === 'AI_remove_bg_metrics') {
                document.getElementById('processing-time').textContent = `${data.processingTime} ms`;
                document.getElementById('fps').textContent = data.fps;
            }
        });

        // Handle controls
        document.getElementById('enable-bg-removal').addEventListener('change', async (e) => {
            await obs.call('SetSourceFilterSettings', {
                sourceName: 'AI_remove_bg',
                filterName: 'AI_remove_bg',
                filterSettings: { seg_disen: !e.target.checked }
            });
        });

        document.getElementById('blur-checkbox').addEventListener('change', async (e) => {
            await obs.call('SetSourceFilterSettings', {
                sourceName: 'AI_remove_bg',
                filterName: 'AI_remove_bg',
                filterSettings: { blurbgbool: e.target.checked }
            });
        });

        document.getElementById('custom-image-input').addEventListener('change', async (e) => {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = async () => {
                    await obs.call('SetSourceFilterSettings', {
                        sourceName: 'AI_remove_bg',
                        filterName: 'AI_remove_bg',
                        filterSettings: { setbg: true, bgpic: reader.result }
                    });
                };
                reader.readAsDataURL(file);
            }
        });

        document.querySelectorAll('input[name="bg-type"]').forEach((input) => {
            input.addEventListener('change', async (e) => {
                let settings = {};
                switch (e.target.value) {
                    case 'transparent':
                        settings = { setbg: false, setcolor: false, blurbgbool: false };
                        break;
                    case 'black':
                        settings = { setcolor: true, bgColor: 0x000000 };
                        break;
                    case 'gray':
                        settings = { setcolor: true, bgColor: 0x808080 };
                        break;
                    case 'green':
                        settings = { setcolor: true, bgColor: 0x00FF00 };
                        break;
                    case 'blurred':
                        settings = { blurbgbool: true, setbg: false, setcolor: false };
                        break;
                }
                await obs.call('SetSourceFilterSettings', {
                    sourceName: 'AI_remove_bg',
                    filterName: 'AI_remove_bg',
                    filterSettings: settings
                });
            });
        });

        document.getElementById('copy-url').addEventListener('click', () => {
            const url = window.location.href;
            navigator.clipboard.writeText(url).then(() => {
                alert('URL copied to clipboard!');
            });
        });
    </script>
</body>
</html>