@fectivnfy112358/minimax-code-web 0.1.0-preview.0 → 0.1.0-preview.3

package/server/assets/skills/pdf/templates/reformat-default/skeleton.html

@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<!--
+  reformat-default skeleton
+  -------------------------
+  Used by `bash make.sh reformat`. Placeholders are replaced by
+  scripts/reformat_parse.py:
+
+    <!-- TITLE -->     document title (H1 lifted from source if absent)
+    <!-- SUBTITLE -->  cover line 2 (optional)
+    <!-- AUTHOR -->    cover meta line — author
+    <!-- DATE -->      cover meta line — date (YYYY-MM-DD; defaults to today)
+    <!-- ACCENT -->    CSS hex (--accent), drives section rule + link + table head
+    <!-- BODY_HTML --> markdown-it rendered HTML (h1/h2/h3/p/ul/ol/table/code/…)
+
+  Render:
+    node scripts/render_html.cjs --in page.html --out report.pdf
+-->
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<title><!-- TITLE --></title>
+<style>
+  @page { size: A4 portrait; margin: 18mm 16mm; }
+  * { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+
+  :root {
+    --ink:      #1a1a1a;
+    --ink-2:    #444;
+    --ink-3:    #666;
+    --ink-4:    #999;
+    --rule:     #e5e5e5;
+    --hairline: #efefef;
+    --mute:     #f7f7f7;
+    --accent:   <!-- ACCENT -->;
+    --code-bg:  #f4f4f6;
+  }
+
+  html, body {
+    margin: 0; padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
+                 "PingFang SC", "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
+    color: var(--ink);
+    font-size: 10.5pt; line-height: 1.65;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* ── Cover ───────────────────────────────────────────────────────────── */
+  .cover {
+    height: 261mm;                /* A4 297 - 36 margins */
+    display: flex; flex-direction: column; justify-content: space-between;
+    padding: 16mm 4mm; page-break-after: always;
+    border-top: 4px solid var(--accent);
+  }
+  .cover-top   { display: flex; flex-direction: column; gap: 6mm; }
+  .cover-eyebrow {
+    font-size: 9pt; letter-spacing: 4px; text-transform: uppercase;
+    color: var(--accent); font-weight: 600;
+  }
+  .cover-title {
+    font-size: 32pt; font-weight: 700; line-height: 1.2;
+    letter-spacing: -0.5px; color: var(--ink); margin: 0;
+  }
+  .cover-subtitle {
+    font-size: 14pt; color: var(--ink-2); line-height: 1.5;
+    margin: 4mm 0 0; max-width: 150mm;
+  }
+  .cover-meta {
+    display: flex; gap: 24mm; font-size: 10pt; color: var(--ink-3);
+    border-top: 1px solid var(--rule); padding-top: 6mm;
+  }
+  .cover-meta dt {
+    font-size: 8pt; letter-spacing: 1.5px; text-transform: uppercase;
+    color: var(--ink-4); font-weight: 600; margin-bottom: 2mm;
+  }
+  .cover-meta dd { margin: 0; font-weight: 500; color: var(--ink); }
+
+  /* ── Body ────────────────────────────────────────────────────────────── */
+  .body { padding: 0 4mm; }
+
+  .body h1, .body h2, .body h3, .body h4 {
+    color: var(--ink); letter-spacing: -0.2px; line-height: 1.3;
+    page-break-after: avoid;
+  }
+  .body h1 {
+    font-size: 22pt; font-weight: 700; margin: 14mm 0 6mm;
+    padding-bottom: 3mm; border-bottom: 2px solid var(--accent);
+    page-break-before: always;
+  }
+  .body > h1:first-child { page-break-before: auto; margin-top: 0; }
+  .body h2 {
+    font-size: 15pt; font-weight: 700; margin: 10mm 0 4mm;
+    padding-left: 4mm; border-left: 3px solid var(--accent);
+  }
+  .body h3 { font-size: 12pt; font-weight: 600; margin: 7mm 0 3mm; }
+  .body h4 { font-size: 10.5pt; font-weight: 600; margin: 5mm 0 2mm; color: var(--ink-2); }
+
+  .body p { margin: 0 0 4mm; }
+  .body strong { color: var(--ink); font-weight: 600; }
+  .body em { font-style: italic; }
+  .body a { color: var(--accent); text-decoration: none; border-bottom: 0.5px solid currentColor; }
+
+  .body ul, .body ol { margin: 0 0 5mm; padding-left: 6mm; }
+  .body li { margin-bottom: 1.5mm; }
+  .body li > ul, .body li > ol { margin: 1.5mm 0 0; }
+
+  .body blockquote {
+    margin: 5mm 0; padding: 3mm 5mm;
+    background: var(--mute); border-left: 3px solid var(--accent);
+    color: var(--ink-2); border-radius: 2px;
+  }
+  .body blockquote p { margin: 0 0 2mm; }
+  .body blockquote p:last-child { margin: 0; }
+
+  /* ── Code ────────────────────────────────────────────────────────────── */
+  .body code {
+    font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 9pt;
+    background: var(--code-bg); color: #c7254e; padding: 1px 5px;
+    border-radius: 3px; border: 0.5px solid var(--hairline);
+  }
+  .body pre {
+    background: var(--code-bg); border: 0.5px solid var(--hairline);
+    border-radius: 6px; padding: 4mm 5mm; overflow-x: auto;
+    margin: 5mm 0; font-size: 9pt; line-height: 1.5;
+    page-break-inside: avoid;
+  }
+  .body pre code {
+    background: transparent; color: var(--ink); border: 0; padding: 0;
+    font-size: inherit;
+  }
+
+  /* ── Tables ──────────────────────────────────────────────────────────── */
+  .body table {
+    width: 100%; border-collapse: collapse; margin: 5mm 0;
+    font-size: 9.5pt; page-break-inside: avoid;
+    border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
+  }
+  .body table thead th {
+    background: var(--accent); color: #fff; padding: 2.5mm 3mm;
+    text-align: left; font-weight: 600; font-size: 9pt;
+    letter-spacing: 0.2px;
+  }
+  .body table tbody td {
+    padding: 2mm 3mm; border-top: 1px solid var(--hairline);
+    color: var(--ink-2); vertical-align: top;
+  }
+  .body table tbody tr:nth-child(even) td { background: #fbfbfd; }
+
+  /* ── Images / figures ───────────────────────────────────────────────── */
+  .body img {
+    max-width: 100%; height: auto; border-radius: 4px;
+    display: block; margin: 5mm auto;
+  }
+
+  /* ── Hr ──────────────────────────────────────────────────────────────── */
+  .body hr {
+    border: 0; border-top: 1px solid var(--rule); margin: 8mm 0;
+  }
+
+  /* ── Footer rule ─────────────────────────────────────────────────────── */
+  .footer {
+    margin-top: 14mm; padding-top: 4mm; border-top: 1px solid var(--rule);
+    font-size: 8.5pt; color: var(--ink-4); text-align: center;
+  }
+
+  /* === Screen-emulation: open in browser → looks like the A4 PDF =========== */
+  @media screen {
+    html { background: #d0d0d0; }
+    body { margin: 0; padding: 20px 0; }
+    body > section {
+      width: 210mm; min-height: 297mm; margin: 0 auto 20px;
+      background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.18);
+      box-sizing: border-box; overflow: hidden;
+    }
+  }
+</style>
+</head>
+<body>
+
+<section class="cover">
+  <div class="cover-top">
+    <div class="cover-eyebrow">REPORT · <!-- DATE --></div>
+    <h1 class="cover-title"><!-- TITLE --></h1>
+    <p class="cover-subtitle"><!-- SUBTITLE --></p>
+  </div>
+  <dl class="cover-meta">
+    <div>
+      <dt>Author</dt>
+      <dd><!-- AUTHOR --></dd>
+    </div>
+    <div>
+      <dt>Date</dt>
+      <dd><!-- DATE --></dd>
+    </div>
+  </dl>
+</section>
+
+<section class="body">
+<!-- BODY_HTML -->
+</section>
+
+<div class="footer">— end of document —</div>
+
+</body>
+</html>

package/server/assets/skills/pdf/templates/translate-preserve-layout/README.md

@@ -0,0 +1,147 @@
+# translate-preserve-layout
+
+> Distilled from reference examples m09 (Email -> Chinese-translated PDF, layout preserved). HTML parse
+> -> **terminology freeze** -> translate -> Chromium print.
+
+## 1. When to use
+
+- **EN keywords**: translate document, preserve layout, preserve formatting, email translation,
+  report translation, image-preserving translation
+- **CN keywords**: 翻译保版、邮件翻译、报告翻译、保留排版、保留图片、译文 PDF、保持不变
+- **Sample user asks**:
+  - "Translate this report inside an email to Chinese and save as a PDF; keep the content and the
+    icons intact."
+  - "Translate this report to Chinese preserving all images and layout."
+
+## 2. Pipeline
+
+HTML parse -> terminology freeze -> translate -> Chromium print -> PDF
+
+1. Parse the source (`.eml` / `.html` / `.pdf` text layer) into structured paragraphs + image
+   references (**preserve byte-level** URL / data-uri / cid: references).
+2. Extract domain terms -> freeze them in `terminology.json` (after the first 3 iterations the file
+   is read-only for every later round).
+3. Translate per-paragraph with the frozen glossary; categorise by type: metadata / heading / body /
+   list_item / caption / footnote / disclaimer / table_cell.
+4. Emit HTML with the translated text + **original image references untouched** (no re-encoding).
+5. Playwright Chromium print -> PDF (preserves CJK / transparency / EXIF).
+
+Why not the token pipeline: the source already has a rich layout (tables, figures, nested lists). A
+token rebuild loses both spatial fidelity and image byte tracking. HTML -> HTML -> PDF is the
+natural "layout-preserving" path.
+
+## 3. Document shape
+
+- **Pages**: typically 5 A4 (varies; tracks the source).
+- **Structure**: metadata (subject / from / to / date) -> header (logo) -> body (paragraphs +
+  headings + lists) -> exhibits (figures + captions + footnotes) -> team cards -> footer /
+  disclaimer.
+- **Page size**: A4, 11-14 mm margins (match source).
+- **Image preservation**: byte-level (no Pillow post-processing, no resize, transparency smask
+  preserved).
+
+## 4. Visual params
+
+- **Palette**: match source (unless the user requests otherwise).
+- **Typography**: PingFang SC / Hiragino Sans GB / Microsoft YaHei / Source Han Sans CN for body;
+  keep the source heading fonts.
+- **Images**: keep `<img src="cid:...">` or `<img src="data:image/...">` exactly as-is;
+  `max-width: 88%` to prevent overflow.
+- **Line-height**: minimum 1.6 (CJK needs breathing room; 1.5 is too tight and characters collide).
+- **Exhibits**: `page-break-inside: avoid` + `max-height: 400pt` to prevent orphans.
+
+## 5. Skeleton
+
+See [`skeleton.html`](skeleton.html) (HTML template, ~150 lines) +
+[`terminology.template.json`](terminology.template.json) (terminology schema).
+
+**Quick start**:
+
+```bash
+# 1. Extract source
+python3 -c "import html_parse; html_parse.extract('source.eml', out='/tmp/extracted/')"
+# 2. Build terminology.json (settle within first 3 iterations, then freeze)
+cp templates/translate-preserve-layout/terminology.template.json /tmp/extracted/terminology.json
+# Fill in your domain terms.
+# 3. Translate every paragraph using the frozen terminology.
+python3 translate.py --in /tmp/extracted/ --terminology /tmp/extracted/terminology.json --out /tmp/translated/
+# 4. Render HTML (skeleton + translated data).
+cp templates/translate-preserve-layout/skeleton.html /tmp/translated/page.html
+# Fill in placeholders.
+# 5. Chromium print.
+node packages/local-runtime/assets/skills/pdf/scripts/render_html.cjs /tmp/translated/page.html /tmp/translated/out.pdf
+# 6. Verify image count.
+src_imgs=$(pdfimages -list source.pdf | tail -n +3 | wc -l)
+out_imgs=$(pdfimages -list /tmp/translated/out.pdf | tail -n +3 | wc -l)
+[ "$src_imgs" = "$out_imgs" ] || echo "Warning: image count drift: src=$src_imgs out=$out_imgs"
+```
+
+## 6. Progressive case
+
+For a full production trace of a rich Goldman Sachs research EML translated to Chinese while
+preserving cid chart images, links, A4 geometry, and CJK typography, load:
+
+- [`../../docs/email-translation-goldman-two-sessions-case.md`](../../docs/email-translation-goldman-two-sessions-case.md)
+- [`cases/goldman-china-two-sessions-cn.html`](cases/goldman-china-two-sessions-cn.html)
+
+Use the case when the source EML has `text/html` plus inline `cid:` images. It contains the
+optimized reusable translation prompt, Doctype-safe segment extraction, and verification gates; do
+not duplicate those details here.
+
+## 7. Pitfalls (from m09 production)
+
+- **Terminology drift** — fatal: the same term gets three different translations across iterations
+  (e.g. "Two Sessions" rendered three different ways in Chinese). **Freeze `terminology.json` after
+  the first 3 iterations; treat it as read-only afterwards.**
+- **Lost images — P0 fail**: source has 6 images, output has 5 -> the acceptance gate fails. **Count
+  images via `pdfimages -list` before and after rendering; source must equal output.**
+- **Image byte drift**: re-encoding through Pillow / base64 loses transparency + EXIF. **Skip
+  post-processing**; preserve `cid:` references and let Playwright render natively.
+- **CJK line-height**: 1.5 is too tight — PingFang / Noto characters overlap. Minimum 1.6; verify
+  visually with `pdftotext`.
+- **Header fields forgotten**: agents commonly skip Subject / From / Date / Footer. Mark them
+  explicitly with `is_translatable: true` in the schema.
+- **Table cell width px -> mm fails**: use percentages or `max-width` constraints.
+- **Caption / footnote orphans**: `page-break-inside: avoid` on `<figure>`.
+- **Over-translating proper nouns**: agents invent Chinese names for English authors (e.g. "Andrew
+  Tilton" -> a fabricated Chinese name). **Mark authors / companies / places without standard CN
+  translations as `category: proper_noun, note: preserve English / no invented translations`.**
+- **Quote preservation**: "around 5%" / "4.5-5.0%" — the Chinese version must keep proper Chinese
+  quotation marks. Note `preserve` in `terminology.json` and grep the rendered PDF to verify.
+
+## 8. Generalization
+
+**Required placeholders**:
+
+- TRANSLATED_TITLE / SUBJECT / FROM / TO / DATE / SECTION_HEADING_TRANSLATED.
+- `paragraphs_translated[]` (categorised by type).
+- `images[]` (with original cid: / data-uri).
+- `terminology.json` (per-domain glossary; frozen after 3 iterations).
+- Exhibit captions + footnotes (translated independently).
+
+**Optional / swappable**:
+
+- Target language (zh-CN / zh-TW / ja / ko) — change `lang=""` and the font cascade.
+- Page size / margins (match source / override).
+- Fonts (PingFang <-> Noto Sans CJK SC for Linux).
+- Image reference style (cid: / data-uri / inline base64 — follow the source).
+
+**Structural invariants**:
+
+- `@page A4` + 11-14 mm margins (match source).
+- CJK fonts FIRST in the cascade.
+- `max-width: 88%` on `<img.exhibit>`.
+- `page-break-inside: avoid` on `<figure>`.
+- `line-height: 1.6` minimum.
+- Preserve every heading level.
+- The metadata block (subject / from / to / date) always sits at the top of the document.
+- Author names mark `proper_noun` (preserve English; do not invent translations).
+
+**Domain swappable**: finance (baseline) / legal / technical / medical / political — each domain
+produces an independent `terminology.json`.
+
+**Diversify every run.** REFORMAT is the one route where you should **not** invent new visuals — the
+whole point is layout fidelity to the source. But per-domain `terminology.json`, target language,
+and CJK font cascade still need to be re-picked per task: a finance translation for a HK firm and a
+medical translation for a JP hospital should not share the same glossary or font stack. Always start
+a fresh `terminology.json` from the source's domain.