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

1. Clone the repository:

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

2. Install dependencies:

   npm install
   

3. Configure the environment:

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

4. 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.