Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- The page talks to two hosts only: Hugging Face for the model files and jsDelivr for the | |
| ONNX runtime. The text is never part of a request: nothing could send it anywhere else. | |
| blob: in script-src: the runtime imports its WebAssembly glue module from a blob URL. --> | |
| <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' blob: https://cdn.jsdelivr.net 'wasm-unsafe-eval'; connect-src https://huggingface.co https://*.huggingface.co https://*.hf.co https://cdn.jsdelivr.net; worker-src 'self' blob: https://cdn.jsdelivr.net; style-src 'self'; img-src 'self' data:; base-uri 'none'; form-action 'none'"> | |
| <title>Alias</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script type="module" src="app.js"></script> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Alias</h1> | |
| <p class="lead">Mask the personal data in a French or English text before it goes to an LLM. | |
| The detector runs <strong>in this browser</strong>: the text never leaves the page.</p> | |
| <p class="notice">First visit: the model (about 600 MB) downloads into your browser, which takes | |
| <strong>about 5 minutes</strong> on a typical connection. It is kept for the next visits, | |
| which start at once.</p> | |
| <p id="status" class="status" role="status">Loading…</p> | |
| <progress id="progress" max="1" hidden></progress> | |
| <p class="demo">Public demo: paste fictitious data only.</p> | |
| </header> | |
| <main> | |
| <section aria-labelledby="input-title"> | |
| <h2 id="input-title">Text</h2> | |
| <textarea id="input" rows="12" spellcheck="false" maxlength="20000" | |
| placeholder="Paste a text: a letter, an e-mail, a record…"></textarea> | |
| <div class="actions"> | |
| <button id="mask" type="button" disabled>Mask</button> | |
| <button id="example" type="button" class="secondary">Try an example</button> | |
| <span id="count" class="muted"></span> | |
| </div> | |
| <p id="error" class="error" role="alert" hidden></p> | |
| </section> | |
| <section id="results" aria-labelledby="found-title" hidden> | |
| <h2 id="found-title">What was found</h2> | |
| <div id="legend" class="legend"></div> | |
| <div id="highlighted" class="highlighted"></div> | |
| <h2>Masked text <span class="muted">(what can go to the LLM)</span></h2> | |
| <textarea id="masked" rows="12" readonly spellcheck="false"></textarea> | |
| <div class="actions"> | |
| <button id="copy" type="button">Copy the masked text</button> | |
| <button id="download" type="button" class="secondary">Download the report (JSON)</button> | |
| <span id="copied" class="muted" aria-live="polite"></span> | |
| </div> | |
| <h2>Report <span class="muted">(counts only, never the values)</span></h2> | |
| <table id="report"><thead><tr><th>Type</th><th>Values</th></tr></thead><tbody></tbody></table> | |
| </section> | |
| <section id="back" aria-labelledby="back-title" hidden> | |
| <h2 id="back-title">Put the values back <span class="muted">(in this browser)</span></h2> | |
| <p class="muted">Send the masked text to the LLM you use (Le Chat, ChatGPT…) with your | |
| request, for instance "Summarise this document", then paste its answer here: the aliases | |
| become the real values again, without the values ever leaving this page.</p> | |
| <textarea id="answer" rows="8" spellcheck="false" | |
| placeholder="Paste the LLM's answer, with its [PERSON_1], [IBAN_1]…"></textarea> | |
| <div class="actions"> | |
| <button id="restore" type="button">Restore</button> | |
| <button id="example-answer" type="button" class="secondary" hidden>Try an example answer</button> | |
| </div> | |
| <p id="restore-report" class="muted" role="status"></p> | |
| <textarea id="restored" rows="8" readonly spellcheck="false" hidden></textarea> | |
| <div class="actions"> | |
| <button id="copy-restored" type="button" hidden>Copy the restored answer</button> | |
| <span id="copied-restored" class="muted" aria-live="polite"></span> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="muted">Alias, open source (MIT): | |
| <a href="https://github.com/gabrielkpo/alias" target="_blank" rel="noopener">code, results and limits</a>. Model: | |
| <a href="https://huggingface.co/Gabrielkph/alias-mmbert-small" target="_blank" rel="noopener">mmBERT-small fine-tuned</a>, | |
| plus checksum and keyword rules. No detector is perfect: read the masked text before sending | |
| it. <span id="version"></span></footer> | |
| </body> | |
| </html> | |