|
|
<!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> |
