openreader/README.zh-TW.md

📘 OpenReader-WebUI（繁體中文說明）

本文件為 README.md 的繁體中文翻譯，僅供參考。若有版本差異，請以原始英文文件為準。

OpenReader WebUI 📄🔊

OpenReader WebUI 是一個可以靈活運用搭配 TTS 的閱讀器，目前OpenReader WebUI 能夠讀取的文件格式包括 EPUB, PDF, TXT, MD, 以及 DOCX，並且支援多種TTS供應端，包含了： OpenAI, Deepinfra, 以及 OpenAI相容的 Kokoro-FastAPI 和 Orpheus-FastAPI

• 🎯 支援眾多的TTS供應端:

  • OpenAI: tts-1, tts-1-hd, gpt-4o-mini-tts models with voices (alloy, echo, fable, onyx, nova, shimmer)
  • Deepinfra: Kokoro-82M, Orpheus-3B, Sesame-1B models with extensive voice libraries
  • Custom OpenAI-Compatible: Any OpenAI-compatible endpoint with custom voice sets

• 💾 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, TXT, MD, DOCX (with libreoffice installed)

• 🎧 Audiobook Creation: Create and export audiobooks from PDF and ePub files (in m4b format with ffmpeg and aac TTS output)

• 🎨 Customizable Experience:

  • 🔑 Select TTS provider (OpenAI, Deepinfra, or Custom OpenAI-compatible)
  • 🔐 Set TTS API base URL and optional API key
  • 🎨 Multiple app theme options
  • And more...

🛠️ 目前持續努力中的功能

• **能夠支援原生 .docx ** (目前至少需要安裝 libreoffice)
• **改善無障礙操作

🐳 Docker 快速安裝

運作需求

• 安裝最新版本的Docker
• 至少需要有一個 TTS API server (Kokoro-FastAPI, Orpheus-FastAPI, Deepinfra, OpenAI, 等) 在運作中，而且讀的到。

1. 🐳 新增 Docker 容器:

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

(選擇性設定屬性): 設定 TTS API_BASE 調用網址 或是 API_KEY 作為整體預設值

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

Note: 因為從 TTS API 調用音訊的操作會在 Next.js 伺服器端，而不是在客戶端。所以，TTS API 的網址應該要可以訪問，並且相依於 Next.js 伺服器。另外，如果 Next.js 伺服器位於 Docker 容器中，建議您使用 host.docker.internal 來存取主機，而不是 localhost。.

開啟 http://localhost:3003 來運作程式以及完成後續的設定.

Note: openreader_docstore 是用來儲存伺服器端文件的。您可以掛載本機目錄來代替。如果您不需要伺服器端文檔，也可以將其刪除。

2. ⚙️ 在網頁界面中設定各項屬性:

• 在Settings modal中設定TTS 供應端
• 如果需要的話，設定 TTS API 網址 和 API Key (當然，如果是在環境設定時就進行會比較安全）
• 從下拉式選單選取要使用的聲音模型 (會顯示從 TTS 供應端 API獲取的聲音列表)

3. ⬆️ 更新 Docker 的映像檔

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

(選擇性) 🐳 設定 Docker Compose 和 Kokoro-FastAPI

提供使用 Kokoro-FastAPI 搭配 OpenReader WebUI的docker-compose 範例檔案，放在 examples/docker-compose.yml:

mkdir -p openreader-compose
cd openreader-compose
curl -O https://raw.githubusercontent.com/richardr1126/OpenReader-WebUI/main/examples/docker-compose.yml
docker compose up -d

或是把 OpenReader WebUI 加入你的 docker-compose.yml:

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

volumes:
  docstore:

開發中版本安裝

運作需求

• Node.js & npm

運作需求

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

步驟

1. 複製程式碼庫:

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

2. 安裝套件:

   With pnpm (recommended):

   pnpm install
   

   Or with npm:

   npm install
   

3. 環境設定:

   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. 啟動開發伺服器:

   With pnpm (recommended):

   pnpm dev
   

   Or with npm:

   npm run dev
   

   or build and run the production server:

   With pnpm:

   pnpm build
   pnpm start
   

   Or with npm:

   npm run build
   npm start
   

   訪問 http://localhost:3003 來運作程式.

💡 新功能請求

如果你有新功能的需求或是新點子，可以經由討論區提出 討論區 tab.

🙋‍♂️ 支持與問題

如果你遇到問題，請使用GitHub的格式提出問題（非常簡單的格式）。

👥 協力

非常歡迎各方人仕協助! 提交您的修改吧！

❤️ 感謝

沒有站在這些巨人的肩膀上，這個專案是不可能完成的！:

• Kokoro-82M model
• Orpheus-TTS model
• Kokoro-FastAPI
• Orpheus-FastAPI
• react-pdf npm package
• react-reader npm package

Docker 支援架構

• linux/amd64 (x86_64)
• linux/arm64 (Apple Silicon, Raspberry Pi, SBCs, etc.)

Stack

• 架構: Next.js (React)
• 容器化: Docker
• 資料庫: IndexedDB (in browser db store)
• PDF:
  • react-pdf
  • pdf.js
• EPUB:
  • react-reader
  • epubjs
• Markdown/Text:
  • react-markdown
  • remark-gfm
• UI:
  • Tailwind CSS
  • Headless UI
  • @tailwindcss/typography
• TTS: (tested on)
  • Deepinfra API (Kokoro-82M, Orpheus-3B, Sesame-1B)
  • Kokoro FastAPI TTS
  • Orpheus FastAPI TTS
• NLP: compromise NLP library for sentence splitting

授權方式

本專案採用 MIT 授權方式。