Upload folder using huggingface_hub

web/app.js

@@ -664,13 +664,15 @@ function drawHeadingArrows(svg, mk, pos) {
     if (!n || !n.ground_headings || !n.ground_headings.length) return;
     var p = pos[n.label];
     if (!p) return;
-    var active = groundView[pair[0]] || 0;
+    // 四个朝向的图片现在同时显示，所以箭头地位平等——不再有"当前朝向"。
+    // 只有鼠标悬在某张图片上时，对应的那支才放大加亮。
+    var lit = LIT[pair[0]];
 
     n.ground_headings.forEach(function (h, k) {
       if (h == null) return;
       var th = (Number(h) % 360 + 360) % 360 * Math.PI / 180;
       var dx = Math.sin(th), dy = -Math.cos(th);
-      var on = k === active;
+      var on = k === lit;
       var r0 = 7.5, r1 = on ? 22 : 14;          // 起点让开节点圆点
       var x0 = p[0] + dx * r0, y0 = p[1] + dy * r0;
       var x1 = p[0] + dx * r1, y1 = p[1] + dy * r1;
@@ -703,14 +705,17 @@ function drawHeadingArrows(svg, mk, pos) {
         'stroke-linejoin': 'round', 'paint-order': 'stroke',
       }));
       var t = mk('title', {});
-      t.textContent = headingLabel(h) + (on ? '（当前街景）' : '（点击切到该朝向）');
+      t.textContent = headingLabel(h) + ' 街景（点击放大）';
       gg.appendChild(t);
+      // 点箭头 = 放大那个方向的街景；悬停则反向点亮对应的缩略图
       gg.onclick = function (ev) {
         ev.stopPropagation();
-        groundView[pair[0]] = k;
-        drawGroundImages();
-        drawGraph();
+        var tile = $(pair[0] + 'Grid').children[k];
+        var img = tile && tile.querySelector && tile.querySelector('img');
+        if (img) { $('lightboxImage').src = img.src; $('lightbox').classList.add('open'); }
       };
+      gg.onmouseenter = function () { setLit(pair[0], k); };
+      gg.onmouseleave = function () { setLit(pair[0], -1); };
       svg.appendChild(gg);
     });
   });
@@ -809,10 +814,6 @@ function drawAdjacency() {
   });
 }
 
-// 每个 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)
@@ -820,41 +821,81 @@ function headingLabel(h) {
   return names[Math.round(d / 45) % 8] + ' ' + Math.round(d) + '°';
 }
 
+/* 四个朝向同时铺开。
+ *
+ * 旧版一次只显示一张，下面一排按钮来回切——要看全一个路口得点三次，
+ * 而且切走之后就记不住上一张长什么样。现在四张并排、各自标方位，
+ * 不用做任何选择就能一眼看完。
+ *
+ * 悬停某一张会点亮地图上对应的箭头（见 drawHeadingArrows），
+ * 「图片里的这条路」和「图上的这个方向」就对上了。
+ */
+var LIT = { anchor: -1, target: -1 };       // 当前悬停的朝向下标，-1 = 无
+
+/* 双向联动的唯一入口：改 LIT 就同时更新缩略图的边框和地图上的箭头。
+   两边各写一次会漏——比如从箭头移开时忘了取消图片的高亮。 */
+function setLit(role, k) {
+  if (LIT[role] === k) return;
+  LIT[role] = k;
+  var grid = $(role + 'Grid');
+  if (grid) {
+    Array.prototype.forEach.call(grid.children, function (el, i) {
+      if (el.classList) el.classList.toggle('lit', i === k);
+    });
+  }
+  drawGraph();
+}
+
 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 || '无走廊')
-         + (assets.length > 1 ? ' · ' + (i + 1) + '/' + assets.length : ''))
+      ? (n.lat.toFixed(6) + ', ' + n.lon.toFixed(6) + ' · ' +
+         (n.corridor_name_auto || '无走廊') +
+         (assets.length ? ' · ' + assets.length + ' 个朝向' : ''))
       : '—';
-    var img = $(role + 'Image');
-    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;           // 只有一张就不占一行
+    var grid = $(role + 'Grid');
+    grid.innerHTML = '';
+    grid.className = 'ground-grid' + (assets.length === 1 ? ' single' : '');
+    if (!assets.length) {
+      grid.innerHTML = '<div class="ground-empty">该节点没有街景</div>';
+      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(); drawGraph(); };
-      strip.appendChild(b);
+      b.className = 'ground-tile';
+      b.setAttribute('aria-label', '放大 ' + headingLabel(headings[k]) + ' 方向的街景');
+      var img = document.createElement('img');
+      img.src = '/asset?path=' + encodeURIComponent(rel);
+      img.alt = headingLabel(headings[k]) + ' 街景';
+      img.loading = 'lazy';
+      var tag = document.createElement('b');
+      tag.textContent = headingLabel(headings[k]);
+      b.appendChild(img);
+      b.appendChild(tag);
+      b.onclick = function () {
+        $('lightboxImage').src = img.src;
+        $('lightbox').classList.add('open');
+      };
+      // 悬停联动：图片 <-> 地图上的箭头
+      b.onmouseenter = function () { setLit(role, k); };
+      b.onmouseleave = function () { setLit(role, -1); };
+      grid.appendChild(b);
     });
   }
+
   if (sel.kind === 'node') {
     $('anchorKind').textContent = 'Node';
     $('targetCard').style.display = 'none';
+    LIT.target = -1;
     fill('anchor', sel.key[1]);
   } else {
     $('anchorKind').textContent = 'Source';
@@ -864,19 +905,23 @@ function drawGroundImages() {
   }
 }
 
-// H 把当前可见的街景卡一起翻一个朝向——比较一对节点时两边保持同一朝向。
+/* 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();
-  drawGraph();            // 图上的朝向箭头跟着换高亮
+  var role = 'anchor', label = S.selected.key[1];
+  var n = S.scene.nodes.find(function (x) { return x.label === label; });
+  var assets = (n && n.ground_assets) || [];
+  if (!assets.length) return;
+  var next = (LIT[role] + step) % assets.length;
+  if (next < 0) next += assets.length;
+  LIT[role] = next;
+  var tile = $(role + 'Grid').children[next];
+  if (tile && tile.querySelector) {
+    var img = tile.querySelector('img');
+    if (img) { $('lightboxImage').src = img.src; $('lightbox').classList.add('open'); }
+  }
+  drawGraph();
 }
 
 function pickNode(n) {
@@ -1100,14 +1145,6 @@ function boot() {
   $('helpButton').onclick = function () { $('helpDialog').showModal(); };
   $('helpClose').onclick = function () { $('helpDialog').close(); };
   $('lightbox').onclick = function () { this.classList.remove('open'); };
-  Array.prototype.forEach.call(document.querySelectorAll('.ground-stage'), function (b) {
-    b.onclick = function () {
-      var img = b.querySelector('img');
-      if (!img || !img.getAttribute('src')) return;
-      $('lightboxImage').src = img.src;
-      $('lightbox').classList.add('open');
-    };
-  });
 
   document.addEventListener('keydown', function (ev) {
     var tag = (ev.target.tagName || '').toLowerCase();

web/index.html

@@ -217,10 +217,7 @@
             <div class="node-label anchor-label" id="anchorBadge">—</div>
             <span class="image-kind" id="anchorKind">Node</span>
           </div>
-          <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="ground-grid" id="anchorGrid" aria-label="四个朝向的街景"></div>
           <div class="image-caption mono" id="anchorCaption">—</div>
         </article>
         <article class="image-card ground-card" id="targetCard">
@@ -228,10 +225,7 @@
             <div class="node-label target-label" id="targetBadge">—</div>
             <span class="image-kind">Target</span>
           </div>
-          <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="ground-grid" id="targetGrid" aria-label="四个朝向的街景"></div>
           <div class="image-caption mono" id="targetCaption">—</div>
         </article>
       </div>
@@ -290,7 +284,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>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

@@ -292,7 +292,7 @@ kbd {
 .scene-metrics span { display: block; color: var(--faint); font: 600 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
 .scene-metrics strong { font: 600 15px var(--display); }
 
-.evidence-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(260px, 380px); gap: 14px; align-items: start; }
+.evidence-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(280px, 440px); gap: 14px; align-items: start; }
 .image-card { border: 1px solid var(--line); background: var(--panel); }
 .image-card-head { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-bottom: 1px solid var(--line-soft); }
 .image-card-head.compact { padding: 6px 9px; }
@@ -314,8 +314,6 @@ kbd {
 .image-stage { display: block; width: 100%; padding: 0; border: 0; background: #0b0e0d; position: relative; overflow: hidden; }
 .image-stage > img { display: block; width: 100%; height: 100%; object-fit: cover; }
 .satellite-stage { aspect-ratio: 1/1; cursor: crosshair; }
-.ground-stage { aspect-ratio: 16/8.3; cursor: zoom-in; }
-.ground-stage:hover > img { filter: brightness(1.06); }
 /* .street-map 有 z-index:1 而 .graph-svg 没有，于是电子地图模式下
    瓦片整个盖在图上——节点和边全看不见。给 SVG 更高的层级。 */
 .graph-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
@@ -335,18 +333,45 @@ 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); }
+/* 街景四朝向方格 ------------------------------------------------------
+ * 一个 pano 有 4 个朝向。旧版一次只显示一张、下面一排按钮来回切——
+ * 要看全一个路口得点三次，还得记住刚才那张是什么样。现在四张并排，
+ * 各自标出方位，一眼看完。
+ *
+ * 源图是 512x512 的正方形，旧版按 16:8.3 裁成信箱形，上下都切掉了。
+ * 方格用 1:1，反而看得更全。
+ */
+.ground-grid {
+  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
+  background: var(--line-soft); border-top: 1px solid var(--line-soft);
+}
+.ground-grid:empty { display: none; }
+/* 只有一张时（旧包没有 heading 列）不必占两格 */
+.ground-grid.single { grid-template-columns: 1fr; }
+
+.ground-tile {
+  position: relative; display: block; padding: 0; border: 0;
+  background: #0b0e0d; cursor: zoom-in; overflow: hidden; aspect-ratio: 1/1;
+}
+.ground-tile > img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.ground-tile:hover > img { filter: brightness(1.08); }
+.ground-tile:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
+
+/* 方位标签压在图上：图本身已经很小，再单占一行就没地方了 */
+.ground-tile b {
+  position: absolute; left: 0; top: 0; padding: 2px 5px;
+  background: rgba(8,12,11,.78); color: var(--paper);
+  font: 700 9px var(--mono); letter-spacing: .06em;
+  border-bottom-right-radius: var(--radius);
+}
+/* 悬停时同时点亮地图上对应的箭头（drawGraph 里加 .arrow-lit） */
+.ground-tile:hover b { background: var(--signal); color: var(--ink); }
+.ground-tile.lit b { background: var(--signal); color: var(--ink); }
+
+.ground-empty {
+  grid-column: 1 / -1; padding: 18px 10px; text-align: center;
+  color: var(--faint); font: 600 10px var(--mono);
+}
 
 .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; }