static/script.js

let hsv = { hMin: 0, hMax: 0, sMin: 0, sMax: 0, vMin: 0, vMax: 0 };

function uploadPDF() {
    const file = document.getElementById('fileInput').files[0];
    const formData = new FormData();
    formData.append('file', file);

    fetch('/upload', { method: 'POST', body: formData })
        .then(res => res.json())
        .then(data => loadImage(data.image_path));
}

function loadImage(src) {
    const img = new Image();
    img.onload = function () {
        const canvas = document.getElementById('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
    };
    img.src = src;
}


document.getElementById("canvas").addEventListener("click", function (e) {
    const canvas = this;
    const rect = canvas.getBoundingClientRect();

    const scaleX = canvas.width / rect.width;
    const scaleY = canvas.height / rect.height;

    const x = Math.round((e.clientX - rect.left) * scaleX);
    const y = Math.round((e.clientY - rect.top) * scaleY);

    fetch('/click', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ x: x, y: y })
    })
        .then(res => res.json())
        .then(data => {
            document.getElementById('info').innerText = data.info;
            hsv = {
                hMin: data.hMin, hMax: data.hMax,
                sMin: data.sMin, sMax: data.sMax,
                vMin: data.vMin, vMax: data.vMax
            };
            updateHSVLabels();
            updateMask();
        });
});

document.getElementById("proceed-button").addEventListener("click", async function () {
  try {
    const response = await fetch("/proceed", {
      method: "POST",
    });
    const data = await response.json();
    console.log("Processing result:", data);

    // Optional: show the legend or stats in UI
    alert("Processing complete!\nLegend:\n" + data.legend.map(row => `${row["Column Type"]}: ${row.Count}`).join("\n"));

  } catch (error) {
    console.error("Error during proceed:", error);
  }
});

function updateHSVLabels() {
    document.getElementById('hMinVal').innerText = hsv.hMin;
    document.getElementById('hMaxVal').innerText = hsv.hMax;
    document.getElementById('sMinVal').innerText = hsv.sMin;
    document.getElementById('sMaxVal').innerText = hsv.sMax;
    document.getElementById('vMinVal').innerText = hsv.vMin;
    document.getElementById('vMaxVal').innerText = hsv.vMax;
}

function adjust(key, delta) {
    if (key === 'hMin') hsv.hMin = Math.max(0, hsv.hMin + delta);
    if (key === 'hMax') hsv.hMax = Math.min(179, hsv.hMax + delta);
    if (key === 'sMin') hsv.sMin = Math.max(0, hsv.sMin + delta);
    if (key === 'sMax') hsv.sMax = Math.min(255, hsv.sMax + delta);
    if (key === 'vMin') hsv.vMin = Math.max(0, hsv.vMin + delta);
    if (key === 'vMax') hsv.vMax = Math.min(255, hsv.vMax + delta);

    updateHSVLabels();
    updateMask();
}


function updateMask() {
    fetch('/update_mask', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(hsv)
    })
        .then(res => res.json())
        .then(data => {
            document.getElementById('segmented-img').src = data.image_path;
        });
}