@boxpdf/html-writer 0.1.18 → 0.1.19

package/dist/index.js

@@ -2,39 +2,150 @@
 import { structurePage as structurePage2, tableToHtml } from "@boxpdf/reader/structure";
 
 // src/semantic-caption.ts
-function isClearMediaCaption(media, block, pageWidth, pageHeight, pageLines) {
-  if (block.type !== "paragraph" || block.lines.length === 0) return false;
-  const bounds2 = unionLines(block.lines);
-  const lineHeight = median(block.lines.map((line) => line.bounds.height));
-  if (media.bounds.width < pageWidth * 0.2 || media.bounds.height < lineHeight * 10) return false;
-  if (media.bounds.x < -2 || media.bounds.y < -2 || media.bounds.x + media.bounds.width > pageWidth + 2 || media.bounds.y + media.bounds.height > pageHeight + 2)
-    return false;
-  const gap = media.bounds.y - (bounds2.y + bounds2.height);
-  if (gap < -lineHeight * 0.15 || gap > lineHeight * 1.25) return false;
-  const mediaCenter = media.bounds.x + media.bounds.width / 2;
-  const captionCenter = bounds2.x + bounds2.width / 2;
-  if (Math.abs(mediaCenter - captionCenter) > Math.max(3, media.bounds.width * 0.03)) return false;
-  if (bounds2.width < media.bounds.width * 0.45 || bounds2.width > media.bounds.width * 1.06) {
-    return false;
-  }
-  const first = block.lines.flatMap((line) => line.spans).find((span) => /\S/u.test(span.text));
-  if (!first) return false;
-  const otherLines = pageLines.filter((line) => !block.lines.includes(line));
-  return fontSignature(first) !== dominantFontSignature(otherLines);
-}
+var minimumCaptionScore = 0.72;
 function clearMediaCaptionAssociations(media, blocks, pageWidth, pageHeight, pageLines) {
+  const candidates = blocks.flatMap((block) => {
+    const candidate = captionCandidate(block);
+    return candidate ? [candidate] : [];
+  });
+  const preliminary = media.flatMap(
+    (item) => candidates.flatMap((candidate) => {
+      const evidence = scoreCaption(item, candidate, pageWidth, pageHeight, pageLines, 0);
+      return evidence ? [{ media: item, candidate, evidence }] : [];
+    })
+  );
+  const patterns = repeatedPatterns(preliminary);
+  const edges = preliminary.map((edge) => {
+    const evidence = scoreCaption(
+      edge.media,
+      edge.candidate,
+      pageWidth,
+      pageHeight,
+      pageLines,
+      patterns.get(patternKey(edge)) ?? 0
+    );
+    return evidence ? { ...edge, evidence } : void 0;
+  }).filter((edge) => Boolean(edge)).filter((edge) => edge.evidence.score >= minimumCaptionScore);
+  const bestForMedia = bestEdges(edges, (edge) => edge.media);
+  const bestForCaption = bestEdges(edges, (edge) => edge.candidate.block);
   const associations = /* @__PURE__ */ new Map();
-  for (const item of media) {
-    const candidates = blocks.filter((block) => isClearMediaCaption(item, block, pageWidth, pageHeight, pageLines)).filter((block) => !associations.has(block)).sort((left, right) => captionGap(item, left) - captionGap(item, right));
-    const caption = candidates[0];
-    if (caption) associations.set(caption, item);
+  for (const edge of edges) {
+    if (bestForMedia.get(edge.media) === edge && bestForCaption.get(edge.candidate.block) === edge) {
+      associations.set(edge.candidate.block, edge.media);
+    }
   }
   return associations;
 }
-function captionGap(media, block) {
-  if (block.type !== "paragraph") return Number.POSITIVE_INFINITY;
-  const bounds2 = unionLines(block.lines);
-  return Math.abs(media.bounds.y - bounds2.y - bounds2.height);
+function scoreCaption(media, candidate, pageWidth, pageHeight, pageLines, repeatedAlignment) {
+  if (!insidePage(media.bounds, pageWidth, pageHeight)) return void 0;
+  if (media.bounds.width < pageWidth * 0.06 || media.bounds.height < candidate.lineHeight * 1.5)
+    return void 0;
+  const relation = verticalRelation(media.bounds, candidate.bounds);
+  if (!relation) return void 0;
+  const maximumGap = Math.max(candidate.lineHeight * 3, pageHeight * 0.035);
+  if (relation.gap > maximumGap) return void 0;
+  const overlapWidth = overlap(
+    media.bounds.x,
+    media.bounds.width,
+    candidate.bounds.x,
+    candidate.bounds.width
+  );
+  const horizontalOverlap = overlapWidth / Math.max(1, Math.min(media.bounds.width, candidate.bounds.width));
+  const centerDistance = Math.abs(center(media.bounds) - center(candidate.bounds));
+  const centerAlignment = clamp01(
+    1 - centerDistance / Math.max(media.bounds.width, candidate.bounds.width)
+  );
+  if (horizontalOverlap < 0.45 && centerAlignment < 0.82) return void 0;
+  const relativeWidth = Math.min(media.bounds.width, candidate.bounds.width) / Math.max(media.bounds.width, candidate.bounds.width);
+  const gapRatio = clamp01(1 - relation.gap / maximumGap);
+  const interveningContent = interveningScore(media.bounds, candidate, relation.side, pageLines);
+  if (interveningContent === 0) return void 0;
+  if (relation.side === "above" && (gapRatio < 0.6 || interveningContent < 1)) return void 0;
+  const fontContrast = captionFontContrast(candidate, pageLines);
+  const surroundingWhitespace = whitespaceScore(candidate, relation.side, relation.gap, pageLines);
+  const score = gapRatio * 0.22 + horizontalOverlap * 0.17 + centerAlignment * 0.13 + relativeWidth * 0.09 + fontContrast * 0.13 + surroundingWhitespace * 0.09 + interveningContent * 0.09 + repeatedAlignment * 0.08;
+  return {
+    score,
+    side: relation.side,
+    gapRatio,
+    horizontalOverlap,
+    centerAlignment,
+    relativeWidth,
+    fontContrast,
+    surroundingWhitespace,
+    interveningContent,
+    repeatedAlignment
+  };
+}
+function captionCandidate(block) {
+  if (block.type !== "paragraph" || block.lines.length === 0) return void 0;
+  const first = block.lines.flatMap((line) => line.spans).find((span) => /\S/u.test(span.text));
+  if (!first) return void 0;
+  return {
+    block,
+    bounds: unionLines(block.lines),
+    lineHeight: median(block.lines.map((line) => line.bounds.height)),
+    font: fontSignature(first)
+  };
+}
+function verticalRelation(media, caption) {
+  const belowGap = media.y - (caption.y + caption.height);
+  if (belowGap >= -caption.height * 0.15) return { side: "below", gap: Math.max(0, belowGap) };
+  const aboveGap = caption.y - (media.y + media.height);
+  if (aboveGap >= -caption.height * 0.15) return { side: "above", gap: Math.max(0, aboveGap) };
+  return void 0;
+}
+function interveningScore(media, candidate, side, pageLines) {
+  const lower = side === "below" ? candidate.bounds.y + candidate.bounds.height : media.y + media.height;
+  const upper = side === "below" ? media.y : candidate.bounds.y;
+  const blockers = pageLines.filter(
+    (line) => !candidate.block.lines.includes(line) && line.bounds.y < upper && line.bounds.y + line.bounds.height > lower && overlap(line.bounds.x, line.bounds.width, media.x, media.width) / Math.max(1, Math.min(line.bounds.width, media.width)) >= 0.25
+  );
+  return blockers.length === 0 ? 1 : blockers.length === 1 ? 0.35 : 0;
+}
+function captionFontContrast(candidate, pageLines) {
+  const otherLines = pageLines.filter((line) => !candidate.block.lines.includes(line));
+  if (candidate.font !== dominantFontSignature(otherLines)) return 1;
+  const candidateSize = median(
+    candidate.block.lines.flatMap((line) => line.spans.map((span) => span.fontSize))
+  );
+  const bodySize = median(otherLines.flatMap((line) => line.spans.map((span) => span.fontSize)));
+  return Math.abs(candidateSize - bodySize) >= 0.75 ? 0.65 : 0.15;
+}
+function whitespaceScore(candidate, side, mediaGap, pageLines) {
+  const awayGaps = pageLines.filter((line) => !candidate.block.lines.includes(line)).filter(
+    (line) => overlap(line.bounds.x, line.bounds.width, candidate.bounds.x, candidate.bounds.width) > 0
+  ).flatMap((line) => {
+    if (side === "below" && line.bounds.y + line.bounds.height <= candidate.bounds.y)
+      return [candidate.bounds.y - line.bounds.y - line.bounds.height];
+    if (side === "above" && line.bounds.y >= candidate.bounds.y + candidate.bounds.height)
+      return [line.bounds.y - candidate.bounds.y - candidate.bounds.height];
+    return [];
+  });
+  const awayGap = Math.min(...awayGaps, Number.POSITIVE_INFINITY);
+  return Number.isFinite(awayGap) ? clamp01((awayGap + candidate.lineHeight * 0.25) / (mediaGap + candidate.lineHeight)) : 1;
+}
+function repeatedPatterns(edges) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const edge of edges.filter((item) => item.evidence.score >= minimumCaptionScore - 0.08)) {
+    counts.set(patternKey(edge), (counts.get(patternKey(edge)) ?? 0) + 1);
+  }
+  return new Map([...counts].map(([key, count]) => [key, count >= 2 ? 1 : 0]));
+}
+function patternKey(edge) {
+  const widthRatio = edge.candidate.bounds.width / Math.max(1, edge.media.bounds.width);
+  return `${edge.candidate.font}|${edge.evidence.side}|${Math.round(widthRatio * 4) / 4}`;
+}
+function bestEdges(edges, key) {
+  const output = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    const existing = output.get(key(edge));
+    if (!existing || edge.evidence.score > existing.evidence.score) output.set(key(edge), edge);
+  }
+  return output;
+}
+function insidePage(bounds2, pageWidth, pageHeight) {
+  return bounds2.x >= -2 && bounds2.y >= -2 && bounds2.x + bounds2.width <= pageWidth + 2 && bounds2.y + bounds2.height <= pageHeight + 2;
 }
 function unionLines(lines) {
   const x = Math.min(...lines.map((line) => line.bounds.x));
@@ -54,6 +165,15 @@ function dominantFontSignature(lines) {
 function fontSignature(span) {
   return `${(span.fontFamily ?? span.fontName ?? "").toLocaleLowerCase("en")}|${Math.round(span.fontSize * 2) / 2}|${span.color ?? ""}`;
 }
+function center(bounds2) {
+  return bounds2.x + bounds2.width / 2;
+}
+function overlap(left, leftSize, right, rightSize) {
+  return Math.max(0, Math.min(left + leftSize, right + rightSize) - Math.max(left, right));
+}
+function clamp01(value) {
+  return Math.max(0, Math.min(1, value));
+}
 function median(values) {
   const ordered = [...values].sort((left, right) => left - right);
   return ordered[Math.floor(ordered.length / 2)] ?? 1;
@@ -263,7 +383,7 @@ function base64(bytes) {
 function semanticMedia(page) {
   const output = (page.images ?? []).map((image) => rasterMedia(image));
   output.push(...vectorMedia(page));
-  return output.sort((left, right) => right.bounds.y - left.bounds.y);
+  return mediaComponents(output, page).sort((left, right) => right.bounds.y - left.bounds.y);
 }
 function rasterMedia(image) {
   const bounds2 = transformedUnitBounds(image.transform);
@@ -272,6 +392,7 @@ function rasterMedia(image) {
   const opacity = unitInterval(image.opacity) ? `;opacity:${number2(image.opacity)}` : "";
   return {
     bounds: bounds2,
+    kind: "raster",
     html: `<img class="pdf-semantic-media" src="data:${mime};base64,${base64(data)}" width="${number2(bounds2.width)}" height="${number2(bounds2.height)}" alt="" style="max-width:100%;height:auto${opacity}">`
   };
 }
@@ -312,11 +433,70 @@ function vectorMedia(page) {
     const fontFaces = (page.fonts ?? []).filter((font) => fontIds.has(font.id)).map((font) => visualFontFace(font, aliases)).join("");
     return {
       bounds: bounds2,
+      kind: "vector",
       html: `<svg class="pdf-semantic-media" xmlns="http://www.w3.org/2000/svg" viewBox="${number2(bounds2.x)} ${number2(page.height - bounds2.y - bounds2.height)} ${number2(bounds2.width)} ${number2(bounds2.height)}" style="display:block;max-width:100%;height:auto" aria-hidden="true">${fontFaces ? `<style>${fontFaces}</style>` : ""}${paths.length ? `<defs>${vectorPathClipDefinitions(paths, page.number)}</defs>` : ""}<g transform="translate(0 ${number2(page.height)}) scale(1 -1)">${fills.map(vectorFillSvg).join("") + paths.map(({ path, index }) => vectorPathSvg(path, page.number, index)).join("")}</g>${overlay.map((span) => vectorText(span, page.height, aliases)).join("")}</svg>`,
       ...consumedSpans.length > 0 ? { consumedSpans } : {}
     };
   });
 }
+function mediaComponents(media, page) {
+  const components = [];
+  for (const item of media) {
+    if (isPageBackdrop(item.bounds, page)) {
+      components.push([item]);
+      continue;
+    }
+    const matches = components.filter(
+      (component) => !component.some((member) => isPageBackdrop(member.bounds, page)) && component.some((member) => mediaPiecesTouch(member.bounds, item.bounds))
+    );
+    if (matches.length === 0) {
+      components.push([item]);
+      continue;
+    }
+    const target = matches[0];
+    target.push(item);
+    for (const component of matches.slice(1)) {
+      target.push(...component);
+      components.splice(components.indexOf(component), 1);
+    }
+  }
+  return components.map((component) => compositeMedia(component));
+}
+function compositeMedia(items) {
+  if (items.length === 1) return items[0];
+  const bounds2 = unionBounds(items.map((item) => item.bounds));
+  const layers = items.map((item) => {
+    const left = (item.bounds.x - bounds2.x) / bounds2.width * 100;
+    const top = (bounds2.y + bounds2.height - item.bounds.y - item.bounds.height) / bounds2.height * 100;
+    const width = item.bounds.width / bounds2.width * 100;
+    const height = item.bounds.height / bounds2.height * 100;
+    return `<div style="position:absolute;left:${number2(left)}%;top:${number2(top)}%;width:${number2(width)}%;height:${number2(height)}%;overflow:hidden">${item.html}</div>`;
+  }).join("");
+  return {
+    bounds: bounds2,
+    kind: "composite",
+    html: `<div class="pdf-semantic-media pdf-semantic-media-composite" style="position:relative;max-width:100%;width:${number2(bounds2.width)}px;aspect-ratio:${number2(bounds2.width)}/${number2(bounds2.height)}">${layers}</div>`,
+    consumedSpans: items.flatMap((item) => item.consumedSpans ?? [])
+  };
+}
+function mediaPiecesTouch(left, right) {
+  const xOverlap = overlap2(left.x, left.width, right.x, right.width);
+  const yOverlap = overlap2(left.y, left.height, right.y, right.height);
+  if (xOverlap > 0 && yOverlap > 0) return true;
+  const horizontalGap = axisGap(left.x, left.width, right.x, right.width);
+  const verticalGap = axisGap(left.y, left.height, right.y, right.height);
+  if (horizontalGap <= 2 && yOverlap / Math.min(left.height, right.height) >= 0.65) return true;
+  return verticalGap <= 2 && xOverlap / Math.min(left.width, right.width) >= 0.65;
+}
+function isPageBackdrop(bounds2, page) {
+  return bounds2.width * bounds2.height >= page.width * page.height * 0.7;
+}
+function overlap2(left, leftSize, right, rightSize) {
+  return Math.max(0, Math.min(left + leftSize, right + rightSize) - Math.max(left, right));
+}
+function axisGap(left, leftSize, right, rightSize) {
+  return Math.max(0, right - left - leftSize, left - right - rightSize);
+}
 function vectorComponents(primitives, padding) {
   const components = [];
   for (const primitive of primitives) {
@@ -487,12 +667,16 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
       page.structured.lines
     );
     const captionedMedia = new Set(captions.values());
+    const emittedMedia = /* @__PURE__ */ new Set();
     const futureFurniture = new Set(future.flatMap((candidate) => marginSignatures(candidate)));
     const repeatedFurniture = /* @__PURE__ */ new Set([...seenFurniture, ...futureFurniture]);
     for (const [blockIndex, block] of page.structured.blocks.entries()) {
       const nextBlock = page.structured.blocks[blockIndex + 1];
       const blockY = semanticBlockY(block);
       let emittedAsCaption = false;
+      while (page.media[mediaIndex] && emittedMedia.has(page.media[mediaIndex])) {
+        mediaIndex += 1;
+      }
       while ((page.media[mediaIndex]?.bounds.y ?? -Infinity) >= blockY) {
         await flushPendingParagraph();
         const item = page.media[mediaIndex];
@@ -500,6 +684,7 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
           const html2 = `<figure class="pdf-semantic-figure">${item.html}<figcaption>${semanticTextHtml(block.text, block.lines, defaultColor)}</figcaption></figure>`;
           if (activeTable) pendingMedia.push(html2);
           else await write(html2);
+          emittedMedia.add(item);
           mediaIndex += 1;
           emittedAsCaption = true;
           break;
@@ -510,6 +695,15 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
         else await write(html);
         mediaIndex += 1;
       }
+      const associatedMedia = captions.get(block);
+      if (!emittedAsCaption && associatedMedia && block.type === "paragraph") {
+        await flushPendingParagraph();
+        const html = `<figure class="pdf-semantic-figure">${associatedMedia.html}<figcaption>${semanticTextHtml(block.text, block.lines, defaultColor)}</figcaption></figure>`;
+        if (activeTable) pendingMedia.push(html);
+        else await write(html);
+        emittedMedia.add(associatedMedia);
+        emittedAsCaption = true;
+      }
       if (emittedAsCaption) continue;
       if (isRepeatedFurniture(block, page, repeatedFurniture)) {
         stats.suppressedFurniture += 1;
@@ -604,10 +798,13 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
       await write(semanticBlockHtml(block, defaultColor));
     }
     while (mediaIndex < page.media.length) {
-      await flushPendingParagraph();
-      const html = `<div class="pdf-semantic-visual">${page.media[mediaIndex]?.html}</div>`;
-      if (activeTable) pendingMedia.push(html);
-      else await write(html);
+      const item = page.media[mediaIndex];
+      if (item && !emittedMedia.has(item)) {
+        await flushPendingParagraph();
+        const html = `<div class="pdf-semantic-visual">${item.html}</div>`;
+        if (activeTable) pendingMedia.push(html);
+        else await write(html);
+      }
       mediaIndex += 1;
     }
     for (const signature of marginSignatures(page)) seenFurniture.add(signature);
@@ -1014,18 +1211,22 @@ async function writeFlowPage(page, write) {
     structured.lines
   );
   const captionedMedia = new Set(captions.values());
+  const emittedMedia = /* @__PURE__ */ new Set();
   await write(
     `<section class="pdf-page pdf-page--semantic pdf-page--flow" data-page="${page.number}">`
   );
   for (const block of structured.blocks) {
     const blockY = semanticBlockY2(block);
     let emittedAsCaption = false;
+    while (media[mediaIndex] && emittedMedia.has(media[mediaIndex]))
+      mediaIndex += 1;
     while ((media[mediaIndex]?.bounds.y ?? -Infinity) >= blockY) {
       const item = media[mediaIndex];
       if (item && captions.get(block) === item && block.type === "paragraph") {
         await write(
           `<figure class="pdf-semantic-figure">${item.html}<figcaption>${semanticTextHtml(block.text, block.lines, defaultColor)}</figcaption></figure>`
         );
+        emittedMedia.add(item);
         mediaIndex += 1;
         emittedAsCaption = true;
         break;
@@ -1034,6 +1235,14 @@ async function writeFlowPage(page, write) {
       await write(`<div class="pdf-semantic-visual">${item?.html}</div>`);
       mediaIndex += 1;
     }
+    const associatedMedia = captions.get(block);
+    if (!emittedAsCaption && associatedMedia && block.type === "paragraph") {
+      await write(
+        `<figure class="pdf-semantic-figure">${associatedMedia.html}<figcaption>${semanticTextHtml(block.text, block.lines, defaultColor)}</figcaption></figure>`
+      );
+      emittedMedia.add(associatedMedia);
+      emittedAsCaption = true;
+    }
     if (emittedAsCaption) continue;
     if (block.type === "table") await write(tableToHtml(block.table));
     else if (block.type === "heading") {
@@ -1088,7 +1297,10 @@ async function writeFlowPage(page, write) {
     }
   }
   while (mediaIndex < media.length) {
-    await write(`<div class="pdf-semantic-visual">${media[mediaIndex]?.html}</div>`);
+    const item = media[mediaIndex];
+    if (item && !emittedMedia.has(item)) {
+      await write(`<div class="pdf-semantic-visual">${item.html}</div>`);
+    }
     mediaIndex += 1;
   }
   await write("</section>");