个人中心
gpt4 book ai didi

javascript - 实现 Microsoft 的 Project Oxford - Emotion API 和文件上传

转载 作者：行者123 更新时间：2023-11-28 18:44:41 25 4
gpt4 key购买 nike

我希望能够在我的网站上实现 Project Oxford 的 Emotion API。我目前编写了以下 HTML/JavaScript 代码，该代码检查来自 URL 的图像并在运行 Emotion API 后显示所述图像的结果:

<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>

这段代码工作正常，但是我希望在我的网站上实现这一点，以便人们使用浏览按钮从他们的机器本地上传图像，而不是使用链接查找图像。任何帮助将非常感激!

最佳答案

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

我按照您原来的示例继续使用 JQuery。

您应该能够将整个示例复制并粘贴到 HTML 文件中，在显示 my-key 的位置添加您的 Emotion API 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>

关于javascript - 实现 Microsoft 的 Project Oxford - Emotion API 和文件上传，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35565732/

25 4 0
文章推荐： javascript - 避免使用空格/回车调用按钮
文章推荐： python - 从 WARC.gz 文件中提取 header
文章推荐： iphone - NSNetService 问题
文章推荐： python - matplotlib 轴刻度标签 : getting mantissa and exponent
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com