Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EcoPlast - Identificação de Plásticos em E-lixo</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .dropzone { | |
| border: 2px dashed #4b5563; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone.active { | |
| border-color: #10b981; | |
| background-color: #ecfdf5; | |
| } | |
| .material-card { | |
| transition: all 0.3s ease; | |
| } | |
| .material-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-10 text-center"> | |
| <h1 class="text-4xl font-bold text-green-700 mb-2"> | |
| <i class="fas fa-recycle mr-2"></i>EcoPlast | |
| </h1> | |
| <p class="text-gray-600 text-lg">Identificação inteligente de plásticos em lixo eletrônico</p> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Upload Section --> | |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4"> | |
| <i class="fas fa-camera mr-2 text-green-600"></i>Identificar Material | |
| </h2> | |
| <!-- Image Upload --> | |
| <div class="mb-6"> | |
| <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer mb-4"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i> | |
| <p class="text-gray-600 mb-2">Arraste e solte uma imagem aqui ou</p> | |
| <button id="uploadBtn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition"> | |
| Selecione do dispositivo | |
| </button> | |
| <input type="file" id="fileInput" accept="image/*" class="hidden" capture="environment"> | |
| <p class="text-sm text-gray-500 mt-2">Formatos suportados: JPG, PNG, WEBP</p> | |
| </div> | |
| <div class="flex justify-center mb-4"> | |
| <button id="captureBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition mr-2"> | |
| <i class="fas fa-camera mr-2"></i>Capturar Foto | |
| </button> | |
| <button id="sampleBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition"> | |
| <i class="fas fa-vial mr-2"></i>Usar Amostra | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Processing Indicator --> | |
| <div id="processingSection" class="hidden"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3"> | |
| <div class="w-4 h-4 rounded-full bg-green-600 animate-pulse"></div> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-800">Analisando imagem...</h3> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4"> | |
| <div id="progressBar" class="progress-bar bg-green-600 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <p class="text-sm text-gray-600">Estamos identificando símbolos, códigos e características visuais do plástico.</p> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="resultsSection" class="hidden fade-in"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-search mr-2 text-green-600"></i>Resultados da Análise | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <h4 class="font-medium text-gray-700 mb-2">Material Principal</h4> | |
| <div id="primaryMaterial" class="text-xl font-bold text-green-700"></div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <h4 class="font-medium text-gray-700 mb-2">Reciclabilidade</h4> | |
| <div id="recyclability" class="text-xl font-bold"></div> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm mb-6"> | |
| <h4 class="font-medium text-gray-700 mb-2">Detalhes do Material</h4> | |
| <div id="materialDetails" class="space-y-2"></div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm mb-6"> | |
| <h4 class="font-medium text-gray-700 mb-2">Valor de Mercado</h4> | |
| <div id="marketValue" class="text-xl font-bold text-green-700"></div> | |
| <p class="text-sm text-gray-600 mt-1">Preço médio por quilo</p> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <h4 class="font-medium text-gray-700 mb-2">Sugestão de Armazenamento</h4> | |
| <div id="storageSuggestion" class="flex items-center"> | |
| <div id="storageColor" class="w-6 h-6 rounded-full mr-2"></div> | |
| <div id="storageText"></div> | |
| </div> | |
| </div> | |
| <!-- Composite Materials --> | |
| <div id="compositeSection" class="hidden mt-6"> | |
| <h4 class="font-medium text-gray-700 mb-2">Materiais Compostos Detectados</h4> | |
| <div id="compositeMaterials" class="space-y-2"></div> | |
| </div> | |
| <!-- Feedback and Correction --> | |
| <div class="mt-6 pt-4 border-t border-gray-200"> | |
| <h4 class="font-medium text-gray-700 mb-2">A identificação está correta?</h4> | |
| <div class="flex space-x-3"> | |
| <button id="correctBtn" class="flex-1 bg-green-100 hover:bg-green-200 text-green-800 font-medium py-2 px-4 rounded-lg transition"> | |
| <i class="fas fa-check mr-2"></i>Sim | |
| </button> | |
| <button id="incorrectBtn" class="flex-1 bg-red-100 hover:bg-red-200 text-red-800 font-medium py-2 px-4 rounded-lg transition"> | |
| <i class="fas fa-times mr-2"></i>Não, corrigir | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Materials Guide --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4"> | |
| <i class="fas fa-book mr-2 text-green-600"></i>Guia de Plásticos | |
| </h2> | |
| <div class="space-y-4"> | |
| <!-- PET --> | |
| <div class="material-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-3">1</div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">PET (Politereftalato de Etileno)</h3> | |
| <p class="text-sm text-gray-600">Garrafas, embalagens de alimentos</p> | |
| <div class="mt-2 flex items-center text-sm"> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded mr-2">Reciclável</span> | |
| <span>R$1,20/kg</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- HDPE --> | |
| <div class="material-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 text-green-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-3">2</div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">HDPE (Polietileno Alta Densidade)</h3> | |
| <p class="text-sm text-gray-600">Tampas, embalagens rígidas</p> | |
| <div class="mt-2 flex items-center text-sm"> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded mr-2">Reciclável</span> | |
| <span>R$1,50/kg</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- PVC --> | |
| <div class="material-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-100 text-yellow-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-3">3</div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">PVC (Policloreto de Vinila)</h3> | |
| <p class="text-sm text-gray-600">Tubulações, cabos</p> | |
| <div class="mt-2 flex items-center text-sm"> | |
| <span class="bg-red-100 text-red-800 px-2 py-1 rounded mr-2">Difícil reciclagem</span> | |
| <span>R$0,80/kg</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- LDPE --> | |
| <div class="material-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex items-start"> | |
| <div class="bg-red-100 text-red-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-3">4</div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">LDPE (Polietileno Baixa Densidade)</h3> | |
| <p class="text-sm text-gray-600">Sacolas, filmes plásticos</p> | |
| <div class="mt-2 flex items-center text-sm"> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded mr-2">Reciclável</span> | |
| <span>R$1,00/kg</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- PP --> | |
| <div class="material-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-3">5</div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">PP (Polipropileno)</h3> | |
| <p class="text-sm text-gray-600">Tampas, hélices, peças automotivas</p> | |
| <div class="mt-2 flex items-center text-sm"> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded mr-2">Reciclável</span> | |
| <span>R$1,60/kg</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- PS --> | |
| <div class="material-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 text-purple-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-3">6</div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">PS (Poliestireno)</h3> | |
| <p class="text-sm text-gray-600">Copos descartáveis, embalagens</p> | |
| <div class="mt-2 flex items-center text-sm"> | |
| <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded mr-2">Reciclagem limitada</span> | |
| <span>R$0,90/kg</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Other --> | |
| <div class="material-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex items-start"> | |
| <div class="bg-gray-100 text-gray-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-3">7</div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">Outros (ABS, PC, etc)</h3> | |
| <p class="text-sm text-gray-600">Eletrônicos, peças técnicas</p> | |
| <div class="mt-2 flex items-center text-sm"> | |
| <span class="bg-red-100 text-red-800 px-2 py-1 rounded mr-2">Verificar tipo</span> | |
| <span>Varia</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-gray-200"> | |
| <h3 class="font-medium text-gray-700 mb-2">Legenda de Cores</h3> | |
| <div class="grid grid-cols-2 gap-2 text-sm"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div> | |
| <span>PET (1)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-green-500 mr-2"></div> | |
| <span>HDPE (2)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-yellow-500 mr-2"></div> | |
| <span>PVC (3)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-red-500 mr-2"></div> | |
| <span>LDPE (4)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-blue-400 mr-2"></div> | |
| <span>PP (5)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-purple-500 mr-2"></div> | |
| <span>PS (6)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- History Section --> | |
| <div id="historySection" class="mt-12 hidden"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4"> | |
| <i class="fas fa-history mr-2 text-green-600"></i>Histórico de Identificações | |
| </h2> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Material</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reciclável</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valor/kg</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th> | |
| </tr> | |
| </thead> | |
| <tbody id="historyBody" class="bg-white divide-y divide-gray-200"> | |
| <!-- Will be populated by JavaScript --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modal for Correction --> | |
| <div id="correctionModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Corrigir Identificação</h3> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Tipo de Plástico</label> | |
| <select id="materialSelect" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| <option value="1">1 - PET (Politereftalato de Etileno)</option> | |
| <option value="2">2 - HDPE (Polietileno Alta Densidade)</option> | |
| <option value="3">3 - PVC (Policloreto de Vinila)</option> | |
| <option value="4">4 - LDPE (Polietileno Baixa Densidade)</option> | |
| <option value="5">5 - PP (Polipropileno)</option> | |
| <option value="6">6 - PS (Poliestireno)</option> | |
| <option value="7">7 - Outros (ABS, PC, etc)</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">É um material composto?</label> | |
| <div class="flex items-center space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="composite" value="no" class="form-radio text-green-600" checked> | |
| <span class="ml-2">Não</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="composite" value="yes" class="form-radio text-green-600"> | |
| <span class="ml-2">Sim</span> | |
| </label> | |
| </div> | |
| <div id="secondaryMaterialContainer" class="mt-3 hidden"> | |
| <label class="block text-gray-700 mb-2">Segundo Material</label> | |
| <select id="secondaryMaterialSelect" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| <option value="">Selecione...</option> | |
| <option value="1">1 - PET (Politereftalato de Etileno)</option> | |
| <option value="2">2 - HDPE (Polietileno Alta Densidade)</option> | |
| <option value="3">3 - PVC (Policloreto de Vinila)</option> | |
| <option value="4">4 - LDPE (Polietileno Baixa Densidade)</option> | |
| <option value="5">5 - PP (Polipropileno)</option> | |
| <option value="6">6 - PS (Poliestireno)</option> | |
| <option value="7">7 - Outros (ABS, PC, etc)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="cancelCorrectionBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition"> | |
| Cancelar | |
| </button> | |
| <button id="saveCorrectionBtn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition"> | |
| Salvar Correção | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Sample data for plastic types | |
| const plasticTypes = { | |
| '1': { | |
| code: 'PET', | |
| name: 'Politereftalato de Etileno', | |
| recyclable: true, | |
| value: 1.20, | |
| color: 'bg-blue-500', | |
| storage: 'Caixa azul para plásticos PET', | |
| commonUses: 'Garrafas, embalagens de alimentos' | |
| }, | |
| '2': { | |
| code: 'HDPE', | |
| name: 'Polietileno Alta Densidade', | |
| recyclable: true, | |
| value: 1.50, | |
| color: 'bg-green-500', | |
| storage: 'Caixa verde para plásticos HDPE', | |
| commonUses: 'Tampas, embalagens rígidas' | |
| }, | |
| '3': { | |
| code: 'PVC', | |
| name: 'Policloreto de Vinila', | |
| recyclable: false, | |
| value: 0.80, | |
| color: 'bg-yellow-500', | |
| storage: 'Caixa amarela para plásticos PVC', | |
| commonUses: 'Tubulações, cabos' | |
| }, | |
| '4': { | |
| code: 'LDPE', | |
| name: 'Polietileno Baixa Densidade', | |
| recyclable: true, | |
| value: 1.00, | |
| color: 'bg-red-500', | |
| storage: 'Caixa vermelha para plásticos LDPE', | |
| commonUses: 'Sacolas, filmes plásticos' | |
| }, | |
| '5': { | |
| code: 'PP', | |
| name: 'Polipropileno', | |
| recyclable: true, | |
| value: 1.60, | |
| color: 'bg-blue-400', | |
| storage: 'Caixa azul-claro para plásticos PP', | |
| commonUses: 'Tampas, hélices, peças automotivas' | |
| }, | |
| '6': { | |
| code: 'PS', | |
| name: 'Poliestireno', | |
| recyclable: true, | |
| value: 0.90, | |
| color: 'bg-purple-500', | |
| storage: 'Caixa roxa para plásticos PS', | |
| commonUses: 'Copos descartáveis, embalagens' | |
| }, | |
| '7': { | |
| code: 'OUTROS', | |
| name: 'Outros (ABS, PC, etc)', | |
| recyclable: false, | |
| value: 0.50, | |
| color: 'bg-gray-500', | |
| storage: 'Caixa cinza para plásticos diversos', | |
| commonUses: 'Eletrônicos, peças técnicas' | |
| } | |
| }; | |
| // DOM Elements | |
| const dropzone = document.getElementById('dropzone'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const uploadBtn = document.getElementById('uploadBtn'); | |
| const captureBtn = document.getElementById('captureBtn'); | |
| const sampleBtn = document.getElementById('sampleBtn'); | |
| const processingSection = document.getElementById('processingSection'); | |
| const resultsSection = document.getElementById('resultsSection'); | |
| const progressBar = document.getElementById('progressBar'); | |
| const primaryMaterial = document.getElementById('primaryMaterial'); | |
| const recyclability = document.getElementById('recyclability'); | |
| const materialDetails = document.getElementById('materialDetails'); | |
| const marketValue = document.getElementById('marketValue'); | |
| const storageSuggestion = document.getElementById('storageSuggestion'); | |
| const storageColor = document.getElementById('storageColor'); | |
| const storageText = document.getElementById('storageText'); | |
| const compositeSection = document.getElementById('compositeSection'); | |
| const compositeMaterials = document.getElementById('compositeMaterials'); | |
| const correctBtn = document.getElementById('correctBtn'); | |
| const incorrectBtn = document.getElementById('incorrectBtn'); | |
| const historySection = document.getElementById('historySection'); | |
| const historyBody = document.getElementById('historyBody'); | |
| const correctionModal = document.getElementById('correctionModal'); | |
| const materialSelect = document.getElementById('materialSelect'); | |
| const secondaryMaterialSelect = document.getElementById('secondaryMaterialSelect'); | |
| const secondaryMaterialContainer = document.getElementById('secondaryMaterialContainer'); | |
| const cancelCorrectionBtn = document.getElementById('cancelCorrectionBtn'); | |
| const saveCorrectionBtn = document.getElementById('saveCorrectionBtn'); | |
| // Event Listeners | |
| uploadBtn.addEventListener('click', () => fileInput.click()); | |
| fileInput.addEventListener('change', handleFileSelect); | |
| captureBtn.addEventListener('click', captureImage); | |
| sampleBtn.addEventListener('click', useSampleImage); | |
| dropzone.addEventListener('dragover', handleDragOver); | |
| dropzone.addEventListener('dragleave', handleDragLeave); | |
| dropzone.addEventListener('drop', handleDrop); | |
| correctBtn.addEventListener('click', confirmIdentification); | |
| incorrectBtn.addEventListener('click', showCorrectionModal); | |
| document.querySelector('input[name="composite"]').addEventListener('change', toggleSecondaryMaterial); | |
| cancelCorrectionBtn.addEventListener('click', hideCorrectionModal); | |
| saveCorrectionBtn.addEventListener('click', saveCorrection); | |
| // Functions | |
| function handleFileSelect(e) { | |
| const file = e.target.files[0]; | |
| if (file) { | |
| processImage(file); | |
| } | |
| } | |
| function captureImage() { | |
| alert("Em um aplicativo real, isso abriria a câmera do dispositivo."); | |
| // For demo purposes, we'll use a sample image | |
| useSampleImage(); | |
| } | |
| function useSampleImage() { | |
| // This would be replaced with actual sample image loading | |
| simulateProcessing(); | |
| } | |
| function handleDragOver(e) { | |
| e.preventDefault(); | |
| dropzone.classList.add('active'); | |
| } | |
| function handleDragLeave() { | |
| dropzone.classList.remove('active'); | |
| } | |
| function handleDrop(e) { | |
| e.preventDefault(); | |
| dropzone.classList.remove('active'); | |
| const file = e.dataTransfer.files[0]; | |
| if (file && file.type.match('image.*')) { | |
| processImage(file); | |
| } | |
| } | |
| function processImage(file) { | |
| // In a real app, this would upload and process the image | |
| // For demo, we'll simulate the process | |
| simulateProcessing(); | |
| } | |
| function simulateProcessing() { | |
| processingSection.classList.remove('hidden'); | |
| resultsSection.classList.add('hidden'); | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += 10; | |
| progressBar.style.width = `${progress}%`; | |
| if (progress >= 100) { | |
| clearInterval(interval); | |
| showResults(); | |
| } | |
| }, 300); | |
| } | |
| function showResults() { | |
| processingSection.classList.add('hidden'); | |
| resultsSection.classList.remove('hidden'); | |
| historySection.classList.remove('hidden'); | |
| // For demo, we'll use a sample result (PP + ABS composite) | |
| const primaryType = '5'; | |
| const secondaryType = '7'; | |
| displayMaterialInfo(primaryType, secondaryType); | |
| addToHistory(primaryType, secondaryType); | |
| } | |
| function displayMaterialInfo(primaryType, secondaryType = null) { | |
| const primary = plasticTypes[primaryType]; | |
| // Primary material | |
| primaryMaterial.textContent = `${primaryType} - ${primary.code}: ${primary.name}`; | |
| // Recyclability | |
| if (primary.recyclable) { | |
| recyclability.innerHTML = `<span class="text-green-600"><i class="fas fa-check-circle mr-1"></i>Reciclável</span>`; | |
| } else { | |
| recyclability.innerHTML = `<span class="text-red-600"><i class="fas fa-times-circle mr-1"></i>Não reciclável</span>`; | |
| } | |
| // Material details | |
| materialDetails.innerHTML = ` | |
| <p><span class="font-medium">Código:</span> ${primaryType} - ${primary.code}</p> | |
| <p><span class="font-medium">Nome:</span> ${primary.name}</p> | |
| <p><span class="font-medium">Usos comuns:</span> ${primary.commonUses}</p> | |
| `; | |
| // Market value | |
| marketValue.textContent = `R$${primary.value.toFixed(2)}/kg`; | |
| // Storage suggestion | |
| storageColor.className = `w-6 h-6 rounded-full mr-2 ${primary.color}`; | |
| storageText.textContent = primary.storage; | |
| // Composite materials | |
| if (secondaryType) { | |
| const secondary = plasticTypes[secondaryType]; | |
| compositeSection.classList.remove('hidden'); | |
| compositeMaterials.innerHTML = ` | |
| <p><span class="font-medium">Material secundário:</span> ${secondaryType} - ${secondary.code}: ${secondary.name}</p> | |
| <p><span class="font-medium">Sugestão:</span> Separar preferencialmente por tipo predominante (neste caso: ${primary.code})</p> | |
| `; | |
| } else { | |
| compositeSection.classList.add('hidden'); | |
| } | |
| } | |
| function addToHistory(primaryType, secondaryType = null) { | |
| const primary = plasticTypes[primaryType]; | |
| const now = new Date(); | |
| const dateStr = now.toLocaleDateString() + ' ' + now.toLocaleTimeString(); | |
| const row = document.createElement('tr'); | |
| row.className = 'hover:bg-gray-50'; | |
| row.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${dateStr}</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-5 w-5 rounded-full ${primary.color} mr-2"></div> | |
| <div class="text-sm font-medium text-gray-900">${primary.code}</div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${primary.name}</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${primary.recyclable ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}"> | |
| ${primary.recyclable ? 'Reciclável' : 'Não reciclável'} | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$${primary.value.toFixed(2)}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-green-600 hover:text-green-900 mr-3">Ver</button> | |
| <button class="text-red-600 hover:text-red-900">Excluir</button> | |
| </td> | |
| `; | |
| historyBody.prepend(row); | |
| } | |
| function confirmIdentification() { | |
| alert("Identificação confirmada. O sistema aprenderá com esta informação."); | |
| // In a real app, this would send feedback to the ML model | |
| } | |
| function showCorrectionModal() { | |
| correctionModal.classList.remove('hidden'); | |
| } | |
| function hideCorrectionModal() { | |
| correctionModal.classList.add('hidden'); | |
| } | |
| function toggleSecondaryMaterial(e) { | |
| if (e.target.value === 'yes') { | |
| secondaryMaterialContainer.classList.remove('hidden'); | |
| } else { | |
| secondaryMaterialContainer.classList.add('hidden'); | |
| } | |
| } | |
| function saveCorrection() { | |
| const primaryType = materialSelect.value; | |
| const isComposite = document.querySelector('input[name="composite"]:checked').value === 'yes'; | |
| const secondaryType = isComposite ? secondaryMaterialSelect.value : null; | |
| displayMaterialInfo(primaryType, secondaryType); | |
| hideCorrectionModal(); | |
| // Update history with corrected information | |
| const firstRow = historyBody.querySelector('tr'); | |
| if (firstRow) { | |
| historyBody.removeChild(firstRow); | |
| addToHistory(primaryType, secondaryType); | |
| } | |
| } | |
| </script> | |
| <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/s2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |