Upload folder using huggingface_hub

README.md

@@ -26,7 +26,10 @@ license: mit
   <span style="color:#b8a2e0">紫=桥接边</span>，白色加粗虚线=高花费边。
   `B` 切换电子地图，`E` 切换沿路走线/直线。
 - **右栏**：选中节点或边的完整属性与自动判定信号。
+- **街景朝向**：每个 pano 有 4 张街景，图下方一排按钮按罗盘顺时针列出
+  （`NE 40°`、`SE 130°`…），点一下换朝向。`H` 键下一个、`Shift`+`H` 上一个；
+  选中一条边时两侧会同步翻，方便对同朝向比较。
 
 图片存在配套的私有 Dataset 里，由 CDN 按需分发。
 
-建图规则见仓库的 `GRAPH_RULES.md`。
+建图规则见 `GRAPH_RULES.md`（在源仓库里，**不随本 Space 一起上传**）。

app.py

@@ -5,8 +5,9 @@
 三栏布局、J/K 键盘导航、底图切换、邻接矩阵。区别只有一个——**去掉了全部写入**：
 没有判定按钮、没有保存、没有新增边，后端也没有对应的接口。
 
-架构：FastAPI 提供静态页面与只读 API，Gradio 挂在 /gradio（HF Spaces 的
-gradio SDK 需要一个可挂载的 Blocks，同时它也作为无 JS 时的兜底视图）。
+架构：FastAPI 提供静态页面与只读 API，HF Spaces 用 docker SDK 跑。
+曾经在 /gradio 挂过一个 Gradio Blocks 当兜底视图，已移除——它只是一段
+带链接的 Markdown，却把 gradio 拖进了镜像依赖。
 
 图片来源两种，按需切换：
 - 本地包：SETVL_PACKAGE 指向 prepare.py 的产出目录
@@ -23,7 +24,6 @@ import threading
 from pathlib import Path
 from typing import Any, Dict, List, Optional
 
-import gradio as gr
 from fastapi import FastAPI, HTTPException, Query
 from fastapi.responses import FileResponse, JSONResponse, RedirectResponse
 
@@ -65,6 +65,22 @@ def con() -> sqlite3.Connection:
     return c
 
 
+_HAS_HEADING: Optional[bool] = None
+
+
+def ground_has_heading(c: sqlite3.Connection) -> bool:
+    """旧包的 ground_index 只有 (panoid, rel)，没有 heading 列。
+
+    重新 prepare 过的包才有。这里探一次并记住，免得每个节点都查一次
+    pragma；旧包降级成「只有一张街景」而不是 500。
+    """
+    global _HAS_HEADING
+    if _HAS_HEADING is None:
+        cols = {r[1] for r in c.execute("PRAGMA table_info(ground_index)")}
+        _HAS_HEADING = "heading" in cols
+    return _HAS_HEADING
+
+
 def asset_path(rel: str) -> Optional[Path]:
     """包内相对路径 -> 本地文件。数据集模式下按需从 CDN 拉取并缓存。"""
     if not rel or ".." in rel:
@@ -268,12 +284,23 @@ def scene(scene_id: str) -> JSONResponse:
         "SELECT * FROM edge WHERE scene_id=? ORDER BY source_label, target_label",
         (scene_id,))]
     effective(nodes, edges)
-    # 街景路径：打包时建的索引，运行时猜不出文件名（含 alt/year/heading）
+    # 街景路径：打包时建的索引，运行时猜不出文件名（含 alt/year/heading）。
+    # 每个 pano 有 4 个朝向，全部返回；按 heading 排序让前端的顺序稳定。
+    sql = ("SELECT rel, heading FROM ground_index WHERE panoid=?"
+           if ground_has_heading(c) else
+           "SELECT rel, NULL FROM ground_index WHERE panoid=?")
+
+    def order(row) -> tuple:
+        # 文件名里的 heading 有负角（-140 等），按原值排出来的是 SW/NW/NE/SE。
+        # 归一到 [0,360) 再排，朝向条就是正北起顺时针，和地图对得上。
+        h = row[1]
+        return (1, 0.0, row[0]) if h is None else (0, (float(h) % 360 + 360) % 360, row[0])
+
     for n in nodes:
-        row = c.execute("SELECT rel FROM ground_index WHERE panoid=? LIMIT 1",
-                        (n["panoid"],)).fetchone()
-        n["ground_asset"] = row[0] if row else None
-        n["ground_assets"] = [row[0]] if row else []
+        rows = sorted(c.execute(sql, (n["panoid"],)).fetchall(), key=order)
+        n["ground_assets"] = [r[0] for r in rows]
+        n["ground_headings"] = [r[1] for r in rows]
+        n["ground_asset"] = rows[0][0] if rows else None
     return JSONResponse({"scene": dict(s), "nodes": nodes, "edges": edges,
                          "asset": {"satellite": dict(s)["satellite_path"]}})
 
@@ -292,26 +319,7 @@ def serve_asset(path: str = Query(...)) -> FileResponse:
     return FileResponse(p)
 
 
-# ---------------------------------------------------------------- Gradio 兜底
-
-def _gradio_fallback() -> gr.Blocks:
-    st = None
-    try:
-        st = stats_payload()
-    except Exception:
-        pass
-    with gr.Blocks(title="SetVL Node Graph Viewer") as demo:
-        if st:
-            gr.Markdown(
-                f"# SetVL Node Graph Viewer\n\n"
-                f"{st['scenes']:,} 场景 · {st['nodes']:,} 节点 · {st['edges']:,} 边\n\n"
-                f"**[→ 打开浏览器界面](/)**")
-        else:
-            gr.Markdown("# SetVL Node Graph Viewer\n\n数据库未就绪。")
-    return demo
-
-
-app = gr.mount_gradio_app(api, _gradio_fallback(), path="/gradio")
+app = api
 
 
 if __name__ == "__main__":

graph.sqlite

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:58a07b075f692f69317cc1956f4eff308e6ca3c112d711c38cbb32f6b195f721
+size 153534464

requirements.txt

@@ -1,5 +1,3 @@
 fastapi>=0.115
 uvicorn[standard]>=0.30
-gradio>=5.0
-pillow>=10.0
 huggingface_hub>=0.25

web/app.js

@@ -513,22 +513,48 @@ function drawAdjacency() {
   });
 }
 
-function groundUrl(panoid) {
-  // 街景文件名带朝向，这里只用节点坐标做占位；真实图由 /asset 白名单服务。
-  return null;
+// 每个 role（anchor/target）当前看的是第几个朝向。
+// 换节点时保留同一个下标，这样连按 J/K 浏览时朝向不会跳来跳去。
+var groundView = { anchor: 0, target: 0 };
+
+function headingLabel(h) {
+  if (h == null) return '—';
+  var d = ((+h % 360) + 360) % 360;          // 文件名里有负角，先归一到 [0,360)
+  var names = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
+  return names[Math.round(d / 45) % 8] + ' ' + Math.round(d) + '°';
 }
+
 function drawGroundImages() {
   var sel = S.selected;
   if (!sel || !S.scene) return;
   function fill(role, label) {
     var n = S.scene.nodes.find(function (x) { return x.label === label; });
     $(role + 'Badge').textContent = label || '—';
+    var assets = (n && n.ground_assets) || [];
+    var headings = (n && n.ground_headings) || [];
+    var i = Math.min(groundView[role] || 0, Math.max(assets.length - 1, 0));
+    groundView[role] = i;
     $(role + 'Caption').textContent = n
-      ? (n.lat.toFixed(6) + ', ' + n.lon.toFixed(6) + ' · ' + (n.corridor_name_auto || '无走廊'))
+      ? (n.lat.toFixed(6) + ', ' + n.lon.toFixed(6) + ' · ' + (n.corridor_name_auto || '无走廊')
+         + (assets.length > 1 ? ' · ' + (i + 1) + '/' + assets.length : ''))
       : '—';
     var img = $(role + 'Image');
-    if (n && n.ground_asset) img.src = '/asset?path=' + encodeURIComponent(n.ground_asset);
+    if (assets[i]) img.src = '/asset?path=' + encodeURIComponent(assets[i]);
     else { img.removeAttribute('src'); }
+
+    var strip = $(role + 'Strip');
+    strip.innerHTML = '';
+    if (assets.length < 2) return;           // 只有一张就不占一行
+    assets.forEach(function (rel, k) {
+      var b = document.createElement('button');
+      b.type = 'button';
+      b.textContent = headingLabel(headings[k]);
+      b.className = k === i ? 'active' : '';
+      b.setAttribute('role', 'tab');
+      b.setAttribute('aria-selected', k === i ? 'true' : 'false');
+      b.onclick = function () { groundView[role] = k; drawGroundImages(); };
+      strip.appendChild(b);
+    });
   }
   if (sel.kind === 'node') {
     $('anchorKind').textContent = 'Node';
@@ -542,6 +568,20 @@ function drawGroundImages() {
   }
 }
 
+// H 把当前可见的街景卡一起翻一个朝向——比较一对节点时两边保持同一朝向。
+function cycleGround(step) {
+  if (!S.selected || !S.scene) return;
+  var labels = S.selected.kind === 'node'
+    ? [['anchor', S.selected.key[1]]]
+    : [['anchor', S.selected.key[1]], ['target', S.selected.key[2]]];
+  labels.forEach(function (pair) {
+    var n = S.scene.nodes.find(function (x) { return x.label === pair[1]; });
+    var len = ((n && n.ground_assets) || []).length;
+    if (len > 1) groundView[pair[0]] = ((groundView[pair[0]] + step) % len + len) % len;
+  });
+  drawGroundImages();
+}
+
 function pickNode(n) {
   S.selected = { kind: 'node', scene_id: S.scene.scene.scene_id,
                  key: [S.scene.scene.scene_id, n.label] };
@@ -763,6 +803,7 @@ function boot() {
     else if (k === ']') { page(1); ev.preventDefault(); }
     else if (k === 'q') { setMode(S.mode === 'queue' ? 'scenes' : 'queue'); ev.preventDefault(); }
     else if (k === 'e') { setEdgeMode(S.edgeMode === 'road' ? 'straight' : 'road'); ev.preventDefault(); }
+    else if (k === 'h') { cycleGround(ev.shiftKey ? -1 : 1); ev.preventDefault(); }
   });
 }
 document.addEventListener('DOMContentLoaded', boot);

web/index.html

@@ -195,6 +195,7 @@
           <button type="button" class="image-stage ground-stage" data-role="anchor" aria-label="放大街景">
             <img id="anchorImage" alt="ground view">
           </button>
+          <div class="heading-strip" id="anchorStrip" role="tablist" aria-label="街景朝向"></div>
           <div class="image-caption mono" id="anchorCaption">—</div>
         </article>
         <article class="image-card ground-card" id="targetCard">
@@ -205,6 +206,7 @@
           <button type="button" class="image-stage ground-stage" data-role="target" aria-label="放大街景">
             <img id="targetImage" alt="ground view">
           </button>
+          <div class="heading-strip" id="targetStrip" role="tablist" aria-label="街景朝向"></div>
           <div class="image-caption mono" id="targetCaption">—</div>
         </article>
       </div>
@@ -263,6 +265,7 @@
       <kbd>K</kbd><span>队列上一条</span>
       <kbd>B</kbd><span>切换卫星图 / 电子地图</span>
       <kbd>E</kbd><span>切换边的画法：沿路走线 / 直线</span>
+      <kbd>H</kbd><span>下一个街景朝向（<kbd>Shift</kbd>+<kbd>H</kbd> 上一个）</span>
       <kbd>[</kbd> <kbd>]</kbd><span>列表上一页 / 下一页</span>
       <kbd>Q</kbd><span>切换「全部场景」/「带信号的」</span>
       <kbd>?</kbd><span>打开本帮助</span>

web/styles.css

@@ -231,6 +231,19 @@ kbd {
 .map-controls { display: flex; border: 1px solid var(--line); }
 .map-controls button { background: transparent; border: 0; width: 22px; cursor: pointer; color: var(--muted); font: 700 12px var(--mono); }
 .map-controls button:hover { color: var(--signal); }
+/* 街景朝向切换条：一个 pano 有 4 个朝向，全部列出来可点 */
+.heading-strip {
+  display: flex; gap: 1px; border-top: 1px solid var(--line-soft);
+  background: var(--line-soft);
+}
+.heading-strip:empty { display: none; }
+.heading-strip button {
+  flex: 1; background: var(--panel); border: 0; padding: 4px 0; cursor: pointer;
+  color: var(--faint); font: 700 9px var(--mono); letter-spacing: .06em;
+}
+.heading-strip button:hover { color: var(--cyan); }
+.heading-strip button.active { background: var(--signal); color: var(--ink); }
+
 .image-caption { min-height: 34px; padding: 8px 11px; display: flex; justify-content: space-between; gap: 10px; color: var(--faint); border-top: 1px solid var(--line-soft); font: 600 9px var(--mono); }
 .image-caption.mono { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }