Hugging Face's logo

Spaces:
soiz1
/
dis-background-removal
Runtime error

App Files Community
soiz1 commited on
Commit
e97e778
·
verified ·
1 Parent(s): e0d04f2

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +73 -105
templates/index.html CHANGED
@@ -3,15 +3,19 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Highly Accurate Dichotomous Image Segmentation</title>
7
  <style>
8
  body {
9
  font-family: Arial, sans-serif;
10
- max-width: 800px;
11
  margin: 0 auto;
12
  padding: 20px;
13
  line-height: 1.6;
14
  }
 
 
 
 
15
  .container {
16
  display: flex;
17
  flex-direction: column;
@@ -25,18 +29,20 @@
25
  }
26
  .results {
27
  display: flex;
28
- gap: 20px;
29
  flex-wrap: wrap;
 
 
30
  }
31
- .result-box {
32
- flex: 1;
33
- min-width: 300px;
 
34
  }
35
- img {
36
- max-width: 100%;
37
- height: auto;
38
  border: 1px solid #ddd;
39
- border-radius: 4px;
40
  }
41
  button {
42
  background-color: #4CAF50;
@@ -50,132 +56,94 @@
50
  button:hover {
51
  background-color: #45a049;
52
  }
53
- .code-block {
54
- background-color: #f5f5f5;
 
 
 
 
 
55
  padding: 15px;
56
  border-radius: 5px;
57
- overflow-x: auto;
58
  }
59
  </style>
60
  </head>
61
  <body>
 
 
62
  <div class="container">
63
- <h1>Highly Accurate Dichotomous Image Segmentation</h1>
64
- <p>This is a demo for DIS, a model that can remove the background from a given image.</p>
65
-
66
  <div class="upload-section">
67
  <h2>Upload Image</h2>
68
  <input type="file" id="imageInput" accept="image/*">
69
  <button onclick="processImage()">Remove Background</button>
 
70
  </div>
71
 
72
- <div class="results">
73
- <div class="result-box">
74
- <h3>Original Image</h3>
75
- <img id="originalImage" src="" alt="Original image will appear here" style="display: none;">
76
- </div>
77
- <div class="result-box">
78
- <h3>Result (RGBA)</h3>
79
- <img id="resultImage" src="" alt="Result will appear here" style="display: none;">
80
- </div>
81
- <div class="result-box">
82
- <h3>Mask</h3>
83
- <img id="maskImage" src="" alt="Mask will appear here" style="display: none;">
84
- </div>
85
  </div>
86
 
87
- <div>
88
- <h2>API Usage Example</h2>
89
- <p>You can also use the API directly with this JavaScript code:</p>
90
- <div class="code-block">
91
- <pre><code>
92
- async function removeBackground(imageFile) {
93
- const formData = new FormData();
94
- formData.append('image', imageFile);
95
-
96
- try {
97
- const response = await fetch('/api/remove_bg', {
98
- method: 'POST',
99
- body: formData
100
- });
101
-
102
- if (!response.ok) {
103
- throw new Error(`HTTP error! status: ${response.status}`);
104
- }
105
-
106
- const data = await response.json();
107
- console.log('Result:', data);
108
- return data;
109
- } catch (error) {
110
- console.error('Error:', error);
111
- throw error;
112
- }
113
- }
114
-
115
- // Usage example:
116
- // const fileInput = document.querySelector('input[type="file"]');
117
- // removeBackground(fileInput.files[0])
118
- // .then(data => {
119
- // // Handle response data
120
- // document.getElementById('resultImage').src = data.rgba_url;
121
- // document.getElementById('maskImage').src = data.mask_url;
122
- // });
123
- </code></pre>
124
- </div>
125
  </div>
126
  </div>
127
-
128
  <script>
129
  function processImage() {
130
  const fileInput = document.getElementById('imageInput');
131
- if (!fileInput.files || fileInput.files.length === 0) {
 
 
132
  alert('Please select an image first');
133
  return;
134
  }
135
 
136
- const file = fileInput.files[0];
137
- const reader = new FileReader();
138
-
139
- reader.onload = function(e) {
140
- document.getElementById('originalImage').src = e.target.result;
141
- document.getElementById('originalImage').style.display = 'block';
142
- };
143
- reader.readAsDataURL(file);
144
 
145
- removeBackground(file)
146
- .then(data => {
147
- document.getElementById('resultImage').src = data.rgba_url;
148
- document.getElementById('resultImage').style.display = 'block';
149
- document.getElementById('maskImage').src = data.mask_url;
150
- document.getElementById('maskImage').style.display = 'block';
151
- })
152
- .catch(error => {
153
- console.error('Error:', error);
154
- alert('An error occurred while processing the image');
155
- });
156
- }
157
-
158
- async function removeBackground(imageFile) {
159
  const formData = new FormData();
160
- formData.append('image', imageFile);
161
 
162
- try {
163
- const response = await fetch('/api/remove_bg', {
164
- method: 'POST',
165
- body: formData
166
- });
 
 
167
 
168
- if (!response.ok) {
169
- throw new Error(`HTTP error! status: ${response.status}`);
 
170
  }
171
 
172
- const data = await response.json();
173
- console.log('Result:', data);
174
- return data;
175
- } catch (error) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
176
  console.error('Error:', error);
177
- throw error;
178
- }
179
  }
