Spaces:
Running
Running
| <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> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .dropzone { | |
| border: 2px dashed #e5e7eb; | |
| border-radius: 0.5rem; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone:hover, | |
| .dropzone.dragover { | |
| border-color: #3b82f6; | |
| background-color: rgba(59, 130, 246, 0.05); | |
| } | |
| .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); | |
| } | |
| } | |
| .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; | |
| } | |
| .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 */ | |
| ; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-12 max-w-4xl md:max-w-[90%]"> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-2"> | |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">Audio to | |
| Lyrics</span> | |
| Converter | |
| </h1> | |
| <p class="text-gray-600 max-w-xl mx-auto">Transform your audio files into beautifully formatted lyrics with | |
| AI-powered transcription</p> | |
| </header> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div class="glass-morphism col-span-1 md:col-span-1 rounded-xl shadow-xl p-8 mb-8 h-fit"> | |
| <!-- Add tab buttons --> | |
| <div class="flex mb-6 bg-gray-100 rounded-lg p-1"> | |
| <button id="fileTabBtn" class="flex-1 py-2 px-4 rounded-md bg-white shadow-sm text-blue-600 font-medium"> | |
| <i data-feather="file" class="inline mr-2"></i>File | |
| </button> | |
| <button id="youtubeTabBtn" class="flex-1 py-2 px-4 rounded-md text-gray-600 font-medium"> | |
| <i data-feather="youtube" class="inline mr-2"></i>YouTube | |
| </button> | |
| </div> | |
| <!-- File upload section --> | |
| <div id="fileUploadSection"> | |
| <div class="dropzone p-8 mb-6 flex flex-col items-center justify-center" id="dropzone"> | |
| <i data-feather="music" class="text-blue-500 mb-4" style="width: 48px; height: 48px;"></i> | |
| <label class="block text-gray-700 font-medium mb-2">Upload Audio File</label> | |
| <p class="text-sm text-gray-500 mb-4">Drag & drop your file here or click to browse</p> | |
| <input type="file" id="audioFile" accept="audio/*" class="hidden"> | |
| <button id="browseBtn" | |
| class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-full transition duration-300 flex items-center"> | |
| <i data-feather="upload-cloud" class="mr-2"></i> | |
| Browse Files | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="bg-gray-50 rounded-lg p-4 flex items-center" id="fileInfoContainer" | |
| style="display: none;"> | |
| <div | |
| class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-3 flex-shrink-0"> | |
| <i data-feather="file" class="text-blue-600"></i> | |
| </div> | |
| <div class="flex-grow"> | |
| <p class="font-medium text-gray-800" id="fileName">No file selected</p> | |
| <p class="text-sm text-gray-500" id="fileSize"></p> | |
| </div> | |
| <button id="removeFileBtn" | |
| class="text-gray-400 hover:text-red-500 transition-colors duration-300"> | |
| <i data-feather="x-circle"></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-gray-700 font-medium mb-2">YouTube URL</label> | |
| <input type="text" id="youtubeUrl" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-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-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-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 pulse" | |
| 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-blue-600"></div> | |
| <p class="mt-2 text-blue-600 font-medium">Processing your audio file...</p> | |
| <p class="text-sm text-gray-500">This might take a moment depending on file size</p> | |
| </div> | |
| </div> | |
| <div class="glass-morphism col-span-1 md:col-span-3 rounded-xl shadow-xl p-8"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-bold text-gray-800 flex items-center"> | |
| <i data-feather="file-text" class="mr-2 text-blue-600"></i> | |
| Lyrics Output | |
| </h3> | |
| <button id="downloadBtn" | |
| class="hidden bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-full transition duration-300 flex items-center text-sm"> | |
| <i data-feather="download-cloud" class="mr-1"></i> | |
| Download | |
| </button> | |
| </div> | |
| <iframe id="lyricsOutputIframe" | |
| class="p-6 bg-white rounded-lg min-h-[300px] w-full whitespace-pre-line border border-gray-100 text-gray-700 overflow-auto max-h-[500px] md:max-h-[1000px] h-[500px] md:h-[500px]" | |
| srcdoc="No lyrics available yet. Upload an audio file and click convert." | |
| ></iframe> | |
| </div> | |
| </div> | |
| <footer class="mt-12 text-center text-gray-500 text-sm"> | |
| <p>Powered by AI transcription technology</p> | |
| <p class="mt-1">© 2025 Audio to Lyrics Converter</p> | |
| </footer> | |
| </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 = "No lyrics available yet. Upload an audio file and click convert."; | |
| 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 = "No lyrics available yet. Upload an audio file and click convert."; | |
| 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 }) | |
| }); | |
| } else { | |
| const formData = new FormData(); | |
| formData.append('file', audioFile.files[0]); | |
| response = await fetch('/convert', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| } | |
| const result = await response.json(); | |
| if (response.ok) { | |
| lyricsOutput.srcdoc = result.lyrics; | |
| downloadBtn.classList.remove('hidden'); | |
| } else { | |
| lyricsOutput.srcdoc = `Error: ${result.error}`; | |
| } | |
| } catch (error) { | |
| lyricsOutput.srcdoc = `Error: ${error.message}`; | |
| } 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'); | |
| fileTabBtn.addEventListener('click', () => { | |
| fileTabBtn.classList.add('bg-white', 'shadow-sm', 'text-blue-600'); | |
| youtubeTabBtn.classList.remove('bg-white', 'shadow-sm', 'text-blue-600'); | |
| fileUploadSection.classList.remove('hidden'); | |
| youtubeLinkSection.classList.add('hidden'); | |
| convertBtn.disabled = !audioFile.files.length; | |
| }); | |
| youtubeTabBtn.addEventListener('click', () => { | |
| youtubeTabBtn.classList.add('bg-white', 'shadow-sm', 'text-blue-600'); | |
| fileTabBtn.classList.remove('bg-white', 'shadow-sm', 'text-blue-600'); | |
| youtubeLinkSection.classList.remove('hidden'); | |
| fileUploadSection.classList.add('hidden'); | |
| convertBtn.disabled = !isValidYouTubeUrl(youtubeUrl.value); | |
| }); | |
| 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> |