Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Audio to Lyrics Converter</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .glass-morphism { | |
| background: rgba(255, 255, 255, 0.7); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| } | |
| .gtitlev3 { | |
| padding-top: 0.25rem; | |
| padding-bottom: 0.25rem; | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| margin-bottom: 0.75rem; | |
| border-radius: 0.375rem; | |
| font-size: 1.5rem; | |
| line-height: 2rem; | |
| font-weight: 700; | |
| text-align: center; | |
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 #0000000f; | |
| background-color: #fff8dc; | |
| color: rgb(49 71 91) | |
| } | |
| .chend { | |
| padding-left: 1.25rem; | |
| padding-right: 1.25rem; | |
| margin-top: 0.75rem; | |
| border-radius: 0.375rem; | |
| width: fit-content; | |
| height: 1.5rem; | |
| font-size: 1.875rem; | |
| line-height: 2.25rem; | |
| font-weight: 700; | |
| text-align: center; | |
| box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px 0 #0000000f; | |
| color: rgb(49 71 91); | |
| background-color: #fff8dc; | |
| } | |
| .gpara { | |
| font-weight: 600; | |
| color: rgb(49 71 91) | |
| /* #31475b */ | |
| ; | |
| } | |
| .gparabhajan3 { | |
| font-weight: 600; | |
| color: rgb(49 71 91) | |
| /* #31475b */ | |
| ; | |
| } | |
| .dropzone { | |
| border: 2px dashed #374151; | |
| border-radius: 0.5rem; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone:hover, | |
| .dropzone.dragover { | |
| border-color: #f63b3b; | |
| background-color: rgba(246, 59, 59, 0.1); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); | |
| } | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1f2937; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #4b5563; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #6b7280; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-stone-900 text-stone-300"> | |
| <div class="flex flex-col h-screen"> | |
| <header class="flex items-center justify-between p-4 h-16 border-b border-stone-800 flex-shrink-0"> | |
| <div class="flex items-center space-x-4"> | |
| <svg class="w-8 h-8 text-stone-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 6l12-3"></path></svg> | |
| <h1 class="text-xl font-bold text-stone-100">Audio to Lyrics</h1> | |
| </div> | |
| <div class="text-sm text-stone-500">v1.0.0</div> | |
| </header> | |
| <div class="flex flex-grow overflow-hidden"> | |
| <!-- Left Sidebar --> | |
| <div class="w-96 bg-stone-900 p-6 overflow-y-auto flex-shrink-0 border-r border-stone-800"> | |
| <h2 class="text-lg font-semibold text-stone-200 mb-4">Select Source</h2> | |
| <!-- Mode Toggle --> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm font-medium text-stone-300">Mode</span> | |
| </div> | |
| <div class="flex bg-stone-800 rounded-lg p-1"> | |
| <button id="musicModeBtn" class="flex-1 py-2 px-3 rounded-md bg-stone-700 shadow-sm text-stone-100 font-medium text-sm"> | |
| <i data-feather="music" class="inline mr-2 w-4 h-4"></i>Music | |
| </button> | |
| <button id="speechModeBtn" class="flex-1 py-2 px-3 rounded-md text-stone-400 font-medium text-sm"> | |
| <i data-feather="mic" class="inline mr-2 w-4 h-4"></i>Speech | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tab buttons --> | |
| <div class="flex mb-6 bg-stone-800 rounded-lg p-1"> | |
| <button id="fileTabBtn" class="flex-1 py-2 px-4 rounded-md bg-stone-700 shadow-sm text-stone-100 font-medium"> | |
| <i data-feather="file" class="inline mr-2 w-4 h-4"></i>File | |
| </button> | |
| <button id="youtubeTabBtn" class="flex-1 py-2 px-4 rounded-md text-stone-400 font-medium"> | |
| <i data-feather="youtube" class="inline mr-2 w-4 h-4"></i>YouTube | |
| </button> | |
| </div> | |
| <!-- File upload section --> | |
| <div id="fileUploadSection"> | |
| <div class="dropzone p-6 mb-6 flex flex-col items-center justify-center text-center" id="dropzone"> | |
| <i data-feather="music" class="text-stone-500 mb-4" style="width: 40px; height: 40px;"></i> | |
| <p class="text-sm text-stone-400 mb-4">Drag & drop or</p> | |
| <input type="file" id="audioFile" accept="audio/*" class="hidden"> | |
| <button id="browseBtn" | |
| class="bg-stone-600 hover:bg-stone-700 text-white font-medium py-2 px-4 rounded-md transition duration-300 flex items-center text-sm"> | |
| <i data-feather="folder" class="mr-2 w-4 h-4"></i> | |
| Browse File | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="bg-stone-800 rounded-lg p-3 flex items-center" id="fileInfoContainer" | |
| style="display: none;"> | |
| <div | |
| class="w-10 h-10 bg-stone-700 rounded-lg flex items-center justify-center mr-3 flex-shrink-0"> | |
| <i data-feather="file" class="text-stone-400"></i> | |
| </div> | |
| <div class="flex-grow overflow-hidden"> | |
| <p class="font-medium text-stone-200 text-sm truncate" id="fileName">No file selected</p> | |
| <p class="text-xs text-stone-400" id="fileSize"></p> | |
| </div> | |
| <button id="removeFileBtn" | |
| class="text-stone-500 hover:text-red-500 transition-colors duration-300 ml-2 flex-shrink-0"> | |
| <i data-feather="x" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <audio id="audioPlayer" controls class="w-full mt-4 rounded-lg" hidden> | |
| Your browser does not support the audio element. | |
| </audio> | |
| </div> | |
| </div> | |
| <!-- YouTube link section --> | |
| <div id="youtubeLinkSection" class="hidden"> | |
| <div class="mb-6"> | |
| <label class="block text-stone-400 font-medium mb-2 text-sm">YouTube URL</label> | |
| <input type="text" id="youtubeUrl" | |
| class="w-full px-4 py-2 bg-stone-800 border border-stone-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-stone-500 focus:border-transparent" | |
| placeholder="https://www.youtube.com/watch?v=..."> | |
| <p id="youtubeError" class="text-red-500 text-sm mt-1 hidden">Please enter a valid YouTube URL</p> | |
| </div> | |
| </div> | |
| <button id="convertBtn" | |
| class="w-full bg-gradient-to-br from-stone-500 to-zinc-600 hover:from-red-600 hover:to-red-700 text-white font-semibold py-3 px-4 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition duration-300 flex items-center justify-center" | |
| disabled> | |
| <i data-feather="zap" class="mr-2"></i> | |
| Convert to Lyrics | |
| </button> | |
| <div id="loadingIndicator" class="hidden mt-6 text-center"> | |
| <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-red-500"></div> | |
| <p class="mt-2 text-stone-400 font-medium">Processing...</p> | |
| <p class="text-sm text-stone-500">This might take a moment.</p> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-grow h-[calc(100vh-4rem)] bg-stone-800/50 p-6 md:p-8 overflow-y-auto"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-stone-200 flex items-center"> | |
| <i data-feather="file-text" class="mr-2 text-stone-400"></i> | |
| Lyrics Output | |
| </h3> | |
| <button id="downloadBtn" | |
| class="hidden bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md transition duration-300 flex items-center text-sm"> | |
| <i data-feather="download" class="mr-1 w-4 h-4"></i> | |
| Download | |
| </button> | |
| </div> | |
| <iframe id="lyricsOutputIframe" | |
| class="bg-stone-900 rounded-lg min-h-[300px] max-h-[calc(100vh-14rem)] h-full w-full whitespace-pre-line border border-stone-700 text-stone-300 overflow-auto" | |
| srcdoc="<body style='background-color: #fffff6; color: #9ca3af; font-family: Inter, sans-serif; display: flex; justify-content: center; align-items: center; height: 100%;'>No lyrics available yet.</body>" | |
| ></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Feather icons | |
| feather.replace(); | |
| const audioFile = document.getElementById('audioFile'); | |
| const browseBtn = document.getElementById('browseBtn'); | |
| const audioPlayer = document.getElementById('audioPlayer'); | |
| const convertBtn = document.getElementById('convertBtn'); | |
| const lyricsOutput = document.getElementById('lyricsOutputIframe'); | |
| const loadingIndicator = document.getElementById('loadingIndicator'); | |
| const downloadBtn = document.getElementById('downloadBtn'); | |
| const dropzone = document.getElementById('dropzone'); | |
| const fileInfoContainer = document.getElementById('fileInfoContainer'); | |
| const fileName = document.getElementById('fileName'); | |
| const fileSize = document.getElementById('fileSize'); | |
| const removeFileBtn = document.getElementById('removeFileBtn'); | |
| // Handle browse button click | |
| browseBtn.addEventListener('click', () => { | |
| audioFile.click(); | |
| }); | |
| // Format file size | |
| function formatFileSize(bytes) { | |
| if (bytes === 0) return '0 Bytes'; | |
| const k = 1024; | |
| const sizes = ['Bytes', 'KB', 'MB', 'GB']; | |
| const i = Math.floor(Math.log(bytes) / Math.log(k)); | |
| return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; | |
| } | |
| // Display file info | |
| function displayFileInfo(file) { | |
| fileName.textContent = file.name; | |
| fileSize.textContent = formatFileSize(file.size); | |
| fileInfoContainer.style.display = 'flex'; | |
| // Enable convert button and show audio player | |
| convertBtn.disabled = false; | |
| convertBtn.classList.add('pulse'); | |
| const audioUrl = URL.createObjectURL(file); | |
| audioPlayer.src = audioUrl; | |
| audioPlayer.hidden = false; | |
| // Reset output area | |
| lyricsOutput.srcdoc = "<body style='background-color: #fffff6; color: #9ca3af; font-family: Inter, sans-serif; display: flex; justify-content: center; align-items: center; height: 100%;'>Ready to convert.</body>"; | |
| downloadBtn.classList.add('hidden'); | |
| } | |
| // Handle file selection | |
| audioFile.addEventListener('change', (e) => { | |
| const file = e.target.files[0]; | |
| if (file) { | |
| displayFileInfo(file); | |
| } | |
| }); | |
| // Handle remove file button | |
| removeFileBtn.addEventListener('click', () => { | |
| audioFile.value = ''; | |
| fileInfoContainer.style.display = 'none'; | |
| audioPlayer.hidden = true; | |
| audioPlayer.src = ''; | |
| convertBtn.disabled = true; | |
| convertBtn.classList.remove('pulse'); | |
| lyricsOutput.srcdoc = "<body style='background-color: #fffff6; color: #9ca3af; font-family: Inter, sans-serif; display: flex; justify-content: center; align-items: center; height: 100%;'>No lyrics available yet.</body>"; | |
| downloadBtn.classList.add('hidden'); | |
| }); | |
| // Handle drag and drop | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, (e) => { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| }, false); | |
| }); | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, () => { | |
| dropzone.classList.add('dragover'); | |
| }, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, () => { | |
| dropzone.classList.remove('dragover'); | |
| }, false); | |
| }); | |
| dropzone.addEventListener('drop', (e) => { | |
| const file = e.dataTransfer.files[0]; | |
| if (file && file.type.startsWith('audio/')) { | |
| audioFile.files = e.dataTransfer.files; | |
| displayFileInfo(file); | |
| } | |
| }, false); | |
| // Handle convert button click | |
| convertBtn.addEventListener('click', async () => { | |
| const isYoutubeMode = !youtubeLinkSection.classList.contains('hidden'); | |
| if (isYoutubeMode) { | |
| const youtubeLink = youtubeUrl.value; | |
| if (!isValidYouTubeUrl(youtubeLink)) { | |
| alert('Please enter a valid YouTube URL'); | |
| return; | |
| } | |
| } else { | |
| const file = audioFile.files[0]; | |
| if (!file) { | |
| alert('Please select an audio file first'); | |
| return; | |
| } | |
| } | |
| // Show loading indicator | |
| loadingIndicator.classList.remove('hidden'); | |
| convertBtn.disabled = true; | |
| convertBtn.classList.remove('pulse'); | |
| try { | |
| let response; | |
| if (isYoutubeMode) { | |
| response = await fetch('/convert-youtube', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| url: youtubeUrl.value, | |
| type: currentMode | |
| }) | |
| }); | |
| } else { | |
| const formData = new FormData(); | |
| formData.append('file', audioFile.files[0]); | |
| formData.append('type', currentMode); | |
| response = await fetch('/convert', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| } | |
| const result = await response.json(); | |
| if (response.ok) { | |
| lyricsOutput.srcdoc = `<body style='background-color: #fffff6; color: #1e293b; font-family: Inter, sans-serif; padding: 1rem;'>${result.lyrics}</body>`; | |
| downloadBtn.classList.remove('hidden'); | |
| } else { | |
| lyricsOutput.srcdoc = `<body style='background-color: #fffff6; color: #f87171; font-family: Inter, sans-serif; padding: 1rem;'>Error: ${result.error}</body>`; | |
| } | |
| } catch (error) { | |
| lyricsOutput.srcdoc = `<body style='background-color: #fffff6; color: #f87171; font-family: Inter, sans-serif; padding: 1rem;'>Error: ${error.message}</body>`; | |
| } finally { | |
| loadingIndicator.classList.add('hidden'); | |
| convertBtn.disabled = false; | |
| } | |
| }); | |
| // Handle download button click | |
| downloadBtn.addEventListener('click', () => { | |
| const lyrics = lyricsOutput.srcdoc; | |
| const blob = new Blob([lyrics], { type: 'text/html' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = 'lyrics.html'; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| }); | |
| // Add new JavaScript for YouTube functionality | |
| const fileTabBtn = document.getElementById('fileTabBtn'); | |
| const youtubeTabBtn = document.getElementById('youtubeTabBtn'); | |
| const fileUploadSection = document.getElementById('fileUploadSection'); | |
| const youtubeLinkSection = document.getElementById('youtubeLinkSection'); | |
| const youtubeUrl = document.getElementById('youtubeUrl'); | |
| const youtubeError = document.getElementById('youtubeError'); | |
| // Mode toggle elements | |
| const musicModeBtn = document.getElementById('musicModeBtn'); | |
| const speechModeBtn = document.getElementById('speechModeBtn'); | |
| let currentMode = 'music'; // Default mode | |
| // Mode toggle handlers | |
| musicModeBtn.addEventListener('click', () => { | |
| currentMode = 'music'; | |
| musicModeBtn.classList.add('bg-stone-700', 'text-stone-100'); | |
| musicModeBtn.classList.remove('text-stone-400'); | |
| speechModeBtn.classList.remove('bg-stone-700', 'text-stone-100'); | |
| speechModeBtn.classList.add('text-stone-400'); | |
| }); | |
| speechModeBtn.addEventListener('click', () => { | |
| currentMode = 'speech'; | |
| speechModeBtn.classList.add('bg-stone-700', 'text-stone-100'); | |
| speechModeBtn.classList.remove('text-stone-400'); | |
| musicModeBtn.classList.remove('bg-stone-700', 'text-stone-100'); | |
| musicModeBtn.classList.add('text-stone-400'); | |
| }); | |
| fileTabBtn.addEventListener('click', () => { | |
| fileTabBtn.classList.add('bg-stone-700', 'text-stone-100'); | |
| fileTabBtn.classList.remove('text-stone-400'); | |
| youtubeTabBtn.classList.remove('bg-stone-700', 'text-stone-100'); | |
| youtubeTabBtn.classList.add('text-stone-400'); | |
| fileUploadSection.classList.remove('hidden'); | |
| youtubeLinkSection.classList.add('hidden'); | |
| const hasFile = audioFile.files.length > 0; | |
| convertBtn.disabled = !hasFile; | |
| if (hasFile) convertBtn.classList.add('pulse'); | |
| else convertBtn.classList.remove('pulse'); | |
| }); | |
| youtubeTabBtn.addEventListener('click', () => { | |
| youtubeTabBtn.classList.add('bg-stone-700', 'text-stone-100'); | |
| youtubeTabBtn.classList.remove('text-stone-400'); | |
| fileTabBtn.classList.remove('bg-stone-700', 'text-stone-100'); | |
| fileTabBtn.classList.add('text-stone-400'); | |
| youtubeLinkSection.classList.remove('hidden'); | |
| fileUploadSection.classList.add('hidden'); | |
| const isValid = isValidYouTubeUrl(youtubeUrl.value); | |
| convertBtn.disabled = !isValid; | |
| if (isValid) convertBtn.classList.add('pulse'); | |
| else convertBtn.classList.remove('pulse'); | |
| }); | |
| function isValidYouTubeUrl(url) { | |
| const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+/; | |
| return youtubeRegex.test(url); | |
| } | |
| youtubeUrl.addEventListener('input', () => { | |
| const isValid = isValidYouTubeUrl(youtubeUrl.value); | |
| youtubeError.classList.toggle('hidden', isValid); | |
| convertBtn.disabled = !isValid; | |
| if (isValid) convertBtn.classList.add('pulse'); | |
| else convertBtn.classList.remove('pulse'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |