157 lines
4.9 KiB
Markdown
157 lines
4.9 KiB
Markdown
[](#license)
|
|
[](../../pulls)
|
|
|
|
# OpenReader WebUI
|
|
|
|
OpenReader WebUI is web-based reader 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](https://github.com/remsky/Kokoro-FastAPI/tree/v0.0.5post1-stable).
|
|
|
|
- 🎯 **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/1bfc5fc4-8d66-4c71-a3c1-f3ec5b4f4b56
|
|
|
|
|
|
|
|
## 🐳 Docker Quick Start
|
|
|
|
```bash
|
|
docker run --name openreader-webui -p 3003:3003 richardr1126/openreader-webui:latest
|
|
```
|
|
or with server-side doc storage:
|
|
|
|
```bash
|
|
docker run --name openreader-webui \
|
|
-p 3003:3003 \
|
|
-v openreader_docstore:/app/docstore \
|
|
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
|
|
volumes:
|
|
openreader_docstore:
|
|
|
|
services:
|
|
openreader-webui:
|
|
container_name: openreader-webui
|
|
image: richardr1126/openreader-webui:latest
|
|
ports:
|
|
- "3003:3003"
|
|
volumes:
|
|
- openreader_docstore:/app/docstore
|
|
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.
|