BionicReader
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
index.ts
https://tusharGoyal--18bfd53433da11f0b5f99e149126039e.web.val.run
A web application that applies bionic reading formatting to PDF and EPUB files to enhance reading speed and comprehension.
- Upload PDF or EPUB files
- Process text with bionic reading algorithm (highlighting the first few letters of each word)
- Responsive reading interface with PDF/EPUB viewer
- Toggle bionic reading on/off
- Adjustable settings for bionic reading intensity
- Dark mode support
- Font size adjustment
- Page navigation for multi-page documents
- Open the application
- Upload a PDF or EPUB file
- Click "Process File" to upload and process the document
- The document will open in the viewer interface
- Use the toggle switch to enable/disable bionic reading
- Adjust the intensity slider to control how much of each word is bolded
- Navigate between pages using the Previous/Next buttons
- Adjust font size and toggle dark mode as needed
backend/- Server-side code for handling file uploads and processingindex.ts- Main API endpoints and file handlingbionicreader.js- Core bionic reading implementation
frontend/- Client-side interface and reading experienceindex.html- Main upload interfacepdf_viewer.html- PDF/EPUB viewer with bionic reading
shared/- Shared utilities and types
- Hono (API framework)
- PDF.js (PDF parsing)
- EPub.js (EPUB parsing)
- Tailwind CSS (Styling)
- Val Town Blob Storage (File storage)
Bionic reading works by highlighting (bolding) the first few letters of each word. This creates "fixation points" that help the brain recognize words faster, allowing for quicker reading while maintaining comprehension.
The intensity setting controls what percentage of each word is bolded:
- Lower intensity (e.g., 20%): Only the first letter or two of each word is bolded
- Higher intensity (e.g., 80%): Most of each word is bolded
The implementation in bionicreader.js handles:
- Splitting text into paragraphs and words
- Calculating how many characters to bold based on intensity
- Applying HTML formatting to create the bionic reading effect
- Safely handling different content types