Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AudioScribe - AI Audio Transcription</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> | |
| .dropzone { | |
| border: 2px dashed #9CA3AF; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone.active { | |
| border-color: #3B82F6; | |
| background-color: rgba(59, 130, 246, 0.05); | |
| } | |
| .waveform { | |
| background: linear-gradient(to right, #3B82F6, #8B5CF6); | |
| height: 100px; | |
| border-radius: 8px; | |
| } | |
| .speaker-1 { | |
| border-left: 4px solid #3B82F6; | |
| } | |
| .speaker-2 { | |
| border-left: 4px solid #10B981; | |
| } | |
| .speaker-3 { | |
| border-left: 4px solid #F59E0B; | |
| } | |
| .tag-emphasis { | |
| font-weight: bold; | |
| color: #3B82F6; | |
| } | |
| .tag-pause { | |
| color: #6B7280; | |
| font-style: italic; | |
| } | |
| .tag-emotion { | |
| background-color: #FEE2E2; | |
| color: #B91C1C; | |
| border-radius: 4px; | |
| padding: 0 4px; | |
| } | |
| .tag-laugh { | |
| color: #10B981; | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-900 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h1 class="text-xl font-bold text-indigo-600 flex items-center"> | |
| <i class="fas fa-microphone-alt mr-2"></i> AudioScribe | |
| </h1> | |
| </div> | |
| <div class="p-4"> | |
| <button id="newProjectBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md flex items-center justify-center mb-4"> | |
| <i class="fas fa-plus mr-2"></i> New Project | |
| </button> | |
| <div class="mb-6"> | |
| <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Projects</h3> | |
| <ul class="space-y-1"> | |
| <li class="px-2 py-1 rounded hover:bg-gray-100 cursor-pointer flex items-center"> | |
| <i class="fas fa-file-audio text-gray-400 mr-2"></i> Interview_001 | |
| </li> | |
| <li class="px-2 py-1 rounded hover:bg-gray-100 cursor-pointer flex items-center"> | |
| <i class="fas fa-file-audio text-gray-400 mr-2"></i> Meeting_2023 | |
| </li> | |
| <li class="px-2 py-1 rounded hover:bg-gray-100 cursor-pointer flex items-center"> | |
| <i class="fas fa-file-audio text-gray-400 mr-2"></i> Podcast_Episode | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Settings</h3> | |
| <ul class="space-y-1"> | |
| <li class="px-2 py-1 rounded hover:bg-gray-100 cursor-pointer flex items-center"> | |
| <i class="fas fa-cog text-gray-400 mr-2"></i> Preferences | |
| </li> | |
| <li class="px-2 py-1 rounded hover:bg-gray-100 cursor-pointer flex items-center"> | |
| <i class="fas fa-key text-gray-400 mr-2"></i> API Keys | |
| </li> | |
| <li class="px-2 py-1 rounded hover:bg-gray-100 cursor-pointer flex items-center"> | |
| <i class="fas fa-info-circle text-gray-400 mr-2"></i> About | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-auto p-4 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="ml-2"> | |
| <p class="text-sm font-medium">John Doe</p> | |
| <p class="text-xs text-gray-500">Free Plan</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Bar --> | |
| <div class="bg-white border-b border-gray-200 p-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <button id="sidebarToggle" class="mr-4 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h2 class="text-lg font-semibold">Untitled Project</h2> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm flex items-center"> | |
| <i class="fas fa-save mr-1"></i> Save | |
| </button> | |
| <div class="relative"> | |
| <button id="exportBtn" class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white rounded-md text-sm flex items-center"> | |
| <i class="fas fa-file-export mr-1"></i> Export | |
| </button> | |
| <div id="exportDropdown" class="hidden absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg z-10"> | |
| <div class="py-1"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Text (.txt)</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Word (.docx)</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Subtitles (.srt)</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">JSON (.json)</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Audio (.wav)</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 overflow-auto p-6"> | |
| <div id="dropzone" class="dropzone rounded-lg p-12 text-center mb-8"> | |
| <div class="mx-auto w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mb-4"> | |
| <i class="fas fa-microphone-alt text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Drag & drop your WAV files here</h3> | |
| <p class="text-gray-500 mb-4">or</p> | |
| <label for="fileInput" class="cursor-pointer inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none"> | |
| <i class="fas fa-folder-open mr-2"></i> Browse Files | |
| </label> | |
| <input id="fileInput" type="file" accept=".wav" multiple class="hidden"> | |
| <p class="text-sm text-gray-500 mt-4">Supports batch processing of multiple files</p> | |
| </div> | |
| <!-- Processing Section (hidden by default) --> | |
| <div id="processingSection" class="hidden"> | |
| <div class="bg-white rounded-lg shadow-sm p-6 mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-medium">Processing Files</h3> | |
| <span class="text-sm text-gray-500">1 of 3 files completed</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Current File Progress --> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium">interview_001.wav</span> | |
| <span class="text-xs text-gray-500">45%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-indigo-600 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500 flex justify-between"> | |
| <span>Speaker diarization</span> | |
| <span>Noise reduction</span> | |
| <span>Transcription</span> | |
| <span>Tagging</span> | |
| </div> | |
| </div> | |
| <!-- Queued Files --> | |
| <div class="border-t border-gray-200 pt-4"> | |
| <div class="flex items-center justify-between text-sm"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-clock text-gray-400 mr-2"></i> | |
| <span>meeting_2023.wav</span> | |
| </div> | |
| <span class="text-gray-500">Queued</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm mt-2"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-clock text-gray-400 mr-2"></i> | |
| <span>podcast_episode.wav</span> | |
| </div> | |
| <span class="text-gray-500">Queued</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Transcription Preview --> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-medium">Transcription Preview</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm flex items-center"> | |
| <i class="fas fa-headphones mr-1"></i> Play | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm flex items-center"> | |
| <i class="fas fa-edit mr-1"></i> Edit | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Waveform Visualization --> | |
| <div> | |
| <div class="waveform mb-4"></div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200"> | |
| <i class="fas fa-play text-gray-700"></i> | |
| </button> | |
| <span class="text-sm text-gray-500">00:45 / 02:30</span> | |
| </div> | |
| <div class="flex items-center space-x-1"> | |
| <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200" title="Noise Reduction"> | |
| <i class="fas fa-volume-mute text-gray-700"></i> | |
| </button> | |
| <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200" title="Diarization Settings"> | |
| <i class="fas fa-users text-gray-700"></i> | |
| </button> | |
| <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200" title="Emotion Detection"> | |
| <i class="fas fa-smile text-gray-700"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Transcription Text --> | |
| <div class="bg-gray-50 p-4 rounded-md max-h-96 overflow-y-auto"> | |
| <div class="space-y-4"> | |
| <div class="speaker-1 pl-3"> | |
| <div class="flex items-center mb-1"> | |
| <span class="font-medium text-indigo-600">Speaker 1</span> | |
| <button class="ml-2 text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-pencil-alt text-xs"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-800"> | |
| Hello everyone, welcome to today's meeting. <span class="tag-emphasis">Really</span> glad you could all make it. <span class="tag-pause">[pause]</span> We have a lot to cover today. | |
| </p> | |
| </div> | |
| <div class="speaker-2 pl-3"> | |
| <div class="flex items-center mb-1"> | |
| <span class="font-medium text-green-600">Speaker 2</span> | |
| <button class="ml-2 text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-pencil-alt text-xs"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-800"> | |
| Thanks for having us! <span class="tag-laugh">[laughs]</span> I'm excited to discuss the new project updates. <span class="tag-emotion">[emotional tone: happy]</span> | |
| </p> | |
| </div> | |
| <div class="speaker-1 pl-3"> | |
| <div class="flex items-center mb-1"> | |
| <span class="font-medium text-indigo-600">Speaker 1</span> | |
| <button class="ml-2 text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-pencil-alt text-xs"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-800"> | |
| Let's start with the quarterly results. <span class="tag-emphasis">Revenue</span> is up by 15% compared to last quarter, which is <span class="tag-emotion">[emotional tone: excited]</span> fantastic news! | |
| </p> | |
| </div> | |
| <div class="animate-pulse flex items-center text-gray-500"> | |
| <i class="fas fa-spinner fa-spin mr-2"></i> | |
| <span>Transcribing next segment...</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Processing Settings --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 mt-6"> | |
| <h3 class="text-lg font-medium mb-4">Processing Settings</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="border border-gray-200 rounded-md p-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h4 class="font-medium">Noise Reduction</h4> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> | |
| </label> | |
| </div> | |
| <p class="text-sm text-gray-500">Clean up background noise and enhance voice clarity</p> | |
| </div> | |
| <div class="border border-gray-200 rounded-md p-4"> | |
| <div class="mb-2"> | |
| <h4 class="font-medium">Transcription Model</h4> | |
| </div> | |
| <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"> | |
| <option>Whisper Small (Fastest)</option> | |
| <option selected>Whisper Medium (Balanced)</option> | |
| <option>Whisper Large (Most Accurate)</option> | |
| </select> | |
| </div> | |
| <div class="border border-gray-200 rounded-md p-4"> | |
| <div class="mb-2"> | |
| <h4 class="font-medium">Speaker Diarization</h4> | |
| </div> | |
| <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"> | |
| <option>Basic (2-3 speakers)</option> | |
| <option selected>Advanced (up to 5 speakers)</option> | |
| <option>High Precision (1-2 speakers)</option> | |
| </select> | |
| </div> | |
| <div class="border border-gray-200 rounded-md p-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h4 class="font-medium">Emotion Detection</h4> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> | |
| </label> | |
| </div> | |
| <p class="text-sm text-gray-500">Detect emotional tone and vocal inflections</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle sidebar | |
| document.getElementById('sidebarToggle').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('hidden'); | |
| }); | |
| // Export dropdown | |
| document.getElementById('exportBtn').addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| document.getElementById('exportDropdown').classList.toggle('hidden'); | |
| }); | |
| // Close dropdown when clicking elsewhere | |
| document.addEventListener('click', function() { | |
| document.getElementById('exportDropdown').classList.add('hidden'); | |
| }); | |
| // Drag and drop functionality | |
| const dropzone = document.getElementById('dropzone'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const processingSection = document.getElementById('processingSection'); | |
| ['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, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| dropzone.classList.add('active'); | |
| } | |
| function unhighlight() { | |
| dropzone.classList.remove('active'); | |
| } | |
| dropzone.addEventListener('drop', handleDrop, false); | |
| fileInput.addEventListener('change', handleFiles); | |
| function handleDrop(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| handleFiles({ target: { files } }); | |
| } | |
| function handleFiles(e) { | |
| const files = e.target.files; | |
| if (files.length > 0) { | |
| // Show processing section | |
| dropzone.classList.add('hidden'); | |
| processingSection.classList.remove('hidden'); | |
| // Here you would normally process the files | |
| console.log('Files to process:', files); | |
| } | |
| } | |
| // Click on dropzone triggers file input | |
| dropzone.addEventListener('click', () => { | |
| fileInput.click(); | |
| }); | |
| // New project button | |
| document.getElementById('newProjectBtn').addEventListener('click', function() { | |
| dropzone.classList.remove('hidden'); | |
| processingSection.classList.add('hidden'); | |
| fileInput.value = ''; // Reset file input | |
| }); | |
| </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=MagicBullets/tts" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |