Spaces:

dimchr
/

captions

Running

App Files Files Community

dimchr commited on Jul 16, 2025

Commit

0476b73

verified ·

1 Parent(s): 3734437

we need to be able to select the translated language. we would also like to be able to select the format when copying the selected (srt, tab seperatged) - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +368 -240

index.html CHANGED Viewed

@@ -3,289 +3,417 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>YouTube Subtitle Downloader - Fast & Easy Captions</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        .gradient-bg {
-            background: linear-gradient(135deg, #FF0000 0%, #FF4500 100%);
         }
-        .download-btn {
-            transition: all 0.3s ease;
         }
-        .download-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(255, 69, 0, 0.3);
         }
-        .feature-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
         }
-        .language-select {
-            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-            background-position: right 0.5rem center;
-            background-repeat: no-repeat;
-            background-size: 1.5em 1.5em;
         }
     </style>
 </head>
-<body class="font-sans bg-gray-50">
-    <!-- Header -->
-    <header class="gradient-bg text-white">
-        <div class="container mx-auto px-4 py-6">
-            <div class="flex flex-col md:flex-row justify-between items-center">
-                <div class="flex items-center mb-4 md:mb-0">
-                    <i class="fab fa-youtube text-3xl mr-3"></i>
-                    <h1 class="text-2xl md:text-3xl font-bold">YouTube Subtitle Downloader</h1>
                 </div>
-                <nav class="flex space-x-6">
-                    <a href="#how-it-works" class="hover:text-gray-200 transition">How It Works</a>
-                    <a href="#features" class="hover:text-gray-200 transition">Features</a>
-                    <a href="#extension" class="hover:text-gray-200 transition">Extension</a>
-                </nav>
             </div>
-        </div>
-    </header>
-    <!-- Hero Section -->
-    <section class="gradient-bg text-white py-12">
-        <div class="container mx-auto px-4">
-            <div class="max-w-4xl mx-auto text-center">
-                <h2 class="text-3xl md:text-4xl font-bold mb-6">Download YouTube Subtitles in Seconds</h2>
-                <p class="text-xl mb-8">Get accurate subtitles in SRT, VTT or TXT formats for any YouTube video. Fast, easy and free!</p>
-                <div class="bg-white rounded-lg shadow-xl p-6 max-w-2xl mx-auto">
-                    <div class="flex flex-col md:flex-row gap-4">
-                        <input type="text" placeholder="Paste YouTube URL here..." class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 text-gray-800">
-                        <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg download-btn">
-                            <i class="fas fa-download mr-2"></i> Get Subtitles
-                        </button>
-                    </div>
-                    <div class="mt-4 flex items-center justify-center">
-                        <select class="language-select appearance-none bg-gray-100 border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-red-500 text-gray-700">
-                            <option>Select Language</option>
-                            <option>English</option>
-                            <option>Spanish</option>
-                            <option>French</option>
-                            <option>German</option>
-                            <option>Japanese</option>
-                        </select>
                     </div>
                 </div>
-            </div>
-        </div>
-    </section>
-    <!-- How It Works Section -->
-    <section id="how-it-works" class="py-16 bg-white">
-        <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">How To Download YouTube Subtitles</h2>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-                <!-- Desktop Guide -->
-                <div class="bg-gray-50 p-6 rounded-xl shadow-md feature-card transition">
-                    <div class="flex items-center mb-4">
-                        <div class="bg-red-100 text-red-600 p-3 rounded-full mr-4">
-                            <i class="fas fa-desktop text-xl"></i>
                         </div>
-                        <h3 class="text-xl font-semibold text-gray-800">For Desktop Computers</h3>
-                    </div>
-                    <ol class="list-decimal pl-5 space-y-3 text-gray-600">
-                        <li>Go to YouTube and find your video</li>
-                        <li>Copy the URL from your browser</li>
-                        <li>Paste it above and click "Get Subtitles"</li>
-                        <li>Download in your preferred format</li>
-                    </ol>
-                    <div class="mt-6">
-                        <img src="https://www.downloadyoutubesubtitles.com/static/youtube-subtitles-how-to-desktop-pc.jpg" alt="Desktop guide" class="rounded-lg shadow-md w-full">
                     </div>
