File size: 3,306 Bytes
143ee6d
4f7d02d
b4acb93
 
5785e79
b4acb93
3eb0f9c
b4acb93
 
 
 
64c756b
b4acb93
 
 
 
64c756b
 
b4acb93
64c756b
 
b4acb93
5e0a268
373c69a
75a3a54
b4acb93
1ee3be3
 
 
 
 
 
 
 
64c756b
b4acb93
 
 
373c69a
 
b4acb93
 
 
 
a23594f
 
 
b4acb93
d6ccfdf
b4acb93
 
 
373c69a
c308c06
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1ee3be3
d6ccfdf
 
 
 
 
 
 
 
 
1cfe758
 
 
 
 
 
 
 
d6ccfdf
 
 
 
1cfe758
b4acb93
 
 
 
 
 
 
 
 
 
373c69a
d6ccfdf
ed4d69b
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
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;
        });
}