Communitygithub.com

jasonadu/my-skills

Bilinguales Lesen – Konvertiert englische PDFs (Technikbücher, Tutorials, Handbücher usw.) in mehrteilige HTML-Leseausgaben mit abschnittsweiser chinesisch-englischer Gegenüberstellung, eingebetteten Base64-Bildern und einem links einklappbaren Inhaltsverzeichnis.

Was ist my-skills?

Dieses Skill wandelt englischsprachige PDF-Dokumente, insbesondere technische Bücher und Handbücher, in eine Reihe von eigenständigen HTML-Dateien um, die ein abschnittsweises paralleles Lesen in Chinesisch und Englisch ermöglichen. Es ist ideal für Nutzer, die ein technisches Original auf Englisch lesen, aber zum besseren Verständnis eine chinesische Übersetzung zur Seite wünschen. Das Skill erzeugt für jedes Kapitel eine separate HTML-Datei, in der jeder Absatz des Originaltextes vollständig übersetzt wird. Bilder werden komprimiert und als Base64-Strings direkt in die HTML-Dateien eingebettet, sodass sie offline ohne externe Abhängigkeiten funktionieren. Ein wichtiges Merkmal ist die Navigation: Ein schwebender Button (🌐) erlaubt das Umschalten zwischen drei Anzeigemodi (nur Englisch, nur Chinesisch oder beide). Die Seitennummern des Original-PDFs werden nach jeder abgeschlossenen Seite eingefügt. Der Workflow ist robust und behandelt Randfälle wie JPEG2000-Bilder, Codeblöcke in f-Strings oder das automatische Einfügen von Klammern. Das Endergebnis wird als ZIP-Archiv mit einer zentralen index.html geliefert.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jasonadu/my-skills/tree/HEAD/bilingual-reading

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Zweisprachiges Lesen (Bilingual Reading)

Übersicht

Verwandle ein englisches technisches PDF in eine abschnittsweise chinesisch-englische Offline-HTML-Leseausgabe: Jedes Kapitel ist eine eigenständige HTML-Datei (UTF-8, Base64-Bilder eingebettet, kann offline geöffnet werden). Links befindet sich ein einklappbares Inhaltsverzeichnis, und ein schwebender Button (🌐) unten rechts schaltet zwischen den Modi „Nur Englisch / Nur Chinesisch / Chinesisch-Englisch gegenüber" um – die Auswahl bleibt auch nach dem Blättern erhalten.

Auslöser und Eingabe

  • Eingabe: Englisches PDF (lokaler Pfad oder URL; wird zuerst lokal heruntergeladen).
  • Ausgabe: index.html + Vorspann-/Nachspannseiten + chapter-NN.html (ein Kapitel pro Datei), abschließend als ZIP gepackt.
  • Falls das PDF ein Lesezeichen enthält (get_toc()), wird die Kapitelstruktur auf Basis der Lesezeichen erstellt und zuerst mit dem Benutzer bestätigt. Nach der Bestätigung „Nicht aufteilen" wird in Serie produziert.

Kernregeln (unverletzlich)

  1. Der Originaltext wird absatzweise vollständig übersetzt, ohne Zusammenfassung oder Zusammenlegung.
  2. Ein Kapitel pro Datei, Kapitel werden nicht unterteilt; innerhalb eines Kapitels werden die Absätze in der Reihenfolge der Originalseiten angeordnet.
  3. Codeblöcke (<pre><code>) bleiben im englischen Original unübersetzt; Code mit geschweiften Klammern wird nicht in f-Strings geschrieben.
  4. Chinesische Absätze erhalten einen hellblauen Hintergrund + einen 4px linken Farbbalken zur Unterscheidung von englischen Absätzen. Gleiches gilt für Listenelemente in chinesischer Sprache.
  5. Bilder werden nach Komprimierung als Base64 eingebettet; nach jeder vollständig übersetzten Originalseite wird eine separate Zeile mit einem Seitenmarker (page_mark(pdf_page)) eingefügt, der die Seitenzahl des Original-PDFs anzeigt.
  6. Dateinamen in Kleinbuchstaben mit Bindestrich (chapter-01.html, front-matter.html).
  7. Die Inhaltsverzeichniseinträge basieren auf der Lesezeichen-Hierarchie (l2/l3); die Verknüpfungen zwischen den Kapiteln werden erstellt, wobei die ersten und letzten Kapitel ausgegraut werden.

