static/script.js

"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";
			}
		}
	});
}