h3-console: 参考图加服务端缩略图 + 删除任务改为先取消底层再回收站

参考图列表/详情缩略图之前直接用原图（1-2MB/张），新增 GET /thumbs/{filename} 惰性生成 320px 长边的 JPEG 缩略图并落盘缓存，实测压缩到原图的0.6%；只重写本机 /assets/ 的展示用URL，job req 里喂给生成模型的原始URL不受影响。 DELETE /v1/videos/{id} 和 batch-delete 顺带改成先真正取消底层任务释放算力，再移入回收站，避免"删了但其实还在跑"。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KJEL5jqdZR1QPToULRaTAz

h3-console: 参考图加服务端缩略图 + 删除任务改为先取消底层再回收站
参考图列表/详情缩略图之前直接用原图（1-2MB/张），新增 GET /thumbs/{filename} 惰性生成 320px 长边的 JPEG 缩略图并落盘缓存，实测压缩到原图的0.6%；只重写本机 /assets/ 的展示用URL，job req 里喂给生成模型的原始URL不受影响。 DELETE /v1/videos/{id} 和 batch-delete 顺带改成先真正取消底层任务释放算力，再移入回收站，避免"删了但其实还在跑"。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KJEL5jqdZR1QPToULRaTAz
yibo
1 parent 3fd25a2b
Showing 3 changed files with 66 additions and 17 deletions
h3-console/API.md
h3-console/server.py
h3-console/static/index.html
@@ -71,10 +71,10 @@ token æ˜¯å¦å¼ºåˆ¶å–å†³äºŽéƒ¨ç½²æ—¶æ˜¯å¦è®¾äº† `H3_CONSOLE_AUTH_TOKEN` çŽ¯å¢ƒå
 | GET | `/v1/videos/{id}/comfy_history` | æŽ’æŸ¥ç”¨ï¼šåŽŸå§‹ ComfyUI æ‰§è¡Œè®°å½• |
 | POST | `/v1/videos/{id}/cancel` | å–æ¶ˆæŽ’é˜Ÿä¸çš„ä»»åŠ¡ / åœæ¢è¿è¡Œä¸çš„ä»»åŠ¡ |
 | POST | `/v1/videos/{id}/prioritize` | æ’é˜Ÿåˆ°æœ€å‰é¢ï¼ˆä»…æŽ’é˜Ÿä¸çš„ä»»åŠ¡ï¼‰ |
-| DELETE | `/v1/videos/{id}` | è½¯åˆ é™¤ï¼ˆç§»å…¥å›žæ”¶ç«™ï¼‰ |
+| DELETE | `/v1/videos/{id}` | å–æ¶ˆåº•å±‚ä»»åŠ¡ + ç§»å…¥å›žæ”¶ç«™ |
 | POST | `/v1/videos/{id}/restore` | ä»Žå›žæ”¶ç«™æ¢å¤ |
 | POST | `/v1/videos/batch-cancel` | **æ‰¹é‡**å–æ¶ˆ/åœæ¢ |
-| POST | `/v1/videos/batch-delete` | **æ‰¹é‡**è½¯åˆ é™¤ |
+| POST | `/v1/videos/batch-delete` | **æ‰¹é‡**å–æ¶ˆåº•å±‚ä»»åŠ¡ + ç§»å…¥å›žæ”¶ç«™ |
 | POST | `/v1/assets` | ä¸Šä¼ å‚è€ƒå›¾/å‚è€ƒè§†é¢‘/å‚è€ƒéŸ³é¢‘ï¼Œæ¢å–å¯ç”¨çš„ URL |
 | GET | `/v1/backends` | å¥åº·æ£€æŸ¥ + é˜Ÿåˆ—æ·±åº¦ + GPU æ˜¾å˜/åˆ©ç”¨çŽ‡ |
 | GET | `/v1/models` | æ”¯æŒçš„åˆ†è¾¨çŽ‡æ¡£ä½ï¼ˆå«å®žæµ‹å¸§æ•°ä¸Šé™ï¼‰ |
@@ -284,9 +284,9 @@ query å‚æ•°ï¼ˆå…¨éƒ¨å¯é€‰ï¼‰ï¼š
 å“åº”é‡Œçš„ `queue_position` æ˜¯æ’é˜ŸåŽçš„æ–°ä½ç½®ã€‚
