| const $ = s => document.querySelector(s) |
| const $$ = s => document.querySelectorAll(s) |
| const EXIF_NAMES = { 1: "novelai", 2: "sd", 3: "comfy", 4: "mj", 5: "celsys", 6: "photoshop", 7: "stealth" } |
| const EXIF_CODES = Object.keys(EXIF_NAMES).map(Number) |
| const FILTER_CODES = EXIF_CODES |
| const EXIF_FILTER_KEY = "pixif2-exif-types" |
| const LONG_DIGITS_RE = /\d{6,}/g |
| const PAGE_SIZE = 60 |
| const SEARCH_PAGE_SIZE = 10 |
| let viewerScale = 1 |
| let viewerDrag = null |
| let explorerEvents = null |
| let explorerPage = 1 |
|
|
|
|
| $$(".tab").forEach(tab => { |
| tab.addEventListener("click", () => { |
| location.hash = `#/${tab.dataset.tab}` |
| }) |
| }) |
|
|
| $("#btn-submit").addEventListener("click", async () => { |
| const url = $("#input-url").value.trim() |
| if (!url) return |
| const pages = parseInt($("#input-pages").value) || 30 |
| const mode = $("#input-mode").value |
| const status = $("#submit-status") |
| status.textContent = "Submitting..." |
| status.className = "" |
|
|
| const userIds = [...new Set(url.match(LONG_DIGITS_RE) || [])] |
| const hasSearch = /search/i.test(url) |
| const isUserInput = userIds.length > 0 && !hasSearch |
|
|
| if (userIds.length > 0 && hasSearch) { |
| status.textContent = "Ambiguous input - pick either user IDs or a search URL" |
| status.className = "status-err" |
| return |
| } |
|
|
| try { |
| let resp |
| if (isUserInput) { |
| resp = await fetch("/api/submit_users", { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify({ user_ids: userIds }) |
| }) |
| } else { |
| resp = await fetch("/api/submit", { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify({ url, pages, mode }) |
| }) |
| } |
| const data = await resp.json() |
| const ids = data.ids || [data.id] |
| status.textContent = `Submitted as ${ids.join(", ")} - you can close this page` |
| status.className = "status-ok" |
| } catch (e) { |
| status.textContent = `Error: ${e.message}` |
| status.className = "status-err" |
| } |
| }) |
|
|
| function route() { |
| const raw = location.hash.slice(2) || "submit" |
| const [path, qs = ""] = raw.split("?") |
| const parts = path.split("/").filter(Boolean) |
| const tab = parts[0] || "submit" |
| const params = new URLSearchParams(qs) |
| if (tab === "progress") { |
| location.hash = "#/explorer" |
| return |
| } |
| $$(".tab").forEach(t => t.classList.toggle("active", t.dataset.tab === tab)) |
| $$(".panel").forEach(p => p.classList.toggle("active", p.id === tab)) |
| if (tab === "explorer") { |
| if (parts[1]) { |
| closeExplorerEvents() |
| openSearch(decodeURIComponent(parts[1]), parseInt(params.get("page")) || 1) |
| } else { |
| loadSearches(parseInt(params.get("page")) || 1) |
| openExplorerEvents() |
| } |
| } else { |
| closeExplorerEvents() |
| } |
| } |
|
|
|
|
| function explorerHash(id, page) { |
| return `#/explorer/${encodeURIComponent(id)}?page=${page}` |
| } |
|
|
|
|
| async function loadSearches(page = 1) { |
| explorerPage = page |
| const list = $("#search-list") |
| const detail = $("#search-detail") |
| detail.classList.add("hidden") |
| list.innerHTML = "Loading..." |
| try { |
| const [searchResp, taskResp] = await Promise.all([fetch(`/api/searches?page=${page}`), fetch("/api/progress")]) |
| const data = await searchResp.json() |
| const tasks = await taskResp.json() |
| const active = tasks.filter(t => t.type === "search" || t.type === "search+scan" || t.type === "user_search") |
| const searches = (data.items || []).filter(s => (s.found_exif || 0) > 0) |
| if (!searches.length && !active.length) { list.innerHTML = "No searches yet"; return } |
| const activeHtml = active.map(t => { |
| const label = t.total > 0 ? `${t.done}/${t.total}` : "..." |
| return `<div class="search-item active-task" data-id="${esc(t.id)}"> |
| <span class="id">${esc(t.id)}</span> |
| <span class="time">${esc(t.type)} ${esc(t.phase)} ${label}</span> |
| <span class="search-status active-mark">...</span> |
| </div>` |
| }).join("") |
| const savedHtml = searches.map(s => { |
| const d = new Date(parseInt(s.created_at) * 1000) |
| const ts = d.toLocaleString() |
| const count = `${s.found_exif || 0}/${s.total_searched || 0}` |
| return `<div class="search-item" data-id="${esc(s.id)}"> |
| <span class="id">${esc(s.id)}</span> |
| <span class="time">${ts}</span> |
| <span class="search-actions"> |
| <span class="search-status done-mark" title="found exif / total searched">${count}</span> |
| <button class="btn-icon btn-rename" title="Rename">✎</button> |
| <button class="btn-icon btn-delete" title="Delete">×</button> |
| </span> |
| </div>` |
| }).join("") |
| list.innerHTML = activeHtml + savedHtml + renderSearchPager(data) |
| list.querySelectorAll(".search-item").forEach(el => { |
| if (!el.dataset.id) return |
| el.querySelector(".id").addEventListener("click", () => { location.hash = explorerHash(el.dataset.id, 1) }) |
| const rename = el.querySelector(".btn-rename") |
| const del = el.querySelector(".btn-delete") |
| if (rename) rename.addEventListener("click", e => { e.stopPropagation(); renameSearch(el.dataset.id) }) |
| if (del) del.addEventListener("click", e => { e.stopPropagation(); deleteSearch(el.dataset.id) }) |
| }) |
| const prev = $("#search-prev") |
| const next = $("#search-next") |
| if (prev) prev.onclick = () => { location.hash = `#/explorer?page=${Math.max(page - 1, 1)}` } |
| if (next) next.onclick = () => { location.hash = `#/explorer?page=${Math.min(page + 1, data.pages)}` } |
| } catch (e) { |
| list.innerHTML = `Error: ${e.message}` |
| } |
| } |
|
|
| function openExplorerEvents() { |
| if (explorerEvents) return |
| explorerEvents = new EventSource("/api/events") |
| explorerEvents.onmessage = () => { |
| const raw = location.hash.slice(2) || "submit" |
| const [path] = raw.split("?") |
| const parts = path.split("/").filter(Boolean) |
| if ((parts[0] || "submit") === "explorer" && !parts[1]) loadSearches(explorerPage) |
| } |
| } |
|
|
| function closeExplorerEvents() { |
| if (!explorerEvents) return |
| explorerEvents.close() |
| explorerEvents = null |
| } |
|
|
| function renderSearchPager(data) { |
| if (!data.total || data.pages <= 1) return "" |
| const start = (data.page - 1) * SEARCH_PAGE_SIZE + 1 |
| const end = Math.min(data.page * SEARCH_PAGE_SIZE, data.total) |
| return `<div class="list-pager"> |
| <button class="btn-secondary" id="search-prev" ${data.page <= 1 ? "disabled" : ""}>Prev</button> |
| <span>${start}-${end} of ${data.total} | page ${data.page}/${data.pages}</span> |
| <button class="btn-secondary" id="search-next" ${data.page >= data.pages ? "disabled" : ""}>Next</button> |
| </div>` |
| } |
|
|
| function getExifTypes() { |
| const raw = localStorage.getItem(EXIF_FILTER_KEY) |
| if (raw === null) return [...EXIF_CODES] |
| const types = raw.split(",").map(Number).filter(n => FILTER_CODES.includes(n)) |
| return types |
| } |
|
|
| function setExifTypes(types) { |
| const sorted = [...new Set(types)].filter(n => FILTER_CODES.includes(n)).sort((a, b) => a - b) |
| if (sorted.length === EXIF_CODES.length && sorted.every(n => EXIF_CODES.includes(n))) { |
| localStorage.removeItem(EXIF_FILTER_KEY) |
| } else { |
| localStorage.setItem(EXIF_FILTER_KEY, sorted.join(",")) |
| } |
| return sorted |
| } |
|
|
| function renderExifFilters(id) { |
| const active = new Set(getExifTypes()) |
| const buttons = FILTER_CODES.map(code => `<button class="filter-btn${active.has(code) ? " active" : ""}" data-code="${code}">${esc(EXIF_NAMES[code])}</button>`).join("") |
| $("#exif-filters").innerHTML = `${buttons} |
| <button class="filter-action" data-action="all">Select all</button> |
| <button class="filter-action" data-action="none">Select none</button> |
| <button class="filter-action update" data-action="update">Update</button>` |
| $$("#exif-filters .filter-btn").forEach(btn => { |
| btn.onclick = () => btn.classList.toggle("active") |
| }) |
| $$("#exif-filters .filter-action").forEach(btn => { |
| btn.onclick = () => { |
| const action = btn.dataset.action |
| const filters = [...$$("#exif-filters .filter-btn")] |
| if (action === "all") filters.forEach(el => el.classList.add("active")) |
| if (action === "none") filters.forEach(el => el.classList.remove("active")) |
| if (action !== "update") return |
| const types = filters.filter(el => el.classList.contains("active")).map(el => Number(el.dataset.code)) |
| setExifTypes(types) |
| const hash = explorerHash(id, 1) |
| if (location.hash === hash) openSearch(id, 1) |
| else location.hash = hash |
| } |
| }) |
| } |
|
|
| async function openSearch(id, page = 1) { |
| const list = $("#search-list") |
| const detail = $("#search-detail") |
| const exifTypes = getExifTypes() |
| list.innerHTML = "" |
| detail.classList.remove("hidden") |
| $("#detail-title").textContent = id |
| $("#detail-stats").textContent = "Loading..." |
| $("#pager").innerHTML = "" |
| $("#results-grid").innerHTML = "" |
| renderExifFilters(id) |
|
|
| try { |
| const typesParam = exifTypes.length ? exifTypes.join(",") : "none" |
| const resp = await fetch(`/api/results/${encodeURIComponent(id)}?page=${page}&exif_types=${typesParam}`) |
| const data = await resp.json() |
| if (data.error) { $("#detail-stats").textContent = data.error; return } |
|
|
| const allScanned = data.scanned_count >= data.raw_total |
| $("#detail-stats").textContent = `${data.total}/${data.raw_total} shown | ${data.scanned_count}/${data.raw_total} scanned` |
| if (!allScanned) resumeScan(id) |
|
|
| $("#btn-back").onclick = () => { location.hash = "#/explorer" } |
| renderPager(id, data) |
| renderResults(data) |
| } catch (e) { |
| $("#detail-stats").textContent = e.message |
| } |
| } |
|
|
| async function resumeScan(id) { |
| await fetch("/api/scan", { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify({ search_id: id }) |
| }) |
| } |
|
|
| function pageSuffix(url) { |
| if (!url) return "" |
| const m = url.match(/_p(\d+)\./) |
| return m ? `_p${m[1]}` : "" |
| } |
|
|
| function renderResults(data) { |
| const grid = $("#results-grid") |
| const offset = (data.page - 1) * PAGE_SIZE |
| grid.innerHTML = data.items.map((item, i) => { |
| const pid = item.post_id |
| const pg = item.url ? pageSuffix(item.url) : "" |
| const label = pid + pg |
| const index = offset + i + 1 |
| let badge = "" |
| if (!item.scanned) { |
| badge = `<span class="not-scanned">not scanned</span>` |
| } else if (item.exif_type) { |
| const name = EXIF_NAMES[item.exif_type] || "?" |
| badge = `<span class="exif-badge exif-${item.exif_type}">${name}</span>` |
| } else { |
| badge = `<span class="no-exif">NIL</span>` |
| } |
| const download = item.download_url ? `<a class="download-link" href="${esc(item.download_url)}">Download</a>` : "" |
| const thumb = item.image_url |
| ? `<button class="thumb" data-preview="${esc(item.preview_url || item.image_url)}" data-download="${esc(item.download_url || "")}"><img src="${esc(item.image_url)}" loading="lazy" alt="${esc(label)}"></button>` |
| : "" |
| return `<div class="result-card" data-pid="${pid}"> |
| ${thumb} |
| <div class="result-meta"> |
| <span class="result-link">${label}</span> |
| ${download} |
| </div> |
| ${badge} |
| <span class="result-index">${index}</span> |
| </div>` |
| }).join("") |
| grid.querySelectorAll(".result-link").forEach(el => { |
| el.addEventListener("click", () => { |
| const pid = el.closest(".result-card").dataset.pid |
| window.open(`https://www.pixiv.net/artworks/${pid}`, "_blank") |
| }) |
| }) |
| grid.querySelectorAll(".thumb").forEach(el => { |
| el.addEventListener("click", () => openViewer(el.dataset.preview, el.dataset.download)) |
| el.querySelector("img").addEventListener("load", () => el.classList.add("thumb-loaded")) |
| el.querySelector("img").addEventListener("error", () => el.classList.add("thumb-error")) |
| }) |
| } |
|
|
| function openViewer(src, download) { |
| if (!src) return |
| viewerScale = 1 |
| $("#viewer-img").src = src |
| $("#viewer-download").href = download || src |
| $("#viewer").classList.remove("hidden") |
| $("#viewer").setAttribute("aria-hidden", "false") |
| applyViewerZoom() |
| } |
|
|
| function closeViewer() { |
| $("#viewer").classList.add("hidden") |
| $("#viewer").setAttribute("aria-hidden", "true") |
| $("#viewer-img").src = "" |
| $("#viewer-download").href = "" |
| viewerDrag = null |
| $("#viewer-stage").classList.remove("dragging") |
| } |
|
|
| function applyViewerZoom() { |
| $("#viewer-img").style.transform = `scale(${viewerScale})` |
| $("#viewer-zoom").textContent = `${Math.round(viewerScale * 100)}%` |
| } |
|
|
| $("#viewer-zoom-in").addEventListener("click", () => { |
| viewerScale = Math.min(viewerScale + .25, 6) |
| applyViewerZoom() |
| }) |
|
|
| $("#viewer-zoom-out").addEventListener("click", () => { |
| viewerScale = Math.max(viewerScale - .25, .25) |
| applyViewerZoom() |
| }) |
|
|
| $("#viewer-close").addEventListener("click", closeViewer) |
| $("#viewer").addEventListener("click", e => { if (e.target.id === "viewer") closeViewer() }) |
| $("#viewer-stage").addEventListener("wheel", e => { |
| e.preventDefault() |
| viewerScale = Math.min(Math.max(viewerScale + (e.deltaY < 0 ? .15 : -.15), .25), 6) |
| applyViewerZoom() |
| }) |
| $("#viewer-stage").addEventListener("pointerdown", e => { |
| if (e.button !== 0) return |
| const stage = $("#viewer-stage") |
| viewerDrag = { |
| x: e.clientX, |
| y: e.clientY, |
| left: stage.scrollLeft, |
| top: stage.scrollTop, |
| } |
| stage.classList.add("dragging") |
| stage.setPointerCapture(e.pointerId) |
| }) |
| $("#viewer-stage").addEventListener("pointermove", e => { |
| if (!viewerDrag) return |
| const stage = $("#viewer-stage") |
| stage.scrollLeft = viewerDrag.left - e.clientX + viewerDrag.x |
| stage.scrollTop = viewerDrag.top - e.clientY + viewerDrag.y |
| }) |
| $("#viewer-stage").addEventListener("pointerup", e => { |
| viewerDrag = null |
| $("#viewer-stage").classList.remove("dragging") |
| $("#viewer-stage").releasePointerCapture(e.pointerId) |
| }) |
| $("#viewer-stage").addEventListener("pointercancel", () => { |
| viewerDrag = null |
| $("#viewer-stage").classList.remove("dragging") |
| }) |
| window.addEventListener("keydown", e => { if (e.key === "Escape") closeViewer() }) |
|
|
| function renderPager(id, data) { |
| const pager = $("#pager") |
| const prev = Math.max(data.page - 1, 1) |
| const next = Math.min(data.page + 1, data.pages) |
| const start = data.total ? (data.page - 1) * PAGE_SIZE + 1 : 0 |
| const end = Math.min(data.page * PAGE_SIZE, data.total) |
| pager.innerHTML = `<button class="btn-secondary" id="page-prev" ${data.page <= 1 ? "disabled" : ""}>Prev</button> |
| <span>${start}-${end} of ${data.total} | page ${data.page}/${data.pages}</span> |
| <button class="btn-secondary" id="page-next" ${data.page >= data.pages ? "disabled" : ""}>Next</button>` |
| $("#page-prev").onclick = () => { location.hash = explorerHash(id, prev) } |
| $("#page-next").onclick = () => { location.hash = explorerHash(id, next) } |
| } |
|
|
| function esc(s) { |
| const d = document.createElement("div") |
| d.textContent = s |
| return d.innerHTML |
| } |
|
|
| async function deleteSearch(id) { |
| if (!confirm(`Delete search "${id}"?`)) return |
| await fetch(`/api/search/${id}`, { method: "DELETE" }) |
| location.hash = "#/explorer" |
| loadSearches() |
| } |
|
|
| async function renameSearch(id) { |
| const newId = prompt("New name:", id) |
| if (!newId || newId === id) return |
| await fetch(`/api/search/${id}`, { |
| method: "PATCH", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify({ new_id: newId }) |
| }) |
| location.hash = "#/explorer" |
| loadSearches() |
| } |
|
|
| window.addEventListener("hashchange", route) |
| if (!location.hash) location.hash = "#/submit" |
| route() |
|
|
