多亏了这篇文章,我设法运行了以下代码 将Microsoft的情感API添加到HTML网站。
<HTML>
<head>
<title>JSSample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<body>
<script type="text/javascript">
$(function() {
$.ajax({
url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
beforeSend: function(xhrObj){
// Request headers
xhrObj.setRequestHeader("Content-Type","application/json");
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","my-key-here");
},
type: "POST",
// Request body
data: '{"url": "https://oxfordportal.blob.core.windows.net/emotion/recognition1.jpg"}',
})
.done(function(data) {
alert("success");
})
.fail(function(error) {
console.log(error.getAllResponseHeaders());
alert("fail");
});
});
</script>
</body>
</head>
</html>
这似乎是愚蠢的问题,但是我一直想知道如何从HTML文件中获取情绪输出? 即,我想生成一个文本文件,而不是成功警报,该文件显示每种情绪的情绪API输出(就像在他们的网站上一样)。
一种解决方案可能是阅读有关 Blob 的信息。您可以在done()中获取来自ajax调用的响应并创建所需的文本文件。下面是使用我在 JSFiddle 上找到的 Blob 的示例:
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, fileName) {
var json = JSON.stringify(data),
blob = new Blob([json], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
var data = { x: 42, s: "hello, world", d: new Date() },
fileName = "my-download.json";
saveData(data, fileName);
源
data
是一个数组,每个面一个项目。 如果您只想转储文本,可以调用 JSON.stringify(data)
. 如果你想用HTML打印它,看看如何使用JavaScript漂亮地打印JSON?。
我已经在我的网站上完成了这个 HowHappy.co.uk 该网站也在GitHub上:https://github.com/martinkearn/How-Happy
我在网站上显示数据的方式是在 Javascript 中枚举人脸数组,并使用基本的 CSS 在正确的位置显示矩形,并使用 Bootstrap 弹出窗口来显示详细信息数据。
这个回应中有太多的东西要放,所以我建议你看看 GitHub 存储库,但这里有一些关键位
爪哇语
var dataString = JSON.stringify(response);
var data = JSON.parse(dataString);
//draw rectangle for each face
$.each(data.Faces, function (index, value) {
var rect = document.createElement('div');
rect.className = "rect";
rect.style.height = value.faceRectangle.height + "px";
rect.style.width = value.faceRectangle.width + "px";
rect.style.left = value.faceRectangle.left + "px";
rect.style.top = value.faceRectangle.top + "px";
rect.id = "rect" + index;
$('#result').append(rect);
//add popover
var popoverBody = "Happiness: " + Number((value.scores.happiness).toFixed(2))
+ "<br>Fear: " + Number((value.scores.fear).toFixed(2))
+ "<br>Anger: " + Number((value.scores.anger).toFixed(2))
+ "<br>Contempt: " + Number((value.scores.contempt).toFixed(2))
+ "<br>Disgust: " + Number((value.scores.disgust).toFixed(2))
+ "<br>Neutral: " + Number((value.scores.neutral).toFixed(2))
+ "<br>Sadness: " + Number((value.scores.sadness).toFixed(2))
+ "<br>Surprise: " + Number((value.scores.surprise).toFixed(2));
$('#rect' + index).popover({
title: (index + 1)
content: popoverBody,
html: "true",
trigger: "click"
});
});
CSS
.rect {
position: absolute;
border-color: #FFEA0E;
border-style: solid;
border-width: 4px;
z-index: 10;
}
#result {
position: relative;
text-align: center;
margin: 0 auto;
width: auto;
}
#resultDetails {
font-size: 3rem;
text-align: center;
}