Spaces:

Tamazight-NLP
/

CTM-to-SRT

Running

App Files Files Community

abdelhaqueidali commited on Feb 13

Commit

d8e57c8

verified ·

1 Parent(s): f36a283

Replacing the transcript viewer of the SRT result with a text area with a copy button

Browse files

Files changed (1) hide show

index.html +54 -75

index.html CHANGED Viewed

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CTM to SRT Converter</title>
     <style>
-        /* ... (Same CSS as before, no changes) ... */
         body {
             font-family: sans-serif;
             margin: 20px;
@@ -32,39 +31,7 @@
         button:hover {
             background-color: #45a049;
         }
-        #output {
-            margin-top: 20px;
-            border: 1px solid #ddd;
-            padding: 10px;
-            border-radius: 4px;
-        }
-       .segment {
-            padding: 5px;
-            margin-bottom: 5px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            cursor: pointer; /* Optional, since there's no audio */
-            transition: background-color 0.2s ease;
-        }
-       .segment:hover {
-           background-color:#f0f8ff;
-          }
-        .playing {  /* Keep for potential future use/consistency */
-            background-color: #e0f7fa;
-        }
-        .time {
-            color: #888;
-            margin-right: 10px;
-            display: inline-block;
-            min-width: 60px;
-        }
-         .text {
-            display: inline-block;
-         }
         #downloadBtn {
             margin-top: 10px;
@@ -77,6 +44,28 @@
         #ctmFileName{
              margin-bottom: 10px;
         }
     </style>
 </head>
 <body>
@@ -91,11 +80,14 @@
 <div id="ctmFileName"></div>
-<button id="convertBtn">Convert</button>  <!-- Single Convert button -->
 <button id="downloadBtn" class="hidden">Download SRT</button>
-<h2>Transcript</h2>
-<div id="transcript"></div>
 <script>
     const ctmInput = document.getElementById('ctmInput');
@@ -103,7 +95,8 @@
     const ctmFileName = document.getElementById('ctmFileName');
     const convertBtn = document.getElementById('convertBtn');
     const downloadBtn = document.getElementById('downloadBtn');
-    const transcriptDiv = document.getElementById('transcript');
     let segments = [];
     let fileData = null; // Store file data
@@ -129,28 +122,6 @@
         return segments;
     }
-    function createTranscript(segmentsData) {
-        transcriptDiv.innerHTML = '';
-        segmentsData.forEach(segment => {
-            const segmentDiv = document.createElement('div');
-            segmentDiv.classList.add('segment');
-            const timeSpan = document.createElement('span');
-            timeSpan.classList.add('time');
-            timeSpan.textContent = segment.startTime.toFixed(2) + 's ';
-            const textSpan = document.createElement('span');
-            textSpan.classList.add('text');
-            textSpan.textContent = segment.text;
-            segmentDiv.appendChild(timeSpan);
-            segmentDiv.appendChild(textSpan);
-            transcriptDiv.appendChild(segmentDiv);
-        });
-    }
     function generateSRT(segments) {
         let srtContent = '';
         segments.forEach((segment, index) => {
@@ -170,29 +141,27 @@
         return `${hh}:${mm}:${ss},${ms}`;
     }
-    function processData() { // Unified processing function
         let ctmData = null;
         if (fileData) {
-          ctmData = fileData; // Prioritize file data
-        }
-        else{
-          ctmData = ctmInput.value;
         }
         if (ctmData) {
             segments = parseCTM(ctmData);
             if (segments.length > 0) {
-                createTranscript(segments);
                 downloadBtn.classList.remove('hidden');
             } else {
-                transcriptDiv.innerHTML = '<p>No valid CTM data found.</p>';
                 downloadBtn.classList.add('hidden');
             }
-        }
-        else{
-            transcriptDiv.innerHTML = '<p>No CTM data provided.</p>'; //if no ctm provided
             downloadBtn.classList.add('hidden');
         }
     }
@@ -209,7 +178,7 @@
             };
             reader.onerror = () => {
               console.error("Error reading CTM file.");
-              transcriptDiv.innerHTML = '<p>Error reading CTM file.</p>';
               downloadBtn.classList.add('hidden');
               fileData = null; // Reset on error
             };
@@ -221,18 +190,17 @@
         }
     });
