Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Music Genre Prediction</title> | |
| <link rel="stylesheet" href="/static/style.css" /> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>🎵 Music Feature Prediction</h1> | |
| <form id="predictForm"> | |
| <label for="model">Choose a Model:</label> | |
| <select id="model"> | |
| <option value="logistic_regression">Logistic Regression</option> | |
| <option value="random_forest">Random Forest</option> | |
| <option value="decision_tree">Decision Tree</option> | |
| <option value="svm">SVM</option> | |
| <option value="knn">KNN</option> | |
| <option value="naive_bayes">Naive Bayes</option> | |
| <option value="ann">ANN</option> | |
| </select> | |
| <div class="features"> | |
| <label>Danceability: <input type="number" step="0.01" id="danceability" required></label> | |
| <label>Energy: <input type="number" step="0.01" id="energy" required></label> | |
| <label>Key: <input type="number" id="key" required></label> | |
| <label>Loudness: <input type="number" step="0.01" id="loudness" required></label> | |
| <label>Mode: <input type="number" id="mode" required></label> | |
| <label>Speechiness: <input type="number" step="0.01" id="speechiness" required></label> | |
| <label>Acousticness: <input type="number" step="0.01" id="acousticness" required></label> | |
| <label>Instrumentalness: <input type="number" step="0.01" id="instrumentalness" required></label> | |
| <label>Liveness: <input type="number" step="0.01" id="liveness" required></label> | |
| <label>Valence: <input type="number" step="0.01" id="valence" required></label> | |
| <label>Tempo: <input type="number" step="0.01" id="tempo" required></label> | |
| <label>Duration (ms): <input type="number" id="duration_ms" required></label> | |
| <label>Time Signature: <input type="number" id="time_signature" required></label> | |
| </div> | |
| <button type="submit">Predict</button> | |
| </form> | |
| <div id="result"></div> | |
| </div> | |
| <script> | |
| document.getElementById("predictForm").addEventListener("submit", async (e) => { | |
| e.preventDefault(); | |
| const model = document.getElementById("model").value; | |
| const features = { | |
| danceability: parseFloat(document.getElementById("danceability").value), | |
| energy: parseFloat(document.getElementById("energy").value), | |
| key: parseInt(document.getElementById("key").value), | |
| loudness: parseFloat(document.getElementById("loudness").value), | |
| mode: parseInt(document.getElementById("mode").value), | |
| speechiness: parseFloat(document.getElementById("speechiness").value), | |
| acousticness: parseFloat(document.getElementById("acousticness").value), | |
| instrumentalness: parseFloat(document.getElementById("instrumentalness").value), | |
| liveness: parseFloat(document.getElementById("liveness").value), | |
| valence: parseFloat(document.getElementById("valence").value), | |
| tempo: parseFloat(document.getElementById("tempo").value), | |
| duration_ms: parseInt(document.getElementById("duration_ms").value), | |
| time_signature: parseInt(document.getElementById("time_signature").value) | |
| }; | |
| const response = await fetch(`/predict/${model}`, { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json" | |
| }, | |
| body: JSON.stringify(features) | |
| }); | |
| const data = await response.json(); | |
| document.getElementById("result").innerHTML = ` | |
| <h3>Model: ${data.model}</h3> | |
| <p>Prediction: <strong>${data.prediction}</strong></p> | |
| `; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |