Moodector/main.html at master · ashishjg21/Moodector · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
    <title>Mood Detector</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
</head>
<body style="background-color:rgb(192, 192, 192);"></body>
<body>
<script>
    function processImage() {
    let subscriptionKey = '87140ffeaece4eca9219040ea40a4540'
    let endpoint = 'https://southcentralus.api.cognitive.microsoft.com/customvision/v3.0/Prediction/88583a50-9fff-41e5-9300-329cab703b73/classify/iterations/Iteration1/url';
        if (!subscriptionKey) { throw new Error('Set your environment variables for your subscription key and endpoint.'); }

        // Display the image.
        var sourceImageUrl = document.getElementById("inputImage").value;
        document.querySelector("#sourceImage").src = sourceImageUrl;
         // Make the REST API call.
        $.ajax({
            url: endpoint + "?",
            // Request headers.
            beforeSend: function(xhrObj){
                xhrObj.setRequestHeader("Content-Type","application/json");
                xhrObj.setRequestHeader("Prediction-Key", subscriptionKey);
            },
            type: "POST",
            // Request body.
            data: '{"url": ' + '"' + sourceImageUrl + '"}',
        })

            .done(function(data) {
                // Show result with highest probability
                var max = 0;
                var index = 0;
                for (var i=0; i<data['predictions'].length; i++) {
                    if (data['predictions'][i]['probability'] > max) {
                        index = i;
                        max = data['predictions'][0]['probability'];
                    }
                }
                const results = "Mood: " + data['predictions'][index]['tagName'] + "\n" + "Confidence: " + Math.round(100 * max) + "%";

                $("#responseTextArea").val(results);
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                // Display error message.
                var errorString = (errorThrown === "") ? "Error. " :
                    errorThrown + " (" + jqXHR.status + "): ";
                errorString += (jqXHR.responseText === "") ? "" :
                    jQuery.parseJSON(jqXHR.responseText).message;
                alert(errorString);
            });
    };
</script>
<p style="font-family:'Trebuchet MS'; font-size:28px; text-align:center; font-size:xx-large;"><strong>Predict the student's mood during a video conference:</strong></p>
<br><br/>
<p style="font-family:'Trebuchet MS'; font-size:15px"> Enter the URL of an image, then click the <strong>Analyze </strong> button.
<br><br>
Image URL:
<input type="text" name="inputImage" id="inputImage"
       value="" />
<button onclick="processImage()">Analyze</button>
<br><br>
<div id="wrapper" style="width:1020px; display:table; font-family:'Trebuchet MS'; font-size:15px">
    <div id="imageDiv" style="width:420px; display:table-cell;">
        Source Image:
        <br><br>
        <img id="sourceImage" width="400" />
    </div>
    <div id="jsonOutput" style="width:600px; display:table-cell;">
        Result:
        <br><br>
        <textarea id="responseTextArea" class="UIInput";
                  style="width:180px; height:50px; font-family:'Trebuchet MS'; font-size:20px"></textarea>
    </div>
</div>
</body>
</html>