📖 PDF Book Viewer & Translator

Read any PDF like a real book — page by page, with a visual page-flip — and translate it on the spot, straight from the browser. No key, no account, no server.

This page is a live demo of the translator module built into this docs hub. Pick a sample below and press Translate page (or Translate all) to watch a page get converted to Polish — rendered right on the book page.

You can also open any PDF from your computer with the 📂 Open PDF button (or by dragging & dropping a file onto the viewer) — it is read entirely in your browser, never uploaded.

✨ What it does

🧪 Try it

1. Flip through the sample PDFs with the arrows (or ← / →).
2. Set the target language (default: Polski).
3. Press Translate page — the translation appears in the panel and on the page.
4. Press Translate all to translate the whole book.
5. Open your own PDF — click 📂 Open PDF and pick a file, or just drag & drop it onto the viewer. The file is processed entirely in your browser.
6. Embed the component with a different src to show a static PDF instead.

🔌 Embedding it in your docs

The component is registered globally, so any Markdown page can embed it:

<PdfBookViewer src="/pdfs/sample-english.pdf" title="My Book" />

To let readers open their own PDF (no src), embed it without a source:

<PdfBookViewer title="Upload your PDF" />

In both cases the 📂 Open PDF button and drag & drop are available.

🛠️ How it works under the hood

PDF (URL) ──► pdf.js ──► canvas pages ──► book layout (spread + flip)
                  │
                  └── getTextContent() ──► chunk by length
                                                │
                                                ▼
                       translate.googleapis.com (Google, primary)
                                    │  on failure
                       api.mymemory.translated.net (MyMemory, fallback)
                                                │
                                                ▼
                       per-page translations ──► panel + on-page overlay

• Rendering: pdf.js renders every page to a <canvas>. The worker and the standard-14 font data are vendored in public/pdfjs/ so the viewer works offline — no CDN.
• Local files: picking a file (or dropping it) reads it with File.arrayBuffer() and hands the raw bytes to pdf.js (getDocument({ data })) — the PDF never leaves the browser.
• Text extraction: page.getTextContent() returns positioned text spans; they are joined into paragraphs and chunked (Google: ~4 500 chars, MyMemory: ~450 chars) to stay inside each API's limits.
• Translation: a small provider chain tries the keyless Google endpoint first and falls back to MyMemory. Auto-detection of the source language also uses the Google endpoint.
• Book layout: pages are laid out as spreads (cover page alone on the right, then 2+3, 4+5, …). Page turns are CSS 3D transforms (rotateY) with perspective, so the moving page flips like a real leaf.

🔑 About Microsoft Translator

This site originally asked for a Microsoft Translator embedded API. Two things to know:

1. Microsoft's free Translator Web Widget (the classic embed) was retired in 2019 — it no longer exists.
2. The modern Azure Translator REST API works perfectly, but requires a subscription key + region, which cannot be shared on a public static site.

So this module ships keyless by default (Google + MyMemory, both free, CORS-enabled, no account). A Microsoft Translator provider is included behind the same interface in src/lib/translator.ts — if you have an Azure key, pass microsoftKey / microsoftRegion to translateText() and it is tried first. The docs stay free and keyless for everyone else.

📄 Sample files

The two demo PDFs are generated from scripts/gen-sample-pdfs.mjs (a dependency-free PDF writer) and live in public/pdfs/:

• sample-english.pdf — 3 pages of English text
• sample-polish.pdf — 2 pages of Polish text

📚 Related

• Docs Hub
• Project catalog