Spaces:

thejagstudio
/

LyricGen

Sleeping

App Files Files Community

thejagstudio commited on Feb 16, 2025

Commit

ee2d751

verified ·

1 Parent(s): 1371f37

Upload 3 files

Browse files

Files changed (3) hide show

requirements.txt +2 -0
static/simple.css +85 -0
templates/index.html +341 -0

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ flask
2	+ google-generativeai

static/simple.css ADDED Viewed

	@@ -0,0 +1,85 @@

+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 rgba(0, 0, 0, 0.06);
+	background-color: rgb(255 248 220);
+}
+.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 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+	color: rgb(49 71 91);
+	background-color: rgb(255 248 220);
+}
+.gpara {
+	font-weight: 600;
+	color: rgb(49 71 91)
+		/* #31475b */
+	;
+}
+.gparabhajan3 {
+	font-weight: 600;
+	color: rgb(49 71 91)
+		/* #31475b */
+	;
+}

templates/index.html ADDED Viewed

	@@ -0,0 +1,341 @@

+<!DOCTYPE html>
+<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">
+				<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>
+				<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-[1000px]"
+					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 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');
+			const formData = new FormData();
+			formData.append('file', file);
+			try {
+				const response = await fetch('/convert', {
+					method: 'POST',
+					body: formData
+				});
+				const result = await response.json();
+				if (response.ok) {
+					lyricsOutput.srcdoc = result.lyrics; // Render in iframe
+					downloadBtn.classList.remove('hidden');
+				} else {
+					lyricsOutput.srcdoc = `Error: ${result.error}`;
+				}
+			} catch (error) {
+				lyricsOutput.srcdoc = `Error: ${error.message}`;
+			} finally {
+				// Hide loading indicator
+				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);
+		});
+	</script>
+</body>
+</html>