Spaces:
Paused
Paused
| <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> | |