빠른 시작: Bing Visual Search REST API 및 Node.js를 사용하여 이미지 인사이트 가져오기

아티클
05/22/2020

경고

2020년 10월 30일에 Bing Search API가 Azure AI 서비스에서 Bing Search Services로 이동되었습니다. 이 문서는 참조용으로만 제공됩니다. 업데이트된 문서는 Bing search API 문서를 참조하세요. Bing 검색을 위한 새 Azure 리소스 만들기에 대한 지침은 Azure Marketplace를 통해 Bing Search 리소스 만들기를 참조하세요.

이 빠른 시작을 사용하여 Bing Visual Search API에 대한 첫 번째 호출을 수행할 수 있습니다. 이 간단한 JavaScript 애플리케이션은 API에 이미지를 업로드하고, 이미지에 대한 반환된 정보를 표시합니다. 이 애플리케이션은 JavaScript로 작성되었지만, API는 대부분의 프로그래밍 언어와 호환되는 RESTful 웹 서비스입니다.

사전 요구 사항

Node.JS
JavaScript에 대한 요청 모듈. npm install request 명령을 사용하여 모듈을 설치할 수 있습니다.
form-data 모듈. npm install form-data 명령을 사용하여 모듈을 설치할 수 있습니다.

Azure 리소스 만들기

다음 Azure 리소스 중 하나를 만들어 Bing Visual Search API 사용을 시작합니다.

Bing Search v7 리소스

리소스를 삭제할 때까지 Azure Portal을 통해 사용할 수 있습니다.
S9 가격 책정 계층을 선택합니다.

다중 서비스 리소스

리소스를 삭제할 때까지 Azure Portal을 통해 사용할 수 있습니다.
여러 Azure AI 서비스에서 애플리케이션에 동일한 키와 엔드포인트를 사용합니다.

애플리케이션 초기화

선호하는 IDE 또는 편집기에서 JavaScript 파일을 만들고 다음 요구 사항을 설정합니다.
```
var request = require('request');
var FormData = require('form-data');
var fs = require('fs');
```
API 엔드포인트, 구독 키에 대한 변수 및 이미지에 대한 경로를 만듭니다. baseUri 값의 경우 다음 코드에서 글로벌 엔드포인트를 사용하거나 리소스의 Azure Portal에 표시되는 사용자 지정 하위 도메인 엔드포인트를 사용할 수 있습니다.
```
var baseUri = 'https://api.cognitive.microsoft.com/bing/v7.0/images/visualsearch';
var subscriptionKey = 'your-api-key';
var imagePath = "path-to-your-image";
```

requestCallback()이라는 함수를 만들어 API에서 응답을 인쇄합니다.

function requestCallback(err, res, body) {
    console.log(JSON.stringify(JSON.parse(body), null, '  '))
}

검색 요청 생성 및 보내기

로컬 이미지를 업로드할 때 양식 데이터에 Content-Disposition 헤더가 포함되어야 합니다. 해당 name 매개 변수를 "이미지"로 설정하고 filename 매개 변수를 이미지의 파일 이름으로 설정합니다. 양식의 콘텐츠는 이미지의 이진 데이터를 포함합니다. 업로드할 수 있는 최대 이미지 크기는 1MB입니다.
```
--boundary_1234-abcd
Content-Disposition: form-data; name="image"; filename="myimagefile.jpg"

ÿØÿà JFIF ÖÆ68g-¤CWŸþ29ÌÄøÖ‘º«™æ±èuZiÀ)"óÓß°Î= ØJ9á+*G¦...

--boundary_1234-abcd--
```
FormData()를 사용하여 새 FormData 개체를 만들고 fs.createReadStream()을 사용하여 해당 개체에 이미지 경로를 추가합니다.
```
var form = new FormData();
form.append("image", fs.createReadStream(imagePath));
```

요청 라이브러리를 사용하여 이미지를 업로드하고 requestCallback()을 호출하여 응답을 인쇄합니다. 요청 헤더에 구독 키를 추가합니다.

form.getLength(function(err, length){
  if (err) {
    return requestCallback(err);
  }
  var r = request.post(baseUri, requestCallback);
  r._form = form; 
  r.setHeader('Ocp-Apim-Subscription-Key', subscriptionKey);
});

다음 단계

Visual Search 단일 페이지 웹앱 빌드

다음을 통해 공유