Hugging Face's logo

Spaces:
Jack1808
/
ml-music-classifier-api
Sleeping

App Files Community
Jainish1808 commited on
Commit
9661076
·
1 Parent(s): f2f4577

Fix: templates

Browse files
Files changed (1) hide show
  1. templates/index.html +93 -0
templates/index.html ADDED
@@ -0,0 +1,93 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>🎵 ML Music Classifier</title>
6
+ <script src="https://cdn.tailwindcss.com"></script>
7
+ </head>
8
+ <body class="bg-gradient-to-r from-purple-600 via-indigo-600 to-blue-600 min-h-screen flex items-center justify-center px-4 py-10 text-white">
9
+
10
+ <div class="bg-white/10 backdrop-blur-md p-8 rounded-2xl shadow-2xl w-full max-w-2xl">
11
+ <h1 class="text-3xl font-bold text-center mb-6 text-white">🎵 ML Music Classifier</h1>
12
+
13
+ <form id="predict-form" class="space-y-4">
14
+ <div>
15
+ <label class="block font-medium mb-1">Model:</label>
16
+ <select id="model_name" class="w-full p-2 rounded text-black">
17
+ {% for model in models %}
18
+ <option value="{{ model }}">{{ model }}</option>
19
+ {% endfor %}
20
+ </select>
21
+ </div>
22
+
23
+ {% set features = [
24
+ "Danceability", "Energy", "Key", "Loudness", "Mode",
25
+ "Speechiness", "Acousticness", "Instrumentalness", "Liveness",
26
+ "Valence", "Tempo", "Duration (ms)", "Time Signature"
27
+ ] %}
28
+
29
+ {% for feature in features %}
30
+ <div>
31
+ <label class="block font-medium mb-1">{{ feature }}:</label>
32
+ <input
33
+ type="{{ 'number' }}"
34
+ step="any"
35
+ id="{{ feature.lower().replace(' ', '_').replace('(', '').replace(')', '') }}"
36
+ required
37
+ placeholder="Enter {{ feature }}"
38
+ class="w-full p-2 rounded text-black"
39
+ />
40
+ </div>
41
+ {% endfor %}
42
+
43
+ <div class="text-center pt-4">
44
+ <button type="submit" class="bg-blue-500 hover:bg-blue-600 font-semibold py-2 px-6 rounded-lg transition">
45
+ Predict
46
+ </button>
47
+ </div>
48
+ </form>
49
+
50
+ <h2 id="result" class="mt-6 text-xl font-semibold text-center"></h2>
51
+ </div>
52
+
53
+ <script>
54
+ document.getElementById("predict-form").onsubmit = async (e) => {
55
+ e.preventDefault();
56
+ const token = "a9b7c7e8b0e44157a99c9a8c5f6a172e10b77e2b44693506a32e5a6a0cd749d0";
57
+ const model = document.getElementById("model_name").value;
58
+
59
+ const data = {
60
+ danceability: parseFloat(document.getElementById("danceability").value),
61
+ energy: parseFloat(document.getElementById("energy").value),
62
+ key: parseInt(document.getElementById("key").value),
63
+ loudness: parseFloat(document.getElementById("loudness").value),
64
+ mode: parseInt(document.getElementById("mode").value),
65
+ speechiness: parseFloat(document.getElementById("speechiness").value),
66
+ acousticness: parseFloat(document.getElementById("acousticness").value),
67
+ instrumentalness: parseFloat(document.getElementById("instrumentalness").value),
68
+ liveness: parseFloat(document.getElementById("liveness").value),
69
+ valence: parseFloat(document.getElementById("valence").value),
70
+ tempo: parseFloat(document.getElementById("tempo").value),
71
+ duration_ms: parseInt(document.getElementById("duration_ms").value),
72
+ time_signature: parseInt(document.getElementById("time_signature").value)
73
+ };
74
+
75
+ const response = await fetch(`/predict/${model}`, {
76
+ method: "POST",
77
+ headers: {
78
+ "Content-Type": "application/json",
79
+ "X-Token": token
80
+ },
81
+ body: JSON.stringify(data)
82
+ });
83
+
84
+ const result = await response.json();
85
+ if (response.ok) {
86
+ document.getElementById("result").innerText = `🎶 Prediction: ${result.prediction_label}`;
87
+ } else {
88
+ document.getElementById("result").innerText = `❌ Error: ${result.detail}`;
89
+ }
90
+ };
91
+ </script>
92
+ </body>
93
+ </html>