Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Video Transcription AI</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="header-content"> | |
| <h1>🎥 Video Transcription AI</h1> | |
| <p>Analyze and transcribe video content using AI</p> | |
| </div> | |
| </header> | |
| <main> | |
| <div class="upload-section"> | |
| <div class="upload-card"> | |
| <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /> | |
| </svg> | |
| <h2>Upload Video</h2> | |
| <p>Select a video file to analyze</p> | |
| <input type="file" id="videoInput" accept="video/*" hidden> | |
| <button class="btn-primary" onclick="document.getElementById('videoInput').click()"> | |
| Choose Video | |
| </button> | |
| <div id="videoInfo" class="video-info"></div> | |
| </div> | |
| <div class="settings-card"> | |
| <h3>Settings</h3> | |
| <div class="setting-item"> | |
| <label for="frameCount">Number of frames to analyze:</label> | |
| <input type="number" id="frameCount" min="1" max="16" value="4"> | |
| </div> | |
| <div class="setting-item"> | |
| <label for="deviceSelect">Processing device:</label> | |
| <select id="deviceSelect"> | |
| <option value="wasm">CPU (WASM)</option> | |
| <option value="webgpu">GPU (WebGPU)</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="videoPreview" class="video-preview hidden"> | |
| <h3>Video Preview</h3> | |
| <video id="videoElement" controls></video> | |
| </div> | |
| <button id="analyzeBtn" class="btn-analyze hidden" disabled> | |
| <span class="btn-text">Analyze Video</span> | |
| <div class="spinner hidden"></div> | |
| </button> | |
| <div id="progressSection" class="progress-section hidden"> | |
| <div class="progress-header"> | |
| <h3>Processing Video</h3> | |
| <span id="progressText">Initializing...</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="progressFill" class="progress-fill"></div> | |
| </div> | |
| <div id="currentStatus" class="current-status"></div> | |
| </div> | |
| <div id="resultsSection" class="results-section hidden"> | |
| <h2>Analysis Results</h2> | |
| <div class="frames-grid" id="framesGrid"></div> | |
| <div class="summary-card hidden" id="summaryCard"> | |
| <h3>📝 Video Summary</h3> | |
| <div id="summaryContent" class="summary-content"></div> | |
| </div> | |
| <div class="actions"> | |
| <button class="btn-secondary" onclick="downloadResults()"> | |
| Download Results | |
| </button> | |
| <button class="btn-secondary" onclick="resetApp()"> | |
| Analyze Another Video | |
| </button> | |
| </div> | |
| </div> | |
| <div id="errorSection" class="error-section hidden"> | |
| <div class="error-card"> | |
| <svg class="error-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| <h3>Error Occurred</h3> | |
| <p id="errorMessage"></p> | |
| <button class="btn-primary" onclick="resetApp()">Try Again</button> | |
| </div> | |
| </div> | |
| </main> | |
| <footer> | |
| <p>Powered by Transformers.js and FastVLM • WebGPU Support: <span id="webgpuStatus"></span></p> | |
| </footer> | |
| </div> | |
| <script type="module" src="index.js"></script> | |
| </body> | |
| </html> |