0

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!

Sagar Mohan
  • 145
  • 1
  • 5
  • 17
  • Can't use ajax in `file://` protoocol without changing browser security settings which is not typically a good idea. Can set up a local server very quickly though with numerous different packages to do it – charlietfl Jan 15 '16 at 18:36
  • I'm quite a novice at this type of thing, could you please let me know how I could possibly build this HTML page and let me work? Thank you! – Sagar Mohan Jan 15 '16 at 18:42
  • open the page on a server . That server can be a localhost right on your computer. How to set it up is an easy web search – charlietfl Jan 15 '16 at 18:44
  • Hi, tried this however it still doesn't work. – Sagar Mohan Jan 16 '16 at 00:29

1 Answers1

1

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");
        });
    });
Adam Tuliper
  • 29,982
  • 4
  • 53
  • 71
  • Hey! Thank you so much, that worked fine. I was wondering however, if I'm able to make this into a HTML file? I actually need to do this as part of my final year engineering project. – Sagar Mohan Jan 15 '16 at 19:12
  • 1
    weird, whats happening is a CORS issue - browser security. I'll see what I can find out, meanwhile you can try a C# or other alternative to get you going. I'll post more details here when I get a reply back. – Adam Tuliper Jan 15 '16 at 19:19
  • It's an issue the team is looking into it :) – Adam Tuliper Jan 16 '16 at 06:46
  • Thanks for your help! Please let me know when I'll be able to generate a working HTML file! :) – Sagar Mohan Jan 16 '16 at 11:42
  • Hi, would you please be able to let me know how to display the result, i.e. the emotions as an output? Thanks. – Sagar Mohan Jan 20 '16 at 14:53
  • What do you want to show? The results returned give you the pixel locations of faces and then the emotions – Adam Tuliper Jan 20 '16 at 23:39