将微软的Emotion API添加到HTML网站 [英] Adding Microsoft's Emotion API to HTML website
问题描述
我试图简单地创建一个HTML网页，让我从用户输入的图像中获得情感。
使用微软的文档，我在下面创建了一个HTML文件：
<！DOCTYPE html>
< html>
< head>
< title> JSSample< / title>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js>< / script>
< / head>
< body>
< script type =text / javascript>
$（function（）{
$ .ajax（{
url：https://api.projectoxford.ai/emotion/v1.0/recognize，
beforeSend ：function（xhrObj）{
//请求标头
xhrObj.setRequestHeader（Content-Type，application / json）;
xhrObj.setRequestHeader（Ocp-Apim-Subscription- Key，my-key）;
}，
类型：POST，
//请求正文
数据：{url：https：// oxfordportal.blob.core.windows.net/emotion/recognition1.jpg}，
}）
.done（function（data）{
alert（success）;
）}
.fail（function（）{
alert（fail）;
}）;
}）;
< / script>
< / body>
< / html>
我的理解是，这应该不需要服务器，但是，在加载网站时失败的消息。
任何帮助都可行，谢谢！
使用我们（微软）在此处提供的API测试工具：
https://dev.projectoxford.ai/docs/ services / 5639d931ca73072154c1ce89 / operations / 563b31ea778daf121cc3a5fa / console
确保您可以提出正确的请求，并且您实际上正在设置api密钥并且不会发送my-key过度。 b
$ b
如果您的密钥无效，您将在javascript控制台中收到错误消息：Access-Control-Allow-Origin标题出现在请求的资源中。如果你的密钥有效但你的数据没有被转义，你将得到一个400错误的请求错误。
更新您的数据字段以包装'。在这里查看我的示例（填写您的密钥） http://jsfiddle.net/w3npr1ue $（function（）{
$ .ajax（{
url：https://api.projectoxford.ai/情绪/ v1.0 /识别，
beforeSend：function（xhrObj）{
//请求头文件
xhrObj.setRequestHeader（Content-Type，application / json）;
xhrObj.setRequestHeader（Ocp-Apim-Subscription-Key，SetYourKey）;
}，
类型：POST，
//请求正文
data：'{url：http://1.bp.blogspot.com/-dWka6rPeHZI/UL7newH9TnI/AAAAAAAAAQI/OfU3TW0dDBE/s220/Asa%2Band%2BDada%2Bin%2Bst.%2Bpetersburg%2BSmall.jpg} '，
}）
.done（函数（数据）{
alert（success）;
}）
.fail（function（error）{
console.log（error.getAllResponseHeaders（））;
a lert（ 失败）;
}）;
}）;
I'm trying to simply create a HTML webpage that gives me emotions from images input by the user. Using Microsoft's documentation I created a HTML file below:
<!DOCTYPE html>
<html>
<head>
<title>JSSample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<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");
},
type: "POST",
// Request body
data: {"url": "https://oxfordportal.blob.core.windows.net/emotion/recognition1.jpg"},
})
.done(function(data) {
alert("success");
})
.fail(function() {
alert("fail");
});
});
</script>
</body>
</html>
My understanding is that this should work without the need of a server, however, I am always getting 'fail' message on loading the website. Any help would work, thank you!
Use the API testing tool we (Microsoft) have on over here: https://dev.projectoxford.ai/docs/services/5639d931ca73072154c1ce89/operations/563b31ea778daf121cc3a5fa/console
Ensure you can make a correct request and you are actually setting your api key and not sending my-key on over.
If your key is invalid you'll get an error in the javascript console: 'Access-Control-Allow-Origin' header is present on the requested resource.
If your key is valid but your data is not escaped, you'll get a 400 bad request error. Update your data field to wrap with ''. See my example here (fill in your key) http://jsfiddle.net/w3npr1ue
$(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","SetYourKey");
},
type: "POST",
// Request body
data: '{"url": "http://1.bp.blogspot.com/-dWka6rPeHZI/UL7newH9TnI/AAAAAAAAAQI/OfU3TW0dDBE/s220/Asa%2Band%2BDada%2Bin%2Bst.%2Bpetersburg%2BSmall.jpg"}',
})
.done(function(data) {
alert("success");
})
.fail(function(error) {
console.log(error.getAllResponseHeaders());
alert("fail");
});
});
这篇关于将微软的Emotion API添加到HTML网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
