Hugging Face's logo

Spaces:
MarcoMz
/
removebg
Running

App Files Community
MarcoMz commited on
Commit
c01d19d
·
verified ·
1 Parent(s): 1bff489

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +666 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Removebg
3
- emoji: 🚀
4
  colorFrom: blue
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: removebg
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,666 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Magic BG Remover | Remova fundos de imagens como no Remove.bg</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .dropzone {
11
+ border: 2px dashed #D1D5DB;
12
+ transition: all 0.3s ease;
13
+ }
14
+ .dropzone.active {
15
+ border-color: #3B82F6;
16
+ background-color: #F0F7FF;
17
+ }
18
+ .image-preview {
19
+ max-height: 400px;
20
+ object-fit: contain;
21
+ }
22
+ .progress-bar {
23
+ height: 6px;
24
+ background-color: #E5E7EB;
25
+ border-radius: 3px;
26
+ overflow: hidden;
27
+ }
28
+ .progress-fill {
29
+ height: 100%;
30
+ background-color: #3B82F6;
31
+ width: 0%;
32
+ transition: width 0.3s ease;
33
+ }
34
+ .loading-spinner {
35
+ animation: spin 1s linear infinite;
36
+ }
37
+ @keyframes spin {
38
+ 0% { transform: rotate(0deg); }
39
+ 100% { transform: rotate(360deg); }
40
+ }
41
+ .error-message {
42
+ animation: shake 0.5s;
43
+ }
44
+ @keyframes shake {
45
+ 0%, 100% { transform: translateX(0); }
46
+ 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
47
+ 20%, 40%, 60%, 80% { transform: translateX(5px); }
48
+ }
49
+ .pulse {
50
+ animation: pulse 2s infinite;
51
+ }
52
+ @keyframes pulse {
53
+ 0% { opacity: 1; }
54
+ 50% { opacity: 0.5; }
55
+ 100% { opacity: 1; }
56
+ }
57
+ .checkmark {
58
+ width: 20px;
59
+ height: 20px;
60
+ border-radius: 50%;
61
+ display: block;
62
+ stroke-width: 2;
63
+ stroke: #fff;
64
+ stroke-miterlimit: 10;
65
+ margin: 10% auto;
66
+ box-shadow: inset 0px 0px 0px #4bb71b;
67
+ animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
68
+ }
69
+ .checkmark__circle {
70
+ stroke-dasharray: 166;
71
+ stroke-dashoffset: 166;
72
+ stroke-width: 2;
73
+ stroke-miterlimit: 10;
74
+ stroke: #4bb71b;
75
+ fill: none;
76
+ animation: stroke .6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
77
+ }
78
+ .checkmark__check {
79
+ transform-origin: 50% 50%;
80
+ stroke-dasharray: 48;
81
+ stroke-dashoffset: 48;
82
+ animation: stroke .3s cubic-bezier(0.65, 0, 0.45, 1) .8s forwards;
83
+ }
84
+ @keyframes stroke {
85
+ 100% { stroke-dashoffset: 0; }
86
+ }
87
+ @keyframes scale {
88
+ 0%, 100% { transform: none; }
89
+ 50% { transform: scale3d(1.1, 1.1, 1); }
90
+ }
91
+ @keyframes fill {
92
+ 100% { box-shadow: inset 0px 0px 0px 30px #4bb71b; }
93
+ }
94
+ .transparent-bg {
95
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect width="8" height="8" x="0" y="0" fill="%23e5e7eb"/><rect width="8" height="8" x="8" y="8" fill="%23e5e7eb"/></svg>');
96
+ background-size: 16px 16px;
97
+ }
98
+ .btn-primary {
99
+ background-color: #3B82F6;
100
+ color: white;
101
+ transition: all 0.2s;
102
+ }
103
+ .btn-primary:hover {
104
+ background-color: #2563EB;
105
+ transform: translateY(-1px);
106
+ }
107
+ .btn-secondary {
108
+ background-color: white;
109
+ color: #4B5563;
110
+ border: 1px solid #D1D5DB;
111
+ transition: all 0.2s;
112
+ }
113
+ .btn-secondary:hover {
114
+ background-color: #F9FAFB;
115
+ transform: translateY(-1px);
116
+ }
117
+ .hero-gradient {
118
+ background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
119
+ }
120
+ .feature-card {
121
+ transition: all 0.3s ease;
122
+ border-radius: 12px;
123
+ }
124
+ .feature-card:hover {
125
+ transform: translateY(-5px);
126
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
127
+ }
128
+ </style>
129
+ </head>
130
+ <body class="bg-gray-50 min-h-screen font-sans">
131
+ <!-- Hero Section -->
132
+ <div class="hero-gradient text-white pb-20">
133
+ <div class="container mx-auto px-4 py-12">
134
+ <nav class="flex justify-between items-center mb-16">
135
+ <div class="text-2xl font-bold flex items-center">
136
+ <i class="fas fa-magic mr-2"></i>
137
+ <span>Magic BG Remover</span>
138
+ </div>
139
+ <div class="hidden md:flex space-x-6">
140
+ <a href="#" class="hover:underline">Recursos</a>
141
+ <a href="#" class="hover:underline">Preços</a>
142
+ <a href="#" class="hover:underline">Blog</a>
143
+ <a href="#" class="hover:underline">Contato</a>
144
+ </div>
145
+ <div class="flex items-center space-x-4">
146
+ <a href="#" class="hidden md:inline-block px-4 py-2 rounded-md bg-white bg-opacity-20 hover:bg-opacity-30 transition">Login</a>
147
+ <a href="#" class="hidden md:inline-block px-4 py-2 rounded-md bg-white text-blue-600 hover:bg-gray-100 transition">Cadastre-se</a>
148
+ <button class="md:hidden text-2xl">
149
+ <i class="fas fa-bars"></i>
150
+ </button>
151
+ </div>
152
+ </nav>
153
+
154
+ <div class="text-center max-w-3xl mx-auto">
155
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Remova fundos de imagens em segundos</h1>
156
+ <p class="text-xl mb-10 opacity-90">100% automático e gratuito - sem necessidade de registro ou cartão de crédito</p>
157
+
158
+ <!-- Upload Box -->
159
+ <div class="bg-white rounded-xl shadow-xl p-6 max-w-2xl mx-auto">
160
+ <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer mb-6">
161
+ <div class="flex flex-col items-center justify-center py-8">
162
+ <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-4"></i>
163
+ <p class="text-gray-600 mb-2 font-medium">Arraste e solte sua imagem aqui</p>
164
+ <p class="text-gray-500 text-sm mb-4">ou</p>
165
+ <label for="fileInput" class="btn-primary px-6 py-3 rounded-md cursor-pointer">
166
+ Selecione uma imagem
167
+ </label>
168
+ <input id="fileInput" type="file" accept="image/*" class="hidden">
169
+ </div>
170
+ </div>
171
+
172
+ <div id="uploadProgress" class="hidden">
173
+ <div class="flex items-center mb-2">
174
+ <span class="text-gray-700 mr-2">Processando:</span>
175
+ <span id="fileName" class="font-medium text-gray-800 truncate"></span>
176
+ </div>
177
+ <div class="progress-bar mb-2">
178
+ <div id="progressFill" class="progress-fill"></div>
179
+ </div>
180
+ <div class="flex justify-between text-sm text-gray-500">
181
+ <span id="progressText">0%</span>
182
+ <span id="progressStatus">Removendo fundo...</span>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Error Message -->
187
+ <div id="errorMessage" class="hidden bg-red-50 border-l-4 border-red-500 p-4 mb-4 error-message">
188
+ <div class="flex">
189
+ <div class="flex-shrink-0">
190
+ <i class="fas fa-exclamation-circle text-red-500"></i>
191
+ </div>
192
+ <div class="ml-3">
193
+ <p id="errorText" class="text-sm text-red-700">
194
+ Ocorreu um erro ao tentar remover o fundo. Por favor, tente novamente com uma imagem diferente.
195
+ </p>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <p class="text-gray-500 text-sm mt-4">Formatos suportados: JPG, PNG, WEBP (Até 5MB)</p>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Main Content -->
207
+ <div class="container mx-auto px-4 py-12 -mt-10">
208
+ <!-- Result Sections (Hidden Initially) -->
209
+ <div id="previewSection" class="bg-white rounded-xl shadow-xl p-8 max-w-4xl mx-auto hidden">
210
+ <div class="mb-6">
211
+ <h2 class="text-2xl font-semibold text-gray-800 mb-2">Processando sua imagem</h2>
212
+ <p class="text-gray-600">Estamos removendo o fundo da sua imagem...</p>
213
+ </div>
214
+
215
+ <div class="flex justify-center mb-6">
216
+ <div class="relative">
217
+ <img id="previewImage" src="" alt="Pré-visualização" class="image-preview rounded-lg shadow">
218
+ <div class="absolute inset-0 flex items-center justify-center">
219
+ <i class="fas fa-spinner loading-spinner text-4xl text-blue-600"></i>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <div class="text-center">
225
+ <p id="processingStatus" class="text-gray-500 pulse">Isso pode levar alguns segundos...</p>
226
+ </div>
227
+ </div>
228
+
229
+ <div id="resultSection" class="bg-white rounded-xl shadow-xl p-8 max-w-4xl mx-auto hidden">
230
+ <div class="mb-6">
231
+ <h2 class="text-2xl font-semibold text-gray-800 mb-2">Resultado</h2>
232
+ <p class="text-gray-600">Seu fundo foi removido com sucesso!</p>
233
+ </div>
234
+
235
+ <div class="flex flex-col md:flex-row gap-8 mb-8">
236
+ <div class="flex-1">
237
+ <h3 class="font-medium text-gray-700 mb-3">Original</h3>
238
+ <div class="bg-gray-100 rounded-lg p-4 flex justify-center">
239
+ <img id="originalImage" src="" alt="Original" class="image-preview rounded">
240
+ </div>
241
+ </div>
242
+ <div class="flex-1">
243
+ <h3 class="font-medium text-gray-700 mb-3">Sem fundo</h3>
244
+ <div class="transparent-bg rounded-lg p-4 flex justify-center">
245
+ <div class="relative">
246
+ <img id="resultImage" src="" alt="Resultado" class="image-preview rounded">
247
+ <div id="loadingIndicator" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-lg hidden">
248
+ <i class="fas fa-spinner loading-spinner text-4xl text-white"></i>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="flex flex-col sm:flex-row gap-3">
256
+ <button id="downloadBtn" class="btn-primary flex-1 px-4 py-3 rounded-md flex items-center justify-center">
257
+ <i class="fas fa-download mr-2"></i> Baixar PNG
258
+ </button>
259
+ <button id="newImageBtn" class="btn-secondary flex-1 px-4 py-3 rounded-md flex items-center justify-center">
260
+ <i class="fas fa-redo mr-2"></i> Nova imagem
261
+ </button>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- Features Section -->
266
+ <section class="mt-20">
267
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-4">Por que escolher nosso removedor de fundo?</h2>
268
+ <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Tecnologia avançada de IA que remove fundos automaticamente em segundos</p>
269
+
270
+ <div class="grid md:grid-cols-3 gap-8">
271
+ <div class="feature-card bg-white p-8 rounded-lg shadow-sm">
272
+ <div class="text-blue-500 text-4xl mb-6">
273
+ <i class="fas fa-bolt"></i>
274
+ </div>
275
+ <h3 class="font-bold text-xl mb-3">Instantâneo</h3>
276
+ <p class="text-gray-600">Remova fundos em apenas 5 segundos com nossa tecnologia avançada de IA.</p>
277
+ </div>
278
+
279
+ <div class="feature-card bg-white p-8 rounded-lg shadow-sm">
280
+ <div class="text-blue-500 text-4xl mb-6">
281
+ <i class="fas fa-cut"></i>
282
+ </div>
283
+ <h3 class="font-bold text-xl mb-3">Precisão perfeita</h3>
284
+ <p class="text-gray-600">Detecção de bordas inteligente para resultados profissionais em qualquer imagem.</p>
285
+ </div>
286
+
287
+ <div class="feature-card bg-white p-8 rounded-lg shadow-sm">
288
+ <div class="text-blue-500 text-4xl mb-6">
289
+ <i class="fas fa-lock"></i>
290
+ </div>
291
+ <h3 class="font-bold text-xl mb-3">Privacidade</h3>
292
+ <p class="text-gray-600">Suas imagens são processadas localmente e nunca armazenadas em nossos servidores.</p>
293
+ </div>
294
+ </div>
295
+ </section>
296
+
297
+ <!-- Testimonials -->
298
+ <section class="mt-20 bg-white rounded-xl shadow-sm p-12">
299
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">O que nossos usuários dizem</h2>
300
+
301
+ <div class="grid md:grid-cols-2 gap-8">
302
+ <div class="bg-gray-50 p-6 rounded-lg">
303
+ <div class="flex items-center mb-4">
304
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
305
+ <i class="fas fa-user text-xl"></i>
306
+ </div>
307
+ <div>
308
+ <h4 class="font-bold">Carlos Silva</h4>
309
+ <p class="text-gray-500 text-sm">Designer Gráfico</p>
310
+ </div>
311
+ </div>
312
+ <p class="text-gray-700">"Economizo horas de trabalho toda semana com essa ferramenta. A precisão é incrível, mesmo em fotos complexas."</p>
313
+ <div class="mt-4 text-yellow-400">
314
+ <i class="fas fa-star"></i>
315
+ <i class="fas fa-star"></i>
316
+ <i class="fas fa-star"></i>
317
+ <i class="fas fa-star"></i>
318
+ <i class="fas fa-star"></i>
319
+ </div>
320
+ </div>
321
+
322
+ <div class="bg-gray-50 p-6 rounded-lg">
323
+ <div class="flex items-center mb-4">
324
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
325
+ <i class="fas fa-user text-xl"></i>
326
+ </div>
327
+ <div>
328
+ <h4 class="font-bold">Ana Oliveira</h4>
329
+ <p class="text-gray-500 text-sm">Fotógrafa</p>
330
+ </div>
331
+ </div>
332
+ <p class="text-gray-700">"Uso para todos os meus trabalhos fotográficos. Os resultados são tão bons que meus clientes acham que fiz manualmente no Photoshop."</p>
333
+ <div class="mt-4 text-yellow-400">
334
+ <i class="fas fa-star"></i>
335
+ <i class="fas fa-star"></i>
336
+ <i class="fas fa-star"></i>
337
+ <i class="fas fa-star"></i>
338
+ <i class="fas fa-star-half-alt"></i>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </section>
343
+
344
+ <!-- CTA Section -->
345
+ <section class="mt-20 text-center">
346
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">Pronto para remover fundos como um profissional?</h2>
347
+ <p class="text-gray-600 mb-8 max-w-2xl mx-auto">Experimente agora mesmo - é rápido, fácil e totalmente gratuito!</p>
348
+ <a href="#top" class="btn-primary inline-block px-8 py-3 rounded-md text-lg">
349
+ <i class="fas fa-magic mr-2"></i> Remover Fundo Agora
350
+ </a>
351
+ </section>
352
+ </div>
353
+
354
+ <!-- Footer -->
355
+ <footer class="bg-gray-100 mt-20 py-12">
356
+ <div class="container mx-auto px-4">
357
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
358
+ <div>
359
+ <h3 class="text-lg font-bold mb-4 flex items-center">
360
+ <i class="fas fa-magic mr-2 text-blue-600"></i>
361
+ Magic BG Remover
362
+ </h3>
363
+ <p class="text-gray-600">A maneira mais fácil de remover fundos de imagens automaticamente usando IA.</p>
364
+ </div>
365
+ <div>
366
+ <h4 class="font-bold mb-4">Produto</h4>
367
+ <ul class="space-y-2">
368
+ <li><a href="#" class="text-gray-600 hover:text-blue-600">Recursos</a></li>
369
+ <li><a href="#" class="text-gray-600 hover:text-blue-600">Preços</a></li>
370
+ <li><a href="#" class="text-gray-600 hover:text-blue-600">API</a></li>
371
+ <li><a href="#" class="text-gray-600 hover:text-blue-600">Aplicativo</a></li>
372
+ </ul>
373
+ </div>
374
+ <div>
375
+ <h4 class="font-bold mb-4">Recursos</h4>
376
+ <ul class="space-y-2">
377
+ <li><a href="#" class="text-gray-600 hover:text-blue-600">Blog</a></li>
378
+ <li><a href="#" class="text-gray-600 hover:text-blue-600">Tutoriais</a></li>
379
+ <li><a href="#" class="text-gray-600 hover:text-blue-600">Suporte</a></li>
380
+ <li><a href="#" class="text-gray-600 hover:text-blue-600">FAQ</a></li>
381
+ </ul>
382
+ </div>
383
+ <div>
384
+ <h4 class="font-bold mb-4">Empresa</h4>
385
+ <ul class="space-y-2">
386
+ <li><a href="#" class="text-gray-600 hover:text-blue-600">Sobre</a></li>
387
+ <li><a href="#" class="text-gray-600 hover:text-blue-600">Carreiras</a></li>
388
+ <li><a href="#" class="text-gray-600 hover:text-blue-600">Termos</a></li>
389
+ <li><a href="#" class="text-gray-600 hover:text-blue-600">Privacidade</a></li>
390
+ </ul>
391
+ </div>
392
+ </div>
393
+ <div class="pt-8 border-t border-gray-200 flex flex-col md:flex-row justify-between items-center">
394
+ <p class="text-gray-500 mb-4 md:mb-0">© 2023 Magic BG Remover. Todos os direitos reservados.</p>
395
+ <div class="flex space-x-4">
396
+ <a href="#" class="text-gray-500 hover:text-blue-600 text-xl"><i class="fab fa-facebook"></i></a>
397
+ <a href="#" class="text-gray-500 hover:text-blue-600 text-xl"><i class="fab fa-twitter"></i></a>
398
+ <a href="#" class="text-gray-500 hover:text-blue-600 text-xl"><i class="fab fa-instagram"></i></a>
399
+ <a href="#" class="text-gray-500 hover:text-blue-600 text-xl"><i class="fab fa-linkedin"></i></a>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </footer>
404
+
405
+ <script>
406
+ document.addEventListener('DOMContentLoaded', function() {
407
+ const dropzone = document.getElementById('dropzone');
408
+ const fileInput = document.getElementById('fileInput');
409
+ const uploadProgress = document.getElementById('uploadProgress');
410
+ const progressFill = document.getElementById('progressFill');
411
+ const progressText = document.getElementById('progressText');
412
+ const progressStatus = document.getElementById('progressStatus');
413
+ const fileName = document.getElementById('fileName');
414
+ const previewSection = document.getElementById('previewSection');
415
+ const previewImage = document.getElementById('previewImage');
416
+ const originalImage = document.getElementById('originalImage');
417
+ const resultSection = document.getElementById('resultSection');
418
+ const resultImage = document.getElementById('resultImage');
419
+ const downloadBtn = document.getElementById('downloadBtn');
420
+ const newImageBtn = document.getElementById('newImageBtn');
421
+ const loadingIndicator = document.getElementById('loadingIndicator');
422
+ const errorMessage = document.getElementById('errorMessage');
423
+ const errorText = document.getElementById('errorText');
424
+ const processingStatus = document.getElementById('processingStatus');
425
+
426
+ let currentFile = null;
427
+ let originalImageData = null;
428
+ let progressInterval = null;
429
+ let isProcessing = false;
430
+
431
+ // Handle drag and drop events
432
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
433
+ dropzone.addEventListener(eventName, preventDefaults, false);
434
+ });
435
+
436
+ function preventDefaults(e) {
437
+ e.preventDefault();
438
+ e.stopPropagation();
439
+ }
440
+
441
+ ['dragenter', 'dragover'].forEach(eventName => {
442
+ dropzone.addEventListener(eventName, highlight, false);
443
+ });
444
+
445
+ ['dragleave', 'drop'].forEach(eventName => {
446
+ dropzone.addEventListener(eventName, unhighlight, false);
447
+ });
448
+
449
+ function highlight() {
450
+ dropzone.classList.add('active');
451
+ }
452
+
453
+ function unhighlight() {
454
+ dropzone.classList.remove('active');
455
+ }
456
+
457
+ // Handle dropped files
458
+ dropzone.addEventListener('drop', handleDrop, false);
459
+ fileInput.addEventListener('change', handleFiles, false);
460
+
461
+ function handleDrop(e) {
462
+ const dt = e.dataTransfer;
463
+ const files = dt.files;
464
+ handleFiles({ target: { files } });
465
+ }
466
+
467
+ function handleFiles(e) {
468
+ const files = e.target.files;
469
+ if (files.length === 0) return;
470
+
471
+ const file = files[0];
472
+ if (!file.type.match('image.*')) {
473
+ showError('Por favor, selecione um arquivo de imagem válido.');
474
+ return;
475
+ }
476
+
477
+ if (file.size > 5 * 1024 * 1024) {
478
+ showError('O arquivo é muito grande. Tamanho máximo: 5MB.');
479
+ return;
480
+ }
481
+
482
+ // Hide any previous error
483
+ errorMessage.classList.add('hidden');
484
+
485
+ currentFile = file;
486
+ processImage(file);
487
+ }
488
+
489
+ function showError(message) {
490
+ errorText.textContent = message;
491
+ errorMessage.classList.remove('hidden');
492
+ setTimeout(() => {
493
+ errorMessage.classList.remove('error-message');
494
+ setTimeout(() => {
495
+ errorMessage.classList.add('error-message');
496
+ }, 10);
497
+ }, 10);
498
+
499
+ // Reset progress
500
+ clearProgress();
501
+ }
502
+
503
+ function processImage(file) {
504
+ if (isProcessing) return;
505
+ isProcessing = true;
506
+
507
+ // Show upload progress
508
+ dropzone.classList.add('hidden');
509
+ uploadProgress.classList.remove('hidden');
510
+ fileName.textContent = file.name;
511
+
512
+ // Show preview while processing
513
+ const reader = new FileReader();
514
+ reader.onload = function(e) {
515
+ originalImageData = e.target.result;
516
+ previewImage.src = originalImageData;
517
+ originalImage.src = originalImageData;
518
+ previewSection.classList.remove('hidden');
519
+
520
+ // Start progress simulation
521
+ startProgressSimulation();
522
+
523
+ // Start actual background removal
524
+ removeBackground(file);
525
+ };
526
+ reader.onerror = function() {
527
+ showError('Erro ao ler o arquivo de imagem. Por favor, tente novamente.');
528
+ resetUI();
529
+ };
530
+ reader.readAsDataURL(file);
531
+ }
532
+
533
+ function startProgressSimulation() {
534
+ let progress = 0;
535
+ progressStatus.textContent = "Analisando imagem...";
536
+ processingStatus.textContent = "Analisando a imagem para remoção do fundo...";
537
+
538
+ progressInterval = setInterval(() => {
539
+ progress += Math.random() * 5;
540
+
541
+ // Change status messages at certain progress points
542
+ if (progress > 30 && progress < 70) {
543
+ progressStatus.textContent = "Identificando o primeiro plano...";
544
+ processingStatus.textContent = "Identificando os elementos principais da imagem...";
545
+ } else if (progress >= 70) {
546
+ progressStatus.textContent = "Removendo o fundo...";
547
+ processingStatus.textContent = "Processamento final do fundo...";
548
+ }
549
+
550
+ if (progress >= 95) {
551
+ progress = 95; // Hold at 95% until actual completion
552
+ progressStatus.textContent = "Finalizando processamento...";
553
+ processingStatus.textContent = "Ajustes finais no resultado...";
554
+ }
555
+ updateProgress(progress);
556
+ }, 300);
557
+ }
558
+
559
+ function updateProgress(percent) {
560
+ progressFill.style.width = `${percent}%`;
561
+ progressText.textContent = `${Math.round(percent)}%`;
562
+ }
563
+
564
+ function clearProgress() {
565
+ if (progressInterval) {
566
+ clearInterval(progressInterval);
567
+ progressInterval = null;
568
+ }
569
+ progressFill.style.width = '0%';
570
+ progressText.textContent = '0%';
571
+ isProcessing = false;
572
+ }
573
+
574
+ async function removeBackground(file) {
575
+ try {
576
+ // Create FormData to send the image
577
+ const formData = new FormData();
578
+ formData.append('file', file);
579
+
580
+ // Call the Hugging Face API
581
+ const response = await fetch('https://xenova-remove-background-web.hf.space/run/predict', {
582
+ method: 'POST',
583
+ body: formData,
584
+ headers: {
585
+ 'Accept': 'application/json'
586
+ }
587
+ });
588
+
589
+ if (!response.ok) {
590
+ throw new Error('Erro na API: ' + response.statusText);
591
+ }
592
+
593
+ const result = await response.json();
594
+
595
+ // Check if we got a valid response
596
+ if (!result || !result.data || !result.data[0]) {
597
+ throw new Error('Resposta inválida da API');
598
+ }
599
+
600
+ // Mark processing as complete
601
+ updateProgress(100);
602
+
603
+ // Show completion animation
604
+ processingStatus.innerHTML = '<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg>Processo concluído com sucesso!';
605
+
606
+ // Wait a bit before showing result
607
+ await new Promise(resolve => setTimeout(resolve, 1000));
608
+
609
+ // Show result
610
+ previewSection.classList.add('hidden');
611
+
612
+ // The API returns a base64 encoded image with transparent background
613
+ resultImage.src = `data:image/png;base64,${result.data[0]}`;
614
+ resultSection.classList.remove('hidden');
615
+
616
+ isProcessing = false;
617
+
618
+ } catch (error) {
619
+ console.error('Error removing background:', error);
620
+ showError('Ocorreu um erro ao tentar remover o fundo: ' + error.message);
621
+ resetUI();
622
+ }
623
+ }
624
+
625
+ // Download button
626
+ downloadBtn.addEventListener('click', function() {
627
+ if (!resultImage.src) return;
628
+
629
+ loadingIndicator.classList.remove('hidden');
630
+
631
+ // Create download link
632
+ const link = document.createElement('a');
633
+ link.href = resultImage.src;
634
+ link.download = `no-bg-${currentFile.name.replace(/\.[^/.]+$/, '')}.png`;
635
+ document.body.appendChild(link);
636
+ link.click();
637
+ document.body.removeChild(link);
638
+
639
+ setTimeout(() => {
640
+ loadingIndicator.classList.add('hidden');
641
+ }, 1000);
642
+ });
643
+
644
+ // New image button
645
+ newImageBtn.addEventListener('click', resetUI);
646
+
647
+ function resetUI() {
648
+ currentFile = null;
649
+ originalImageData = null;
650
+ resultSection.classList.add('hidden');
651
+ previewSection.classList.add('hidden');
652
+ uploadProgress.classList.add('hidden');
653
+ errorMessage.classList.add('hidden');
654
+ dropzone.classList.remove('hidden');
655
+ fileInput.value = '';
656
+ clearProgress();
657
+ }
658
+
659
+ // Click dropzone to trigger file input
660
+ dropzone.addEventListener('click', function() {
661
+ fileInput.click();
662
+ });
663
+ });
664
+ </script>
665
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MarcoMz/removebg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
666
+ </html>