Hugging Face's logo

Spaces:
musk12
/
Food-Image-Retrieval-AI
Sleeping

App Files Community
Food-Image-Retrieval-AI
File size: 5,276 Bytes
b3236cd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69149b2
b3236cd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69149b2
b3236cd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
94c5a5c
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
console.log("SCRIPT LOADED");
document.addEventListener("DOMContentLoaded", function () {

    const imageInput = document.getElementById("imageInput");
    const preview = document.getElementById("preview");
    const searchBtn = document.getElementById("searchBtn");
    const maeBtn = document.getElementById("maeBtn");

    // IMAGE PREVIEW
    imageInput.addEventListener("change", function () {
        console.log("image selected");
        const file = this.files[0];
        if (!file) return;

        const img = document.createElement("img");
        img.src = URL.createObjectURL(file);
        img.style.width = "100%";
        img.style.height = "100%";
        img.style.objectFit = "cover";

        preview.innerHTML = "";
        preview.appendChild(img);
    });

    // SEARCH BUTTON
    searchBtn.addEventListener("click", uploadImage);
    maeBtn.addEventListener("click", runMAE);

});

// IMAGE UPLOAD + SEARCH

async function uploadImage() {

    const input = document.getElementById("imageInput");
    const statusDiv = document.getElementById("status");
    const resultsDiv = document.getElementById("results");
    const maeResults = document.getElementById("maeResults");
    const similarSection = document.getElementById("similarSection");
    const maeSection = document.getElementById("maeSection");

    // Hide combined title
    document.getElementById("combinedTitle").style.display = "none";

    // Show section title for similar images
    document.getElementById("similarTitle").style.display = "block";
    document.getElementById("maeTitle").style.display = "none";

    // CLEAR MAE RESULTS when doing search
    maeResults.innerHTML = "";
    resultsDiv.innerHTML = "";

    if (!input.files.length) {
        alert("Please select an image!");
        return;
    }

    const file = input.files[0];
    const formData = new FormData();
    formData.append("file", file);

    statusDiv.innerHTML = "Processing...";

    try {
        const response = await fetch("https://musk12-food-image-retrieval-ai.hf.space/upload", {
            method: "POST",
            body: formData
        });

        if (!response.ok) throw new Error("Server error");

        const data = await response.json();

        resultsDiv.innerHTML = "";

        data.results.forEach(item => {

            const card = document.createElement("div");
            card.className = "result-card";

            const img = document.createElement("img");
            img.src = item.image;

            const score = document.createElement("div");
            score.className = "score";
            score.innerText = `${item.label} | ${item.score}`;

            card.appendChild(img);
            card.appendChild(score);

            resultsDiv.appendChild(card);

        });

        statusDiv.innerHTML = `✅ Found ${data.results.length} similar images`;

    } catch (err) {
        console.error("UPLOAD ERROR:", err);
        statusDiv.innerHTML = "❌ Error while uploading image!";
    }
}


// MAE Reconstruction
async function runMAE() {
    const similarSection = document.getElementById("similarSection");
    const maeSection  = document.getElementById("maeSection");
    const input = document.getElementById("imageInput");
    const maeResults = document.getElementById("maeResults");
    const resultsDiv = document.getElementById("results");
    const statusDiv = document.getElementById("status");

    // Hide combined title
    document.getElementById("combinedTitle").style.display = "none";

    // Show section title for MAE
    document.getElementById("similarTitle").style.display = "none";
    document.getElementById("maeTitle").style.display = "block";

    // CLEAR previous results
    resultsDiv.innerHTML = "";
    maeResults.innerHTML = "";

    if (!input.files.length) {
        alert("Please select an image!");
        return;
    }

    const file = input.files[0];
    const formData = new FormData();
    formData.append("file", file);

    statusDiv.innerHTML = "Running MAE reconstruction...";

    try {
        const response = await fetch("https://musk12-food-image-retrieval-ai.hf.space/predict", {
            method: "POST",
            body: formData
        });

        if (!response.ok) throw new Error("Server error");

        const data = await response.json();

        const images = [
            {title: "Original", img: data.original_image},
            {title: "Reconstructed", img: data.reconstructed_image},
            {title: "MAE Output", img: data.mae_output_image}
        ];

        images.forEach(item => {
            const card = document.createElement("div");
            card.className = "result-card";

            const img = document.createElement("img");
            img.src = `data:image/png;base64,${item.img}`;

            const label = document.createElement("div");
            label.className = "score";
            label.innerText = item.title;

            card.appendChild(img);
            card.appendChild(label);

            maeResults.appendChild(card);
        });

        statusDiv.innerHTML = "✅ MAE reconstruction completed";

    } catch (err) {
        console.error("MAE ERROR:", err);
        statusDiv.innerHTML = "❌ Error running MAE";
    }
}