| <!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"> |
| </head> |
| <body> |
| <div class="card"> |
| <h1>OBS AI Background Remover</h1> |
| <p>Live Preview</p> |
| <div> |
| <video id="live-preview" autoplay style="width: 100%; border-radius: 8px;"></video> |
| <canvas id="output-canvas" style="display: none;"></canvas> |
| <p id="video-status">No video source selected</p> |
| </div> |
|
|
| <h1>Background Replacement</h1> |
| <div> |
| <label><input type="radio" name="background" value="transparent" checked> Transparent</label> |
| <label><input type="radio" name="background" value="solid-black"> Solid Black</label> |
| <label><input type="radio" name="background" value="solid-gray"> Solid Gray</label> |
| <label><input type="radio" name="background" value="solid-green"> Solid Green</label> |
| <label><input type="radio" name="background" value="custom-image"> Custom Image |
| <input type="file" id="custom-image-input" accept="image/*"> |
| </label> |
| <label><input type="radio" name="background" value="custom-video"> Custom Video |
| <input type="file" id="custom-video-input" accept="video/*"> |
| </label> |
| <label><input type="radio" name="background" value="blurred"> Blurred</label> |
| </div> |
|
|
| <h1>Controls</h1> |
| <div> |
| <label>Video Source</label> |
| <select id="video-source"> |
| <option value="">Select a video source</option> |
| </select> |
| </div> |
| <div> |
| <label><input type="checkbox" id="enable-bg-removal"> Enable Background Removal</label> |
| <label><input type="checkbox" id="show-preview" checked> Show Preview</label> |
| </div> |
|
|
| <h1>Settings</h1> |
| <div> |
| <label>AI Model Quality</label> |
| <select id="model-quality"> |
| <option value="fast">Fast (Low Quality)</option> |
| <option value="balanced" selected>Balanced</option> |
| <option value="high">High Quality (Slow)</option> |
| </select> |
| </div> |
| <div> |
| <label>Edge Smoothness</label> |
| <input type="range" id="edge-smoothness" min="0" max="10" value="5"> |
| </div> |
| <div> |
| <label>Background Blur</label> |
| <input type="range" id="background-blur" min="0" max="20" value="0"> |
| </div> |
| <div> |
| <label>Foreground Brightness</label> |
| <input type="range" id="foreground-brightness" min="0.5" max="1.5" step="0.1" value="1"> |
| </div> |
|
|
| <h1>Performance</h1> |
| <div> |
| <p>Processing Time: <span id="processing-time">0 ms</span></p> |
| <p>FPS: <span id="fps">0</span></p> |
| </div> |
|
|
| <h1>OBS Integration</h1> |
| <p>Add this as a Browser Source in OBS with these settings:</p> |
| <div> |
| <p>Width: <span>1920</span></p> |
| <p>Height: <span>1080</span></p> |
| <p>Custom CSS: <span>None</span></p> |
| </div> |
| <div> |
| <button id="copy-url">Copy OBS Browser Source URL</button> |
| </div> |
| </div> |
|
|
| <script src="script.js"></script> |
| </body> |
| </html> |
