Serifu.org is an open source language learning tool based on the idea that it’s easier to learn a language through something you’re interested in. Search over 300,000 quotes from video games to see how an English word or idiom appears in its Japanese translation or vice versa, using machine learning to highlight the relevant part of the translation. Inspired by Tatoeba and Reverso Context.
I started this project after realizing that, after going to the arcade nearly every day for a month to play Kancolle, I’d learned words like 魚雷 and 軽空母 before I even knew the word for “sun.” Turns out, Zuihou is a better language teacher than any textbook!
-
Serifu.Importer.Skyrim — Accounts for about 25% of the codebase. One could argue it's the star of the show considering how much effort went into figuring out a way to associate dialogue with NPCs in order to properly attribute quotes (it's surprisingly complicated).
-
Serifu.Importer.Generic — A modular framework that allows for rapid development of importers centered on parsing file formats. Adds quotes from Kirikiri and CatSystem2-based visual novels as well as The Witcher 3: Wild Hunt and Baldur's Gate 3 (links to their respective notes).
-
Serifu.Importer.Kancolle — Extracts quotes from the wiki. I've been able to contribute a number of fixes back to the wiki thanks to its validation checks and the ability to query the data afterwards.
-
Serifu.ML — The “matching word highlighting” shown below is accomplished using word alignment which you can read about and try for yourself here:
When displaying results, the highlighted search terms are compared against precomputed alignments. If an alignment's search-language-side intersects with the highlight, its translation-language-side is also highlighted:
Run
docker run -it --rm -p 5000:5000 kagamine/word-alignment-demoto fire up the interactive visualizer (non-docker instructions in the above link) then click here to load in this quote.The Serifu.ML library is a C# implementation of that proof of concept and uses Python.NET, which I found rather interesting as it allows for executing Transformers/PyTorch in-process by directly interoping with the CPython runtime (also quite possibly the only appropriate use of the
dynamickeyword I've encountered).
-
Serifu.Web — Built using ASP.NET Core, Razor, TypeScript, and Vite. While I tend to work on React and Angular projects these days, I deliberately went old-school with MVC for this one in the interest of keeping it simple. That said, there are a number of modern web platform features in use here. Some interesting parts:
Notes popup and link menu implemented with zero JavaScript using HTML popovers and anchor positioning:
Cross-document view transitions conceal the full page navigation and make the app feel like a SPA despite being built like a regular website:
Use of CSS grids for an adaptive mobile layout;
Meticulous background size & position calculation using (bi)linear interpolation to keep Rin in frame and below the header (which also smoothly interpolates, as opposed to fixed breakpoints):
And a slick search box loading animation:
Copyright © Max Kagamine
The programs in this repo are free software: you can redistribute and/or modify them under the terms of version 3 of the GNU Affero General Public License as published by the Free Software Foundation.
These programs are distributed in the hope that they will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.