课猫 Echo
Practice English or Chinese. The first visit opens on the cat. Tap the cat or Start, and that screen stays dismissed (remembered in this browser). Practice then uses a short bar — language, Practice / Translate, and the settings gear — so the card, Hear it / Say it, and the score stay on screen. Settings can show the cat again. One card at a time: the line you say is large, and the meaning sits underneath in a quieter color. Swipe the card, tap the side arrows, or use the arrow keys to move inside the open pack. Packs (office, taxi / 打车, Meituan, and the rest) open from Packs · 选一组, not as a list of every sentence. Cards rotate through a small paper palette so the line you are on stays easy to see. WeChat, browser, and voice-model notices sit at the bottom of the page. The language toggle is remembered in this browser.
English practice stays in the office: meetings, email, the factory, quality, and order documents. Chinese practice is for AYK work — orders, invoices, shipping documents, minutes, HR notices, drawings — plus Meituan delivery, Didi taxi rides, and class sets for tea-house ordering, online shopping, in-store shopping, and the supermarket.
English also has an Office words pack (办公词汇) in the same pack picker. Each Shanghai day opens five words: due reviews first, then new ones, until the deck is in rotation. Flip a card for the Chinese meaning and one office example, tap Hear it (the device voice, since these are not sentence clips), say the word, or pick the meaning. The first time you finish a word that day — a clear Say it or the right meaning — it counts once toward the same five-clear day streak. Sentence packs are unchanged.
Chinese cards show tone-marked pinyin, one syllable at a time, so that is the line you read. English cards still show the English sentence. Hear it speaks the sentence — the Chinese clips are the characters. Say it listens, then marks the words you matched in English or the syllables you matched in Chinese. The score is still a count of those characters, not an accent percentage.
The cat is an original mascot. Not Talking Tom, and not Talking Tat.
Live sites:
How speech works
No paid API keys. Nothing is sent to Google Cloud, Azure, or OpenAI.
Say it runs quantized Whisper tiny in the browser with @xenova/transformers (ONNX, WebAssembly, one thread). The happy path does not call webkitSpeechRecognition or any other Google speech recognizer. The weights ship with this site under public/models/Xenova/whisper-tiny/. Say it does not download them from Hugging Face or hf-mirror.
- Vendored size is about 44 MB: quantized encoder
10,124,910 bytes, quantized merged decoder 30,727,765 bytes, plus tokenizer files (tokenizer.json is 2,480,466 bytes). That is the GitHub Pages payload for the model. The decoder stays under GitHub’s 50 MB file warning.
- Hear it does not wait for that download. The page starts loading the model immediately and the status line says Wait a moment — downloading the voice model… (and the same in 中文) until it is ready, with a percent when the sizes are known. You can still tap Hear it while that runs.
- Transformers.js loads those files from this origin (
/Echo/models/... on GitHub Pages, /models/... on Vercel) and stores them in the Cache API (transformers-cache). The next Say it reuses that cache, including after you install the app. Remote model hosts are disabled (allowRemoteModels is false).
- The service worker does not precache the ONNX files. The decoder is about 29 MB, above the 12 MB precache cap, so a phone is not forced to download the model just to install the app.
- The ONNX runtime is a single WASM thread, so GitHub Pages does not need cross-origin isolation. That is what lets Safari load it. The build copies
ort-wasm-simd.wasm and ort-wasm.wasm (about 10 MB together) into the site.
- Whisper tiny is the small multilingual model, on purpose, so phones can hold it. It will miss words, especially in Chinese. Misses are missing words or 字, marked on the pinyin syllables, not a fake accent score.
- If the copy on this site cannot be loaded, the status line says so in English and 中文 and says that Hear it still plays. Refresh and tap Say it to try again.
Chinese pinyin is pack data, not something the page builds. Each line in src/data/pack-zh.json has py (what you read) and zh (the characters). Hear it plays the Piper clip for that line, and if the clip cannot play the device voice speaks zh. Say it asks Whisper to transcribe Chinese and compares that transcript to zh, then paints the matching pinyin syllables. The cat's Chinese greeting is the same: py on src/data/intro.json is what you read, and the spoken line stays zh. npm run pinyin rewrites py with pinyin-pro (tone marks, neutral tone, and 一/不 sandhi) after a sentence edit. A few office words are overridden in that script — 重开, 公差, 超差, 起订量, 零点一, 送货单一起, 课猫 — and 这儿 is written zhèr. Class lines also override 买东西, 裙子, 华为, 试试, and 点儿.
Hear it plays a small pack of MP3s, about 3 MB for all 240 lines. They were made with free Piper voices:
- English:
en_US-lessac-medium (female, US)
- 中文:
zh_CN-huayan-medium (female, Mandarin)
Any browser that can play MP3 can speak the lines, including Safari, Edge, Chrome, and Firefox, on desktop and on a phone. The clips are a little slower than conversation (length_scale 1.05) so a class can hear each word.
以上為 README 的開頭部分。其餘內容請閱讀原文。 檢視完整 README ↗