Workflow-Übersicht

① Seitenbereich festlegen → ② Text extrahieren → ③ Bilder extrahieren → ④ Bilder komprimieren und in Base64 umwandeln
→ ⑤ Originaltext lesen und übersetzen → ⑥ build_chN.py schreiben → ⑦ Geschweifte Klammern ergänzen → ⑧ Ausführen und generieren
→ ⑨ Navigation verketten → Validieren → Ausliefern

Zunächst wird ein Musterkapitel (normalerweise Kapitel 1) erstellt, damit der Benutzer das Layout genehmigen kann. Nach der Genehmigung wird das Skript book_theme.py gefestigt/wiederverwendet und die restlichen Kapitel in Serie produziert, ohne dass weitere Bestätigungen erforderlich sind. Die Vorspann-/Nachspannseiten und die index.html werden am Ende einheitlich abgeschlossen.

Detaillierte Schritte

① Seitenbereich festlegen

Eingabe: Gesamtinhaltsverzeichnis (TOC) / Kapitelnummer. Lesezeichen mit PyMuPDF auslesen:

import fitz
doc = fitz.open("book.pdf")
toc = doc.get_toc()          # [[level, title, page_1based], ...]

Die 1-basierten Seitenzahlen in 0-basierte PyMuPDF-Bereiche umrechnen. Lesezeichenseitenzahlen weichen oft von den physischen Seiten ab; die Lesezeichen sind maßgeblich; dem Benutzer die Kapitelaufteilung vorlegen und vor Arbeitsbeginn bestätigen lassen.

② Text extrahieren

text = "".join(doc[p].get_text("text", sort=True) for p in range(start0, end0+1))
open("chN_raw.txt", "w", encoding="utf-8").write(text)

sort=True gewährleistet die korrekte Lesereihenfolge, auch bei mehrspaltigen Layouts. Für jedes Kapitel wird eine chN_raw.txt mit dem Originaltext geschrieben.

③ Bilder extrahieren

Mit scripts/extract_assets.py:

python3 extract_assets.py book.pdf <start_page_1based> <end_page_1based> --out assets
  • page.get_images(full=True) → Duplikate anhand der xref entfernen → extract_image(xref).
  • jpx(JPEG2000), RGBA, P-Modi werden einheitlich in RGB konvertiert und dann als JPEG gespeichert (Browser-kompatibel).

④ Bilder komprimieren und in Base64 umwandeln

Wird im selben Schritt wie oben erledigt (im Skript integriert): PIL öffnen; bei Breite >800px proportional auf 800 verkleinern (LANCZOS); JPEG mit Qualität ~68 neu speichern; Base64 in assets/figN-M.txt schreiben. Ein einzelnes Bild wird auf 30–80 KB komprimiert.

