Spaces:
Running
Running
File size: 4,367 Bytes
ab9f226 dd1b723 fa49b89 baf9944 fa49b89 dd1b723 fa49b89 baf9944 fa49b89 a32ef36 fa49b89 a32ef36 fa49b89 baf9944 fa49b89 baf9944 759955c fa49b89 baf9944 fa49b89 dd1b723 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<!DOCTYPE html>
<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> |