"use strict"; const checkPredictionBtn = document.getElementById("checkPredictionBtn"); checkPredictionBtn.addEventListener("click", checkPrediction); const clearCanvasBtn = document.getElementById("clearCanvasBtn"); clearCanvasBtn.addEventListener("click", clearCanvas); const showModalBtn = document.getElementById("showModalBtn"); const modal = document.getElementById("modal"); const closeModalBtn = document.getElementById("closeModalBtn"); const clearSavesBtn = document.getElementById("clearSavesBtn"); clearSavesBtn.addEventListener("click", () => { localStorage.removeItem("predictions"); loadPredictions(); // clear the colors of the boxes const hiraganaBoxes = document.querySelectorAll(".hiraganaBox"); hiraganaBoxes.forEach(box => { box.style.backgroundColor = ""; }); }); showModalBtn.addEventListener("click", () => modal.showModal()); closeModalBtn.addEventListener("click", () => modal.close()); loadHiraganaData(); // load hiragana data from json file async function loadHiraganaData() { let hiraganaData = {}; await fetch("/static/hiragana.json") .then((response) => response.json()) .then((data) => { hiraganaData = data; const hiraganaBoxes = document.getElementById("hiraganaBoxes"); for (const letter in hiraganaData) { const box = document.createElement("div"); box.classList.add("hiraganaBox"); box.textContent = letter; box.dataset.label = hiraganaData[letter]; hiraganaBoxes.appendChild(box); } }) .catch((error) => { console.error("Hiragana data request error:", error); }); loadPredictions(); } async function sendPrediction(label, image) { try { const response = await fetch("/api/predict", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ image: { image: image }, label: label, }), }); const data = await response.json(); handlePrediction(label, data.prediction); savePrediction(label, data.prediction); } catch (error) { console.error("Prediction request error:", error); } loadPredictions(); } function handlePrediction(label, prediction) { const predictionResultElement = document.getElementById("predictionResult"); const selectedBox = document.querySelector(`.hiraganaBox[data-label="${label}"]`); if (prediction) { predictionResultElement.textContent = "Correct prediction!"; selectedBox.style.backgroundColor = "green"; } else { predictionResultElement.textContent = "Incorrect prediction!"; selectedBox.style.backgroundColor = "red"; } } const canvas = document.getElementById("canvas"); if (canvas) { canvas.addEventListener("mousedown", function (e) { startDrawing(e); }); } function startDrawing(e) { canvas.addEventListener("mousemove", handleDrawing); canvas.addEventListener("mouseup", function () { stopDrawing(); }); } function stopDrawing() { canvas.removeEventListener("mousemove", handleDrawing); } function handleDrawing(e) { const ctx = canvas.getContext("2d"); ctx.lineWidth = 25; ctx.lineCap = "round" ctx.lineJoin = "round" ctx.strokeStyle = "#000" const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; ctx.fillStyle = "#000"; ctx.beginPath(); ctx.arc(x, y, 5, 0, Math.PI * 2); ctx.fill(); } function clearCanvas() { const ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); } function checkPrediction() { const canvas = document.getElementById("canvas"); if (!canvas) return; const image = canvas.toDataURL("image/png"); const selectedCharacter = document.querySelector(".hiraganaBox.selected").dataset.label; sendPrediction(selectedCharacter, image); } // Event delegation for selecting hiragana boxes document.addEventListener("click", (e) => { const hiraganaBoxes = document.querySelectorAll(".hiraganaBox"); hiraganaBoxes.forEach(box => { box.classList.remove("selected"); }); if (e.target.classList.contains("hiraganaBox")) { e.target.classList.add("selected"); } }); function savePrediction(label, prediction) { const predictions = JSON.parse(localStorage.getItem("predictions")) || []; // remove the old prediction if it exists const updatedPredictions = predictions.filter(p => p.label !== label); updatedPredictions.push({ label, prediction }); localStorage.setItem("predictions", JSON.stringify(updatedPredictions)); } function loadPredictions() { const predictions = JSON.parse(localStorage.getItem("predictions")) || []; // color the boxes based on the predictions const hiraganaBoxes = document.querySelectorAll(".hiraganaBox"); hiraganaBoxes.forEach(box => { const prediction = predictions.find(p => p.label === box.dataset.label); if (prediction) { if (prediction.prediction) { box.style.backgroundColor = "green"; } else { box.style.backgroundColor = "red"; } } }); }