File size: 3,689 Bytes
9e37df5 8701113 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<!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) => {
// TODO handle 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> |