song audio mp3 into musical keyboard/Piano Rolls notes video mp4

README.md

@@ -1,10 +1,13 @@
 ---
-title: Melody Mapper Magic
-emoji: 📈
-colorFrom: red
-colorTo: pink
+title: Melody Mapper Magic 🎹
+colorFrom: purple
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,64 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: rgba(30, 30, 30, 0.8);
+          backdrop-filter: blur(10px);
+        }
+        .social-icon:hover {
+          color: #a78bfa;
+          transform: translateY(-2px);
+        }
+      </style>
+      <footer class="border-t border-gray-700 mt-12">
+        <div class="container mx-auto px-4 py-8">
+          <div class="grid md:grid-cols-4 gap-8">
+            <div>
+              <h3 class="text-xl font-bold mb-4 logo">MelodyMapper</h3>
+              <p class="text-gray-400">Transforming audio into beautiful piano roll visualizations since 2023.</p>
+            </div>
+            <div>
+              <h4 class="font-semibold mb-4">Product</h4>
+              <ul class="space-y-2">
+                <li><a href="#" class="text-gray-400 hover:text-purple-300 transition-colors">Features</a></li>
+                <li><a href="#" class="text-gray-400 hover:text-purple-300 transition-colors">Pricing</a></li>
+                <li><a href="#" class="text-gray-400 hover:text-purple-300 transition-colors">API</a></li>
+              </ul>
+            </div>
+            <div>
+              <h4 class="font-semibold mb-4">Company</h4>
+              <ul class="space-y-2">
+                <li><a href="#" class="text-gray-400 hover:text-purple-300 transition-colors">About</a></li>
+                <li><a href="#" class="text-gray-400 hover:text-purple-300 transition-colors">Blog</a></li>
+                <li><a href="#" class="text-gray-400 hover:text-purple-300 transition-colors">Careers</a></li>
+              </ul>
+            </div>
+            <div>
+              <h4 class="font-semibold mb-4">Connect</h4>
+              <div class="flex space-x-4">
+                <a href="#" class="social-icon text-gray-400 transition-all duration-200">
+                  <i data-feather="twitter"></i>
+                </a>
+                <a href="#" class="social-icon text-gray-400 transition-all duration-200">
+                  <i data-feather="github"></i>
+                </a>
+                <a href="#" class="social-icon text-gray-400 transition-all duration-200">
+                  <i data-feather="instagram"></i>
+                </a>
+                <a href="#" class="social-icon text-gray-400 transition-all duration-200">
+                  <i data-feather="youtube"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500 text-sm">
+            <p>© 2023 MelodyMapper. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/header.js

