) => {
const files = [...(event.target.files ?? [])];
event.target.value = "";
@@ -343,7 +464,15 @@ export function Workbench() {
if (!selected) return;
setPages((current) =>
current.map((page) =>
- page.id === selected.id ? { ...page, adjustments } : page,
+ page.id === selected.id
+ ? {
+ ...page,
+ adjustments,
+ ocrWords: undefined,
+ ocrHocr: undefined,
+ ocrTsv: undefined,
+ }
+ : page,
),
);
};
@@ -353,11 +482,14 @@ export function Workbench() {
const runDeskew = async () => {
if (!selected) return;
- setBusy(true);
+ const controller = beginProcessing("Preparing deskew detection");
setError(undefined);
setNotice("Estimating text-line angle locally…");
try {
- const angle = await detectDeskew(selected);
+ const angle = await detectDeskew(selected, {
+ signal: controller.signal,
+ onProgress: reportProcessing,
+ });
patchSelected({ deskew: angle });
setNotice(
angle === 0
@@ -365,44 +497,70 @@ export function Workbench() {
: `Applied an estimated ${angle.toFixed(1)}° correction.`,
);
} catch (reason) {
- setError(
- reason instanceof Error ? reason.message : "Deskew estimation failed.",
- );
+ if (
+ !controller.signal.aborted &&
+ !(reason instanceof DOMException && reason.name === "AbortError")
+ )
+ setError(
+ reason instanceof Error
+ ? reason.message
+ : "Deskew estimation failed.",
+ );
} finally {
- setBusy(false);
+ finishProcessing(controller);
}
};
const exportCurrentImage = async (type: "image/png" | "image/jpeg") => {
if (!selected) return;
- setBusy(true);
+ const controller = beginProcessing("Preparing image export");
setError(undefined);
setNotice(`Rendering ${type === "image/png" ? "PNG" : "JPEG"} locally…`);
try {
- await exportImage(selected, type);
+ await exportImage(selected, type, {
+ signal: controller.signal,
+ onProgress: reportProcessing,
+ });
setNotice(
`Rendered ${selected.name} within the 10-megapixel export budget.`,
);
} catch (reason) {
- setError(
- `${reason instanceof Error ? reason.message : "Image export failed."} The workspace was retained.`,
- );
+ if (
+ !controller.signal.aborted &&
+ !(reason instanceof DOMException && reason.name === "AbortError")
+ )
+ setError(
+ `${reason instanceof Error ? reason.message : "Image export failed."} The workspace was retained.`,
+ );
} finally {
- setBusy(false);
+ finishProcessing(controller);
}
};
const runOcr = async () => {
if (!selected || !ocrConsent) return;
- setBusy(true);
+ const controller = beginProcessing("Preparing OCR image");
setError(undefined);
setOcrProgress({ status: "Preparing local OCR", progress: 0 });
try {
- const rendered = await renderPage(selected, 4_000_000);
+ const rendered = await renderPage(selected, 4_000_000, {
+ signal: controller.signal,
+ onProgress: reportProcessing,
+ });
const image = await canvasBlob(rendered.canvas, "image/png");
const result = await recognizeEnglish(image, (status, progress) =>
setOcrProgress({ status, progress }),
);
+ const ocrWords = result.words.map((word) => ({
+ text: word.text,
+ confidence: word.confidence,
+ bbox: {
+ x0: Math.max(0, Math.min(1, word.bbox.x0 / rendered.canvas.width)),
+ y0: Math.max(0, Math.min(1, word.bbox.y0 / rendered.canvas.height)),
+ x1: Math.max(0, Math.min(1, word.bbox.x1 / rendered.canvas.width)),
+ y1: Math.max(0, Math.min(1, word.bbox.y1 / rendered.canvas.height)),
+ },
+ }));
setPages((current) =>
current.map((page) =>
page.id === selected.id
@@ -410,6 +568,9 @@ export function Workbench() {
...page,
ocrText: result.text,
ocrConfidence: result.confidence,
+ ocrWords,
+ ocrHocr: result.hocr,
+ ocrTsv: result.tsv,
}
: page,
),
@@ -418,17 +579,21 @@ export function Workbench() {
`English OCR finished with ${result.confidence.toFixed(1)}% engine confidence.`,
);
} catch (reason) {
- setError(
- `${reason instanceof Error ? reason.message : "OCR failed."} The page and previous text were retained.`,
- );
+ if (
+ !controller.signal.aborted &&
+ !(reason instanceof DOMException && reason.name === "AbortError")
+ )
+ setError(
+ `${reason instanceof Error ? reason.message : "OCR failed."} The page and previous text were retained.`,
+ );
} finally {
- setBusy(false);
+ finishProcessing(controller);
setOcrProgress(undefined);
}
};
const exportPdf = async () => {
- setBusy(true);
+ const controller = beginProcessing("Preparing PDF export");
setError(undefined);
try {
const pdf = await buildPdf(
@@ -437,15 +602,23 @@ export function Workbench() {
pdfMargin,
(completed, total) =>
setNotice(`Rendering PDF page ${completed} of ${total}…`),
+ {
+ signal: controller.signal,
+ onProgress: reportProcessing,
+ },
);
triggerBlobDownload(pdf, "local-scan.pdf");
setNotice(`Created a ${formatBytes(pdf.size)} image-only PDF locally.`);
} catch (reason) {
- setError(
- `${reason instanceof Error ? reason.message : "PDF export failed."} The workspace was retained.`,
- );
+ if (
+ !controller.signal.aborted &&
+ !(reason instanceof DOMException && reason.name === "AbortError")
+ )
+ setError(
+ `${reason instanceof Error ? reason.message : "PDF export failed."} The workspace was retained.`,
+ );
} finally {
- setBusy(false);
+ finishProcessing(controller);
}
};
@@ -478,6 +651,17 @@ export function Workbench() {
{notice}
+ {pixelProgress ? (
+
+
+ {pixelProgress.stage}{" "}
+
+
+ Cancel processing
+
+
{error}
@@ -732,18 +916,7 @@ export function Workbench() {
Recognize selected page
{busy && ocrProgress ? (
-
- void cancelOcr().catch((reason: unknown) =>
- setError(
- reason instanceof Error
- ? reason.message
- : "OCR cancellation failed.",
- ),
- )
- }
- >
+
Cancel OCR
) : null}
@@ -791,6 +964,36 @@ export function Workbench() {
>
Download text
+ {selected.ocrHocr ? (
+
+ triggerBlobDownload(
+ new Blob([selected.ocrHocr ?? ""], {
+ type: "text/html;charset=utf-8",
+ }),
+ `${selected.name.replace(/\.[^.]+$/u, "")}.hocr.html`,
+ )
+ }
+ >
+ Download hOCR geometry
+
+ ) : null}
+ {selected.ocrTsv ? (
+
+ triggerBlobDownload(
+ new Blob([selected.ocrTsv ?? ""], {
+ type: "text/tab-separated-values;charset=utf-8",
+ }),
+ `${selected.name.replace(/\.[^.]+$/u, "")}.tsv`,
+ )
+ }
+ >
+ Download OCR TSV
+
+ ) : null}
) : null}
@@ -829,9 +1032,32 @@ export function Workbench() {
>
Download {pages.length}-page PDF
+ page.ocrText)}
+ onClick={() =>
+ triggerBlobDownload(
+ new Blob(
+ [
+ pages
+ .map(
+ (page, index) =>
+ `--- Page ${index + 1}: ${page.name} ---\n${page.ocrText ?? ""}`,
+ )
+ .join("\n\n"),
+ ],
+ { type: "text/plain;charset=utf-8" },
+ ),
+ "local-scan-ocr.txt",
+ )
+ }
+ >
+ Download all OCR text
+
- The PDF is image-only in v0.1. OCR text downloads separately; no
- invisible text layer is guessed without reliable word geometry.
+ The PDF stays image-only so text is never silently misaligned.
+ Positioned OCR can be inspected and exported separately as hOCR or
+ TSV.
diff --git a/src/scan/export.ts b/src/scan/export.ts
index d20d980..8b8e89a 100644
--- a/src/scan/export.ts
+++ b/src/scan/export.ts
@@ -1,5 +1,5 @@
import { triggerBlobDownload } from "@add-ideas/toolbox-helpers";
-import { canvasBlob, renderPage } from "./render";
+import { canvasBlob, renderPage, type RenderTaskOptions } from "./render";
import { MAX_EXPORT_PIXELS, type ScanPage } from "./types";
export type PdfPageSize = "source" | "a4" | "letter";
@@ -7,8 +7,9 @@ export type PdfPageSize = "source" | "a4" | "letter";
export async function exportImage(
page: ScanPage,
type: "image/png" | "image/jpeg",
+ options: RenderTaskOptions = {},
) {
- const rendered = await renderPage(page, MAX_EXPORT_PIXELS);
+ const rendered = await renderPage(page, MAX_EXPORT_PIXELS, options);
const blob = await canvasBlob(rendered.canvas, type);
const extension = type === "image/png" ? "png" : "jpg";
triggerBlobDownload(
@@ -32,12 +33,13 @@ export async function buildPdf(
pageSize: PdfPageSize,
marginPoints: number,
onProgress: (completed: number, total: number) => void,
+ options: RenderTaskOptions = {},
): Promise {
if (pages.length === 0)
throw new RangeError("Add at least one page before exporting a PDF.");
const [{ jsPDF }, first] = await Promise.all([
import("jspdf"),
- renderPage(pages[0]!, MAX_EXPORT_PIXELS),
+ renderPage(pages[0]!, MAX_EXPORT_PIXELS, options),
]);
const firstSize = pagePoints(
pageSize,
@@ -53,7 +55,9 @@ export async function buildPdf(
});
for (let index = 0; index < pages.length; index += 1) {
const rendered =
- index === 0 ? first : await renderPage(pages[index]!, MAX_EXPORT_PIXELS);
+ index === 0
+ ? first
+ : await renderPage(pages[index]!, MAX_EXPORT_PIXELS, options);
const dimensions = pagePoints(
pageSize,
rendered.canvas.width,
@@ -85,6 +89,8 @@ export async function buildPdf(
"FAST",
);
onProgress(index + 1, pages.length);
+ if (options.signal?.aborted)
+ throw new DOMException("PDF export cancelled.", "AbortError");
await new Promise((resolve) =>
requestAnimationFrame(() => resolve()),
);
diff --git a/src/scan/ocr.ts b/src/scan/ocr.ts
index 69ce96e..4999a84 100644
--- a/src/scan/ocr.ts
+++ b/src/scan/ocr.ts
@@ -1,4 +1,4 @@
-import type { Worker } from "tesseract.js";
+import type { Bbox, Worker } from "tesseract.js";
let activeWorker: Worker | undefined;
let creation: Promise | undefined;
@@ -38,10 +38,39 @@ async function worker(onProgress: (status: string, progress: number) => void) {
export async function recognizeEnglish(
image: Blob,
onProgress: (status: string, progress: number) => void,
-): Promise<{ text: string; confidence: number }> {
+): Promise<{
+ text: string;
+ confidence: number;
+ words: Array<{ text: string; confidence: number; bbox: Bbox }>;
+ hocr: string;
+ tsv: string;
+}> {
const instance = await worker(onProgress);
- const result = await instance.recognize(image);
- return { text: result.data.text, confidence: result.data.confidence };
+ const result = await instance.recognize(
+ image,
+ {},
+ { text: true, blocks: true, hocr: true, tsv: true },
+ );
+ const words: Array<{ text: string; confidence: number; bbox: Bbox }> = [];
+ for (const block of result.data.blocks ?? [])
+ for (const paragraph of block.paragraphs)
+ for (const line of paragraph.lines)
+ for (const word of line.words)
+ if (word.text.trim())
+ words.push({
+ text: word.text.slice(0, 500),
+ confidence: word.confidence,
+ bbox: word.bbox,
+ });
+ if (words.length > 100_000)
+ throw new RangeError("OCR produced more than 100,000 positioned words.");
+ return {
+ text: result.data.text,
+ confidence: result.data.confidence,
+ words,
+ hocr: result.data.hocr ?? "",
+ tsv: result.data.tsv ?? "",
+ };
}
export async function cancelOcr(): Promise {
diff --git a/src/scan/render.ts b/src/scan/render.ts
index 2211d45..309fa79 100644
--- a/src/scan/render.ts
+++ b/src/scan/render.ts
@@ -6,7 +6,12 @@ import {
type ScanPage,
} from "./types";
-const MAX_WORKING_SOURCE_PIXELS = 24_000_000;
+export const MAX_WORKING_SOURCE_PIXELS = 24_000_000;
+
+export interface RenderTaskOptions {
+ signal?: AbortSignal;
+ onProgress?: (progress: number, stage: string) => void;
+}
function canvas(width: number, height: number): HTMLCanvasElement {
const element = document.createElement("canvas");
@@ -61,7 +66,7 @@ function sampleBilinear(
return top * (1 - fy) + bottom * fy;
}
-function perspectiveCorrect(
+export function perspectiveCorrectPixels(
source: ImageData,
outputWidth: number,
outputHeight: number,
@@ -156,9 +161,16 @@ export interface RenderedPage {
export async function renderPage(
page: ScanPage,
maximumPixels: number,
+ options: RenderTaskOptions = {},
): Promise {
+ if (canRenderInWorker())
+ return renderPageInWorker(page, maximumPixels, options);
+ throwIfAborted(options.signal);
+ options.onProgress?.(0.05, "Decoding page");
const bitmap = await createImageBitmap(page.source);
try {
+ throwIfAborted(options.signal);
+ options.onProgress?.(0.2, "Preparing source pixels");
const sourceScale = Math.min(
1,
Math.sqrt(MAX_WORKING_SOURCE_PIXELS / (bitmap.width * bitmap.height)),
@@ -183,7 +195,7 @@ export async function renderPage(
);
const corrected = canvas(dimensions.width, dimensions.height);
context(corrected).putImageData(
- perspectiveCorrect(
+ perspectiveCorrectPixels(
sourceContext.getImageData(
0,
0,
@@ -197,23 +209,34 @@ export async function renderPage(
0,
0,
);
+ throwIfAborted(options.signal);
+ options.onProgress?.(0.8, "Rotating corrected page");
const rotated = rotate(
corrected,
page.adjustments.quarterTurns * 90 + page.adjustments.deskew,
);
- return {
+ const result = {
canvas: boundPixels(rotated, maximumPixels),
sourceScale,
outputScale: dimensions.scale,
};
+ options.onProgress?.(1, "Page ready");
+ return result;
} finally {
bitmap.close();
}
}
-export async function detectDeskew(page: ScanPage): Promise {
+export async function detectDeskew(
+ page: ScanPage,
+ options: RenderTaskOptions = {},
+): Promise {
+ if (canRenderInWorker()) return detectDeskewInWorker(page, options);
+ throwIfAborted(options.signal);
+ options.onProgress?.(0.1, "Decoding deskew sample");
const bitmap = await createImageBitmap(page.source);
try {
+ throwIfAborted(options.signal);
const scale = Math.min(1, 420 / Math.max(bitmap.width, bitmap.height));
const work = canvas(
Math.max(16, Math.round(bitmap.width * scale)),
@@ -221,16 +244,142 @@ export async function detectDeskew(page: ScanPage): Promise {
);
const workContext = context(work);
workContext.drawImage(bitmap, 0, 0, work.width, work.height);
- return estimateDeskew(
+ options.onProgress?.(0.5, "Scoring text-line angles");
+ const angle = estimateDeskew(
workContext.getImageData(0, 0, work.width, work.height).data,
work.width,
work.height,
);
+ throwIfAborted(options.signal);
+ options.onProgress?.(1, "Deskew estimate ready");
+ return angle;
} finally {
bitmap.close();
}
}
+interface RenderWorkerResponse {
+ id: number;
+ kind: "progress" | "render" | "deskew" | "error";
+ progress?: number;
+ stage?: string;
+ bitmap?: ImageBitmap;
+ width?: number;
+ height?: number;
+ sourceScale?: number;
+ outputScale?: number;
+ angle?: number;
+ error?: string;
+}
+
+let nextWorkerId = 0;
+
+function canRenderInWorker(): boolean {
+ return (
+ typeof Worker !== "undefined" && typeof OffscreenCanvas !== "undefined"
+ );
+}
+
+function renderPageInWorker(
+ page: ScanPage,
+ maximumPixels: number,
+ options: RenderTaskOptions,
+): Promise {
+ return runRenderWorker(
+ {
+ task: "render",
+ source: page.source,
+ adjustments: page.adjustments,
+ maximumPixels,
+ },
+ options,
+ ).then((message) => {
+ if (!message.bitmap || !message.width || !message.height)
+ throw new Error("Scan worker returned no rendered page.");
+ const output = canvas(message.width, message.height);
+ context(output).drawImage(message.bitmap, 0, 0);
+ message.bitmap.close();
+ return {
+ canvas: output,
+ sourceScale: message.sourceScale ?? 1,
+ outputScale: message.outputScale ?? 1,
+ };
+ });
+}
+
+function detectDeskewInWorker(
+ page: ScanPage,
+ options: RenderTaskOptions,
+): Promise {
+ return runRenderWorker({ task: "deskew", source: page.source }, options).then(
+ (message) => {
+ if (typeof message.angle !== "number")
+ throw new Error("Scan worker returned no deskew angle.");
+ return message.angle;
+ },
+ );
+}
+
+function runRenderWorker(
+ request:
+ | {
+ task: "render";
+ source: File;
+ adjustments: PageAdjustments;
+ maximumPixels: number;
+ }
+ | { task: "deskew"; source: File },
+ options: RenderTaskOptions,
+): Promise {
+ throwIfAborted(options.signal);
+ const id = ++nextWorkerId;
+ const worker = new Worker(new URL("./render.worker.ts", import.meta.url), {
+ type: "module",
+ });
+ return new Promise((resolve, reject) => {
+ let settled = false;
+ const finish = () => {
+ settled = true;
+ worker.terminate();
+ options.signal?.removeEventListener("abort", abort);
+ };
+ const abort = () => {
+ if (settled) return;
+ finish();
+ reject(abortError());
+ };
+ options.signal?.addEventListener("abort", abort, { once: true });
+ worker.onmessage = (event: MessageEvent) => {
+ if (event.data.id !== id || settled) return;
+ if (event.data.kind === "progress") {
+ options.onProgress?.(
+ event.data.progress ?? 0,
+ event.data.stage ?? "Processing page",
+ );
+ return;
+ }
+ finish();
+ if (event.data.kind === "error")
+ reject(new Error(event.data.error ?? "Scan worker failed."));
+ else resolve(event.data);
+ };
+ worker.onerror = () => {
+ if (settled) return;
+ finish();
+ reject(new Error("Scan worker failed to start."));
+ };
+ worker.postMessage({ id, ...request });
+ });
+}
+
+function throwIfAborted(signal?: AbortSignal): void {
+ if (signal?.aborted) throw abortError();
+}
+
+function abortError(): DOMException {
+ return new DOMException("Page processing cancelled.", "AbortError");
+}
+
export function canvasBlob(
source: HTMLCanvasElement,
type: "image/png" | "image/jpeg",
diff --git a/src/scan/render.worker.ts b/src/scan/render.worker.ts
new file mode 100644
index 0000000..1bc0186
--- /dev/null
+++ b/src/scan/render.worker.ts
@@ -0,0 +1,185 @@
+/// ) => {
+ void run(event.data);
+};
+
+async function run(request: Request): Promise {
+ try {
+ progress(request.id, 0.05, "Decoding page");
+ const bitmap = await createImageBitmap(request.source);
+ try {
+ if (bitmap.width * bitmap.height > MAX_SOURCE_PIXELS)
+ throw new RangeError(
+ `Decoded image exceeds ${MAX_SOURCE_PIXELS.toLocaleString()} pixels.`,
+ );
+ if (request.task === "deskew") {
+ const angle = renderDeskewSample(request.id, bitmap);
+ self.postMessage({ id: request.id, kind: "deskew", angle });
+ } else {
+ const result = await render(
+ request.id,
+ bitmap,
+ request.adjustments,
+ request.maximumPixels,
+ );
+ self.postMessage({ id: request.id, kind: "render", ...result }, [
+ result.bitmap,
+ ]);
+ }
+ } finally {
+ bitmap.close();
+ }
+ } catch (reason) {
+ self.postMessage({
+ id: request.id,
+ kind: "error",
+ error:
+ reason instanceof Error ? reason.message : "Page processing failed.",
+ });
+ }
+}
+
+async function render(
+ id: number,
+ bitmap: ImageBitmap,
+ adjustments: PageAdjustments,
+ maximumPixels: number,
+) {
+ progress(id, 0.15, "Preparing source pixels");
+ const sourceScale = Math.min(
+ 1,
+ Math.sqrt(MAX_WORKING_SOURCE_PIXELS / (bitmap.width * bitmap.height)),
+ );
+ const source = makeCanvas(
+ Math.max(1, Math.round(bitmap.width * sourceScale)),
+ Math.max(1, Math.round(bitmap.height * sourceScale)),
+ );
+ const sourceContext = context(source);
+ sourceContext.drawImage(bitmap, 0, 0, source.width, source.height);
+ const dimensions = correctedDimensions(
+ adjustments.quad,
+ source.width,
+ source.height,
+ maximumPixels,
+ );
+ progress(id, 0.3, "Correcting perspective and pixels");
+ const corrected = makeCanvas(dimensions.width, dimensions.height);
+ context(corrected).putImageData(
+ perspectiveCorrectPixels(
+ sourceContext.getImageData(0, 0, source.width, source.height),
+ dimensions.width,
+ dimensions.height,
+ adjustments,
+ ),
+ 0,
+ 0,
+ );
+ progress(id, 0.8, "Rotating corrected page");
+ const rotated = rotate(
+ corrected,
+ adjustments.quarterTurns * 90 + adjustments.deskew,
+ );
+ const bounded = boundPixels(rotated, maximumPixels);
+ const result = await createImageBitmap(bounded);
+ progress(id, 1, "Page ready");
+ return {
+ bitmap: result,
+ width: bounded.width,
+ height: bounded.height,
+ sourceScale,
+ outputScale: dimensions.scale,
+ };
+}
+
+function renderDeskewSample(id: number, bitmap: ImageBitmap): number {
+ progress(id, 0.25, "Preparing deskew sample");
+ const scale = Math.min(1, 420 / Math.max(bitmap.width, bitmap.height));
+ const work = makeCanvas(
+ Math.max(16, Math.round(bitmap.width * scale)),
+ Math.max(16, Math.round(bitmap.height * scale)),
+ );
+ const workContext = context(work);
+ workContext.drawImage(bitmap, 0, 0, work.width, work.height);
+ progress(id, 0.5, "Scoring text-line angles");
+ const angle = estimateDeskew(
+ workContext.getImageData(0, 0, work.width, work.height).data,
+ work.width,
+ work.height,
+ );
+ progress(id, 1, "Deskew estimate ready");
+ return angle;
+}
+
+function makeCanvas(width: number, height: number): OffscreenCanvas {
+ return new OffscreenCanvas(width, height);
+}
+
+function context(canvas: OffscreenCanvas): OffscreenCanvasRenderingContext2D {
+ const value = canvas.getContext("2d", { willReadFrequently: true });
+ if (!value)
+ throw new Error("This browser could not create an offscreen 2D canvas.");
+ return value;
+}
+
+function rotate(source: OffscreenCanvas, degrees: number): OffscreenCanvas {
+ const normalized = ((degrees % 360) + 360) % 360;
+ if (Math.abs(normalized) < 0.001) return source;
+ const radians = (normalized * Math.PI) / 180;
+ const width = Math.ceil(
+ Math.abs(source.width * Math.cos(radians)) +
+ Math.abs(source.height * Math.sin(radians)),
+ );
+ const height = Math.ceil(
+ Math.abs(source.width * Math.sin(radians)) +
+ Math.abs(source.height * Math.cos(radians)),
+ );
+ const output = makeCanvas(width, height);
+ const target = context(output);
+ target.fillStyle = "white";
+ target.fillRect(0, 0, width, height);
+ target.translate(width / 2, height / 2);
+ target.rotate(radians);
+ target.drawImage(source, -source.width / 2, -source.height / 2);
+ return output;
+}
+
+function boundPixels(
+ source: OffscreenCanvas,
+ maximumPixels: number,
+): OffscreenCanvas {
+ if (source.width * source.height <= maximumPixels) return source;
+ const scale = Math.sqrt(maximumPixels / (source.width * source.height));
+ const output = makeCanvas(
+ Math.max(16, Math.floor(source.width * scale)),
+ Math.max(16, Math.floor(source.height * scale)),
+ );
+ const target = context(output);
+ target.imageSmoothingEnabled = true;
+ target.imageSmoothingQuality = "high";
+ target.drawImage(source, 0, 0, output.width, output.height);
+ return output;
+}
+
+function progress(id: number, value: number, stage: string): void {
+ self.postMessage({ id, kind: "progress", progress: value, stage });
+}
+
+export {};
diff --git a/src/scan/types.ts b/src/scan/types.ts
index 33e1dbf..6bda644 100644
--- a/src/scan/types.ts
+++ b/src/scan/types.ts
@@ -33,6 +33,16 @@ export interface ScanPage {
adjustments: PageAdjustments;
ocrText?: string;
ocrConfidence?: number;
+ ocrWords?: OcrWord[];
+ ocrHocr?: string;
+ ocrTsv?: string;
+}
+
+export interface OcrWord {
+ text: string;
+ confidence: number;
+ /** Normalized bounds in the corrected OCR image. */
+ bbox: { x0: number; y0: number; x1: number; y1: number };
}
export const DEFAULT_QUAD: Quad = [
diff --git a/src/styles.css b/src/styles.css
index ed269c7..5423133 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -309,9 +309,46 @@ button:disabled {
text-anchor: middle;
dominant-baseline: central;
}
+.corner-fields {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 0.4rem;
+ margin-top: 0.55rem;
+}
+.corner-fields fieldset {
+ min-width: 0;
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.35rem;
+ margin: 0;
+ padding: 0.45rem;
+ border: 1px solid var(--scan-line);
+ border-radius: 0.55rem;
+}
+.corner-fields legend {
+ padding: 0 0.2rem;
+ color: var(--scan-muted);
+ font-size: 0.68rem;
+ font-weight: 750;
+}
+.corner-fields input {
+ width: 100%;
+ min-width: 0;
+}
.processed-stage {
min-height: 12rem;
}
+.processed-image {
+ position: relative;
+ display: grid;
+ place-items: center;
+ max-width: 100%;
+ max-height: 28rem;
+}
+.processed-image canvas,
+.processed-image .ocr-overlay {
+ grid-area: 1 / 1;
+}
.processed-stage canvas {
display: block;
max-width: 100%;
@@ -319,6 +356,18 @@ button:disabled {
width: auto;
height: auto;
}
+.ocr-overlay {
+ z-index: 1;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
+.ocr-overlay rect {
+ fill: color-mix(in srgb, var(--scan-accent) 8%, transparent);
+ stroke: #00e3b4;
+ stroke-width: 0.2;
+ vector-effect: non-scaling-stroke;
+}
.controls-grid {
display: grid;
@@ -429,6 +478,9 @@ button:disabled {
}
@media (max-width: 72rem) {
+ .corner-fields {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
.workspace-grid {
grid-template-columns: 14rem minmax(0, 1fr);
}
@@ -474,7 +526,8 @@ button:disabled {
flex-direction: column;
}
.controls-grid,
- .export-card {
+ .export-card,
+ .corner-fields {
grid-template-columns: 1fr;
}
.export-card > :is(.eyebrow, h2, .microcopy) {
diff --git a/src/toolbox/manifest.source.json b/src/toolbox/manifest.source.json
index c55be0d..c283189 100644
--- a/src/toolbox/manifest.source.json
+++ b/src/toolbox/manifest.source.json
@@ -3,12 +3,12 @@
"schemaVersion": 1,
"id": "de.add-ideas.scan-tools",
"name": "Scan Tools",
- "version": "0.1.0",
+ "version": "0.2.0",
"description": "Correct, assemble, recognize and export scanned pages locally.",
"entry": "./",
"icon": "./favicon.svg",
"categories": ["document", "image", "productivity"],
- "tags": ["scan", "camera", "deskew", "perspective", "ocr", "pdf"],
+ "tags": ["scan", "camera", "deskew", "perspective", "ocr", "hocr", "pdf"],
"integration": {
"contextVersion": 1,
"launchModes": ["navigate", "new-tab"],
@@ -16,11 +16,30 @@
},
"requirements": {
"secureContext": false,
- "workers": true,
+ "workers": false,
"indexedDb": false,
"crossOriginIsolated": false,
"topLevelContext": false
},
+ "io": {
+ "accepts": [
+ { "mediaType": "image/png", "extensions": [".png"] },
+ { "mediaType": "image/jpeg", "extensions": [".jpg", ".jpeg"] },
+ { "mediaType": "image/webp", "extensions": [".webp"] }
+ ],
+ "produces": [
+ { "mediaType": "image/png", "extensions": [".png"] },
+ { "mediaType": "image/jpeg", "extensions": [".jpg"] },
+ { "mediaType": "application/pdf", "extensions": [".pdf"] },
+ { "mediaType": "text/plain", "extensions": [".txt"] },
+ { "mediaType": "text/html", "extensions": [".hocr.html"] },
+ { "mediaType": "text/tab-separated-values", "extensions": [".tsv"] }
+ ]
+ },
+ "capabilities": {
+ "required": [],
+ "optional": ["workers", "offscreen-canvas", "webassembly", "camera-capture"]
+ },
"privacy": {
"processing": "local",
"fileUploads": true,
diff --git a/src/version.ts b/src/version.ts
index 76162f8..0ba6e37 100644
--- a/src/version.ts
+++ b/src/version.ts
@@ -1 +1 @@
-export const APP_VERSION = "0.1.0";
+export const APP_VERSION = "0.2.0";
diff --git a/tests/browser/app.spec.ts b/tests/browser/app.spec.ts
index 4d7ce66..076de8b 100644
--- a/tests/browser/app.spec.ts
+++ b/tests/browser/app.spec.ts
@@ -82,6 +82,11 @@ test("adds and corrects a real local image while retaining the previous preview"
"aria-valuetext",
/^1% from left/u,
);
+ await page.getByLabel("Corner 2 X (%)").fill("98.5");
+ await expect(page.getByRole("slider", { name: "Corner 2" })).toHaveAttribute(
+ "aria-valuetext",
+ /^99% from left/u,
+ );
const download = page.waitForEvent("download");
await page.getByRole("button", { name: "Download PNG" }).click();
expect((await download).suggestedFilename()).toBe("page-scan.png");
@@ -156,6 +161,13 @@ test("runs the bundled OCR engine without an external request", async ({
timeout: 90_000,
});
await expect(page.getByLabel("Recognized text")).toContainText(/LOCAL|SCAN/u);
+ await expect(page.getByLabel(/positioned OCR words/u)).toBeVisible();
+ await expect(
+ page.getByRole("button", { name: "Download hOCR geometry" }),
+ ).toBeVisible();
+ await expect(
+ page.getByRole("button", { name: "Download OCR TSV" }),
+ ).toBeVisible();
expect(external).toEqual([]);
});
@@ -191,8 +203,12 @@ test("integrates help, themes, identity, headers and offline reload", async ({
);
await expect(manifest.json()).resolves.toMatchObject({
id: "de.add-ideas.scan-tools",
- version: "0.1.0",
- requirements: { workers: true },
+ version: "0.2.0",
+ requirements: { workers: false },
+ capabilities: {
+ required: [],
+ optional: expect.arrayContaining(["workers"]),
+ },
privacy: { processing: "local", telemetry: false },
});
await context.setOffline(true);
diff --git a/tests/browser/responsive.spec.ts b/tests/browser/responsive.spec.ts
new file mode 100644
index 0000000..dabad44
--- /dev/null
+++ b/tests/browser/responsive.spec.ts
@@ -0,0 +1,18 @@
+import { expect, test } from "@playwright/test";
+
+test("keeps the primary workspace inside a narrow viewport", async ({
+ page,
+}) => {
+ await page.goto("/deep/nested/scan-tools/");
+ await expect(page.locator("main").first()).toBeVisible();
+ await expect(
+ page.locator("main .loading, main .workbench-loading"),
+ ).toHaveCount(0);
+
+ const widths = await page.evaluate(() => ({
+ content: document.documentElement.scrollWidth,
+ viewport: document.documentElement.clientWidth,
+ }));
+ expect(widths.viewport).toBeLessThanOrEqual(430);
+ expect(widths.content).toBeLessThanOrEqual(widths.viewport + 1);
+});
diff --git a/tests/scan/render.test.ts b/tests/scan/render.test.ts
new file mode 100644
index 0000000..e571afb
--- /dev/null
+++ b/tests/scan/render.test.ts
@@ -0,0 +1,28 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { perspectiveCorrectPixels } from "../../src/scan/render";
+import { defaultAdjustments } from "../../src/scan/types";
+
+class TestImageData {
+ data: Uint8ClampedArray;
+ width: number;
+ height: number;
+ constructor(width: number, height: number) {
+ this.width = width;
+ this.height = height;
+ this.data = new Uint8ClampedArray(width * height * 4);
+ }
+}
+
+describe("scan render core", () => {
+ afterEach(() => vi.unstubAllGlobals());
+
+ it("maps an identity quad without changing corner colours", () => {
+ vi.stubGlobal("ImageData", TestImageData);
+ const source = new TestImageData(2, 2) as unknown as ImageData;
+ source.data.set([
+ 255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255, 255, 255, 255, 255,
+ ]);
+ const result = perspectiveCorrectPixels(source, 2, 2, defaultAdjustments());
+ expect([...result.data]).toEqual([...source.data]);
+ });
+});