-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·141 lines (124 loc) · 4.33 KB
/
index.html
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Covid Detector</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<!-- <script src="/data/scripts.js" charset="utf-8"></script> -->
<style>
/* .row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
} */
.bar{
background-color: aqua;
}
</style>
</head>
<body>
<div class="jumbotron text-center">
<h1>Covid Cough Detector</h1>
<p>A prelimenary non-invasive methodology to screen for COVID-19</p>
</div>
<div class="container col-9 mx-auto d-block bg-gradient-primary">
<p>
Kindly upload your cough audio below.
</p>
<div id="spinner" style="display: none;">
<img src="loading.gif"/>
</div>
<div id="server" style="display: none;">
Model Prediction:
<table style="width:5%">
<tr>
<td>Status:</td> <td id="decision">Normal</td>
</tr>
<tr>
<td>Confidence:</td> <td id="confidence">None</td>
</tr>
</table>
<span id="server-results">
</span>
</div>
<div class="row ">
<!-- <div class="col align-self-end"> -->
<div class="card">
<div class="card-block">
<h9 class="card-title">Audio Player</h9>
<div class="mp3-audio">
<audio controls id="input_audio" class="mp3-audio"></audio>
</div>
</div>
</div>
<!-- </div> -->
</div>
<form action="/api/health/v1/ria" method="post" enctype="multipart/form-data", id="covid-form">
<label>Select a file:</label>
<input type="file" name="audio" onchange="loadFile(event)" accept=".wav, audio/*">
<br/>
<button type="submit" name="predict">Predict</button>
<button type="submit" name="plot">Plot</button>
</form>
<!-- <div>
<iframe id="visualization">
</iframe>
</div> -->
<div id="visualization" >
</div>
</div>
</body>
<script>
var loadFile = function (event) {
var audio = document.getElementById('input_audio');
audio.src = URL.createObjectURL(event.target.files[0]);
};
$("#covid-form").submit(function (event) {
$("#spinner").show();
$("#server").hide();
$("#server-error-quality").hide();
console.log(event);
event.preventDefault(); //prevent default action
var activeElement = document.activeElement;
console.log(activeElement);
if(activeElement.type === "submit") {
console.log(activeElement.name);
}
//var post_url = $(this).attr("action"); //get form action url
post_url = "/api/health/v1/ria";
if(activeElement.name === "plot")
post_url = "/api/health/v1/visualization";
var request_method = $(this).attr("method"); //get form GET/POST method
var form_data = new FormData(this); //Creates new FormData object
$.ajax({
url: post_url,
type: request_method,
data: form_data,
contentType: false,
cache: false,
processData: false
}).done(function (response) {
$("#spinner").hide();
console.log(response);
var values = response["result"];
if(values){
$("#server").show();
var prediction = values["prediction"];
$("#decision").html(prediction);
var confidence = (values["confidence"]*100).toFixed(2) + "%";
$("#confidence").html(confidence);
}
else{
var values = response["html_div"];
$("#visualization").html(values);
}
$(document).scrollTop(0);
});
});
</script>
</html>