-    convertBtn.addEventListener('click', processData); // Call unified processing
     downloadBtn.addEventListener('click', () => {
-        const srtData = generateSRT(segments);
         const blob = new Blob([srtData], { type: 'text/srt' });
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
         a.href = url;
         let srtFilename = "transcript.srt";
-        if (segments.length > 0) {
             srtFilename = segments[0].filename + ".srt";
         }
@@ -243,6 +211,17 @@
         URL.revokeObjectURL(url);
     });
 </script>
 </body>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CTM to SRT Converter</title>
     <style>
         body {
             font-family: sans-serif;
             margin: 20px;
         button:hover {
             background-color: #45a049;
         }
         #downloadBtn {
             margin-top: 10px;
         #ctmFileName{
              margin-bottom: 10px;
         }
+         #srtOutput {
+            margin-top: 10px;
+            min-height: 200px; /* Added for better visibility */
+        }
+        #copyBtn {
+           background-color: #2196F3; /* Different color for distinction */
+           margin-left: 10px;      /* Space between buttons */
+        }
+        #copyBtn:hover{
+           background-color: #0d8bf2;
+        }
+        /* Styling for the container holding the textarea and copy button */
+        .output-container {
+            display: flex;
+            align-items: flex-start; /* Align items to the top */
+            gap: 10px;             /* Space between textarea and button */
+        }
+        .output-container textarea {
+            flex-grow: 1; /* Allow textarea to take up remaining space */
+        }
     </style>
 </head>
 <body>
 <div id="ctmFileName"></div>
+<button id="convertBtn">Convert</button>
 <button id="downloadBtn" class="hidden">Download SRT</button>
+<h2>SRT Output</h2>
+<div class="output-container">
+    <textarea id="srtOutput" readonly></textarea>
+    <button id="copyBtn">Copy</button>
+</div>
 <script>
     const ctmInput = document.getElementById('ctmInput');
     const ctmFileName = document.getElementById('ctmFileName');
     const convertBtn = document.getElementById('convertBtn');
     const downloadBtn = document.getElementById('downloadBtn');
+    const srtOutput = document.getElementById('srtOutput'); // SRT output textarea
+    const copyBtn = document.getElementById('copyBtn');   // Copy button
     let segments = [];
     let fileData = null; // Store file data
         return segments;
     }
     function generateSRT(segments) {
         let srtContent = '';
         segments.forEach((segment, index) => {
         return `${hh}:${mm}:${ss},${ms}`;
     }
+    function processData() {
         let ctmData = null;
         if (fileData) {
+            ctmData = fileData; // Prioritize file data
+        } else {
+            ctmData = ctmInput.value;
         }
         if (ctmData) {
             segments = parseCTM(ctmData);
             if (segments.length > 0) {
+                const srtData = generateSRT(segments); // Generate SRT content
+                srtOutput.value = srtData;          // Display in textarea
                 downloadBtn.classList.remove('hidden');
             } else {
+                srtOutput.value = 'No valid CTM data found.';
                 downloadBtn.classList.add('hidden');
             }
+        } else {
+            srtOutput.value = 'No CTM data provided.';
             downloadBtn.classList.add('hidden');
         }
     }
             };
             reader.onerror = () => {
               console.error("Error reading CTM file.");
+              srtOutput.value = 'Error reading CTM file.';
               downloadBtn.classList.add('hidden');
               fileData = null; // Reset on error
             };
         }
     });
+    convertBtn.addEventListener('click', processData);
     downloadBtn.addEventListener('click', () => {
+        const srtData = srtOutput.value; // Get SRT data from textarea
         const blob = new Blob([srtData], { type: 'text/srt' });
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
         a.href = url;
         let srtFilename = "transcript.srt";
+        if (segments.length > 0 && segments[0].filename) {
             srtFilename = segments[0].filename + ".srt";
         }
         URL.revokeObjectURL(url);
     });
+    // Copy button functionality
+    copyBtn.addEventListener('click', () => {
+        srtOutput.select(); // Select the text in the textarea
+        document.execCommand('copy'); // Execute the copy command
+        // Optional: Provide user feedback (e.g., change button text)
+        copyBtn.textContent = 'Copied!';
+        setTimeout(() => {
+           copyBtn.textContent = 'Copy';
+        }, 2000);  // Reset after 2 seconds
+    });
 </script>
 </body>