Emotion API JavaScript 빠른 시작Emotion API JavaScript Quick Start

중요

Video API 미리 보기는 2017년 10월 30일에 종료됩니다.Video API Preview will end on October 30th, 2017. Video Indexer API Preview 미리 보기를 사용하여 비디오에서 정보를 쉽게 추출하고 말이나 얼굴, 성격, 감정을 감지하여 검색 결과를 제시하는 등 콘텐츠 검색 경험을 향상하세요.Try the new Video Indexer API Preview to easily extract insights from videos and to enhance content discovery experiences, such as search results, by detecting spoken words, faces, characters, and emotions. 자세히 알아보기.Learn more.

이 문서에서는 JavaScript로 Emotion API Recognize 메서드를 빠르게 사용하여 이미지에서 한 명 이상의 사용자가 표현하는 감정을 인식하는 데 도움이 되는 정보 및 코드 샘플을 제공합니다.This article provides information and code samples to help you quickly get started using the Emotion API Recognize method with JavaScript to recognize the emotions expressed by one or more people in an image.

필수 요소Prerequisite

  • 여기에서 무료 구독 키를 가져오거나 Azure 구독이 있는 경우 Emotion API 리소스를 만들고 거기에서 구독 키 및 엔드포인트를 가져옵니다.Get your free Subscription Key here, or if you have an Azure Subscription create an Emotion API resource and get your Subscription Key and Endpoint there.

Emotion API 리소스 만들기

감정 인식 JavaScript 예제 요청Recognize Emotions JavaScript Example Request

다음을 복사하고 test.html 같은 파일에 저장합니다.Copy the following and save it to a file such as test.html. 구독 키를 구입한 위치를 사용하도록 요청 url을 변경하고, "Ocp-Apim-Subscription-Key" 값을 유효한 구독 키로 바꿉니다.Change the request url to use the location where you obtained your subscription keys, and replace the "Ocp-Apim-Subscription-Key" value with your valid subscription key. Emotion API 리소스의 개요 섹션 및 키 섹션 각각의 Azure Portal에서 찾을 수 있습니다.These can be found in the Azure portal in the Overview and Keys sections of your Emotion API resource, respectively.

API 끝점

API 구독 키

요청 본문을 사용하려는 이미지의 위치로 변경합니다.Change the request body to the location of an image you want to use. 샘플을 실행하려면 파일을 브라우저로 끌어서 놓습니다.To run the sample, drag-and-drop the file into your browser.

<!DOCTYPE html>
<html>
<head>
    <title>JSSample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>

<h2>Face Rectangle</h2>
<ul id="faceRectangle">
<!-- Will populate list with response content -->
</ul>

<h2>Emotions</h2>
<ul id="scores">
<!-- Will populate list with response content -->
</ul>

<body>

<script type="text/javascript">
    $(function() {
        // No query string parameters for this API call.
        var params = { };

        $.ajax({
            // NOTE: You must use the same location in your REST call as you used to obtain your subscription keys.
            //   For example, if you obtained your subscription keys from westcentralus, replace "westus" in the 
            //   URL below with "westcentralus".
            url: "https://westus.api.cognitive.microsoft.com/emotion/v1.0/recognize?" + $.param(params),
            beforeSend: function(xhrObj){
                // Request headers, also supports "application/octet-stream"
                xhrObj.setRequestHeader("Content-Type","application/json");

                // NOTE: Replace the "Ocp-Apim-Subscription-Key" value with a valid subscription key.
                xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","<your subscription key>");
            },
            type: "POST",
            // Request body
            data: '{"url": "<your image url>"}',
        }).done(function(data) {
            // Get face rectangle dimensions
            var faceRectangle = data[0].faceRectangle;
            var faceRectangleList = $('#faceRectangle');

            // Append to DOM
            for (var prop in faceRectangle) {
                faceRectangleList.append("<li> " + prop + ": " + faceRectangle[prop] + "</li>");
            }

            // Get emotion confidence scores
            var scores = data[0].scores;
            var scoresList = $('#scores');

            // Append to DOM
            for(var prop in scores) {
                scoresList.append("<li> " + prop + ": " + scores[prop] + "</li>")
            }
        }).fail(function(err) {
            alert("Error: " + JSON.stringify(err));
        });
    });
</script>
</body>
</html>

감정 인식 샘플 응답Recognize Emotions Sample Response

호출이 성공하면 얼굴 사각형 크기의 내림차순으로 얼굴 항목 및 연결된 감정 점수 배열이 반환됩니다.A successful call returns an array of face entries and their associated emotion scores, ranked by face rectangle size in descending order. 빈 응답은 검색된 얼굴이 없는 것을 나타냅니다.An empty response indicates that no faces were detected. 감정 항목에는 다음 필드가 포함됩니다.An emotion entry contains the following fields:

  • faceRectangle - 이미지에서 얼굴의 사각형 위치입니다.faceRectangle - Rectangle location of face in the image.
  • scores - 이미지의 각 얼굴에 대한 감정 점수입니다.scores - Emotion scores for each face in the image.
application/json 
[
  {
    "faceRectangle": {
      "left": 68,
      "top": 97,
      "width": 64,
      "height": 97
    },
    "scores": {
      "anger": 0.00300731952,
      "contempt": 5.14648448E-08,
      "disgust": 9.180124E-06,
      "fear": 0.0001912825,
      "happiness": 0.9875571,
      "neutral": 0.0009861537,
      "sadness": 1.889955E-05,
      "surprise": 0.008229999
    }
  }
]