-### `DELETE /v1/videos/{id}` â€” è½¯åˆ é™¤
+### `DELETE /v1/videos/{id}` â€” åˆ é™¤
-ç§»å…¥å›žæ”¶ç«™ï¼ˆ`deleted_at` è®¾æˆå½“å‰æ—¶é—´ï¼‰ã€‚**ä¸å½±å“åº•å±‚ä»»åŠ¡æœ¬èº«**â€”â€”å¦‚æžœè¿™æ¡ä»»åŠ¡è¿˜åœ¨æŽ’é˜Ÿ/è¿è¡Œä¸ï¼Œå®ƒä¼šç…§å¸¸è·‘å®Œï¼Œåªæ˜¯ä»Ž console çš„ä¸»åˆ—è¡¨é‡Œæ¶ˆå¤±äº†ã€‚çœŸè¦è¿žåº•å±‚è®¡ç®—ä¸€èµ·åœæŽ‰ï¼Œé…åˆ `cancel` ä¸€èµ·è°ƒï¼ˆé¡ºåºä¸å½±å“ç»“æžœï¼‰ã€‚
+å…ˆæŒ‰ `cancel` çš„è¯ä¹‰çœŸæ£å–æ¶ˆåº•å±‚ä»»åŠ¡ï¼ˆé‡Šæ”¾ç®—åŠ›ï¼›ä»»åŠ¡å·²ç»æ˜¯ç»ˆæ€åˆ™è·³è¿‡è¿™æ¥ï¼‰ï¼Œå†ç§»å…¥å›žæ”¶ç«™ï¼ˆ`deleted_at` è®¾æˆå½“å‰æ—¶é—´ï¼‰ã€‚ä¸åˆ ç£ç›˜æ–‡ä»¶ã€‚
 ```json
 {"id": "xxx", "deleted": true}
@@ -338,7 +338,7 @@ query å‚æ•°ï¼ˆå…¨éƒ¨å¯é€‰ï¼‰ï¼š
 }
 ```
-`batch-cancel` å¯¹æ‰¹é‡é‡Œæ··è¿›çš„ `running` ä»»åŠ¡ä¸€æ ·ä¼šè§¦å‘ç¡¬é‡å¯ï¼ˆè§ä¸Šé¢å•æ¡ cancel çš„è¯´æ˜Žï¼‰â€”â€”å¦‚æžœæ‰¹é‡ç›®æ ‡é‡Œå¯èƒ½åŒ…å«æ£åœ¨è¿è¡Œçš„ä»»åŠ¡ï¼Œå…ˆç”¨ç›é€‰æ¡ä»¶æŠŠ `status` é™å®šæˆ `queued`ï¼Œé¿å…è¯¯åœæ£åœ¨è·‘çš„ä»»åŠ¡ã€‚
+`batch-cancel` å’Œ `batch-delete`ï¼ˆå†…éƒ¨ä¹Ÿä¼šå…ˆ cancelï¼‰å¯¹æ‰¹é‡é‡Œæ··è¿›çš„ `running` ä»»åŠ¡ä¸€æ ·ä¼šè§¦å‘ç¡¬é‡å¯ï¼ˆè§ä¸Šé¢å•æ¡ cancel çš„è¯´æ˜Žï¼‰â€”â€”å¦‚æžœæ‰¹é‡ç›®æ ‡é‡Œå¯èƒ½åŒ…å«æ£åœ¨è¿è¡Œçš„ä»»åŠ¡ï¼Œå…ˆç”¨ç›é€‰æ¡ä»¶æŠŠ `status` é™å®šæˆ `queued`ï¼Œé¿å…è¯¯åœæ£åœ¨è·‘çš„ä»»åŠ¡ã€‚
 ---
@@ -622,8 +622,16 @@ async def list_videos(limit: int = 20, offset: int = 0, trash: bool = False, q: 
     return {"jobs": [_row_view(r) for r in rows], "total": total}
-def _delete_job(jid: str) -> dict:
-    """真正干活的软删除逻辑，单条/批量共用，理由同 _cancel_job。"""
+async def _delete_job(jid: str) -> dict:
+    """真正干活的删除逻辑，单条/批量共用。先调 _cancel_job 让底层任务真正停掉、释放算力，
+    任务已经是终态（done/failed/cancelled）时 _cancel_job 会 409——这种情况没算力可释放，
+    忽略这个 409 继续走软删除；其它取消失败（比如后端连不上）直接把错误透传出去，不能在
+    算力还没释放的时候就把任务从列表里挪走，制造"删了但其实还在跑"的假象。"""
+    try:
+        await _cancel_job(jid)
+    except HTTPException as e:
+        if e.status_code != 409:
+            raise
     with db() as con:
         cur = con.execute("UPDATE jobs SET deleted_at=? WHERE id=? AND deleted_at IS NULL", (time.time(), jid))
     if cur.rowcount == 0:
@@ -633,8 +641,8 @@ def _delete_job(jid: str) -&gt; dict:
 @api.delete("/v1/videos/{jid}")
 async def delete_video(jid: str):
-    """软删除：只挪出主列表，不碰 gateway/api.py 上的任务本身（可能还在跑），不删磁盘文件。"""
-    return _delete_job(jid)
+    """删除：先真正取消底层任务（释放算力），再移入回收站。不删磁盘文件。"""
+    return await _delete_job(jid)
 @api.post("/v1/videos/{jid}/restore")
@@ -702,14 +710,13 @@ async def batch_cancel_videos(body: dict):
 @api.post("/v1/videos/batch-delete")
 async def batch_delete_videos(body: dict):
-    """批量软删除（移入回收站），语义同单条 DELETE /v1/videos/{jid}——只是把任务从列表里挪走，
-    不取消底层计算；真要连底层任务一起停掉，配合上面的 batch-cancel 一起调（谁先谁后不影响
-    结果，两个操作互不冲突）。"""
+    """批量删除，语义同单条 DELETE /v1/videos/{jid}：逐条先取消底层任务（释放算力），
+    再移入回收站。"""
     ids = _resolve_batch_targets(body)
     succeeded, failed = [], []
     for jid in ids:
         try:
-            succeeded.append(_delete_job(jid)["id"])
+            succeeded.append((await _delete_job(jid))["id"])
         except HTTPException as e:
             failed.append({"id": jid, "error": e.detail})
     return {"requested": len(ids), "succeeded": succeeded, "failed": failed}
@@ -919,6 +926,39 @@ async def newtask_page():
     return render_index()
+# 2026-09-09：列表/详情页缩略图之前直接用参考图原图（1-2MB/张），加缓存头只解决了
+# "重复"下载，首次打开还是要传那么大。这里给图片单独开一条缩略图路径——注意跟 /assets/*
+# 是两个独立的东西：job req 里存的 first_frame_url/reference_image_urls 一个字节都不动，
+# 那是喂给生成模型的真实输入，缩略图只是前端展示用，绝不能让前端不小心把这条 URL 存回
+# req 里、拿小图去生成视频。thumb_url() 是纯字符串规则从 /assets/{filename} 反推
+# /thumbs/{filename}，不改 upload_asset 返回值，老任务的原始 URL 一样能配出缩略图。
+# 首次访问时惰性生成、落盘缓存，之后跟原图一样标 immutable——参考图传上来就不会再变。
+THUMB_DIR = ASSETS / "_thumbs"
+THUMB_DIR.mkdir(exist_ok=True)
+THUMB_MAX_SIDE = 320  # 列表缩略图 88x118 CSS px、详情页预览 160x160 CSS px，320 留够 2x retina
+
+
+@router.get("/thumbs/{filename}")
+async def get_thumb(filename: str):
+    src = (ASSETS / filename).resolve()
+    if ASSETS.resolve() not in src.parents or not src.is_file():
+        raise HTTPException(404, "无此文件")
+    thumb_path = THUMB_DIR / (src.stem + ".jpg")
+    if not thumb_path.exists():
+        try:
+            img = Image.open(src)
+            img.thumbnail((THUMB_MAX_SIDE, THUMB_MAX_SIDE))
+            tmp_path = thumb_path.with_suffix(".tmp")
+            img.convert("RGB").save(tmp_path, "JPEG", quality=82)
+            tmp_path.replace(thumb_path)  # 原子改名，防止并发首次请求读到写一半的文件
+        except Exception:
+            # 不是图片能解码的文件（参考视频/音频也存在 assets/ 里，理论上不会被前端拿来
+            # 调这个接口，这里只是防御性兜底）——原样把源文件当"缩略图"返回。
+            return FileResponse(src, headers={"Cache-Control": "public, max-age=31536000, immutable"})
+    return FileResponse(thumb_path, media_type="image/jpeg",
+                         headers={"Cache-Control": "public, max-age=31536000, immutable"})
+
+
 # BASE_PATH 留空时这个前缀是空字符串，router 上的路径原样挂到 app 根上，行为跟以前
 # 直接用 @app.xxx 一模一样；非空时（比如 "/console"）整体套一层前缀，一次性生效，
 # 不用每个路由自己拼。
@@ -296,6 +296,15 @@ function h3Token() {
   }
   return t;
 }
+// 2026-09-09：只重写本机 /assets/ 的上传文件到服务端缩略图路径（/thumbs/{filename}，见
+// server.py），外部图床 URL（"外部 URL 不经过 /v1/assets 转存"那条路径）原样返回——
+// 后端没有那些文件，生不出缩略图。绝不改 req 里存的原始 URL 本身，只用于展示。
+function thumbUrl(u) {
+  if (!u) return u;
+  const i = u.indexOf('/assets/');
+  if (i === -1) return u;
+  return u.slice(0, i) + '/thumbs/' + u.slice(i + '/assets/'.length);
+}
 function h3FileUrl(path) {
   // <video src>/<a href download> 是浏览器原生请求，加不上 Authorization 头，
   // 只能把 token 拼进查询串——server.py 的 _require_token 两种都认。
@@ -842,8 +851,8 @@ function jobKindLabel(req) {
 }
 // 已完成的任务直接拿结果视频当封面（preload=metadata 只取第一帧，不下载整段）；
-// 还没完成的用输入的首帧图/参考图占位，好歹能看出这条任务在做什么；两者都没有
-// （纯文生视频还没跑完）就退化成显示任务类型文字。
+// 还没完成的用输入的首帧图/参考图占位（缩略图版本，见 thumbUrl），好歹能看出这条任务在
+// 做什么；两者都没有（纯文生视频还没跑完）就退化成显示任务类型文字。
 // ponytail: 列表里同时出现很多条"已完成"任务时，浏览器会并发发起同等数量的
 // metadata 探测请求，量大可能变卡——真遇到再改成后端生成静态封面图。
 function jobThumbHtml(j) {
@@ -853,7 +862,7 @@ function jobThumbHtml(j) {
     return `<video src="${src}" muted preload="metadata"></video>`;
   }
   const imgUrl = req.first_frame_url || (req.reference_image_urls || [])[0];
-  if (imgUrl) return `<img src="${imgUrl}" loading="lazy">`;
+  if (imgUrl) return `<img src="${thumbUrl(imgUrl)}" loading="lazy">`;
   return `<div class="jr-thumb-empty">${jobKindLabel(req)}</div>`;
 }
@@ -1135,7 +1144,7 @@ async function refreshDetail() {
     const viewThumb = (mediaHtml, label, u) =>
       `<span class="thumb-wrap"><span class="thumb-name" title="${thumbCap(label,u)}">${thumbCap(label,u)}</span><span class="thumb-media">${mediaHtml}</span></span>`;
     const imgTags = imgs.map(([label, u]) =>
-      viewThumb(`<a href="${u}" target="_blank" title="${label}，点击查看大图"><img src="${u}" title="${label}"></a>`, label, u)).join('');
+      viewThumb(`<a href="${u}" target="_blank" title="${label}，点击查看大图"><img src="${thumbUrl(u)}" title="${label}"></a>`, label, u)).join('');
     const videoTags = (req.reference_video_urls || []).map((u, i) =>
       viewThumb(`<video controls src="${u}" title="参考视频${i+1}"></video>`, '参考视频'+(i+1), u)).join('');
     const audioTags = (req.reference_audio_urls || []).map((u, i) =>