180
  </script>
181
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DIS Image Background Removal</title>
7
  <style>
8
  body {
9
  font-family: Arial, sans-serif;
10
+ max-width: 900px;
11
  margin: 0 auto;
12
  padding: 20px;
13
  line-height: 1.6;
14
  }
15
+ h1 {
16
+ color: #333;
17
+ text-align: center;
18
+ }
19
  .container {
20
  display: flex;
21
  flex-direction: column;
 
29
  }
30
  .results {
31
  display: flex;
 
32
  flex-wrap: wrap;
33
+ gap: 20px;
34
+ justify-content: center;
35
  }
36
+ .result-item {
37
+ display: flex;
38
+ flex-direction: column;
39
+ align-items: center;
40
  }
41
+ .result-item img {
42
+ max-width: 300px;
43
+ max-height: 300px;
44
  border: 1px solid #ddd;
45
+ margin-bottom: 10px;
46
  }
47
  button {
48
  background-color: #4CAF50;
 
56
  button:hover {
57
  background-color: #45a049;
58
  }
59
+ #loading {
60
+ display: none;
61
+ text-align: center;
62
+ margin: 20px 0;
63
+ }
64
+ .info {
65
+ background-color: #f8f9fa;
66
  padding: 15px;
67
  border-radius: 5px;
68
+ margin-top: 20px;
69
  }
70
  </style>
71
  </head>
72
  <body>
73
+ <h1>Highly Accurate Dichotomous Image Segmentation</h1>
74
+
75
  <div class="container">
 
 
 
76
  <div class="upload-section">
77
  <h2>Upload Image</h2>
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">
84
+ <!-- Results will be displayed here -->
 
 
 
 
 
 
 
 
 
 
 
85
  </div>
86
 
87
+ <div class="info">
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
+
95
  <script>
96
  function processImage() {
97
  const fileInput = document.getElementById('imageInput');
98
+ const file = fileInput.files[0];
99
+
100
+ if (!file) {
101
  alert('Please select an image first');
102
  return;
103
  }
104
 
105
+ const loading = document.getElementById('loading');
106
+ loading.style.display = 'block';
 
 
 
 
 
 
107
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
108
  const formData = new FormData();
109
+ formData.append('image', file);
110
 
111
+ fetch('/api/remove_bg', {
112
+ method: 'POST',
113
+ body: formData
114
+ })
115
+ .then(response => response.json())
116
+ .then(data => {
117
+ loading.style.display = 'none';
118
 
119
+ if (data.error) {
120
+ alert('Error: ' + data.error);
121
+ return;
122
  }
123
 
124
+ const resultsDiv = document.getElementById('results');
125
+ resultsDiv.innerHTML = `
126
+ <div class="result-item">
127
+ <h3>Original Image</h3>
128
+ <img src="/uploads/${file.name}" alt="Original Image">
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
+ alert('An error occurred while processing the image');
146
+ });
147
  }
148
  </script>
149
  </body>