By Muralla
Reading Guide — a Filipino reading companion built for every student, engineered for those who need it most.
Four tools. One URL. No login. No install. Works in any browser, on any connection, for any Filipino student who needs help reading.
The Problem
Think about a Grade 7 student. She's reading a science textbook on her older brother's phone with a prepaid data plan. She has an undiagnosed reading difficulty. The textbook is in a language she can speak but struggles to read. The apps her teacher recommended are built for high-speed internet and require complex setups.
She has no accessible tools tailored for her local curriculum that work seamlessly in both English and Filipino.
GabAI-Basa addresses both gaps at once: a browser-based reading companion that works on slow connections for English and Filipino text, and an open-source speech dataset that researchers can actually use.
Who It's For
Primary: Filipino student, Grades 5–10, who struggles with reading fluency or encounters academic text in an unfamiliar language. Every design decision is tested first against: does this work for a student with dyslexia?
Secondary: Any student who wants text read aloud, a summary, or a quick word lookup. Teachers who want a low-setup reading tool — open the URL, hand the phone to the student.
UN SDG #4 Alignment
GabAI-Basa is directly engineered to advance the UN's Sustainable Development Goal #4 by targeting foundational literacy gaps in the Philippine public education sector:
Regional students frequently fall behind due to a lack of learning materials. By introducing bilingual text-to-speech and AI content simplification, we democratize access to quality study tools regardless of geography or socioeconomic background.
Traditional software widely overlooks neurodivergent learners. Our application places cognitive accessibility at the forefront—incorporating OpenDyslexic fonts and high-contrast pacing—to provide an equitable landscape for students dealing with dyslexia and reading difficulties.
We extend the "learning environment" into the digital realm. By building a Progressive Web App (PWA) with zero-bandwidth scoring and extreme data optimization, we ensure functionality in remote, low-connectivity public schools across rural regions.
The Tools
Each tool handles a different part of reading — listening, pronouncing, understanding, and looking up words. Pick the one you need.
TTS Reader
Paste any text. Pick a language. Press play. Audio plays sentence-by-sentence so it starts fast on slow connections. Speed and pitch are adjustable — a student can slow it down to 0.5x while learning a new word.
Co-Reader + Pronunciation Rater
Words appear one at a time in a bold pill. Tap right to advance, left to go back. The app reads each word aloud, then the student reads it back — the mic scores their pronunciation live. Green means correct, yellow means close, red means try again.
Dictionary Lookup
Type any English word. Get the definition, word type, IPA pronunciation, and an example sentence. Results are cached in the browser — look up "photosynthesis" once, and the definition loads instantly next time, even offline.
Summarizer
Paste a textbook passage. Pick a language and Grade 7. Gemini rewrites it in plain language a 13-year-old can follow. The output can be read aloud through TTS. There's nothing else like this for Filipino students.
Feature Deep Dive
This is what turns a reading app into a reading tutor. The co-reader highlights a word, the TTS reads it, then the student reads it back into their mic. The browser's Web Speech API scores the attempt on-device — no audio leaves the phone.
Co-reader pronunciation rater — live word state
After a session, a score summary shows which words need more practice. Feedback always uses color + icon together — not color alone — so it's safe for colorblind students.
Browser note: Web Speech API requires Chrome or Edge. Students on Safari or Firefox see a notice and fall back to manual tap-to-advance without scoring.
Supported Languages
Filipino
Filipino
National
English
English
Universal
Google Cloud TTS natively supports fil-PH and en-US. These allow us to provide high-quality read-aloud functionality for the vast majority of local educational materials.
Low-Bandwidth Design
Every feature was designed with a prepaid data plan in mind. Nothing is sacrificed for low bandwidth — the architecture was designed around it.
Zero bandwidth
Pronunciation Rater
Web Speech API runs on-device. No audio leaves the phone.
Minimal bandwidth
Summarizer
Text in, text out. Gemini responses are under 2KB, even on 2G.
Cached locally
Dictionary Lookup
Each word cached in localStorage. Second lookup is instant and offline.
Optimized
TTS Audio
Sentence-by-sentence synthesis. OGG Opus encoding is half the size of MP3. One sentence ahead preloaded.
One-time load
Fonts & App Shell
Fonts self-hosted and cached. Service worker caches the shell after first visit.
Route-split
JavaScript Bundle
Next.js splits code per route. A student using the co-reader never downloads the summarizer code.
Technical Stack
| Layer | Technology | Why |
|---|---|---|
| Framework | Vite (Vanilla JS) | Fast dev server, ES module bundling |
| Styling | Tailwind CSS | Fast iteration, no runtime overhead |
| TTS | Google Cloud TTS fil-PH |
Native Filipino voice, high quality |
| Pronunciation | Web Speech API | 100% on-device, zero bandwidth, no API key |
| Summarizer | Gemini 2.5 Flash | Fast, cheap, strong multilingual output for PH languages |
| Dictionary | dictionaryapi.dev | Free, no key, comprehensive English coverage |
| Fonts | Atkinson Hyperlegible + OpenDyslexic | Designed for reading accessibility, self-hosted |
| Deploy | Self-hosted | JC Antor's home lab |
Design Language
Honest Limitations