426 lines
29 KiB
HTML
426 lines
29 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>NSFW Review · %%TOTAL%% images</title>
|
|
<style>
|
|
*{box-sizing:border-box}
|
|
:root{
|
|
--bg:#0b0d10;--surface:#14171c;--surface-2:#1b1f26;--elev:#20252e;
|
|
--border:#262b34;--border-2:#323947;--text:#e8eaee;--muted:#9aa1ae;--faint:#6b727f;
|
|
--primary:#10b981;--primary-2:#0ea372;--primary-ink:#04130c;--danger:#ef4444;--ring:#3b82f6;--pink:#e05fa8;
|
|
--r:12px;--r-sm:8px}
|
|
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
|
html,body{margin:0}
|
|
body{background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
|
|
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
|
|
svg{width:1em;height:1em;display:block}
|
|
button{font:inherit;color:inherit;cursor:pointer}
|
|
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
|
|
.app{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;min-height:58px;
|
|
padding:11px 18px;background:rgba(11,13,16,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
|
|
.brand{display:flex;align-items:center;gap:11px}
|
|
.logo{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;font-size:18px;
|
|
background:linear-gradient(135deg,#1e3a5f,#10b981);color:#fff}
|
|
.titles h1{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
|
|
.titles p{margin:0;font-size:11px;color:var(--faint)}
|
|
.grow{flex:1}
|
|
.metrics{display:flex;gap:8px}
|
|
.metric{display:flex;flex-direction:column;align-items:center;min-width:66px;padding:5px 12px;
|
|
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)}
|
|
.metric .num{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
|
|
.metric .lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
|
|
.toolbar{position:sticky;top:58px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
|
|
padding:10px 18px;background:rgba(16,19,24,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
|
|
.field{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;background:var(--surface);
|
|
border:1px solid var(--border);border-radius:var(--r-sm)}
|
|
.field svg{color:var(--faint);font-size:15px}
|
|
.field input{background:none;border:0;outline:none;color:var(--text);height:100%;width:200px}
|
|
.field input::placeholder{color:var(--faint)}
|
|
.field:focus-within{border-color:var(--border-2);box-shadow:0 0 0 3px rgba(59,130,246,.22)}
|
|
.seg{display:inline-flex;padding:3px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)}
|
|
.seg button{border:0;background:none;color:var(--muted);padding:5px 11px;border-radius:6px;font-size:12.5px;font-weight:500}
|
|
.seg button.on{background:var(--elev);color:var(--text)}
|
|
.seg button:hover:not(.on){color:var(--text)}
|
|
.legend{display:flex;gap:8px;align-items:center}
|
|
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:16px;font:inherit;
|
|
font-size:12px;font-weight:500;border:1px solid var(--border);background:var(--surface);color:var(--muted);
|
|
cursor:pointer;transition:opacity .15s,color .15s,border-color .15s}
|
|
.chip .sw{width:10px;height:10px;border-radius:3px}
|
|
.sw-nsfw{background:var(--pink)}
|
|
.sw-sfw{background:var(--primary)}
|
|
.chip.on{color:var(--text);border-color:var(--border-2)}
|
|
.chip:not(.on){opacity:.4;text-decoration:line-through}
|
|
.chip .cn{color:var(--faint);font-variant-numeric:tabular-nums}
|
|
.thr,.sortf{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px;white-space:nowrap}
|
|
.thr output{min-width:2.4em;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
|
|
input[type=range]{-webkit-appearance:none;appearance:none;width:110px;height:4px;border-radius:3px;background:var(--border-2);outline:none}
|
|
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
|
|
background:var(--primary);cursor:pointer;border:2px solid var(--bg);box-shadow:0 0 0 1px var(--primary)}
|
|
select{height:36px;padding:0 8px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r-sm);outline:none}
|
|
select:focus{border-color:var(--border-2);box-shadow:0 0 0 3px rgba(59,130,246,.22)}
|
|
.btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:var(--r-sm);
|
|
border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:500;
|
|
transition:background .15s,border-color .15s,transform .05s}
|
|
.btn svg{font-size:15px}
|
|
.btn.ghost:hover{background:var(--elev);border-color:var(--border-2)}
|
|
.btn:active{transform:translateY(1px)}
|
|
.btn.primary{background:var(--primary);border-color:transparent;color:var(--primary-ink);font-weight:600}
|
|
.btn.primary:hover{background:var(--primary-2)}
|
|
.btn.primary:disabled{opacity:.45;cursor:not-allowed}
|
|
.btn.danger{border-color:var(--danger);color:#fca5a5}
|
|
.btn.danger:hover{background:rgba(239,68,68,.14)}
|
|
.btn:disabled{opacity:.45;cursor:not-allowed}
|
|
.btn.act-nsfw{background:var(--pink);border-color:transparent;color:#2a0a1c;font-weight:600}
|
|
.btn.act-nsfw:hover{filter:brightness(1.08)}
|
|
.btn.act-safe{background:var(--primary);border-color:transparent;color:var(--primary-ink);font-weight:600}
|
|
.btn.act-safe:hover{background:var(--primary-2)}
|
|
.ctl{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px;white-space:nowrap}
|
|
.actions{display:flex;align-items:center;gap:8px;padding-left:10px;border-left:1px solid var(--border)}
|
|
.actions[hidden]{display:none}
|
|
.selinfo{color:var(--muted);font-size:12.5px;white-space:nowrap}
|
|
.selinfo b{color:var(--text);font-variant-numeric:tabular-nums}
|
|
.btn .pill{min-width:20px;height:19px;padding:0 6px;display:grid;place-items:center;border-radius:10px;
|
|
background:rgba(0,0,0,.22);font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
|
|
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;padding:16px 18px 64px}
|
|
.card{position:relative;overflow:hidden;background:var(--surface);border:2px solid var(--border);border-radius:var(--r);
|
|
cursor:pointer;transition:border-color .15s,transform .12s,box-shadow .15s}
|
|
.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
|
|
.card:focus-within{outline:2px solid var(--ring);outline-offset:2px}
|
|
.card.c-safe{border-color:var(--primary)}
|
|
.card.c-tag{border-color:var(--pink)}
|
|
.card.c-sel{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
|
|
.card.selected{outline:3px solid var(--ring);outline-offset:-3px}
|
|
.thumb{position:relative;aspect-ratio:1/1;background:#000}
|
|
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
|
|
.nsfw{position:absolute;top:8px;left:8px;width:1px;height:1px;opacity:0;pointer-events:none}
|
|
.score{position:absolute;left:8px;top:8px;padding:2px 7px;border-radius:6px;color:#fff;font-size:11.5px;
|
|
font-weight:700;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.5)}
|
|
.icon{display:grid;place-items:center;width:30px;height:30px;font-size:15px;border:0;border-radius:8px;
|
|
color:#fff;background:rgba(6,8,12,.62);backdrop-filter:blur(3px);transition:background .15s}
|
|
.icon:hover{background:rgba(6,8,12,.9)}
|
|
.zoom{position:absolute;right:8px;top:8px}
|
|
.tick{position:absolute;right:8px;bottom:8px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
|
|
border:2px solid rgba(255,255,255,.55);background:rgba(6,8,12,.5);color:transparent;font-size:15px;
|
|
cursor:pointer;backdrop-filter:blur(3px);transition:background .15s,border-color .15s,color .15s,transform .1s}
|
|
.tick:hover{border-color:#fff;transform:scale(1.08)}
|
|
.card.t-nsfw .tick{background:var(--pink);border-color:var(--pink);color:#2a0a1c}
|
|
.card.t-sfw .tick{background:var(--primary);border-color:var(--primary);color:#04121f}
|
|
.tagged{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;
|
|
padding:2px 8px 2px 5px;border-radius:6px;background:var(--pink);color:#2a0a1c;font-size:11px;font-weight:700}
|
|
.tagged[hidden]{display:none}
|
|
.tagged svg{font-size:13px}
|
|
.safe{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;
|
|
padding:2px 8px 2px 5px;border-radius:6px;background:var(--primary);color:var(--primary-ink);font-size:11px;font-weight:700}
|
|
.safe[hidden]{display:none}
|
|
.safe svg{font-size:13px}
|
|
.info{padding:8px 10px 10px}
|
|
.name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.path{margin-top:2px;font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left}
|
|
.card.hidden{display:none}
|
|
.empty{padding:64px 20px;text-align:center;color:var(--muted)}
|
|
.navtoggle{display:grid;place-items:center;width:36px;height:36px;font-size:18px;border-radius:var(--r-sm);
|
|
background:var(--surface);border:1px solid var(--border);color:var(--muted);transition:background .15s,color .15s}
|
|
.navtoggle:hover{background:var(--elev);color:var(--text)}
|
|
.navtoggle.on{color:var(--primary);border-color:var(--border-2)}
|
|
.shell{display:flex;align-items:flex-start}
|
|
.sidebar{position:sticky;top:58px;align-self:flex-start;flex:0 0 252px;width:252px;height:calc(100dvh - 58px);
|
|
overflow:auto;padding:8px;background:var(--surface);border-right:1px solid var(--border)}
|
|
.shead{padding:8px 10px 4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
|
|
.content{flex:1;min-width:0}
|
|
.shell.collapsed .sidebar{display:none}
|
|
.fitem{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:0;border-radius:6px;
|
|
background:none;color:var(--muted);font-size:12.5px;text-align:left;transition:background .12s,color .12s}
|
|
.fitem:hover{background:var(--elev);color:var(--text)}
|
|
.fitem.on{background:var(--elev);color:var(--text);font-weight:600}
|
|
.fname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.fcount{min-width:22px;padding:0 7px;text-align:center;font-size:11px;font-variant-numeric:tabular-nums;
|
|
color:var(--faint);background:var(--surface-2);border:1px solid var(--border);border-radius:20px}
|
|
.fitem.on .fcount{color:var(--text);border-color:var(--border-2)}
|
|
@media (max-width:820px){.sidebar{position:fixed;left:0;top:58px;bottom:0;z-index:25;box-shadow:12px 0 32px rgba(0,0,0,.5)}}
|
|
.lb{position:fixed;inset:0;z-index:50;display:flex;gap:16px;padding:20px;
|
|
background:rgba(4,5,7,.94);backdrop-filter:blur(6px)}
|
|
.lb[hidden]{display:none}
|
|
.lb-fig{margin:0;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
|
|
.lb-fig img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
|
|
.lb-bar{display:flex;align-items:center;gap:14px;max-width:100%}
|
|
.lb-bar figcaption{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.lb-bar figcaption b{color:var(--text)}
|
|
.lb .icon{width:40px;height:40px;font-size:18px;background:rgba(20,23,28,.82);border:1px solid var(--border)}
|
|
.lb .icon:hover{background:var(--elev)}
|
|
.lb-close{position:absolute;top:20px;left:20px;z-index:2}
|
|
.lb-meta{flex:0 0 300px;width:300px;overflow:auto;background:rgba(20,23,28,.72);border:1px solid var(--border);
|
|
border-radius:10px;padding:12px 14px;font-size:11px;line-height:1.5}
|
|
.mrow{display:flex;gap:8px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.05)}
|
|
.mk{flex:0 0 42%;color:var(--faint);word-break:break-word}
|
|
.mv{flex:1;min-width:0;color:var(--text);word-break:break-word}
|
|
.mv a{color:#6ea8ff;text-decoration:none}
|
|
.mv a:hover{text-decoration:underline}
|
|
.mload{color:var(--muted);padding:6px 0}
|
|
@media (max-width:720px){.lb-meta{display:none}}
|
|
.toast{position:fixed;left:50%;bottom:26px;z-index:60;transform:translateX(-50%) translateY(12px);
|
|
padding:11px 18px;border-radius:10px;background:var(--elev);border:1px solid var(--border-2);color:var(--text);
|
|
font-size:13px;font-weight:500;box-shadow:0 12px 32px rgba(0,0,0,.5);opacity:0;pointer-events:none;
|
|
transition:opacity .2s,transform .2s}
|
|
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
|
|
.toast.ok{border-color:var(--primary)}
|
|
.toast.err{border-color:var(--danger);color:#fecaca}
|
|
.prog{position:fixed;right:20px;bottom:20px;z-index:55;display:flex;align-items:center;gap:12px;
|
|
padding:10px 16px 10px 10px;background:var(--elev);border:1px solid var(--border-2);border-radius:12px;
|
|
box-shadow:0 12px 32px rgba(0,0,0,.5)}
|
|
.prog[hidden]{display:none}
|
|
.pring{position:relative;width:40px;height:40px;display:grid;place-items:center}
|
|
.pring svg{position:absolute;inset:0;transform:rotate(-90deg)}
|
|
.pring .pbg{fill:none;stroke:var(--border-2);stroke-width:3.5}
|
|
.pring .pfg{fill:none;stroke:var(--primary);stroke-width:3.5;stroke-linecap:round;
|
|
stroke-dasharray:100.53;stroke-dashoffset:100.53;transition:stroke-dashoffset .18s}
|
|
.pring #ppct{font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums}
|
|
.plbl{font-size:12px;color:var(--muted)}
|
|
.logpanel{position:fixed;left:0;right:0;bottom:0;z-index:45;height:240px;display:flex;flex-direction:column;
|
|
background:rgba(11,13,16,.98);border-top:1px solid var(--border-2);box-shadow:0 -12px 32px rgba(0,0,0,.5)}
|
|
.logpanel[hidden]{display:none}
|
|
.loghead{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border)}
|
|
.loghead b{font-size:12px}
|
|
.logbody{flex:1;overflow:auto;padding:8px 14px;line-height:1.6;
|
|
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px}
|
|
.logline{display:flex;gap:10px;white-space:pre-wrap;word-break:break-word}
|
|
.logline .lt{flex:0 0 auto;color:var(--faint);font-variant-numeric:tabular-nums}
|
|
.logempty{color:var(--muted)}
|
|
@media (max-width:640px){
|
|
.metrics{display:none}.field input{width:120px}
|
|
.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;padding:12px}}
|
|
</style></head><body>
|
|
<header class="app">
|
|
<button id="navtoggle" class="navtoggle on" aria-label="Toggle folder browser" aria-pressed="true" onclick="toggleSidebar()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/></svg></button>
|
|
<div class="brand">
|
|
<span class="logo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></svg></span>
|
|
<div class="titles"><h1>NSFW Review</h1><p>On-device · nothing leaves this Mac</p></div>
|
|
</div>
|
|
<div class="grow"></div>
|
|
<div class="metrics">
|
|
<div class="metric"><span class="num">%%TOTAL%%</span><span class="lbl">images</span></div>
|
|
</div>
|
|
<button id="logbtn" class="navtoggle" aria-label="Toggle activity log" onclick="toggleLog()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6h11M8 12h11M8 18h11"/><path d="M4 6h.01M4 12h.01M4 18h.01"/></svg></button>
|
|
</header>
|
|
<div class="shell" id="shell">
|
|
<aside class="sidebar" aria-label="Folder browser"><div class="shead">Folders</div>%%TREE%%</aside>
|
|
<div class="content">
|
|
<div class="toolbar">
|
|
<div class="field"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
|
|
<input id="q" type="search" placeholder="Search name or folder…" aria-label="Search images"></div>
|
|
<label class="ctl">Show
|
|
<select id="showSel" aria-label="Show which images"><option value="all">All</option><option value="todo">To-handle</option><option value="nsfw">NSFW</option><option value="sfw">SFW</option></select></label>
|
|
<label class="ctl">Sort
|
|
<select id="sort" aria-label="Sort order"><option value="score">Score ↓</option><option value="name">Name</option><option value="path">Folder</option></select></label>
|
|
<label class="thr">NSFW ≥ <output id="thrOut">%%THRESHOLD%%</output>
|
|
<input id="thr" type="range" min="0" max="1" step="0.01" value="%%THRESHOLD%%" aria-label="NSFW score threshold"></label>
|
|
<button class="btn ghost" onclick="selectFlagged()">Select flagged</button>
|
|
<button class="btn ghost" onclick="setAll(true)">Select all</button>
|
|
<div class="grow"></div>
|
|
<div class="actions" id="actions" hidden>
|
|
<span class="selinfo"><b id="selCount">0</b> selected</span>
|
|
<button class="btn ghost" onclick="setAll(false)">Deselect</button>
|
|
<button id="untagb" class="btn ghost" onclick="untag()">Remove tag</button>
|
|
<button id="markSafeb" class="btn act-safe" onclick="markSafe()">Mark safe</button>
|
|
<button id="applyb" class="btn act-nsfw" onclick="apply()">Mark NSFW</button>
|
|
</div>
|
|
</div>
|
|
<main id="grid" class="grid">%%CARDS%%</main>
|
|
<p id="empty" class="empty" hidden>No images match your filter.</p>
|
|
</div></div>
|
|
<div id="lb" class="lb" hidden>
|
|
<button class="icon lb-close" aria-label="Close" onclick="closeLb()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
|
|
<figure class="lb-fig">
|
|
<img id="lbImg" alt="">
|
|
<div class="lb-bar">
|
|
<button class="icon" aria-label="Previous" onclick="stepLb(-1)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg></button>
|
|
<figcaption id="lbCap"></figcaption>
|
|
<button class="icon" aria-label="Next" onclick="stepLb(1)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></button>
|
|
</div>
|
|
</figure>
|
|
<aside id="lbMeta" class="lb-meta" aria-label="EXIF metadata"></aside>
|
|
</div>
|
|
<div id="prog" class="prog" role="status" aria-live="polite" hidden>
|
|
<div class="pring"><svg viewBox="0 0 36 36"><circle class="pbg" cx="18" cy="18" r="16"/><circle id="pring" class="pfg" cx="18" cy="18" r="16"/></svg><span id="ppct">0%</span></div>
|
|
<span class="plbl">Checking existing tags…</span>
|
|
</div>
|
|
<div id="logpanel" class="logpanel" hidden>
|
|
<div class="loghead"><b>Activity log</b><span id="logcount" class="plbl"></span><div class="grow"></div>
|
|
<button class="btn ghost" onclick="toggleLog()">Close</button></div>
|
|
<div id="logbody" class="logbody"><div class="logempty">No activity yet.</div></div>
|
|
</div>
|
|
<div id="toast" class="toast" role="status" aria-live="polite" hidden></div>
|
|
<script>
|
|
const $=s=>document.querySelector(s);
|
|
const grid=$('#grid'),q=$('#q'),thr=$('#thr'),thrOut=$('#thrOut'),sortSel=$('#sort'),showSel=$('#showSel'),
|
|
selCount=$('#selCount'),applyb=$('#applyb'),untagb=$('#untagb'),markSafeb=$('#markSafeb'),
|
|
actions=$('#actions'),empty=$('#empty'),toastEl=$('#toast');
|
|
const cards=[...document.querySelectorAll('.card')];
|
|
let folderFilter='',show='all';
|
|
function refreshTagN(){} // (chip counts removed with the toolbar redesign)
|
|
function pickFolder(btn){
|
|
folderFilter=btn.dataset.folder||'';
|
|
document.querySelectorAll('.fitem').forEach(x=>x.classList.toggle('on',x===btn));
|
|
applyView();scanFolder();}
|
|
// Lazily ask the server which images in the current folder already carry the
|
|
// 'nsfw' tag, in chunks, updating the progress ring and filtering on the fly.
|
|
const prog=$('#prog'),pring=$('#pring'),ppct=$('#ppct'),PC=100.53;
|
|
function setProg(f){ppct.textContent=Math.round(f*100)+'%';pring.style.strokeDashoffset=PC*(1-f);}
|
|
let scanning=false;
|
|
async function scanFolder(){
|
|
if(scanning)return;
|
|
const scope=cards.filter(c=>c.dataset.tagged==='?'&&inFolder(c));
|
|
if(!scope.length)return;
|
|
scanning=true;prog.hidden=false;setProg(0);
|
|
const CH=300;let done=0;
|
|
for(let i=0;i<scope.length;i+=CH){
|
|
const chunk=scope.slice(i,i+CH);let res={nsfw:[],sfw:[]};
|
|
try{res=await(await fetch('/tagged',{method:'POST',body:JSON.stringify(chunk.map(c=>box(c).value))})).json();}
|
|
catch(e){}
|
|
const nset=new Set(res.nsfw),sset=new Set(res.sfw);
|
|
chunk.forEach(c=>{const v=box(c).value,isN=nset.has(v),isS=sset.has(v);
|
|
c.dataset.tagged=isN?'1':'0';c.dataset.sfw=isS?'1':'0';
|
|
if(isN||isS)box(c).checked=false; // decided: nsfw->pink / sfw->green
|
|
else box(c).checked=parseFloat(c.dataset.score)>=curThr(); // undecided: flag by score -> red
|
|
const b=c.querySelector('.tagged');if(b)b.hidden=!isN;paint(c);});
|
|
done+=chunk.length;setProg(done/scope.length);
|
|
refreshTagN();updateCount();applyView();
|
|
}
|
|
scanning=false;prog.hidden=true;}
|
|
function inFolder(c){if(!folderFilter)return true;const f=c.dataset.folder;return f===folderFilter||f.startsWith(folderFilter+'/');}
|
|
function toggleSidebar(){
|
|
const sh=$('#shell'),tb=$('#navtoggle'),off=sh.classList.toggle('collapsed');
|
|
tb.classList.toggle('on',!off);tb.setAttribute('aria-pressed',String(!off));
|
|
if(off){folderFilter='';document.querySelectorAll('.fitem').forEach((x,i)=>x.classList.toggle('on',i===0));applyView();}}
|
|
document.querySelectorAll('.score').forEach(el=>{
|
|
const s=parseFloat(el.dataset.s),hue=Math.round((1-s)*130);
|
|
el.style.background='hsl('+hue+' 70% 40% / .9)';});
|
|
const box=c=>c.querySelector('.nsfw');
|
|
const visible=c=>!c.classList.contains('hidden');
|
|
// Counts + actions operate on the CURRENT view (folder/search/filter) so the
|
|
// counter tracks what you see, and Clear/Invert change it as expected.
|
|
const selected=()=>cards.filter(c=>box(c).checked&&visible(c));
|
|
const curThr=()=>parseFloat(thr.value);
|
|
// Two independent channels: DECISION (the EXIF tag) colors the frame + tick;
|
|
// SELECTION (the checkbox, for bulk actions) shows as a ring — a card can be both.
|
|
function paint(c){const sel=box(c).checked,tag=c.dataset.tagged==='1',safe=c.dataset.sfw==='1';
|
|
c.classList.toggle('c-tag',tag); // pink frame: nsfw in EXIF
|
|
c.classList.toggle('c-safe',!tag&&safe); // green frame: sfw in EXIF
|
|
c.classList.toggle('c-sel',!tag&&!safe&&sel); // red frame: undecided & selected (bulk candidate)
|
|
c.classList.toggle('t-nsfw',tag); // tick fill mirrors the decision
|
|
c.classList.toggle('t-sfw',safe);
|
|
c.classList.toggle('selected',sel); // ring: selected (visible even on tagged cards)
|
|
const tb=c.querySelector('.tagged');if(tb)tb.hidden=!tag; // pink "tagged" badge (nsfw in EXIF)
|
|
const sb=c.querySelector('.safe');if(sb)sb.hidden=!safe;} // green "tagged" badge (sfw in EXIF)
|
|
const paintAll=()=>cards.forEach(paint);
|
|
// Per-image decision. One click writes EXIF and cycles: undecided -> NSFW -> SFW -> undecided.
|
|
// Independent of selection, so it never needs a second click and always reaches every state.
|
|
async function toggleCard(btn){
|
|
const c=btn.closest('.card');
|
|
const cur=c.dataset.tagged==='1'?'nsfw':(c.dataset.sfw==='1'?'sfw':'none');
|
|
const next=cur==='none'?'nsfw':(cur==='nsfw'?'sfw':'none');
|
|
const url=next==='nsfw'?'/apply':next==='sfw'?'/mark?state=sfw':'/untag';
|
|
c.dataset.tagged=next==='nsfw'?'1':'0';c.dataset.sfw=next==='sfw'?'1':'0';
|
|
paint(c);updateCount(); // optimistic
|
|
try{await fetch(url,{method:'POST',body:JSON.stringify([box(c).value])});}
|
|
catch(e){toast('Could not save decision — '+e,'err');}
|
|
refreshTagN();updateCount();}
|
|
function selectFlagged(){cards.forEach(c=>{if(!c.classList.contains('hidden')&&c.dataset.tagged!=='1'&&parseFloat(c.dataset.score)>=curThr())box(c).checked=true;});updateCount();paintAll();}
|
|
function updateCount(){const sel=selected(),n=sel.length,nt=sel.filter(c=>c.dataset.tagged==='1'||c.dataset.sfw==='1').length;
|
|
selCount.textContent=n;actions.hidden=n===0;
|
|
applyb.disabled=n===0;markSafeb.disabled=n===0;untagb.disabled=nt===0;}
|
|
function setAll(v){cards.forEach(c=>{if(!c.classList.contains('hidden'))box(c).checked=v;});updateCount();paintAll();}
|
|
grid.addEventListener('change',e=>{if(e.target.classList.contains('nsfw')){updateCount();paint(e.target.closest('.card'));}});
|
|
thr.addEventListener('input',()=>{thrOut.textContent=curThr().toFixed(2);paintAll();});
|
|
showSel.addEventListener('change',()=>{show=showSel.value;applyView();});
|
|
q.addEventListener('input',applyView);
|
|
sortSel.addEventListener('change',applyView);
|
|
function applyView(){
|
|
const term=q.value.trim().toLowerCase();
|
|
let vis=cards.filter(c=>{
|
|
if(term&&!c.dataset.hay.includes(term))return false;
|
|
if(folderFilter){const f=c.dataset.folder;if(f!==folderFilter&&!f.startsWith(folderFilter+'/'))return false;}
|
|
if(show==='todo'&&(c.dataset.tagged==='1'||c.dataset.sfw==='1'))return false; // only un-decided
|
|
if(show==='nsfw'&&c.dataset.tagged!=='1')return false; // only NSFW-tagged
|
|
if(show==='sfw'&&c.dataset.sfw!=='1')return false; // only SFW-tagged
|
|
return true;});
|
|
const key=sortSel.value;
|
|
vis.sort((a,b)=>{
|
|
if(key==='name')return a.dataset.name.localeCompare(b.dataset.name);
|
|
if(key==='path')return a.dataset.folder.localeCompare(b.dataset.folder);
|
|
return parseFloat(b.dataset.score)-parseFloat(a.dataset.score);});
|
|
cards.forEach(c=>c.classList.add('hidden'));
|
|
const frag=document.createDocumentFragment();
|
|
vis.forEach(c=>{c.classList.remove('hidden');frag.appendChild(c);});
|
|
grid.appendChild(frag);
|
|
empty.hidden=vis.length>0;
|
|
updateCount();} // counter reflects the folder/filter you're viewing
|
|
const lb=$('#lb'),lbImg=$('#lbImg'),lbCap=$('#lbCap'),lbMeta=$('#lbMeta');
|
|
const esc=s=>String(s).replace(/[&<>"]/g,c=>({'&':'&','<':'<','>':'>','"':'"'}[c]));
|
|
let lbList=[],lbIdx=-1,metaTok=0;
|
|
function openLb(btn){
|
|
lbList=cards.filter(c=>!c.classList.contains('hidden'));
|
|
lbIdx=lbList.indexOf(btn.closest('.card'));showLb();lb.hidden=false;}
|
|
function metaVal(v){
|
|
if(/^https?:\/\//.test(v)){const t=v.includes('google.com/maps')?'Open in Google Maps ↗':esc(v);
|
|
return '<a href="'+esc(v)+'" target="_blank" rel="noopener">'+t+'</a>';}
|
|
return esc(v);}
|
|
async function loadMeta(path){
|
|
const tok=++metaTok;lbMeta.innerHTML='<div class="mload">Loading EXIF…</div>';
|
|
try{
|
|
const d=await(await fetch('/exif?path='+encodeURIComponent(path))).json();
|
|
if(tok!==metaTok)return;
|
|
const rows=Object.entries(d).map(([k,v])=>'<div class="mrow"><span class="mk">'+esc(k)+'</span><span class="mv">'+metaVal(v)+'</span></div>').join('');
|
|
lbMeta.innerHTML=rows||'<div class="mload">No EXIF.</div>';
|
|
}catch(e){if(tok===metaTok)lbMeta.innerHTML='<div class="mload">EXIF unavailable.</div>';}}
|
|
function showLb(){
|
|
const c=lbList[lbIdx];if(!c)return;const b=c.querySelector('.zoom');
|
|
lbImg.src=b.dataset.src;
|
|
lbCap.innerHTML='<b>'+b.dataset.name+'</b> · score '+b.dataset.score+' · '+(lbIdx+1)+' / '+lbList.length;
|
|
loadMeta(box(c).value);}
|
|
function stepLb(d){lbIdx=(lbIdx+d+lbList.length)%lbList.length;showLb();}
|
|
function closeLb(){lb.hidden=true;lbImg.src='';metaTok++;lbMeta.innerHTML='';}
|
|
lb.addEventListener('click',e=>{if(e.target===lb)closeLb();});
|
|
addEventListener('keydown',e=>{
|
|
if(lb.hidden)return;
|
|
if(e.key==='Escape')closeLb();
|
|
else if(e.key==='ArrowLeft')stepLb(-1);
|
|
else if(e.key==='ArrowRight')stepLb(1);
|
|
else if(e.key===' '){e.preventDefault();const c=lbList[lbIdx];box(c).checked=!box(c).checked;updateCount();paint(c);}});
|
|
let toastT;
|
|
function toast(msg,cls){
|
|
toastEl.textContent=msg;toastEl.hidden=false;toastEl.className='toast show '+(cls||'');
|
|
clearTimeout(toastT);toastT=setTimeout(()=>toastEl.classList.remove('show'),3500);}
|
|
// batch action helper: run `fn` on selected paths, apply `after(card)` to each, toast, restore label
|
|
async function runAction(btn,label,url,after,msg){
|
|
const sel=selected(),paths=sel.map(c=>box(c).value);
|
|
if(!paths.length)return;
|
|
btn.disabled=true;const lbl=btn.textContent;btn.textContent=label;
|
|
try{
|
|
const j=await(await fetch(url,{method:'POST',body:JSON.stringify(paths)})).json();
|
|
sel.forEach(c=>{after(c);box(c).checked=false;paint(c);});
|
|
applyView();toast(msg(paths.length,j),'ok');
|
|
}catch(e){toast('Error: '+e,'err');}
|
|
btn.textContent=lbl;updateCount();}
|
|
const apply=()=>runAction(applyb,'Marking…','/apply',
|
|
c=>{c.dataset.tagged='1';c.dataset.sfw='0';},(n,j)=>'Tagged '+n+' NSFW');
|
|
const markSafe=()=>runAction(markSafeb,'Marking…','/mark?state=sfw',
|
|
c=>{c.dataset.sfw='1';c.dataset.tagged='0';},(n)=>'Marked '+n+' safe');
|
|
const untag=()=>runAction(untagb,'Removing…','/untag',
|
|
c=>{c.dataset.tagged='0';c.dataset.sfw='0';},(n,j)=>'Removed tag from '+(j.untagged??n));
|
|
const logpanel=$('#logpanel'),logbody=$('#logbody'),logcount=$('#logcount');
|
|
let logTimer=null,logLen=-1;
|
|
function toggleLog(){
|
|
const open=logpanel.hidden;logpanel.hidden=!open;$('#logbtn').classList.toggle('on',open);
|
|
if(open){logLen=-1;refreshLog();logTimer=setInterval(refreshLog,2000);}
|
|
else{clearInterval(logTimer);logTimer=null;}}
|
|
async function refreshLog(){
|
|
let ents;try{ents=await(await fetch('/log')).json();}catch(e){return;}
|
|
logcount.textContent=ents.length+' event'+(ents.length===1?'':'s');
|
|
if(ents.length===logLen)return;logLen=ents.length;
|
|
const atBottom=logbody.scrollHeight-logbody.scrollTop-logbody.clientHeight<40;
|
|
logbody.innerHTML=ents.length
|
|
? ents.map(e=>'<div class="logline"><span class="lt">'+esc(e.t)+'</span><span>'+esc(e.m)+'</span></div>').join('')
|
|
: '<div class="logempty">No activity yet.</div>';
|
|
if(atBottom)logbody.scrollTop=logbody.scrollHeight;}
|
|
refreshTagN();paintAll();updateCount();applyView();
|
|
scanFolder(); // scan the whole "All folders" view on load so tag state is defined at startup
|
|
</script></body></html> |