| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>VibeMl Music Recommendation</title> |
| <link rel="stylesheet" href="/styles.css"> |
| |
| </head> |
| <body> |
| <div class="app-container"> |
| |
| <nav class="navbar"> |
| <div class="nav-content"> |
| <div class="nav-logo"> |
| <i class="fas fa-music"></i> |
| <span>Vibe ML</span> |
| </div> |
| <div class="nav-links"> |
| <a href="#home" class="nav-link active" data-page="home"> |
| <i class="fas fa-home"></i> |
| Get Recommendations |
| </a> |
| <a href="#about" class="nav-link" data-page="about"> |
| <i class="fas fa-info-circle"></i> |
| About |
| </a> |
| </div> |
| <div class="nav-user"> |
| <i class="fab fa-github"></i> |
| <span>GitHub</span> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div id="homePage" class="page active"> |
| |
| <main class="main-content"> |
| |
| <section class="search-section"> |
| <div class="search-container"> |
| <h2>Discover Your Next Favorite Song</h2> |
| <div class="search-box"> |
| <i class="fas fa-search search-icon"></i> |
| <input |
| type="text" |
| id="searchInput" |
| placeholder="Search by song name or artist..." |
| autocomplete="off" |
| > |
| <div class="search-spinner" id="searchSpinner"> |
| <i class="fas fa-spinner fa-spin"></i> |
| </div> |
| </div> |
| <div class="search-results" id="searchResults"></div> |
| </div> |
| </section> |
|
|
| |
| <section class="trending-section" id="trendingSection"> |
| <div class="trending-container"> |
| <div class="trending-header"> |
| <h3>Trending Songs</h3> |
| <p>Popular tracks to get you started</p> |
| </div> |
| <div class="trending-grid" id="trendingGrid"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="now-playing-section" id="nowPlayingSection" style="display: none;"> |
| <div class="now-playing-container"> |
| <div class="now-playing-header"> |
| <h3>Now Playing</h3> |
| </div> |
| <div class="current-song-card" id="currentSongCard"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="recommendations-section" id="recommendationsSection" style="display: none;"> |
| <div class="recommendations-container"> |
| <div class="recommendations-header"> |
| <h3>Recommended for You</h3> |
| <p>Based on your current selection</p> |
| </div> |
| <div class="recommendations-grid" id="recommendationsGrid"> |
| |
| </div> |
| </div> |
| </section> |
| </main> |
| </div> |
|
|
| |
| <div id="aboutPage" class="page"> |
| <main class="about-main"> |
| <div class="about-hero"> |
| <h1>About Vibe ML</h1> |
| <p class="about-subtitle"> |
| Vibe ML is an intelligent music recommendation system that helps you discover new music through |
| advanced audio analysis and machine learning technology. |
| </p> |
| </div> |
|
|
| <div class="features-grid"> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-brain"></i> |
| </div> |
| <h3>Machine Learning Powered</h3> |
| <p>Using K-means clustering with distinct clusters, we group songs based on their audio features to find the most similar tracks.</p> |
| </div> |
|
|
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-waveform"></i> |
| </div> |
| <h3>Audio Analysis</h3> |
| <p>We analyze multiple audio features including danceability, energy, valence, acousticness, and tempo to understand each song's unique characteristics.</p> |
| </div> |
|
|
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-database"></i> |
| </div> |
| <h3>Vast Music Database</h3> |
| <p>Our system is built on a comprehensive database of songs, allowing for diverse and accurate recommendations across different genres and styles.</p> |
| </div> |
|
|
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-user-music"></i> |
| </div> |
| <h3>Personalized Discovery</h3> |
| <p>Find new music based on songs you already love, helping you discover artists and tracks that match your musical taste.</p> |
| </div> |
| </div> |
|
|
| <div class="how-it-works"> |
| <h2>How It Works</h2> |
| <div class="how-it-works-content"> |
| <p class="how-it-works-intro"> |
| Vibe ML uses a sophisticated K-means clustering algorithm with 20 clusters to group songs based on their |
| audio features. Our recommendation process follows these steps: |
| </p> |
| |
| <div class="process-steps"> |
| <ol class="steps-list"> |
| <li>Standardizes the song's audio features using StandardScaler</li> |
| <li>Identifies which of the 20 clusters the song belongs to</li> |
| <li>Finds songs within the same cluster</li> |
| <li>Calculates Euclidean distances to find the most similar matches</li> |
| <li>Enriches results with iTunes preview data</li> |
| </ol> |
| </div> |
|
|
| <div class="audio-features-section"> |
| <p class="features-intro">The audio features we analyze include:</p> |
| <div class="features-columns"> |
| <div class="features-column"> |
| <ul class="features-list-simple"> |
| <li>Acousticness</li> |
| <li>Energy</li> |
| <li>Liveness</li> |
| <li>Speechiness</li> |
| <li>Valence</li> |
| </ul> |
| </div> |
| <div class="features-column"> |
| <ul class="features-list-simple"> |
| <li>Danceability</li> |
| <li>Instrumentalness</li> |
| <li>Loudness</li> |
| <li>Tempo</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| |
|
|
| |
| <div class="loading-overlay" id="loadingOverlay" style="display: none;"> |
| <div class="loading-content"> |
| <div class="loading-spinner"></div> |
| <p>Getting recommendations...</p> |
| </div> |
| </div> |
|
|
| |
| <div class="toast-container" id="toastContainer"></div> |
| </div> |
|
|
| |
| <audio id="audioPlayer" preload="metadata"></audio> |
|
|
| <script src="/script.js"></script> |
| |
| </body> |
| </html> |
