Spaces:
Sleeping
Sleeping
Upload folder using huggingface_hub
Browse files- index.html +40 -3
- server.py +0 -3
index.html
CHANGED
|
@@ -296,6 +296,34 @@
|
|
| 296 |
color: #555;
|
| 297 |
text-align: center;
|
| 298 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 299 |
</style>
|
| 300 |
</head>
|
| 301 |
<body>
|
|
@@ -309,7 +337,10 @@
|
|
| 309 |
<input type="file" id="fileInput" accept="audio/*">
|
| 310 |
<div class="file-name" id="fileName"></div>
|
| 311 |
</div>
|
| 312 |
-
|
|
|
|
|
|
|
|
|
|
| 313 |
<button class="button" id="classifyBtn" disabled>Classify Audio</button>
|
| 314 |
|
| 315 |
<div class="loading" id="loading">
|
|
@@ -326,7 +357,7 @@
|
|
| 326 |
</div>
|
| 327 |
|
| 328 |
<div class="top-predictions">
|
| 329 |
-
<h3>
|
| 330 |
<div id="topPredictions"></div>
|
| 331 |
</div>
|
| 332 |
</div>
|
|
@@ -393,6 +424,11 @@
|
|
| 393 |
hideError();
|
| 394 |
}
|
| 395 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 396 |
// Classify button
|
| 397 |
classifyBtn.addEventListener('click', async () => {
|
| 398 |
if (!selectedFile) return;
|
|
@@ -406,7 +442,7 @@
|
|
| 406 |
const formData = new FormData();
|
| 407 |
formData.append('file', selectedFile);
|
| 408 |
|
| 409 |
-
const response = await fetch(`${API_URL}/predict-top-k?k=
|
| 410 |
method: 'POST',
|
| 411 |
body: formData
|
| 412 |
});
|
|
@@ -427,6 +463,7 @@
|
|
| 427 |
});
|
| 428 |
|
| 429 |
function displayResults(data) {
|
|
|
|
| 430 |
// Main prediction
|
| 431 |
document.getElementById('predictedClass').textContent =
|
| 432 |
data.predicted_class.replace(/_/g, ' ').toUpperCase();
|
|
|
|
| 296 |
color: #555;
|
| 297 |
text-align: center;
|
| 298 |
}
|
| 299 |
+
|
| 300 |
+
.k-selector {
|
| 301 |
+
display: flex;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
gap: 15px;
|
| 305 |
+
margin-top: 20px;
|
| 306 |
+
color: #667eea;
|
| 307 |
+
font-weight: 600;
|
| 308 |
+
}
|
| 309 |
+
|
| 310 |
+
.k-selector input[type="range"] {
|
| 311 |
+
appearance: none;
|
| 312 |
+
height: 6px;
|
| 313 |
+
border-radius: 3px;
|
| 314 |
+
background: #e0e4ff;
|
| 315 |
+
outline: none;
|
| 316 |
+
}
|
| 317 |
+
|
| 318 |
+
.k-selector input[type="range"]::-webkit-slider-thumb {
|
| 319 |
+
-webkit-appearance: none;
|
| 320 |
+
width: 20px;
|
| 321 |
+
height: 20px;
|
| 322 |
+
border-radius: 50%;
|
| 323 |
+
background: linear-gradient(135deg, #667eea, #764ba2);
|
| 324 |
+
cursor: pointer;
|
| 325 |
+
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
|
| 326 |
+
}
|
| 327 |
</style>
|
| 328 |
</head>
|
| 329 |
<body>
|
|
|
|
| 337 |
<input type="file" id="fileInput" accept="audio/*">
|
| 338 |
<div class="file-name" id="fileName"></div>
|
| 339 |
</div>
|
| 340 |
+
<div class="k-selector">
|
| 341 |
+
<label for="kInput">Number of predictions: <span id="kValue">5</span> </label>
|
| 342 |
+
<input type="range" id="kInput" min="1" max="10" value="5">
|
| 343 |
+
</div>
|
| 344 |
<button class="button" id="classifyBtn" disabled>Classify Audio</button>
|
| 345 |
|
| 346 |
<div class="loading" id="loading">
|
|
|
|
| 357 |
</div>
|
| 358 |
|
| 359 |
<div class="top-predictions">
|
| 360 |
+
<h3></h3>
|
| 361 |
<div id="topPredictions"></div>
|
| 362 |
</div>
|
| 363 |
</div>
|
|
|
|
| 424 |
hideError();
|
| 425 |
}
|
| 426 |
|
| 427 |
+
const kInput = document.getElementById('kInput');
|
| 428 |
+
kInput.addEventListener('input', () => {
|
| 429 |
+
document.getElementById('kValue').textContent = kInput.value;
|
| 430 |
+
});
|
| 431 |
+
|
| 432 |
// Classify button
|
| 433 |
classifyBtn.addEventListener('click', async () => {
|
| 434 |
if (!selectedFile) return;
|
|
|
|
| 442 |
const formData = new FormData();
|
| 443 |
formData.append('file', selectedFile);
|
| 444 |
|
| 445 |
+
const response = await fetch(`${API_URL}/predict-top-k?k=${kInput.value}`, {
|
| 446 |
method: 'POST',
|
| 447 |
body: formData
|
| 448 |
});
|
|
|
|
| 463 |
});
|
| 464 |
|
| 465 |
function displayResults(data) {
|
| 466 |
+
document.querySelector('.top-predictions h3').textContent = `Top ${kInput.value} Predictions`;
|
| 467 |
// Main prediction
|
| 468 |
document.getElementById('predictedClass').textContent =
|
| 469 |
data.predicted_class.replace(/_/g, ' ').toUpperCase();
|
server.py
CHANGED
|
@@ -64,9 +64,6 @@ async def predict_top_k(file: UploadFile = File(...), k: int = 5):
|
|
| 64 |
print("[2] Running inference...")
|
| 65 |
predicted_class, top_probs, top_indices = predictor.predict_file(wav_path, top_k=k)
|
| 66 |
print(f"[3] Done: {predicted_class} = {dataset_cfg.esc50_labels[predicted_class]}")
|
| 67 |
-
AudioSegment.from_file(tmp_path).export(wav_path, format="wav")
|
| 68 |
-
|
| 69 |
-
predicted_class, top_probs, top_indices = predictor.predict_file(wav_path, top_k=k)
|
| 70 |
|
| 71 |
return {
|
| 72 |
"predicted_class": dataset_cfg.esc50_labels[predicted_class],
|
|
|
|
| 64 |
print("[2] Running inference...")
|
| 65 |
predicted_class, top_probs, top_indices = predictor.predict_file(wav_path, top_k=k)
|
| 66 |
print(f"[3] Done: {predicted_class} = {dataset_cfg.esc50_labels[predicted_class]}")
|
|
|
|
|
|
|
|
|
|
| 67 |
|
| 68 |
return {
|
| 69 |
"predicted_class": dataset_cfg.esc50_labels[predicted_class],
|