@@ -0,0 +1,36 @@
+class CustomHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: rgba(30, 30, 30, 0.8);
+          backdrop-filter: blur(10px);
+        }
+        .nav-link:hover {
+          color: #a78bfa;
+        }
+        .logo {
+          background: linear-gradient(90deg, #8b5cf6, #6366f1);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      </style>
+      <nav class="border-b border-gray-700">
+        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+          <a href="/" class="text-2xl font-bold logo">MelodyMapper</a>
+          <div class="flex items-center space-x-6">
+            <a href="/" class="nav-link text-white hover:text-purple-300 transition-colors">Home</a>
+            <a href="#" class="nav-link text-white hover:text-purple-300 transition-colors">Features</a>
+            <a href="#" class="nav-link text-white hover:text-purple-300 transition-colors">Pricing</a>
+            <a href="#" class="nav-link text-white hover:text-purple-300 transition-colors">About</a>
+            <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-md flex items-center">
+              <i data-feather="log-in" class="w-4 h-4 mr-2"></i> Login
+            </button>
+          </div>
+        </div>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-header', CustomHeader);

index.html

@@ -1,19 +1,134 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Melody Mapper Magic | Audio to Piano Roll</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gradient-to-br from-indigo-900 to-purple-900 min-h-screen text-white">
+    <custom-header></custom-header>
+    
+    <main class="container mx-auto px-4 py-8">
+        <section class="max-w-4xl mx-auto bg-gray-800 bg-opacity-50 rounded-xl p-6 backdrop-blur-sm">
+            <h1 class="text-4xl font-bold mb-6 text-center">Transform Audio to Piano Roll</h1>
+            <p class="text-xl mb-8 text-center text-gray-300">Upload your MP3 and watch it transform into beautiful piano roll visualization</p>
+            
+            <div class="grid md:grid-cols-2 gap-8">
+                <div class="space-y-6">
+                    <div class="bg-gray-700 p-6 rounded-lg">
+                        <h2 class="text-2xl font-semibold mb-4 flex items-center">
+                            <i data-feather="upload" class="mr-2"></i> Upload Audio
+                        </h2>
+                        <div class="border-2 border-dashed border-gray-500 rounded-lg p-8 text-center hover:border-purple-400 transition-colors">
+                            <input type="file" id="audio-upload" accept=".mp3,.wav" class="hidden">
+                            <label for="audio-upload" class="cursor-pointer">
+                                <i data-feather="music" class="w-12 h-12 mx-auto text-purple-400"></i>
+                                <p class="mt-4">Drag & drop your audio file here</p>
+                                <p class="text-sm text-gray-400 mt-2">or click to browse files</p>
+                            </label>
+                        </div>
+                        <div id="audio-info" class="mt-4 hidden">
+                            <p class="text-sm"><span class="font-medium">File:</span> <span id="filename"></span></p>
+                            <p class="text-sm"><span class="font-medium">Duration:</span> <span id="duration"></span></p>
+                        </div>
+                    </div>
+
+                    <div class="bg-gray-700 p-6 rounded-lg">
+                        <h2 class="text-2xl font-semibold mb-4 flex items-center">
+                            <i data-feather="sliders" class="mr-2"></i> Settings
+                        </h2>
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-sm font-medium mb-1">Sensitivity</label>
+                                <input type="range" min="1" max="100" value="50" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium mb-1">Note Detection</label>
+                                <select class="w-full bg-gray-600 border border-gray-500 rounded-md px-3 py-2 text-white">
+                                    <option>Aggressive</option>
+                                    <option selected>Balanced</option>
+                                    <option>Conservative</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium mb-1">Output Format</label>
+                                <select class="w-full bg-gray-600 border border-gray-500 rounded-md px-3 py-2 text-white">
+                                    <option>MP4 Video</option>
+                                    <option>GIF</option>
+                                    <option>MIDI</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="bg-gray-700 p-6 rounded-lg">
+                    <h2 class="text-2xl font-semibold mb-4 flex items-center">
+                        <i data-feather="video" class="mr-2"></i> Preview
+                    </h2>
+                    <div class="aspect-video bg-black rounded-lg flex items-center justify-center">
+                        <div class="text-center">
+                            <i data-feather="play" class="w-12 h-12 mx-auto text-purple-400"></i>
+                            <p class="mt-2">Your piano roll visualization will appear here</p>
+                        </div>
+                    </div>
+                    <div class="mt-4 flex justify-between items-center">
+                        <div class="flex space-x-2">
+                            <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-md flex items-center">
+                                <i data-feather="play" class="mr-2"></i> Play
+                            </button>
+                            <button class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded-md flex items-center">
+                                <i data-feather="pause" class="mr-2"></i> Pause
+                            </button>
+                        </div>
+                        <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-md flex items-center">
+                            <i data-feather="download" class="mr-2"></i> Export
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="max-w-4xl mx-auto mt-12">
+            <h2 class="text-2xl font-semibold mb-6">How It Works</h2>
+            <div class="grid md:grid-cols-3 gap-6">
+                <div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg">
+                    <div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="upload" class="w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-medium mb-2">Upload Audio</h3>
+                    <p class="text-gray-300">Upload your MP3 or WAV file. We support most common audio formats.</p>
+                </div>
+                <div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg">
+                    <div class="w-12 h-12 bg-indigo-500 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="cpu" class="w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-medium mb-2">AI Analysis</h3>
+                    <p class="text-gray-300">Our algorithm detects notes and converts them to piano roll format.</p>
+                </div>
+                <div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg">
+                    <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="video" class="w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-medium mb-2">Visualize & Export</h3>
+                    <p class="text-gray-300">Watch the visualization and export as video, GIF or MIDI file.</p>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,62 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Audio upload handling
+    const audioUpload = document.getElementById('audio-upload');
+    const audioInfo = document.getElementById('audio-info');
+    const filename = document.getElementById('filename');
+    const duration = document.getElementById('duration');
+
+    audioUpload.addEventListener('change', function(e) {
+        if (e.target.files.length > 0) {
+            const file = e.target.files[0];
+            filename.textContent = file.name;
+            
+            // Create audio element to get duration
+            const audio = new Audio();
+            audio.src = URL.createObjectURL(file);
+            audio.onloadedmetadata = function() {
+                const mins = Math.floor(audio.duration / 60);
+                const secs = Math.floor(audio.duration % 60);
+                duration.textContent = `${mins}:${secs < 10 ? '0' : ''}${secs}`;
+                audioInfo.classList.remove('hidden');
+            };
+        }
+    });
+
+    // Drag and drop functionality
+    const dropArea = document.querySelector('.border-dashed');
+    
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        dropArea.addEventListener(eventName, preventDefaults, false);
+    });
+
+    function preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    ['dragenter', 'dragover'].forEach(eventName => {
+        dropArea.addEventListener(eventName, highlight, false);
+    });
+
+    ['dragleave', 'drop'].forEach(eventName => {
+        dropArea.addEventListener(eventName, unhighlight, false);
+    });
+
+    function highlight() {
+        dropArea.classList.add('border-purple-400');
+    }
+
+    function unhighlight() {
+        dropArea.classList.remove('border-purple-400');
+    }
+
+    dropArea.addEventListener('drop', handleDrop, false);
+
+    function handleDrop(e) {
+        const dt = e.dataTransfer;
+        const files = dt.files;
+        audioUpload.files = files;
+        const event = new Event('change');
+        audioUpload.dispatchEvent(event);
+    }
+});

style.css

@@ -1,28 +1,43 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Animation for the upload area */
+@keyframes pulse {
+    0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
+    70% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
 }
+
+.border-dashed:hover {
+    animation: pulse 2s infinite;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .container {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+}