-                </div>
-                <!-- Mobile Guide -->
-                <div class="bg-gray-50 p-6 rounded-xl shadow-md feature-card transition">
-                    <div class="flex items-center mb-4">
-                        <div class="bg-blue-100 text-blue-600 p-3 rounded-full mr-4">
-                            <i class="fas fa-mobile-alt text-xl"></i>
-                        </div>
-                        <h3 class="text-xl font-semibold text-gray-800">For Mobile Devices</h3>
                     </div>
-                    <ol class="list-decimal pl-5 space-y-3 text-gray-600">
-                        <li>In the YouTube app, tap "Share"</li>
-                        <li>Choose "Copy link"</li>
-                        <li>Paste the URL above</li>
-                        <li>Select language and download</li>
-                    </ol>
-                    <div class="mt-6">
-                        <img src="https://www.downloadyoutubesubtitles.com/static/youtube-subtitles-how-to-smartphone.jpg" alt="Mobile guide" class="rounded-lg shadow-md w-full">
                     </div>
                 </div>
             </div>
-        </div>
-    </section>
-    <!-- Features Section -->
-    <section id="features" class="py-16 bg-gray-50">
-        <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Why Use Our YouTube Subtitle Downloader?</h2>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div class="bg-white p-6 rounded-xl shadow-md feature-card transition">
-                    <div class="text-red-500 text-4xl mb-4">
-                        <i class="fas fa-bolt"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-3 text-gray-800">Lightning Fast</h3>
-                    <p class="text-gray-600">Get subtitles in seconds with our optimized processing system. No waiting, no delays.</p>
                 </div>
-                <div class="bg-white p-6 rounded-xl shadow-md feature-card transition">
-                    <div class="text-red-500 text-4xl mb-4">
-                        <i class="fas fa-language"></i>
-                    </div>
-                    <h3 class="text-xl font-semibold mb-3 text-gray-800">100+ Languages</h3>
-                    <p class="text-gray-600">Support for subtitles in virtually any language available on YouTube.</p>
-                </div>
-                <div class="bg-white p-6 rounded-xl shadow-md feature-card transition">
-                    <div class="text-red-500 text-4xl mb-4">
-                        <i class="fas fa-file-alt"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-3 text-gray-800">Multiple Formats</h3>
-                    <p class="text-gray-600">Download in SRT, VTT or TXT formats for compatibility with any device or player.</p>
                 </div>
-            </div>
-            <div class="mt-12 bg-white rounded-xl shadow-md overflow-hidden max-w-4xl mx-auto">
-                <div class="md:flex">
-                    <div class="md:w-1/2 p-8">
-                        <h3 class="text-2xl font-bold mb-4 text-gray-800">Read Instead of Watch</h3>
-                        <p class="text-gray-600 mb-4">Save time by reading video transcripts instead of watching. Perfect for research or quick information gathering.</p>
-                        <p class="text-gray-600">Search through subtitles to find specific phrases or keywords in seconds.</p>
-                    </div>
-                    <div class="md:w-1/2">
-                        <img src="https://www.downloadyoutubesubtitles.com/static/youtube-subtitle-embedded.jpg" alt="Embedded subtitles" class="h-full w-full object-cover">
                     </div>
                 </div>
             </div>
-        </div>
-    </section>
-    <!-- Extension Section -->
-    <section id="extension" class="py-16 bg-white">
-        <div class="container mx-auto px-4">
-            <div class="max-w-4xl mx-auto bg-gradient-to-r from-red-500 to-orange-500 rounded-xl shadow-xl overflow-hidden">
-                <div class="md:flex">
-                    <div class="md:w-1/2 p-8 text-white">
-                        <h2 class="text-2xl font-bold mb-4">One-Click Subtitle Download</h2>
-                        <p class="mb-6">Install our browser extension for instant access to subtitles with just one click!</p>
-                        <a href="https://www.downloadyoutubesubtitles.com/extensions" class="inline-block bg-white text-red-600 font-bold py-3 px-6 rounded-lg download-btn hover:text-red-700">
-                            <i class="fas fa-download mr-2"></i> Install Extension Now
-                        </a>
-                    </div>
-                    <div class="md:w-1/2">
-                        <img src="https://www.downloadyoutubesubtitles.com/static/youtube-extension.jpg" alt="Browser extension" class="h-full w-full object-cover">
-                    </div>
-                </div>
-            </div>
         </div>
