Spaces:

dimchr
/

captions

Running

App Files Files Community

dimchr commited on Jul 15

Commit

683bc3a

verified ·

1 Parent(s): 00ad140

In reality , each line may be made up of more than one sentences or phrases. Provide an example - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +615 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Captions
-emoji: 😻
-colorFrom: pink
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: captions
+emoji: 🐳
+colorFrom: purple
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,615 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="View YouTube videos with original and translated captions side by side for better language learning and accessibility.">
+    <meta name="keywords" content="YouTube captions, video captions, caption translator, language learning, accessibility">
+    <meta name="author" content="YouTube Caption Viewer">
+    <title>YouTube Dual Caption Viewer | Compare Original and Translated 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>
+        .caption-container {
+            scroll-behavior: smooth;
+        }
+        .highlight {
+            background-color: rgba(255, 235, 59, 0.3);
+            transition: background-color 0.3s ease;
+        }
+        .loading-spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            border-radius: 50%;
+            border-top: 4px solid #3498db;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <header class="bg-red-600 text-white shadow-lg">
+        <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 font-bold">YouTube Dual Caption Viewer</h1>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <span class="hidden md:inline text-sm">Compare original and translated captions</span>
+                </div>
+            </div>
+        </div>
+    </header>
+    <main class="container mx-auto px-4 py-8">
+        <section class="bg-white rounded-lg shadow-md p-6 mb-8">
+            <h2 class="text-xl font-semibold mb-4 text-gray-800">Enter YouTube Video URL</h2>
+            <div class="flex flex-col md:flex-row gap-4">
+                <input
+                    type="url"
+                    id="youtubeUrl"
+                    placeholder="https://www.youtube.com/watch?v=..."
+                    class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition"
+                    required
+                >
+                <button
+                    id="loadVideoBtn"
+                    class="bg-red-600 hover:bg-red-700 text-white font-medium py-3 px-6 rounded-lg transition flex items-center justify-center"
+                >
+                    <span id="btnText">Load Video</span>
+                    <div id="loadingSpinner" class="hidden ml-2">
+                        <div class="loading-spinner"></div>
+                    </div>
+                </button>
+            </div>
+            <p class="mt-3 text-sm text-gray-600">Note: The video must have captions available for this tool to work.</p>
+        </section>
+        <div id="videoContainer" class="hidden bg-white rounded-lg shadow-md overflow-hidden mb-8">
+            <div class="aspect-w-16 aspect-h-9">
+                <iframe id="youtubePlayer" class="w-full h-96" frameborder="0" allowfullscreen></iframe>
+            </div>
+        </div>
+        <div id="captionSection" class="hidden">
+            <div class="bg-white rounded-lg shadow-md p-4 mb-8">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-lg font-semibold text-gray-800">Dual Captions</h3>
+                    <div class="flex items-center space-x-4">
+                        <span id="originalLanguage" class="px-2 py-1 bg-gray-100 rounded text-sm"></span>
+                        <select id="languageSelect" class="px-2 py-1 border border-gray-300 rounded text-sm">
+                            <option value="en">English</option>
+                            <option value="es">Spanish</option>
+                            <option value="fr">French</option>
+                            <option value="de">German</option>
+                            <option value="ja">Japanese</option>
+                            <option value="ko">Korean</option>
+                            <option value="zh">Chinese</option>
+                            <option value="pt">Portuguese</option>
+                            <option value="ru">Russian</option>
+                            <option value="ar">Arabic</option>
+                        </select>
+                    </div>
+                </div>
+                <div id="mergedCaptions" class="caption-container h-96 overflow-y-auto p-1 bg-gray-50 rounded border border-gray-200">
+                    <!-- Merged captions will be inserted here -->
+                </div>
+            </div>
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <h3 class="text-lg font-semibold mb-4 text-gray-800">Caption Controls</h3>
+                <div class="flex flex-wrap gap-4">
+                    <button id="syncCaptionsBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
+                        <i class="fas fa-sync-alt mr-2"></i> Sync with Video
+                    </button>
+                    <button id="highlightCurrentBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded">
+                        <i class="fas fa-highlighter mr-2"></i> Highlight Current Line
+                    </button>
+                    <button id="fontSizePlusBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded">
+                        <i class="fas fa-text-height mr-2"></i> Increase Font Size
+                    </button>
+                    <button id="fontSizeMinusBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded">
+                        <i class="fas fa-text-height mr-2"></i> Decrease Font Size
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div id="savedCaptionsSection" class="hidden bg-white rounded-lg shadow-md p-6 mb-8">
+            <h3 class="text-lg font-semibold mb-4 text-gray-800">Saved Captions</h3>
+            <div id="savedCaptionsList" class="mb-4 p-3 bg-gray-50 rounded border border-gray-200 max-h-64 overflow-y-auto">
+                <!-- Saved captions will appear here -->
+            </div>
+            <div class="flex flex-wrap gap-4">
+                <button id="copySRT" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
+                    <i class="fas fa-copy mr-2"></i> Copy as SRT
+                </button>
+                <button id="copyExcel" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded">
+                    <i class="fas fa-file-excel mr-2"></i> Copy as Excel
+                </button>
+                <button id="copyTSV" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded">
+                    <i class="fas fa-file-alt mr-2"></i> Copy as TSV
+                </button>
+                <button id="clearSaved" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded">
+                    <i class="fas fa-trash-alt mr-2"></i> Clear All
+                </button>
+            </div>
+        </div>
+        <div id="errorMessage" class="hidden bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-8 rounded">
+            <div class="flex items-center">
+                <i class="fas fa-exclamation-circle mr-3"></i>
+                <div>
+                    <p id="errorText"></p>
+                </div>
+            </div>
+        </div>
+    </main>
+    <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-lg font-semibold mb-2">YouTube Dual Caption Viewer</h3>
+                    <p class="text-gray-400 text-sm">Enhance your language learning and accessibility experience</p>
+                </div>
+                <div class="flex space-x-4">
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fab fa-github text-xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fab fa-twitter text-xl"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
+                <p>© 2023 YouTube Dual Caption Viewer. This tool is not affiliated with YouTube or Google.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const youtubeUrlInput = document.getElementById('youtubeUrl');
+            const loadVideoBtn = document.getElementById('loadVideoBtn');
+            const btnText = document.getElementById('btnText');
+            const loadingSpinner = document.getElementById('loadingSpinner');
+            const videoContainer = document.getElementById('videoContainer');
+            const youtubePlayer = document.getElementById('youtubePlayer');
+            const captionSection = document.getElementById('captionSection');
+            const mergedCaptions = document.getElementById('mergedCaptions');
+            const originalLanguage = document.getElementById('originalLanguage');
+            const languageSelect = document.getElementById('languageSelect');
+            const errorMessage = document.getElementById('errorMessage');
+            const errorText = document.getElementById('errorText');
+            // Control buttons
+            const syncCaptionsBtn = document.getElementById('syncCaptionsBtn');
+            const highlightCurrentBtn = document.getElementById('highlightCurrentBtn');
+            const fontSizePlusBtn = document.getElementById('fontSizePlusBtn');
+            const fontSizeMinusBtn = document.getElementById('fontSizeMinusBtn');
+            let currentFontSize = 14;
+            let highlightEnabled = false;
+            let player;
+            let captions = [];
+            let translatedCaptionData = {};
+            // Mock data for demonstration
+            const mockCaptions = [
+                { start: 0, end: 5, text: "Hello everyone! Welcome to our channel. We're excited to have you here." },
+                { start: 5, end: 10, text: "Today's topic is language learning. Specifically, we'll discuss techniques and common challenges." },
+                { start: 10, end: 15, text: "Learning a new language can be challenging. However, it's incredibly rewarding. The benefits are numerous." },
+                { start: 15, end: 20, text: "Let's begin with immersion. Surround yourself with the language. Listen, read, and speak daily." },
+                { start: 20, end: 25, text: "First strategy: media consumption. Watch shows, listen to podcasts. Try to understand native speakers." },
+                { start: 25, end: 30, text: "Second approach: practice speaking. Find language partners. Don't worry about perfection - just communicate!" },
+                { start: 30, end: 35, text: "Third method: vocabulary building. Learn words in context. Use flashcards for memorization." },
+                { start: 35, end: 40, text: "Common mistake: focusing too much on grammar. While important, communication should come first. Fluency develops over time." },
+                { start: 40, end: 45, text: "Set achievable goals. For example: learn 10 words daily. Have a 5-minute conversation. Track your progress weekly." },
+                { start: 45, end: 50, text: "Celebrate milestones! Finished a book? Had a conversation? These victories matter. They keep you motivated." },
+                { start: 50, end: 55, text: "Consistency is key. Practice regularly, even if briefly. Patience is equally important - progress takes time." },
+                { start: 55, end: 60, text: "Remember: language learning opens doors. It connects cultures. It's a lifelong journey worth taking." }
+            ];
+            const mockTranslations = {
+                en: mockCaptions,
+                es: [
+                    { start: 0, end: 5, text: "¡Hola a todos! Bienvenidos a nuestro canal. Estamos encantados de tenerlos aquí." },
+                    { start: 5, end: 10, text: "El tema de hoy es aprender idiomas. Específicamente, hablaremos de técnicas y desafíos comunes." },
+                    { start: 10, end: 15, text: "Aprender un nuevo idioma puede ser difícil. Sin embargo, es muy gratificante. Los beneficios son numerosos." },
+                    { start: 15, end: 20, text: "Comencemos con la inmersión. Rodéate del idioma. Escucha, lee y habla diariamente." },
+                    { start: 20, end: 25, text: "Primera estrategia: consumir medios. Ve programas, escucha podcasts. Intenta entender a hablantes nativos." },
+                    { start: 25, end: 30, text: "Segundo enfoque: practicar hablando. Encuentra compañeros de idioma. No te preocupes por la perfección, ¡solo comunícate!" },
+                    { start: 30, end: 35, text: "Tercer método: ampliar vocabulario. Aprende palabras en contexto. Usa tarjetas para memorizar." },
+                    { start: 35, end: 40, text: "Error común: enfocarse demasiado en gramática. Aunque importante, la comunicación debe ser primero. La fluidez se desarrolla con el tiempo." },
+                    { start: 40, end: 45, text: "Establece metas alcanzables. Por ejemplo: aprende 10 palabras diarias. Ten una conversación de 5 minutos. Registra tu progreso semanalmente." },
+                    { start: 45, end: 50, text: "¡Celebra los logros! ¿Terminaste un libro? ¿Tuviste una conversación? Estas victorias importan. Te mantienen motivado." },
+                    { start: 50, end: 55, text: "La constancia es clave. Practica regularmente, aunque sea poco. La paciencia es igual de importante - el progreso lleva tiempo." },
+                    { start: 55, end: 60, text: "Recuerda: aprender idiomas abre puertas. Conecta culturas. Es un viaje que vale la pena emprender." }
+                ],
+                fr: [
+                    { start: 0, end: 5, text: "Bonjour à tous et bienvenue sur notre chaîne." },
+                    { start: 5, end: 10, text: "Aujourd'hui, nous allons parler de l'apprentissage des langues." },
+                    { start: 10, end: 15, text: "Apprendre une nouvelle langue peut être difficile mais gratifiant." },
+                    { start: 15, end: 20, text: "Parlons de quelques stratégies efficaces." },
+                    { start: 20, end: 25, text: "Tout d'abord, immergez-vous autant que possible dans la langue." },
+                    { start: 25, end: 30, text: "Regardez des films, écoutez de la musique et essayez de penser dans la langue." },
+                    { start: 30, end: 35, text: "Deuxièmement, pratiquez en parlant avec des locuteurs natifs." },
+                    { start: 35, end: 40, text: "N'ayez pas peur de faire des erreurs, cela fait partie du processus." },
+                    { start: 40, end: 45, text: "Troisièmement, fixez-vous des objectifs réalistes et suivez vos progrès." },
+                    { start: 45, end: 50, text: "Célébrez les petites victoires pour rester motivé." },
+                    { start: 50, end: 55, text: "Enfin, soyez constant et patient avec vous-même." },
+                    { start: 55, end: 60, text: "L'apprentissage d'une langue est un voyage, pas une destination." }
+                ]
+            };
+            // Language names for display
+            const languageNames = {
+                en: "English",
+                es: "Spanish",
+                fr: "French",
+                de: "German",
+                ja: "Japanese",
+                ko: "Korean",
+                zh: "Chinese",
+                pt: "Portuguese",
+                ru: "Russian",
+                ar: "Arabic"
+            };
+            // Initialize the page
+            function init() {
+                // Set up event listeners
+                loadVideoBtn.addEventListener('click', loadVideo);
+                languageSelect.addEventListener('change', updateTranslation);
+                syncCaptionsBtn.addEventListener('click', toggleSyncCaptions);
+                highlightCurrentBtn.addEventListener('click', toggleHighlightCurrent);
+                fontSizePlusBtn.addEventListener('click', increaseFontSize);
+                fontSizeMinusBtn.addEventListener('click', decreaseFontSize);
+                // New event listeners for saved captions
+                document.getElementById('copySRT').addEventListener('click', copyAsSRT);
+                document.getElementById('copyExcel').addEventListener('click', copyAsExcel);
+                document.getElementById('copyTSV').addEventListener('click', copyAsTSV);
+                document.getElementById('clearSaved').addEventListener('click', clearSavedCaptions);
+                // For demo purposes, we'll use mock data
+                // In a real implementation, you would:
+                // 1. Extract video ID from URL
+                // 2. Use YouTube API to get captions
+                // 3. Display them in the interface
+            }
+            // Load video from URL
+            function loadVideo() {
+                const url = youtubeUrlInput.value.trim();
+                if (!url) {
+                    showError("Please enter a YouTube video URL");
+                    return;
+                }
+                // Validate YouTube URL
+                const videoId = extractVideoId(url);
+                if (!videoId) {
+                    showError("Please enter a valid YouTube video URL");
+                    return;
+                }
+                // Show loading state
+                btnText.textContent = "Loading...";
+                loadingSpinner.classList.remove('hidden');
+                loadVideoBtn.disabled = true;
+                // In a real implementation, you would:
+                // 1. Check if captions are available for this video
+                // 2. Fetch the captions
+                // 3. Process them
+                // For demo purposes, we'll use a timeout to simulate loading
+                setTimeout(() => {
+                    // Hide loading state
+                    btnText.textContent = "Load Video";
+                    loadingSpinner.classList.add('hidden');
+                    loadVideoBtn.disabled = false;
+                    // Show video and captions
+                    showVideo(videoId);
+                    processCaptions();
+                    // Hide any previous error
+                    hideError();
+                }, 1500);
+            }
+            // Extract video ID from URL
+            function extractVideoId(url) {
+                // This is a simplified version - real implementation would handle more URL formats
+                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;
+            }
+            // Show video in player
+            function showVideo(videoId) {
+                youtubePlayer.src = `https://www.youtube.com/embed/${videoId}?enablejsapi=1`;
+                videoContainer.classList.remove('hidden');
+                captionSection.classList.remove('hidden');
+            }
+            // Process captions (mock data for demo)
+            function processCaptions() {
+                captions = mockCaptions;
+                translatedCaptionData = mockTranslations;
+                // Display original language
+                originalLanguage.textContent = `Language: ${languageNames['en']}`;
+                // Display merged captions
+                displayMergedCaptions();
+            }
+            // Display merged captions
+            function displayMergedCaptions() {
+                mergedCaptions.innerHTML = '';
+                const selectedLanguage = languageSelect.value;
+                const translations = translatedCaptionData[selectedLanguage] || captions;
+                captions.forEach((caption, index) => {
+                    const captionElement = document.createElement('div');
+                    captionElement.className = 'mb-2 p-2 rounded hover:bg-gray-100 transition cursor-pointer border-b border-gray-200';
+                    captionElement.dataset.start = caption.start;
+                    captionElement.dataset.end = caption.end;
+                    // Original caption
+                    const originalText = document.createElement('div');
+                    originalText.className = 'text-gray-700 mb-1';
+                    originalText.textContent = caption.text;
+                    // Translated caption
+                    const translatedText = document.createElement('div');
+                    translatedText.className = 'text-gray-500 italic';
+                    translatedText.textContent = translations[index]?.text || caption.text;
+                    captionElement.appendChild(originalText);
+                    captionElement.appendChild(translatedText);
+                    // Click on caption to seek to that time
+                    captionElement.addEventListener('click', () => {
+                        if (player) {
+                            player.seekTo(caption.start);
+                        }
+                    });
+                    mergedCaptions.appendChild(captionElement);
+                });
+            }
+            // Update translation based on selected language
+            function updateTranslation() {
+                displayMergedCaptions();
+            }
+            // Toggle caption syncing with video
+            function toggleSyncCaptions() {
+                // In a real implementation, this would:
+                // 1. Track video playback position
+                // 2. Highlight the current caption in both columns
+                // 3. Auto-scroll to keep current caption visible
+                alert("Caption syncing would be implemented with YouTube Player API in a real application");
+            }
+            // Toggle highlighting of current caption
+            function toggleHighlightCurrent() {
+                highlightEnabled = !highlightEnabled;
+                if (highlightEnabled) {
+                    highlightCurrentBtn.classList.add('bg-green-700');
+                    highlightCurrentBtn.classList.remove('bg-green-600');
+                } else {
+                    highlightCurrentBtn.classList.remove('bg-green-700');
+                    highlightCurrentBtn.classList.add('bg-green-600');
+                    // Remove all highlights
+                    document.querySelectorAll('.highlight').forEach(el => {
+                        el.classList.remove('highlight');
+                    });
+                }
+            }
+            // Increase font size for captions
+            function increaseFontSize() {
+                currentFontSize += 1;
+                updateCaptionFontSize();
+            }
+            // Decrease font size for captions
+            function decreaseFontSize() {
+                if (currentFontSize > 12) {
+                    currentFontSize -= 1;
+                    updateCaptionFontSize();
+                }
+            }
+            // Update font size for caption containers
+            function updateCaptionFontSize() {
+                const captionContainers = document.querySelectorAll('.caption-container');
+                captionContainers.forEach(container => {
+                    container.style.fontSize = `${currentFontSize}px`;
+                });
+            }
+            // Show error message
+            function showError(message) {
+                errorText.textContent = message;
+                errorMessage.classList.remove('hidden');
+            }
+            // Hide error message
+            function hideError() {
+                errorMessage.classList.add('hidden');
+            }
+            // Array to store saved captions
+            let savedCaptions = [];
+            // Show the saved captions section when first caption is saved
+            function showSavedCaptionsSection() {
+                document.getElementById('savedCaptionsSection').classList.remove('hidden');
+            }
+            // Save caption when clicked
+            function saveCaption(captionElement) {
+                const start = captionElement.dataset.start;
+                const end = captionElement.dataset.end;
+                const originalText = captionElement.querySelector('div:first-child').textContent;
+                const translatedText = captionElement.querySelector('div:last-child').textContent;
+                // Add to saved captions array
+                savedCaptions.push({
+                    start,
+                    end,
+                    originalText,
+                    translatedText
+                });
+                // Update saved captions display
+                updateSavedCaptionsDisplay();
+                // Show the section if it was hidden
+                showSavedCaptionsSection();
+            }
+            // Update the saved captions display
+            function updateSavedCaptionsDisplay() {
+                const container = document.getElementById('savedCaptionsList');
+                container.innerHTML = '';
+                savedCaptions.forEach((caption, index) => {
+                    const div = document.createElement('div');
+                    div.className = 'mb-3 p-2 bg-white rounded border border-gray-200';
+                    div.innerHTML = `
+                        <div class="flex justify-between text-sm text-gray-500 mb-1">
+                            <span>${formatTime(caption.start)} → ${formatTime(caption.end)}</span>
+                            <button class="text-red-500 hover:text-red-700" data-index="${index}">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
+                        <div class="text-gray-700">${caption.originalText}</div>
+                        <div class="text-gray-500 italic">${caption.translatedText}</div>
+                    `;
+                    // Add click handler for delete button
+                    div.querySelector('button').addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        savedCaptions.splice(index, 1);
+                        updateSavedCaptionsDisplay();
+                    });
+                    container.appendChild(div);
+                });
+            }
+            // Format seconds into SRT time format (HH:MM:SS,mmm)
+            function formatTime(seconds) {
+                const date = new Date(0);
+                date.setSeconds(seconds);
+                const timeString = date.toISOString().substr(11, 12);
+                return timeString.replace('.', ',');
+            }
+            // Copy as SRT format
+            function copyAsSRT() {
+                let srtContent = '';
+                savedCaptions.forEach((caption, index) => {
+                    srtContent += `${index + 1}\n`;
+                    srtContent += `${formatTime(caption.start)} --> ${formatTime(caption.end)}\n`;
+                    srtContent += `${caption.originalText}\n${caption.translatedText}\n\n`;
+                });
+                navigator.clipboard.writeText(srtContent.trim());
+                alert('Copied as SRT to clipboard!');
+            }
+            // Copy as Excel (CSV) format
+            function copyAsExcel() {
+                let csvContent = 'Start Time,End Time,Original Text,Translated Text\n';
+                savedCaptions.forEach(caption => {
+                    csvContent += `"${formatTime(caption.start)}","${formatTime(caption.end)}","${caption.originalText.replace(/"/g, '""')}","${caption.translatedText.replace(/"/g, '""')}"\n`;
+                });
+                navigator.clipboard.writeText(csvContent);
+                alert('Copied as CSV to clipboard!');
+            }
+            // Copy as TSV format
+            function copyAsTSV() {
+                let tsvContent = 'Start Time\tEnd Time\tOriginal Text\tTranslated Text\n';
+                savedCaptions.forEach(caption => {
+                    tsvContent += `${formatTime(caption.start)}\t${formatTime(caption.end)}\t${caption.originalText}\t${caption.translatedText}\n`;
+                });
+                navigator.clipboard.writeText(tsvContent);
+                alert('Copied as TSV to clipboard!');
+            }
+            // Clear all saved captions
+            function clearSavedCaptions() {
+                savedCaptions = [];
+                updateSavedCaptionsDisplay();
+            }
+            // Modify the caption click handler in displayMergedCaptions()
+            function displayMergedCaptions() {
+                mergedCaptions.innerHTML = '';
+                const selectedLanguage = languageSelect.value;
+                const translations = translatedCaptionData[selectedLanguage] || captions;
+                captions.forEach((caption, index) => {
+                    const captionElement = document.createElement('div');
+                    captionElement.className = 'mb-1 p-1 rounded hover:bg-gray-100 transition cursor-pointer border-b border-gray-200';
+                    captionElement.dataset.start = caption.start;
+                    captionElement.dataset.end = caption.end;
+                    // Original caption
+                    const originalText = document.createElement('div');
+                    originalText.className = 'text-gray-700 mb-0.5';
+                    originalText.textContent = caption.text;
+                    // Translated caption
+                    const translatedText = document.createElement('div');
+                    translatedText.className = 'text-gray-500 italic';
+                    translatedText.textContent = translations[index]?.text || caption.text;
+                    captionElement.appendChild(originalText);
+                    captionElement.appendChild(translatedText);
+                    // Click on caption to seek to that time and save it
+                    captionElement.addEventListener('click', () => {
+                        if (player) {
+                            player.seekTo(caption.start);
+                        }
+                        // Toggle highlight on the clicked caption
+                        if (captionElement.classList.contains('bg-yellow-100')) {
+                            captionElement.classList.remove('bg-yellow-100', 'border-yellow-300');
+                        } else {
+                            captionElement.classList.add('bg-yellow-100', 'border-yellow-300');
+                        }
+                        // Save the caption
+                        saveCaption(captionElement);
+                    });
+                    mergedCaptions.appendChild(captionElement);
+                });
+            }
+            // Initialize the page
+            init();
+        });
+    </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>
+</html>