-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
86 lines (77 loc) · 3.62 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
<!DOCTYPE html>
<html>
<head>
<title>JSSample</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body style="background-color:#C8102E;">
<div class="container" style="text-align:center;">
<form id="submit-form" style="width:80%; height:100vh; margin: 0 auto; background-color:white; padding: 10px;">
<h1 style="color:#888B8D; margin-top: 25px;">MISSO Emotion Reader ಠ_ಠ</h1>
<div class="form-group">
<input type="text" class="form-control" id="image-url-textbox" placeholder="Enter image url" style="width:500px; margin: 0 auto;">
<div>
<img class="img-thumbnail" src="images/placeholder.jpg" id="image-thumbnail" style="margin:10px 0px; max-width:250px;display:inline-block;">
<div id="scores-res" style="display:inline-block;vertical-align: top;height: 100%;width: 250px;text-align: left;margin:10px 0px;">Results...</div>
</div>
<p id="result"></p>
</div>
<button type="submit" class="btn btn-primary">Read Me</button>
</form>
</div>
<script type="text/javascript">
const classify = function(e) {
var url = document.getElementById("image-url-textbox").value;
e.preventDefault();
$.ajax({
// NOTE: You must use the same location in your REST call as you used to obtain your subscription keys.
// For example, if you obtained your subscription keys from westcentralus, replace "westus" in the
// URL below with "westcentralus".
url: "https://westus.api.cognitive.microsoft.com/emotion/v1.0/recognize?",
beforeSend: function(xhrObj){
// Request headers
xhrObj.setRequestHeader("Content-Type","application/json");
// NOTE: Replace the "Ocp-Apim-Subscription-Key" value with a valid subscription key.
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","");
},
type: "POST",
// Request body
data: `{"url": "${url}"}`,
})
.done(function(data) {
var thumb = document.getElementById("image-thumbnail");
thumb.setAttribute("src", url);
var result = document.getElementById("result");
if(data[0]){
const scores = data[0].scores
var scoresStr = '';
var highScore = 0
var highKey = undefined
for (var key in scores) {
scoresStr += key + ': ' + scores[key] + '<br>';
if (scores[key] > highScore) {
highScore = scores[key]
highKey = key
}
}
result.innerText = 'You appear to be feeling...' + highKey + '!';
document.getElementById("scores-res").innerHTML = scoresStr;
}
else{
alert("No faces found :(");
result.innerText = "I can't find you.";
document.getElementById("scores-res").innerHTML = 'none available';
}
console.log(data);
})
.fail(function(e) {
alert('Error: ' + e.responseText);
console.error(e);
});
}
var form = document.getElementById("submit-form");
form.onsubmit = classify;
</script>
</body>
</html>