Spaces:
Runtime error
Runtime error
Update templates/index.html
Browse files- templates/index.html +19 -8
templates/index.html
CHANGED
|
@@ -67,6 +67,10 @@
|
|
| 67 |
border-radius: 5px;
|
| 68 |
margin-top: 20px;
|
| 69 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
| 70 |
</style>
|
| 71 |
</head>
|
| 72 |
<body>
|
|
@@ -78,6 +82,7 @@
|
|
| 78 |
<input type="file" id="imageInput" accept="image/*">
|
| 79 |
<button onclick="processImage()">Remove Background</button>
|
| 80 |
<div id="loading">Processing... Please wait...</div>
|
|
|
|
| 81 |
</div>
|
| 82 |
|
| 83 |
<div class="results" id="results">
|
|
@@ -88,7 +93,6 @@
|
|
| 88 |
<h3>About this service</h3>
|
| 89 |
<p>This is an implementation of DIS, a model that can remove the background from a given image.</p>
|
| 90 |
<p>GitHub: <a href="https://github.com/xuebinqin/DIS" target="_blank">https://github.com/xuebinqin/DIS</a></p>
|
| 91 |
-
<p>Telegram bot: <a href="https://t.me/restoration_photo_bot" target="_blank">https://t.me/restoration_photo_bot</a></p>
|
| 92 |
</div>
|
| 93 |
</div>
|
| 94 |
|
|
@@ -96,9 +100,11 @@
|
|
| 96 |
function processImage() {
|
| 97 |
const fileInput = document.getElementById('imageInput');
|
| 98 |
const file = fileInput.files[0];
|
|
|
|
|
|
|
| 99 |
|
| 100 |
if (!file) {
|
| 101 |
-
|
| 102 |
return;
|
| 103 |
}
|
| 104 |
|
|
@@ -112,12 +118,17 @@
|
|
| 112 |
method: 'POST',
|
| 113 |
body: formData
|
| 114 |
})
|
| 115 |
-
.then(response =>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 116 |
.then(data => {
|
| 117 |
loading.style.display = 'none';
|
| 118 |
|
| 119 |
if (data.error) {
|
| 120 |
-
|
| 121 |
return;
|
| 122 |
}
|
| 123 |
|
|
@@ -125,24 +136,24 @@
|
|
| 125 |
resultsDiv.innerHTML = `
|
| 126 |
<div class="result-item">
|
| 127 |
<h3>Original Image</h3>
|
| 128 |
-
<img src="/uploads/${
|
| 129 |
</div>
|
| 130 |
<div class="result-item">
|
| 131 |
<h3>Background Removed</h3>
|
| 132 |
<img src="${data.rgba_image}" alt="Background Removed">
|
| 133 |
-
<a href="${data.rgba_image}" download>Download</a>
|
| 134 |
</div>
|
| 135 |
<div class="result-item">
|
| 136 |
<h3>Mask</h3>
|
| 137 |
<img src="${data.mask_image}" alt="Mask">
|
| 138 |
-
<a href="${data.mask_image}" download>Download</a>
|
| 139 |
</div>
|
| 140 |
`;
|
| 141 |
})
|
| 142 |
.catch(error => {
|
| 143 |
loading.style.display = 'none';
|
| 144 |
console.error('Error:', error);
|
| 145 |
-
|
| 146 |
});
|
| 147 |
}
|
| 148 |
</script>
|
|
|
|
| 67 |
border-radius: 5px;
|
| 68 |
margin-top: 20px;
|
| 69 |
}
|
| 70 |
+
.error {
|
| 71 |
+
color: red;
|
| 72 |
+
margin: 10px 0;
|
| 73 |
+
}
|
| 74 |
</style>
|
| 75 |
</head>
|
| 76 |
<body>
|
|
|
|
| 82 |
<input type="file" id="imageInput" accept="image/*">
|
| 83 |
<button onclick="processImage()">Remove Background</button>
|
| 84 |
<div id="loading">Processing... Please wait...</div>
|
| 85 |
+
<div id="error" class="error"></div>
|
| 86 |
</div>
|
| 87 |
|
| 88 |
<div class="results" id="results">
|
|
|
|
| 93 |
<h3>About this service</h3>
|
| 94 |
<p>This is an implementation of DIS, a model that can remove the background from a given image.</p>
|
| 95 |
<p>GitHub: <a href="https://github.com/xuebinqin/DIS" target="_blank">https://github.com/xuebinqin/DIS</a></p>
|
|
|
|
| 96 |
</div>
|
| 97 |
</div>
|
| 98 |
|
|
|
|
| 100 |
function processImage() {
|
| 101 |
const fileInput = document.getElementById('imageInput');
|
| 102 |
const file = fileInput.files[0];
|
| 103 |
+
const errorDiv = document.getElementById('error');
|
| 104 |
+
errorDiv.textContent = '';
|
| 105 |
|
| 106 |
if (!file) {
|
| 107 |
+
errorDiv.textContent = 'Please select an image first';
|
| 108 |
return;
|
| 109 |
}
|
| 110 |
|
|
|
|
| 118 |
method: 'POST',
|
| 119 |
body: formData
|
| 120 |
})
|
| 121 |
+
.then(response => {
|
| 122 |
+
if (!response.ok) {
|
| 123 |
+
return response.json().then(err => { throw err; });
|
| 124 |
+
}
|
| 125 |
+
return response.json();
|
| 126 |
+
})
|
| 127 |
.then(data => {
|
| 128 |
loading.style.display = 'none';
|
| 129 |
|
| 130 |
if (data.error) {
|
| 131 |
+
errorDiv.textContent = 'Error: ' + data.error;
|
| 132 |
return;
|
| 133 |
}
|
| 134 |
|
|
|
|
| 136 |
resultsDiv.innerHTML = `
|
| 137 |
<div class="result-item">
|
| 138 |
<h3>Original Image</h3>
|
| 139 |
+
<img src="/uploads/${data.original_filename}" alt="Original Image">
|
| 140 |
</div>
|
| 141 |
<div class="result-item">
|
| 142 |
<h3>Background Removed</h3>
|
| 143 |
<img src="${data.rgba_image}" alt="Background Removed">
|
| 144 |
+
<a href="${data.rgba_image}" download="bg_removed_${data.original_filename}">Download</a>
|
| 145 |
</div>
|
| 146 |
<div class="result-item">
|
| 147 |
<h3>Mask</h3>
|
| 148 |
<img src="${data.mask_image}" alt="Mask">
|
| 149 |
+
<a href="${data.mask_image}" download="mask_${data.original_filename}">Download</a>
|
| 150 |
</div>
|
| 151 |
`;
|
| 152 |
})
|
| 153 |
.catch(error => {
|
| 154 |
loading.style.display = 'none';
|
| 155 |
console.error('Error:', error);
|
| 156 |
+
errorDiv.textContent = error.error || 'An error occurred while processing the image';
|
| 157 |
});
|
| 158 |
}
|
| 159 |
</script>
|