OpenReader WebUI

OpenReader WebUI is a web-based PDF reader with integrated Text-to-Speech capabilities. It provides a clean interface for reading PDF documents while offering synchronized text-to-speech playback using OpenAI's TTS API.

Demo

https://github.com/user-attachments/assets/7a3457ba-feda-4939-928a-cb587b1c0884

Features

• PDF Document Management

  • Local document storage using IndexedDB
  • PDF text extraction and rendering

• Text-to-Speech Integration

  • Real-time text-to-speech using OpenAI's TTS API, Kokoro TTS API, or anything else that follows the OpenAI API format
  • Synchronized text highlighting
  • Configurable playback speed
  • Multiple voice options
  • Click-to-read functionality

• User Interface

  • Light/Dark/System theme support
  • Responsive design
  • Configurable API settings
  • Interactive PDF text selection

Tech Stack

• Framework: Next.js with React
• Storage: IndexedDB for document storage
• PDF Processing:
  • react-pdf for rendering
  • pdf.js for text extraction
  • compromise for text analysis
• UI Components:
  • Headless UI for modals and dropdowns
  • Tailwind CSS for styling
• TTS Integration: OpenAI TTS API

Installation

You will need node and npm installed on your machine. If you don't have it, I recommend installing it using nvm.

1. Clone the repository:

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

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.template .env

Edit the .env file with your configuration settings.

4. Start the development server:

npm run dev

The application will be available at http://localhost:3000.

Available Scripts

• npm run dev - Start development server with Turbopack
• npm run build - Create production build
• npm run start - Start production server
• npm run lint - Run ESLint for code quality

Project Structure

src/
├── app/                    # Next.js app router
├── components/             # UI components
├── contexts/               # Contexts for state management
└── services/               # Utility functions

Browser Support

The application requires modern browser features:

• IndexedDB for document storage
• PDF.js for document rendering

License

MIT License

Acknowledgements

• react-pdf for the PDF rendering library.
• Kokoro-82M text-to-speech model
• Kokoro-FastAPI for the text-to-speech api wrapper.

Thank you ❤️