File size: 9,750 Bytes
afa1a06 da5a160 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 |
<!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">
<!-- OR use the static path: <link rel="stylesheet" href="/static/styles.css"> -->
</head>
<body>
<div class="app-container">
<!-- Navigation Bar -->
<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>
<!-- Home Page (Music Recommendations) -->
<div id="homePage" class="page active">
<!-- Main Content -->
<main class="main-content">
<!-- Search Section -->
<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>
<!-- Trending Songs 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">
<!-- Trending songs will be inserted here -->
</div>
</div>
</section>
<!-- Current Playing 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">
<!-- Current song details will be inserted here -->
</div>
</div>
</section>
<!-- Recommendations 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">
<!-- Recommended songs will be inserted here -->
</div>
</div>
</section>
</main>
</div>
<!-- About Page -->
<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>
<!-- REMOVED: Music Player section completely -->
<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay" style="display: none;">
<div class="loading-content">
<div class="loading-spinner"></div>
<p>Getting recommendations...</p>
</div>
</div>
<!-- Toast Notifications -->
<div class="toast-container" id="toastContainer"></div>
</div>
<!-- Hidden audio element for playing music -->
<audio id="audioPlayer" preload="metadata"></audio>
<script src="/script.js"></script>
<!-- OR use the static path: <script src="/static/script.js"></script> -->
</body>
</html> |