const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const resultP = document.getElementById('result');
const captureButton = document.getElementById('capture');
let classifier;

// Load the pre-trained model from Huggingface
classifier = ml5.imageClassifier('lcNO3nb0s', modelReady);

function modelReady() {
    console.log('Model Loaded!');
}

// Access the camera
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) {
    // Dummy data for demonstration purposes
    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)';
    }
}