let classifier;
let imageElement = document.getElementById('image');
let resultElement = document.getElementById('result');
let chart;
function setup() {
classifier = ml5.imageClassifier('MobileNet', modelLoaded);
}
function modelLoaded() {
console.log('Model Loaded!');
}
document.getElementById('file-input').addEventListener('change', handleFileSelect);
function handleFileSelect(event) {
let file = event.target.files[0];
if (file) {
let reader = new FileReader();
reader.onload = function (e) {
imageElement.src = e.target.result;
imageElement.style.display = 'block';
imageElement.onload = function () {
classifyImage();
};
};
reader.readAsDataURL(file);
}
}
function classifyImage() {
console.log('Classifying image...');
classifier.classify(imageElement)
.then(results => {
console.log('Classification results:', results);
if (results && results.length > 0) {
let highestConfidenceResult = results.reduce((max, result) =>
result.confidence > max.confidence ? result : max,
{ label: '', confidence: 0 }
);
resultElement.innerText =
`Label: ${highestConfidenceResult.label}\nConfidence: ${(highestConfidenceResult.confidence * 100).toFixed(2)}%`;
displayResults(results);
} else {
resultElement.innerText = 'No classification results.';
}
})
.catch(error => {
console.error('Classification error:', error);
resultElement.innerText = 'Error classifying image.';
});
}
function displayResults(results) {
if (chart) {
chart.destroy();
}
const labels = results.map(result => result.label);
const data = results.map(result => result.confidence * 100);
const ctx = document.getElementById('resultChart').getContext('2d');
chart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Confidence (%)',
data: data,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Confidence (%)',
font: {
size: 16
}
},
ticks: {
font: {
size: 14
}
}
},
x: {
title: {
display: true,
text: 'Labels',
font: {
size: 16
}
},
ticks: {
font: {
size: 14
}
}
}
},
plugins: {
legend: {
labels: {
font: {
size: 16
}
}
}
}
}
});
}
setup();