Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>PII Redaction Workflow</title> | |
| <link rel="stylesheet" href="./styles.css"> | |
| <script src="./vendor/jszip.min.js"></script> | |
| </head> | |
| <body> | |
| <main class="shell"> | |
| <section class="topbar"> | |
| <div> | |
| <p class="eyebrow">Browser-side DOCX redaction</p> | |
| <h1>PII Redaction Workflow</h1> | |
| </div> | |
| <div class="status-pill ok">Static Space ready</div> | |
| </section> | |
| <section class="workspace"> | |
| <aside class="upload-panel"> | |
| <h2>Upload DOCX</h2> | |
| <p>The file stays in your browser. The app redacts DOCX XML locally and creates a downloadable redacted file.</p> | |
| <label class="dropzone" id="dropzone"> | |
| <input id="fileInput" type="file" accept=".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> | |
| <span class="drop-title">Drop a .docx here</span> | |
| <span class="drop-subtitle">or click to browse</span> | |
| </label> | |
| <div class="file-card" id="fileCard">No file selected</div> | |
| <fieldset class="mode-switch" aria-label="Redaction engine"> | |
| <legend>Redaction engine</legend> | |
| <label> | |
| <input type="radio" name="redactionMode" value="rules" checked> | |
| <span> | |
| <strong>Rules</strong> | |
| <small>Runs in this browser demo</small> | |
| </span> | |
| </label> | |
| <label class="disabled"> | |
| <input type="radio" name="redactionMode" value="hybrid" disabled> | |
| <span> | |
| <strong>ML / NER</strong> | |
| <small>Available in the local Python app</small> | |
| </span> | |
| </label> | |
| </fieldset> | |
| <aside class="mode-note" role="note"> | |
| <strong>Note</strong> | |
| <p>This live Space is a free static browser demo, so <strong>ML / NER is disabled here</strong>. Use <strong>Rules</strong> in this Space. For the real spaCy <strong>ML / NER</strong> switch, run the local Python app from the GitHub repo.</p> | |
| </aside> | |
| <button id="runButton" type="button" disabled>Run redaction</button> | |
| <a id="downloadLink" class="download-link hidden" href="#" download>Download redacted DOCX</a> | |
| </aside> | |
| <section class="workflow-panel"> | |
| <div class="panel-heading"> | |
| <h2>Workflow</h2> | |
| <p>Nodes update from the actual browser-side processing result.</p> | |
| </div> | |
| <div class="workflow" id="workflow"></div> | |
| </section> | |
| <section class="preview-panel"> | |
| <div class="panel-heading"> | |
| <h2>Document Previews</h2> | |
| <p>Left is the uploaded DOCX. Right is the generated redacted DOCX.</p> | |
| </div> | |
| <div class="preview-grid"> | |
| <article class="doc-preview"> | |
| <div class="preview-header"> | |
| <div> | |
| <span class="preview-kicker">Uploaded</span> | |
| <h3>Original document</h3> | |
| </div> | |
| <span id="uploadedMeta" class="preview-count">Waiting</span> | |
| </div> | |
| <pre id="uploadedPreview">Upload a DOCX to see the original text preview here.</pre> | |
| </article> | |
| <article class="doc-preview result"> | |
| <div class="preview-header"> | |
| <div> | |
| <span class="preview-kicker">Result</span> | |
| <h3>Redacted document</h3> | |
| </div> | |
| <span id="resultMeta" class="preview-count">Waiting</span> | |
| </div> | |
| <pre id="resultPreview">Run redaction to see the redacted output preview here.</pre> | |
| </article> | |
| </div> | |
| </section> | |
| <section class="changes-panel"> | |
| <div class="panel-heading"> | |
| <h2>Changed Snippets</h2> | |
| <p>Direct before/after evidence from the generated redacted DOCX.</p> | |
| </div> | |
| <div id="changesList" class="changes-list"> | |
| <div class="changes-empty">Run redaction to see exact replacements here.</div> | |
| </div> | |
| </section> | |
| <section class="terminal-panel"> | |
| <div class="panel-heading"> | |
| <h2>Terminal</h2> | |
| <p>Real processing logs appear here.</p> | |
| </div> | |
| <pre id="terminal">Waiting for a DOCX upload...</pre> | |
| </section> | |
| <section class="summary-panel"> | |
| <div class="panel-heading"> | |
| <h2>Run Summary</h2> | |
| <p>Counts are produced by the redaction engine.</p> | |
| </div> | |
| <div id="summary" class="summary-grid"> | |
| <div class="summary-empty">No run yet.</div> | |
| </div> | |
| </section> | |
| </section> | |
| </main> | |
| <script src="./app.js"></script> | |
| </body> | |
| </html> | |