Tighten image routes and explorer layout

backend/app.py

@@ -525,7 +525,7 @@ async def get_pixiv_image_url(post_id, page, size, phpsessid):
         raise HTTPException(status_code=404, detail="image not found")
     page = min(max(page, 0), len(pages) - 1)
     urls = pages[page]
-    if size == "full":
+    if size in ("full", "orig"):
         url = urls.get("original") or urls.get("regular") or urls.get("small")
     else:
         url = urls.get("regular") or urls.get("small") or urls.get("original")
@@ -543,9 +543,9 @@ async def fetch_pixiv_bytes(url, phpsessid):
             return await r.read(), r.headers.get("Content-Type") or media_type_from_url(url)
 
 
-async def create_thumb(post_id, image_url, phpsessid, page=0):
+async def create_webp(post_id, image_url, phpsessid, page=0, kind="t"):
     cleanup_thumbs()
-    out = THUMB_DIR / f"{post_id}_p{page}.webp"
+    out = THUMB_DIR / f"{post_id}_p{page}_{kind}.webp"
     if out.exists():
         os.utime(out, None)
         return out
@@ -553,20 +553,25 @@ async def create_thumb(post_id, image_url, phpsessid, page=0):
     if not data:
         raise HTTPException(status_code=404, detail="image not found")
     image = Image.open(io.BytesIO(data))
