OpenReader WebUI 📄🔊

OpenReader WebUI is a document reader with Text-to-Speech capabilities, offering a TTS read along experience with narration for both PDF and EPUB documents. It can use any OpenAI compatible TTS endpoint, including Kokoro-FastAPI.

• 🎯 TTS API Integration:
  • Compatible with OpenAI text to speech API and GPT-4o Mini TTS, Kokoro-FastAPI TTS, or any other compatible service
  • Support for multiple TTS models (tts-1, tts-1-hd, gpt-4o-mini-tts, kokoro)
  • Custom model support for experimental or self-hosted models
  • Model-specific instructions support (for gpt-4o-mini-tts)
• 💾 Local-First Architecture: Uses IndexedDB browser storage for documents
• 🛜 Optional Server-side documents: Manually upload documents to the next backend for all users to download
• 📖 Read Along Experience: Follow along with highlighted text as the TTS narrates
• 📄 Document formats: EPUB, PDF, DOCX (with libreoffice installed)
• 🎧 Audiobook Creation: Create and export audiobooks from PDF and ePub files with m4b format
• 📲 Mobile Support: Works on mobile devices, and can be added as a PWA web app
• 🎨 Customizable Experience:
  • 🔑 Set TTS API base URL (and optional API key)
  • 🤖 Choose from multiple TTS models or use custom models
  • 🎯 Set model-specific instructions for GPT-4o Mini TTS
  • 🏎️ Adjustable playback speed
  • 📐 Customize PDF text extraction margins
  • 🗣️ Multiple voice options (checks /v1/audio/voices endpoint)
  • 🎨 Multiple app theme options

🛠️ Work in progress

• Audiobook creation and download (m4b format)
• Get PDFs on iOS 17 and below working 🤞
• Support for GPT-4o Mini TTS with instructions
• End-to-end Testing: More playwright tests (in progress)
• More document formats: .txt, .md
• Support more TTS APIs: ElevenLabs, etc.
• Accessibility Improvements

🐳 Docker Quick Start

docker run --name openreader-webui \
  -p 3003:3003 \
  -v openreader_docstore:/app/docstore \
  ghcr.io/richardr1126/openreader-webui:latest

(Optionally): Set the TTS API_BASE URL and/or API_KEY to be default for all devices

docker run --name openreader-webui \
  -e API_BASE=http://host.docker.internal:8880/v1 \
  -p 3003:3003 \
  -v openreader_docstore:/app/docstore \
  ghcr.io/richardr1126/openreader-webui:latest

Requesting audio from the TTS API happens on the Next.js server not the client. So the base URL for the TTS API should be accessible and relative to the Next.js server. If it is in a Docker you may need to use host.docker.internal to access the host machine, instead of localhost.

Visit http://localhost:3003 to run the app and set your settings.

Note: The openreader_docstore volume is used to store server-side documents. You can mount a local directory instead. Or remove it if you don't need server-side documents.

⬆️ Update Docker Image

docker stop openreader-webui && docker rm openreader-webui
docker pull ghcr.io/richardr1126/openreader-webui:latest

Adding to a Docker Compose (i.e. with open-webui or Kokoro-FastAPI)

Create or add to a docker-compose.yml:

volumes:
  docstore:

services:
  openreader-webui:
    container_name: openreader-webui
    image: ghcr.io/richardr1126/openreader-webui:latest
    environment:
      - API_BASE=http://host.docker.internal:8880/v1
    ports:
      - "3003:3003"
    volumes:
      - docstore:/app/docstore
    restart: unless-stopped

Demo

Screen.Recording.2025-02-22.at.2.32.02.PM.mov

Dev Installation

Prerequisites

• Node.js & npm (recommended: use nvm) Optionally required for different features:
• FFmpeg (required for audiobook m4b creation only)
• libreoffice (required for DOCX files)
  • On Linux: sudo apt install ffmpeg libreoffice
  • On MacOS: brew install ffmpeg libreoffice

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 template.env .env
   # Edit .env with your configuration settings

   Note: The base URL for the TTS API should be accessible and relative to the Next.js server

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.

💡 Feature requests

For feature requests or ideas you have for the project, please use the Discussions tab.

🙋‍♂️ Support and issues

For general questions, you can reach out to me on Bluesky. If you encounter issues, please open an issue on GitHub following the template (which is very simple).

👥 Contributing

Contributions are welcome! Fork the repository and submit a pull request with your changes.

❤️ Acknowledgements

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

Docker Supported Architectures

• linux/amd64 (x86_64)
• linux/arm64 (Apple Silicon)

Stack

• Framework: Next.js (React)
• Containerization: Docker
• Storage: IndexedDB (in browser db store)
• PDF:
  • react-pdf
  • pdf.js
• EPUB:
  • react-reader
  • epubjs
• UI:
  • Tailwind CSS
  • Headless UI
• TTS: (tested on)
  • OpenAI API
  • Kokoro FastAPI TTS
• NLP: compromise NLP library for sentence splitting

License

This project is licensed under the MIT License.