Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>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>Video Caption AI</h1> | |
| <p class="subtitle">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="processBtn" class="primary-btn"> | |
| <span class="btn-text">Generate Captions</span> | |
| <div class="spinner"></div> | |
| </button> | |
| <div class="settings"> | |
| <label class="setting-item"> | |
| <span>Frames to analyze</span> | |
| <select id="frameCount"> | |
| <option value="4">4 frames</option> | |
| <option value="8" selected>8 frames</option> | |
| <option value="12">12 frames</option> | |
| <option value="16">16 frames</option> | |
| </select> | |
| </label> | |
| <label class="setting-item"> | |
| <span>Device</span> | |
| <select id="deviceSelect"> | |
| <option value="cpu">CPU</option> | |
| <option value="webgpu">GPU (WebGPU)</option> | |
| </select> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="results" id="results"> | |
| <div class="results-header"> | |
| <h3>Video Captions</h3> | |
| <button id="copyBtn" class="icon-btn"> | |
| <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> | |
| </div> | |
| <div class="frame-captions" id="frameCaptions"></div> | |
| <div class="final-caption" id="finalCaption"> | |
| <h4>Video Summary</h4> | |
| <p id="summaryText"></p> | |
| </div> | |
| </div> | |
| <div class="progress-overlay" id="progressOverlay"> | |
| <div class="progress-content"> | |
| <div class="progress-ring"> | |
| <svg viewBox="0 0 100 100"> | |
| <circle cx="50" cy="50" r="45" fill="none" stroke="#e5e5e7" stroke-width="8"/> | |
| <circle id="progressCircle" cx="50" cy="50" r="45" fill="none" stroke="url(#gradient)" stroke-width="8" stroke-linecap="round" transform="rotate(-90 50 50)"/> | |
| <defs> | |
| <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#007AFF"/> | |
| <stop offset="100%" style="stop-color:#5856D6"/> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| <span class="progress-text" id="progressText">0%</span> | |
| </div> | |
| <p id="progressStatus">Initializing...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="module" src="index.js"></script> | |
| </body> | |
| </html> |