Hugging Face's logo

Spaces:
swatinegi21
/
material-vision-detective
Running

App Files Community
material-vision-detective / script.js
swatinegi21's picture
swatinegi21
import streamlit as st
5250e0d verified
Raw History Blame Contribute Delete
4.19 kB
document.addEventListener('DOMContentLoaded', function() {
// DOM Elements
const fileUpload = document.getElementById('file-upload');
const previewImage = document.getElementById('preview-image');
const previewPlaceholder = document.getElementById('preview-placeholder');
const previewSection = document.getElementById('preview-section');
const analyzeBtn = document.getElementById('analyze-btn');
const resultsContainer = document.getElementById('results-container');
const resultsTable = document.getElementById('results-table');
const topPrediction = document.getElementById('top-prediction');
// Handle file upload
fileUpload.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(event) {
previewImage.src = event.target.result;
previewImage.classList.remove('hidden');
previewPlaceholder.classList.add('hidden');
previewSection.classList.remove('hidden');
resultsContainer.classList.add('hidden');
}
reader.readAsDataURL(file);
}
});
// Simulate analysis (in a real app, this would call your API)
analyzeBtn.addEventListener('click', function() {
// Show loading state
analyzeBtn.innerHTML = '<div class="loader"></div>';
analyzeBtn.disabled = true;
// Simulate API call delay
setTimeout(function() {
// Mock results
const mockResults = [
{ material: 'Cotton', confidence: 92.5 },
{ material: 'Polyester', confidence: 7.1 },
{ material: 'Wool', confidence: 0.4 },
{ material: 'Silk', confidence: 0.0 }
];
// Display results
displayResults(mockResults);
// Reset button
analyzeBtn.innerHTML = '<i data-feather="search" class="w-5 h-5"></i> Analyze Material';
analyzeBtn.disabled = false;
feather.replace();
}, 2000);
});
// Display results in the UI
function displayResults(results) {
// Show results container
resultsContainer.classList.remove('hidden');
// Set top prediction
topPrediction.innerHTML = `Top Prediction: <strong>${results[0].material}</strong> (${results[0].confidence.toFixed(1)}%)`;
// Clear previous results
resultsTable.innerHTML = '';
// Add each result to the table
results.forEach(result => {
const row = document.createElement('tr');
const materialCell = document.createElement('td');
materialCell.className = 'py-3 px-4';
materialCell.textContent = result.material;
const confidenceCell = document.createElement('td');
confidenceCell.className = 'py-3 px-4';
const confidenceBar = document.createElement('div');
confidenceBar.className = 'flex items-center gap-2';
const barContainer = document.createElement('div');
barContainer.className = 'flex-1 bg-gray-200 rounded-full h-2.5';
const bar = document.createElement('div');
bar.className = 'bg-primary-500 h-2.5 rounded-full';
bar.style.width = `${result.confidence}%`;
const percentage = document.createElement('span');
percentage.className = 'text-sm text-gray-600';
percentage.textContent = `${result.confidence.toFixed(1)}%`;
barContainer.appendChild(bar);
confidenceBar.appendChild(barContainer);
confidenceBar.appendChild(percentage);
confidenceCell.appendChild(confidenceBar);
row.appendChild(materialCell);
row.appendChild(confidenceCell);
resultsTable.appendChild(row);
});
// Refresh feather icons
feather.replace();
}
});