| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Sludge — deceptive design patterns in UI trees</title> |
| <meta name="description" content="Detect deceptive design patterns in a UI tree and see which provisions they may implicate. Runs entirely in your browser. Not a legality determination."> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.19.2/dist/ort.min.js"></script> |
| </head> |
| <body> |
| <div class="wrap"> |
|
|
| <header> |
| <h1>Sludge<span class="dot">.</span></h1> |
| <p class="tagline">Deceptive design patterns in <strong>UI trees</strong>, mapped to the |
| provisions they may implicate — running entirely in your browser.</p> |
| </header> |
|
|
| <div class="banner"> |
| <strong>Sludge does not determine legality.</strong> |
| <p>It reports provisions that <em>may</em> be implicated and the screen elements that are the |
| factual basis for looking at them. Whether a provision is actually engaged depends on facts |
| no UI tree contains — purposes, legal basis, audience, the rest of the journey, prior |
| consent, sector rules — and is an assessment for a qualified human.</p> |
| <p>There is no feature here that labels a named company's product unlawful, and there will not |
| be one. This is a tool for reviewing interfaces, not for publishing verdicts about them.</p> |
| <p><strong>Nothing you paste leaves this page.</strong> The model runs locally in your browser; |
| there is no server to send it to. It is a 48 MB one-time download, cached afterwards — |
| full precision, because int8 quantisation was measured to flip about a quarter of this |
| model's decisions.</p> |
| </div> |
|
|
| <div class="grid"> |
| <div class="card"> |
| <label class="fld" for="input">UI tree (JSON) or HTML fragment</label> |
| <textarea id="input" spellcheck="false" placeholder="Paste a UI tree as JSON, or an HTML fragment — or press “Load example” to generate a counterfactual pair."></textarea> |
| <button id="run" disabled>Analyse</button> |
| <div class="status" id="status">starting…</div> |
| <div class="bar"><i id="bar"></i></div> |
| </div> |
|
|
| <div class="card"> |
| <label class="fld" for="profile">Profile — what a false positive costs you</label> |
| <select id="profile"> |
| <option value="triage">triage — sweep broadly, tolerate false positives</option> |
| <option value="review" selected>review — balanced, for a design review</option> |
| <option value="audit">audit — only what it is confident of</option> |
| </select> |
|
|
| <label class="fld" for="juris">Jurisdiction — the provision table</label> |
| <select id="juris"></select> |
|
|
| <label class="fld" for="tpl">Load a counterfactual example</label> |
| <div class="row"> |
| <select id="tpl"></select> |
| <select id="pat"></select> |
| </div> |
| <button id="load" class="secondary">Load example</button> |
| <div id="exnote" class="status"></div> |
| </div> |
| </div> |
|
|
| <div class="tabs" role="tablist"> |
| <button role="tab" aria-selected="true" data-panel="p-find">Elements flagged</button> |
| <button role="tab" aria-selected="false" data-panel="p-prov">Provisions that may be implicated</button> |
| <button role="tab" aria-selected="false" data-panel="p-fix">What to change</button> |
| <button role="tab" aria-selected="false" data-panel="p-tax">Taxonomy</button> |
| <button role="tab" aria-selected="false" data-panel="p-json">JSON</button> |
| </div> |
|
|
| <section role="tabpanel" id="p-find"><div class="empty">Paste a tree, or load an example.</div></section> |
| <section role="tabpanel" id="p-prov" class="hidden"></section> |
| <section role="tabpanel" id="p-fix" class="hidden"></section> |
| <section role="tabpanel" id="p-tax" class="hidden"></section> |
| <section role="tabpanel" id="p-json" class="hidden"></section> |
|
|
| <footer> |
| <p><strong>Sludge does not determine legality.</strong> Findings are pointers for a human to |
| assess, never findings of breach. A quiet report is not a clean bill of health — it means |
| nothing crossed the threshold the chosen profile fixes.</p> |
| <p id="about"></p> |
| <p>Apache-2.0 · the provision tables are configuration, not legal advice.</p> |
| </footer> |
|
|
| </div> |
| <script type="module" src="app.js"></script> |
| </body> |
| </html> |
|
|
