DenisT's picture
init
7291333
"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";
}
}
});
}