diff --git a/CHANGELOG.md b/CHANGELOG.md index 554b115..b73f27e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ ### Added +- Added the Sprint 16B Image → Text OCR interface for the v2.1.0 development cycle with single-image PNG/JPEG/WebP input, English/Korean/combined recognition, editable results, copy, UTF-8 TXT download, cancellation, retry, orientation-correct previews, request-identity safeguards, and complete six-locale UI coverage. - Added the internal Sprint 16A local OCR foundation with pinned, same-origin Tesseract.js 7.0.0 worker/core assets, English and Korean language data, orientation-aware image preparation, normalized progress, worker reuse, cancellation, cleanup, and real OCR smoke coverage. No public OCR tool was added. - Started the v2 cycle with a production Image category and local Image Converter. - Added Image Resize with pixel and percentage modes, aspect-ratio preservation, optional enlargement, Original/JPEG/PNG/WebP output, and local batch ZIP saving. diff --git a/README.md b/README.md index bcbf550..b4e3fca 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,7 @@ npm test node tests/ocr-smoke.test.mjs ``` -The public Image → Text interface is not part of the current production surface. The reusable local OCR runtime is documented in [Local OCR foundation](./docs/ocr-foundation.md). +The Image category includes a public, single-image [Image → Text OCR](./tools/image/to-text/) workflow for PNG, JPEG, and WebP input. English, Korean, and combined English + Korean recognition run through the same-origin OCR runtime documented in [Local OCR foundation](./docs/ocr-foundation.md). ## Documentation diff --git a/docs/README.md b/docs/README.md index 8ac2650..ee12f55 100644 --- a/docs/README.md +++ b/docs/README.md @@ -11,6 +11,7 @@ The root [README](../README.md) introduces Secure Tools. This directory owns det | [Privacy model](./privacy-model.md) | Local-processing and network boundaries, storage, security controls, and bounded privacy claims | | [Dependencies](./dependencies.md) | Production runtime inventory, versions, vendoring, licenses, and integrity ownership | | [Local OCR foundation](./ocr-foundation.md) | Self-hosted Tesseract assets, languages, lifecycle, cancellation, caching, and privacy guarantees | +| [Sprint 16B Image → Text QA](./sprint-16b-qa.md) | Automated and Chromium browser evidence for the v2.1.0 Image → Text workflow | | [Tool status](./tool-status.md) | Production and planned surfaces, supported formats, behavior, and resource boundaries | | [Search discovery and metadata](./seo.md) | Canonical routes, crawler files, metadata policy, maintenance, and submission steps | | [Cloudflare Pages migration bridge](./cloudflare-pages-bridge.md) | H3.2/H3.3 provenance plus the prepared H3.5 hostname-specific indexing, activation, validation, and rollback contracts | diff --git a/docs/ocr-foundation.md b/docs/ocr-foundation.md index 4dc0851..41930f3 100644 --- a/docs/ocr-foundation.md +++ b/docs/ocr-foundation.md @@ -2,7 +2,7 @@ ## Scope and privacy -Sprint 16A provides reusable image OCR infrastructure without publishing an Image → Text tool. It accepts the same signature-validated PNG, JPEG, and WebP formats as the existing image pipeline and rasterizes them through the shared orientation-aware decoder before recognition. PDF rendering, searchable PDF output, camera capture, batch UI, OCR history, cloud OCR, and text post-processing are outside this foundation. +Sprint 16A provides the reusable OCR infrastructure. Sprint 16B publishes it as a single-image Image → Text tool in the v2.1.0 development cycle. It accepts the same signature-validated PNG, JPEG, and WebP formats as the existing image pipeline and rasterizes them through the shared orientation-aware decoder before recognition. PDF rendering, searchable PDF output, camera capture, batch UI, OCR history, cloud OCR, and automatic text post-processing remain outside this scope. **User images and OCR output remain in the browser and are not sent to an OCR server.** @@ -35,13 +35,15 @@ The service always passes explicit `workerPath`, `corePath`, and `langPath` valu One service instance reuses a ready worker while the selected language stays the same. Changing the language terminates that worker and creates a replacement. Recognition failure discards the worker so the next request starts cleanly. `dispose()` is idempotent and terminates the owned worker. -Progress callbacks receive only project-owned stages: `loading-engine`, `loading-language`, `initializing`, `recognizing`, and `complete`. Numeric upstream progress is clamped to `0..1`; missing progress remains `null`. Raw logger objects are never exposed, and callbacks are cleared after each operation. +Progress callbacks receive only project-owned stages: `loading-engine`, `loading-language`, `initializing`, `recognizing`, and `complete`. Numeric upstream progress is clamped to `0..1`; missing progress remains `null`. The Image → Text page renders missing numeric progress as indeterminate instead of inventing a percentage. Raw logger objects are never exposed, and callbacks are cleared after each operation. Tesseract.js does not expose safe per-job cancellation. During recognition, an abort terminates and discards the worker before the promise rejects with `OCR_CANCELLED`; later work creates a new worker. An abort during initialization is observed as soon as the library yields the worker handle, which is then terminated before cancellation returns. This avoids reporting cancellation while an owned worker continues running. +The public controller adds a monotonically increasing request identity around the service. Only the current source, language, and recognition request may update progress or results. Replacing or removing a source, changing language, cancelling, or leaving the page invalidates earlier callbacks. The six visible phases are `empty`, `ready`, `recognizing`, `success`, `error`, and `cancelled`. + ## CSP and verification -The unlinked browser smoke page at `tests/browser/ocr-smoke.html` runs the real browser bundle, direct worker, WASM core, and English model under the same strict meta CSP used by production pages. It passed in Chromium with the existing `script-src 'self'`, inherited `worker-src 'self'`, and `connect-src 'none'` policy, without CSP or console errors. No production CSP was changed. +The browser smoke page at `tests/browser/ocr-smoke.html` runs the real browser bundle, direct worker, WASM core, and English model under the same strict meta CSP used by production pages. The public route uses the same runtime paths and unchanged production CSP. Browser QA also exercises the actual Image → Text selection, recognition, edit, copy/download, replace, remove, and cancellation paths. Run the repeatable browser check with `npm run smoke:ocr:browser`, then open the printed localhost URL and require a visible `PASS` result. The page rejects any third-party resource entry it observes. The automated Node smoke test performs real English recognition using local core and trained data; unit tests cover path configuration, language mapping, progress, orientation cleanup, reuse, language replacement, initialization/recognition failures, cancellation, disposal, and stale callbacks. diff --git a/docs/sprint-16b-qa.md b/docs/sprint-16b-qa.md new file mode 100644 index 0000000..95b9498 --- /dev/null +++ b/docs/sprint-16b-qa.md @@ -0,0 +1,32 @@ +# Sprint 16B Image → Text QA + +Date: 2026-09-23 + +Development cycle: v2.1.0 + +Route: `/tools/image/to-text/` + +## Automated evidence + +- `npm run build`: pinned OCR assets match the installed packages and lockfile. +- `npm test`: syntax, state-machine, stale-callback, localization, route, CSP, privacy, responsive-contract, and regression suites pass. +- `node tests/ocr-smoke.test.mjs`: real local English OCR passes with the pinned core and language data. +- The browser smoke page completes real English OCR through the same direct worker, WASM core, and language-model paths and reports `PASS: HELLO`. + +## Chromium browser QA + +Completed in the Chromium-based Codex in-app browser against the repository’s local static server. + +- Selected a production PNG through the actual public Image → Text file input and confirmed an orientation-normalized preview, source name, type, and size. +- Ran real English OCR through the production page and received editable recognized text. +- Edited the result to mixed English/Korean text, copied it successfully, and triggered the UTF-8 `.txt` download path with the source-derived filename. +- Cancelled combined English + Korean recognition while language data was loading, confirmed the explicit cancelled state, then retried successfully. +- Confirmed replacing language or starting a new request clears the earlier result; automated delayed-callback tests cover completion, cancellation, source replacement, and language-change races. +- Confirmed the empty state hides the source card, result panel, progress element, and cancel action. This caught and fixed a CSS `hidden`-attribute regression during QA. +- Switched through English, Korean, Japanese, Spanish, German, and French and confirmed the localized heading, controls, status text, document language, and page metadata update without reload. +- Reloaded with Korean selected and confirmed the preferred OCR default is English + Korean. Reloaded with Japanese selected and confirmed the preferred default returns to English. +- Switched through System, Light, and Dark themes. Confirmed resolved theme values and readable styled surfaces. +- Checked a 375 × 812 viewport: the page remained styled, the tool stacked responsively, and document width matched viewport width without horizontal page overflow. +- Confirmed no browser console warnings or errors in the final styled pass. The real OCR smoke recorded no third-party resource request. + +PDF OCR and searchable PDF output remain deferred. This QA does not create a release or tag. diff --git a/docs/tool-status.md b/docs/tool-status.md index c3e6ca7..1a78857 100644 --- a/docs/tool-status.md +++ b/docs/tool-status.md @@ -14,13 +14,14 @@ | Image | [Image Resize](../tools/image/resize/) | Production | Pixel or percentage batch resize | | Image | [Image Compressor](../tools/image/compress/) | Production | JPEG/WebP quality and PNG re-encoding | | Image | [Image Metadata Inspector & Cleaner](../tools/image/metadata/) | Production | Supported JPEG, PNG, WebP metadata | +| Image | [Image → Text OCR](../tools/image/to-text/) | Production | One PNG, JPEG, or WebP → editable English/Korean text | | Privacy | [Privacy hub](../tools/privacy/) | Production hub | Navigation to Image and PDF metadata tools | | Scan/OCR | Category surface | Planned | No production processing tool | | Media | Category surface | Planned | No production processing tool | “Production” means linked and covered by the current repository validation. “Planned” cards are non-interactive. Secure Tools may later link separately deployed companion applications, but no Companion status or integration exists on the live site today. -The Scan/OCR category now has an internal, tested OCR runtime foundation for JPEG, PNG, and WebP input with English, Korean, and combined recognition. It remains planned because Sprint 16A does not expose an Image → Text page or change navigation, sitemap, structured data, or the product catalog. +The Image category exposes the tested OCR runtime through a single-image Image → Text workflow with English, Korean, and combined recognition. The broader Scan/OCR category remains planned; PDF OCR and searchable PDF output are deferred. ## Shared Image boundaries @@ -46,6 +47,10 @@ Preserves oriented pixel dimensions while re-encoding in Original/JPEG/PNG/WebP Accepts one JPEG, PNG, or WebP file and uses the pinned `secure-metadata v0.1.1` browser artifact without decoding or re-encoding pixels. It separates decoded fields from opaque detected containers and presents partial inspection as non-exhaustive. Privacy Clean and Customize operate only on supported metadata classes; verification must pass before output is saved. Valid unambiguous JPEG EXIF Orientation and ICC color information are preserved according to policy. Full guarantees and exclusions are in [Image Metadata privacy and verification](./image-metadata-privacy.md). +### Image → Text OCR + +Accepts one signature-validated PNG, JPEG, or WebP image and recognizes English, Korean, or combined text with the pinned same-origin Tesseract.js runtime. The preview and OCR input use the shared orientation-aware decoder. Recognition starts only after an explicit action and reports real engine progress; it can be cancelled and retried. Results remain editable and can be copied or downloaded as UTF-8 text. Source replacement, removal, language changes, cancellation, and navigation invalidate older requests and release owned preview URLs and workers. + ## PDF tools ### Images to PDF @@ -74,7 +79,7 @@ Inspects Title, Author, Subject, Keywords, Creator, Producer, Creation Date, and ## Deferred directions -Broader PDF modification, compression, encryption, XMP/structural sanitization, Scan/OCR, Media, and offline/PWA work remain deferred. Separately deployed companion applications are an architectural possibility, not a current product status or integration. +Broader PDF modification, compression, encryption, XMP/structural sanitization, PDF OCR, searchable PDF output, broader Scan/OCR workflows, Media, and offline/PWA work remain deferred. Separately deployed companion applications are an architectural possibility, not a current product status or integration. ## Related guarantees diff --git a/js/i18n.js b/js/i18n.js index 071f446..09f9365 100644 --- a/js/i18n.js +++ b/js/i18n.js @@ -7,6 +7,7 @@ import { fr } from "./locales/fr.js"; import { imageResizeLocales } from "./locales/image-resize.js"; import { imageCompressorLocales } from "./locales/image-compressor.js"; import { imageMetadataLocales } from "./locales/image-metadata.js"; +import { imageToTextLocales } from "./locales/image-to-text.js"; import { privacyHubLocales } from "./locales/privacy-hub.js"; import { metadataUxLocales } from "./locales/metadata-ux.js"; @@ -14,12 +15,13 @@ const STORAGE_KEY = "secure-tools-language"; const baseTranslations = { en, ko, ja, es, de, fr }; export const translations = Object.fromEntries(Object.entries(baseTranslations).map(([language, catalog]) => [language, { ...catalog, - metadata: { ...catalog.metadata, imageResize: imageResizeLocales[language].metadata, imageCompressor: imageCompressorLocales[language].metadata, imageMetadata: imageMetadataLocales[language].metadata, privacyCategory: privacyHubLocales[language].metadata }, - tools: { ...catalog.tools, imageMetadata: imageMetadataLocales[language].toolName, categoryDescriptions: { ...catalog.tools.categoryDescriptions, privacy: privacyHubLocales[language].categoryDescription } }, - categories: { ...catalog.categories, image: { ...catalog.categories.image, metadata: imageMetadataLocales[language].categoryDescription } }, + metadata: { ...catalog.metadata, imageResize: imageResizeLocales[language].metadata, imageCompressor: imageCompressorLocales[language].metadata, imageMetadata: imageMetadataLocales[language].metadata, imageToText: imageToTextLocales[language].metadata, privacyCategory: privacyHubLocales[language].metadata }, + tools: { ...catalog.tools, imageMetadata: imageMetadataLocales[language].toolName, imageToText: imageToTextLocales[language].toolName, categoryDescriptions: { ...catalog.tools.categoryDescriptions, privacy: privacyHubLocales[language].categoryDescription } }, + categories: { ...catalog.categories, image: { ...catalog.categories.image, metadata: imageMetadataLocales[language].categoryDescription, toText: imageToTextLocales[language].categoryDescription } }, imageResize: imageResizeLocales[language].copy, imageCompressor: imageCompressorLocales[language].copy, imageMetadata: { ...imageMetadataLocales[language].copy, source: { ...imageMetadataLocales[language].copy.source, ...metadataUxLocales[language].image.source }, inspector: { ...imageMetadataLocales[language].copy.inspector, ...metadataUxLocales[language].image.inspector }, clean: { ...imageMetadataLocales[language].copy.clean, ...metadataUxLocales[language].image.clean }, policy: metadataUxLocales[language].image.policy }, + imageToText: imageToTextLocales[language].copy, pdfMetadata: { ...catalog.pdfMetadata, source: { ...catalog.pdfMetadata.source, ...metadataUxLocales[language].pdf.source }, inspector: { ...catalog.pdfMetadata.inspector, ...metadataUxLocales[language].pdf.inspector }, actions: { ...catalog.pdfMetadata.actions, ...metadataUxLocales[language].pdf.actions }, custom: metadataUxLocales[language].pdf.custom, errors: { ...catalog.pdfMetadata.errors, ...metadataUxLocales[language].pdf.errors } }, privacyHub: privacyHubLocales[language].copy, }])); diff --git a/js/locales/image-to-text.js b/js/locales/image-to-text.js new file mode 100644 index 0000000..5a69875 --- /dev/null +++ b/js/locales/image-to-text.js @@ -0,0 +1,41 @@ +const en = { + metadata: { title: "Image to Text OCR — Secure Tools", description: "Extract editable text from one PNG, JPEG, or WebP image locally in your browser." }, + toolName: "Image to Text OCR", categoryDescription: "Extract editable text from an image with local English and Korean OCR.", + copy: { + eyebrow: "Local OCR tool", title: "Image to Text", description: "Recognize text in one PNG, JPEG, or WebP image without uploading it.", + drop: { title: "Add one image", description: "Drop a PNG, JPEG, or WebP image here or use the picker.", choose: "Choose image", localTitle: "Processed locally.", localBody: "Your image and recognized text never leave this device.", privacyLink: "How privacy works" }, + source: { title: "Source image", empty: "No image selected yet.", selectedLabel: "Selected source image", meta: "{size} · {format}", replace: "Replace image", remove: "Remove image", previewAlt: "Preview of the selected image" }, + settings: { title: "Recognition", language: "Text language", english: "English", korean: "Korean", combined: "English + Korean", recognize: "Recognize text", cancel: "Cancel recognition", retry: "Try again", progress: "Recognition progress" }, + result: { title: "Recognized text", description: "Review and edit the text before copying or downloading it.", label: "Editable recognized text", copy: "Copy text", download: "Download TXT" }, + status: { ready: "Image ready. Choose a language and start recognition.", cancelled: "Recognition cancelled. The image remains ready.", success: "Recognition complete. You can edit the result.", copied: "Recognized text copied.", downloaded: "Downloaded {name}.", removed: "Source image removed.", selecting: "Preparing the image locally…" }, + progress: { "loading-engine": "Loading the local OCR engine…", "loading-language": "Loading language data…", initializing: "Initializing recognition…", recognizing: "Recognizing text… {percent}%", complete: "Finishing recognition…" }, + errors: { oneFile: "Choose exactly one image.", tooLarge: "The image exceeds the 50 MiB limit.", signature: "The file is not a supported PNG, JPEG, or WebP image.", decode: "The image could not be decoded.", initialization: "The local OCR engine could not be initialized.", recognition: "Text recognition failed. Try again or choose another image.", busy: "Recognition is still stopping. Try again in a moment.", copy: "The text could not be copied. Select it manually and copy it.", download: "The text file could not be downloaded.", generic: "The image could not be prepared for recognition." }, + }, +}; + +const ko = { + metadata: { title: "이미지 텍스트 OCR — Secure Tools", description: "PNG, JPEG, WebP 이미지 한 개에서 편집 가능한 텍스트를 브라우저에서 로컬로 추출합니다." }, toolName: "이미지 텍스트 OCR", categoryDescription: "로컬 영어·한국어 OCR로 이미지에서 편집 가능한 텍스트를 추출합니다.", + copy: { eyebrow: "로컬 OCR 도구", title: "이미지 → 텍스트", description: "업로드 없이 PNG, JPEG 또는 WebP 이미지 한 개의 텍스트를 인식합니다.", drop: { title: "이미지 한 개 추가", description: "PNG, JPEG 또는 WebP 이미지를 놓거나 선택하세요.", choose: "이미지 선택", localTitle: "로컬에서 처리됩니다.", localBody: "이미지와 인식된 텍스트는 이 기기를 떠나지 않습니다.", privacyLink: "개인정보 보호 방식" }, source: { title: "원본 이미지", empty: "선택한 이미지가 없습니다.", selectedLabel: "선택한 원본 이미지", meta: "{size} · {format}", replace: "이미지 교체", remove: "이미지 제거", previewAlt: "선택한 이미지 미리보기" }, settings: { title: "텍스트 인식", language: "텍스트 언어", english: "영어", korean: "한국어", combined: "영어 + 한국어", recognize: "텍스트 인식", cancel: "인식 취소", retry: "다시 시도", progress: "인식 진행률" }, result: { title: "인식된 텍스트", description: "복사하거나 다운로드하기 전에 텍스트를 확인하고 편집하세요.", label: "편집 가능한 인식 텍스트", copy: "텍스트 복사", download: "TXT 다운로드" }, status: { ready: "이미지가 준비되었습니다. 언어를 선택하고 인식을 시작하세요.", cancelled: "인식을 취소했습니다. 이미지는 준비 상태로 유지됩니다.", success: "인식이 완료되었습니다. 결과를 편집할 수 있습니다.", copied: "인식된 텍스트를 복사했습니다.", downloaded: "{name}을 다운로드했습니다.", removed: "원본 이미지를 제거했습니다.", selecting: "로컬에서 이미지를 준비하는 중…" }, progress: { "loading-engine": "로컬 OCR 엔진을 불러오는 중…", "loading-language": "언어 데이터를 불러오는 중…", initializing: "인식을 초기화하는 중…", recognizing: "텍스트 인식 중… {percent}%", complete: "인식을 마무리하는 중…" }, errors: { oneFile: "이미지 한 개만 선택하세요.", tooLarge: "이미지가 50 MiB 제한을 초과합니다.", signature: "지원되는 PNG, JPEG 또는 WebP 이미지가 아닙니다.", decode: "이미지를 해석할 수 없습니다.", initialization: "로컬 OCR 엔진을 초기화할 수 없습니다.", recognition: "텍스트 인식에 실패했습니다. 다시 시도하거나 다른 이미지를 선택하세요.", busy: "인식이 아직 중지되는 중입니다. 잠시 후 다시 시도하세요.", copy: "텍스트를 복사할 수 없습니다. 직접 선택해 복사하세요.", download: "텍스트 파일을 다운로드할 수 없습니다.", generic: "인식을 위해 이미지를 준비할 수 없습니다." } }, +}; + +const ja = { + metadata: { title: "画像からテキスト OCR — Secure Tools", description: "PNG、JPEG、WebP画像1件から編集可能なテキストをブラウザー内で抽出します。" }, toolName: "画像からテキスト OCR", categoryDescription: "ローカルの英語・韓国語OCRで画像から編集可能なテキストを抽出します。", + copy: { eyebrow: "ローカルOCRツール", title: "画像からテキスト", description: "アップロードせずにPNG、JPEG、WebP画像1件のテキストを認識します。", drop: { title: "画像を1件追加", description: "PNG、JPEG、WebP画像をドロップまたは選択します。", choose: "画像を選択", localTitle: "ローカル処理。", localBody: "画像と認識結果は端末外へ送信されません。", privacyLink: "プライバシーの仕組み" }, source: { title: "元画像", empty: "画像が未選択です。", selectedLabel: "選択した元画像", meta: "{size} · {format}", replace: "画像を置換", remove: "画像を削除", previewAlt: "選択した画像のプレビュー" }, settings: { title: "文字認識", language: "テキスト言語", english: "英語", korean: "韓国語", combined: "英語 + 韓国語", recognize: "テキストを認識", cancel: "認識をキャンセル", retry: "再試行", progress: "認識の進行状況" }, result: { title: "認識したテキスト", description: "コピーまたはダウンロードする前に確認・編集できます。", label: "編集可能な認識テキスト", copy: "テキストをコピー", download: "TXTをダウンロード" }, status: { ready: "画像の準備ができました。言語を選んで認識を開始してください。", cancelled: "認識をキャンセルしました。画像は準備済みです。", success: "認識が完了しました。結果を編集できます。", copied: "認識テキストをコピーしました。", downloaded: "{name}をダウンロードしました。", removed: "元画像を削除しました。", selecting: "画像をローカルで準備中…" }, progress: { "loading-engine": "ローカルOCRエンジンを読み込み中…", "loading-language": "言語データを読み込み中…", initializing: "認識を初期化中…", recognizing: "テキストを認識中… {percent}%", complete: "認識を完了中…" }, errors: { oneFile: "画像を1件だけ選択してください。", tooLarge: "画像が50 MiBの上限を超えています。", signature: "対応するPNG、JPEG、WebP画像ではありません。", decode: "画像をデコードできません。", initialization: "ローカルOCRエンジンを初期化できません。", recognition: "文字認識に失敗しました。再試行するか別の画像を選択してください。", busy: "認識の停止処理中です。少し待って再試行してください。", copy: "コピーできませんでした。手動で選択してコピーしてください。", download: "テキストファイルをダウンロードできません。", generic: "認識用に画像を準備できません。" } }, +}; + +const es = { + metadata: { title: "OCR de imagen a texto — Secure Tools", description: "Extrae texto editable de una imagen PNG, JPEG o WebP localmente en el navegador." }, toolName: "OCR de imagen a texto", categoryDescription: "Extrae texto editable con OCR local en inglés y coreano.", + copy: { eyebrow: "Herramienta OCR local", title: "Imagen a texto", description: "Reconoce texto en una imagen PNG, JPEG o WebP sin subirla.", drop: { title: "Añadir una imagen", description: "Suelta o elige una imagen PNG, JPEG o WebP.", choose: "Elegir imagen", localTitle: "Procesamiento local.", localBody: "La imagen y el texto reconocido no salen del dispositivo.", privacyLink: "Cómo funciona la privacidad" }, source: { title: "Imagen de origen", empty: "No hay ninguna imagen seleccionada.", selectedLabel: "Imagen de origen seleccionada", meta: "{size} · {format}", replace: "Reemplazar imagen", remove: "Quitar imagen", previewAlt: "Vista previa de la imagen seleccionada" }, settings: { title: "Reconocimiento", language: "Idioma del texto", english: "Inglés", korean: "Coreano", combined: "Inglés + coreano", recognize: "Reconocer texto", cancel: "Cancelar reconocimiento", retry: "Reintentar", progress: "Progreso del reconocimiento" }, result: { title: "Texto reconocido", description: "Revisa y edita el texto antes de copiarlo o descargarlo.", label: "Texto reconocido editable", copy: "Copiar texto", download: "Descargar TXT" }, status: { ready: "La imagen está lista. Elige el idioma e inicia el reconocimiento.", cancelled: "Reconocimiento cancelado. La imagen sigue lista.", success: "Reconocimiento terminado. Puedes editar el resultado.", copied: "Texto reconocido copiado.", downloaded: "Se descargó {name}.", removed: "Imagen de origen eliminada.", selecting: "Preparando la imagen localmente…" }, progress: { "loading-engine": "Cargando el motor OCR local…", "loading-language": "Cargando datos de idioma…", initializing: "Inicializando el reconocimiento…", recognizing: "Reconociendo texto… {percent}%", complete: "Finalizando el reconocimiento…" }, errors: { oneFile: "Elige exactamente una imagen.", tooLarge: "La imagen supera el límite de 50 MiB.", signature: "No es una imagen PNG, JPEG o WebP compatible.", decode: "No se pudo decodificar la imagen.", initialization: "No se pudo iniciar el motor OCR local.", recognition: "Falló el reconocimiento. Reintenta o elige otra imagen.", busy: "El reconocimiento aún se está deteniendo. Reintenta en un momento.", copy: "No se pudo copiar. Selecciona el texto y cópialo manualmente.", download: "No se pudo descargar el archivo de texto.", generic: "No se pudo preparar la imagen para el reconocimiento." } }, +}; + +const de = { + metadata: { title: "Bild-zu-Text-OCR — Secure Tools", description: "Extrahiert bearbeitbaren Text aus einem PNG-, JPEG- oder WebP-Bild lokal im Browser." }, toolName: "Bild-zu-Text-OCR", categoryDescription: "Extrahiert bearbeitbaren Text mit lokaler englischer und koreanischer OCR.", + copy: { eyebrow: "Lokales OCR-Werkzeug", title: "Bild zu Text", description: "Erkennt Text in einem PNG-, JPEG- oder WebP-Bild ohne Upload.", drop: { title: "Ein Bild hinzufügen", description: "PNG-, JPEG- oder WebP-Bild ablegen oder auswählen.", choose: "Bild auswählen", localTitle: "Lokale Verarbeitung.", localBody: "Bild und erkannter Text verlassen dieses Gerät nicht.", privacyLink: "So funktioniert der Datenschutz" }, source: { title: "Quellbild", empty: "Noch kein Bild ausgewählt.", selectedLabel: "Ausgewähltes Quellbild", meta: "{size} · {format}", replace: "Bild ersetzen", remove: "Bild entfernen", previewAlt: "Vorschau des ausgewählten Bildes" }, settings: { title: "Erkennung", language: "Textsprache", english: "Englisch", korean: "Koreanisch", combined: "Englisch + Koreanisch", recognize: "Text erkennen", cancel: "Erkennung abbrechen", retry: "Erneut versuchen", progress: "Erkennungsfortschritt" }, result: { title: "Erkannter Text", description: "Text vor dem Kopieren oder Herunterladen prüfen und bearbeiten.", label: "Bearbeitbarer erkannter Text", copy: "Text kopieren", download: "TXT herunterladen" }, status: { ready: "Bild bereit. Sprache wählen und Erkennung starten.", cancelled: "Erkennung abgebrochen. Das Bild bleibt bereit.", success: "Erkennung abgeschlossen. Das Ergebnis kann bearbeitet werden.", copied: "Erkannten Text kopiert.", downloaded: "{name} heruntergeladen.", removed: "Quellbild entfernt.", selecting: "Bild wird lokal vorbereitet…" }, progress: { "loading-engine": "Lokale OCR-Engine wird geladen…", "loading-language": "Sprachdaten werden geladen…", initializing: "Erkennung wird initialisiert…", recognizing: "Text wird erkannt… {percent}%", complete: "Erkennung wird abgeschlossen…" }, errors: { oneFile: "Genau ein Bild auswählen.", tooLarge: "Das Bild überschreitet 50 MiB.", signature: "Keine unterstützte PNG-, JPEG- oder WebP-Datei.", decode: "Das Bild konnte nicht dekodiert werden.", initialization: "Die lokale OCR-Engine konnte nicht initialisiert werden.", recognition: "Texterkennung fehlgeschlagen. Erneut versuchen oder anderes Bild wählen.", busy: "Die Erkennung wird noch beendet. Gleich erneut versuchen.", copy: "Text konnte nicht kopiert werden. Manuell auswählen und kopieren.", download: "Textdatei konnte nicht heruntergeladen werden.", generic: "Das Bild konnte nicht vorbereitet werden." } }, +}; + +const fr = { + metadata: { title: "OCR image vers texte — Secure Tools", description: "Extrayez localement du texte modifiable d’une image PNG, JPEG ou WebP dans le navigateur." }, toolName: "OCR image vers texte", categoryDescription: "Extrayez du texte modifiable avec l’OCR local anglais et coréen.", + copy: { eyebrow: "Outil OCR local", title: "Image vers texte", description: "Reconnaissez le texte d’une image PNG, JPEG ou WebP sans transfert.", drop: { title: "Ajouter une image", description: "Déposez ou choisissez une image PNG, JPEG ou WebP.", choose: "Choisir une image", localTitle: "Traitement local.", localBody: "L’image et le texte reconnu restent sur cet appareil.", privacyLink: "Fonctionnement de la confidentialité" }, source: { title: "Image source", empty: "Aucune image sélectionnée.", selectedLabel: "Image source sélectionnée", meta: "{size} · {format}", replace: "Remplacer l’image", remove: "Retirer l’image", previewAlt: "Aperçu de l’image sélectionnée" }, settings: { title: "Reconnaissance", language: "Langue du texte", english: "Anglais", korean: "Coréen", combined: "Anglais + coréen", recognize: "Reconnaître le texte", cancel: "Annuler la reconnaissance", retry: "Réessayer", progress: "Progression de la reconnaissance" }, result: { title: "Texte reconnu", description: "Vérifiez et modifiez le texte avant de le copier ou de le télécharger.", label: "Texte reconnu modifiable", copy: "Copier le texte", download: "Télécharger le TXT" }, status: { ready: "Image prête. Choisissez la langue et lancez la reconnaissance.", cancelled: "Reconnaissance annulée. L’image reste prête.", success: "Reconnaissance terminée. Vous pouvez modifier le résultat.", copied: "Texte reconnu copié.", downloaded: "{name} téléchargé.", removed: "Image source retirée.", selecting: "Préparation locale de l’image…" }, progress: { "loading-engine": "Chargement du moteur OCR local…", "loading-language": "Chargement des données de langue…", initializing: "Initialisation de la reconnaissance…", recognizing: "Reconnaissance du texte… {percent}%", complete: "Finalisation de la reconnaissance…" }, errors: { oneFile: "Choisissez une seule image.", tooLarge: "L’image dépasse la limite de 50 Mio.", signature: "Ce fichier n’est pas une image PNG, JPEG ou WebP prise en charge.", decode: "Impossible de décoder l’image.", initialization: "Impossible d’initialiser le moteur OCR local.", recognition: "Échec de la reconnaissance. Réessayez ou choisissez une autre image.", busy: "La reconnaissance est encore en cours d’arrêt. Réessayez dans un instant.", copy: "Impossible de copier. Sélectionnez le texte et copiez-le manuellement.", download: "Impossible de télécharger le fichier texte.", generic: "Impossible de préparer l’image pour la reconnaissance." } }, +}; + +export const imageToTextLocales = { en, ko, ja, es, de, fr }; diff --git a/sitemap.xml b/sitemap.xml index db18d1c..3171181 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -15,6 +15,7 @@ https://tools.securetools.app/tools/image/resize/ https://tools.securetools.app/tools/image/compress/ https://tools.securetools.app/tools/image/metadata/ + https://tools.securetools.app/tools/image/to-text/ https://tools.securetools.app/tools/privacy/ https://tools.securetools.app/tools/scan/ https://tools.securetools.app/tools/media/ diff --git a/tests/category-availability.test.mjs b/tests/category-availability.test.mjs index b516c40..f1ac444 100644 --- a/tests/category-availability.test.mjs +++ b/tests/category-availability.test.mjs @@ -28,10 +28,10 @@ function assertRoutesExist(categoryPage, routes) { const imageHtml = read("tools/image/index.html"); const imageList = categoryList(imageHtml); -const imageRoutes = ["./converter/", "./resize/", "./compress/", "./metadata/"]; -assert.equal((imageList.match(/
  • /g) || []).length, 4); +const imageRoutes = ["./converter/", "./resize/", "./compress/", "./metadata/", "./to-text/"]; +assert.equal((imageList.match(/
  • /g) || []).length, 5); assert.deepEqual(linkedRoutes(imageList), imageRoutes); -assert.equal((imageList.match(/status--available/g) || []).length, 4); +assert.equal((imageList.match(/status--available/g) || []).length, 5); assert.doesNotMatch(imageHtml, /<\/ul>\s*
  • /, "Image metadata card must remain inside the semantic list"); assertRoutesExist("tools/image/index.html", imageRoutes); diff --git a/tests/cloudflare-bridge.test.mjs b/tests/cloudflare-bridge.test.mjs index 465d0dc..e48349a 100644 --- a/tests/cloudflare-bridge.test.mjs +++ b/tests/cloudflare-bridge.test.mjs @@ -34,7 +34,7 @@ assert.doesNotMatch(workflow, /node tests\/deployment-smoke\.mjs https:\/\/secur const deploymentSmoke = fs.readFileSync("tests/deployment-smoke.mjs", "utf8"); const routeLines = deploymentSmoke.match(/^ "\/(?:"|[^"].*\/"),$/gm) || []; -assert.equal(routeLines.length, 19, "deployment smoke must validate all 19 H3.1 routes"); +assert.equal(routeLines.length, 20, "deployment smoke must validate all 20 public and migration routes"); assert.match(deploymentSmoke, /redirect: "manual"/); assert.match(deploymentSmoke, /\["noindex", "indexable"\]/); assert.match(deploymentSmoke, /"x-robots-tag"/); diff --git a/tests/deployment-smoke.mjs b/tests/deployment-smoke.mjs index 173cf71..55c2fcd 100644 --- a/tests/deployment-smoke.mjs +++ b/tests/deployment-smoke.mjs @@ -16,6 +16,7 @@ const routes = [ "/tools/image/resize/", "/tools/image/compress/", "/tools/image/metadata/", + "/tools/image/to-text/", "/tools/privacy/", "/tools/scan/", "/tools/media/", @@ -95,4 +96,4 @@ for (const asset of assets) { await response.arrayBuffer(); } -console.log(`Deployment smoke checks passed for ${base.origin}: indexing=${indexing}, 19 routes, 7 assets, no redirects, expected indexing header, 18 tools-host canonical and social metadata pages plus the intentional noindex legacy alias.`); +console.log(`Deployment smoke checks passed for ${base.origin}: indexing=${indexing}, 20 routes, 7 assets, no redirects, expected indexing header, 19 tools-host canonical and social metadata pages plus the intentional noindex legacy alias.`); diff --git a/tests/i18n-quality.test.mjs b/tests/i18n-quality.test.mjs index 09f59ef..8225b0c 100644 --- a/tests/i18n-quality.test.mjs +++ b/tests/i18n-quality.test.mjs @@ -45,7 +45,7 @@ function placeholders(value) { function testCatalogParityAndQuality() { assert.deepEqual([...Object.keys(translations)], [...languageNames.keys()]); const english = flatten(translations.en); - assert.equal(english.size, 761); + assert.equal(english.size, 817); for (const [language, catalog] of Object.entries(translations)) { const flattened = flatten(catalog); @@ -77,7 +77,7 @@ function testResolutionDetectionAndPersistence() { function testSelectorsAndDocumentTranslation() { const pages = listFiles(root, (file) => file.endsWith(".html") && fs.readFileSync(file, "utf8").includes("data-language-select")); - assert.equal(pages.length, 19, "Every production page with the shared header must expose the language selector"); + assert.equal(pages.length, 20, "Every production page with the shared header must expose the language selector"); for (const file of pages) { const html = fs.readFileSync(file, "utf8"); const select = html.match(/]*data-language-select[^>]*>([\s\S]*?)<\/select>/)?.[1]; @@ -117,6 +117,7 @@ function testDynamicToolsAndMetadata() { "tools/pdf/to-images/app.js", "tools/pdf/metadata/app.js", "tools/image/metadata/app.js", + "tools/image/to-text/app.js", ]; for (const relative of dynamicApps) { const source = fs.readFileSync(path.join(root, relative), "utf8"); diff --git a/tests/image-compressor.test.mjs b/tests/image-compressor.test.mjs index 80d52db..81691ab 100644 --- a/tests/image-compressor.test.mjs +++ b/tests/image-compressor.test.mjs @@ -50,7 +50,7 @@ await assert.rejects(compressImages({ files: Array.from({ length: 5 }, (_, i) => assert.equal(MAX_JOB_PIXELS, 200_000_000); assert.equal(limitClosed, 5); const html = read("tools/image/compress/index.html"); const app = read("tools/image/compress/app.js"); const logic = read("tools/image/compress/compressor.js"); const css = read("tools/image/compress/tool.css"); const category = read("tools/image/index.html"); -assert.match(category, /href="\.\/converter\/"/); assert.match(category, /href="\.\/resize\/"/); assert.match(category, /href="\.\/compress\/"/); assert.match(category, /href="\.\/metadata\/"/); assert.equal((category.match(/class="category-tool surface"/g) || []).length, 4); assert.doesNotMatch(category, /categories\.plannedNote/); +assert.match(category, /href="\.\/converter\/"/); assert.match(category, /href="\.\/resize\/"/); assert.match(category, /href="\.\/compress\/"/); assert.match(category, /href="\.\/metadata\/"/); assert.match(category, /href="\.\/to-text\/"/); assert.equal((category.match(/class="category-tool surface"/g) || []).length, 5); assert.doesNotMatch(category, /categories\.plannedNote/); assert.match(html, /type="file"[^>]*multiple[^>]*aria-describedby="drop-description"/); assert.match(html, /id="output-format"[\s\S]*value="original"[\s\S]*value="jpeg"[\s\S]*value="png"[\s\S]*value="webp"/); assert.match(html, /id="quality"[^>]*min="0\.5"[^>]*max="1"[^>]*value="0\.8"/); assert.match(html, /id="compression-results"[^>]*hidden[^>]*aria-labelledby="results-title"/); assert.match(html, /role="status" aria-live="polite"/); assert.match(html, /connect-src 'none'/); assert.match(app, /showQuality = elements\.format\.value !== "png"/); assert.match(app, /invalidateResults\(true\)/); assert.match(app, /finally \{ state\.busy = false; elements\.progress\.hidden = true/); assert.match(app, /URL\.revokeObjectURL/); assert.match(logic, /decoded\?\.close\(\)/); assert.match(read("tools/shared/image.js"), /imageOrientation: "from-image"/); assert.match(app, /const metrics = \{ results: result\.results, aggregate: result\.aggregate \}/, "Result UI state must not retain generated output blobs"); diff --git a/tests/image-converter.test.mjs b/tests/image-converter.test.mjs index 9dbc977..97d3264 100644 --- a/tests/image-converter.test.mjs +++ b/tests/image-converter.test.mjs @@ -172,7 +172,8 @@ const organizer = read("tools/pdf/organize/app.js"); assert.match(category, /href="\.\/converter\/"[\s\S]*status--available/); assert.match(category, /href="\.\/resize\/"[\s\S]*status--available/); assert.match(category, /href="\.\/compress\/"[\s\S]*status--available/); -assert.equal((category.match(/class="category-tool surface"/g) || []).length, 4); +assert.match(category, /href="\.\/to-text\/"[\s\S]*status--available/); +assert.equal((category.match(/class="category-tool surface"/g) || []).length, 5); assert.doesNotMatch(category, /categories\.plannedNote/); assert.match(html, /type="file"[^>]*multiple[^>]*aria-describedby="drop-description"/); assert.match(html, /
    • +
  • + +
    +Available + +
    +

    Image to Text OCR

    +

    Extract editable text from an image with local English and Korean OCR.

    +     +

    • Available tools process file contents locally in browser memory.

    diff --git a/tools/image/to-text/app.js b/tools/image/to-text/app.js new file mode 100644 index 0000000..64e5a81 --- /dev/null +++ b/tools/image/to-text/app.js @@ -0,0 +1,124 @@ +import { t } from "../../../js/i18n.js"; +import { formatBytes } from "../../shared/file.js"; +import { createOcrService } from "../../shared/ocr.js"; +import { createImageToTextController, defaultOcrLanguage, OCR_UI_STATES } from "./controller.js"; +import { copyText, downloadText, textFilename } from "./output.js"; +import { preparePreviewSource, releasePreviewSource } from "./preview.js"; + +const elements = Object.fromEntries([...document.querySelectorAll("[id]")].map((element) => [element.id.replaceAll("-", "_"), element])); +let state = null; +let transientStatus = null; +const service = createOcrService(); + +function message(key, values = {}) { + return Object.entries(values).reduce((value, [name, replacement]) => value.replaceAll(`{${name}}`, String(replacement)), t(key)); +} + +function errorKey(error) { + const code = error?.code; + if (code === "IMAGE_FILE_TOO_LARGE") return "imageToText.errors.tooLarge"; + if (code === "IMAGE_SIGNATURE_INVALID" || code === "UNSUPPORTED_IMAGE") return "imageToText.errors.signature"; + if (code === "IMAGE_DECODE_FAILED" || code === "IMAGE_DIMENSION_EXCEEDED" || code === "IMAGE_PIXELS_EXCEEDED") return "imageToText.errors.decode"; + if (code === "OCR_INITIALIZATION_FAILED") return "imageToText.errors.initialization"; + if (code === "OCR_BUSY") return "imageToText.errors.busy"; + if (code === "OCR_RECOGNITION_FAILED") return "imageToText.errors.recognition"; + return "imageToText.errors.generic"; +} + +function statusForState() { + if (transientStatus) return transientStatus; + if (state.phase === OCR_UI_STATES.RECOGNIZING) { + const stage = state.progress?.stage || "loading-engine"; + const percent = Math.round((state.progress?.progress || 0) * 100); + return { key: `imageToText.progress.${stage}`, values: { percent } }; + } + if (state.phase === OCR_UI_STATES.READY) return { key: "imageToText.status.ready" }; + if (state.phase === OCR_UI_STATES.SUCCESS) return { key: "imageToText.status.success", tone: "success" }; + if (state.phase === OCR_UI_STATES.CANCELLED) return { key: "imageToText.status.cancelled", tone: "warning" }; + if (state.phase === OCR_UI_STATES.ERROR) return { key: errorKey(state.error), tone: "error" }; + return null; +} + +function render() { + if (!state) return; + const hasSource = Boolean(state.source); + const recognizing = state.phase === OCR_UI_STATES.RECOGNIZING; + elements.source_empty.hidden = hasSource; + elements.source_card.hidden = !hasSource; + if (hasSource) { + elements.source_preview.src = state.source.previewUrl; + elements.source_preview.alt = t("imageToText.source.previewAlt"); + elements.source_name.textContent = state.source.file.name; + const format = (state.source.file.type.split("/")[1] || state.source.previewType.split("/")[1] || "image").toUpperCase(); + elements.source_meta.textContent = message("imageToText.source.meta", { size: formatBytes(state.source.file.size), format }); + } else { + elements.source_preview.removeAttribute("src"); + } + elements.file_input.disabled = recognizing; + elements.replace_source.disabled = recognizing; + elements.remove_source.disabled = recognizing; + elements.ocr_language.disabled = recognizing; + elements.ocr_language.value = state.language; + elements.recognize.disabled = !hasSource || recognizing; + elements.recognize.textContent = t(state.phase === OCR_UI_STATES.ERROR || state.phase === OCR_UI_STATES.CANCELLED ? "imageToText.settings.retry" : "imageToText.settings.recognize"); + elements.cancel.hidden = !recognizing; + elements.ocr_progress.hidden = !recognizing; + if (recognizing && Number.isFinite(state.progress?.progress)) elements.ocr_progress.value = state.progress.progress; + else elements.ocr_progress.removeAttribute("value"); + elements.result_panel.hidden = state.phase !== OCR_UI_STATES.SUCCESS; + if (state.phase === OCR_UI_STATES.SUCCESS && elements.result_text.value !== state.text) elements.result_text.value = state.text; + const canExport = state.phase === OCR_UI_STATES.SUCCESS && elements.result_text.value.length > 0; + elements.copy_result.disabled = !canExport; + elements.download_result.disabled = !canExport; + const status = statusForState(); + elements.tool_status.textContent = status ? message(status.key, status.values) : ""; + if (status?.tone) elements.tool_status.dataset.tone = status.tone; else delete elements.tool_status.dataset.tone; +} + +const controller = createImageToTextController({ + language: defaultOcrLanguage(document.documentElement.lang), + recognizeImage: service.recognizeImage, + prepareSource: preparePreviewSource, + releaseSource: releasePreviewSource, + dispose: service.dispose, + onChange(nextState) { state = nextState; transientStatus = null; render(); }, +}); + +async function selectFiles(files) { + if (files.length !== 1) { + transientStatus = { key: "imageToText.errors.oneFile", tone: "error" }; + render(); + return; + } + transientStatus = { key: "imageToText.status.selecting" }; + render(); + await controller.select(files[0]); + elements.file_input.value = ""; +} + +elements.file_input.addEventListener("change", (event) => selectFiles([...event.target.files])); +elements.replace_source.addEventListener("click", () => elements.file_input.click()); +elements.remove_source.addEventListener("click", async () => { await controller.remove(); transientStatus = { key: "imageToText.status.removed" }; render(); elements.file_input.focus(); }); +elements.ocr_language.addEventListener("change", (event) => controller.setLanguage(event.target.value)); +elements.recognize.addEventListener("click", () => controller.recognize()); +elements.cancel.addEventListener("click", () => controller.cancel()); +elements.result_text.addEventListener("input", (event) => controller.updateText(event.target.value)); +elements.copy_result.addEventListener("click", async () => { + try { await copyText(elements.result_text.value); transientStatus = { key: "imageToText.status.copied", tone: "success" }; } + catch { transientStatus = { key: "imageToText.errors.copy", tone: "error" }; } + render(); +}); +elements.download_result.addEventListener("click", () => { + try { + const name = textFilename(state.source.file.name); + downloadText(elements.result_text.value, state.source.file.name); + transientStatus = { key: "imageToText.status.downloaded", values: { name }, tone: "success" }; + } catch { transientStatus = { key: "imageToText.errors.download", tone: "error" }; } + render(); +}); +for (const type of ["dragenter", "dragover"]) elements.drop_zone.addEventListener(type, (event) => { event.preventDefault(); if (!elements.file_input.disabled) elements.drop_zone.dataset.dragging = "true"; }); +for (const type of ["dragleave", "drop"]) elements.drop_zone.addEventListener(type, (event) => { event.preventDefault(); delete elements.drop_zone.dataset.dragging; }); +elements.drop_zone.addEventListener("drop", (event) => { if (!elements.file_input.disabled) selectFiles([...event.dataTransfer.files]); }); +document.addEventListener("securetools:languagechange", render); +window.addEventListener("pagehide", () => controller.dispose(), { once: true }); +render(); diff --git a/tools/image/to-text/controller.js b/tools/image/to-text/controller.js new file mode 100644 index 0000000..f80b907 --- /dev/null +++ b/tools/image/to-text/controller.js @@ -0,0 +1,147 @@ +import { OCR_LANGUAGES, resolveOcrLanguage } from "../../shared/ocr.js"; + +export const OCR_UI_STATES = Object.freeze({ + EMPTY: "empty", + READY: "ready", + RECOGNIZING: "recognizing", + SUCCESS: "success", + ERROR: "error", + CANCELLED: "cancelled", +}); + +export function defaultOcrLanguage(uiLanguage) { + return String(uiLanguage || "").toLowerCase().startsWith("ko") + ? OCR_LANGUAGES.KOREAN_ENGLISH + : OCR_LANGUAGES.ENGLISH; +} + +export function createImageToTextController(configuration) { + const recognizeImage = configuration.recognizeImage; + const prepareSource = configuration.prepareSource; + const releaseSource = configuration.releaseSource || (() => {}); + const onChange = configuration.onChange || (() => {}); + let generation = 0; + let active = null; + let disposed = false; + let state = { + phase: OCR_UI_STATES.EMPTY, + source: null, + language: resolveOcrLanguage(configuration.language || OCR_LANGUAGES.ENGLISH), + text: "", + progress: null, + error: null, + }; + + function publish(patch) { + state = { ...state, ...patch }; + onChange({ ...state }); + } + + function snapshot() { + return { ...state }; + } + + async function cancel() { + if (!active) return false; + const current = active; + generation += 1; + active = null; + current.abortController.abort(); + publish({ phase: OCR_UI_STATES.CANCELLED, progress: null, error: null, text: "" }); + try { await current.promise; } catch { /* The active request reports cancellation itself. */ } + return true; + } + + async function select(file) { + if (disposed) return; + await cancel(); + const request = ++generation; + const previous = state.source; + if (previous) releaseSource(previous); + publish({ phase: OCR_UI_STATES.EMPTY, source: null, text: "", progress: null, error: null }); + try { + const source = await prepareSource(file); + if (disposed || request !== generation) { + releaseSource(source); + return; + } + publish({ phase: OCR_UI_STATES.READY, source, text: "", progress: null, error: null }); + } catch (error) { + if (request === generation && !disposed) { + publish({ phase: OCR_UI_STATES.ERROR, source: null, text: "", progress: null, error }); + } + } + } + + async function remove() { + if (disposed) return; + await cancel(); + generation += 1; + if (state.source) releaseSource(state.source); + publish({ phase: OCR_UI_STATES.EMPTY, source: null, text: "", progress: null, error: null }); + } + + async function setLanguage(language) { + const nextLanguage = resolveOcrLanguage(language); + if (nextLanguage === state.language || disposed) return; + await cancel(); + generation += 1; + publish({ + language: nextLanguage, + phase: state.source ? OCR_UI_STATES.READY : OCR_UI_STATES.EMPTY, + text: "", + progress: null, + error: null, + }); + } + + async function recognize() { + if (disposed || !state.source || active) return; + const request = ++generation; + const abortController = new AbortController(); + const source = state.source; + publish({ phase: OCR_UI_STATES.RECOGNIZING, text: "", progress: null, error: null }); + const promise = recognizeImage(source.file, { + language: state.language, + signal: abortController.signal, + onProgress(progress) { + if (!disposed && request === generation && active?.request === request) publish({ progress }); + }, + }); + active = { request, abortController, promise }; + try { + const result = await promise; + if (!disposed && request === generation && active?.request === request) { + publish({ phase: OCR_UI_STATES.SUCCESS, text: result.text, progress: null, error: null }); + } + } catch (error) { + if (!disposed && request === generation && active?.request === request) { + publish({ + phase: error?.code === "OCR_CANCELLED" ? OCR_UI_STATES.CANCELLED : OCR_UI_STATES.ERROR, + text: "", + progress: null, + error: error?.code === "OCR_CANCELLED" ? null : error, + }); + } + } finally { + if (active?.request === request) active = null; + } + } + + function updateText(text) { + if (state.phase === OCR_UI_STATES.SUCCESS) publish({ text: String(text) }); + } + + async function dispose() { + if (disposed) return; + await cancel(); + disposed = true; + generation += 1; + if (state.source) releaseSource(state.source); + state = { ...state, source: null, text: "", progress: null }; + await configuration.dispose?.(); + } + + onChange(snapshot()); + return Object.freeze({ snapshot, select, remove, setLanguage, recognize, cancel, updateText, dispose }); +} diff --git a/tools/image/to-text/index.html b/tools/image/to-text/index.html new file mode 100644 index 0000000..22fae48 --- /dev/null +++ b/tools/image/to-text/index.html @@ -0,0 +1,16 @@ + + + + +Image to Text OCR — Secure Tools + + +
    Secure Tools
    + +

    Local OCR tool

    Image to Text

    Recognize text in one PNG, JPEG, or WebP image without uploading it.

    +

    Add one image

    Drop a PNG, JPEG, or WebP image here or use the picker.

    Processed locally. Your image and recognized text never leave this device. How privacy works

    +

    Source image

    No image selected yet.

    +
    +
    + + diff --git a/tools/image/to-text/output.js b/tools/image/to-text/output.js new file mode 100644 index 0000000..2a54671 --- /dev/null +++ b/tools/image/to-text/output.js @@ -0,0 +1,38 @@ +import { downloadBlob } from "../../shared/save.js"; + +const ILLEGAL_FILENAME_CHARACTERS = /[\\/:*?"<>|\u0000-\u001f]+/g; + +export function textFilename(sourceName) { + const withoutExtension = String(sourceName || "").replace(/\.[^.]+$/, ""); + const clean = withoutExtension.trim().replace(ILLEGAL_FILENAME_CHARACTERS, "_").replace(/[. ]+$/g, ""); + return `${clean || "recognized-text"}.txt`; +} + +export function createTextBlob(text) { + return new Blob([String(text)], { type: "text/plain;charset=utf-8" }); +} + +export async function copyText(text, environment = {}) { + const navigatorObject = environment.navigatorObject || globalThis.navigator; + const documentObject = environment.documentObject || globalThis.document; + if (navigatorObject?.clipboard?.writeText) { + await navigatorObject.clipboard.writeText(String(text)); + return; + } + if (!documentObject?.createElement || typeof documentObject.execCommand !== "function") { + throw Object.assign(new Error("OCR_COPY_FAILED"), { code: "OCR_COPY_FAILED" }); + } + const field = documentObject.createElement("textarea"); + field.value = String(text); + field.setAttribute("readonly", ""); + field.className = "clipboard-fallback"; + documentObject.body.append(field); + field.select(); + const copied = documentObject.execCommand("copy"); + field.remove(); + if (!copied) throw Object.assign(new Error("OCR_COPY_FAILED"), { code: "OCR_COPY_FAILED" }); +} + +export function downloadText(text, sourceName, environment) { + downloadBlob(createTextBlob(text), textFilename(sourceName), environment); +} diff --git a/tools/image/to-text/preview.js b/tools/image/to-text/preview.js new file mode 100644 index 0000000..c6962fa --- /dev/null +++ b/tools/image/to-text/preview.js @@ -0,0 +1,16 @@ +import { prepareImageForOcr } from "../../shared/ocr.js"; + +export async function preparePreviewSource(file, environment = {}) { + const prepareImage = environment.prepareImage || prepareImageForOcr; + const urlObject = environment.urlObject || URL; + const previewBlob = await prepareImage(file); + return { + file, + previewUrl: urlObject.createObjectURL(previewBlob), + previewType: previewBlob.type, + }; +} + +export function releasePreviewSource(source, environment = {}) { + if (source?.previewUrl) (environment.urlObject || URL).revokeObjectURL(source.previewUrl); +} diff --git a/tools/image/to-text/tool.css b/tools/image/to-text/tool.css new file mode 100644 index 0000000..bdcc16c --- /dev/null +++ b/tools/image/to-text/tool.css @@ -0,0 +1,16 @@ +.ocr-source { display: grid; grid-template-columns: minmax(10rem, 42%) minmax(0, 1fr); gap: var(--space-5); align-items: center; } +.ocr-source[hidden], .ocr-result[hidden], .button[hidden], .generation-progress[hidden] { display: none; } +.ocr-preview-wrap { display: grid; min-height: 15rem; max-height: 28rem; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); } +.ocr-preview-wrap img { display: block; width: 100%; height: 100%; max-height: 28rem; object-fit: contain; } +.ocr-source-details { min-width: 0; } +.ocr-source-details strong { display: block; overflow-wrap: anywhere; } +.ocr-source-details p { margin: var(--space-2) 0 var(--space-4); color: var(--text-secondary); } +.source-actions, .result-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } +.ocr-result { padding: var(--space-5); } +.ocr-result h2 { margin-bottom: var(--space-2); font-size: 1.35rem; } +.ocr-result > p { color: var(--text-secondary); } +.ocr-result label { display: block; margin-bottom: var(--space-2); font-weight: var(--font-weight-bold); } +.ocr-result textarea { width: 100%; min-height: 16rem; resize: vertical; margin-bottom: var(--space-4); padding: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-primary); color: var(--text-primary); font: inherit; line-height: 1.6; } +.ocr-result textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } +.clipboard-fallback { position: fixed; left: -10000px; top: 0; } +@media (max-width: 48rem) { .ocr-source { grid-template-columns: 1fr; } .ocr-preview-wrap { min-height: 12rem; } .source-actions .button, .result-actions .button { flex: 1 1 10rem; } }