Spaces:
No application file
No application file
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Video Dubbing - English to Hindi</title> | |
| <link href="style.css" rel="stylesheet" type="text/css" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header class="header"> | |
| <h1>🧠 AI Video Dubbing</h1> | |
| <p class="subtitle">English to Hindi Video Translation & Dubbing</p> | |
| </header> | |
| <div class="main-content"> | |
| <div class="prompt-section"> | |
| <div class="prompt-box"> | |
| <h2>🎙️ How it works:</h2> | |
| <ol> | |
| <li>Transcribe the video</li> | |
| <li>Translate the transcript to Hindi</li> | |
| <li>Dub the audio using a natural Hindi voice</li> | |
| </ol> | |
| </div> | |
| </div> | |
| <div class="input-section"> | |
| <div class="input-container"> | |
| <label for="videoUrl">🔗 Paste your YouTube video link below:</label> | |
| <input type="url" id="videoUrl" placeholder="https://www.youtube.com/watch?v=XXXXXXXXXXX" required> | |
| </div> | |
| <div class="options-section"> | |
| <div class="option-group"> | |
| <label class="checkbox-container"> | |
| <input type="checkbox" id="addSubtitles"> | |
| <span class="checkmark"></span> | |
| Add Hindi subtitles | |
| </label> | |
| </div> | |
| <div class="option-group"> | |
| <label for="voiceStyle">Voice Style:</label> | |
| <select id="voiceStyle"> | |
| <option value="female">Female</option> | |
| <option value="male">Male</option> | |
| <option value="neutral">Neutral</option> | |
| </select> | |
| </div> | |
| <div class="option-group"> | |
| <label for="targetLanguage">Translate to:</label> | |
| <select id="targetLanguage"> | |
| <option value="hindi">Hindi</option> | |
| <option value="tamil">Tamil</option> | |
| <option value="bengali">Bengali</option> | |
| <option value="telugu">Telugu</option> | |
| <option value="marathi">Marathi</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button id="generateBtn" class="generate-btn"> | |
| <i class="fas fa-play"></i> | |
| 🎬 Generate Hindi Dubbed Video | |
| </button> | |
| </div> | |
| <div id="loadingSection" class="loading-section" style="display: none;"> | |
| <div class="loading-spinner"></div> | |
| <p class="loading-text">Processing your video... this may take a few minutes</p> | |
| <div class="progress-bar"> | |
| <div class="progress-fill"></div> | |
| </div> | |
| </div> | |
| <div id="outputSection" class="output-section" style="display: none;"> | |
| <h3>✅ Processing Complete!</h3> | |
| <div class="video-preview"> | |
| <div class="video-container"> | |
| <video id="dubbedVideo" controls> | |
| <source src="" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| </div> | |
| </div> | |
| <div class="download-section"> | |
| <button id="downloadBtn" class="download-btn"> | |
| <i class="fas fa-download"></i> | |
| Download Hindi Dubbed Video | |
| </button> | |
| </div> | |
| <div class="transcript-section"> | |
| <h4>📝 Hindi Transcript:</h4> | |
| <div class="transcript-container"> | |
| <textarea id="hindiTranscript" readonly></textarea> | |
| </div> | |
| </div> | |
| <div class="playback-controls"> | |
| <button id="playBtn" class="control-btn"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button id="pauseBtn" class="control-btn"> | |
| <i class="fas fa-pause"></i> | |
| </button> | |
| <button id="restartBtn" class="control-btn"> | |
| <i class="fas fa-redo"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="footer"> | |
| <p>Powered by AI • English to Hindi Video Dubbing</p> | |
| </footer> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |