Update app_v2.py

app_v2.py

@@ -1,26 +1,18 @@
 """
-Screenshot Anonymizer — v2 (tool revision)
 ==========================================
-Addresses critique-ui-1.txt: the v1 landing page had the classic
-"AI-generated SaaS" tells (gradient wordmark, centered hero, three feature
-boxes, soft glow, chunky purple primary button). This version is designed
-as a tool-in-rest-state: dense, pixel-editor chrome; mono typography for
-technical values; serif for the one headline; pill-style category rows;
-icon tool row with keyboard shortcuts; rulers, zoom mini-toolbar, status
-bar, and contextual tool options in the editor.
-
-Backend is imported from app.py verbatim — the only thing changing here is
-the frontend and the FastAPI routes that serve it.
+Image Anonymizer 
+==========================================
 """
 
 import base64
+import functools
 import io
 import json
 from pathlib import Path
 
 import gradio as gr
 from fastapi import File, UploadFile
-from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.responses import FileResponse, HTMLResponse, JSONResponse, Response
 from PIL import Image
 
 from app import (
@@ -30,6 +22,28 @@ from app import (
     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)
+
+
+@functools.lru_cache(maxsize=64)
+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
 # =====================================================================
@@ -82,6 +96,28 @@ async def detect(file: UploadFile = File(...)):
     })
 
 
+@server.get("/api/examples")
+async def api_examples():
+    return JSONResponse({"examples": _list_examples()})
+
+
+@server.get("/examples/{name}")
+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"})
+
+
 @server.api(name="anonymize_screenshot")
 def anonymize_screenshot_api(image_path: str) -> str:
     img = Image.open(image_path).convert("RGB")
@@ -223,32 +259,40 @@ svg{display:block;flex-shrink:0}
 .dz-hint{font-family:var(--mono);font-size:11px;color:var(--text3)}
 
 /* example strip */
-.example{
+.example-wrap{
   border:.5px solid var(--border);border-radius:8px;
   background:var(--surface);overflow:hidden;
 }
 .example-head{
-  display:grid;grid-template-columns:1fr 1fr;
-  font-family:var(--mono);font-size:10.5px;
-  color:var(--text3);text-transform:lowercase;
-}
-.example-head > div{padding:.45rem .75rem;border-bottom:.5px solid var(--border)}
-.example-head > div + div{border-left:.5px solid var(--border)}
-.example-body{display:grid;grid-template-columns:1fr 1fr;min-height:120px}
-.example-body > div{padding:.85rem 1rem}
-.example-body > div + div{border-left:.5px solid var(--border)}
-.ex-msg{font-size:12.5px;line-height:1.55;color:var(--text)}
-.ex-msg .who{font-weight:500;margin-bottom:.2rem}
-.ex-msg .line{color:var(--text2)}
-.ex-msg .line + .line{margin-top:.15rem}
-.ex-bar{
-  display:inline-block;background:var(--text);vertical-align:baseline;
-  border-radius:1px;height:.95em;transform:translateY(2px);
-}
-.example-foot{
-  padding:.4rem .75rem;border-top:.5px solid var(--border);
+  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);
-  background:var(--surface2);
+}
+.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{
@@ -342,24 +386,27 @@ svg{display:block;flex-shrink:0}
 }
 
 /* tool row */
-.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:.6rem}
+.tools{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:.7rem}
 .tool{
-  position:relative;
-  display:flex;flex-direction:column;align-items:center;gap:3px;
-  padding:8px 0 6px;
-  border:.5px solid var(--border);border-radius:5px;
+  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:not(:disabled){color:var(--text);border-color:var(--border-strong)}
+.tool:hover{color:var(--text);border-color:var(--border-strong)}
 .tool.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
-.tool:disabled{opacity:.35;cursor:not-allowed}
-.tool svg{width:15px;height:15px}
+.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:9.5px;color:var(--text3);
-  letter-spacing:.02em;
+  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)}
+.tool.active .sc{color:var(--accent);border-color:var(--accent);background:transparent}
 
 /* contextual tool options */
 .tool-opts{
@@ -499,25 +546,14 @@ svg{display:block;flex-shrink:0}
       <div class="dz-hint">png · jpg · webp · bmp · tiff</div>
     </label>
 
-    <div class="example">
-      <div class="example-head"><div>before</div><div>after</div></div>
-      <div class="example-body">
-        <div>
-          <div class="ex-msg">
-            <div class="who">Alice Chen</div>
-            <div class="line">send the invoice to alice@acme.com</div>
-            <div class="line">or text me at (415) 555-0182</div>
-          </div>
-        </div>
-        <div>
-          <div class="ex-msg">
-            <div class="who"><span class="ex-bar" style="width:84px"></span></div>
-            <div class="line">send the invoice to <span class="ex-bar" style="width:128px"></span></div>
-            <div class="line">or text me at <span class="ex-bar" style="width:96px"></span></div>
-          </div>
-        </div>
+    <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 class="example-foot">example · mock chat message</div>
     </div>
   </div>
 
@@ -586,21 +622,15 @@ svg{display:block;flex-shrink:0}
         <div class="p-label">Tool</div>
         <div class="tools">
           <button class="tool active" data-mode="select" title="Select (V)">
-            <svg viewBox="0 0 16 16"><path fill="currentColor" d="M3 2l10 5.5-4.5 1.5L7 13.5z"/></svg>
+            <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 16 16"><rect x="2" y="7" width="12" height="2" rx=".5" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="1" d="M2 4.5h12M2 11.5h12"/></svg>
+            <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>
-          <button class="tool" data-mode="eyedropper" title="Eyedropper — coming soon" disabled>
-            <svg viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" d="M10 3l3 3M11.5 4.5L6 10l-2 .5L3 13l.5-1L9 6.5"/></svg>
-            <span class="sc">I</span>
-          </button>
-          <button class="tool" data-mode="crop" title="Crop — coming soon" disabled>
-            <svg viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-width="1.2" d="M4 1v11h11M1 4h11v11"/></svg>
-            <span class="sc">C</span>
-          </button>
         </div>
         <div class="tool-opts" id="tool-opts"></div>
       </section>
@@ -685,6 +715,46 @@ document.addEventListener('paste', ev => {
   }
 });
 
+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';