| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>SEMA Web Demo</title> |
| <link rel="stylesheet" href="/static/styles.css"> |
| </head> |
| <body> |
| <div class="page-shell"> |
| <header class="hero"> |
| <div class="hero-copy"> |
| <p class="eyebrow">SEMA — YOUR PROFESSIONAL ARCHERY COACH</p> |
| <h1>Understand your form, then answer every follow-up.</h1> |
| <p class="hero-text"> |
| Upload your archery video to get a professional movement-quality assessment, then keep asking for targeted coaching guidance and sport-specific knowledge. |
| </p> |
| </div> |
| <div class="hero-note"> |
| <p><strong>What SEMA Does</strong></p> |
| <p><strong>Movement Quality Assessment</strong><br>Detect key technical checkpoints and judge how well each part of the shot is executed.</p> |
| <p><strong>Knowledge-Augmented Analysis</strong><br>Retrieve domain knowledge and organize supporting evidence for follow-up answers.</p> |
| <p><strong>Interactive Coaching Q&A</strong><br>Keep asking about the assessment and get focused feedback for the next training step.</p> |
| </div> |
| </header> |
|
|
| <main class="grid"> |
| <section class="panel panel-upload"> |
| <div class="panel-head"> |
| <h2>1. Upload for Analysis</h2> |
| </div> |
|
|
| <form id="analyze-form" class="stack"> |
| <label class="field"> |
| <span>Inference Language</span> |
| <select id="language" name="language"> |
| <option value="en" selected>English</option> |
| <option value="zh">Chinese</option> |
| </select> |
| </label> |
|
|
| <label class="field upload-box"> |
| <span>Video File</span> |
| <input |
| id="video-file" |
| class="file-input-native" |
| name="file" |
| type="file" |
| accept="video/mp4,video/quicktime,video/x-matroska,video/webm,video/x-msvideo" |
| required |
| > |
| <div class="file-picker" aria-live="polite"> |
| <button id="file-trigger" class="file-trigger" type="button">Choose File</button> |
| <span id="file-name" class="file-name">No file chosen</span> |
| </div> |
| </label> |
|
|
| <button id="analyze-button" type="submit">Start Analysis</button> |
| </form> |
|
|
| <div id="status-card" class="status-card muted"> |
| <strong>Status</strong> |
| <p id="status-text">Waiting for upload.</p> |
| </div> |
| </section> |
|
|
| <section class="panel panel-result"> |
| <div class="panel-head"> |
| <h2>2. Assessment Results</h2> |
| <span id="job-id" class="mono"></span> |
| </div> |
|
|
| <div id="scores" class="scores-grid"></div> |
|
|
| <div class="result-block"> |
| <h3>Assessment Text</h3> |
| <pre id="assessment" class="answer-box empty">Visible after analysis completes.</pre> |
| </div> |
| </section> |
|
|
| <section class="panel panel-chat"> |
| <div class="panel-head"> |
| <h2>3. Ask Follow-Up Questions</h2> |
| </div> |
|
|
| <div id="chat-log" class="chat-log"> |
| <div class="message message-system">Once analysis finishes, you can continue the conversation with SEMA.</div> |
| </div> |
|
|
| <form id="chat-form" class="chat-form"> |
| <textarea id="question" rows="3" placeholder="For example: Why is my release hand unstable? What should I train next?" disabled></textarea> |
| <button id="chat-button" type="submit" disabled>Send Question</button> |
| </form> |
| </section> |
| </main> |
| </div> |
|
|
| <script src="/static/app.js"></script> |
| </body> |
| </html> |
|
|