⑤ Originaltext lesen und übersetzen

  • Absätze auslesen: chN_raw.txt (jeweils 500–600 Zeilen), absatzweise übersetzen und die Bildunterschriften entsprechend notieren (z. B. ein Bild eines Rabens wird als „Notiz" umschrieben).
  • Codeblöcke werden nicht übersetzt; Tabellen in HTML <table> umwandeln; Listeninhalte ebenfalls einzeln übersetzen, nicht zusammenfassen.

⑥ Build-Skript schreiben

build_chN.py beginnt mit from book_theme import P, LI, CODE, INLINE, H, img_b64, page_mark, page. Der Hauptteil wird in den f-String body geschrieben. In f-Strings müssen P()/LI() als {P(...)} geschrieben werden, damit sie ausgewertet werden. Codeblöcke werden als normale String-Variable CODE_X = '''...''' extrahiert und mit + CODE_X angehängt. Siehe die vollständige Vorlage im Docstring der Datei scripts/book_theme.py.

⑦ Nachbearbeitung: Geschweifte Klammern ergänzen

python3 scripts/fix_braces.py build_chN.py

Zeilenweise durchgehen: Bei Zeilen, die mit P('/LI(' beginnen, wird am Zeilenanfang { eingefügt. Rückwärts suchen nach der ersten Zeile, die mit ) endet, und am Zeilenende } einfügen. Zeilen mit img_b64(/page( werden nicht behandelt, um zu vermeiden, dass fälschlicherweise } an das Ende einer page()-Zeile angehängt wird.

⑧ Ausführen und generieren

python3 build_chN.py     # Das Skript gibt den Dateinamen und die Größe in KB aus – Erfolgsmeldung

⑨ Navigation verketten

prev/next entsprechend der Kapitelnummer eintragen (Kapitel 1 prev = front-matter.html, letztes Kapitel next = None). Erste und letzte Kapitel erhalten einen deaktivierten Platzhalter (wird in page() bereits behandelt).

Abschluss

  • front-matter.html, closing.html (mit/ohne empfohlene Literatur, vorher mit dem Benutzer abstimmen), index.html (zentraler Einstiegspunkt mit Links zu allen Kapiteln).
  • Mit python3 -m zipfile -c bilingual_reading.zip *.html als ZIP packen und ausliefern.

Verzweigungen und Ausnahmebehandlung

AuslöserBehandlung
Bild ist jpx / RGBA / P-Modusextract_assets.py konvertiert einheitlich in RGB und speichert als JPEG
f-String enthält geschweifte Klammern eines Codeblocks (JSON-Dict)Nicht in f-String schreiben; als CODE_X = '''...''' extrahieren und mit + CODE_X anhängen
{<P( falsch geschriebenMit sed 's/{<P(/{P(/g' korrigieren
Massenhaftes }-Einfügen landet fälschlich in page()-Zeilenfix_braces.py vermeidet dies; falls trotzdem passiert, das überflüssige } am Zeilenende manuell entfernen
Benutzer möchte „zuerst das Ergebnis sehen, dann weitermachen"Nur das Musterkapitel erstellen, pausieren und auf Feedback warten
Benutzer wünscht „Code nicht übersetzen"Alle <pre><code> im englischen Original belassen (Standardverhalten)
Weitere ProblemeSiehe references/troubleshooting.md

Ressourcenverzeichnis

  • scripts/book_theme.py — Zentrales Shared-Modul: CSS/JS/Seitengerüst + Funktionen P, LI, CODE, INLINE, H, img_b64, page_mark, page. Änderungen am Stil erfolgen nur hier.
  • scripts/extract_assets.py — Schritte ③④: Bilder extrahieren, komprimieren, in Base64 umwandeln und in assets/ schreiben.
  • scripts/fix_braces.py — Schritt ⑦: Geschweifte Klammern für f-Strings automatisch ergänzen.
  • references/style-guide.md — Details zu Stil und Interaktion (Farben, Layout, Komponenten, Abnahmekriterien).
  • references/troubleshooting.md — Problemlösungstabelle und wiederverwendbare Erfahrungen.

Abnahmeliste

  • Musterkapitel vom Benutzer genehmigt (chinesischer Text mit hellblauem Hintergrund, Listenelemente in chinesischer Sprache mit gleicher Formatierung, Seitenmarker vorhanden)
  • Originaltext absatzweise vollständig übersetzt, Codeblöcke nicht übersetzt, Bilder als Base64 eingebettet, offline öffnbar
  • Jede Kapitel-HTML kann unabhängig geöffnet werden, Inhaltsverzeichnis einklappbar, Ankersprünge funktionieren korrekt
  • 🌐-Button schaltet in drei Modi um, Auswahl bleibt nach Blättern erhalten (localStorage)
  • Vor-/Rückwärtsverknüpfungen zwischen den Kapiteln korrekt, Schaltflächen für erstes/letztes Kapitel deaktiviert
  • Alle Dateien UTF-8, Dateinamen in Kleinbuchstaben mit Bindestrich, als ZIP gepackt ausgeliefert

Verwandte Skills