pacuaviva/image-composition-human-eval
0
1<!doctype html>2<html lang="en">3<head>4 <meta charset="utf-8">5 <meta name="viewport" content="width=device-width, initial-scale=1">6 <title>Image Edit Evaluation</title>7 <link rel="stylesheet" href="/styles.css?v=15">8</head>9<body>10 <header class="topbar">11 <strong>Image Edit Evaluation</strong>12 <span id="progress">Not started</span>13 <div class="topbar-actions">14 <span id="save-status" aria-live="polite"></span>15 <button id="guide-button" type="button" title="Replay the interface guide" hidden><span aria-hidden="true">?</span> Guide</button>16 </div>17 </header>18 19 <main>20 <section id="start-view" class="start-view">21 <div class="start-panel">22 <h1>Evaluate composed image edits</h1>23 <p class="start-lead">Each item shows two image-edit demonstrations and a model attempt to compose them into a single edit on a new image. Your task is to judge how successful that composition is.</p>24 25 <div class="scale-guide" aria-label="Rating scale">26 <div><strong>1</strong><span>Criterion is not met</span></div>27 <div><strong>3</strong><span>Criterion is partly met</span></div>28 <div><strong>5</strong><span>Criterion is fully met</span></div>29 </div>30 <p class="scale-help">Use <strong>2</strong> or <strong>4</strong> for intermediate judgments.</p>31 <p class="tour-intro">When you start, a brief guided tour will introduce the evaluation interface.</p>32 <p class="participation-note">The study contains 60 items. You may skip an item or save and resume later. Please do not include personal information in optional notes.</p>33 34 <form id="start-form" class="participant-form">35 <label for="rater-code">Participant code</label>36 <div class="participant-code-row">37 <input id="rater-code" autocomplete="off" spellcheck="false" aria-describedby="participant-help participant-status">38 <button id="new-code-button" type="button">New code</button>39 </div>40 <p id="participant-help" class="participant-help">This anonymous code and your progress are saved in this browser so you can resume later on this device.</p>41 <p id="participant-status" class="participant-status" role="status" aria-live="polite"></p>42 <button id="start-button" type="submit">Start evaluation</button>43 <p id="start-error" class="error" role="alert"></p>44 </form>45 </div>46 </section>47 48 <section id="study-view" class="study-layout" hidden>49 <div class="image-workspace">50 <section class="image-section" aria-label="Edit demonstrations">51 <h2>Edit demonstrations</h2>52 <div class="demonstration-grid">53 <figure data-tour-target="edit-a-source"><figcaption><span class="caption-badge">A</span><span>Source</span></figcaption><img id="a-source" alt="A Source"></figure>54 <figure data-tour-target="edit-a-target"><figcaption><span class="caption-badge">A</span><span>Target</span></figcaption><img id="a-target" alt="A Target"></figure>55 <figure data-tour-target="edit-b-source"><figcaption><span class="caption-badge">B</span><span>Source</span></figcaption><img id="b-source" alt="B Source"></figure>56 <figure data-tour-target="edit-b-target"><figcaption><span class="caption-badge">B</span><span>Target</span></figcaption><img id="b-target" alt="B Target"></figure>57 </div>58 </section>59 60 <section class="image-section evaluation-section" aria-label="Image to evaluate">61 <h2>Evaluation</h2>62 <div class="evaluation-grid">63 <figure data-tour-target="query"><figcaption><span class="caption-badge">Query</span></figcaption><img id="query" alt="Query"></figure>64 <figure class="output" data-tour-target="output"><figcaption><span class="caption-badge">Output</span></figcaption><img id="output" alt="Output"></figure>65 </div>66 </section>67 </div>68 69 <aside class="rating-panel" aria-label="Ratings">70 <header class="rating-panel-header">71 <h2>Ratings</h2>72 </header>73 <div class="unclear-row">74 <label><input type="checkbox" id="unclear-a"> A demonstration unclear</label>75 <label><input type="checkbox" id="unclear-b"> B demonstration unclear</label>76 </div>77 78 <form id="rating-form">79 <div id="questions" class="questions"></div>80 <div class="comment-section">81 <label for="item-comment">Optional note</label>82 <textarea id="item-comment" maxlength="1000" rows="2" placeholder="Anything unusual or ambiguous about this result?"></textarea>83 </div>84 <div class="form-footer">85 <p id="form-error" class="error" role="alert"></p>86 <div class="actions">87 <button id="previous-button" type="button">Previous</button>88 <button id="skip-button" type="button">Skip</button>89 <button id="save-exit-button" type="button">Save and exit</button>90 <button id="next-button" type="submit">Save and next</button>91 </div>92 </div>93 </form>94 </aside>95 </section>96 97 <section id="paused-view" class="complete-view" hidden>98 <div>99 <h1>Progress saved</h1>100 <p>You can resume later in this browser.</p>101 <button id="resume-button" type="button">Resume</button>102 </div>103 </section>104 105 <section id="complete-view" class="complete-view" hidden>106 <div>107 <h1>Evaluation complete</h1>108 <p>Your responses have been saved.</p>109 </div>110 </section>111 </main>112 113 <div id="tour-overlay" class="tour-overlay" hidden aria-hidden="true">114 <svg id="tour-spotlight" class="tour-spotlight" aria-hidden="true">115 <defs>116 <mask id="tour-mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">117 <rect id="tour-mask-base" x="0" y="0" fill="white"></rect>118 <g id="tour-mask-holes"></g>119 </mask>120 </defs>121 <rect id="tour-shade" x="0" y="0" fill="rgba(12, 17, 22, 0.76)" mask="url(#tour-mask)"></rect>122 <g id="tour-outlines"></g>123 </svg>124 <section id="tour-popover" class="tour-popover" role="dialog" aria-modal="true" aria-labelledby="tour-title" aria-describedby="tour-description" tabindex="-1">125 <div id="tour-progress" class="tour-progress"></div>126 <h2 id="tour-title"></h2>127 <div id="tour-description" class="tour-description"></div>128 <p id="tour-error" class="tour-error" role="alert"></p>129 <footer class="tour-footer">130 <button id="tour-back-button" type="button">Back</button>131 <span class="tour-footer-spacer"></span>132 <button id="tour-next-button" class="tour-primary" type="button">Next</button>133 <button id="tour-close-button" class="tour-close-button" type="button" title="Close guide" aria-label="Close guide"><span aria-hidden="true">×</span></button>134 </footer>135 </section>136 </div>137 138 <script src="/config.js?v=1"></script>139 <script src="/app.js?v=17"></script>140</body>141</html>142