| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Video Comparison</title> |
| <style> |
| body { font-family: sans-serif; margin: 10px; background: #1a1a1a; color: #eee; overflow: hidden; height: 100vh; display: flex; flex-direction: column; } |
| h1 { text-align: center; margin: 5px 0; font-size: 20px; } |
| .nav { text-align: center; margin: 5px 0; } |
| .nav button { font-size: 14px; padding: 4px 12px; margin: 0 4px; cursor: pointer; } |
| .info { text-align: center; margin: 5px 0; font-size: 12px; color: #aaa; } |
| .container { display: grid; gap: 8px; flex: 1; overflow: hidden; } |
| .panel { text-align: center; overflow: hidden; display: flex; flex-direction: column; } |
| .panel h3 { margin: 0 0 4px 0; font-size: 12px; color: #aaa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; } |
| video { width: 100%; height: 100%; object-fit: contain; background: #000; min-height: 0; } |
| .prompt { text-align: center; font-size: 16px; margin: 5px 0; } |
| .config { text-align: center; margin: 5px 0; } |
| .config .folder-row { margin: 3px 0; } |
| .config input { width: 350px; padding: 3px 8px; font-size: 13px; } |
| .config button { padding: 3px 10px; margin: 0 4px; cursor: pointer; } |
| </style> |
| </head> |
| <body> |
| <h1>Video Comparison</h1> |
| <div class="config" id="config"> |
| <div class="folder-row"><input type="text" value="default_mxfp8_hw_attn_mxfp8_linear" placeholder="Folder path"> <button onclick="removeFolder(this)">✕</button></div> |
| <div class="folder-row"><input type="text" value="default_mxfp8_linear_only" placeholder="Folder path"> <button onclick="removeFolder(this)">✕</button></div> |
| <div style="margin-top:10px"> |
| <button onclick="addFolder()">+ Add Folder</button> |
| <label>Cols: <input id="cols" type="number" value="2" min="1" max="4" style="width:40px"></label> |
| <button onclick="applyDirs()">Apply</button> |
| </div> |
| </div> |
| <div class="nav"> |
| <button onclick="prev()">← Prev</button> |
| <span id="counter"></span> |
| <button onclick="next()">Next →</button> |
| <button id="blindBtn" onclick="toggleBlind()">🙈 Blind Mode</button> |
| </div> |
| <div class="prompt" id="prompt"></div> |
| <div class="container" id="container"></div> |
| <div class="info">Arrow keys to navigate. Videos autoplay muted.</div> |
|
|
| <script> |
| const videos = [ |
| "a bicycle gliding through a snowy field-0.mp4", |
| "a bicycle leaning against a tree-0.mp4", |
| "a bicycle slowing down to stop-0.mp4", |
| "a person drinking coffee in a cafe-0.mp4", |
| "a person eating a burger-0.mp4", |
| "a person giving a presentation to a room full of colleagues-0.mp4", |
| "a person playing guitar-0.mp4", |
| "a person swimming in ocean-0.mp4", |
| "a person walking in the snowstorm-0.mp4", |
| "a person washing the dishes-0.mp4" |
| ]; |
| |
| let dirs = []; |
| let blind = false; |
| let idx = 0; |
| |
| function getDirInputs() { |
| return document.querySelectorAll('#config .folder-row input'); |
| } |
| |
| function addFolder() { |
| const row = document.createElement('div'); |
| row.className = 'folder-row'; |
| row.innerHTML = '<input type="text" value="" placeholder="Folder path"> <button onclick="removeFolder(this)">✕</button>'; |
| document.querySelector('#config > div:last-child').before(row); |
| } |
| |
| function removeFolder(btn) { |
| const rows = document.querySelectorAll('#config .folder-row'); |
| if (rows.length <= 2) return; |
| btn.parentElement.remove(); |
| } |
| |
| function applyDirs() { |
| dirs = Array.from(getDirInputs()).map(el => el.value.replace(/\/?$/, "/")); |
| buildPanels(); |
| load(); |
| } |
| |
| function buildPanels() { |
| const container = document.getElementById('container'); |
| const cols = parseInt(document.getElementById('cols').value) || 2; |
| container.style.gridTemplateColumns = `repeat(${cols}, 1fr)`; |
| container.innerHTML = ''; |
| dirs.forEach((dir, i) => { |
| const panel = document.createElement('div'); |
| panel.className = 'panel'; |
| panel.innerHTML = `<h3>${dir.replace(/\/$/, "")}</h3><video controls muted autoplay loop></video>`; |
| container.appendChild(panel); |
| }); |
| if (blind) { |
| document.querySelectorAll('.panel h3').forEach(el => el.style.visibility = 'hidden'); |
| } |
| } |
| |
| function load() { |
| const name = videos[idx]; |
| const vids = document.querySelectorAll('.panel video'); |
| dirs.forEach((dir, i) => { if (vids[i]) vids[i].src = dir + name; }); |
| document.getElementById("prompt").textContent = name.replace("-0.mp4", ""); |
| document.getElementById("counter").textContent = `${idx + 1} / ${videos.length}`; |
| } |
| |
| function next() { idx = (idx + 1) % videos.length; load(); } |
| function prev() { idx = (idx - 1 + videos.length) % videos.length; load(); } |
| |
| function toggleBlind() { |
| blind = !blind; |
| document.querySelectorAll('.panel h3').forEach(el => el.style.visibility = blind ? 'hidden' : 'visible'); |
| document.getElementById('config').style.display = blind ? 'none' : ''; |
| document.getElementById('blindBtn').textContent = blind ? '👁 Reveal' : '🙈 Blind Mode'; |
| } |
| |
| document.addEventListener("keydown", e => { |
| if (e.key === "ArrowRight") next(); |
| if (e.key === "ArrowLeft") prev(); |
| }); |
| |
| applyDirs(); |
| </script> |
| </body> |
| </html> |
|
|
