简体   繁体   English

将Microsoft的Emotion API添加到HTML网站

[英]Adding Microsoft's Emotion API to HTML website

I'm trying to simply create a HTML webpage that gives me emotions from images input by the user. 我试图简单地创建一个HTML网页,使用户输入的图像给我带来情感。 Using Microsoft's documentation I created a HTML file below: 使用Microsoft的文档,我在下面创建了一个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){
                // 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 使用我们(Microsoft)在此处提供的API测试工具: 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. 确保您可以提出正确的请求,并且您实际上是在设置api密钥,并且不会继续发送my-key。

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. 如果您的密钥无效,则会在javascript控制台中收到错误消息:所请求的资源上存在“ Access-Control-Allow-Origin”标头。

If your key is valid but your data is not escaped, you'll get a 400 bad request error. 如果您的密钥有效,但您的数据没有被转义,则会收到400错误的请求错误。 Update your data field to wrap with ''. 更新您的数据字段以换行为“”。 See my example here (fill in your key) http://jsfiddle.net/w3npr1ue 在这里查看我的示例(填写您的密钥) 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");
        });
    });

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM