static/app.js

async function predict() {
    const input = document.getElementById("imageInput");
    const preview = document.getElementById("previewImage");
    const result = document.getElementById("resultText");

    if (!input.files.length) {
        alert("Select a captcha image");
        return;
    }

    const file = input.files[0];
    preview.src = URL.createObjectURL(file);
    preview.style.display = "block";

    result.innerText = "Reading captcha...";

    const formData = new FormData();
    formData.append("file", file);

    try {
        const res = await fetch("/predict", {
            method: "POST",
            body: formData
        });

        const data = await res.json();

        // ✅ SHOW TEXT + CONFIDENCE HERE
        result.innerText = `${data.text} (conf: ${data.confidence})`;

    } catch (e) {
        console.error(e);
        result.innerText = "Prediction failed";
    }
}