将Microsoft的情感 API 添加到 HTML 网站

Adding Microsoft's Emotion API to HTML website

本文关键字：HTML 网站 添加 API Microsoft 情感      更新时间：2023-09-26

我正在尝试简单地创建一个HTML网页，从用户输入的图像中给我情感。使用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>

我的理解是，这应该在不需要服务器的情况下工作，但是，我在加载网站时总是收到"失败"消息。任何帮助都会起作用，谢谢！

使用我们（Microsoft）在这里使用的 API 测试工具：https://dev.projectoxford.ai/docs/services/5639d931ca73072154c1ce89/operations/563b31ea778daf121cc3a5fa/console

确保您可以发出正确的请求，并且您实际上是在设置您的 api 密钥，而不是重新发送 my-key。

如果您的密钥无效，您将在 javascript 控制台中收到错误："Access-Control-Allow-Origin"标头存在于请求的资源上。

如果您的密钥有效，但您的数据未转义，您将收到 400 错误请求错误。更新数据字段以换行"。在这里查看我的示例（填写您的密钥）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");
        });
    });
相关文章：