Hugging Face's logo

Spaces:
Diegobrons
/
s1
Running

App Files Community
Diegobrons commited on
Commit
86f022f
·
verified ·
1 Parent(s): 5e8a306

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +370 -457
  2. prompts.txt +1 -0
index.html CHANGED
@@ -3,9 +3,11 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>EcoPlast - Gestão de Plásticos de E-lixo</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
  .gradient-bg {
11
  background: linear-gradient(135deg, #4ade80 0%, #3b82f6 100%);
@@ -29,6 +31,45 @@
29
  .plastic-type-5 { background-color: #FF33F3; }
30
  .plastic-type-6 { background-color: #33FFF3; }
31
  .plastic-type-7 { background-color: #8A33FF; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  </style>
33
  </head>
34
  <body class="bg-gray-50 font-sans">
@@ -53,129 +94,66 @@
53
  </div>
54
  </header>
55
 
56
- <!-- Hero Section -->
57
- <section class="gradient-bg text-white py-20">
58
- <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
59
- <div class="md:w-1/2 mb-10 md:mb-0">
60
- <h2 class="text-4xl md:text-5xl font-bold mb-6">Transformando e-lixo em recursos valiosos</h2>
61
- <p class="text-xl mb-8">Nosso sistema ajuda na identificação e separação de plásticos provenientes de sucata eletrônica, garantindo a destinação correta para cada tipo de material.</p>
62
- <div class="flex space-x-4">
63
- <button class="bg-white text-green-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition shadow-lg">
64
- Comece agora
65
- </button>
66
- <button class="border-2 border-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-green-600 transition">
67
- Saiba mais
68
- </button>
69
- </div>
70
- </div>
71
- <div class="md:w-1/2 flex justify-center">
72
- <img src="https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
73
- alt="Plásticos de e-lixo"
74
- class="rounded-xl shadow-2xl max-w-md w-full">
75
- </div>
76
- </div>
77
- </section>
78
-
79
- <!-- Features Section -->
80
- <section id="features" class="py-20 bg-white">
81
- <div class="container mx-auto px-4">
82
- <h2 class="text-3xl font-bold text-center mb-16">Como o EcoPlast ajuda sua empresa</h2>
83
-
84
- <div class="grid md:grid-cols-3 gap-10">
85
- <!-- Feature 1 -->
86
- <div class="bg-gray-50 p-8 rounded-xl shadow-md hover:shadow-xl transition">
87
- <div class="text-green-500 text-4xl mb-4">
88
- <i class="fas fa-fingerprint"></i>
89
- </div>
90
- <h3 class="text-xl font-semibold mb-3">Identificação Automática</h3>
91
- <p class="text-gray-600">Nosso sistema utiliza inteligência artificial para identificar automaticamente os tipos de plástico presentes no e-lixo.</p>
92
- </div>
93
-
94
- <!-- Feature 2 -->
95
- <div class="bg-gray-50 p-8 rounded-xl shadow-md hover:shadow-xl transition">
96
- <div class="text-blue-500 text-4xl mb-4">
97
- <i class="fas fa-sort-amount-down"></i>
98
- </div>
99
- <h3 class="text-xl font-semibold mb-3">Classificação Precisa</h3>
100
- <p class="text-gray-600">Classificamos os plásticos de acordo com os padrões internacionais, garantindo a correta destinação para cada tipo.</p>
101
- </div>
102
-
103
- <!-- Feature 3 -->
104
- <div class="bg-gray-50 p-8 rounded-xl shadow-md hover:shadow-xl transition">
105
- <div class="text-purple-500 text-4xl mb-4">
106
- <i class="fas fa-chart-line"></i>
107
- </div>
108
- <h3 class="text-xl font-semibold mb-3">Otimização de Recursos</h3>
109
- <p class="text-gray-600">Aumente seus lucros vendendo cada tipo de plástico para os compradores específicos que oferecem os melhores preços.</p>
110
- </div>
111
- </div>
112
- </div>
113
- </section>
114
-
115
- <!-- Process Section -->
116
- <section id="process" class="py-20 bg-gray-50">
117
  <div class="container mx-auto px-4">
118
- <h2 class="text-3xl font-bold text-center mb-16">Nosso Processo de Separação</h2>
119
-
120
- <div class="relative">
121
- <!-- Timeline -->
122
- <div class="hidden md:block absolute left-1/2 h-full w-1 bg-green-400 transform -translate-x-1/2"></div>
123
-
124
- <!-- Process Steps -->
125
- <div class="space-y-16">
126
- <!-- Step 1 -->
127
- <div class="relative flex flex-col md:flex-row items-center">
128
- <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 md:text-right">
129
- <h3 class="text-2xl font-semibold mb-2">1. Coleta do E-lixo</h3>
130
- <p class="text-gray-600">Recebemos a sucata eletrônica e realizamos a triagem inicial para separar componentes perigosos.</p>
131
- </div>
132
- <div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 bg-green-500 rounded-full w-8 h-8"></div>
133
- <div class="md:w-1/2 md:pl-16">
134
- <img src="https://images.unsplash.com/photo-1585771724684-38269d6639fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
135
- alt="Coleta de e-lixo"
136
- class="rounded-xl shadow-md w-full max-w-md">
137
  </div>
138
- </div>
139
-
140
- <!-- Step 2 -->
141
- <div class="relative flex flex-col md:flex-row items-center">
142
- <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 order-2 md:order-1">
143
- <img src="https://images.unsplash.com/photo-1611270630257-9a9d7b0a0b6a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
144
- alt="Identificação de plásticos"
145
- class="rounded-xl shadow-md w-full max-w-md">
146
  </div>
147
- <div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 bg-green-500 rounded-full w-8 h-8"></div>
148
- <div class="md:w-1/2 md:pl-16 order-1 md:order-2 md:text-left">
149
- <h3 class="text-2xl font-semibold mb-2">2. Identificação dos Plásticos</h3>
150
- <p class="text-gray-600">Utilizamos tecnologia avançada para identificar os diferentes tipos de plásticos presentes nos componentes eletrônicos.</p>
 
151
  </div>
152
  </div>
153
 
154
- <!-- Step 3 -->
155
- <div class="relative flex flex-col md:flex-row items-center">
156
- <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 md:text-right">
157
- <h3 class="text-2xl font-semibold mb-2">3. Separação e Classificação</h3>
158
- <p class="text-gray-600">Os plásticos são separados por tipo e classificados de acordo com suas propriedades e possibilidades de reciclagem.</p>
 
 
 
 
159
  </div>
160
- <div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 bg-green-500 rounded-full w-8 h-8"></div>
161
- <div class="md:w-1/2 md:pl-16">
162
- <img src="https://images.unsplash.com/photo-1604176354204-9268737828e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D3D&auto=format&fit=crop&w=500&q=80"
163
- alt="Separação de plásticos"
164
- class="rounded-xl shadow-md w-full max-w-md">
 
 
 
 
 
165
  </div>
166
- </div>
167
-
168
- <!-- Step 4 -->
169
- <div class="relative flex flex-col md:flex-row items-center">
170
- <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 order-2 md:order-1">
171
- <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
172
- alt="Destinação de plásticos"
173
- class="rounded-xl shadow-md w-full max-w-md">
174
  </div>
175
- <div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 bg-green-500 rounded-full w-8 h-8"></div>
176
- <div class="md:w-1/2 md:pl-16 order-1 md:order-2 md:text-left">
177
- <h3 class="text-2xl font-semibold mb-2">4. Destinação Correta</h3>
178
- <p class="text-gray-600">Cada tipo de plástico é encaminhado para os compradores específicos, maximizando o valor de revenda e garantindo a reciclagem adequada.</p>
 
 
179
  </div>
180
  </div>
181
  </div>
@@ -183,10 +161,10 @@
183
  </div>
184
  </section>
185
 
186
- <!-- Plastics Guide Section -->
187
  <section id="plastics" class="py-20 bg-white">
188
  <div class="container mx-auto px-4">
189
- <h2 class="text-3xl font-bold text-center mb-16">Guia de Identificação de Plásticos</h2>
190
 
191
  <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
192
  <!-- Plastic Type 1 -->
@@ -199,7 +177,7 @@
199
  <p class="text-gray-600 mb-4">Comum em teclados, carcaças de computadores e eletrodomésticos. Resistente ao impacto e fácil de moldar.</p>
200
  <div class="flex justify-between items-center">
201
  <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 7</span>
202
- <button class="text-blue-500 hover:text-blue-700 font-medium">Saiba mais</button>
203
  </div>
204
  </div>
205
  </div>
@@ -214,7 +192,7 @@
214
  <p class="text-gray-600 mb-4">Encontrado em CDs, DVDs, lentes e componentes ópticos. Transparente e altamente resistente.</p>
215
  <div class="flex justify-between items-center">
216
  <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 7</span>
217
- <button class="text-blue-500 hover:text-blue-700 font-medium">Saiba mais</button>
218
  </div>
219
  </div>
220
  </div>
@@ -229,7 +207,7 @@
229
  <p class="text-gray-600 mb-4">Usado em monitores, TVs e embalagens. Reconhecível pelo som metálico quando batido.</p>
230
  <div class="flex justify-between items-center">
231
  <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 6</span>
232
- <button class="text-blue-500 hover:text-blue-700 font-medium">Saiba mais</button>
233
  </div>
234
  </div>
235
  </div>
@@ -244,7 +222,7 @@
244
  <p class="text-gray-600 mb-4">Presente em baterias, componentes internos e isolantes. Resistente a produtos químicos.</p>
245
  <div class="flex justify-between items-center">
246
  <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 5</span>
247
- <button class="text-blue-500 hover:text-blue-700 font-medium">Saiba mais</button>
248
  </div>
249
  </div>
250
  </div>
@@ -259,7 +237,7 @@
259
  <p class="text-gray-600 mb-4">Usado em fios, cabos e revestimentos. Flexível e resistente à chama.</p>
260
  <div class="flex justify-between items-center">
261
  <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 3</span>
262
- <button class="text-blue-500 hover:text-blue-700 font-medium">Saiba mais</button>
263
  </div>
264
  </div>
265
  </div>
@@ -274,89 +252,7 @@
274
  <p class="text-gray-600 mb-4">Encontrado em conectores, componentes elétricos e peças de precisão. Boa estabilidade dimensional.</p>
275
  <div class="flex justify-between items-center">
276
  <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 7</span>
277
- <button class="text-blue-500 hover:text-blue-700 font-medium">Saiba mais</button>
278
- </div>
279
- </div>
280
- </div>
281
- </div>
282
-
283
- <div class="mt-16 text-center">
284
- <button class="bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-full font-semibold transition shadow-lg">
285
- Ver todos os tipos de plástico
286
- </button>
287
- </div>
288
- </div>
289
- </section>
290
-
291
- <!-- Identification Tool -->
292
- <section class="py-20 bg-gray-50">
293
- <div class="container mx-auto px-4">
294
- <div class="bg-white rounded-xl shadow-xl overflow-hidden">
295
- <div class="md:flex">
296
- <div class="md:w-1/2 p-10 gradient-bg text-white">
297
- <h2 class="text-3xl font-bold mb-6">Identificador de Plásticos</h2>
298
- <p class="mb-8">Use nossa ferramenta interativa para identificar o tipo de plástico encontrado no e-lixo.</p>
299
- <div class="flex items-center mb-4">
300
- <div class="w-10 h-10 rounded-full bg-white text-green-500 flex items-center justify-center mr-4">
301
- <i class="fas fa-camera"></i>
302
- </div>
303
- <p>Tire uma foto do material</p>
304
- </div>
305
- <div class="flex items-center mb-4">
306
- <div class="w-10 h-10 rounded-full bg-white text-green-500 flex items-center justify-center mr-4">
307
- <i class="fas fa-flask"></i>
308
- </div>
309
- <p>Realize o teste de densidade</p>
310
- </div>
311
- <div class="flex items-center">
312
- <div class="w-10 h-10 rounded-full bg-white text-green-500 flex items-center justify-center mr-4">
313
- <i class="fas fa-check-circle"></i>
314
- </div>
315
- <p>Obtenha a identificação precisa</p>
316
- </div>
317
- </div>
318
- <div class="md:w-1/2 p-10">
319
- <div class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center">
320
- <i class="fas fa-cloud-upload-alt text-5xl text-gray-400 mb-4"></i>
321
- <h3 class="text-xl font-semibold mb-2">Arraste e solte a imagem aqui</h3>
322
- <p class="text-gray-500 mb-6">ou clique para selecionar um arquivo</p>
323
- <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-full font-medium transition">
324
- Selecionar arquivo
325
- </button>
326
- </div>
327
-
328
- <div class="mt-8">
329
- <h4 class="font-semibold mb-3">Ou responda algumas perguntas:</h4>
330
- <div class="space-y-4">
331
- <div>
332
- <label class="block text-gray-700 mb-1">O plástico é flexível?</label>
333
- <div class="flex space-x-4">
334
- <button class="px-4 py-2 bg-gray-200 rounded-full">Sim</button>
335
- <button class="px-4 py-2 bg-gray-200 rounded-full">Não</button>
336
- </div>
337
- </div>
338
- <div>
339
- <label class="block text-gray-700 mb-1">Qual a aparência da chama quando queimado?</label>
340
- <select class="w-full p-2 border rounded">
341
- <option>Selecione uma opção</option>
342
- <option>Chama amarela com fuligem preta</option>
343
- <option>Chama azul com base amarela</option>
344
- <option>Queima com dificuldade</option>
345
- </select>
346
- </div>
347
- <div>
348
- <label class="block text-gray-700 mb-1">Qual o som quando batido?</label>
349
- <select class="w-full p-2 border rounded">
350
- <option>Selecione uma opção</option>
351
- <option>Som metálico</option>
352
- <option>Som abafado</option>
353
- <option>Som oco</option>
354
- </select>
355
- </div>
356
- </div>
357
- <button class="mt-6 w-full bg-green-500 hover:bg-green-600 text-white py-3 rounded-full font-semibold transition">
358
- Identificar Plástico
359
- </button>
360
  </div>
361
  </div>
362
  </div>
@@ -364,234 +260,6 @@
364
  </div>
365
  </section>
366
 
367
- <!-- Marketplace Section -->
368
- <section class="py-20 bg-white">
369
- <div class="container mx-auto px-4">
370
- <h2 class="text-3xl font-bold text-center mb-4">Mercado de Plásticos Reciclados</h2>
371
- <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">Conectamos sua empresa com compradores especializados para cada tipo de plástico recuperado.</p>
372
-
373
- <div class="grid md:grid-cols-3 gap-8">
374
- <!-- Marketplace Card 1 -->
375
- <div class="border border-gray-200 rounded-xl p-6 hover:shadow-lg transition">
376
- <div class="flex items-center mb-4">
377
- <div class="w-12 h-12 rounded-full bg-blue-100 text-blue-500 flex items-center justify-center mr-4">
378
- <i class="fas fa-industry"></i>
379
- </div>
380
- <h3 class="text-xl font-semibold">Compradores de ABS</h3>
381
- </div>
382
- <p class="text-gray-600 mb-4">Empresas especializadas na fabricação de novos produtos eletrônicos e automotivos.</p>
383
- <div class="flex justify-between items-center">
384
- <span class="text-green-500 font-bold">R$ 2,80/kg</span>
385
- <button class="text-blue-500 hover:text-blue-700 font-medium">Ver ofertas</button>
386
- </div>
387
- </div>
388
-
389
- <!-- Marketplace Card 2 -->
390
- <div class="border border-gray-200 rounded-xl p-6 hover:shadow-lg transition">
391
- <div class="flex items-center mb-4">
392
- <div class="w-12 h-12 rounded-full bg-purple-100 text-purple-500 flex items-center justify-center mr-4">
393
- <i class="fas fa-building"></i>
394
- </div>
395
- <h3 class="text-xl font-semibold">Compradores de PC</h3>
396
- </div>
397
- <p class="text-gray-600 mb-4">Indústrias que utilizam policarbonato em produtos de alta resistência e transparência.</p>
398
- <div class="flex justify-between items-center">
399
- <span class="text-green-500 font-bold">R$ 4,15/kg</span>
400
- <button class="text-blue-500 hover:text-blue-700 font-medium">Ver ofertas</button>
401
- </div>
402
- </div>
403
-
404
- <!-- Marketplace Card 3 -->
405
- <div class="border border-gray-200 rounded-xl p-6 hover:shadow-lg transition">
406
- <div class="flex items-center mb-4">
407
- <div class="w-12 h-12 rounded-full bg-green-100 text-green-500 flex items-center justify-center mr-4">
408
- <i class="fas fa-recycle"></i>
409
- </div>
410
- <h3 class="text-xl font-semibold">Compradores de PP</h3>
411
- </div>
412
- <p class="text-gray-600 mb-4">Empresas de reciclagem que transformam o material em novos produtos plásticos.</p>
413
- <div class="flex justify-between items-center">
414
- <span class="text-green-500 font-bold">R$ 1,95/kg</span>
415
- <button class="text-blue-500 hover:text-blue-700 font-medium">Ver ofertas</button>
416
- </div>
417
- </div>
418
- </div>
419
-
420
- <div class="mt-12 text-center">
421
- <button class="border-2 border-green-500 text-green-500 hover:bg-green-500 hover:text-white px-8 py-3 rounded-full font-semibold transition">
422
- Acessar o Mercado Completo
423
- </button>
424
- </div>
425
- </div>
426
- </section>
427
-
428
- <!-- Contact Section -->
429
- <section id="contact" class="py-20 bg-gray-50">
430
- <div class="container mx-auto px-4">
431
- <div class="bg-white rounded-xl shadow-xl overflow-hidden">
432
- <div class="md:flex">
433
- <div class="md:w-1/2 p-12 gradient-bg text-white">
434
- <h2 class="text-3xl font-bold mb-6">Entre em Contato</h2>
435
- <p class="mb-8">Tem dúvidas sobre a separação de plásticos de e-lixo? Nossa equipe está pronta para ajudar.</p>
436
-
437
- <div class="space-y-6">
438
- <div class="flex items-start">
439
- <div class="text-2xl mr-4 mt-1">
440
- <i class="fas fa-map-marker-alt"></i>
441
- </div>
442
- <div>
443
- <h4 class="font-semibold">Endereço</h4>
444
- <p>Av. Sustentabilidade, 1234<br>Eco Parque Industrial<br>São Paulo - SP</p>
445
- </div>
446
- </div>
447
-
448
- <div class="flex items-start">
449
- <div class="text-2xl mr-4 mt-1">
450
- <i class="fas fa-phone-alt"></i>
451
- </div>
452
- <div>
453
- <h4 class="font-semibold">Telefone</h4>
454
- <p>(11) 1234-5678</p>
455
- </div>
456
- </div>
457
-
458
- <div class="flex items-start">
459
- <div class="text-2xl mr-4 mt-1">
460
- <i class="fas fa-envelope"></i>
461
- </div>
462
- <div>
463
- <h4 class="font-semibold">Email</h4>
464
- <p>[email protected]</p>
465
- </div>
466
- </div>
467
- </div>
468
-
469
- <div class="mt-10 flex space-x-4">
470
- <a href="#" class="w-10 h-10 rounded-full bg-white text-green-500 flex items-center justify-center">
471
- <i class="fab fa-facebook-f"></i>
472
- </a>
473
- <a href="#" class="w-10 h-10 rounded-full bg-white text-green-500 flex items-center justify-center">
474
- <i class="fab fa-instagram"></i>
475
- </a>
476
- <a href="#" class="w-10 h-10 rounded-full bg-white text-green-500 flex items-center justify-center">
477
- <i class="fab fa-linkedin-in"></i>
478
- </a>
479
- <a href="#" class="w-10 h-10 rounded-full bg-white text-green-500 flex items-center justify-center">
480
- <i class="fab fa-youtube"></i>
481
- </a>
482
- </div>
483
- </div>
484
-
485
- <div class="md:w-1/2 p-12">
486
- <h3 class="text-2xl font-bold mb-6">Envie sua mensagem</h3>
487
- <form>
488
- <div class="grid md:grid-cols-2 gap-6 mb-6">
489
- <div>
490
- <label class="block text-gray-700 mb-2">Nome</label>
491
- <input type="text" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
492
- </div>
493
- <div>
494
- <label class="block text-gray-700 mb-2">Email</label>
495
- <input type="email" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
496
- </div>
497
- </div>
498
- <div class="mb-6">
499
- <label class="block text-gray-700 mb-2">Assunto</label>
500
- <input type="text" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
501
- </div>
502
- <div class="mb-6">
503
- <label class="block text-gray-700 mb-2">Mensagem</label>
504
- <textarea rows="5" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"></textarea>
505
- </div>
506
- <button type="submit" class="w-full bg-green-500 hover:bg-green-600 text-white py-3 rounded-full font-semibold transition shadow-lg">
507
- Enviar Mensagem
508
- </button>
509
- </form>
510
- </div>
511
- </div>
512
- </div>
513
- </div>
514
- </section>
515
-
516
- <!-- FAQ Section -->
517
- <section class="py-20 bg-white">
518
- <div class="container mx-auto px-4 max-w-4xl">
519
- <h2 class="text-3xl font-bold text-center mb-12">Perguntas Frequentes</h2>
520
-
521
- <div class="space-y-4">
522
- <!-- FAQ Item 1 -->
523
- <div class="border border-gray-200 rounded-xl overflow-hidden">
524
- <button class="w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
525
- <h3 class="font-semibold text-lg">Como identificar corretamente os tipos de plástico no e-lixo?</h3>
526
- <i class="fas fa-chevron-down text-green-500"></i>
527
- </button>
528
- <div class="px-6 pb-6 hidden">
529
- <p class="text-gray-600">Recomendamos utilizar nossa ferramenta de identificação que combina análise visual, testes de densidade e características de queima. Para maior precisão, você pode enviar amostras para nosso laboratório de análise.</p>
530
- </div>
531
- </div>
532
-
533
- <!-- FAQ Item 2 -->
534
- <div class="border border-gray-200 rounded-xl overflow-hidden">
535
- <button class="w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
536
- <h3 class="font-semibold text-lg">Quais os plásticos mais valiosos no e-lixo?</h3>
537
- <i class="fas fa-chevron-down text-green-500"></i>
538
- </button>
539
- <div class="px-6 pb-6 hidden">
540
- <p class="text-gray-600">O policarbonato (PC) e o ABS são os plásticos mais valiosos, amplamente utilizados em componentes eletrônicos. O valor varia conforme a pureza do material e condições de mercado, podendo alcançar até R$ 5,00/kg.</p>
541
- </div>
542
- </div>
543
-
544
- <!-- FAQ Item 3 -->
545
- <div class="border border-gray-200 rounded-xl overflow-hidden">
546
- <button class="w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
547
- <h3 class="font-semibold text-lg">Como preparar os plásticos para venda?</h3>
548
- <i class="fas fa-chevron-down text-green-500"></i>
549
- </button>
550
- <div class="px-6 pb-6 hidden">
551
- <p class="text-gray-600">1. Limpe os plásticos removendo metais e outros contaminantes<br>
552
- 2. Separe por tipo e cor<br>
553
- 3. Triture em flocos uniformes quando possível<br>
554
- 4. Armazene em big bags ou fardos bem identificados<br>
555
- 5. Mantenha em local seco até a coleta</p>
556
- </div>
557
- </div>
558
-
559
- <!-- FAQ Item 4 -->
560
- <div class="border border-gray-200 rounded-xl overflow-hidden">
561
- <button class="w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
562
- <h3 class="font-semibold text-lg">Quais os prazos para retirada dos materiais?</h3>
563
- <i class="fas fa-chevron-down text-green-500"></i>
564
- </button>
565
- <div class="px-6 pb-6 hidden">
566
- <p class="text-gray-600">Para volumes acima de 500kg, realizamos a coleta em até 5 dias úteis após a confirmação da venda. Para menores quantidades, trabalhamos com coleta agendada semanalmente em cada região.</p>
567
- </div>
568
- </div>
569
-
570
- <!-- FAQ Item 5 -->
571
- <div class="border border-gray-200 rounded-xl overflow-hidden">
572
- <button class="w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
573
- <h3 class="font-semibold text-lg">Como são realizados os pagamentos?</h3>
574
- <i class="fas fa-chevron-down text-green-500"></i>
575
- </button>
576
- <div class="px-6 pb-6 hidden">
577
- <p class="text-gray-600">O pagamento é realizado via transferência bancária em até 3 dias úteis após a pesagem e análise de qualidade do material em nosso centro de processamento. Também oferecemos opção de antecipação de recebíveis para clientes cadastrados.</p>
578
- </div>
579
- </div>
580
- </div>
581
- </div>
582
- </section>
583
-
584
- <!-- CTA Section -->
585
- <section class="gradient-bg text-white py-16">
586
- <div class="container mx-auto px-4 text-center">
587
- <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para otimizar sua reciclagem de plásticos?</h2>
588
- <p class="text-xl mb-8 max-w-2xl mx-auto">Junte-se a dezenas de empresas que já transformaram seu e-lixo em receita com nossa plataforma.</p>
589
- <button class="bg-white text-green-600 px-8 py-4 rounded-full font-bold hover:bg-gray-100 transition shadow-xl text-lg">
590
- Cadastre-se Gratuitamente
591
- </button>
592
- </div>
593
- </section>
594
-
595
  <!-- Footer -->
596
  <footer class="bg-gray-900 text-white py-12">
597
  <div class="container mx-auto px-4">
@@ -675,32 +343,277 @@
675
  </div>
676
 
677
  <script>
678
- // FAQ toggle functionality
679
- document.querySelectorAll('footer button').forEach(button => {
680
- button.addEventListener('click', () => {
681
- const content = button.nextElementSibling;
682
- const icon = button.querySelector('i');
683
-
684
- if (content.classList.contains('hidden')) {
685
- content.classList.remove('hidden');
686
- icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
687
- } else {
688
- content.classList.add('hidden');
689
- icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
690
- }
691
- });
692
- });
693
-
694
- // Mobile menu toggle (would need proper implementation)
695
- // This is just a placeholder
696
- document.querySelector('.md\\:hidden button').addEventListener('click', () => {
697
- alert('Mobile menu would open here in a real implementation');
 
 
 
 
 
698
  });
699
-
700
- // Plastic identification form submission
701
- document.querySelector('#identify-plastic').addEventListener('submit', (e) => {
702
  e.preventDefault();
703
- alert('Plastic identification would be processed here');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
704
  });
705
  </script>
706
  <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=Diegobrons/s1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>EcoPlast - Identificação de Plásticos</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
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]"></script>
11
  <style>
12
  .gradient-bg {
13
  background: linear-gradient(135deg, #4ade80 0%, #3b82f6 100%);
 
31
  .plastic-type-5 { background-color: #FF33F3; }
32
  .plastic-type-6 { background-color: #33FFF3; }
33
  .plastic-type-7 { background-color: #8A33FF; }
34
+ #previewContainer {
35
+ display: none;
36
+ position: relative;
37
+ }
38
+ #imagePreview {
39
+ max-width: 100%;
40
+ max-height: 300px;
41
+ border-radius: 8px;
42
+ }
43
+ #loadingIndicator {
44
+ display: none;
45
+ }
46
+ #resultsContainer {
47
+ display: none;
48
+ margin-top: 20px;
49
+ }
50
+ .progress-bar {
51
+ height: 10px;
52
+ background-color: #e0e0e0;
53
+ border-radius: 5px;
54
+ overflow: hidden;
55
+ }
56
+ .progress-bar-fill {
57
+ height: 100%;
58
+ background-color: #4ade80;
59
+ transition: width 0.3s ease;
60
+ }
61
+ .drop-zone {
62
+ border: 2px dashed #ccc;
63
+ border-radius: 8px;
64
+ padding: 40px;
65
+ text-align: center;
66
+ cursor: pointer;
67
+ transition: all 0.3s;
68
+ }
69
+ .drop-zone.highlight {
70
+ border-color: #4ade80;
71
+ background-color: rgba(74, 222, 128, 0.1);
72
+ }
73
  </style>
74
  </head>
75
  <body class="bg-gray-50 font-sans">
 
94
  </div>
95
  </header>
96
 
97
+ <!-- Identification Tool -->
98
+ <section class="py-20 bg-gray-50">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  <div class="container mx-auto px-4">
100
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden">
101
+ <div class="md:flex">
102
+ <div class="md:w-1/2 p-10 gradient-bg text-white">
103
+ <h2 class="text-3xl font-bold mb-6">Identificador de Plásticos</h2>
104
+ <p class="mb-8">Use nossa ferramenta de inteligência artificial para identificar o tipo de plástico através de uma foto.</p>
105
+ <div class="flex items-center mb-4">
106
+ <div class="w-10 h-10 rounded-full bg-white text-green-500 flex items-center justify-center mr-4">
107
+ <i class="fas fa-camera"></i>
108
+ </div>
109
+ <p>Tire uma foto do material plástico</p>
 
 
 
 
 
 
 
 
 
110
  </div>
111
+ <div class="flex items-center mb-4">
112
+ <div class="w-10 h-10 rounded-full bg-white text-green-500 flex items-center justify-center mr-4">
113
+ <i class="fas fa-brain"></i>
114
+ </div>
115
+ <p>Nossa IA analisará a imagem</p>
 
 
 
116
  </div>
117
+ <div class="flex items-center">
118
+ <div class="w-10 h-10 rounded-full bg-white text-green-500 flex items-center justify-center mr-4">
119
+ <i class="fas fa-check-circle"></i>
120
+ </div>
121
+ <p>Obtenha a identificação precisa</p>
122
  </div>
123
  </div>
124
 
125
+ <div class="md:w-1/2 p-10">
126
+ <div id="dropZone" class="drop-zone">
127
+ <i class="fas fa-cloud-upload-alt text-5xl text-gray-400 mb-4"></i>
128
+ <h3 class="text-xl font-semibold mb-2">Arraste e solte a imagem aqui</h3>
129
+ <p class="text-gray-500 mb-6">ou clique para selecionar um arquivo</p>
130
+ <button id="selectFileBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-full font-medium transition">
131
+ Selecionar arquivo
132
+ </button>
133
+ <input type="file" id="fileInput" accept="image/*" class="hidden">
134
  </div>
135
+
136
+ <div id="previewContainer" class="mt-6">
137
+ <h3 class="text-xl font-semibold mb-3">Pré-visualização</h3>
138
+ <img id="imagePreview" src="#" alt="Pré-visualização da imagem">
139
+ <button id="analyzeBtn" class="mt-4 w-full bg-green-500 hover:bg-green-600 text-white py-3 rounded-full font-semibold transition">
140
+ Analisar Plástico
141
+ </button>
142
+ <button id="cancelBtn" class="mt-2 w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-3 rounded-full font-medium transition">
143
+ Cancelar
144
+ </button>
145
  </div>
146
+
147
+ <div id="loadingIndicator" class="mt-6 text-center">
148
+ <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-green-500 mb-2"></div>
149
+ <p>Analisando a imagem...</p>
 
 
 
 
150
  </div>
151
+
152
+ <div id="resultsContainer" class="mt-6">
153
+ <h3 class="text-xl font-semibold mb-3">Resultados da Análise</h3>
154
+ <div id="resultsContent">
155
+ <!-- Results will be inserted here by JavaScript -->
156
+ </div>
157
  </div>
158
  </div>
159
  </div>
 
161
  </div>
162
  </section>
163
 
164
+ <!-- Plastic Types Section -->
165
  <section id="plastics" class="py-20 bg-white">
166
  <div class="container mx-auto px-4">
167
+ <h2 class="text-3xl font-bold text-center mb-16">Tipos de Plástico que Podemos Identificar</h2>
168
 
169
  <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
170
  <!-- Plastic Type 1 -->
 
177
  <p class="text-gray-600 mb-4">Comum em teclados, carcaças de computadores e eletrodomésticos. Resistente ao impacto e fácil de moldar.</p>
178
  <div class="flex justify-between items-center">
179
  <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 7</span>
180
+ <span class="text-gray-500 font-medium">Densidade: 1.04-1.06 g/cm³</span>
181
  </div>
182
  </div>
183
  </div>
 
192
  <p class="text-gray-600 mb-4">Encontrado em CDs, DVDs, lentes e componentes ópticos. Transparente e altamente resistente.</p>
193
  <div class="flex justify-between items-center">
194
  <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 7</span>
195
+ <span class="text-gray-500 font-medium">Densidade: 1.20-1.22 g/cm³</span>
196
  </div>
197
  </div>
198
  </div>
 
207
  <p class="text-gray-600 mb-4">Usado em monitores, TVs e embalagens. Reconhecível pelo som metálico quando batido.</p>
208
  <div class="flex justify-between items-center">
209
  <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 6</span>
210
+ <span class="text-gray-500 font-medium">Densidade: 1.03-1.06 g/cm³</span>
211
  </div>
212
  </div>
213
  </div>
 
222
  <p class="text-gray-600 mb-4">Presente em baterias, componentes internos e isolantes. Resistente a produtos químicos.</p>
223
  <div class="flex justify-between items-center">
224
  <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 5</span>
225
+ <span class="text-gray-500 font-medium">Densidade: 0.89-0.91 g/cm³</span>
226
  </div>
227
  </div>
228
  </div>
 
237
  <p class="text-gray-600 mb-4">Usado em fios, cabos e revestimentos. Flexível e resistente à chama.</p>
238
  <div class="flex justify-between items-center">
239
  <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 3</span>
240
+ <span class="text-gray-500 font-medium">Densidade: 1.30-1.45 g/cm³</span>
241
  </div>
242
  </div>
243
  </div>
 
252
  <p class="text-gray-600 mb-4">Encontrado em conectores, componentes elétricos e peças de precisão. Boa estabilidade dimensional.</p>
253
  <div class="flex justify-between items-center">
254
  <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 7</span>
255
+ <span class="text-gray-500 font-medium">Densidade: 1.30-1.38 g/cm³</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
256
  </div>
257
  </div>
258
  </div>
 
260
  </div>
261
  </section>
262
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
263
  <!-- Footer -->
264
  <footer class="bg-gray-900 text-white py-12">
265
  <div class="container mx-auto px-4">
 
343
  </div>
344
 
345
  <script>
346
+ // Model and variables
347
+ let model;
348
+ let imageToAnalyze;
349
+
350
+ // DOM elements
351
+ const dropZone = document.getElementById('dropZone');
352
+ const fileInput = document.getElementById('fileInput');
353
+ const selectFileBtn = document.getElementById('selectFileBtn');
354
+ const previewContainer = document.getElementById('previewContainer');
355
+ const imagePreview = document.getElementById('imagePreview');
356
+ const analyzeBtn = document.getElementById('analyzeBtn');
357
+ const cancelBtn = document.getElementById('cancelBtn');
358
+ const loadingIndicator = document.getElementById('loadingIndicator');
359
+ const resultsContainer = document.getElementById('resultsContainer');
360
+ const resultsContent = document.getElementById('resultsContent');
361
+
362
+ // Event listeners
363
+ selectFileBtn.addEventListener('click', () => fileInput.click());
364
+ fileInput.addEventListener('change', handleFileSelect);
365
+ analyzeBtn.addEventListener('click', analyzeImage);
366
+ cancelBtn.addEventListener('click', resetTool);
367
+
368
+ // Drag and drop events
369
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
370
+ dropZone.addEventListener(eventName, preventDefaults, false);
371
  });
372
+
373
+ function preventDefaults(e) {
 
374
  e.preventDefault();
375
+ e.stopPropagation();
376
+ }
377
+
378
+ ['dragenter', 'dragover'].forEach(eventName => {
379
+ dropZone.addEventListener(eventName, highlight, false);
380
+ });
381
+
382
+ ['dragleave', 'drop'].forEach(eventName => {
383
+ dropZone.addEventListener(eventName, unhighlight, false);
384
+ });
385
+
386
+ function highlight() {
387
+ dropZone.classList.add('highlight');
388
+ }
389
+
390
+ function unhighlight() {
391
+ dropZone.classList.remove('highlight');
392
+ }
393
+
394
+ dropZone.addEventListener('drop', handleDrop, false);
395
+
396
+ function handleDrop(e) {
397
+ const dt = e.dataTransfer;
398
+ const files = dt.files;
399
+
400
+ if (files.length > 0 && files[0].type.match('image.*')) {
401
+ handleFile(files[0]);
402
+ }
403
+ }
404
+
405
+ function handleFileSelect(e) {
406
+ if (e.target.files.length > 0 && e.target.files[0].type.match('image.*')) {
407
+ handleFile(e.target.files[0]);
408
+ }
409
+ }
410
+
411
+ function handleFile(file) {
412
+ const reader = new FileReader();
413
+
414
+ reader.onload = function(event) {
415
+ imagePreview.src = event.target.result;
416
+ imageToAnalyze = imagePreview;
417
+ previewContainer.style.display = 'block';
418
+ dropZone.style.display = 'none';
419
+ };
420
+
421
+ reader.readAsDataURL(file);
422
+ }
423
+
424
+ // Load the model when the page loads
425
+ async function loadModel() {
426
+ try {
427
+ console.log('Loading model...');
428
+ model = await mobilenet.load();
429
+ console.log('Model loaded successfully');
430
+ } catch (error) {
431
+ console.error('Error loading model:', error);
432
+ alert('Erro ao carregar o modelo de IA. Por favor, recarregue a página.');
433
+ }
434
+ }
435
+
436
+ // Analyze the image
437
+ async function analyzeImage() {
438
+ if (!imageToAnalyze) return;
439
+
440
+ try {
441
+ // Show loading indicator
442
+ previewContainer.style.display = 'none';
443
+ loadingIndicator.style.display = 'block';
444
+ resultsContainer.style.display = 'none';
445
+
446
+ // Wait a bit to show the loading indicator (simulate processing time)
447
+ await new Promise(resolve => setTimeout(resolve, 1000));
448
+
449
+ // Classify the image
450
+ const predictions = await model.classify(imageToAnalyze);
451
+
452
+ // Process results - in a real app, we would have a custom model trained on plastic types
453
+ // For this demo, we'll simulate plastic type detection based on the MobileNet predictions
454
+ const plasticType = simulatePlasticTypeDetection(predictions);
455
+
456
+ // Display results
457
+ displayResults(plasticType, predictions);
458
+
459
+ } catch (error) {
460
+ console.error('Error analyzing image:', error);
461
+ alert('Erro ao analisar a imagem. Por favor, tente novamente.');
462
+ resetTool();
463
+ }
464
+ }
465
+
466
+ // Simulate plastic type detection based on MobileNet predictions
467
+ function simulatePlasticTypeDetection(predictions) {
468
+ // In a real application, this would be replaced with a custom model trained on plastic types
469
+ // Here we're just simulating based on the MobileNet predictions
470
+
471
+ // Check if the predictions contain words related to electronics (higher chance of ABS, PC, etc.)
472
+ const hasElectronics = predictions.some(p =>
473
+ p.className.toLowerCase().includes('computer') ||
474
+ p.className.toLowerCase().includes('keyboard') ||
475
+ p.className.toLowerCase().includes('monitor') ||
476
+ p.className.toLowerCase().includes('electronic')
477
+ );
478
+
479
+ // Check if the predictions contain words related to packaging (higher chance of PP, HIPS, etc.)
480
+ const hasPackaging = predictions.some(p =>
481
+ p.className.toLowerCase().includes('bottle') ||
482
+ p.className.toLowerCase().includes('container') ||
483
+ p.className.toLowerCase().includes('packaging')
484
+ );
485
+
486
+ // Check if the predictions contain words related to cables (higher chance of PVC)
487
+ const hasCables = predictions.some(p =>
488
+ p.className.toLowerCase().includes('cable') ||
489
+ p.className.toLowerCase().includes('wire')
490
+ );
491
+
492
+ // Determine the most likely plastic type based on these checks
493
+ if (hasElectronics) {
494
+ return {
495
+ type: 'ABS (Acrilonitrila Butadieno Estireno)',
496
+ code: '7',
497
+ description: 'Comum em teclados, carcaças de computadores e eletrodomésticos. Resistente ao impacto e fácil de moldar.',
498
+ density: '1.04-1.06 g/cm³',
499
+ confidence: Math.random() * 0.3 + 0.7 // Random confidence between 70% and 100%
500
+ };
501
+ } else if (hasPackaging) {
502
+ return {
503
+ type: 'PP (Polipropileno)',
504
+ code: '5',
505
+ description: 'Presente em baterias, componentes internos e isolantes. Resistente a produtos químicos.',
506
+ density: '0.89-0.91 g/cm³',
507
+ confidence: Math.random() * 0.3 + 0.7
508
+ };
509
+ } else if (hasCables) {
510
+ return {
511
+ type: 'PVC (Policloreto de Vinila)',
512
+ code: '3',
513
+ description: 'Usado em fios, cabos e revestimentos. Flexível e resistente à chama.',
514
+ density: '1.30-1.45 g/cm³',
515
+ confidence: Math.random() * 0.3 + 0.7
516
+ };
517
+ } else {
518
+ // Default to PC (Policarbonato) if no specific matches
519
+ return {
520
+ type: 'PC (Policarbonato)',
521
+ code: '7',
522
+ description: 'Encontrado em CDs, DVDs, lentes e componentes ópticos. Transparente e altamente resistente.',
523
+ density: '1.20-1.22 g/cm³',
524
+ confidence: Math.random() * 0.3 + 0.7
525
+ };
526
+ }
527
+ }
528
+
529
+ // Display the analysis results
530
+ function displayResults(plasticType, predictions) {
531
+ loadingIndicator.style.display = 'none';
532
+
533
+ // Create results HTML
534
+ let html = `
535
+ <div class="bg-green-50 border border-green-200 rounded-lg p-6 mb-6">
536
+ <div class="flex items-center mb-4">
537
+ <div class="w-12 h-12 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-4">
538
+ <i class="fas fa-check-circle text-xl"></i>
539
+ </div>
540
+ <h4 class="text-xl font-semibold">Tipo de Plástico Identificado</h4>
541
+ </div>
542
+
543
+ <div class="grid md:grid-cols-2 gap-6">
544
+ <div>
545
+ <h5 class="font-medium text-gray-700 mb-1">Tipo</h5>
546
+ <p class="text-lg font-bold">${plasticType.type}</p>
547
+ </div>
548
+ <div>
549
+ <h5 class="font-medium text-gray-700 mb-1">Código de Identificação</h5>
550
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código ${plasticType.code}</span>
551
+ </div>
552
+ <div>
553
+ <h5 class="font-medium text-gray-700 mb-1">Densidade</h5>
554
+ <p>${plasticType.density}</p>
555
+ </div>
556
+ <div>
557
+ <h5 class="font-medium text-gray-700 mb-1">Confiança da Análise</h5>
558
+ <div class="progress-bar">
559
+ <div class="progress-bar-fill" style="width: ${Math.round(plasticType.confidence * 100)}%"></div>
560
+ </div>
561
+ <p class="text-sm text-gray-600 mt-1">${Math.round(plasticType.confidence * 100)}% de certeza</p>
562
+ </div>
563
+ </div>
564
+
565
+ <div class="mt-6">
566
+ <h5 class="font-medium text-gray-700 mb-2">Descrição</h5>
567
+ <p class="text-gray-600">${plasticType.description}</p>
568
+ </div>
569
+ </div>
570
+
571
+ <div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
572
+ <h4 class="text-lg font-semibold mb-4">Como descartar corretamente</h4>
573
+ <div class="space-y-3">
574
+ <div class="flex items-start">
575
+ <div class="text-blue-500 mr-3 mt-1">
576
+ <i class="fas fa-trash-alt"></i>
577
+ </div>
578
+ <p>Separe este material dos demais resíduos</p>
579
+ </div>
580
+ <div class="flex items-start">
581
+ <div class="text-blue-500 mr-3 mt-1">
582
+ <i class="fas fa-broom"></i>
583
+ </div>
584
+ <p>Limpe o material de resíduos e contaminantes</p>
585
+ </div>
586
+ <div class="flex items-start">
587
+ <div class="text-blue-500 mr-3 mt-1">
588
+ <i class="fas fa-recycle"></i>
589
+ </div>
590
+ <p>Encaminhe para pontos de coleta especializados em plásticos tipo ${plasticType.code}</p>
591
+ </div>
592
+ </div>
593
+
594
+ <button class="mt-6 w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-full font-semibold transition">
595
+ <i class="fas fa-map-marker-alt mr-2"></i> Encontrar pontos de coleta próximos
596
+ </button>
597
+ </div>
598
+ `;
599
+
600
+ resultsContent.innerHTML = html;
601
+ resultsContainer.style.display = 'block';
602
+ }
603
+
604
+ // Reset the tool to its initial state
605
+ function resetTool() {
606
+ fileInput.value = '';
607
+ previewContainer.style.display = 'none';
608
+ loadingIndicator.style.display = 'none';
609
+ resultsContainer.style.display = 'none';
610
+ dropZone.style.display = 'block';
611
+ imageToAnalyze = null;
612
+ }
613
+
614
+ // Initialize the page
615
+ document.addEventListener('DOMContentLoaded', () => {
616
+ loadModel();
617
  });
618
  </script>
619
  <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=Diegobrons/s1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ preciso que seja capaz de identificar o plástico e auxiliar na separação do material através da foto , e que isso seja funcional por favor