实施微软的 Project Oxford - 情感 API 和文件上传

Question

我希望能够在我的网站上实施牛津计划中的情感 API。我目前编写了下面的 HTML/JavaScript 代码，它检查来自 URL 的图像并在具有运行情感 API:[=12= 之后显示所述图像的结果]

<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");
      },
      type: "POST",
      // Request body
      data: '{"url": "https://philosophybank.files.wordpress.com/2013/08/happy-people.jpg"}',
    })
    .done(function(data) {
    JSON.stringify(data);
      alert(JSON.stringify(data));
      //console.log(data);
      //alert(data.scores);
    })
    .fail(function(error) {
      console.log(error.getAllResponseHeaders());

      alert("fail");
    });
});

</script>

这段代码工作正常，但是我希望在我的网站上实现它，以便人们使用浏览按钮从他们的机器本地上传图像，而不是使用 link.非常感谢任何帮助！

Answer 1

我使用 application/octet-stream 作为正文类型来模拟它，它允许您 post 二进制对象（即图像本身），而不是 url 到图像。 Emotion API documentation 详细说明了这是一种受支持的内容类型。

我按照你原来的例子继续使用 JQuery。

您应该能够将整个示例复制并粘贴到 HTML 文件中，将您的 Emotion API 键添加到显示 my-key 的位置，它将起作用

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>

<body>
    <input type="file" id="file" name="filename">
    <button id="btn">Click here</button>

    <script type="text/javascript">
        $('#btn').click(function () {

            var file = document.getElementById('file').files[0];

            $.ajax({
                    url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
                    beforeSend: function(xhrObj) {
                        // Request headers
                        xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
                        xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "my-key");
                    },
                    type: "POST",
                    data: file,
                    processData: false
                })
                .done(function(data) {
                    JSON.stringify(data);
                    alert(JSON.stringify(data));
                })
                .fail(function(error) {
                    alert(error.getAllResponseHeaders());
                });
        });
    </script>
</body>

</html>

实施微软的 Project Oxford - 情感 API 和文件上传

Implementing Microsoft's Project Oxford - Emotion API and file upload

html

javascript

windows

ajax

microsoft-cognitive