Spaces:
Paused
Paused
File size: 3,866 Bytes
dedbd79 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Real-world Image-to-Video Survey</title>
<link rel="stylesheet" href="survey.css" />
</head>
<body>
<div class="bg-layer"></div>
<main class="app">
<header class="hero">
<div>
<h1>Real-world Image-to-Video Survey</h1>
<p class="subtitle">Compare two videos generated from the same image and select the better one.</p>
</div>
<div class="hero-badge">
<span id="progressText">0 / 0</span>
<div class="progress">
<div id="progressBar" class="progress-bar"></div>
</div>
</div>
</header>
<section id="intro" class="card">
<h2>Instruction</h2>
<div class="instruction">
<p>The image below is a <strong>real-world image</strong>. Please compare the two generated videos by considering:</p>
<ol>
<li><strong>Motion Naturalness:</strong> Is the movement physically plausible?</li>
<li><strong>Geometric Consistency:</strong> Is the 3D structure stable (no warping/distortion)?</li>
<li><strong>Visual Quality:</strong> Is the video realistic, sharp, and artifact-free?</li>
</ol>
<p><strong>Which video is better overall?</strong></p>
</div>
<div class="intro-grid">
<div>
<label for="participantId">Participant ID (optional)</label>
<input id="participantId" type="text" placeholder="e.g., P012" />
<p class="note">Selections are saved locally and can be downloaded as CSV/JSON.</p>
</div>
<div class="intro-actions">
<button id="startBtn" class="primary">Start New Session</button>
<button id="resumeBtn" class="ghost" hidden>Resume Saved Session</button>
</div>
</div>
<div id="manifestWarning" class="warning" hidden></div>
</section>
<section id="question" class="card hidden">
<div class="question-header">
<div>
<h2>Question <span id="questionNumber">1</span></h2>
<p class="muted">Compare the two videos using the criteria above.</p>
</div>
<div class="question-meta">
<span id="baselineBadge" class="badge"></span>
<span id="itemId" class="badge ghost"></span>
</div>
</div>
<div class="input-wrap">
<div class="input-label">Input Image</div>
<img id="inputImage" alt="Input image" />
</div>
<div class="video-grid">
<div class="video-panel" data-side="left">
<div class="video-label">Video A</div>
<video id="videoLeft" controls playsinline muted loop preload="metadata"></video>
<button id="chooseLeft" class="choose-btn">Choose Video A</button>
</div>
<div class="video-panel" data-side="right">
<div class="video-label">Video B</div>
<video id="videoRight" controls playsinline muted loop preload="metadata"></video>
<button id="chooseRight" class="choose-btn">Choose Video B</button>
</div>
</div>
<div class="nav">
<button id="prevBtn" class="ghost">Previous</button>
<button id="nextBtn" class="primary" disabled>Next</button>
</div>
</section>
<section id="done" class="card hidden">
<h2>All Done</h2>
<p class="muted">Thank you! Download your responses for analysis.</p>
<div id="summary" class="summary"></div>
<div class="done-actions">
<button id="downloadCsv" class="primary">Download CSV</button>
<button id="downloadJson" class="ghost">Download JSON</button>
<button id="newSession" class="ghost">Start New Session</button>
</div>
</section>
</main>
<script src="survey.js"></script>
</body>
</html>
|