Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Pulse Translate</title> | |
| <link rel="stylesheet" href="/static/styles.css" /> | |
| </head> | |
| <body> | |
| <canvas id="bg-scene" aria-hidden="true"></canvas> | |
| <div class="bg-grid" aria-hidden="true"></div> | |
| <div class="bg-vignette" aria-hidden="true"></div> | |
| <main class="shell"> | |
| <section class="hero panel panel-hero"> | |
| <div class="hero-copy"> | |
| <p class="eyebrow">AI4Bharat Meeting Interpreter</p> | |
| <h1>Live voice translation for Indian language conversations.</h1> | |
| <p class="lede"> | |
| Record short microphone chunks in the browser, transcribe them on the backend, translate with AI4Bharat IndicTrans2, and play back spoken output when TTS is available. | |
| </p> | |
| <div class="hero-actions"> | |
| <button id="connect-btn" class="primary">Start live interpreter</button> | |
| <button id="mute-btn" class="secondary" disabled>Mute microphone</button> | |
| </div> | |
| </div> | |
| <div class="hero-side"> | |
| <div class="metric-card metric-strong"> | |
| <span>Backend</span> | |
| <strong id="backend-health">Checking...</strong> | |
| <small id="backend-mode">Unknown</small> | |
| </div> | |
| <div class="metric-row"> | |
| <div class="metric-card"> | |
| <span>Connection</span> | |
| <strong id="connection-status">Disconnected</strong> | |
| </div> | |
| <div class="metric-card"> | |
| <span>Status</span> | |
| <strong id="activity-status">Idle</strong> | |
| </div> | |
| </div> | |
| <p class="micro-copy">This build uses backend chunk translation with AI4Bharat IndicTrans2 instead of direct browser-to-model WebRTC.</p> | |
| </div> | |
| </section> | |
| <section class="panel control-panel"> | |
| <div class="panel-heading"> | |
| <div> | |
| <p class="eyebrow subtle">Interpreter Setup</p> | |
| <h2>Live session</h2> | |
| </div> | |
| </div> | |
| <div class="control-grid"> | |
| <label> | |
| <span>Your name</span> | |
| <input id="display-name" type="text" value="Meeting participant" /> | |
| </label> | |
| <label> | |
| <span>Backend URL</span> | |
| <input id="backend-url" type="text" placeholder="http://127.0.0.1:8000" /> | |
| </label> | |
| <label class="select-field"> | |
| <span>I speak</span> | |
| <div class="select-box"> | |
| <select id="source-lang"></select> | |
| <span class="select-arrow"></span> | |
| </div> | |
| </label> | |
| <label class="select-field"> | |
| <span>Translate to</span> | |
| <div class="select-box"> | |
| <select id="target-lang"></select> | |
| <span class="select-arrow"></span> | |
| </div> | |
| </label> | |
| </div> | |
| </section> | |
| <section class="dialogs"> | |
| <article class="dialog-card left-card"> | |
| <div class="dialog-header"> | |
| <strong>You said</strong> | |
| <span id="current-speaking-status">Waiting</span> | |
| </div> | |
| <p id="original-text">Your live transcript will appear here once the session starts.</p> | |
| </article> | |
| <article class="dialog-card right-card"> | |
| <div class="dialog-header"> | |
| <strong>Interpreter output</strong> | |
| <span id="translated-status">Waiting</span> | |
| </div> | |
| <p id="translated-text">Translated transcript will appear here after each audio chunk is processed.</p> | |
| </article> | |
| </section> | |
| <section class="room-panel"> | |
| <article class="panel room-card"> | |
| <h2>Live notes</h2> | |
| <div id="history" class="list-block"></div> | |
| </article> | |
| <article class="panel room-card"> | |
| <h2>Debug log</h2> | |
| <div id="log" class="log"></div> | |
| </article> | |
| </section> | |
| </main> | |
| <audio id="remote-audio" autoplay></audio> | |
| <script src="/static/app.js" defer></script> | |
| </body> | |
| </html> | |