-    </section>
-    <!-- Benefits Section -->
-    <section class="py-16 bg-gray-50">
-        <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">The Importance of YouTube Subtitles</h2>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
-                <div class="bg-white p-6 rounded-xl shadow-md">
-                    <div class="flex items-start mb-4">
-                        <div class="bg-green-100 text-green-600 p-3 rounded-full mr-4">
-                            <i class="fas fa-universal-access"></i>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold text-gray-800">Accessibility</h3>
-                            <p class="text-gray-600 mt-2">Make your content available to viewers with hearing impairments or language barriers.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-white p-6 rounded-xl shadow-md">
-                    <div class="flex items-start mb-4">
-                        <div class="bg-blue-100 text-blue-600 p-3 rounded-full mr-4">
-                            <i class="fas fa-globe"></i>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold text-gray-800">Global Reach</h3>
-                            <p class="text-gray-600 mt-2">Attract international audiences by providing subtitles in multiple languages.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-white p-6 rounded-xl shadow-md">
-                    <div class="flex items-start mb-4">
-                        <div class="bg-purple-100 text-purple-600 p-3 rounded-full mr-4">
-                            <i class="fas fa-chart-line"></i>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold text-gray-800">Better Engagement</h3>
-                            <p class="text-gray-600 mt-2">Videos with captions have higher watch times and lower bounce rates.</p>
                         </div>
-                    </div>
-                </div>
-                <div class="bg-white p-6 rounded-xl shadow-md">
-                    <div class="flex items-start mb-4">
-                        <div class="bg-yellow-100 text-yellow-600 p-3 rounded-full mr-4">
-                            <i class="fas fa-search"></i>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold text-gray-800">Improved SEO</h3>
-                            <p class="text-gray-600 mt-2">Subtitles make your content more discoverable through search engines.</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Footer -->
-    <footer class="bg-gray-800 text-white py-8">
-        <div class="container mx-auto px-4">
-            <div class="flex flex-col md:flex-row justify-between items-center">
-                <div class="mb-4 md:mb-0">
-                    <h3 class="text-xl font-bold">YouTube Subtitle Downloader</h3>
-                    <p class="text-gray-400 mt-1">Fast, easy and free subtitle downloads</p>
-                </div>
-                <div class="flex space-x-6">
-                    <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
-                    <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
-                    <a href="#" class="text-gray-400 hover:text-white transition">Contact</a>
-                </div>
-            </div>
-            <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400">
-                <p>© 2023 YouTube Subtitle Downloader. All rights reserved.</p>
-                <p class="mt-2">Not affiliated with YouTube or Google LLC.</p>
-            </div>
-        </div>
-    </footer>
-    <script>
-        // Simple animation for the download button
-        document.querySelector('.download-btn').addEventListener('click', function() {
-            this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...';
-            setTimeout(() => {
-                this.innerHTML = '<i class="fas fa-check mr-2"></i> Subtitles Ready!';
-                this.classList.remove('bg-red-600', 'hover:bg-red-700');
-                this.classList.add('bg-green-500', 'hover:bg-green-600');
-            }, 2000);
-        });
-        // Smooth scrolling for anchor links
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function (e) {
-                e.preventDefault();
-                document.querySelector(this.getAttribute('href')).scrollIntoView({
-                    behavior: 'smooth'
                 });
             });
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dimchr/captions" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Free YouTube Caption Extractor</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        .video-container {
+            position: relative;
+            padding-bottom: 56.25%;
+            height: 0;
+            overflow: hidden;
         }
+        .video-container iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
         }
+        .caption-text {
+            max-height: 300px;
+            overflow-y: auto;
         }
+        .caption-line:hover {
+            background-color: #f0f0f0;
+            cursor: pointer;
         }
+        .caption-line.selected {
+            background-color: #e2e8f0;
+            font-weight: 500;
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
         }
     </style>
 </head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-4xl">
+        <!-- Header -->
+        <header class="text-center mb-8">
+            <h1 class="text-3xl md:text-4xl font-bold text-indigo-700 mb-2">YouTube Caption Extractor</h1>
+            <p class="text-gray-600">Get captions/subtitles from any YouTube video for free</p>
+        </header>
+        <!-- Main Content -->
+        <main>
+            <!-- URL Input Section -->
+            <div class="bg-white rounded-lg shadow-md p-6 mb-8">
+                <div class="flex flex-col md:flex-row gap-4">
+                    <input
+                        type="text"
+                        id="youtube-url"
+                        placeholder="Paste YouTube video URL here (e.g. https://www.youtube.com/watch?v=...)"
+                        class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    >
+                    <button
+                        id="extract-btn"
+                        class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium px-6 py-3 rounded-lg transition-colors flex items-center justify-center gap-2"
+                    >
+                        <i class="fas fa-play"></i> Extract Captions
+                    </button>
                 </div>
+                <div id="error-message" class="text-red-500 mt-2 text-sm hidden"></div>
             </div>
+            <!-- Video Player Section -->
+            <div id="video-section" class="hidden fade-in">
+                <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
+                    <div class="video-container">
+                        <iframe id="video-player" frameborder="0" allowfullscreen></iframe>
                     </div>
                 </div>
+                <!-- Captions Section -->
+                <div class="bg-white rounded-lg shadow-md p-6">
+                    <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4 gap-4">
+                        <h2 class="text-xl font-semibold text-gray-800">Video Captions</h2>
+                        <div class="flex flex-col sm:flex-row gap-2">
+                            <select id="language-select" class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
+                                <option value="es">Spanish</option>
+                                <option value="fr">French</option>
+                                <option value="de">German</option>
+                                <option value="it">Italian</option>
+                                <option value="pt">Portuguese</option>
+                                <option value="ja">Japanese</option>
+                                <option value="ko">Korean</option>
+                                <option value="zh">Chinese</option>
+                            </select>
+                            <select id="format-select" class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
+                                <option value="plain">Plain Text</option>
+                                <option value="srt">SRT Format</option>
+                                <option value="tab">Tab Separated</option>
+                            </select>
+                            <button
+                                id="copy-all-btn"
+                                class="text-indigo-600 hover:text-indigo-800 flex items-center gap-1 text-sm whitespace-nowrap"
+                            >
+                                <i class="fas fa-copy"></i> Copy All
+                            </button>
                         </div>
                     </div>
+                    <div class="bg-gray-100 rounded-lg p-4 caption-text" id="captions-container">
+                        <p class="text-gray-500 text-center py-8">Captions will appear here after extraction</p>
                     </div>
+                    <div class="mt-4 flex justify-between items-center text-sm text-gray-500">
+                        <div id="selected-count">0 captions selected</div>
+                        <button
+                            id="copy-selected-btn"
+                            class="text-indigo-600 hover:text-indigo-800 flex items-center gap-1 disabled:opacity-50"
+                            disabled
+                        >
+                            <i class="fas fa-copy"></i> Copy Selected
+                        </button>
                     </div>
                 </div>
             </div>
+        </main>
+        <!-- How It Works Section -->
+        <section class="mt-12 bg-white rounded-lg shadow-md p-6">
+            <h2 class="text-xl font-semibold text-gray-800 mb-4">How It Works</h2>
+            <div class="grid md:grid-cols-3 gap-6">
+                <div class="flex flex-col items-center text-center">
+                    <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mb-3">
+                        <i class="fas fa-link text-indigo-600 text-xl"></i>
                     </div>
+                    <h3 class="font-medium mb-1">1. Paste URL</h3>
+                    <p class="text-gray-600 text-sm">Enter any YouTube video URL in the box above</p>
                 </div>
+                <div class="flex flex-col items-center text-center">
+                    <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mb-3">
+                        <i class="fas fa-play-circle text-indigo-600 text-xl"></i>
                     </div>
+                    <h3 class="font-medium mb-1">2. Extract Captions</h3>
+                    <p class="text-gray-600 text-sm">Click the button to process the video</p>
                 </div>
+                <div class="flex flex-col items-center text-center">
+                    <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mb-3">
+                        <i class="fas fa-copy text-indigo-600 text-xl"></i>
                     </div>
+                    <h3 class="font-medium mb-1">3. Copy & Study</h3>
+                    <p class="text-gray-600 text-sm">Select and copy captions for your study needs</p>
                 </div>
             </div>
