Spaces:
Sleeping
Sleeping
| // Floating relief overlays appended to <body> (extracted from Sidebar.js in H4): | |
| // #hud-crosshair — center-screen aiming reticle | |
| // #relief-coords — Z/X/Y coordinate readout pinned under the crosshair | |
| // #relief-hud — bottom-right tooltip with chunk/dim/value + export button | |
| // | |
| // These are driven from main.js (the render loop fills them via getElementById and | |
| // wires #relief-hud-export). This builder only creates and appends the DOM. | |
| /** | |
| * Create and append the crosshair, coordinate readout, and relief HUD to <body>. | |
| * @returns {void} | |
| */ | |
| export function buildReliefHUD() { | |
| // Crosshair rendering | |
| const crosshair = document.createElement('div'); | |
| crosshair.id = 'hud-crosshair'; | |
| crosshair.innerHTML = '<div></div>'; | |
| document.body.appendChild(crosshair); | |
| // Lectura de coordenadas Z/X/Y pegada a la mira (visible solo en modo Relieve al apuntar) | |
| const reliefCoords = document.createElement('div'); | |
| reliefCoords.id = 'relief-coords'; | |
| reliefCoords.style.cssText = ` | |
| position: fixed; | |
| top: calc(50% - 54px); | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: none; | |
| gap: 10px; | |
| padding: 4px 10px; | |
| background: oklch(from var(--color-neutral-950) l c h / 0.55); | |
| border: 1px solid var(--color-brand-border); | |
| border-radius: var(--radius-sm, 4px); | |
| font-family: var(--font-mono); | |
| font-size: var(--font-size-small); | |
| font-weight: 700; | |
| white-space: nowrap; | |
| z-index: 1600; | |
| pointer-events: none; | |
| backdrop-filter: blur(2px); | |
| `; | |
| reliefCoords.innerHTML = ` | |
| <span style="color:var(--color-brand-primary);">Z <span id="relief-coords-z" style="color:var(--color-neutral-50);">--</span></span> | |
| <span style="color:var(--color-semantic-error);">X <span id="relief-coords-x" style="color:var(--color-neutral-50);">--</span></span> | |
| <span style="color:var(--color-semantic-success);">Y <span id="relief-coords-y" style="color:var(--color-neutral-50);">--</span></span> | |
| `; | |
| document.body.appendChild(reliefCoords); | |
| // Relief HUD Tooltip Overlay (Appended to body, hidden by default) | |
| const reliefHUD = document.createElement('div'); | |
| reliefHUD.id = 'relief-hud'; | |
| reliefHUD.className = 'app-panel'; | |
| reliefHUD.style.cssText = ` | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| width: 320px; | |
| padding: var(--spacing-md); | |
| display: none; | |
| flex-direction: column; | |
| gap: var(--spacing-xs); | |
| z-index: 1500; | |
| pointer-events: none; | |
| font-family: var(--font-sans); | |
| transition: opacity var(--motion-fast) var(--motion-easing-standard); | |
| border: 1px solid var(--color-brand-border); | |
| `; | |
| reliefHUD.innerHTML = ` | |
| <div style="display:flex; justify-content:space-between; align-items:center;"> | |
| <span style="font-size: var(--font-size-small); font-weight:700; color:var(--color-brand-secondary);" title="Floating inspection panel for 3D relief coordinates and text">🏔️ SEMANTIC RELIEF</span> | |
| <span id="relief-hud-pin" style="display:none; font-size:var(--font-size-caption); font-weight:700; color:var(--color-semantic-error); font-family:var(--font-mono);" title="Inspection locked at current coordinates">📌 PINNED</span> | |
| </div> | |
| <div style="display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:var(--font-size-small); border-bottom:1px solid oklch(from var(--color-neutral-50) l c h / 0.05); padding-bottom:4px; margin-bottom:4px;"> | |
| <span title="Text fragment index along the Z axis">FRAGMENT (Z): <span id="relief-hud-chunk-idx" style="color:var(--color-neutral-50); font-weight:bold;">--</span></span> | |
| <span id="relief-hud-dim-container" title="Latent dimension index along the X axis">DIMENSION (X): <span id="relief-hud-dim-idx" style="color:var(--color-neutral-50); font-weight:bold;">--</span></span> | |
| </div> | |
| <div style="font-family:var(--font-mono); font-size:var(--font-size-small); margin-bottom:4px;"> | |
| <span title="Numeric vector activation value at this point">ACTIVATION (Y): <span id="relief-hud-val" style="font-weight:bold; color:var(--color-semantic-success);">0.00</span></span> | |
| </div> | |
| <div id="relief-hud-text" style="font-size: var(--font-size-body); color: var(--color-neutral-400); line-height: 1.4; font-style: italic; min-height: 38px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;" title="Preview of the text corresponding to this fragment"> | |
| Hover over a point to inspect its text fragment... | |
| </div> | |
| <button id="relief-hud-export" style="display:none; pointer-events:auto; cursor:pointer; margin-top:6px; width:100%; padding:8px 10px; font-family:var(--font-sans); font-size:var(--font-size-small); font-weight:700; color:var(--color-neutral-950); background:var(--color-brand-secondary); border:none; border-radius:var(--radius-sm, 4px);" title="Copy structured Markdown context for analysis in Gemini/ChatGPT"> | |
| 📤 Export dimension for LLM | |
| </button> | |
| <div id="relief-hud-hint" style="font-size:var(--font-size-caption); color:var(--color-neutral-500); margin-top:4px; font-style:italic;"> | |
| Click: pin/unpin · Key 'B': save bookmark · ESC: release cursor | |
| </div> | |
| `; | |
| document.body.appendChild(reliefHUD); | |
| // Floating PointerLock guideline banner | |
| const pointerlockGuideline = document.createElement('div'); | |
| pointerlockGuideline.id = 'pointerlock-guideline'; | |
| pointerlockGuideline.style.cssText = ` | |
| position: fixed; | |
| top: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: none; | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| background: oklch(from var(--color-neutral-950) l c h / 0.75); | |
| border: 1px solid var(--color-brand-border); | |
| border-radius: var(--radius-md, 6px); | |
| font-family: var(--font-sans); | |
| font-size: var(--font-size-small); | |
| color: var(--color-neutral-50); | |
| z-index: 2000; | |
| pointer-events: none; | |
| backdrop-filter: blur(4px); | |
| text-align: center; | |
| transition: opacity var(--motion-fast) var(--motion-easing-standard); | |
| `; | |
| pointerlockGuideline.innerText = "Camera Control Active. Press ESC to release cursor and interact with sidebar controls."; | |
| document.body.appendChild(pointerlockGuideline); | |
| } | |