-    image.thumbnail((144, 144))
+    if kind == "v":
+        image = image.resize((max(image.width // 2, 1), max(image.height // 2, 1)))
+    else:
+        image.thumbnail((360, 360))
     if image.mode not in ("RGB", "RGBA"):
         image = image.convert("RGB")
-    image.save(out, "WEBP", quality=70)
+    image.save(out, "WEBP", quality=82 if kind == "v" else 72)
     return out
 
 
 def image_links(post_id, url):
     page = page_num_from_url(url)
-    suffix = f"?page={page}"
+    suffix = f"?p={page}"
     pid = quote(str(post_id), safe="")
     return {
-        "image_url": f"/api/image/{pid}/thumb{suffix}",
-        "full_image_url": f"/api/image/{pid}/full{suffix}",
+        "image_url": f"/api/i/{pid}/t{suffix}",
+        "preview_url": f"/api/i/{pid}/v{suffix}",
+        "download_url": f"/api/i/{pid}/o{suffix}",
+        "full_image_url": f"/api/i/{pid}/v{suffix}",
         "page": page,
     }
 
@@ -859,10 +864,11 @@ async def get_results(search_id: str, page: int = 1, exif_only: bool = True):
     }
 
 
-@app.get("/api/image/{post_id}/thumb")
-async def get_image_thumb(post_id: str, page: int = 0):
-    image_url = await get_pixiv_image_url(post_id, page, "thumb", PHPSESSID)
-    path = await create_thumb(post_id, image_url, PHPSESSID, page)
+@app.get("/api/i/{post_id}/t")
+async def get_image_thumb(post_id: str, p=0):
+    p = int(p or 0)
+    image_url = await get_pixiv_image_url(post_id, p, "thumb", PHPSESSID)
+    path = await create_webp(post_id, image_url, PHPSESSID, p, "t")
     return FileResponse(
         path,
         media_type="image/webp",
@@ -870,17 +876,44 @@ async def get_image_thumb(post_id: str, page: int = 0):
     )
 
 
-@app.get("/api/image/{post_id}/full")
-async def get_image_full(post_id: str, page: int = 0):
-    image_url = await get_pixiv_image_url(post_id, page, "full", PHPSESSID)
+@app.get("/api/i/{post_id}/v")
+async def get_image_preview(post_id: str, p=0):
+    p = int(p or 0)
+    image_url = await get_pixiv_image_url(post_id, p, "full", PHPSESSID)
+    path = await create_webp(post_id, image_url, PHPSESSID, p, "v")
+    return FileResponse(
+        path,
+        media_type="image/webp",
+        headers={"Cache-Control": f"public, max-age={THUMB_MAX_AGE}"},
+    )
+
+
+@app.get("/api/i/{post_id}/o")
+async def get_image_original(post_id: str, p=0):
+    p = int(p or 0)
+    image_url = await get_pixiv_image_url(post_id, p, "orig", PHPSESSID)
     data, content_type = await fetch_pixiv_bytes(image_url, PHPSESSID)
+    filename = urlsplit(image_url).path.rsplit("/", 1)[-1] or f"{post_id}_p{p}.png"
     return Response(
         data,
         media_type=content_type,
-        headers={"Cache-Control": f"public, max-age={THUMB_MAX_AGE}"},
+        headers={
+            "Cache-Control": f"public, max-age={THUMB_MAX_AGE}",
+            "Content-Disposition": f'attachment; filename="{filename}"',
+        },
     )
 
 
+@app.get("/api/image/{post_id}/thumb")
+async def get_long_image_thumb(post_id: str, page: int = 0, p=None):
+    return await get_image_thumb(post_id, page if p is None else p)
+
+
+@app.get("/api/image/{post_id}/full")
+async def get_long_image_full(post_id: str, page: int = 0, p=None):
+    return await get_image_preview(post_id, page if p is None else p)
+
+
 @app.get("/api/thumb/{post_id}")
 async def get_thumb(post_id: str):
     return await get_image_thumb(post_id)

frontend/app.js

@@ -200,12 +200,17 @@ function renderResults(data) {
     } 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-full="${esc(item.full_image_url)}"><img src="${esc(item.image_url)}" loading="lazy" alt="${esc(label)}"></button>`
+      ? `<button class="thumb" data-preview="${esc(item.preview_url || item.full_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}
-      <span class="result-link">${label}</span><br>${badge}
+      <div class="result-meta">
+        <span class="result-link">${label}</span>
+        ${download}
+      </div>
+      ${badge}
     </div>`
   }).join("")
   grid.querySelectorAll(".result-link").forEach(el => {
@@ -215,16 +220,17 @@ function renderResults(data) {
     })
   })
   grid.querySelectorAll(".thumb").forEach(el => {
-    el.addEventListener("click", () => openViewer(el.dataset.full))
+    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) {
+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()
@@ -234,6 +240,7 @@ function closeViewer() {
   $("#viewer").classList.add("hidden")
   $("#viewer").setAttribute("aria-hidden", "true")
   $("#viewer-img").src = ""
+  $("#viewer-download").href = ""
 }
 
 function applyViewerZoom() {

frontend/index.html

@@ -73,6 +73,7 @@
     <button id="viewer-zoom-out" class="btn-secondary">-</button>
     <span id="viewer-zoom">100%</span>
     <button id="viewer-zoom-in" class="btn-secondary">+</button>
+    <a id="viewer-download" class="btn-secondary" href="">Download</a>
     <button id="viewer-close" class="btn-secondary">Close</button>
   </div>
   <div id="viewer-stage">

frontend/style.css

@@ -16,7 +16,7 @@ input:focus, select:focus { outline: none; border-color: #6c63ff; }
 .btn-primary { background: #6c63ff; color: #fff; border: none; padding: .6rem 1.5rem; border-radius: 4px; cursor: pointer; font-size: .9rem; }
 .btn-primary:hover { background: #5a52d5; }
 .btn-primary:disabled { background: #444; cursor: not-allowed; }
-.btn-secondary { background: #2a2a3e; color: #ccc; border: 1px solid #444; padding: .5rem 1rem; border-radius: 4px; cursor: pointer; font-size: .85rem; }
+.btn-secondary { background: #2a2a3e; color: #ccc; border: 1px solid #444; padding: .5rem 1rem; border-radius: 4px; cursor: pointer; font-size: .85rem; text-decoration: none; }
 .btn-secondary:hover { background: #3a3a4e; }
 .btn-secondary:disabled { color: #666; cursor: not-allowed; }
 #submit-status { margin-top: 1rem; padding: .5rem; border-radius: 4px; font-size: .9rem; }
@@ -50,15 +50,18 @@ input:focus, select:focus { outline: none; border-color: #6c63ff; }
 #detail-api-url a { color: #6c63ff; }
 #pager { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; color: #888; font-size: .85rem; }
 
-#results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: .5rem; max-height: 70vh; overflow-y: auto; padding: .5rem 0; }
+#results-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; max-height: 70vh; overflow-y: auto; padding: .5rem 0; }
 .result-card { background: #1a1a2e; border: 1px solid #333; border-radius: 4px; padding: .5rem; text-align: center; font-size: .75rem; }
-.thumb { width: 144px; height: 144px; margin: 0 auto .4rem; display: flex; align-items: center; justify-content: center; background: #111; border: 0; border-radius: 3px; cursor: zoom-in; overflow: hidden; }
+.thumb { width: 100%; aspect-ratio: 1; margin: 0 auto .5rem; display: flex; align-items: center; justify-content: center; background: #111; border: 0; border-radius: 3px; cursor: zoom-in; overflow: hidden; }
 .thumb::after { content: "loading"; color: #444; font-size: .7rem; }
 .thumb-loaded::after { content: ""; }
-.thumb img { max-width: 144px; max-height: 144px; border-radius: 3px; object-fit: contain; }
+.thumb img { max-width: 100%; max-height: 100%; border-radius: 3px; object-fit: contain; }
 .thumb-error::after { content: "no thumb"; }
+.result-meta { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; }
 .result-link { color: #6c63ff; cursor: pointer; }
 .result-link:hover { text-decoration: underline; }
+.download-link { color: #ccc; border: 1px solid #444; border-radius: 3px; padding: .15rem .4rem; text-decoration: none; }
+.download-link:hover { color: #fff; border-color: #6c63ff; }
 .result-card .exif-badge { display: inline-block; padding: .1rem .4rem; border-radius: 3px; font-size: .7rem; margin-top: .25rem; }
 .exif-1 { background: #2d1f5e; color: #b39ddb; }
 .exif-2 { background: #1b3a1b; color: #81c784; }
@@ -86,3 +89,7 @@ input:focus, select:focus { outline: none; border-color: #6c63ff; }
 #viewer-zoom { min-width: 4rem; text-align: center; color: #ccc; font-size: .85rem; }
 #viewer-stage { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 1rem; }
 #viewer-img { max-width: none; max-height: none; transform-origin: top center; transition: transform .08s ease; }
+
+@media (max-width: 800px) {
+  #results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}