Add first-person folding evidence preview

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

index.html

@@ -119,6 +119,14 @@
       align-items: end;
       box-shadow: inset 0 0 0 1px rgba(183,242,255,.08), inset 0 -70px 80px rgba(24,78,91,.14);
     }
+    .evidence-window::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      pointer-events: none;
+      background: linear-gradient(180deg, rgba(2,8,11,.08) 24%, rgba(2,8,11,.3) 57%, rgba(2,8,11,.94) 100%);
+    }
     .evidence-window::before {
       content: "";
       position: absolute;
@@ -130,12 +138,16 @@
       right: -82px;
       box-shadow: 0 0 0 34px rgba(83,217,245,.025), 0 0 0 68px rgba(83,217,245,.018);
     }
-    .scene-glyph { position: absolute; inset: 0; }
-    .surface-line { position: relative; z-index: 2; font: 400 clamp(23px, 2.3vw, 38px)/1.05 var(--serif); max-width: 90%; }
+    .evidence-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; filter: saturate(.76) brightness(.76) contrast(1.08); opacity: .9; }
+    .evidence-preview[hidden] { display: none; }
+    .scene-glyph { position: absolute; inset: 0; z-index: 2; opacity: .16; transition: opacity .25s; }
+    .evidence-window:not(.has-preview) .scene-glyph { opacity: .78; }
+    .surface-line { position: relative; z-index: 3; font: 400 clamp(21px, 2vw, 32px)/1.06 var(--serif); max-width: 92%; text-shadow: 0 2px 18px #02080b; }
     .surface-line span { transition: color .35s, background .35s; }
     .surface-line .hot { color: var(--signal-soft); }
-    .framecode { position: absolute; top: 14px; left: 16px; color: rgba(183,242,255,.45); font-size: 9px; letter-spacing: .12em; }
-    .scope-line { position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: rgba(183,242,255,.1); }
+    .framecode { position: absolute; z-index: 3; top: 14px; left: 16px; color: rgba(183,242,255,.74); font-size: 9px; letter-spacing: .12em; text-shadow: 0 1px 8px #02080b; }
+    .preview-kind { position: absolute; z-index: 3; top: 14px; right: 16px; color: rgba(183,242,255,.64); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 8px #02080b; }
+    .scope-line { position: absolute; z-index: 4; bottom: 0; left: 0; height: 2px; width: 100%; background: rgba(183,242,255,.1); }
     .scope-line::after { content: ""; display: block; height: 100%; width: var(--progress, 0%); background: var(--signal); box-shadow: 0 0 12px rgba(83,217,245,.48); transition: width 1.1s cubic-bezier(.22,.8,.3,1); }
     .evidence-meta { margin-top: auto; padding-top: 20px; display: grid; gap: 9px; font-size: 10px; }
     .meta-row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
@@ -286,7 +298,7 @@
   <header class="shell topbar">
     <div class="mark"><span class="mark-glyph">U</span><span>UniversalLabeler</span></div>
     <div class="top-center">Loss-resistant annotation translation</div>
-    <div class="top-right"><span class="status-dot" aria-hidden="true"></span><span>v1.0.3 / Public spec</span></div>
+    <div class="top-right"><span class="status-dot" aria-hidden="true"></span><span>v1.0.4 / Public spec</span></div>
   </header>
 
   <main>
@@ -300,7 +312,9 @@
         <section class="panel source-panel" aria-label="Source evidence">
           <div class="panel-label"><span>01 / Observe</span><span id="source-locale">EN source</span></div>
           <div class="evidence-window">
+            <img class="evidence-preview" id="evidence-preview" src="../assets/evidence-fold-towel-v1.png" alt="Synthetic first-person preview of two hands folding a pale blue towel on a dark table">
             <div class="framecode" id="framecode">FRAME 01:00:01.000—01:00:08.000</div>
+            <div class="preview-kind" id="preview-kind">synthetic visual preview</div>
             <svg class="scene-glyph" viewBox="0 0 420 260" aria-hidden="true">
               <g fill="none" stroke="rgba(183,242,255,.24)" stroke-width="1.4">
                 <path d="M38 190H382M94 190v42M330 190v42"/>
@@ -391,7 +405,7 @@
   <footer>
     <div class="footer-inner">
       <div class="footer-title">Meaning,<br>packed.</div>
-      <div class="footer-meta">UNIVERSAL LABELER / RELEASE 1.0.3<br>5 HUMAN LANGUAGES · 22 WORLD DIMENSIONS<br><a href="https://huggingface.co/datasets/itspublu/UniversalLabeler">VIEW DATA + SCHEMAS ↗</a></div>
+      <div class="footer-meta">UNIVERSAL LABELER / RELEASE 1.0.4<br>5 HUMAN LANGUAGES · 22 WORLD DIMENSIONS<br><a href="https://huggingface.co/datasets/itspublu/UniversalLabeler">VIEW DATA + SCHEMAS ↗</a></div>
     </div>
   </footer>
 
@@ -399,24 +413,28 @@
     const scenes = [
       {
         name: "fold_towel", source: "Fold the towel on the table with both hands.", hot: "towel",
+        preview: "../assets/evidence-fold-towel-v1.png",
         environment: "indoor · laundry area", duration: "7.00 s · episode_clock", claims: 10,
         values: { action: "fold", agent: "human performer", roles: "left stabilizes · right acts", object: "towel_01 · patient", place: "table · laundry area", before: "unfolded · dry", after: "folded · dry", time: "1.00—8.00 s", outcome: "success", evidence: "RGB · hand pose · narration" },
         text: { en: "Fold the towel on the table with both hands.", zh: "用双手在桌上把毛巾叠好。", tl: "Tiklupin ang tuwalya sa mesa gamit ang dalawang kamay.", es: "Dobla la toalla sobre la mesa con ambas manos.", hi: "दोनों हाथों से मेज़ पर तौलिया मोड़ें।" }
       },
       {
         name: "open_jar", source: "Hold the jar with the left hand and unscrew the lid with the right.", hot: "unscrew",
+        preview: null,
         environment: "indoor · kitchen counter", duration: "4.20 s · episode_clock", claims: 11,
         values: { action: "unscrew", agent: "human performer", roles: "left stabilizes · right rotates", object: "lid_01 · patient", place: "jar · kitchen counter", before: "jar sealed", after: "jar open", time: "12.30—16.50 s", outcome: "success", evidence: "RGB · hand pose · object track" },
         text: { en: "Hold the jar with the left hand and unscrew the lid with the right.", zh: "左手扶稳罐子，右手拧开盖子。", tl: "Hawakan ang garapon sa kaliwang kamay at pihitin ang takip gamit ang kanan.", es: "Sujeta el frasco con la izquierda y desenrosca la tapa con la derecha.", hi: "बाएँ हाथ से जार को थामें और दाएँ हाथ से ढक्कन खोलें।" }
       },
       {
         name: "place_mug", source: "Place the blue mug upright on the upper shelf using the right hand.", hot: "upper shelf",
+        preview: null,
         environment: "indoor · storage cabinet", duration: "2.80 s · episode_clock", claims: 10,
         values: { action: "place", agent: "human performer", roles: "right acts · left idle", object: "blue_mug_01 · patient", place: "upper_shelf · destination", before: "held · tilted", after: "supported · upright", time: "21.10—23.90 s", outcome: "stable placement", evidence: "RGB · depth · object pose" },
         text: { en: "Place the blue mug upright on the upper shelf using the right hand.", zh: "用右手把蓝色杯子直立放到上层架子上。", tl: "Ilagay nang patayo ang asul na tasa sa itaas na estante gamit ang kanang kamay.", es: "Coloca la taza azul en posición vertical sobre el estante superior con la mano derecha.", hi: "दाएँ हाथ से नीले मग को ऊपरी शेल्फ़ पर सीधा रखें।" }
       },
       {
         name: "slice_tomato", source: "Stabilize the tomato with the left hand and slice it with the knife.", hot: "knife",
+        preview: null,
         environment: "indoor · food prep station", duration: "5.60 s · episode_clock", claims: 12,
         values: { action: "slice", agent: "human performer", roles: "left stabilizes · right cuts", object: "tomato_01 · patient", place: "cutting_board · support", before: "whole tomato", after: "separated slices", time: "31.00—36.60 s", outcome: "cut completed", evidence: "RGB · contact · temporal span" },
         text: { en: "Stabilize the tomato with the left hand and slice it with the knife.", zh: "左手扶稳番茄，用刀将它切片。", tl: "Hawakan nang matatag ang kamatis sa kaliwang kamay at hiwain ito gamit ang kutsilyo.", es: "Sujeta el tomate con la mano izquierda y córtalo en rodajas con el cuchillo.", hi: "बाएँ हाथ से टमाटर को स्थिर रखें और चाकू से उसके टुकड़े काटें।" }
@@ -488,6 +506,18 @@
       document.querySelector("#environment").textContent = scene.environment;
       document.querySelector("#time-scope").textContent = scene.duration;
       document.querySelector("#framecode").textContent = `EVENT / ${scene.name.toUpperCase()}`;
+      const preview = document.querySelector("#evidence-preview");
+      const previewWindow = document.querySelector(".evidence-window");
+      if (scene.preview) {
+        preview.src = scene.preview;
+        preview.hidden = false;
+        previewWindow.classList.add("has-preview");
+        document.querySelector("#preview-kind").textContent = "synthetic visual preview";
+      } else {
+        preview.hidden = true;
+        previewWindow.classList.remove("has-preview");
+        document.querySelector("#preview-kind").textContent = "semantic schematic";
+      }
       document.querySelector("#claim-count").textContent = scene.claims;
       document.querySelector(".core-count").textContent = `${scene.claims} / ${scene.claims} claims`;
       document.querySelector("#represented").textContent = `${scene.claims} / ${scene.claims}`;