新增「框選辨識主體」功能，降低相似照片互相認錯（掃描頁 v9）

根本原因：
MindAR 以整張照片的特徵點做比對，同場地、同構圖的照片
（例如活動現場連拍）大部分特徵點落在共同背景（場地線條、
天花板、浮水印），會穩定地互相認錯、播出別張的影片。
調高 warmupTolerance 實測無效：錯誤目標是持續穩定匹配，
嚴格化只是更慢地確認錯的答案。

影響：
背景相似的多組照片無法在同一個特徵檔中正確區分。

修法：
1. 管理頁每組配對新增「框主體」：在照片上拖曳框選最有辨識度
   的區域（相對座標存於 pairs.json，照片檔不動），編譯時只用
   框內影像產生特徵。框的長寬下限 15%，實測框太小（僅臉部
   特寫）會特徵點不足而完全偵測不到。
2. server 新增 PUT /api/pairs/:id/crop 儲存裁切框；更動後
   自動標記「有變更尚未編譯」。
3. 掃描頁依 mapping 中的 aspect 與 crop 將影片平面放大平移，
   辨識目標雖只是照片的一塊，影片仍精確覆蓋整張照片
   （已用假相機截圖驗證幾何）。無裁切的舊資料行為不變。

已知限制：兩張照片若互相拍到彼此的主體（同兩人、同場地的
連拍），框選也無法完全區分——框內容本來就存在於另一張裡。
這種情況仍建議更換其中一張照片。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

public/index.html

@@ -78,7 +78,7 @@
     <p id="status">載入中…</p>
     <button id="startBtn" hidden>開始掃描</button>
     <p class="hint">按下開始後，將相機對準已登錄的照片，<br>對應的影片就會覆蓋在照片上播放。</p>
-    <p class="hint" style="font-size:11px">v8</p>
+    <p class="hint" style="font-size:11px">v9</p>
   </div>
   <button id="stopBtn" title="停止">✕</button>
   <a id="dlBtn" title="下載影片" download>⬇</a>
@@ -209,12 +209,24 @@ function buildScene(version, entries) {
     const anchor = document.createElement('a-entity');
     anchor.setAttribute('mindar-image-target', 'targetIndex: ' + t.index);
 
-    // MindAR 的目標寬度固定為 1，用照片長寬比讓影片剛好蓋住整張照片
+    // MindAR 的目標寬度固定為 1（辨識目標＝編譯輸入的那塊影像）。
+    // 沒裁切時目標就是整張照片，影片平面直接用照片長寬比；
+    // 有框選主體時目標只是照片的一塊，要按裁切框把影片平面放大並平移，
+    // 讓影片仍然剛好覆蓋整張照片（座標換算：1 目標單位 = 裁切框寬）
+    const aspect = t.aspect || 1;
+    const crop = t.crop;
+    let pw = 1, ph = aspect, px = 0, py = 0;
+    if (crop && crop.w > 0 && crop.h > 0) {
+      pw = 1 / crop.w;
+      ph = aspect / crop.w;
+      px = (0.5 - crop.x - crop.w / 2) / crop.w;
+      py = -(0.5 - crop.y - crop.h / 2) * aspect / crop.w;
+    }
     const plane = document.createElement('a-video');
     plane.setAttribute('src', '#vid-' + t.index);
-    plane.setAttribute('width', '1');
-    plane.setAttribute('height', String(t.aspect || 1));
-    plane.setAttribute('position', '0 0 0');
+    plane.setAttribute('width', String(pw));
+    plane.setAttribute('height', String(ph));
+    plane.setAttribute('position', `${px} ${py} 0`);
     anchor.appendChild(plane);
 
     let isFound = false;