69 lines
2.6 KiB
HTML
69 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>YouTube Transcription with Whisper</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
<script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>YouTube Video Transcription</h1>
|
|
<p class="subtitle">Paste a YouTube URL, playlist, or multiple links to transcribe using OpenAI's Whisper</p>
|
|
|
|
<div class="input-section">
|
|
<input type="text" id="youtube-url" placeholder="https://www.youtube.com/watch?v=... (single video or playlist URL)">
|
|
<button id="transcribe-btn">Transcribe</button>
|
|
</div>
|
|
|
|
<div id="queue-container" class="queue-container hidden">
|
|
<h2>Transcription Queue</h2>
|
|
<div id="queue-list" class="queue-list">
|
|
<!-- Queue items will be added here dynamically -->
|
|
</div>
|
|
</div>
|
|
|
|
<div id="status-container" class="hidden">
|
|
<div class="status-header">
|
|
<span id="status-text">Processing...</span>
|
|
<span id="job-id" class="job-id"></span>
|
|
</div>
|
|
|
|
<div class="progress-container">
|
|
<div id="progress-bar" class="progress-bar"></div>
|
|
<div id="progress-text" class="progress-text">0%</div>
|
|
</div>
|
|
|
|
<div id="message-container" class="message-container">
|
|
<div id="current-message"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="result-container" class="hidden">
|
|
<h2>Transcription Complete</h2>
|
|
<div id="preview-container" class="preview-container">
|
|
<h3>Preview:</h3>
|
|
<div id="transcript-preview" class="transcript-preview"></div>
|
|
</div>
|
|
|
|
<div class="download-options">
|
|
<h3>Download Options:</h3>
|
|
<div class="download-buttons">
|
|
<a id="download-txt" class="download-btn">Download TXT</a>
|
|
<a id="download-srt" class="download-btn">Download SRT (Subtitles)</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="error-container" class="hidden">
|
|
<div class="error-message">
|
|
<h3>Error</h3>
|
|
<p id="error-text"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
|
</body>
|
|
</html> |