Update README.md

This commit is contained in:
Richard Roberson 2025-01-22 10:16:09 -07:00
parent 23d7fae8c2
commit 68fa3287d7

View file

@ -1,38 +1,47 @@
# OpenReader WebUI # OpenReader WebUI
OpenReader WebUI is a modern, user-friendly web interface for reading and analyzing PDF documents. Built with Next.js and React, it provides an intuitive interface for document viewing, analysis, and interaction. The application features drop-in support for any OpenAI-compatible Text-to-Speech (TTS) API, making it highly flexible for various voice synthesis implementations. 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 ## Demo
https://github.com/user-attachments/assets/7a3457ba-feda-4939-928a-cb587b1c0884 https://github.com/user-attachments/assets/7a3457ba-feda-4939-928a-cb587b1c0884
## Features ## Features
- PDF document viewing and navigation - **PDF Document Management**
- Interactive document interface - Local document storage using IndexedDB
- Modern UI with Tailwind CSS - PDF text extraction and rendering
- Fast performance with Next.js and Turbopack
- PDF text analysis capabilities - **Text-to-Speech Integration**
- Drop-in support for OpenAI-compatible TTS APIs - Real-time text-to-speech using OpenAI's TTS API, Kokoro TTS API, or anything else that follows the OpenAI API format
- Responsive design for various screen sizes - 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 ## Tech Stack
- **Framework**: [Next.js 15](https://nextjs.org/) - **Framework**: Next.js with React
- **UI Library**: [React 19](https://react.dev/) - **Storage**: IndexedDB for document storage
- **Styling**: [Tailwind CSS](https://tailwindcss.com/) - **PDF Processing**:
- **PDF Processing**: [React-PDF](https://react-pdf.org/) and [PDF.js](https://mozilla.github.io/pdf.js/) - react-pdf for rendering
- **UI Components**: [Headless UI](https://headlessui.com/) - pdf.js for text extraction
- **Type Safety**: [TypeScript](https://www.typescriptlang.org/) - compromise for text analysis
- **UI Components**:
- Headless UI for modals and dropdowns
- Tailwind CSS for styling
- **TTS Integration**: OpenAI TTS API
## Prerequisites ## Installation
- Node.js 18.x or higher > You will need `node` and `npm` installed on your machine. If you don't have it, I recommend installing it using [nvm](https://github.com/nvm-sh/nvm).
- npm or yarn package manager
## Getting Started
1. Clone the repository: 1. Clone the repository:
```bash ```bash
@ -49,13 +58,11 @@ npm install
```bash ```bash
cp .env.template .env cp .env.template .env
``` ```
Edit the `.env` file with your configuration settings. > Edit the `.env` file with your configuration settings.
4. Start the development server: 4. Start the development server:
```bash ```bash
npm run dev npm run dev
# or
yarn dev
``` ```
The application will be available at [http://localhost:3000](http://localhost:3000). The application will be available at [http://localhost:3000](http://localhost:3000).
@ -70,24 +77,27 @@ The application will be available at [http://localhost:3000](http://localhost:30
## Project Structure ## Project Structure
``` ```
openreader-webui/ src/
├── src/ ├── app/ # Next.js app router
│ ├── app/ # Next.js app router pages ├── components/ # UI components
│ ├── components/ # Reusable React components ├── contexts/ # Contexts for state management
│ ├── contexts/ # React context providers └── services/ # Utility functions
│ └── services/ # Business logic and services
├── public/ # Static assets
└── scripts/ # Utility scripts
``` ```
## Contributing ## Browser Support
Contributions are welcome! Please feel free to submit a Pull Request. The application requires modern browser features:
- IndexedDB for document storage
- PDF.js for document rendering
## License ## License
This project is licensed under the terms of the license included in the repository. MIT License
--- ## Acknowledgements
Built with ❤️ using [Next.js](https://nextjs.org/) - [react-pdf](https://github.com/wojtekmaj/react-pdf) for the PDF rendering library.
- [Kokoro-82M](https://huggingface.co/hexgrad/Kokoro-82M) text-to-speech model
- [Kokoro-FastAPI](https://github.com/remsky/Kokoro-FastAPI/tree/master) for the text-to-speech api wrapper.
Thank you ❤️