|
const video = document.getElementById('video'); |
|
const canvas = document.getElementById('canvas'); |
|
const resultP = document.getElementById('result'); |
|
const captureButton = document.getElementById('capture'); |
|
let classifier; |
|
|
|
|
|
classifier = ml5.imageClassifier('lcNO3nb0s', modelReady); |
|
|
|
function modelReady() { |
|
console.log('Model Loaded!'); |
|
} |
|
|
|
|
|
navigator.mediaDevices.getUserMedia({ video: true }) |
|
.then(stream => { |
|
video.srcObject = stream; |
|
}) |
|
.catch(err => { |
|
console.error('Error accessing the camera: ', err); |
|
}); |
|
|
|
captureButton.addEventListener('click', () => { |
|
const context = canvas.getContext('2d'); |
|
context.drawImage(video, 0, 0, canvas.width, canvas.height); |
|
classifyImage(); |
|
}); |
|
|
|
function classifyImage() { |
|
classifier.classify(canvas, (err, results) => { |
|
if (err) { |
|
console.error(err); |
|
return; |
|
} |
|
const jellyType = results[0].label; |
|
const sugarLevel = getSugarLevel(jellyType); |
|
const hazard = getHazardLevel(sugarLevel); |
|
resultP.textContent = `Jelly Type: ${jellyType}, Sugar Level: ${sugarLevel}, Hazard: ${hazard}`; |
|
}); |
|
} |
|
|
|
function getSugarLevel(jellyType) { |
|
|
|
const sugarData = { |
|
'jellyA': 10, |
|
'jellyB': 20, |
|
'jellyC': 30 |
|
}; |
|
return sugarData[jellyType] || 0; |
|
} |
|
|
|
function getHazardLevel(sugarLevel) { |
|
if (sugarLevel > 25) { |
|
return 'Red (High Hazard)'; |
|
} else if (sugarLevel > 15) { |
|
return 'Yellow (Moderate Hazard)'; |
|
} else { |
|
return 'Green (Low Hazard)'; |
|
} |
|
} |
|
|