| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>VaniAI - Premium Video Transcription</title> |
| <meta name="description" content="Auto speech-to-text transcription for short videos. Detects Hindi, English, and Hinglish automatically."> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="style.css"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| </head> |
| <body> |
| <div class="background-effects"> |
| <div class="glow-orb orb-1"></div> |
| <div class="glow-orb orb-2"></div> |
| <div class="glow-orb orb-3"></div> |
| </div> |
|
|
| <div class="app-container"> |
| <header> |
| <div class="logo"> |
| <i class="fa-solid fa-wand-magic-sparkles"></i> |
| <h1>Vani<span>AI</span></h1> |
| </div> |
| <p class="subtitle">Next-Gen Video Transcription</p> |
| </header> |
|
|
| <main> |
| |
| <section id="upload-section" class="glass-panel"> |
| <div class="api-settings"> |
| <div class="input-group"> |
| <label for="api-key-input"><i class="fa-solid fa-key"></i> Sarvam API Key (Optional)</label> |
| <input type="password" id="api-key-input" placeholder="Enter your own key or leave blank for default host key"> |
| </div> |
| </div> |
| <div class="upload-area" id="drop-zone"> |
| <input type="file" id="file-input" accept="video/mp4,video/quicktime,video/x-msvideo,video/webm,video/x-matroska" hidden> |
| <div class="upload-icon"> |
| <i class="fa-solid fa-cloud-arrow-up"></i> |
| </div> |
| <h2>Upload your Reel or Short Video</h2> |
| <p>Drag & drop or <span class="browse-text">browse</span></p> |
| <div class="file-limits"> |
| <span><i class="fa-solid fa-clock"></i> Up to 2 mins</span> |
| <span><i class="fa-solid fa-language"></i> EN, HI, Hinglish</span> |
| </div> |
| </div> |
| <div id="file-preview" class="file-preview hidden"> |
| <div class="file-info"> |
| <i class="fa-solid fa-video file-icon"></i> |
| <div class="file-details"> |
| <span id="file-name" class="file-name">video.mp4</span> |
| <span id="file-size" class="file-size">2.4 MB</span> |
| </div> |
| </div> |
| <button class="icon-btn remove-btn" id="remove-file-btn" title="Remove File"> |
| <i class="fa-solid fa-xmark"></i> |
| </button> |
| </div> |
| <button id="transcribe-btn" class="primary-btn hidden"> |
| <i class="fa-solid fa-bolt"></i> Transcribe Video |
| </button> |
| </section> |
|
|
| |
| <section id="processing-section" class="glass-panel hidden"> |
| <div class="loader-container"> |
| <div class="ai-loader"> |
| <div class="circle"></div> |
| <div class="circle"></div> |
| <div class="circle"></div> |
| <div class="circle"></div> |
| </div> |
| <h2 class="processing-title">Analyzing Audio</h2> |
| <p class="processing-subtitle">Transcribing and detecting language...</p> |
| </div> |
| </section> |
|
|
| |
| <section id="result-section" class="glass-panel hidden"> |
| <div class="result-header"> |
| <h2><i class="fa-solid fa-check-circle text-success"></i> Transcription Complete</h2> |
| <div class="lang-badge" id="detected-lang">Detected: Mixed</div> |
| </div> |
|
|
| <div class="action-bar"> |
| <button id="copy-text-btn" class="secondary-btn"> |
| <i class="fa-solid fa-copy"></i> Copy Text |
| </button> |
| <button id="download-txt-btn" class="secondary-btn"> |
| <i class="fa-solid fa-file-lines"></i> TXT |
| </button> |
| <button id="download-srt-btn" class="secondary-btn"> |
| <i class="fa-solid fa-file-code"></i> SRT |
| </button> |
| <button id="new-transcription-btn" class="primary-btn small"> |
| <i class="fa-solid fa-plus"></i> New |
| </button> |
| </div> |
|
|
| <div class="tabs"> |
| <button class="tab-btn active" data-target="tab-captions">Captions</button> |
| <button class="tab-btn" data-target="tab-text">Full Text</button> |
| </div> |
|
|
| <div class="tab-content active" id="tab-captions"> |
| <div class="captions-container" id="captions-list"> |
| |
| </div> |
| </div> |
|
|
| <div class="tab-content" id="tab-text"> |
| <div class="full-text-container" id="full-text-content"> |
| |
| </div> |
| </div> |
| </section> |
| </main> |
| </div> |
|
|
| |
| <div id="toast" class="toast"> |
| <i class="fa-solid fa-circle-info"></i> |
| <span id="toast-message">Notification</span> |
| </div> |
|
|
| <script src="script.js"></script> |
| </body> |
| </html> |
|
|
