Spaces:
Running
Running
| <!-- translate="no": a browser's page translation must not rewrite the text read from a file (or the page around it) --> | |
| <html lang="en" translate="no"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- Chrome still offers to translate a page marked translate="no" (on a phone set to another language); this stops the offer --> | |
| <meta name="google" content="notranslate"> | |
| <meta name="color-scheme" content="light"> | |
| <title>litert-ocr: photo, scan or PDF to text, Markdown and JSON</title> | |
| <meta name="description" content="Drop a photo, screenshot, scan or PDF: the text with its line boxes, Markdown with tables, and JSON, read in this browser tab. Nothing is uploaded."> | |
| <link rel="icon" href="data:,"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script> | |
| // coi-serviceworker sets the two headers that WebAssembly threads need (GitHub Pages cannot): it registers a | |
| // service worker and reloads the page once. The page waits for that before it loads the model. | |
| window.coi = { quiet: true }; | |
| </script> | |
| <script src="coi-serviceworker.js"></script> | |
| <script type="module" src="app.js"></script> | |
| </head> | |
| <body> | |
| <header class="top"> | |
| <h1>Photo, scan or PDF <span class="arrow">→</span> text, Markdown and JSON</h1> | |
| <p class="lede">Read in this tab with <a href="https://github.com/john-rocky/litert-ocr">litert-ocr</a>. Your files never leave this device.</p> | |
| <p id="status" class="status" role="status" aria-live="polite"><span class="dot"></span><span id="status-text">Starting…</span></p> | |
| <p id="detail" class="detail"></p> | |
| <p id="framed" class="framed" hidden></p> | |
| <ul id="notes" class="notes"></ul> | |
| </header> | |
| <main> | |
| <section class="input" aria-label="Input"> | |
| <div id="drop" class="drop"> | |
| <label class="pick"> | |
| <input id="file" type="file" accept="image/*,application/pdf" disabled> | |
| <span id="pick-label">Choose a photo or PDF</span> | |
| </label> | |
| <p class="hint">or drop a file here, or paste a screenshot</p> | |
| </div> | |
| <div class="examples"> | |
| <span class="examples-label">Examples:</span> | |
| <button type="button" class="example" data-file="receipt.jpg" disabled>Receipt photo</button> | |
| <button type="button" class="example" data-file="inventory-scan.pdf" disabled>Scanned table (PDF)</button> | |
| <button type="button" class="example" data-file="sign-ja.jpg" disabled>Sign in Japanese</button> | |
| <button type="button" class="example" data-file="screenshot.png" disabled>Screenshot</button> | |
| </div> | |
| <figure id="figure" class="figure" hidden> | |
| <div class="stage"> | |
| <img id="image" alt="The file being read"> | |
| <canvas id="page" class="page" role="img" aria-label="The PDF page being read" hidden></canvas> | |
| <svg id="boxes" class="boxes" aria-hidden="true"></svg> | |
| </div> | |
| <figcaption> | |
| <span id="caption"></span> | |
| <span id="pager" class="pager" hidden><button type="button" id="prev" aria-label="Previous page">‹</button><button type="button" id="next" aria-label="Next page">›</button></span> | |
| <span id="legend" class="legend" hidden></span> | |
| </figcaption> | |
| </figure> | |
| </section> | |
| <section id="result" class="result" aria-label="Result" hidden> | |
| <div class="headline"> | |
| <p id="took" class="took"></p> | |
| <p id="took-detail" class="took-detail"></p> | |
| <p id="reading" class="took-detail" hidden></p> | |
| </div> | |
| <div id="error" class="error" role="alert" hidden> | |
| <p id="error-title" class="error-title"></p> | |
| <p id="error-text" class="error-text"></p> | |
| <form id="password-form" class="password" hidden> | |
| <label>Password <input id="password" type="password" autocomplete="off"></label> | |
| <button type="submit">Open</button> | |
| </form> | |
| </div> | |
| <div id="output" class="output" hidden> | |
| <div class="tabs" role="tablist"> | |
| <button type="button" role="tab" class="tab" data-tab="text" aria-selected="true">Text</button> | |
| <button type="button" role="tab" class="tab" data-tab="md" aria-selected="false">Markdown</button> | |
| <button type="button" role="tab" class="tab" data-tab="json" aria-selected="false">JSON</button> | |
| <span class="tab-tools"> | |
| <label id="source-toggle" class="toggle" hidden><input id="source" type="checkbox"> Source</label> | |
| <button type="button" id="copy" class="tool">Copy</button> | |
| <button type="button" id="download" class="tool">Download</button> | |
| </span> | |
| </div> | |
| <p id="tab-note" class="tab-note" hidden></p> | |
| <div id="pane-text" class="pane" role="tabpanel"></div> | |
| <div id="pane-md" class="pane md" role="tabpanel" hidden></div> | |
| <pre id="pane-md-source" class="pane source" role="tabpanel" hidden></pre> | |
| <pre id="pane-json" class="pane source" role="tabpanel" hidden></pre> | |
| </div> | |
| </section> | |
| <section id="about" class="about" aria-label="About this page"> | |
| <h2>What this page does</h2> | |
| <p>Photos and screenshots: every text line and its box, in reading order (<code>worker.recognize(file)</code>). PDFs, scans and the Markdown and JSON tabs: pages with a text layer are read from it, scanned pages by OCR, and the lines become headings, paragraphs, lists and tables (<code>convert(file)</code>). A PDF's page is shown with a frame around each heading, paragraph, list item and table that <code>convert()</code> found on it, colored by type; the arrows under the page turn the pages read.</p> | |
| <p>Your files are read in this tab. The page downloads only the litert-ocr library, its LiteRT.js runtime and pdf.js from jsDelivr, and the model files from Hugging Face, once: about 80 MB over the network on the first visit (litert-ocr 0.1.0 in Chrome 155 on a Mac, 2026-10-22; 87 MB uncompressed, the size the status line shows). The browser keeps them. A page that is already open goes on reading with no network (tested in Chrome on a Mac and on an Android phone in airplane mode). Opening the page again with no network worked in Chrome on a Mac, not in Chrome on Android.</p> | |
| <p>The time shown is from handing the file to the library to the result, with the model already loaded. PDFs are read up to 20 pages per file here.</p> | |
| <p><a href="https://github.com/john-rocky/litert-ocr">Source and documentation</a> · <a href="https://github.com/john-rocky/litert-ocr/tree/main/demo">This page's code</a> · <span id="version">litert-ocr 0.2.0</span></p> | |
| </section> | |
| </main> | |
| </body> | |
| </html> | |