140 lines
4.6 KiB
Markdown
140 lines
4.6 KiB
Markdown
[](#license)
|
|
[](../../pulls)
|
|
|
|
# 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
|
|
|
|
```bash
|
|
docker run --name openreader-webui -p 3003:3003 richardr1126/openreader-webui:latest
|
|
```
|
|
Visit [http://localhost:3003](http://localhost:3003) to run the app.
|
|
|
|
### Using Docker Compose
|
|
Create or add to a `docker-compose.yml`:
|
|
```yaml
|
|
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](https://github.com/nvm-sh/nvm))
|
|
|
|
### Steps
|
|
|
|
1. Clone the repository:
|
|
```bash
|
|
git clone https://github.com/richardr1126/OpenReader-WebUI.git
|
|
cd OpenReader-WebUI
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. Configure the environment:
|
|
```bash
|
|
cp .env.template .env
|
|
# Edit .env with your configuration settings
|
|
```
|
|
|
|
4. Start the development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
or build and run the production server:
|
|
```bash
|
|
npm run build
|
|
npm start
|
|
```
|
|
|
|
Visit [http://localhost:3003](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](https://github.com/remsky/Kokoro-FastAPI), 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](https://github.com/wojtekmaj/react-pdf)
|
|
- [pdf.js](https://mozilla.github.io/pdf.js/)
|
|
- Compromise for text analysis
|
|
- **EPUB Processing:**
|
|
- [react-reader](https://github.com/happyr/react-reader)
|
|
- [epubjs](https://github.com/futurepress/epub.js/)
|
|
- **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](https://github.com/wojtekmaj/react-pdf)
|
|
- [react-reader](https://github.com/happyr/react-reader)
|
|
- [Kokoro-82M](https://huggingface.co/hexgrad/Kokoro-82M) for text-to-speech
|
|
- [Kokoro-FastAPI](https://github.com/remsky/Kokoro-FastAPI) for the API wrapper
|
|
|
|
## Support
|
|
|
|
If you encounter issues or have suggestions, please open an issue on GitHub.
|