+        </section>
+        <!-- Footer -->
+        <footer class="mt-12 text-center text-gray-500 text-sm">
+            <p>Free YouTube Caption Extractor - No registration required</p>
+            <p class="mt-1">© 2023 All Rights Reserved</p>
+        </footer>
+    </div>
+    <!-- Toast Notification -->
+    <div id="toast" class="fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg hidden">
+        <div class="flex items-center gap-2">
+            <i class="fas fa-check-circle text-green-400"></i>
+            <span id="toast-message">Copied to clipboard!</span>
         </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const youtubeUrlInput = document.getElementById('youtube-url');
+            const extractBtn = document.getElementById('extract-btn');
+            const videoSection = document.getElementById('video-section');
+            const videoPlayer = document.getElementById('video-player');
+            const captionsContainer = document.getElementById('captions-container');
+            const errorMessage = document.getElementById('error-message');
+            const copyAllBtn = document.getElementById('copy-all-btn');
+            const copySelectedBtn = document.getElementById('copy-selected-btn');
+            const selectedCount = document.getElementById('selected-count');
+            const toast = document.getElementById('toast');
+            const toastMessage = document.getElementById('toast-message');
+            let captions = [];
+            let selectedCaptions = new Set();
+            let currentLanguage = 'es';
+            let currentFormat = 'plain';
+            // Extract video ID from URL
+            function getVideoId(url) {
+                const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+                const match = url.match(regExp);
+                return (match && match[2].length === 11) ? match[2] : null;
+            }
+            // Validate YouTube URL
+            function isValidYouTubeUrl(url) {
+                return url.includes('youtube.com') || url.includes('youtu.be');
+            }
+            // Show error message
+            function showError(message) {
+                errorMessage.textContent = message;
+                errorMessage.classList.remove('hidden');
+            }
+            // Hide error message
+            function hideError() {
+                errorMessage.classList.add('hidden');
+            }
+            // Show toast notification
+            function showToast(message) {
+                toastMessage.textContent = message;
+                toast.classList.remove('hidden');
+                setTimeout(() => {
+                    toast.classList.add('hidden');
+                }, 3000);
+            }
+            // Extract captions (mock function - in a real app, you'd call a backend service)
+            function extractCaptions(videoId) {
+                // This is a mock implementation
+                // In a real app, you would need to:
+                // 1. Call a backend service that uses the YouTube API to get captions
+                // 2. Or use a proxy service to fetch captions
+                return new Promise((resolve) => {
+                    // Simulate API delay
+                    setTimeout(() => {
+                        // Mock captions data
+                        const mockCaptions = [
+                            {
+                                start: 0,
+                                duration: 5,
+                                original: "Hello and welcome to this tutorial.",
+                                translated: "Hola y bienvenidos a este tutorial."
+                            },
+                            {
+                                start: 5,
+                                duration: 4,
+                                original: "Today we'll learn about YouTube captions.",
+                                translated: "Hoy aprenderemos sobre los subtítulos de YouTube."
+                            },
+                            {
+                                start: 9,
+                                duration: 6,
+                                original: "Captions are important for accessibility.",
+                                translated: "Los subtítulos son importantes para la accesibilidad."
+                            },
+                            {
+                                start: 15,
+                                duration: 5,
+                                original: "They help people understand the content.",
+                                translated: "Ayudan a las personas a entender el contenido."
+                            },
+                            {
+                                start: 20,
+                                duration: 6,
+                                original: "You can use them for language learning too.",
+                                translated: "También puedes usarlos para aprender idiomas."
+                            }
+                        ];
+                        resolve(mockCaptions);
+                    }, 1000);
+                });
+            }
+            // Display captions in the UI
+            function displayCaptions(captionsData) {
+                captions = captionsData;
+                selectedCaptions.clear();
+                updateSelectedCount();
+                copySelectedBtn.disabled = true;
+                if (captionsData.length === 0) {
+                    captionsContainer.innerHTML = '<p class="text-gray-500 text-center py-8">No captions available for this video</p>';
+                    return;
+                }
+                let html = '';
+                captionsData.forEach((caption, index) => {
+                    html += `
+                        <div class="caption-line py-2 px-3 rounded mb-1" data-index="${index}">
+                            <div class="font-medium mb-1">${caption.original}</div>
+                            <div class="text-gray-600 text-sm">${caption.translated}</div>
                         </div>
+                    `;
+                });
+                captionsContainer.innerHTML = html;
+                // Add click event to caption lines
+                document.querySelectorAll('.caption-line').forEach(line => {
+                    line.addEventListener('click', function() {
+                        const index = parseInt(this.getAttribute('data-index'));
+                        if (selectedCaptions.has(index)) {
+                            selectedCaptions.delete(index);
+                            this.classList.remove('selected');
+                        } else {
+                            selectedCaptions.add(index);
+                            this.classList.add('selected');
+                        }
+                        updateSelectedCount();
+                        copySelectedBtn.disabled = selectedCaptions.size === 0;
+                    });
+                });
+            }
+            // Update selected count display
+            function updateSelectedCount() {
+                const count = selectedCaptions.size;
+                selectedCount.textContent = `${count} caption${count !== 1 ? 's' : ''} selected`;
+            }
+            // Handle language selection change
+            document.getElementById('language-select').addEventListener('change', function() {
+                currentLanguage = this.value;
+                // In a real app, you would fetch translations for the selected language
+                // For this demo, we're just using mock data
+                displayCaptions(captions);
+            });
+            // Handle format selection change
+            document.getElementById('format-select').addEventListener('change', function() {
+                currentFormat = this.value;
+            });
+            // Format captions based on selected format
+            function formatCaptionText(original, translated) {
+                switch(currentFormat) {
+                    case 'srt':
+                        return `${original}\n${translated}`;
+                    case 'tab':
+                        return `${original}\t${translated}`;
+                    default: // plain
+                        return `${original}\n${translated}`;
+                }
+            }
+            // Copy all captions to clipboard
+            copyAllBtn.addEventListener('click', function() {
+                if (captions.length === 0) return;
+                const allText = captions.map(c => formatCaptionText(c.original, c.translated)).join('\n\n');
+                navigator.clipboard.writeText(allText).then(() => {
+                    showToast('All captions copied to clipboard!');
+                });
+            });
+            // Copy selected captions to clipboard
+            copySelectedBtn.addEventListener('click', function() {
+                if (selectedCaptions.size === 0) return;
+                const selectedText = Array.from(selectedCaptions)
+                    .sort((a, b) => a - b)
+                    .map(index => formatCaptionText(captions[index].original, captions[index].translated))
+                    .join(currentFormat === 'tab' ? '\n' : '\n\n');
+                navigator.clipboard.writeText(selectedText).then(() => {
+                    showToast('Selected captions copied to clipboard!');
                 });
             });
