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 id="app"> | |
| <!-- Video Container --> | |
| <div class="video-container"> | |
| <video id="videoPlayer" class="video-player" controls></video> | |
| <div class="video-placeholder"> | |
| <svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <rect x="2" y="5" width="20" height="14" rx="2" ry="2"></rect> | |
| <polygon points="10 9 15 12 10 15"></polygon> | |
| </svg> | |
| <p>Upload a video to begin</p> | |
| </div> | |
| </div> | |
| <!-- Overlay UI --> | |
| <div class="overlay-ui"> | |
| <!-- Top Bar --> | |
| <div class="top-bar"> | |
| <div class="app-title"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="2" y="5" width="20" height="14" rx="2" ry="2"></rect> | |
| <polygon points="10 9 15 12 10 15"></polygon> | |
| </svg> | |
| <span>Video Caption AI</span> | |
| </div> | |
| <div class="top-controls"> | |
| <button class="icon-button" id="toggleDevice" title="Toggle CPU/GPU"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect> | |
| <rect x="9" y="9" width="6" height="6"></rect> | |
| <line x1="9" y1="1" x2="9" y2="4"></line> | |
| <line x1="15" y1="1" x2="15" y2="4"></line> | |
| <line x1="9" y1="20" x2="9" y2="23"></line> | |
| <line x1="15" y1="20" x2="15" y2="23"></line> | |
| <line x1="20" y1="9" x2="23" y2="9"></line> | |
| <line x1="20" y1="14" x2="23" y2="14"></line> | |
| <line x1="1" y1="9" x2="4" y2="9"></line> | |
| <line x1="1" y1="14" x2="4" y2="14"></line> | |
| </svg> | |
| <span class="device-label">CPU</span> | |
| </button> | |
| <button class="icon-button" id="uploadBtn"> | |
| <svg width="20" height="20" 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> | |
| Upload Video | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Caption Panel --> | |
| <div class="caption-panel" id="captionPanel"> | |
| <div class="panel-header"> | |
| <h2>Video Analysis</h2> | |
| <button class="close-btn" id="closePanel"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <line x1="18" y1="6" x2="6" y2="18"></line> | |
| <line x1="6" y1="6" x2="18" y2="18"></line> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="analysis-settings"> | |
| <div class="setting-group"> | |
| <label>Frames to Analyze</label> | |
| <input type="range" id="frameCount" min="4" max="16" value="8" class="slider"> | |
| <span id="frameCountValue">8</span> | |
| </div> | |
| <div class="setting-group"> | |
| <label>Max Duration (seconds)</label> | |
| <input type="range" id="maxDuration" min="5" max="30" value="15" class="slider"> | |
| <span id="maxDurationValue">15</span> | |
| </div> | |
| </div> | |
| <button class="analyze-btn" id="analyzeBtn"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <circle cx="11" cy="11" r="8"></circle> | |
| <path d="m21 21-4.35-4.35"></path> | |
| </svg> | |
| Analyze Video | |
| </button> | |
| <div class="results-container" id="resultsContainer"> | |
| <!-- Results will be populated here --> | |
| </div> | |
| </div> | |
| <!-- Loading Overlay --> | |
| <div class="loading-overlay" id="loadingOverlay"> | |
| <div class="loading-content"> | |
| <div class="spinner"></div> | |
| <p id="loadingText">Processing video...</p> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hidden file input --> | |
| <input type="file" id="fileInput" accept="video/*" style="display: none;"> | |
| </div> | |
| <script type="module" src="index.js"></script> | |
| </body> | |
| </html> |