Hugging Face's logo

Spaces:
JigneshPrajapati18
/
model
Sleeping

App Files Community
Jignesh Prajapati commited on
Commit
a0f002f
·
1 Parent(s): 3720cca

add html file and css file

Browse files
Files changed (2) hide show
  1. static/style.css +52 -0
  2. template/index.html +89 -0
static/style.css ADDED
@@ -0,0 +1,52 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ font-family: Arial, sans-serif;
3
+ background-color: #f0f5f9;
4
+ color: #333;
5
+ padding: 20px;
6
+ }
7
+
8
+ .container {
9
+ max-width: 800px;
10
+ margin: auto;
11
+ padding: 30px;
12
+ background: white;
13
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
14
+ border-radius: 8px;
15
+ }
16
+
17
+ h1 {
18
+ text-align: center;
19
+ color: #0077cc;
20
+ }
21
+
22
+ form label {
23
+ display: block;
24
+ margin: 10px 0 5px;
25
+ }
26
+
27
+ input, select {
28
+ width: 100%;
29
+ padding: 8px;
30
+ margin-bottom: 10px;
31
+ }
32
+
33
+ button {
34
+ width: 100%;
35
+ padding: 10px;
36
+ background-color: #0077cc;
37
+ color: white;
38
+ border: none;
39
+ border-radius: 5px;
40
+ cursor: pointer;
41
+ }
42
+
43
+ button:hover {
44
+ background-color: #005fa3;
45
+ }
46
+
47
+ #result {
48
+ margin-top: 20px;
49
+ padding: 15px;
50
+ border-top: 2px solid #ccc;
51
+ background: #eef;
52
+ }
template/index.html CHANGED
@@ -0,0 +1,89 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <title>Music Genre Prediction</title>
7
+ <link rel="stylesheet" href="/static/style.css" />
8
+ </head>
9
+ <body>
10
+ <div class="container">
11
+ <h1>🎵 Music Feature Prediction</h1>
12
+
13
+ <form id="predictForm">
14
+ <label for="model">Choose a Model:</label>
15
+ <select id="model">
16
+ <option value="logistic_regression">Logistic Regression</option>
17
+ <option value="random_forest">Random Forest</option>
18
+ <option value="decision_tree">Decision Tree</option>
19
+ <option value="svm">SVM</option>
20
+ <option value="knn">KNN</option>
21
+ <option value="naive_bayes">Naive Bayes</option>
22
+ <option value="ann">ANN</option>
23
+ </select>
24
+
25
+ <label for="token">Token:</label>
26
+ <input type="text" id="token" placeholder="Enter your API token" required />
27
+
28
+ <div class="features">
29
+ <label>Danceability: <input type="number" step="0.01" id="danceability" required></label>
30
+ <label>Energy: <input type="number" step="0.01" id="energy" required></label>
31
+ <label>Key: <input type="number" id="key" required></label>
32
+ <label>Loudness: <input type="number" step="0.01" id="loudness" required></label>
33
+ <label>Mode: <input type="number" id="mode" required></label>
34
+ <label>Speechiness: <input type="number" step="0.01" id="speechiness" required></label>
35
+ <label>Acousticness: <input type="number" step="0.01" id="acousticness" required></label>
36
+ <label>Instrumentalness: <input type="number" step="0.01" id="instrumentalness" required></label>
37
+ <label>Liveness: <input type="number" step="0.01" id="liveness" required></label>
38
+ <label>Valence: <input type="number" step="0.01" id="valence" required></label>
39
+ <label>Tempo: <input type="number" step="0.01" id="tempo" required></label>
40
+ <label>Duration (ms): <input type="number" id="duration_ms" required></label>
41
+ <label>Time Signature: <input type="number" id="time_signature" required></label>
42
+ </div>
43
+
44
+ <button type="submit">Predict</button>
45
+ </form>
46
+
47
+ <div id="result"></div>
48
+ </div>
49
+
50
+ <script>
51
+ document.getElementById("predictForm").addEventListener("submit", async (e) => {
52
+ e.preventDefault();
53
+ const model = document.getElementById("model").value;
54
+ const token = document.getElementById("token").value;
55
+
56
+ const features = {
57
+ danceability: parseFloat(document.getElementById("danceability").value),
58
+ energy: parseFloat(document.getElementById("energy").value),
59
+ key: parseInt(document.getElementById("key").value),
60
+ loudness: parseFloat(document.getElementById("loudness").value),
61
+ mode: parseInt(document.getElementById("mode").value),
62
+ speechiness: parseFloat(document.getElementById("speechiness").value),
63
+ acousticness: parseFloat(document.getElementById("acousticness").value),
64
+ instrumentalness: parseFloat(document.getElementById("instrumentalness").value),
65
+ liveness: parseFloat(document.getElementById("liveness").value),
66
+ valence: parseFloat(document.getElementById("valence").value),
67
+ tempo: parseFloat(document.getElementById("tempo").value),
68
+ duration_ms: parseInt(document.getElementById("duration_ms").value),
69
+ time_signature: parseInt(document.getElementById("time_signature").value)
70
+ };
71
+
72
+ const response = await fetch(`/predict/${model}`, {
73
+ method: "POST",
74
+ headers: {
75
+ "Content-Type": "application/json",
76
+ "Token": token
77
+ },
78
+ body: JSON.stringify(features)
79
+ });
80
+
81
+ const data = await response.json();
82
+ document.getElementById("result").innerHTML = `
83
+ <h3>Model: ${data.model}</h3>
84
+ <p>Prediction: <strong>${data.prediction}</strong></p>
85
+ `;
86
+ });
87
+ </script>
88
+ </body>
89
+ </html>