Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DECLARE User Study</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <h1>DECLARE User Study</h1> | |
| <p class="sub">Speak the command shown below as naturally as you would to a real voice assistant. After each command, you'll be shown what the system understood, and asked whether it's correct.</p> | |
| <div id="error-banner" class="error-msg hidden"></div> | |
| <!-- CONSENT SCREEN --> | |
| <div id="consent-screen" class="card"> | |
| <h2 style="margin-top:0;">Before you begin</h2> | |
| <ul class="consent-list"> | |
| <li>Your spoken commands are transcribed by one of three ASR models per trial, chosen at random — you won't be told which.</li> | |
| <li><strong>Your recorded audio is used only to generate a transcript and is deleted immediately afterward. It is never stored, saved, or shared in any form.</strong></li> | |
| <li>We collect your gender, age group, and (optionally) first language to check whether system performance is consistent across groups. No other personal information is collected.</li> | |
| <li>Responses are logged under a random session ID, not your name.</li> | |
| </ul> | |
| <label class="field-label">Gender</label> | |
| <div class="radio-group" id="gender-group" data-name="gender"> | |
| <div class="radio-pill"><input type="radio" name="gender" id="g-female" value="Female"><label for="g-female">Female</label></div> | |
| <div class="radio-pill"><input type="radio" name="gender" id="g-male" value="Male"><label for="g-male">Male</label></div> | |
| <div class="radio-pill"><input type="radio" name="gender" id="g-nb" value="Non-binary"><label for="g-nb">Non-binary</label></div> | |
| <div class="radio-pill"><input type="radio" name="gender" id="g-na" value="Prefer not to say"><label for="g-na">Prefer not to say</label></div> | |
| </div> | |
| <label class="field-label">Age group</label> | |
| <div class="radio-group" id="age-group" data-name="age_group"> | |
| <div class="radio-pill"><input type="radio" name="age_group" id="a1" value="18–25"><label for="a1">18–25</label></div> | |
| <div class="radio-pill"><input type="radio" name="age_group" id="a2" value="26–35"><label for="a2">26–35</label></div> | |
| <div class="radio-pill"><input type="radio" name="age_group" id="a3" value="36–45"><label for="a3">36–45</label></div> | |
| <div class="radio-pill"><input type="radio" name="age_group" id="a4" value="46–60"><label for="a4">46–60</label></div> | |
| <div class="radio-pill"><input type="radio" name="age_group" id="a5" value="60+"><label for="a5">60+</label></div> | |
| <div class="radio-pill"><input type="radio" name="age_group" id="a6" value="Prefer not to say"><label for="a6">Prefer not to say</label></div> | |
| </div> | |
| <label class="field-label" for="lang-input">First language (optional)</label> | |
| <input id="lang-input" class="field-input" type="text" placeholder="e.g. Hindi, Bengali, English"> | |
| <label class="field-label">Where are you recording right now?</label> | |
| <p style="font-size:0.82rem; color:var(--ink-soft); margin:0 0 8px;">Since your audio is deleted right after transcription, this is the only record of background noise conditions for the analysis.</p> | |
| <div class="radio-group" id="env-group" data-name="environment"> | |
| <div class="radio-pill"><input type="radio" name="environment" id="e1" value="Indoor"><label for="e1">Indoor</label></div> | |
| <div class="radio-pill"><input type="radio" name="environment" id="e2" value="Outdoor"><label for="e2">Outdoor</label></div> | |
| <div class="radio-pill"><input type="radio" name="environment" id="e3" value="Not sure"><label for="e3">Not sure</label></div> | |
| </div> | |
| <label class="consent-check"> | |
| <input type="checkbox" id="consent-check"> | |
| I have read the above and agree to participate. | |
| </label> | |
| <button class="big-btn" id="start-btn">Start session</button> | |
| </div> | |
| <!-- TRIAL SCREEN --> | |
| <div id="trial-screen" class="card hidden"> | |
| <div class="progress-row"> | |
| <span class="progress-label" id="progress-label">COMMAND 1 OF 9</span> | |
| <div class="progress-bar"><div class="progress-fill" id="progress-fill" style="width:11%"></div></div> | |
| </div> | |
| <div class="prompt-eyebrow">Read this aloud</div> | |
| <p class="prompt-text" id="prompt-text">—</p> | |
| <div id="rec-zone" class="rec-zone"> | |
| <button class="rec-btn" id="rec-btn" aria-label="Start recording">●</button> | |
| <span class="rec-hint" id="rec-hint">Click to record</span> | |
| </div> | |
| <div id="analyzing-zone" class="hidden analyzing"> | |
| <div class="spinner"></div> | |
| <span>Routing to blind condition & analyzing…</span> | |
| </div> | |
| <div id="result-zone" class="hidden"> | |
| <div class="prediction-box"> | |
| <div class="prediction-field"> | |
| <span class="prediction-label">Command type (intent)</span> | |
| <span class="prediction-value" id="prediction-intent">—</span> | |
| </div> | |
| <div class="prediction-field"> | |
| <span class="prediction-label">Classifier of command (NER)</span> | |
| <span class="prediction-value" id="prediction-entity">—</span> | |
| </div> | |
| </div> | |
| <p class="timing-caption" id="timing-caption"></p> | |
| <div class="legend-box" id="legend-box"></div> | |
| <div class="judgement-block"> | |
| <p class="judgement-question">Was the command type correct?</p> | |
| <div class="radio-group" id="intent-judge-group"> | |
| <div class="radio-pill"><input type="radio" name="intent_judge" id="ij-yes" value="Yes"><label for="ij-yes">Yes</label></div> | |
| <div class="radio-pill"><input type="radio" name="intent_judge" id="ij-no" value="No"><label for="ij-no">No</label></div> | |
| </div> | |
| </div> | |
| <div class="judgement-block hidden" id="entity-judge-block"> | |
| <p class="judgement-question">Was the detected item correct?</p> | |
| <div class="radio-group" id="entity-judge-group"> | |
| <div class="radio-pill"><input type="radio" name="entity_judge" id="ej-yes" value="Yes"><label for="ej-yes">Yes</label></div> | |
| <div class="radio-pill"><input type="radio" name="entity_judge" id="ej-no" value="No"><label for="ej-no">No</label></div> | |
| </div> | |
| </div> | |
| <button class="big-btn" id="confirm-btn">Confirm & continue</button> | |
| </div> | |
| </div> | |
| <!-- UMUX FEEDBACK SCREEN --> | |
| <div id="umux-screen" class="card hidden"> | |
| <h2 style="margin-top:0;">Quick feedback</h2> | |
| <p class="sub">Before you go, please rate how much you agree with each statement about the system you just used (1 = Strongly disagree, 7 = Strongly agree).</p> | |
| <div id="umux-items"></div> | |
| <button class="big-btn" id="umux-submit-btn">Submit feedback</button> | |
| </div> | |
| <!-- END SCREEN --> | |
| <div id="end-screen" class="card hidden end-screen"> | |
| <h2>Thank you for participating!</h2> | |
| <p class="sub">Your responses have been recorded.</p> | |
| </div> | |
| </div> | |
| <script src="{{ url_for('static', filename='app.js') }}"></script> | |
| </body> | |
| </html> | |