Hugging Face's logo

Spaces:
soiz1
/
dis-background-removal
Runtime error

App Files Community
soiz1 commited on
Commit
2830970
·
verified ·
1 Parent(s): a9b3658

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +182 -0
templates/index.html ADDED
@@ -0,0 +1,182 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
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;
18
+ gap: 20px;
19
+ }
20
+ .upload-section {
21
+ border: 2px dashed #ccc;
22
+ padding: 20px;
23
+ text-align: center;
24
+ border-radius: 5px;
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;
43
+ color: white;
44
+ padding: 10px 15px;
45
+ border: none;
46
+ border-radius: 4px;
47
+ cursor: pointer;
48
+ font-size: 16px;
49
+ }
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>
182
+ </html>