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