havijw / spotread

Highlight text as you read aloud

SpotRead

Highlight text as you read.

Development

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can edit the home page at app/page.tsx. The page auto-updates as you edit the file.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can also check out the Next.js GitHub repository.

spotread's Issues

Replace buttons with text entry field

Currently, text is highlighted/unhighlighted by clicking buttons. A big step toward actually highlighting with speech would be replacing the buttons with text entry, and highlighting the next word when it is typed into the entry box. In particular, with built-in speech recognition, this might actually be able to do the job.

This will probably be useful to keep in forever as a kind of "debug" mode for the matching algorithm, which will presumably eventually be more complicated.

Add pre-commit hooks

Hooks are the most basic QA/automation possible, and are relatively easy to implement. Minimum config is linting and formatting. I should look into other options, like a typescript type checker similar to mypy.

Add content editing

Currently, the content is a constant string. There should be a way to edit this, which means it will need to be a state variable. There should be editing and reading modes for the page, and likely the best way to do this is to have tabs for editing and reading modes.

Eventually, this should probably be a rich text editor like Quill, CKEditor, TipTap, TinyMCE, or another, since that will be a nicer experience for organizing content.

Auto scroll when reading

The reading content should have a max height and scroll to maintain the content in the center of the container.

Add dark mode

See Tailwind docs.

Fuzzy match to check whether to continue

Currently, I only do very basic token cleaning (lowercasing, removing non-word characters). For the speech entry to work naturally, I need to handle things like "want to" vs "wanna", homophones, numbers, etc.

Another issue is that I need to allow a word to not be matched and still move on, so that if the matching fails the whole highlighting doesn't completely stop.