Displaying Project Oxford's Emotion API result

Question

I've managed to run the following code thanks to this post here Adding Microsoft's Emotion API to HTML website.

<HTML>
<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-here");
            },
            type: "POST",
            // Request body
             data: '{"url": "https://oxfordportal.blob.core.windows.net/emotion/recognition1.jpg"}',
        })
        .done(function(data) {
            alert("success");

        })
        .fail(function(error) {
        console.log(error.getAllResponseHeaders());

            alert("fail");
        });
    });
</script>
</body>
</head>
</html>

This may seem like stupid question however I've been wondering how to get the emotions output from the HTML file? i.e. instead of the success alert I'd like to generate a text file which shows the output of the Emotions API with each emotion (like it does on their website).

Is this on a website? Do you want to generate a file for the user to download? — James J. Hill, Jan 20 '16 at 15:40
Indeed it is on a website. Please see the edited question with HTML tags. It would be nice to have a downloadable file that's generated yes. — Sagar Mohan, Jan 20 '16 at 15:42

score 0 · Answer 1 · answered Jan 20 '16 at 15:45

0

One solution could be to read about Blob's. You could take the response from the ajax call in done() and create the text file you need. Here is an example for using Blob I found on JSFiddle:

var saveData = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, fileName) {
        var json = JSON.stringify(data),
            blob = new Blob([json], {type: "octet/stream"}),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";

saveData(data, fileName);

source

answered Jan 20 '16 at 15:45

James J. Hill

129
6

Hi, thanks for your answer, however I think you misunderstood my question. I'd like to be able to display the output (i.e. the scores in the JSON format ([as Microsoft have demoed here](https://dev.projectoxford.ai/docs/services/5639d931ca73072154c1ce89/operations/563b31ea778daf121cc3a5fa)) – Sagar Mohan Jan 20 '16 at 15:53
When you say "display the output", what do you mean? Your question said you wanted to generate a text file of the output (which are the scores in the json response). So, would the text file contain the scores? – James J. Hill Jan 20 '16 at 15:55
Apologies for the ambiguity. That's exactly what I meant. For now I'd just like to be able to display the score field for each image I test, as an alert would be fine. The text file thing was just an example of what I'm trying to do. – Sagar Mohan Jan 20 '16 at 16:01
No problem! So, in the done(), the response should be in the data object so you should be about to console.log it. What's the contents of data when you execute the ajax call? – James J. Hill Jan 20 '16 at 16:02
Thanks for your help! I'm not quite sure what you mean, the data object you're referring to will be the scores field? i.e. data.scores? If I'm not mistaken, the contents of the data from the ajax call will be [something like this?](https://dev.projectoxford.ai/docs/services/5639d931ca73072154c1ce89/operations/563b31ea778daf121cc3a5fa#response200tab1) – Sagar Mohan Jan 20 '16 at 16:13
(Sorry, I was at lunch!) Yes! You see the function in then() where you alert success? The data you linked to should be in the parameter object data and you can access it there. Instead of alert("succes"), put console.log(data) and tell me the output – James J. Hill Jan 20 '16 at 16:57

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

data is an array, one item per face. If you just want to dump the text, you can call JSON.stringify(data). If you want pretty-print it in HTML, take a look at How can I pretty-print JSON using JavaScript?.

edited May 23 '17 at 12:31

Community

1
1

answered Jan 20 '16 at 16:23

cthrash

2,938
2
11
10

score 0 · Answer 3 · answered May 03 '16 at 15:11

I've done this ins my website HowHappy.co.uk which is also on GitHub here: https://github.com/martinkearn/How-Happy

The way I displayed the data in a web site was to enumerate the array of faces in Javascript and use basic CSS to show the rectangle in the right place and Bootstrap popover to show the details data.

There is too much to put in this response so I recommend you look though the GitHub repo, but here are some of the key bits

Javascript

var dataString = JSON.stringify(response); 
var data = JSON.parse(dataString); 

    //draw rectangle for each face
    $.each(data.Faces, function (index, value) {

        var rect = document.createElement('div');
        rect.className = "rect";
        rect.style.height = value.faceRectangle.height + "px";
        rect.style.width = value.faceRectangle.width + "px";
        rect.style.left = value.faceRectangle.left + "px";
        rect.style.top = value.faceRectangle.top + "px";
        rect.id = "rect" + index;

        $('#result').append(rect);

        //add popover
        var popoverBody = "Happiness: " + Number((value.scores.happiness).toFixed(2))
            + "<br>Fear: " + Number((value.scores.fear).toFixed(2))
            + "<br>Anger: " + Number((value.scores.anger).toFixed(2))
            + "<br>Contempt: " + Number((value.scores.contempt).toFixed(2))
            + "<br>Disgust: " + Number((value.scores.disgust).toFixed(2))
            + "<br>Neutral: " + Number((value.scores.neutral).toFixed(2))
            + "<br>Sadness: " + Number((value.scores.sadness).toFixed(2))
            + "<br>Surprise: " + Number((value.scores.surprise).toFixed(2));
        $('#rect' + index).popover({
            title: (index + 1)
            content: popoverBody,
            html: "true",
            trigger: "click"
        });

    });

Css

.rect {
    position: absolute;
    border-color: #FFEA0E;
    border-style: solid;
    border-width: 4px;
    z-index: 10;
}

#result {
    position: relative;
    text-align: center;
    margin: 0 auto;
    width: auto;
}

#resultDetails {
    font-size: 3rem;
    text-align: center;
}

Displaying Project Oxford's Emotion API result

3 Answers3

Javascript

Css