Spaces:
Running on Zero
Running on Zero
| """ | |
| ========================================== | |
| Screenshot Anonymizer — v2 (tool revision) | |
| ========================================== | |
| """ | |
| import base64 | |
| import functools | |
| import io | |
| import traceback | |
| from pathlib import Path | |
| import gradio as gr | |
| from fastapi.responses import FileResponse, HTMLResponse, JSONResponse, Response | |
| from gradio.data_classes import FileData | |
| from PIL import Image | |
| from app import ( | |
| CATEGORIES_META, | |
| map_spans_to_boxes, | |
| ocr_image, | |
| run_pii_analysis, | |
| ) | |
| EXAMPLES_DIR = Path(__file__).parent / "example-images" | |
| EXAMPLE_EXTS = {".png", ".jpg", ".jpeg", ".webp", ".bmp"} | |
| def _list_examples() -> list[str]: | |
| if not EXAMPLES_DIR.is_dir(): | |
| return [] | |
| return sorted(p.name for p in EXAMPLES_DIR.iterdir() | |
| if p.is_file() and p.suffix.lower() in EXAMPLE_EXTS) | |
| def _example_thumbnail(name: str) -> bytes: | |
| """Downscaled preview for the landing grid. Cached after first hit.""" | |
| path = EXAMPLES_DIR / name | |
| img = Image.open(path).convert("RGB") | |
| img.thumbnail((480, 480)) | |
| buf = io.BytesIO() | |
| img.save(buf, format="JPEG", quality=82, optimize=True) | |
| return buf.getvalue() | |
| # ===================================================================== | |
| # SERVER | |
| # ===================================================================== | |
| server = gr.Server() | |
| async def homepage(): | |
| return FRONTEND_HTML | |
| # The /api/examples and /examples/{name} routes below serve static | |
| # example thumbnails and originals from disk. They are plain FastAPI | |
| # routes because they do no GPU / queued compute — they just read | |
| # files, which is exactly the pattern the gradio.Server blog | |
| # recommends plain @server.get for. | |
| async def api_examples(): | |
| return JSONResponse({"examples": _list_examples()}) | |
| async def get_example(name: str, thumb: int = 0): | |
| safe = Path(name).name | |
| if Path(safe).suffix.lower() not in EXAMPLE_EXTS: | |
| return JSONResponse({"error": "invalid file type"}, 400) | |
| path = EXAMPLES_DIR / safe | |
| if not path.is_file(): | |
| return JSONResponse({"error": "not found"}, 404) | |
| if thumb: | |
| return Response( | |
| content=_example_thumbnail(safe), | |
| media_type="image/jpeg", | |
| headers={"Cache-Control": "public, max-age=86400"}, | |
| ) | |
| return FileResponse(path, headers={"Cache-Control": "public, max-age=3600"}) | |
| # The compute endpoint: goes through Gradio's queue, plays nicely with | |
| # @spaces.GPU on ZeroGPU, and is callable by both the browser via the | |
| # @gradio/client JS client AND by Python users via gradio_client. | |
| def anonymize_screenshot_api(image: FileData) -> dict: | |
| """OCR + PII-filter an uploaded image. | |
| Input: FileData from `handle_file(file)` (JS client) or | |
| `gradio_client.handle_file(path)` (Python client). | |
| Output: dict with the base-64 image, OCR text, detected spans, | |
| per-span pixel boxes, and the category color/label table. | |
| """ | |
| try: | |
| path = image.get("path") or image.get("url") or "" | |
| if not path: | |
| return {"error": "expected an image file"} | |
| img = Image.open(path).convert("RGB") | |
| ocr = ocr_image(img) | |
| if not ocr["text"].strip(): | |
| return {"error": "No text detected in the image."} | |
| source_text, spans = run_pii_analysis(ocr["text"]) | |
| if source_text != ocr["text"]: | |
| spans = [s for s in spans if s["end"] <= len(ocr["text"])] | |
| boxes = map_spans_to_boxes(ocr["words"], spans) | |
| buf = io.BytesIO(); img.save(buf, format="PNG") | |
| data_url = "data:image/png;base64," + base64.b64encode(buf.getvalue()).decode() | |
| return { | |
| "filename": Path(path).name, | |
| "image": data_url, | |
| "width": img.width, "height": img.height, | |
| "boxes": boxes, | |
| "text": ocr["text"], | |
| "spans": spans, | |
| "categories_meta": { | |
| k: {"color": v["color"], "label": v["label"]} | |
| for k, v in CATEGORIES_META.items() | |
| }, | |
| } | |
| except Exception as e: | |
| traceback.print_exc() | |
| return {"error": f"{type(e).__name__}: {e}"} | |
| # ===================================================================== | |
| # FRONTEND | |
| # ===================================================================== | |
| FRONTEND_HTML = r"""<!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <title>Screenshot Anonymizer</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Lora:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet"> | |
| <style> | |
| *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} | |
| :root{ | |
| color-scheme:dark light; | |
| --bg:#0d0d0f; | |
| --surface:#131316; | |
| --surface2:#1a1a1e; | |
| --surface3:#222227; | |
| --border:rgba(255,255,255,.06); | |
| --border-strong:rgba(255,255,255,.14); | |
| --text:#e9e9ea; | |
| --text2:#9a9a9f; | |
| --text3:#65656c; | |
| --accent:#818cf8; | |
| --accent-dim:rgba(129,140,248,.12); | |
| --danger:#f87171; | |
| --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace; | |
| --serif:'Lora',Georgia,'Times New Roman',serif; | |
| --sans:'Inter',system-ui,-apple-system,sans-serif; | |
| } | |
| @media (prefers-color-scheme: light){ | |
| :root{ | |
| --bg:#fafaf8; | |
| --surface:#ffffff; | |
| --surface2:#f4f4f2; | |
| --surface3:#eeeeec; | |
| --border:rgba(0,0,0,.07); | |
| --border-strong:rgba(0,0,0,.16); | |
| --text:#1c1c1e; | |
| --text2:#515156; | |
| --text3:#86868b; | |
| --accent:#4f46e5; | |
| --accent-dim:rgba(79,70,229,.08); | |
| } | |
| } | |
| html,body{height:100%} | |
| body{ | |
| font-family:var(--sans);font-size:13.5px;line-height:1.5; | |
| color:var(--text);background:var(--bg); | |
| font-feature-settings:'ss01','cv11'; | |
| -webkit-font-smoothing:antialiased; | |
| text-rendering:optimizeLegibility; | |
| overflow:hidden; | |
| } | |
| button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer} | |
| svg{display:block;flex-shrink:0} | |
| /* ── shared chrome ─────────────────────────────────────────────── */ | |
| .app-bar{ | |
| display:flex;align-items:center;gap:.9rem; | |
| padding:.55rem 1rem; | |
| border-bottom:.5px solid var(--border); | |
| background:var(--bg); | |
| flex-shrink:0; | |
| height:40px; | |
| } | |
| .brand{display:flex;align-items:center;gap:.55rem} | |
| .brand-icon{color:var(--text);width:18px;height:18px} | |
| .wordmark{ | |
| font-family:var(--sans);font-weight:500;font-size:13.5px; | |
| color:var(--text);letter-spacing:-.005em; | |
| } | |
| .version{ | |
| font-family:var(--mono);font-size:11px;color:var(--text3); | |
| padding:1px 6px;border:.5px solid var(--border);border-radius:3px; | |
| margin-left:.25rem; | |
| } | |
| .app-bar .spacer{flex:1} | |
| .kbd-hints{font-family:var(--mono);font-size:11px;color:var(--text3)} | |
| .kbd-hints kbd{ | |
| font-family:var(--mono);color:var(--text2); | |
| padding:1px 4px;border:.5px solid var(--border);border-radius:3px; | |
| background:var(--surface);font-size:10.5px; | |
| } | |
| .btn-link{ | |
| font-family:var(--sans);font-size:12.5px;font-weight:500; | |
| color:var(--text2);padding:.3rem .55rem; | |
| border:.5px solid var(--border);border-radius:5px; | |
| transition:color .12s, border-color .12s, background .12s; | |
| } | |
| .btn-link:hover{color:var(--text);border-color:var(--border-strong);background:var(--surface2)} | |
| /* ── landing view ──────────────────────────────────────────────── */ | |
| #landing{display:flex;flex-direction:column;height:100vh;overflow-y:auto} | |
| .landing-content{ | |
| max-width:720px;width:100%; | |
| margin:0 auto;padding:3.5rem 1.5rem 2rem; | |
| display:flex;flex-direction:column;gap:1.5rem; | |
| } | |
| .headline{ | |
| font-family:var(--serif);font-weight:400; | |
| font-size:30px;line-height:1.15;letter-spacing:-.01em; | |
| color:var(--text); | |
| } | |
| .subtitle{ | |
| font-family:var(--sans);font-size:14px;color:var(--text2); | |
| max-width:52ch; | |
| } | |
| .dropzone{ | |
| position:relative; | |
| border:.5px dashed var(--border-strong); | |
| border-radius:8px; | |
| background:var(--surface); | |
| aspect-ratio:3/1;min-height:140px; | |
| display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem; | |
| cursor:pointer;transition:border-color .15s, background .15s; | |
| } | |
| .dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:var(--accent-dim)} | |
| .dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer} | |
| .dz-icon{color:var(--text2);margin-bottom:.1rem} | |
| .dz-text{font-size:13.5px;color:var(--text);font-weight:500} | |
| .dz-hint{font-family:var(--mono);font-size:11px;color:var(--text3)} | |
| /* example strip */ | |
| .example-wrap{ | |
| border:.5px solid var(--border);border-radius:8px; | |
| background:var(--surface);overflow:hidden; | |
| } | |
| .example-head{ | |
| display:flex;align-items:center;justify-content:space-between;gap:.75rem; | |
| padding:.5rem .8rem;border-bottom:.5px solid var(--border); | |
| font-family:var(--mono);font-size:10.5px;color:var(--text3); | |
| } | |
| .example-head .title{color:var(--text2)} | |
| .example-head .note{color:var(--text3)} | |
| .example-scroll{ | |
| display:flex;gap:8px;padding:10px;overflow-x:auto; | |
| scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent; | |
| } | |
| .example-scroll::-webkit-scrollbar{height:6px} | |
| .example-scroll::-webkit-scrollbar-track{background:transparent} | |
| .example-scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px} | |
| .ex-thumb{ | |
| flex-shrink:0;width:108px;height:108px; | |
| border:.5px solid var(--border);border-radius:5px;overflow:hidden; | |
| background:var(--surface2);cursor:pointer;position:relative; | |
| transition:border-color .12s, transform .12s; | |
| } | |
| .ex-thumb:hover{border-color:var(--accent);transform:translateY(-1px)} | |
| .ex-thumb img{width:100%;height:100%;object-fit:cover;display:block} | |
| .ex-thumb .ex-idx{ | |
| position:absolute;top:4px;left:5px; | |
| font-family:var(--mono);font-size:9.5px;color:#fff; | |
| background:rgba(0,0,0,.55);padding:1px 4px;border-radius:2px; | |
| letter-spacing:.02em; | |
| } | |
| .ex-empty{ | |
| padding:1rem;font-family:var(--mono);font-size:11px;color:var(--text3); | |
| } | |
| .landing-foot{ | |
| max-width:720px;margin:.5rem auto 2rem;padding:0 1.5rem; | |
| font-family:var(--mono);font-size:10.5px;color:var(--text3);line-height:1.7; | |
| } | |
| .landing-foot a{color:var(--text2);text-decoration:none;border-bottom:.5px dotted var(--text3)} | |
| .landing-foot a:hover{color:var(--text)} | |
| /* ── editor view ───────────────────────────────────────────────── */ | |
| #editor{display:none;flex-direction:column;height:100vh} | |
| .editor-body{flex:1;display:flex;min-height:0} | |
| .canvas-area{ | |
| flex:1;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0; | |
| background:var(--bg); | |
| } | |
| .canvas-scroll{ | |
| flex:1;overflow:auto;position:relative; | |
| background: | |
| linear-gradient(45deg,var(--surface2) 25%,transparent 25%), | |
| linear-gradient(-45deg,var(--surface2) 25%,transparent 25%), | |
| linear-gradient(45deg,transparent 75%,var(--surface2) 75%), | |
| linear-gradient(-45deg,transparent 75%,var(--surface2) 75%); | |
| background-color:var(--bg); | |
| background-size:16px 16px; | |
| background-position:0 0,0 8px,8px -8px,8px 0; | |
| } | |
| .canvas-inner{ | |
| position:relative;padding:28px 24px 24px 36px; | |
| display:flex;align-items:flex-start;justify-content:flex-start; | |
| min-width:100%;min-height:100%; | |
| } | |
| .canvas-wrap{position:relative;cursor:crosshair;flex-shrink:0} | |
| .canvas-wrap.mode-select{cursor:default} | |
| .canvas-wrap.mode-select.over-box{cursor:move} | |
| .canvas-wrap.mode-select.dragging{cursor:grabbing} | |
| .canvas-wrap canvas{display:block} | |
| /* rulers */ | |
| .ruler-top,.ruler-left{position:absolute;background:var(--surface);pointer-events:none} | |
| .ruler-top{top:4px;left:36px;height:20px} | |
| .ruler-left{left:4px;top:28px;width:24px} | |
| .ruler-corner{ | |
| position:absolute;top:4px;left:4px; | |
| width:24px;height:20px;background:var(--surface); | |
| border-right:.5px solid var(--border);border-bottom:.5px solid var(--border); | |
| } | |
| /* status bar */ | |
| .status-bar{ | |
| display:flex;align-items:center;gap:.75rem; | |
| padding:.35rem .75rem;flex-shrink:0; | |
| border-top:.5px solid var(--border); | |
| font-family:var(--mono);font-size:11px;color:var(--text3); | |
| background:var(--surface); | |
| height:26px; | |
| } | |
| .status-bar .sep{color:var(--text3);opacity:.4} | |
| .status-bar .k{color:var(--text3)} | |
| .status-bar .v{color:var(--text2)} | |
| .status-bar .spacer{flex:1} | |
| /* zoom toolbar */ | |
| .zoom-tools{ | |
| position:absolute;bottom:38px;right:14px;z-index:5; | |
| display:flex;align-items:center;gap:0; | |
| background:var(--surface);border:.5px solid var(--border);border-radius:6px; | |
| padding:2px; | |
| } | |
| .zoom-tools button, .zoom-tools .zoom-pct{ | |
| font-family:var(--mono);font-size:11px;color:var(--text2); | |
| padding:4px 8px;border-radius:4px;min-width:22px;text-align:center; | |
| } | |
| .zoom-tools button:hover{background:var(--surface2);color:var(--text)} | |
| .zoom-tools .zoom-pct{color:var(--text)} | |
| .zoom-tools .sep{width:.5px;background:var(--border);align-self:stretch;margin:2px 0} | |
| /* ── right panel ───────────────────────────────────────────────── */ | |
| .panel{ | |
| width:272px;flex-shrink:0; | |
| background:var(--surface);border-left:.5px solid var(--border); | |
| overflow-y:auto;display:flex;flex-direction:column; | |
| } | |
| .p-section{padding:.85rem 1rem;border-bottom:.5px solid var(--border)} | |
| .p-section:last-child{border-bottom:none} | |
| .p-label{ | |
| font-family:var(--sans);font-size:10.5px;font-weight:500; | |
| color:var(--text3);text-transform:uppercase;letter-spacing:.08em; | |
| margin-bottom:.55rem; | |
| } | |
| /* tool row */ | |
| .tools{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:.7rem} | |
| .tool{ | |
| display:flex;align-items:center;gap:.55rem; | |
| padding:10px 11px; | |
| border:.5px solid var(--border);border-radius:6px; | |
| color:var(--text2); | |
| transition:color .12s, background .12s, border-color .12s; | |
| } | |
| .tool:hover{color:var(--text);border-color:var(--border-strong)} | |
| .tool.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)} | |
| .tool svg{width:18px;height:18px} | |
| .tool .name{ | |
| flex:1;text-align:left; | |
| font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:-.005em; | |
| } | |
| .tool .sc{ | |
| font-family:var(--mono);font-size:10.5px;color:var(--text3); | |
| padding:1px 5px;border:.5px solid var(--border);border-radius:3px; | |
| background:var(--bg); | |
| } | |
| .tool.active .sc{color:var(--accent);border-color:var(--accent);background:transparent} | |
| /* contextual tool options */ | |
| .tool-opts{ | |
| font-size:12px;color:var(--text2);line-height:1.5; | |
| padding:.5rem .65rem;background:var(--surface2);border-radius:5px; | |
| border:.5px solid var(--border); | |
| } | |
| .tool-opts .hint{display:flex;align-items:flex-start;gap:.4rem;font-family:var(--sans)} | |
| .tool-opts .hint svg{color:var(--text3);margin-top:1px} | |
| .tool-opts .kb{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.45rem} | |
| .tool-opts kbd{ | |
| font-family:var(--mono);font-size:10px;color:var(--text2); | |
| padding:1px 4px;border:.5px solid var(--border);border-radius:3px; | |
| background:var(--bg); | |
| } | |
| .tool-opts .sep{color:var(--text3);margin:0 .25rem} | |
| /* detected summary */ | |
| .summary{ | |
| font-family:var(--mono);font-size:11.5px;color:var(--text2); | |
| margin-bottom:.5rem; | |
| } | |
| .summary .num{color:var(--text)} | |
| .dist-bar{ | |
| height:4px;background:var(--surface2);border-radius:2px;overflow:hidden; | |
| display:flex; | |
| } | |
| .dist-seg{height:100%;transition:width .4s ease} | |
| /* category pills */ | |
| .pills{display:flex;flex-direction:column;gap:2px} | |
| .pill{ | |
| display:flex;align-items:center;gap:.55rem; | |
| padding:.4rem .5rem; | |
| border:.5px solid transparent;border-radius:5px; | |
| cursor:pointer;user-select:none; | |
| transition:background .1s, border-color .1s; | |
| } | |
| .pill:hover{background:var(--surface2)} | |
| .pill.active{background:var(--surface2);border-color:var(--border)} | |
| .pill.inactive{opacity:.42} | |
| .pill .swatch{ | |
| width:3px;height:14px;border-radius:1.5px;flex-shrink:0; | |
| } | |
| .pill .name{flex:1;font-size:12.5px;color:var(--text);font-weight:400} | |
| .pill.inactive .name{color:var(--text2)} | |
| .pill .count{font-family:var(--mono);font-size:11px;color:var(--text3)} | |
| .pills-empty{ | |
| font-size:12px;color:var(--text3);font-style:italic;padding:.25rem 0; | |
| } | |
| /* export row */ | |
| .export-row{display:flex;flex-direction:column;gap:4px} | |
| .export-btn{ | |
| display:flex;align-items:center;justify-content:space-between; | |
| padding:.5rem .65rem; | |
| border:.5px solid var(--border);border-radius:5px; | |
| color:var(--text);font-size:12.5px;font-weight:500; | |
| transition:background .1s, border-color .1s; | |
| } | |
| .export-btn:hover{background:var(--surface2);border-color:var(--border-strong)} | |
| .export-btn.primary{border-color:var(--border-strong)} | |
| .export-btn.primary:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)} | |
| .export-btn .sc{font-family:var(--mono);font-size:10.5px;color:var(--text3)} | |
| .export-btn.primary:hover .sc{color:var(--accent)} | |
| .export-text-link{ | |
| font-size:11.5px;color:var(--text3);font-family:var(--sans); | |
| padding:.3rem .1rem 0;text-align:left; | |
| transition:color .1s; | |
| } | |
| .export-text-link:hover{color:var(--text2)} | |
| /* ── loading + toast ───────────────────────────────────────────── */ | |
| #loading{ | |
| position:fixed;inset:0;background:rgba(13,13,15,.85);backdrop-filter:blur(6px); | |
| display:none;flex-direction:column;align-items:center;justify-content:center;z-index:9999; | |
| gap:.9rem; | |
| } | |
| @media(prefers-color-scheme:light){ #loading{background:rgba(250,250,248,.85)} } | |
| .spinner{ | |
| width:18px;height:18px;border:1.5px solid var(--border);border-top-color:var(--accent); | |
| border-radius:50%;animation:spin .75s linear infinite; | |
| } | |
| @keyframes spin{to{transform:rotate(360deg)}} | |
| #loading p{font-family:var(--mono);font-size:11px;color:var(--text2);letter-spacing:.02em} | |
| .error-banner{ | |
| margin:.75rem 1rem 0;padding:.55rem .8rem; | |
| border:.5px solid rgba(248,113,113,.3);background:rgba(248,113,113,.08); | |
| color:var(--danger);font-size:12px;border-radius:5px;display:none;font-family:var(--mono); | |
| } | |
| .toast{ | |
| position:fixed;bottom:1rem;left:50%;transform:translateX(-50%) translateY(60px); | |
| background:var(--surface);border:.5px solid var(--border-strong);color:var(--text); | |
| padding:.45rem .8rem;border-radius:5px;font-size:12px;font-family:var(--mono); | |
| transition:transform .2s ease;z-index:9998; | |
| } | |
| .toast.show{transform:translateX(-50%) translateY(0)} | |
| @media (max-width: 820px){ | |
| .editor-body{flex-direction:column} | |
| .panel{width:100%;max-height:44vh;border-left:none;border-top:.5px solid var(--border)} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ═══════════════════════ LANDING ═══════════════════════ --> | |
| <div id="landing"> | |
| <header class="app-bar"> | |
| <div class="brand"> | |
| <svg class="brand-icon" viewBox="0 0 20 20" aria-hidden="true"> | |
| <rect x="2" y="4" width="12" height="3" rx="0.5" fill="currentColor"/> | |
| <rect x="2" y="9" width="16" height="3" rx="0.5" fill="currentColor"/> | |
| <rect x="2" y="14" width="8" height="3" rx="0.5" fill="currentColor"/> | |
| </svg> | |
| <span class="wordmark">Screenshot Anonymizer</span> | |
| <span class="version">v0.3 · beta</span> | |
| </div> | |
| <div class="spacer"></div> | |
| <div class="kbd-hints"><kbd>⌘V</kbd> paste <span style="margin:0 .35rem;opacity:.4">·</span> <kbd>⌘O</kbd> open</div> | |
| </header> | |
| <div class="landing-content"> | |
| <h1 class="headline">Redact screenshots before you post them.</h1> | |
| <p class="subtitle">OCR finds the text. The privacy filter marks names, emails, phones, addresses, dates, URLs, accounts, and secrets. You approve what gets hidden before it ever leaves the page.</p> | |
| <label class="dropzone" id="dropzone"> | |
| <input type="file" id="file-input" accept="image/png,image/jpeg,image/webp,image/bmp,image/tiff"> | |
| <svg class="dz-icon" width="42" height="30" viewBox="0 0 42 30" aria-hidden="true"> | |
| <rect x="2" y="3" width="26" height="5" rx="1" fill="currentColor"/> | |
| <rect x="2" y="12" width="38" height="5" rx="1" fill="currentColor"/> | |
| <rect x="2" y="21" width="18" height="5" rx="1" fill="currentColor"/> | |
| </svg> | |
| <div class="dz-text">Drop a screenshot, paste from clipboard, or click to browse</div> | |
| <div class="dz-hint">png · jpg · webp · bmp · tiff</div> | |
| </label> | |
| <div class="example-wrap"> | |
| <div class="example-head"> | |
| <span class="title">try an example · click to load</span> | |
| <span class="note">all content is fictitious · mock data for testing only</span> | |
| </div> | |
| <div class="example-scroll" id="example-scroll"> | |
| <div class="ex-empty">loading examples…</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="landing-foot"> | |
| pii: openai/privacy-filter · 1.5b params, 50m active · apache 2.0<br> | |
| ocr: rednote-hilab/dots.ocr · 3b vlm, top-3 on olmocr-bench · edits stay in your browser | |
| </div> | |
| </div> | |
| <!-- ═══════════════════════ EDITOR ═══════════════════════ --> | |
| <div id="editor"> | |
| <header class="app-bar"> | |
| <div class="brand"> | |
| <svg class="brand-icon" viewBox="0 0 20 20" aria-hidden="true"> | |
| <rect x="2" y="4" width="12" height="3" rx="0.5" fill="currentColor"/> | |
| <rect x="2" y="9" width="16" height="3" rx="0.5" fill="currentColor"/> | |
| <rect x="2" y="14" width="8" height="3" rx="0.5" fill="currentColor"/> | |
| </svg> | |
| <span class="wordmark">Screenshot Anonymizer</span> | |
| </div> | |
| <span class="version" id="meta-info">—</span> | |
| <div class="spacer"></div> | |
| <button class="btn-link" onclick="resetView()">new screenshot</button> | |
| </header> | |
| <div class="error-banner" id="error-banner"></div> | |
| <div class="editor-body"> | |
| <div class="canvas-area"> | |
| <div class="canvas-scroll" id="canvas-scroll"> | |
| <div class="canvas-inner" id="canvas-inner"> | |
| <div class="ruler-corner"></div> | |
| <canvas class="ruler-top" id="ruler-top"></canvas> | |
| <canvas class="ruler-left" id="ruler-left"></canvas> | |
| <div class="canvas-wrap mode-select" id="canvas-wrap"> | |
| <canvas id="canvas"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="zoom-tools"> | |
| <button title="Zoom out (−)" onclick="zoomStep(-1)">−</button> | |
| <div class="sep"></div> | |
| <span class="zoom-pct" id="zoom-pct">100%</span> | |
| <div class="sep"></div> | |
| <button title="Zoom in (+)" onclick="zoomStep(1)">+</button> | |
| <div class="sep"></div> | |
| <button title="Fit (F)" onclick="zoomFit()">fit</button> | |
| <button title="100% (0)" onclick="zoomReset()">1:1</button> | |
| </div> | |
| <div class="status-bar"> | |
| <span class="k">zoom</span> <span class="v" id="status-zoom">100%</span> | |
| <span class="sep">·</span> | |
| <span class="k">cursor</span> <span class="v" id="status-cursor">—</span> | |
| <span class="sep">·</span> | |
| <span class="k">selection</span> <span class="v" id="status-sel">—</span> | |
| <span class="spacer"></span> | |
| <span class="k" id="status-mode">select</span> | |
| </div> | |
| </div> | |
| <aside class="panel"> | |
| <section class="p-section"> | |
| <div class="p-label">Tool</div> | |
| <div class="tools"> | |
| <button class="tool active" data-mode="select" title="Select (V)"> | |
| <svg viewBox="0 0 18 18"><path fill="currentColor" d="M3 2l11 6-5 1.6L7.5 15z"/></svg> | |
| <span class="name">Select</span> | |
| <span class="sc">V</span> | |
| </button> | |
| <button class="tool" data-mode="draw" title="Draw bar (B)"> | |
| <svg viewBox="0 0 18 18"><rect x="2" y="8" width="14" height="2.5" rx=".5" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="1" stroke-dasharray="1.5 1.5" d="M2 5h14M2 13h14"/></svg> | |
| <span class="name">Draw</span> | |
| <span class="sc">B</span> | |
| </button> | |
| </div> | |
| <div class="tool-opts" id="tool-opts"></div> | |
| </section> | |
| <section class="p-section"> | |
| <div class="p-label">Detected</div> | |
| <div class="summary" id="summary"><span class="num">0</span> bars across <span class="num">0</span> categories</div> | |
| <div class="dist-bar" id="dist-bar"></div> | |
| </section> | |
| <section class="p-section"> | |
| <div class="p-label">Categories</div> | |
| <div class="pills" id="pills"> | |
| <div class="pills-empty">no pii detected</div> | |
| </div> | |
| </section> | |
| <section class="p-section"> | |
| <div class="p-label">Export</div> | |
| <div class="export-row"> | |
| <button class="export-btn primary" onclick="downloadImage()"> | |
| <span>Download PNG</span> | |
| <span class="sc"><kbd>⌘S</kbd></span> | |
| </button> | |
| <button class="export-btn" onclick="copyToClipboard()"> | |
| <span>Copy to clipboard</span> | |
| <span class="sc"><kbd>⌘⇧C</kbd></span> | |
| </button> | |
| <button class="export-text-link" onclick="exportText()">Export sanitized text only →</button> | |
| </div> | |
| </section> | |
| </aside> | |
| </div> | |
| </div> | |
| <div id="loading"><div class="spinner"></div><p>ocr → privacy filter → map to pixels</p></div> | |
| <div class="toast" id="toast"></div> | |
| <script type="module"> | |
| // ══════════════════════════════════════════════════════════════════ | |
| // Gradio JS client — talks to the queued @server.api routes so that | |
| // requests are serialized, progress is tracked, and ZeroGPU's | |
| // @spaces.GPU allocator gets invoked correctly. A plain fetch() to a | |
| // FastAPI route would bypass all of that. | |
| // ══════════════════════════════════════════════════════════════════ | |
| import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"; | |
| const clientPromise = Client.connect(window.location.origin); | |
| // ══════════════════════════════════════════════════════════════════ | |
| // State | |
| // ══════════════════════════════════════════════════════════════════ | |
| const S = { | |
| img: null, width: 0, height: 0, | |
| boxes: [], // {id, x, y, w, h, label, text, enabled, custom} | |
| nextId: 1, | |
| activeCats: new Set(), | |
| catMeta: {}, | |
| catCounts: {}, | |
| sourceText: '', | |
| spans: [], | |
| mode: 'select', // 'select' | 'draw' | |
| selected: null, | |
| drag: null, // {type:'draw'|'move', startX, startY, origBox?, newBox?, boxId?} | |
| scale: 1, | |
| filename: '', | |
| }; | |
| const LABELS = {private_person:'Person',private_address:'Address',private_email:'Email',private_phone:'Phone',private_url:'URL',private_date:'Date',account_number:'Account',secret:'Secret',custom:'Custom'}; | |
| const CUSTOM_COLOR = '#9ca3af'; | |
| // ══════════════════════════════════════════════════════════════════ | |
| // Upload | |
| // ══════════════════════════════════════════════════════════════════ | |
| const dz = document.getElementById('dropzone'); | |
| const fi = document.getElementById('file-input'); | |
| ['dragenter','dragover'].forEach(e => dz.addEventListener(e, ev => { ev.preventDefault(); dz.classList.add('dragover'); })); | |
| ['dragleave','drop'].forEach(e => dz.addEventListener(e, ev => { ev.preventDefault(); dz.classList.remove('dragover'); })); | |
| dz.addEventListener('drop', ev => { const f = ev.dataTransfer.files[0]; if (f) uploadFile(f); }); | |
| fi.addEventListener('change', ev => { const f = ev.target.files[0]; if (f) uploadFile(f); }); | |
| document.addEventListener('paste', ev => { | |
| if (document.getElementById('landing').style.display === 'none') return; | |
| const items = ev.clipboardData && ev.clipboardData.items; | |
| if (!items) return; | |
| for (const it of items) { | |
| if (it.type && it.type.startsWith('image/')) { | |
| const f = it.getAsFile(); | |
| if (f) { uploadFile(f); ev.preventDefault(); return; } | |
| } | |
| } | |
| }); | |
| async function loadExamples() { | |
| const scroll = document.getElementById('example-scroll'); | |
| try { | |
| const r = await fetch('/api/examples'); | |
| const d = await r.json(); | |
| const list = d.examples || []; | |
| if (!list.length) { | |
| scroll.innerHTML = '<div class="ex-empty">no examples available</div>'; | |
| return; | |
| } | |
| scroll.innerHTML = ''; | |
| list.forEach((name, i) => { | |
| const el = document.createElement('div'); | |
| el.className = 'ex-thumb'; | |
| el.title = 'load ' + name; | |
| el.innerHTML = `<span class="ex-idx">${String(i + 1).padStart(2, '0')}</span> | |
| <img loading="lazy" src="/examples/${encodeURIComponent(name)}?thumb=1" alt="">`; | |
| el.addEventListener('click', () => loadExample(name)); | |
| scroll.appendChild(el); | |
| }); | |
| } catch (e) { | |
| scroll.innerHTML = '<div class="ex-empty">could not load examples</div>'; | |
| } | |
| } | |
| async function loadExample(name) { | |
| try { | |
| const r = await fetch('/examples/' + encodeURIComponent(name)); | |
| if (!r.ok) throw new Error('fetch failed'); | |
| const blob = await r.blob(); | |
| const type = blob.type || 'image/png'; | |
| const file = new File([blob], name, { type }); | |
| uploadFile(file); | |
| } catch (e) { | |
| showError('could not load example: ' + e.message); | |
| } | |
| } | |
| loadExamples(); | |
| async function uploadFile(file) { | |
| if (!file.type || !file.type.startsWith('image/')) { showError('please drop an image file.'); return; } | |
| document.getElementById('loading').style.display = 'flex'; | |
| document.getElementById('landing').style.display = 'none'; | |
| try { | |
| const client = await clientPromise; | |
| const result = await client.predict("/anonymize_screenshot", { | |
| image: handle_file(file), | |
| }); | |
| // @server.api returns a dict; the client wraps outputs in result.data[] | |
| const d = result.data[0] || {}; | |
| if (d.error) { showError(d.error); return; } | |
| // The server returns Path(path).name as `filename`; fall back to the | |
| // original File.name for display continuity. | |
| if (!d.filename) d.filename = file.name; | |
| await initEditor(d); | |
| } catch (e) { | |
| showError('analysis failed: ' + (e && e.message ? e.message : e)); | |
| } finally { | |
| document.getElementById('loading').style.display = 'none'; | |
| } | |
| } | |
| function showError(msg) { | |
| document.getElementById('loading').style.display = 'none'; | |
| document.getElementById('editor').style.display = 'flex'; | |
| const b = document.getElementById('error-banner'); | |
| b.textContent = msg; b.style.display = 'block'; | |
| } | |
| function resetView() { | |
| document.getElementById('editor').style.display = 'none'; | |
| document.getElementById('landing').style.display = 'flex'; | |
| document.getElementById('error-banner').style.display = 'none'; | |
| fi.value = ''; | |
| S.boxes = []; S.selected = null; S.img = null; S.drag = null; | |
| } | |
| // ══════════════════════════════════════════════════════════════════ | |
| // Editor init | |
| // ══════════════════════════════════════════════════════════════════ | |
| async function initEditor(d) { | |
| document.getElementById('editor').style.display = 'flex'; | |
| document.getElementById('error-banner').style.display = 'none'; | |
| S.filename = d.filename || 'screenshot.png'; | |
| S.width = d.width; S.height = d.height; | |
| S.catMeta = d.categories_meta || {}; | |
| S.sourceText = d.text || ''; | |
| S.spans = d.spans || []; | |
| S.catCounts = {}; | |
| S.boxes = (d.boxes || []).map(b => { | |
| S.catCounts[b.label] = (S.catCounts[b.label] || 0) + 1; | |
| return { id: S.nextId++, x: b.x, y: b.y, w: b.w, h: b.h, | |
| label: b.label, text: b.text, enabled: true, custom: false }; | |
| }); | |
| S.activeCats = new Set(Object.keys(S.catCounts)); | |
| const img = new Image(); | |
| await new Promise((res, rej) => { img.onload = res; img.onerror = rej; img.src = d.image; }); | |
| S.img = img; | |
| setMode('select', true); | |
| zoomFit(); | |
| renderPills(); | |
| renderToolOpts(); | |
| renderSummary(); | |
| updateMeta(); | |
| draw(); | |
| } | |
| // ══════════════════════════════════════════════════════════════════ | |
| // Zoom + layout | |
| // ══════════════════════════════════════════════════════════════════ | |
| function applyScale() { | |
| const cv = document.getElementById('canvas'); | |
| cv.width = S.width; cv.height = S.height; | |
| cv.style.width = (S.width * S.scale) + 'px'; | |
| cv.style.height = (S.height * S.scale) + 'px'; | |
| drawRulers(); | |
| document.getElementById('zoom-pct').textContent = Math.round(S.scale * 100) + '%'; | |
| document.getElementById('status-zoom').textContent = Math.round(S.scale * 100) + '%'; | |
| } | |
| function zoomFit() { | |
| const sc = document.getElementById('canvas-scroll'); | |
| const pad = 72; | |
| const maxW = sc.clientWidth - pad, maxH = sc.clientHeight - pad; | |
| const s = Math.min(1, maxW / S.width, maxH / S.height); | |
| S.scale = Math.max(0.1, s); | |
| applyScale(); draw(); | |
| } | |
| function zoomReset() { S.scale = 1; applyScale(); draw(); } | |
| function zoomStep(dir) { | |
| const steps = [0.1,0.25,0.33,0.5,0.67,0.75,1,1.25,1.5,2,3,4]; | |
| let i = steps.findIndex(s => s >= S.scale - 0.001); | |
| if (i < 0) i = 0; | |
| i = Math.max(0, Math.min(steps.length - 1, i + dir)); | |
| S.scale = steps[i]; applyScale(); draw(); | |
| } | |
| window.addEventListener('resize', () => { if (S.img) { applyScale(); draw(); } }); | |
| // ══════════════════════════════════════════════════════════════════ | |
| // Rulers | |
| // ══════════════════════════════════════════════════════════════════ | |
| function cssVar(name) { | |
| return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); | |
| } | |
| function drawRulers() { | |
| const tc = document.getElementById('ruler-top'); | |
| const lc = document.getElementById('ruler-left'); | |
| const w = Math.ceil(S.width * S.scale); | |
| const h = Math.ceil(S.height * S.scale); | |
| const dpr = window.devicePixelRatio || 1; | |
| const color = cssVar('--text3') || '#65656c'; | |
| const colorStrong = cssVar('--text2') || '#9a9a9f'; | |
| const border = cssVar('--border') || 'rgba(255,255,255,.06)'; | |
| // Top | |
| tc.style.width = w + 'px'; tc.style.height = '20px'; | |
| tc.width = w * dpr; tc.height = 20 * dpr; | |
| const tx = tc.getContext('2d'); tx.scale(dpr, dpr); | |
| tx.clearRect(0, 0, w, 20); | |
| tx.fillStyle = 'transparent'; | |
| tx.strokeStyle = border; tx.lineWidth = 1; | |
| tx.beginPath(); tx.moveTo(0, 19.5); tx.lineTo(w, 19.5); tx.stroke(); | |
| tx.fillStyle = color; | |
| tx.font = '10px ' + (cssVar('--mono') || 'ui-monospace,monospace'); | |
| tx.textBaseline = 'middle'; | |
| const step = pickRulerStep(S.scale); | |
| for (let x = 0; x <= S.width; x += step.minor) { | |
| const sx = Math.round(x * S.scale) + 0.5; | |
| const th = x % step.major === 0 ? 8 : x % (step.minor * 5) === 0 ? 5 : 3; | |
| tx.fillStyle = x % step.major === 0 ? colorStrong : color; | |
| tx.fillRect(sx, 20 - th, 1, th); | |
| if (x % step.major === 0 && x > 0 && sx + 30 < w) { | |
| tx.fillStyle = colorStrong; | |
| tx.fillText(String(x), sx + 2, 7); | |
| } | |
| } | |
| // Left | |
| lc.style.width = '24px'; lc.style.height = h + 'px'; | |
| lc.width = 24 * dpr; lc.height = h * dpr; | |
| const ly = lc.getContext('2d'); ly.scale(dpr, dpr); | |
| ly.clearRect(0, 0, 24, h); | |
| ly.strokeStyle = border; ly.lineWidth = 1; | |
| ly.beginPath(); ly.moveTo(23.5, 0); ly.lineTo(23.5, h); ly.stroke(); | |
| ly.font = '10px ' + (cssVar('--mono') || 'ui-monospace,monospace'); | |
| ly.textBaseline = 'middle'; | |
| for (let y = 0; y <= S.height; y += step.minor) { | |
| const sy = Math.round(y * S.scale) + 0.5; | |
| const tw = y % step.major === 0 ? 8 : y % (step.minor * 5) === 0 ? 5 : 3; | |
| ly.fillStyle = y % step.major === 0 ? colorStrong : color; | |
| ly.fillRect(24 - tw, sy, tw, 1); | |
| if (y % step.major === 0 && y > 0 && sy + 20 < h) { | |
| ly.save(); | |
| ly.fillStyle = colorStrong; | |
| ly.translate(10, sy + 2); | |
| ly.rotate(-Math.PI / 2); | |
| ly.fillText(String(y), 0, 0); | |
| ly.restore(); | |
| } | |
| } | |
| } | |
| function pickRulerStep(scale) { | |
| // pick minor tick spacing so adjacent ticks are roughly 8-15 screen px apart | |
| const candidates = [5, 10, 20, 50, 100, 200, 500]; | |
| let minor = 10; | |
| for (const c of candidates) { | |
| if (c * scale >= 8) { minor = c; break; } | |
| } | |
| const major = minor * 10; | |
| return { minor, major }; | |
| } | |
| // ══════════════════════════════════════════════════════════════════ | |
| // Draw | |
| // ══════════════════════════════════════════════════════════════════ | |
| function isVisible(b) { | |
| if (!b.enabled) return false; | |
| if (!b.custom && !S.activeCats.has(b.label)) return false; | |
| return true; | |
| } | |
| function draw() { | |
| if (!S.img) return; | |
| const cv = document.getElementById('canvas'); | |
| const ctx = cv.getContext('2d'); | |
| ctx.clearRect(0, 0, cv.width, cv.height); | |
| ctx.drawImage(S.img, 0, 0); | |
| for (const b of S.boxes) { | |
| if (!isVisible(b)) continue; | |
| ctx.fillStyle = '#000'; | |
| ctx.fillRect(b.x, b.y, b.w, b.h); | |
| } | |
| const sel = selectedBox(); | |
| if (sel) { | |
| ctx.save(); | |
| ctx.strokeStyle = cssVar('--accent') || '#818cf8'; | |
| ctx.lineWidth = Math.max(1, 1.5 / S.scale); | |
| ctx.setLineDash([5 / S.scale, 3 / S.scale]); | |
| ctx.strokeRect(sel.x - 1, sel.y - 1, sel.w + 2, sel.h + 2); | |
| ctx.restore(); | |
| } | |
| if (S.drag && S.drag.type === 'draw' && S.drag.newBox) { | |
| const b = S.drag.newBox; | |
| ctx.save(); | |
| ctx.fillStyle = 'rgba(0,0,0,.7)'; | |
| ctx.fillRect(b.x, b.y, b.w, b.h); | |
| ctx.strokeStyle = cssVar('--accent') || '#818cf8'; | |
| ctx.lineWidth = Math.max(1, 1 / S.scale); | |
| ctx.strokeRect(b.x, b.y, b.w, b.h); | |
| ctx.restore(); | |
| } | |
| } | |
| function selectedBox() { | |
| return S.selected == null ? null : (S.boxes.find(b => b.id === S.selected) || null); | |
| } | |
| // ══════════════════════════════════════════════════════════════════ | |
| // Interaction | |
| // ══════════════════════════════════════════════════════════════════ | |
| const wrap = document.getElementById('canvas-wrap'); | |
| function canvasXY(ev) { | |
| const rect = wrap.getBoundingClientRect(); | |
| return { | |
| x: (ev.clientX - rect.left) / S.scale, | |
| y: (ev.clientY - rect.top) / S.scale, | |
| }; | |
| } | |
| function hitTest(x, y) { | |
| for (let i = S.boxes.length - 1; i >= 0; i--) { | |
| const b = S.boxes[i]; | |
| if (!isVisible(b)) continue; | |
| if (x >= b.x && x <= b.x + b.w && y >= b.y && y <= b.y + b.h) return b; | |
| } | |
| return null; | |
| } | |
| wrap.addEventListener('mousedown', ev => { | |
| if (ev.button !== 0) return; | |
| ev.preventDefault(); | |
| const { x, y } = canvasXY(ev); | |
| const hit = hitTest(x, y); | |
| if (S.mode === 'draw' && !hit) { | |
| S.selected = null; | |
| S.drag = { type: 'draw', startX: x, startY: y, newBox: { x, y, w: 0, h: 0 } }; | |
| } else if (hit) { | |
| S.selected = hit.id; | |
| S.drag = { type: 'move', startX: x, startY: y, | |
| origBox: { x: hit.x, y: hit.y, w: hit.w, h: hit.h }, boxId: hit.id }; | |
| wrap.classList.add('dragging'); | |
| } else { | |
| S.selected = null; S.drag = null; | |
| } | |
| updateStatus(x, y); | |
| draw(); | |
| }); | |
| window.addEventListener('mousemove', ev => { | |
| if (S.img && document.getElementById('editor').style.display === 'flex') { | |
| const rect = wrap.getBoundingClientRect(); | |
| if (ev.clientX >= rect.left && ev.clientX <= rect.right && | |
| ev.clientY >= rect.top && ev.clientY <= rect.bottom) { | |
| const x = Math.round((ev.clientX - rect.left) / S.scale); | |
| const y = Math.round((ev.clientY - rect.top) / S.scale); | |
| updateStatus(x, y); | |
| if (!S.drag) { | |
| const hit = hitTest(x, y); | |
| wrap.classList.toggle('over-box', !!hit); | |
| } | |
| } | |
| } | |
| if (!S.drag) return; | |
| const { x, y } = canvasXY(ev); | |
| if (S.drag.type === 'draw') { | |
| const sx = S.drag.startX, sy = S.drag.startY; | |
| S.drag.newBox = { | |
| x: Math.max(0, Math.min(S.width, Math.min(sx, x))), | |
| y: Math.max(0, Math.min(S.height, Math.min(sy, y))), | |
| w: Math.min(Math.abs(x - sx), S.width), | |
| h: Math.min(Math.abs(y - sy), S.height), | |
| }; | |
| } else if (S.drag.type === 'move') { | |
| const dx = x - S.drag.startX, dy = y - S.drag.startY; | |
| const b = S.boxes.find(b => b.id === S.drag.boxId); | |
| if (b) { | |
| const o = S.drag.origBox; | |
| b.x = Math.max(0, Math.min(S.width - o.w, Math.round(o.x + dx))); | |
| b.y = Math.max(0, Math.min(S.height - o.h, Math.round(o.y + dy))); | |
| } | |
| } | |
| draw(); | |
| }); | |
| window.addEventListener('mouseup', () => { | |
| if (!S.drag) return; | |
| wrap.classList.remove('dragging'); | |
| if (S.drag.type === 'draw') { | |
| const b = S.drag.newBox; | |
| if (b.w > 3 && b.h > 3) { | |
| const nb = { id: S.nextId++, x: Math.round(b.x), y: Math.round(b.y), | |
| w: Math.round(b.w), h: Math.round(b.h), | |
| label: 'custom', text: '', enabled: true, custom: true }; | |
| S.boxes.push(nb); | |
| S.selected = nb.id; | |
| renderSummary(); | |
| } | |
| } | |
| S.drag = null; | |
| draw(); | |
| }); | |
| // Keyboard | |
| window.addEventListener('keydown', ev => { | |
| if (document.getElementById('editor').style.display !== 'flex') return; | |
| const tgt = ev.target; | |
| if (tgt && (tgt.tagName === 'INPUT' || tgt.tagName === 'TEXTAREA')) return; | |
| const cmd = ev.metaKey || ev.ctrlKey; | |
| if (cmd && ev.key.toLowerCase() === 's') { ev.preventDefault(); downloadImage(); return; } | |
| if (cmd && ev.shiftKey && ev.key.toLowerCase() === 'c') { ev.preventDefault(); copyToClipboard(); return; } | |
| if (ev.key === 'Delete' || ev.key === 'Backspace') { | |
| if (S.selected != null) { | |
| S.boxes = S.boxes.filter(b => b.id !== S.selected); | |
| S.selected = null; | |
| renderSummary(); draw(); | |
| ev.preventDefault(); | |
| } | |
| } else if (ev.key === 'Escape') { | |
| S.selected = null; S.drag = null; draw(); | |
| } else if (ev.key === 'v' || ev.key === 'V') setMode('select'); | |
| else if (ev.key === 'b' || ev.key === 'B') setMode('draw'); | |
| else if (ev.key === 'f' || ev.key === 'F') zoomFit(); | |
| else if (ev.key === '0') zoomReset(); | |
| else if (ev.key === '+' || ev.key === '=') zoomStep(1); | |
| else if (ev.key === '-' || ev.key === '_') zoomStep(-1); | |
| }); | |
| function updateStatus(x, y) { | |
| document.getElementById('status-cursor').textContent = `${x}, ${y}`; | |
| const sel = selectedBox(); | |
| document.getElementById('status-sel').textContent = sel ? `${sel.w}×${sel.h}` : '—'; | |
| } | |
| // ══════════════════════════════════════════════════════════════════ | |
| // Tool mode | |
| // ══════════════════════════════════════════════════════════════════ | |
| document.querySelectorAll('.tool').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| if (btn.disabled) return; | |
| setMode(btn.dataset.mode); | |
| }); | |
| }); | |
| function setMode(m, silent) { | |
| S.mode = m; | |
| document.querySelectorAll('.tool').forEach(b => b.classList.toggle('active', b.dataset.mode === m)); | |
| wrap.classList.toggle('mode-select', m === 'select'); | |
| wrap.classList.toggle('mode-draw', m === 'draw'); | |
| document.getElementById('status-mode').textContent = m; | |
| renderToolOpts(); | |
| if (!silent) updateStatus(0, 0); | |
| } | |
| function renderToolOpts() { | |
| const el = document.getElementById('tool-opts'); | |
| if (S.mode === 'select') { | |
| el.innerHTML = ` | |
| <div class="hint">Click a bar to select. Drag to move. Press <kbd style="font-family:var(--mono);padding:1px 4px;border:.5px solid var(--border);border-radius:3px;background:var(--bg)">Del</kbd> to remove.</div> | |
| <div class="kb"><kbd>V</kbd> select <span class="sep">·</span> <kbd>B</kbd> draw <span class="sep">·</span> <kbd>Esc</kbd> clear</div>`; | |
| } else if (S.mode === 'draw') { | |
| el.innerHTML = ` | |
| <div class="hint">Drag on empty canvas to add a black bar. Release to confirm.</div> | |
| <div class="kb"><kbd>B</kbd> draw <span class="sep">·</span> <kbd>V</kbd> select <span class="sep">·</span> <kbd>F</kbd> fit <span class="sep">·</span> <kbd>0</kbd> 1:1</div>`; | |
| } else { | |
| el.innerHTML = `<div class="hint">coming soon.</div>`; | |
| } | |
| } | |
| // ══════════════════════════════════════════════════════════════════ | |
| // Side panel rendering | |
| // ══════════════════════════════════════════════════════════════════ | |
| function updateMeta() { | |
| const parts = [S.filename, `${S.width}×${S.height}`]; | |
| document.getElementById('meta-info').textContent = parts.join(' · '); | |
| } | |
| function renderSummary() { | |
| const visible = S.boxes.filter(isVisible); | |
| const catsActive = new Set(); | |
| for (const b of visible) catsActive.add(b.custom ? 'custom' : b.label); | |
| document.getElementById('summary').innerHTML = | |
| `<span class="num">${visible.length}</span> bar${visible.length === 1 ? '' : 's'} across <span class="num">${catsActive.size}</span> categor${catsActive.size === 1 ? 'y' : 'ies'}`; | |
| const dist = document.getElementById('dist-bar'); | |
| dist.innerHTML = ''; | |
| if (!visible.length) return; | |
| const counts = {}; | |
| for (const b of visible) { | |
| const k = b.custom ? 'custom' : b.label; | |
| counts[k] = (counts[k] || 0) + 1; | |
| } | |
| const total = visible.length; | |
| for (const [k, n] of Object.entries(counts)) { | |
| const seg = document.createElement('div'); | |
| seg.className = 'dist-seg'; | |
| seg.style.width = (n / total * 100) + '%'; | |
| seg.style.background = (k === 'custom' ? CUSTOM_COLOR : (S.catMeta[k] && S.catMeta[k].color)) || '#888'; | |
| dist.appendChild(seg); | |
| } | |
| } | |
| function renderPills() { | |
| const container = document.getElementById('pills'); | |
| const cats = Object.keys(S.catCounts); | |
| if (!cats.length) { | |
| container.innerHTML = '<div class="pills-empty">no pii detected</div>'; | |
| return; | |
| } | |
| container.innerHTML = ''; | |
| for (const cat of cats) { | |
| const meta = S.catMeta[cat] || { color: '#888', label: cat }; | |
| const active = S.activeCats.has(cat); | |
| const pill = document.createElement('div'); | |
| pill.className = 'pill ' + (active ? 'active' : 'inactive'); | |
| pill.innerHTML = ` | |
| <span class="swatch" style="background:${meta.color}"></span> | |
| <span class="name">${meta.label}</span> | |
| <span class="count">${S.catCounts[cat]}</span>`; | |
| pill.addEventListener('click', () => { | |
| if (S.activeCats.has(cat)) S.activeCats.delete(cat); | |
| else S.activeCats.add(cat); | |
| renderPills(); renderSummary(); draw(); | |
| }); | |
| container.appendChild(pill); | |
| } | |
| } | |
| // ══════════════════════════════════════════════════════════════════ | |
| // Export | |
| // ══════════════════════════════════════════════════════════════════ | |
| function renderExportCanvas() { | |
| const ec = document.createElement('canvas'); | |
| ec.width = S.width; ec.height = S.height; | |
| const ctx = ec.getContext('2d'); | |
| ctx.drawImage(S.img, 0, 0); | |
| ctx.fillStyle = '#000'; | |
| for (const b of S.boxes) if (isVisible(b)) ctx.fillRect(b.x, b.y, b.w, b.h); | |
| return ec; | |
| } | |
| function downloadImage() { | |
| const ec = renderExportCanvas(); | |
| ec.toBlob(blob => { | |
| const a = document.createElement('a'); | |
| const base = (S.filename || 'screenshot').replace(/\.[^/.]+$/, ''); | |
| a.download = base + '-redacted.png'; | |
| a.href = URL.createObjectURL(blob); | |
| a.click(); | |
| setTimeout(() => URL.revokeObjectURL(a.href), 1000); | |
| toast('saved ' + a.download); | |
| }, 'image/png'); | |
| } | |
| async function copyToClipboard() { | |
| const ec = renderExportCanvas(); | |
| try { | |
| await new Promise((res, rej) => { | |
| ec.toBlob(async blob => { | |
| try { | |
| if (!navigator.clipboard || !window.ClipboardItem) { rej(new Error('clipboard api not supported')); return; } | |
| await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]); | |
| res(); | |
| } catch (e) { rej(e); } | |
| }, 'image/png'); | |
| }); | |
| toast('copied to clipboard'); | |
| } catch (e) { | |
| toast('copy failed · ' + e.message); | |
| } | |
| } | |
| function exportText() { | |
| // Build redacted plaintext by replacing detected spans with [REDACTED label] | |
| let out = '', pos = 0; | |
| const spans = [...S.spans].filter(s => S.activeCats.has(s.label)).sort((a, b) => a.start - b.start); | |
| for (const sp of spans) { | |
| if (sp.start < pos) continue; | |
| out += S.sourceText.slice(pos, sp.start) + `[${(LABELS[sp.label] || sp.label).toLowerCase()}]`; | |
| pos = sp.end; | |
| } | |
| out += S.sourceText.slice(pos); | |
| const blob = new Blob([out], { type: 'text/plain' }); | |
| const a = document.createElement('a'); | |
| const base = (S.filename || 'screenshot').replace(/\.[^/.]+$/, ''); | |
| a.download = base + '-redacted.txt'; | |
| a.href = URL.createObjectURL(blob); | |
| a.click(); | |
| setTimeout(() => URL.revokeObjectURL(a.href), 1000); | |
| toast('saved ' + a.download); | |
| } | |
| let toastTimer = null; | |
| function toast(msg) { | |
| const t = document.getElementById('toast'); | |
| t.textContent = msg; | |
| t.classList.add('show'); | |
| clearTimeout(toastTimer); | |
| toastTimer = setTimeout(() => t.classList.remove('show'), 2000); | |
| } | |
| // Module scripts don't expose top-level names to the global scope, but | |
| // several buttons in the HTML use inline onclick="foo()" handlers — | |
| // bridge them explicitly. | |
| Object.assign(window, { | |
| resetView, zoomStep, zoomFit, zoomReset, | |
| downloadImage, copyToClipboard, exportText, | |
| }); | |
| </script> | |
| </body> | |
| </html>""" | |
| if __name__ == "__main__": | |
| server.launch(server_name="0.0.0.0", server_port=7860, show_error=True) | |