OpenReader WebUI

OpenReader WebUI is a sleek, web-based reader with built-in Text-to-Speech capabilities, offering a seamless reading experience with synchronized audio narration for both PDF and EPUB documents. Read books with ease, listen to articles on the go, or study like you have your own lecturer, all in one place.

🎯 TTS API Integration: Compatible with OpenAI API TTS and Kokoro FastAPI TTS, enabling high-quality voice narration
💾 Local-First Architecture: Secure document handling with IndexedDB browser storage - no server uploads required
🔍 Smart Text Processing: Real-time sentence detection and synchronized text highlighting during playback
📚 EPUB Support: Read EPUB files with table of contents and synchronized text
📄 PDF Support: Read PDF files with text extraction and page navigation
⚡ Modern Tech Stack: Built with Next.js, React, and Tailwind CSS
🎨 Customizable Experience:
- Adjustable playback speed
- Multiple voice options
- Dark/light/system theme support
- Persistent user settings
📱 Cross-Platform: Responsive design works seamlessly across desktop and mobile devices

Demo

https://github.com/user-attachments/assets/323251e6-3b3b-43cc-b139-cdab01ca7d75

🐳 Docker Quick Start

docker run --name openreader-webui -p 3003:3003 richardr1126/openreader-webui:latest

Visit http://localhost:3003 to run the app.

Using Docker Compose

Create or add to a docker-compose.yml:

services:
  openreader-webui:
    container_name: openreader-webui
    image: richardr1126/openreader-webui:latest
    ports:
      - "3003:3003"
    restart: unless-stopped

Dev Installation

Prerequisites

Node.js & npm (recommended: use nvm)

Steps

Clone the repository:

git clone https://github.com/richardr1126/OpenReader-WebUI.git
cd OpenReader-WebUI

Install dependencies:
```
npm install
```

Configure the environment:

cp .env.template .env
# Edit .env with your configuration settings

Start the development server:
```
npm run dev
```
or build and run the production server:
```
npm run build
npm start
```
Visit http://localhost:3003 to run the app.

Dev server runs on port 3000 by default, while the production server runs on port 3003.

Docker Supported Architectures

linux/amd64 (x86_64)
linux/arm64 (Apple Silicon)
linux/arm/v7 (Raspberry Pi)

Features

Real-time sentence by sentence text-to-speech via OpenAI API TTS, Kokoro FastAPI TTS, or others compatible with the /v1/audio/speech endpoint
IndexedDB-powered local storage
Synchronized text highlighting during playback (using string similarity for best match on the page)
Configurable playback speed and voice options, which checks /v1/audio/voices for available voices
Click-to-skip on the same page for navigation
Responsive design with light, dark, and system themes
All configuration settings saved in IndexedDB

Stack

Framework: Next.js (React)
Storage: IndexedDB (in browser db store)
PDF Processing:
- react-pdf
- pdf.js
- Compromise for text analysis
EPUB Processing:
- react-reader
- epubjs
UI Components:
- Headless UI
- Tailwind CSS
TTS Integration: anything you want

Project Structure

src/
├── app/           // Next.js app router
├── components/    // Reusable UI components
├── contexts/      // State management contexts
└── services/      // Utility functions & integrations

Contributing

Contributions are welcome! Fork the repository and submit a pull request with your changes. For significant alterations, please open an issue first.

License

This project is licensed under the MIT License.

Acknowledgements

react-pdf
react-reader
Kokoro-82M for text-to-speech
Kokoro-FastAPI for the API wrapper

Support

If you encounter issues or have suggestions, please open an issue on GitHub.

4.6 KiB Raw Permalink Blame History