+            // Extract captions when button is clicked
+            extractBtn.addEventListener('click', function() {
+                const url = youtubeUrlInput.value.trim();
+                if (!url) {
+                    showError('Please enter a YouTube URL');
+                    return;
+                }
+                if (!isValidYouTubeUrl(url)) {
+                    showError('Please enter a valid YouTube URL');
+                    return;
+                }
+                const videoId = getVideoId(url);
+                if (!videoId) {
+                    showError('Could not extract video ID from URL');
+                    return;
+                }
+                hideError();
+                extractBtn.disabled = true;
+                extractBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Extracting...';
+                // Set up video player
+                videoPlayer.src = `https://www.youtube.com/embed/${videoId}?cc_load_policy=1`;
+                videoSection.classList.remove('hidden');
+                // Extract captions
+                extractCaptions(videoId)
+                    .then(captions => {
+                        displayCaptions(captions);
+                        extractBtn.disabled = false;
+                        extractBtn.innerHTML = '<i class="fas fa-play"></i> Extract Captions';
+                    })
+                    .catch(error => {
+                        console.error('Error extracting captions:', error);
+                        captionsContainer.innerHTML = '<p class="text-red-500 text-center py-8">Error extracting captions. Please try another video.</p>';
+                        extractBtn.disabled = false;
+                        extractBtn.innerHTML = '<i class="fas fa-play"></i> Extract Captions';
+                    });
+            });
+            // Allow pressing Enter in the input field
+            youtubeUrlInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    extractBtn.click();
+                }
+            });
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dimchr/captions" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>