Spaces:
Running
Running
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Highly Accurate Dichotomous Image Segmentation</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| line-height: 1.6; | |
| } | |
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .upload-section { | |
| border: 2px dashed #ccc; | |
| padding: 20px; | |
| text-align: center; | |
| border-radius: 5px; | |
| } | |
| .results { | |
| display: flex; | |
| gap: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .result-box { | |
| flex: 1; | |
| min-width: 300px; | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| } | |
| button { | |
| background-color: #4CAF50; | |
| color: white; | |
| padding: 10px 15px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| button:hover { | |
| background-color: #45a049; | |
| } | |
| .code-block { | |
| background-color: #f5f5f5; | |
| padding: 15px; | |
| border-radius: 5px; | |
| overflow-x: auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Highly Accurate Dichotomous Image Segmentation</h1> | |
| <p>This is a demo for DIS, a model that can remove the background from a given image.</p> | |
| <div class="upload-section"> | |
| <h2>Upload Image</h2> | |
| <input type="file" id="imageInput" accept="image/*"> | |
| <button onclick="processImage()">Remove Background</button> | |
| </div> | |
| <div class="results"> | |
| <div class="result-box"> | |
| <h3>Original Image</h3> | |
| <img id="originalImage" src="" alt="Original image will appear here" style="display: none;"> | |
| </div> | |
| <div class="result-box"> | |
| <h3>Result (RGBA)</h3> | |
| <img id="resultImage" src="" alt="Result will appear here" style="display: none;"> | |
| </div> | |
| <div class="result-box"> | |
| <h3>Mask</h3> | |
| <img id="maskImage" src="" alt="Mask will appear here" style="display: none;"> | |
| </div> | |
| </div> | |
| <div> | |
| <h2>API Usage Example</h2> | |
| <p>You can also use the API directly with this JavaScript code:</p> | |
| <div class="code-block"> | |
| <pre><code> | |
| async function removeBackground(imageFile) { | |
| const formData = new FormData(); | |
| formData.append('image', imageFile); | |
| try { | |
| const response = await fetch('/api/remove_bg', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`HTTP error! status: ${response.status}`); | |
| } | |
| const data = await response.json(); | |
| console.log('Result:', data); | |
| return data; | |
| } catch (error) { | |
| console.error('Error:', error); | |
| throw error; | |
| } | |
| } | |
| // Usage example: | |
| // const fileInput = document.querySelector('input[type="file"]'); | |
| // removeBackground(fileInput.files[0]) | |
| // .then(data => { | |
| // // Handle response data | |
| // document.getElementById('resultImage').src = data.rgba_url; | |
| // document.getElementById('maskImage').src = data.mask_url; | |
| // }); | |
| </code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function processImage() { | |
| const fileInput = document.getElementById('imageInput'); | |
| if (!fileInput.files || fileInput.files.length === 0) { | |
| alert('Please select an image first'); | |
| return; | |
| } | |
| const file = fileInput.files[0]; | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| document.getElementById('originalImage').src = e.target.result; | |
| document.getElementById('originalImage').style.display = 'block'; | |
| }; | |
| reader.readAsDataURL(file); | |
| removeBackground(file) | |
| .then(data => { | |
| document.getElementById('resultImage').src = data.rgba_url; | |
| document.getElementById('resultImage').style.display = 'block'; | |
| document.getElementById('maskImage').src = data.mask_url; | |
| document.getElementById('maskImage').style.display = 'block'; | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| alert('An error occurred while processing the image'); | |
| }); | |
| } | |
| async function removeBackground(imageFile) { | |
| const formData = new FormData(); | |
| formData.append('image', imageFile); | |
| try { | |
| const response = await fetch('/api/remove_bg', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`HTTP error! status: ${response.status}`); | |
| } | |
| const data = await response.json(); | |
| console.log('Result:', data); | |
| return data; | |
| } catch (error) { | |
| console.error('Error:', error); | |
| throw error; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |