Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Live Video Caption AI</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="video-container"> | |
| <video id="videoPlayer" controls></video> | |
| <div class="overlay-ui"> | |
| <div class="header"> | |
| <h1>Live Video Caption AI</h1> | |
| <p class="subtitle">Real-time captions powered by FastVLM</p> | |
| </div> | |
| <div class="upload-area" id="uploadArea"> | |
| <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> | |
| <polyline points="17 8 12 3 7 8"></polyline> | |
| <line x1="12" y1="3" x2="12" y2="15"></line> | |
| </svg> | |
| <h2>Upload Video</h2> | |
| <p>Drag and drop or click to browse</p> | |
| <input type="file" id="videoInput" accept="video/*" hidden> | |
| </div> | |
| <div class="controls" id="controls"> | |
| <button id="controlsToggle" class="controls-toggle"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <polyline points="6 9 12 15 18 9"></polyline> | |
| </svg> | |
| </button> | |
| <div class="controls-content" id="controlsContent"> | |
| <button id="processBtn" class="primary-btn"> | |
| <span class="btn-text">Start Live Captions</span> | |
| <div class="spinner"></div> | |
| </button> | |
| <button id="changeVideoBtn" class="secondary-btn">Change Video</button> | |
| <div class="settings"> | |
| <label class="setting-item"> | |
| <span>Device</span> | |
| <select id="deviceSelect"> | |
| <option value="cpu">CPU</option> | |
| <option value="webgpu" selected>GPU (WebGPU)</option> | |
| </select> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="live-caption" id="liveCaption"> | |
| <div class="caption-text" id="captionText"></div> | |
| </div> | |
| <div class="results" id="results"> | |
| <div class="results-header"> | |
| <h3>Caption History</h3> | |
| <div class="results-actions"> | |
| <button id="copyBtn" class="icon-btn" title="Copy"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> | |
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> | |
| </svg> | |
| </button> | |
| <button id="downloadBtn" class="icon-btn" title="Download"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> | |
| <polyline points="7 10 12 15 17 10"></polyline> | |
| <line x1="12" y1="3" x2="12" y2="15"></line> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="frame-captions" id="frameCaptions"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="module" src="index.js"></script> | |
| </body> | |
| </html> |