const classificationEndpoint = "https://fatma23457-minima.hf.space/api/predict";

let currentDataUrl = null; 

function dataUrlFromFile(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (event) => {
            resolve(event.target.result);
        };
        reader.readAsDataURL(file);
    });
}

// إرسال الصورة للسيرفر
function classifyImage(dataUrl) {
    const jsonData = {"data": [dataUrl],"fn_index": 0 };
    const jsonDataString = JSON.stringify(jsonData);
    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    const request = new Request(classificationEndpoint, {
        method: 'POST',
        headers: headers,
        body: jsonDataString
    });
    return fetch(request).then(response => response.json());
}

function formatAsPercentage(number, digits) {
    return (number * 100).toFixed(digits) + "%";
}

function formatPredictionText(prediction) {
    try {
        const predictionData = prediction.data[0];
        const confidence = predictionData.confidences[0]['confidence'];
        return `${predictionData.label}: ${formatAsPercentage(confidence, 2)} confidence`;
    } catch (e) {
        return "Prediction complete!";
    }
}

const selectElement = document.getElementById('image-file');
const submitBtn = document.getElementById('submit-btn');

selectElement.addEventListener('change', (event) => {
    const files = event.target.files;
    if (files.length > 0) {
        const file = files[0];
        
        dataUrlFromFile(file).then((dataUrl) => {
            currentDataUrl = dataUrl; 
            document.getElementById('image-preview').src = dataUrl; 
            document.getElementById('prediction-text').innerText = "Image loaded. Ready to classify!";
            submitBtn.disabled = false; 
        });
    }
});

submitBtn.addEventListener('click', () => {
    if (!currentDataUrl) return;

    document.getElementById('prediction-text').innerText = "Classifying... Please wait...";
    submitBtn.disabled = true; 

    classifyImage(currentDataUrl)
        .then((prediction) => {
            console.log(prediction);
            document.getElementById('prediction-text').innerText = formatPredictionText(prediction);
            submitBtn.disabled = false;
        })
        .catch((error) => {
            console.error("Error:", error);
            document.getElementById('prediction-text').innerText = "Failed to connect to API. Is your Space running?";
            submitBtn.disabled = false;
        });
});