Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta | |
| name="description" | |
| content="Run Pulpie Orange Small ONNX in the browser to extract main content from HTML." | |
| /> | |
| <title>Pulpie Orange Web</title> | |
| <link rel="stylesheet" href="./style.css" /> | |
| <script type="module" src="./script.js"></script> | |
| </head> | |
| <body> | |
| <main class="shell"> | |
| <header class="topbar"> | |
| <div> | |
| <p class="eyebrow">Pulpie Orange Small ONNX</p> | |
| <h1>HTML content extraction in your browser</h1> | |
| </div> | |
| <div class="status-pill" id="modelStatus">Model idle</div> | |
| </header> | |
| <section class="model-strip" aria-label="Model load progress"> | |
| <div> | |
| <span id="loadLabel">Ready to load 808 MB ONNX model</span> | |
| <strong id="loadPercent">0%</strong> | |
| </div> | |
| <div class="progress-track"> | |
| <div class="progress-fill" id="loadProgress"></div> | |
| </div> | |
| </section> | |
| <section class="controls" aria-label="Input controls"> | |
| <div class="url-row"> | |
| <input | |
| id="urlInput" | |
| type="url" | |
| inputmode="url" | |
| placeholder="https://example.com/article" | |
| autocomplete="off" | |
| /> | |
| <button id="fetchButton" type="button" class="secondary">Fetch URL</button> | |
| <button id="extractButton" type="button" class="primary">Extract</button> | |
| </div> | |
| <div class="examples" id="examples"></div> | |
| <label class="input-label" for="htmlInput">Raw HTML</label> | |
| <textarea id="htmlInput" spellcheck="false"></textarea> | |
| </section> | |
| <section class="stats" aria-label="Extraction stats"> | |
| <div class="stat"> | |
| <span>Kept</span> | |
| <strong id="keptStat">0</strong> | |
| </div> | |
| <div class="stat"> | |
| <span>Dropped</span> | |
| <strong id="droppedStat">0</strong> | |
| </div> | |
| <div class="stat"> | |
| <span>Processing</span> | |
| <strong id="processingStat">0 ms</strong> | |
| </div> | |
| <div class="stat"> | |
| <span>Model load</span> | |
| <strong id="modelLoadStat">0 s</strong> | |
| </div> | |
| </section> | |
| <section class="compare" aria-label="Original and extracted content"> | |
| <article class="pane"> | |
| <div class="pane-head"> | |
| <h2>Original HTML</h2> | |
| <span id="originalMeta">0 chars</span> | |
| </div> | |
| <pre id="originalOutput"></pre> | |
| </article> | |
| <article class="pane"> | |
| <div class="pane-head"> | |
| <h2>Extracted content</h2> | |
| <span id="cleanMeta">0 chars</span> | |
| </div> | |
| <div id="cleanOutput" class="clean-output"></div> | |
| </article> | |
| </section> | |
| <section class="blocks-section" aria-label="Block classification"> | |
| <div class="pane-head"> | |
| <h2>Blocks</h2> | |
| <span id="blockMeta">No run yet</span> | |
| </div> | |
| <div id="blocksOutput" class="blocks"></div> | |
| </section> | |
| </main> | |
| </body> | |
| </html> | |