UNPKG

@edumedia/handwriting-character-recognition

Version:

Tool to recognize handwritten characters

52 lines (37 loc) 1.8 kB
## Handwriting Character Recognition Used to analyze answers to math questions, currently built to recognize the following characters: `0, 1, 2, 3, 4, 5, 6, 7, 8, 9, <, >, =`. For our app purpose: - Numbers can be recognized as a group, like `1234` - Operators can only be identified when drawn individually ### Install ```bash npm i @edumedia/handwriting-character-recognition ``` ### Usage Download the LibData from the [main repo](https://gitlab.com/edumedia/handwriting-character-recognition)'s `public/data.json` and make it available in your app at `/data.json` (for example in your public folder). You can also specify the path from which the data will be loaded when you initialize the `DrawingAnalyzer`: ```ts const drawingAnalyzer = new DrawingAnalyzer({dataPath: "my-data-path"}) ``` When you have your data ready, import the `DrawingAnalyzer`, give it a `CharacterDrawing` and do what you want with the result. ```ts import { DrawingAnalyzer, type CharacterDrawing } from "@edumedia/handwriting-character-recognition" // Create your DrawingAnalyzer instance const drawingAnalyzer = new DrawingAnalyzer() // Initialize a drawing const userDrawing: CharacterDrawing = { id: "user", // id is used internaly when processing our data, you can write anything here strokes: [], strokeWidth: 10, // Since we analyze points, we need the strokeWidth to see if two lines are touching // Dimention of the canvas on which the strokes are drawn width: 280, height: 280, }; // Let your user fill `userDrawing.strokes` with a great UI // Analyze the drawing const analyzerResult = drawingAnalyzer.analyze(userDrawing) // Do something with the result console.log(analyzerResult.characterString) ``` #### [Live example](https://handwriting-character-recognition-35f721.gitlab.io/)