init

.gitignore

@@ -0,0 +1,163 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+Pipfile
+Pipfile.lock

Dockerfile

@@ -0,0 +1,22 @@
+FROM python:3.11
+
+WORKDIR /code
+
+COPY ./requirements.txt /code/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+COPY . .
+
+RUN useradd -m -u 1000 user
+
+USER user
+
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+WORKDIR $HOME/app
+
+COPY --chown=user . $HOME/app
+
+CMD ["uvicorn", "server.app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,10 +1,26 @@
 ---
-title: Hiragana Handwriting App
-emoji: 📈
-colorFrom: purple
-colorTo: purple
+title: hiragana-handwriting-app
+emoji: 🏯
+colorFrom: blue
+colorTo: black
 sdk: docker
 pinned: false
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+# Handwriting Hiragana Quiz
+
+## Description
+
+This web application consists of a type of quiz where the user can pick a hiragana character and write it on the screen. The application will then check if the character is correct or not.
+
+The code was originally placed on GitHub [here](https://github.com/Detopall/handwriting-hiragana). This Hugging Face Spaces repository was created to host the application on Hugging Face Spaces.
+
+## Data
+
+The data used for this project is a dataset of hiragana characters. This dataset can be found [here](https://github.com/rois-codh/kmnist). The dataset contains 48 different hiragana characters (with one extra character that is not used in production).
+
+## Usage
+
+To use the application you will need to select a hiragana character from one of the boxes, then you will need to write the character on the screen. After you finish writing the character, the application will check if the character is correct or not.

app.py

@@ -0,0 +1,81 @@
+import tensorflow as tf
+from PIL import Image
+import numpy as np
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+import io
+import base64
+import uvicorn
+from fastapi.middleware.cors import CORSMiddleware
+import pydantic
+
+app = FastAPI()
+
+# Add CORS middleware
+app.add_middleware(
+	CORSMiddleware,
+	allow_origins=["*"],
+	allow_methods=["*"],
+	allow_headers=["*"]
+)
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+@app.get("/")
+def read_root():
+	return FileResponse("static/index.html")
+
+# Load the model
+model = tf.keras.models.load_model('model/k49_model.h5')
+
+class ImageRequest(pydantic.BaseModel):
+	image: str
+	label: int
+
+@app.post("/api/predict")
+def predict(request: dict):
+	image = request["image"]
+	label = request["label"]
+		
+	# Decode base64-encoded image
+	image_bytes = base64.b64decode(image["image"].split(",")[1])
+
+	# Convert image to preprocessed numpy array and save image to server
+	X = preprocess(image_bytes)
+	image = Image.fromarray(X[0].reshape(28, 28) * 255).convert("RGB")
+	
+	image.save("image.png")
+
+	# Make prediction using the model
+	prediction = model.predict(X)
+	# Convert prediction to integer
+	prediction = int(np.argmax(prediction))
+
+	print("label: ", label)
+	print("prediction: ", prediction)
+
+	return {'prediction': prediction == int(label)}
+
+
+def preprocess(image_bytes):
+	# Decode base64-encoded image and convert to PIL Image object
+	img = Image.open(io.BytesIO(image_bytes))
+	# Convert transparent background to white
+	if img.mode == 'RGBA':
+		img.load()
+		background = Image.new('RGB', img.size, (255, 255, 255))
+		background.paste(img, mask=img.split()[3])
+		img = background
+	# Convert to grayscale
+	img = img.convert('L')
+	# Invert colors to black background with white numbers
+	img = np.invert(np.array(img))
+	# Resize image to 28x28 pixels
+	img = Image.fromarray(img).resize((28, 28))
+	# Convert image to numpy array and normalize pixel values
+	X = np.array(img).reshape(1, 28, 28, 1) / 255
+	return X
+
+if __name__ == '__main__':
+	uvicorn.run('app:app', host='localhost', port=8000, reload=True)

data/k49-test-imgs.npz

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1de2476bb29ed1a12a2424e6724349f7519f6f39d112848aea6aa9c21eeaf594
+size 10971201

data/k49-test-labels.npz

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:299be30ea32c2cc69318f5a5a579ffbffb0a6a1ccff134fb0ca834cd525ad6af
+size 27450

data/k49-train-imgs.npz

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1c42adc463ed8efe598cf002f6ecafbca6d8c38f0551f7a35e0b23755fca1c8d
+size 66117696

data/k49-train-labels.npz

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fbfef4750ce9aa70b6072f0bca7daa9e80e2d79b379d5ae923265a63396260e4
+size 164485

data/k49_classmap.csv

@@ -0,0 +1,50 @@
+index,codepoint,char
+0,U+3042,あ
+1,U+3044,い
+2,U+3046,う
+3,U+3048,え
+4,U+304A,お
+5,U+304B,か
+6,U+304D,き
+7,U+304F,く
+8,U+3051,け
+9,U+3053,こ
+10,U+3055,さ
+11,U+3057,し
+12,U+3059,す
+13,U+305B,せ
+14,U+305D,そ
+15,U+305F,た
+16,U+3061,ち
+17,U+3064,つ
+18,U+3066,て
+19,U+3068,と
+20,U+306A,な
+21,U+306B,に
+22,U+306C,ぬ
+23,U+306D,ね
+24,U+306E,の
+25,U+306F,は
+26,U+3072,ひ
+27,U+3075,ふ
+28,U+3078,へ
+29,U+307B,ほ
+30,U+307E,ま
+31,U+307F,み
+32,U+3080,む
+33,U+3081,め
+34,U+3082,も
+35,U+3084,や
+36,U+3086,ゆ
+37,U+3088,よ
+38,U+3089,ら
+39,U+308A,り
+40,U+308B,る
+41,U+308C,れ
+42,U+308D,ろ
+43,U+308F,わ
+44,U+3090,ゐ
+45,U+3091,ゑ
+46,U+3092,を
+47,U+3093,ん
+48,U+309D,ゝ

model/k49_model.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fa72f71c814c845a8324d25977e78a99a6d745a1bec3336c9e07ed0e2d18baf7
+size 5779560

static/hiragana.json

@@ -0,0 +1,50 @@
+{
+	"A": 0,
+	"I": 1,
+	"U": 2,
+	"E": 3,
+	"O": 4,
+	"KA": 5,
+	"KI": 6,
+	"KU": 7,
+	"KE": 8,
+	"KO": 9,
+	"SA": 10,
+	"SHI": 11,
+	"SU": 12,
+	"SE": 13,
+	"SO": 14,
+	"TA": 15,
+	"CHI": 16,
+	"TSU": 17,
+	"TE": 18,
+	"TO": 19,
+	"NA": 20,
+	"NI": 21,
+	"NU": 22,
+	"NE": 23,
+	"NO": 24,
+	"HA": 25,
+	"HI": 26,
+	"FU": 27,
+	"HE": 28,
+	"HO": 29,
+	"MA": 30,
+	"MI": 31,
+	"MU": 32,
+	"ME": 33,
+	"MO": 34,
+	"YA": 35,
+	"YU": 36,
+	"YO": 37,
+	"RA": 38,
+	"RI": 39,
+	"RU": 40,
+	"RE": 41,
+	"RO": 42,
+	"WA": 43,
+	"WI": 44,
+	"WE": 45,
+	"WO": 46,
+	"N": 47
+}

static/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="stylesheet" href="/static/styles.css" />
+		<script src="/static/script.js" defer></script>
+		<title>Hiragana Prediction</title>
+	</head>
+	<body>
+		<h1>Hiragana Prediction</h1>
+		<a href="https://github.com/Detopall/handwriting-hiragana">GitHub</a>
+		<button id="showModalBtn" class="btn">Show Cheat Sheet</button>
+		<dialog id="modal">
+			<img src="/static/hiragana-characters.png" alt="Cheat Sheet" />
+			<button id="closeModalBtn" class="btn">Close</button>
+		</dialog>
+		<div id="hiraganaBoxes"></div>
+		<canvas id="canvas" width="350" height="350"></canvas>
+		<button id="clearCanvasBtn" class="btn">Clear Canvas</button>
+		<button id="checkPredictionBtn" class="btn">Check Prediction</button>
+		<button id="clearSavesBtn" class="btn">Clear Saves</button>
+		<p id="predictionResult"></p>
+	</body>
+</html>

static/script.js

@@ -0,0 +1,166 @@
+"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";
+			}
+		}
+	});
+}

static/styles.css

@@ -0,0 +1,87 @@
+body {
+	font-family: Arial, sans-serif;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+}
+
+h1 {
+	margin-bottom: 20px;
+}
+
+a {
+	color: #007bff;
+}
+
+#hiraganaBoxes {
+	display: grid;
+	grid-template-columns: repeat(10, 1fr);
+	grid-gap: 10px;
+	margin: 20px 0;
+}
+
+.hiraganaBox {
+	border: 1px solid #333;
+	padding: 10px;
+	margin: 0 10px;
+	cursor: pointer;
+	border-radius: 0.5rem;
+	font-weight: bold;
+	width: 2rem;
+	text-align: center;
+}
+
+.hiraganaBox:hover {
+	background-color: lightblue;
+}
+
+.hiraganaBox.selected {
+	background-color: rgb(106, 96, 250);
+}
+
+#canvas {
+	border: 1px solid #333;
+	display: block;
+	margin: 0 auto 20px;
+	border-radius: 0.5rem;
+}
+
+.btn {
+	background-color: #007bff;
+	border: none;
+	color: #fff;
+	padding: 10px 20px;
+	font-size: 16px;
+	cursor: pointer;
+	margin: 0.5rem 0;
+	border-radius: 5px;
+}
+
+.btn:hover {
+	background-color: #0056b3;
+}
+
+#predictionResult {
+	margin-top: 20px;
+	font-size: 18px;
+}
+
+dialog {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background-color: white;
+	border: 1px solid #333;
+	padding: 20px;
+}
+
+dialog img {
+	max-width: 100%;
+	height: auto;
+}
+
+dialog button {
+	margin-top: 10px;
+}