|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<link rel="stylesheet" href="style.css"> |
|
<title>Practicum-SER</title> |
|
</head> |
|
|
|
<body> |
|
<div class="cont"> |
|
<div class="body"> |
|
<h1> Speech Emotion Detection </h1> |
|
<h2> Select a File from list to Predict Emotion</h2> |
|
<form id="get_emotion" method="post"> |
|
<select name="file_name" id="file-sel" required> |
|
<option value=""> -- Select file for Emotion Detection -- </option> |
|
</select> |
|
<div class="audio" id="audio"></div> |
|
<button type="submit">Predict Emotion</button> |
|
<textarea name="emotion" id="emotion" cols="5" rows="1" disabled placeholder="Predicted Emotion"></textarea> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.4.min.js" |
|
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script> |
|
</script> |
|
<script> |
|
|
|
function setFileNames(arr) { |
|
file = document.getElementById("file-sel"); |
|
arr.forEach(element => { |
|
opt_list = `<option value=${element}> ${element}</option>` |
|
file.insertAdjacentHTML('beforeend', opt_list) |
|
}); |
|
} |
|
|
|
fetch("http://127.0.0.1:8000/files") |
|
.then((response) => response.json()) |
|
.then(setFileNames); |
|
|
|
document.forms['get_emotion'].addEventListener('submit', (event) => { |
|
event.preventDefault(); |
|
fetch('http://127.0.0.1:8000/get_emotion', { |
|
method: 'POST', |
|
body: new URLSearchParams(new FormData(event.target)) |
|
}).then((response) => { |
|
if (!response.ok) { |
|
throw new Error(`HTTP error! Status: ${response.status}`); |
|
} |
|
return response.text(); |
|
}).then((body) => { |
|
document.getElementById("emotion").innerText = ` ${body.toString()}`; |
|
|
|
}).catch((error) => { |
|
|
|
console.log(error); |
|
}); |
|
}); |
|
|
|
async function postData(url , data) { |
|
const response = await fetch(url, { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/json' |
|
}, |
|
body: JSON.stringify(data) |
|
}); |
|
return response.blob(); |
|
} |
|
|
|
function load_sound_file(child){ |
|
postData('http://127.0.0.1:8000/get_file', { "file_name": this.value }) |
|
.then(blob => { |
|
const audioURL = URL.createObjectURL(blob); |
|
const audioElement = document.createElement('audio'); |
|
audioElement.src = audioURL; |
|
audioElement.controls = true; |
|
ad= document.getElementById("audio"); |
|
ad.innerHTML = ""; |
|
ad.appendChild(audioElement); |
|
}); |
|
} |
|
|
|
document.getElementById("file-sel").addEventListener('change', load_sound_file); |
|
</script> |
|
</body> |
|
|
|
</html> |
