mirror of
https://github.com/dangvansam/deepxi-flask-server.git
synced 2026-04-23 03:00:12 -04:00
214 lines
9.3 KiB
HTML
214 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
|
<title>deep-xi</title>
|
|
</head>
|
|
<style>
|
|
body{
|
|
text-align: center;
|
|
|
|
}
|
|
.custom_btn{
|
|
background-color: lightgreen;
|
|
border: none;
|
|
padding: 8px;
|
|
border-radius: 3px;
|
|
margin-top: 10px;
|
|
|
|
}
|
|
.container{
|
|
padding-left: 20%;
|
|
padding-right: 20%;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="mb-3 mt-3">
|
|
<h2 class="mb-3" style="font-weight: 300">DeepXi</h2>
|
|
|
|
<div class="form-group mb-3">
|
|
<div class="custom-file">
|
|
<input type="file" class="custom-file-input" name="file_input" id="file_input" oninput="input_filename();">
|
|
<label id="file_input_label" class="custom-file-label" >Select file (wav, mp3, flac)</label>
|
|
</div>
|
|
</div>
|
|
<div id="progress_wrapper" class="d-none">
|
|
<label id="progress_status"></label>
|
|
<div class="progress mb-3">
|
|
<div id="progress" class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<div id="alert_wrapper" class="d-none"></div>
|
|
<button onclick="upload('/upload');" id="upload_btn" class="btn btn-primary">Upload</button>
|
|
<button class="btn btn-primary d-none" id="loading_btn" type="button" disabled>
|
|
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Uploading...
|
|
</button>
|
|
<button type="button" id="cancel_btn" class="btn btn-secondary d-none">Cancel</button>
|
|
</div>
|
|
|
|
<div id="original_play" style="margin: 10px;" class="d-none">
|
|
<h4>original</h4>
|
|
<audio id="original_audio" controls src="" type="audio/*">
|
|
</div>
|
|
<div id="predict_play" style="margin: 10px;" class="d-none">
|
|
<h4>predict</h4>
|
|
<audio id="predict_audio" controls src="" type="audio/*">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var input = document.getElementById("file_input")
|
|
var file_input_label = document.getElementById("file_input_label")
|
|
var progress = document.getElementById("progress");
|
|
var progress_wrapper = document.getElementById("progress_wrapper");
|
|
var progress_status = document.getElementById("progress_status");
|
|
var upload_btn = document.getElementById("upload_btn");
|
|
var loading_btn = document.getElementById("loading_btn");
|
|
var loading_btn_text = document.getElementById("loading_btn_text");
|
|
var cancel_btn = document.getElementById("cancel_btn");
|
|
var alert_wrapper = document.getElementById("alert_wrapper");
|
|
var original_play = document.getElementById("original_play")
|
|
var predict_play = document.getElementById("predict_play")
|
|
var original_audio = document.getElementById("original_audio")
|
|
var predict_audio = document.getElementById("predict_audio")
|
|
function input_filename() {
|
|
file_input_label.innerText = input.files[0].name;}
|
|
|
|
function show_alert(message, alert, autohide=false) {
|
|
alert_wrapper.classList.remove("d-none")
|
|
alert_wrapper.innerHTML = `
|
|
<div id="alert" class="alert alert-${alert} alert-dismissible fade show" role="alert">
|
|
<span>${message}</span>
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
`
|
|
// if (autohide){
|
|
// setTimeout(() => {alert_wrapper.classList.add("d-none")}, 5000)
|
|
// }
|
|
}
|
|
|
|
function upload(url) {
|
|
console.log(url)
|
|
if (!input.value) {
|
|
show_alert("No file selected", "warning")
|
|
return;
|
|
}
|
|
var data = new FormData();
|
|
var request = new XMLHttpRequest();
|
|
request.responseType = "json";
|
|
alert_wrapper.innerHTML = "";
|
|
input.disabled = true;
|
|
upload_btn.classList.add("d-none");
|
|
loading_btn.classList.remove("d-none");
|
|
cancel_btn.classList.remove("d-none");
|
|
progress_wrapper.classList.remove("d-none");
|
|
original_play.classList.add("d-none")
|
|
predict_play.classList.add("d-none")
|
|
var file = input.files[0];
|
|
var filename = file.name;
|
|
var filesize = file.size;
|
|
document.cookie = `filesize=${filesize}`;
|
|
data.append("file", file);
|
|
request.upload.addEventListener("progress", function (e) {
|
|
var loaded = e.loaded;
|
|
var total = e.total
|
|
var percent_complete = (loaded / total) * 100;
|
|
progress.setAttribute("style", `width: ${Math.floor(percent_complete)}%`);
|
|
progress_status.innerHTML = `${Math.floor(percent_complete)}% uploaded`;
|
|
if (percent_complete == 100){
|
|
show_alert("Saving file to server...", "primary");
|
|
loading_btn.innerHTML = "<span class='spinner-border spinner-border-sm' role='status' aria-hidden='true'></span>" + " Predict..."
|
|
}
|
|
})
|
|
// request load handler (transfer complete)
|
|
request.addEventListener("load", function (e) {
|
|
if (request.status == 200) {
|
|
show_alert(`${request.response.message}`, "success", true);
|
|
original_play.classList.remove("d-none")
|
|
original_audio.src = request.response.file_path
|
|
original_audio.autoplay = true
|
|
progress_wrapper.classList.add("d-none")
|
|
//loading_btn.innerHTML = "<span class='spinner-border spinner-border-sm' role='status' aria-hidden='true'></span>" + " Predict..."
|
|
predict_rq = predict('/predict/' + String(request.response.file_path).split('/').join('='))
|
|
if (predict_rq.status == 200){
|
|
json = JSON.parse(predict_rq.responseText)
|
|
show_alert(json.message, "success")
|
|
console.log(predict_rq.responseText)
|
|
console.log(json.out_file_path)
|
|
predict_play.classList.remove("d-none")
|
|
predict_audio.src = json.out_file_path
|
|
}
|
|
else{
|
|
show_alert(`Error predict file:` + filename, "danger");
|
|
}
|
|
loading_btn.classList.add("d-none")
|
|
loading_btn.innerHTML = "<span class='spinner-border spinner-border-sm' role='status' aria-hidden='true'></span>" + " Uploading..."
|
|
|
|
}
|
|
else {
|
|
}
|
|
reset();
|
|
});
|
|
// request error handler
|
|
request.addEventListener("error", function (e) {
|
|
reset();
|
|
show_alert(`Error uploading file`, "danger");
|
|
});
|
|
// request abort handler
|
|
request.addEventListener("abort", function (e) {
|
|
reset();
|
|
show_alert(`Upload cancelled`, "danger");
|
|
});
|
|
// Open and send the request
|
|
request.open("post", url);
|
|
request.send(data);
|
|
cancel_btn.addEventListener("click", function () {
|
|
request.abort();
|
|
})
|
|
}
|
|
|
|
function predict(url){
|
|
var xmlHttp = new XMLHttpRequest();
|
|
//xmlHttp.responseType = "json";
|
|
xmlHttp.open( "GET", url, false ); // false for synchronous request
|
|
xmlHttp.send( null );
|
|
//console.log(xmlHttp.response.out_file_path)
|
|
return xmlHttp;
|
|
}
|
|
|
|
function reset() {
|
|
// Clear the input
|
|
input.value = null;
|
|
// Hide the cancel button
|
|
cancel_btn.classList.add("d-none");
|
|
// Reset the input element
|
|
input.disabled = false;
|
|
// Show the upload button
|
|
upload_btn.classList.remove("d-none");
|
|
// Hide the loading button
|
|
loading_btn.classList.add("d-none");
|
|
//loading_btn_text.textContent = "Uploading..."
|
|
// Hide the progress bar
|
|
progress_wrapper.classList.add("d-none");
|
|
// Reset the progress bar state
|
|
progress.setAttribute("style", `width: 0%`);
|
|
// Reset the input placeholder
|
|
file_input_label.innerText = "Select file";
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |