Spaces:

yassinovich
/

Audio2srt

Sleeping

App Files Files Community

yassinovich commited on 30 days ago

Commit

98aa9d0

verified ·

1 Parent(s): 18b88bf

Upload 3 files

Browse files

Files changed (4) hide show

.gitattributes +2 -0
data/data_test_audio.flac +3 -0
data/screenshot.png +3 -0
templates/index.html +694 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+data/data_test_audio.flac filter=lfs diff=lfs merge=lfs -text
+data/screenshot.png filter=lfs diff=lfs merge=lfs -text

data/data_test_audio.flac ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:63a4b1e4c1dc655ac70961ffbf518acd249df237e5a0152faae9a4a836949715
+size 1152693

data/screenshot.png ADDED Viewed

Git LFS Details

SHA256: 20bbb82cbeb8324646e282f014d3f25bc1b92669c3d65cf775c2d5f39e923fd2
Pointer size: 131 Bytes
Size of remote file: 563 kB

templates/index.html ADDED Viewed

	@@ -0,0 +1,694 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Audio to SRT Converter</title>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #4f46e5;
+            --primary-hover: #4338ca;
+            --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --glass-bg: rgba(255, 255, 255, 0.95);
+            --text-color: #1f2937;
+            --error-color: #ef4444;
+        }
+        body {
+            font-family: 'Outfit', sans-serif;
+            background: var(--bg-gradient);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+            color: var(--text-color);
+        }
+        .container {
+            background: var(--glass-bg);
+            padding: 3rem;
+            border-radius: 24px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+            width: 100%;
+            max-width: 480px;
+            text-align: center;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            transition: transform 0.3s ease;
+        }
+        .container:hover {
+            transform: translateY(-5px);
+        }
+        h1 {
+            color: var(--text-color);
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+            font-size: 2rem;
+        }
+        .subtitle {
+            color: #6b7280;
+            margin-bottom: 2rem;
+            font-weight: 300;
+        }
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+        }
+        .file-input-wrapper {
+            position: relative;
+            width: 100%;
+        }
+        input[type="file"] {
+            display: none;
+        }
+        .drop-zone {
+            width: 100%;
+            padding: 3rem 2rem;
+            border: 3px dashed #cbd5e1;
+            border-radius: 16px;
+            background-color: #f8fafc;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-sizing: border-box;
+            text-align: center;
+            position: relative;
+        }
+        .drop-zone:hover {
+            border-color: var(--primary-color);
+            background-color: #f1f5f9;
+            transform: scale(1.02);
+        }
+        .drop-zone.drag-over {
+            border-color: var(--primary-color);
+            background-color: #eef2ff;
+            border-style: solid;
+            box-shadow: 0 0 20px rgba(79, 70, 229, 0.2);
+        }
+        .drop-zone-icon {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            opacity: 0.6;
+        }
+        .drop-zone-text {
+            font-size: 1.1rem;
+            color: var(--text-color);
+            font-weight: 500;
+            margin-bottom: 0.5rem;
+        }
+        .drop-zone-subtext {
+            font-size: 0.9rem;
+            color: #6b7280;
+        }
+        .file-name {
+            margin-top: 1rem;
+            padding: 0.75rem;
+            background-color: #e0e7ff;
+            border-radius: 8px;
+            color: var(--primary-color);
+            font-weight: 500;
+            display: none;
+            word-break: break-word;
+        }
+        .options-grid {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 1rem;
+            text-align: left;
+        }
+        .option-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+        .option-group label {
+            font-size: 0.9rem;
+            font-weight: 500;
+            color: #6b7280;
+            margin-left: 0.25rem;
+        }
+        select {
+            width: 100%;
+            padding: 0.875rem 1rem;
+            border: 1px solid #e2e8f0;
+            border-radius: 12px;
+            background-color: white;
+            font-family: inherit;
+            font-size: 1rem;
+            cursor: pointer;
+            appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 1rem center;
+            background-size: 1.5em;
+            transition: all 0.2s ease;
+        }
+        select:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+        }
+        button {
+            background-color: var(--primary-color);
+            color: white;
+            padding: 1rem;
+            border: none;
+            border-radius: 12px;
+            cursor: pointer;
+            font-size: 1.1rem;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        button:hover {
+            background-color: var(--primary-hover);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+        }
+        button:disabled {
+            background-color: #9ca3af;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        .note {
+            margin-top: 1.5rem;
+            font-size: 0.9rem;
+            color: #6b7280;
+            line-height: 1.5;
+        }
+        #error-message {
+            color: var(--error-color);
+            font-size: 0.9rem;
+            margin-top: 0.5rem;
+            display: none;
+            padding: 0.5rem;
+            background-color: #fef2f2;
+            border-radius: 8px;
+            border: 1px solid #fee2e2;
+        }
+        /* Loading Spinner */
+        .spinner {
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 1s ease-in-out infinite;
+            display: none;
+        }
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+        .hidden {
+            display: none !important;
+        }
+        /* Social Links */
+        .social-links {
+            margin-top: 2rem;
+            display: flex;
+            justify-content: center;
+            gap: 1.5rem;
+            padding-top: 1.5rem;
+            border-top: 1px solid rgba(0, 0, 0, 0.1);
+        }
+        .social-links a {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 48px;
+            height: 48px;
+            border-radius: 12px;
+            background-color: #f8fafc;
+            transition: all 0.3s ease;
+            text-decoration: none;
+        }
+        .social-links a:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+        .social-links a.github:hover {
+            background-color: #24292e;
+        }
+        .social-links a.linkedin:hover {
+            background-color: #0077b5;
+        }
+        .social-links svg {
+            width: 24px;
+            height: 24px;
+            fill: #6b7280;
+            transition: fill 0.3s ease;
+        }
+        .social-links a:hover svg {
+            fill: white;
+        }
+        /* Modal Styles */
+        .modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(5px);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+            animation: fadeIn 0.3s ease;
+        }
+        .modal-overlay.active {
+            display: flex;
+        }
+        .modal-content {
+            background: white;
+            padding: 2.5rem;
+            border-radius: 20px;
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
+            max-width: 500px;
+            width: 90%;
+            position: relative;
+            animation: slideUp 0.4s ease;
+            text-align: center;
+        }
+        .modal-close {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            color: #9ca3af;
+            cursor: pointer;
+            padding: 0.5rem;
+            line-height: 1;
+            transition: color 0.2s ease;
+            width: auto;
+        }
+        .modal-close:hover {
+            color: #4b5563;
+            background: none;
+            transform: none;
+            box-shadow: none;
+        }
+        .modal-emoji {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+        }
+        .modal-text {
+            font-size: 1.2rem;
+            color: var(--text-color);
+            margin-bottom: 1.5rem;
+            line-height: 1.6;
+            font-weight: 500;
+        }
+        .linkedin-btn {
+            background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
+            color: white;
+            padding: 1rem 2rem;
+            border: none;
+            border-radius: 12px;
+            cursor: pointer;
+            font-size: 1.1rem;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            text-decoration: none;
+            box-shadow: 0 4px 12px rgba(0, 119, 181, 0.3);
+        }
+        .linkedin-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0, 119, 181, 0.4);
+        }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+        @keyframes slideUp {
+            from {
+                transform: translateY(30px);
+                opacity: 0;
+            }
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Audio to SRT</h1>
+        <p class="subtitle">Transform your audio into subtitles instantly</p>
+        <form id="uploadForm">
+            <div class="file-input-wrapper">
+                <input type="file" id="fileInput" name="file" accept="audio/*,video/*" required>
+                <div class="drop-zone" id="dropZone">
+                    <div class="drop-zone-icon">📁</div>
+                    <div class="drop-zone-text">Click to browse or drag & drop</div>
+                    <div class="drop-zone-subtext">Upload your audio or video file</div>
+                    <div class="file-name" id="fileName"></div>
+                </div>
+            </div>
+            <div class="options-grid">
+                <div class="option-group">
+                    <label for="languageSelect">Language</label>
+                    <select name="language" id="languageSelect">
+                        <option value="en" selected>English</option>
+                        <option value="es">Spanish</option>
+                        <option value="fr">French</option>
+                        <option value="de">German</option>
+                        <option value="it">Italian</option>
+                        <option value="nl">Dutch</option>
+                        <option value="pt">Portuguese</option>
+                        <option value="ja">Japanese</option>
+                        <option value="zh">Chinese</option>
+                        <option value="ru">Russian</option>
+                    </select>
+                </div>
+                <div class="option-group">
+                    <label for="modelSelect">Model</label>
+                    <select name="model_type" id="modelSelect">
+                        <option value="accurate" selected>Accurate (Large)</option>
+                        <option value="fast">Fast (Base)</option>
+                    </select>
+                </div>
+                <div class="option-group">
+                    <label for="durationSelect">Line Duration</label>
+                    <select name="max_duration" id="durationSelect">
+                        <option value="1">1 second</option>
+                        <option value="2" selected>2 seconds</option>
+                        <option value="3">3 seconds</option>
+                        <option value="4">4 seconds</option>
+                        <option value="5">5 seconds</option>
+                    </select>
+                </div>
+            </div>
+            <div id="error-message"></div>
+            <button type="button" id="submitBtn">
+                <span class="spinner" id="spinner"></span>
+                <span id="btnText">Convert to SRT</span>
+            </button>
+        </form>
+        <p class="note">
+            Supported formats: MP3, WAV, FLAC, MP4, MKV, MOV, M4A, OGG, WEBM.<br>
+            Large files may take a few minutes to process.
+        </p>
+        <div class="social-links">
+            <a href="https://github.com/Jamie-Wubben/audio2srt" target="_blank" rel="noopener noreferrer" class="github"
+                aria-label="GitHub">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                        d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                </svg>
+            </a>
+            <a href="https://www.linkedin.com/in/jamie-wubben/" target="_blank" rel="noopener noreferrer"
+                class="linkedin" aria-label="LinkedIn">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                        d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
+                </svg>
+            </a>
+        </div>
+    </div>
+    <!-- Modal Popup -->
+    <div class="modal-overlay" id="modalOverlay">
+        <div class="modal-content">
+            <button class="modal-close" id="modalClose" aria-label="Close">✕</button>
+            <div class="modal-emoji">🤖</div>
+            <p class="modal-text" id="modalText">I've got the heavy lifting—take a sec, read this post, and drop a like!
+            </p>
+            <a href="https://www.linkedin.com/posts/jamie-wubben_ai-programming-futureofwork-activity-7399571504486617088-vrM0"
+                target="_blank" rel="noopener noreferrer" class="linkedin-btn" id="linkedinBtn">
+                📖 Read the Post
+            </a>
+        </div>
+    </div>
+    <script>
+        const form = document.getElementById('uploadForm');
+        const fileInput = document.getElementById('fileInput');
+        const dropZone = document.getElementById('dropZone');
+        const fileName = document.getElementById('fileName');
+        const submitBtn = document.getElementById('submitBtn');
+        const spinner = document.getElementById('spinner');
+        const btnText = document.getElementById('btnText');
+        const errorMessage = document.getElementById('error-message');
+        const ALLOWED_EXTENSIONS = ['mp3', 'wav', 'flac', 'mp4', 'mkv', 'mov', 'm4a', 'ogg', 'webm'];
+        function showError(msg) {
+            errorMessage.textContent = msg;
+            errorMessage.style.display = 'block';
+            setTimeout(() => {
+                errorMessage.style.display = 'none';
+            }, 5000);
+        }
+        function validateFile(file) {
+            if (!file) return false;
+            const extension = file.name.split('.').pop().toLowerCase();
+            if (!ALLOWED_EXTENSIONS.includes(extension)) {
+                showError(`Invalid file type. Allowed: ${ALLOWED_EXTENSIONS.join(', ')}`);
+                return false;
+            }
+            return true;
+        }
+        function displayFileName(file) {
+            if (file) {
+                fileName.textContent = `📄 ${file.name}`;
+                fileName.style.display = 'block';
+            } else {
+                fileName.style.display = 'none';
+            }
+        }
+        // Click to browse
+        dropZone.addEventListener('click', () => {
+            fileInput.click();
+        });
+        // File input change
+        fileInput.addEventListener('change', function () {
+            const file = this.files[0];
+            if (file) {
+                if (validateFile(file)) {
+                    displayFileName(file);
+                } else {
+                    this.value = ''; // Clear input
+                    displayFileName(null);
+                }
+            }
+        });
+        // Drag and drop handlers
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, preventDefaults, false);
+        });
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropZone.addEventListener(eventName, () => {
+                dropZone.classList.add('drag-over');
+            });
+        });
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, () => {
+                dropZone.classList.remove('drag-over');
+            });
+        });
+        dropZone.addEventListener('drop', (e) => {
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                const file = files[0];
+                // Create a new FileList-like object
+                const dataTransfer = new DataTransfer();
+                dataTransfer.items.add(file);
+                fileInput.files = dataTransfer.files;
+                if (validateFile(file)) {
+                    displayFileName(file);
+                } else {
+                    fileInput.value = '';
+                    displayFileName(null);
+                }
+            }
+        });
+        // Modal elements
+        const modalOverlay = document.getElementById('modalOverlay');
+        const modalClose = document.getElementById('modalClose');
+        const modalText = document.getElementById('modalText');
+        const linkedinBtn = document.getElementById('linkedinBtn');
+        // Close modal
+        modalClose.addEventListener('click', () => {
+            modalOverlay.classList.remove('active');
+        });
+        // Close modal when clicking outside
+        modalOverlay.addEventListener('click', (e) => {
+            if (e.target === modalOverlay) {
+                modalOverlay.classList.remove('active');
+            }
+        });
+        // Update text when LinkedIn button is clicked
+        linkedinBtn.addEventListener('click', () => {
+            modalText.textContent = 'Thanks for checking it out! Your file will be ready soon. 🚀';
+        });
+        submitBtn.addEventListener('click', async function (e) {
+            e.preventDefault();
+            // Check form validity (for required fields)
+            if (!form.checkValidity()) {
+                form.reportValidity();
+                return;
+            }
+            const file = fileInput.files[0];
+            if (!file) {
+                showError('Please select a file first.');
+                return;
+            }
+            // Show modal immediately
+            modalOverlay.classList.add('active');
+            // UI Loading State
+            submitBtn.disabled = true;
+            spinner.style.display = 'block';
+            btnText.textContent = 'Transcribing...';
+            errorMessage.style.display = 'none';
+            const formData = new FormData(form);
+            try {
+                const response = await fetch('/transcribe', {
+                    method: 'POST',
+                    body: formData
+                });
+                if (!response.ok) {
+                    const errorText = await response.text();
+                    throw new Error(errorText || 'Transcription failed');
+                }
+                // Handle successful download
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.style.display = 'none';
+                a.href = url;
+                // Get filename from header or default
+                const contentDisposition = response.headers.get('Content-Disposition');
+                let filename = 'output.srt';
+                if (contentDisposition) {
+                    const filenameMatch = contentDisposition.match(/filename="?([^"]+)"?/);
+                    if (filenameMatch.length === 2)
+                        filename = filenameMatch[1];
+                }
+                a.download = filename;
+                document.body.appendChild(a);
+                a.click();
+                window.URL.revokeObjectURL(url);
+                // Close modal after successful download
+                modalOverlay.classList.remove('active');
+            } catch (error) {
+                showError(error.message);
+                modalOverlay.classList.remove('active');
+            } finally {
+                // Reset UI
+                submitBtn.disabled = false;
+                spinner.style.display = 'none';
+                btnText.textContent = 'Convert to SRT';
+                fileInput.value = ''; // Optional: clear file after success
+                // Reset modal text for next time
+                modalText.textContent = "I've got the heavy lifting—take a sec, read this post, and drop a like!";
+                displayFileName(null);
+            }
+        });
+    </script>
+</body>
+</html>