구글 클라우드 비전 API를 사용해 이미지에서 로고 탐지하기

2021-05-31
Posted by: Narae Kim
Categories: 기술자료, 메인 노출

원문 링크: https://blogs.embarcadero.com/detecting-logos-on-images-using-google-cloud-vision-api/
작성자: 빅토리 페르난데스 (Victory Fernandes)

로고가 주는 힘은 강력합니다. 아래 이미지의 컵에 있는 회사가 어떤 회사인지 아시겠나요? 네, 스타벅스입니다. 글자 하나 없어도 바로 우리는 알 수 있죠.

로고의 힘

요점은 컵에 이름이 없고 로고만 있다는 점입니다. 잠시 상상해봅시다. 로고가 있지만, 어느 회사를 의미하는지 알 수 없는 상황이 있을 수 있습니다. 그 로고가 어느 회사의 것인지 바로 알 수 있는 방법이 있다면? 한 발 더 나아가서 윈도우, 데스크탑, 모바일 앱으로 로고를 인식할 수 있다면? 바로 구글 클라우드 비전 API (Google Cloud Vision API)로 이걸 구현할 수 있습니다.

구글 클라우드 비전 API (Google Cloud Vision API) – 로고 인식 API

“Logo Detection (로고 인식)” 옵션은 구글 클라우드 비전 API 기능 중 하나로, 한 이미지에서 여러 로고에 대한 정보를 추출하고 검색하는데 활용할 수 있습니다. 탐지된 각 로고에 대해 구글은 식별된 엔티티에 대해 글자로 된 설명을 제공합니다. 즉 머신 러닝 API의 인식의 정확도를 얼만큼 확신할 수 있는지를 점수화하며, 파일에 있는 로고에 대한 경계선을 도형으로 표현합니다.

델파이 애플리케이션에 머신 러닝 AI를 매우 쉽게 적용할 수 있습니다.

구글 클라우드의 비전 API는 이미 트레이닝 되어 있는 강력한 머신 러닝 모델들을 제공합니다. REST나 RPC API 메소드 호출을 통해서 데스크탑이나 모바일 앱에 이 기능들을 적용할 수 있습니다. 여러분의 앱에 어떤 기능을 적용하고 싶으세요? 사물, 위치, 활동, 동물 종들, 제품 등을 감지하거나 얼굴 인식을 넘어 감정까지 읽어낼 수 있는 기술? 아니면 인쇄물이나 손으로 직접 쓴 텍스트를 읽어주는 기술은 어떤가요? 이 이상의 더 많은 기능들을 무료로 활용할 수 있습니다 (한 기능 당 매월 최대 1000 유닛까지만 가능). 약간의 비용을 내고 더 편하게 사용할 수도 있습니다.

RAD스튜디오와 델파이에서 REST 클라이언트 라이브러리로 구글 클라우드의 비전 API를 활용할 수 있습니다. 우리의 데스크탑 또는 모바일 앱에 권한을 부여하고, 요청이 성공적으로 전달되면 서버는 200 OK HTTP 상태 코드와 응답을 JSON 형식으로 반환합니다.

RAD스튜디오와 델파이 앱은 base64로 인코딩된 문자열로 구성되어 있는 이미지 파일 컨텐츠를 전송해 로컬에서 이미지 파일을 인식할 수 있습니다. 또한 구글 클라우드 저장소나 웹에 있는 이미지 파일을 활용할 수도 있죠. 요청한 이미지 파일 컨텐츠를 전송할 필요없이도 말이죠.

구글 클라우드 비전 로고 인식 API를 설정해봅시다!

로고 인식에 대한 내용은 구글 클라우드 비전 API 문서를 참고하세요 – https://cloud.google.com/vision/docs/detecting-logos – 일반적으로 구글에서 설정해야 하는 내용은 다음과 같습니다.

https://cloud.google.com/vision 페이지 접속 후 지메일 계정으로 로그인합니다.
구글 클라우드 플랫폼 (GCP) 프로젝트를 선택하거나 생성합니다.
해당 프로젝트에서 Vision API를 활성화합니다.
해당 프로젝트에서 Billing을 활성화합니다.
API Key 자격 증명을 생성합니다.

구글 비전 API 로고 인식 엔드포인트를 호출해봅시다.

이제 분석하고자 하는 이미지의 링크를 활용해서 API URL을 호출해보겠습니다. 타입 LOGO_DETECTION과 소스를 포함한 요청 JSON을 전달하는 HTTP POST 메소드를 활용합니다. REST Client 라이브러리를 사용하면 여러 프로그래밍 언어에서 활용할 수 있습니다. 퀵 스타트 가이드는 구글에서 제공하는 설명서를 참고하세요: https://cloud.google.com/vision/docs/quickstart-client-libraries

구글 클라우드 비전 설명 가이드 하단 페이지 – https://cloud.google.com/vision/docs/detecting-logos -에서 “Try This API” 옵션을 확인할 수 있는데요. 아래의 JSON 요청문을 게시하고 다음과 같이 JSON 응답을 받아올 수 있습니다.

POST https://vision.googleapis.com/v1/images:annotate

1	POST https://vision.googleapis.com/v1/images:annotate

{
"requests": &#91;
{
"features": &#91;
{
"type": "LOGO_DETECTION"
}],
"image": {
"source": {
"imageUri": "https://images.pexels.com/photos/791942/pexels-photo-791942.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"
}}}]}

{

"requests": [

{

"features": [

{

"type": "LOGO_DETECTION"

}],

"image": {

"source": {

"imageUri": "https://images.pexels.com/photos/791942/pexels-photo-791942.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"

}}}]}

구글 비전 API 로고 탐지 엔드 포인트에서 값 반환하는 방법을 알아봅시다.

호출 후 결과값은 “Logo” 설명과 신뢰도 점수와 함께 목록 형태로 제공됩니다. 신뢰도 점수는 0 – 신뢰할 수 없음. 1 – 매우 높은 신뢰도로 표현됩니다. 인식된 이미지를 다각형으로 표시하여 알려줍니다. 이 정보를 사용해 이미지 위에 사각형을 그리고 로고를 강조 표시할 수 있습니다. 아래 이미지처럼 말이죠.

{
   "responses": &#91;
     {
       "logoAnnotations": &#91;
         {
           "mid": "/m/018c_r",
           "description": "&lt;strong&gt;Starbucks&lt;/strong&gt;",
           "score": 0.9508903,
           "boundingPoly": {
             "vertices": &#91;
               {
                 "x": 474,
                 "y": 931
               },
               {
                 "x": 697,
                 "y": 931
               },
               {
                 "x": 697,
                 "y": 1210
               },
               {
                 "x": 474,
                 "y": 1210
               }
             ]
           }
         }
       ]
     }
   ]
 }

{

"responses": [

{

"logoAnnotations": [

{

"mid": "/m/018c_r",

"description": "<strong>Starbucks</strong>",

"score": 0.9508903,

"boundingPoly": {

"vertices": [

{

"x": 474,

"y": 931

{

"x": 697,

"y": 931

{

"x": 697,

"y": 1210

{

"x": 474,

"y": 1210

}

]

}

]

}

]

}

여러분의 프로그램에 구글 클라우드 비전 로고 인식 API를 적용해봅시다!

구글에서 로고 인식 API 설정 기본 단계를 완료한 후에는 콘솔(Console)에서 자격 증명(Credentials) 메뉴 > 인증서 생성(Create Credentials) 버튼 클릭 > API 값을 입력합니다. 나중에 필요하므로, 이 API 키 값을 복사해놓으세요.

RAD스튜디오, 델파이, C++빌더에서는 REST Debugger를 이용하면 자동으로 REST 컴포넌트들을 생성해서 여러분의 프로그램에 붙여넣을 수 있어, API 연동이 정말 쉽습니다.

델파이에서 API를 호출할 때에는 3개의 컴포넌트들을 사용할 수 있습니다. TRESTClient, TRESTRequest, TRESTResponse 이렇게 세 가지 입니다. REST Debugger를 연결했다면, 컴포넌트를 복사-붙여넣으면 됩니다. API URL이 TRESTClient의 BaseURL에 설정된 것을 확인할 수 있을 것입니다. TRESTRequest 컴포넌트에서 요청 타입이 rmPOST로 설정되어 있을 것이고, ContentType은 ctAPPLICATION_JSON으로 설정되어 있을 것입니다. POST에 대한 요청문이 여기에 포함되어 있습니다.

여러분의 프로그램에 REST 연결 설정을 해봅시다.

RAD스튜디오, 델파이를 실행하고 메인 메뉴에서 Tools > REST Debugger 를 선택합니다. REST Debugger는 다음과 같이 설정합니다. content-type은 application/json으로 표시하고, POST url , JSON 요청문과 생성했던 API key를 추가합니다. “Send Request” 버튼을 클릭하면 JSON이 응답하는 것을 확인할 수 있습니다. 앞에서 확인했던 것처럼요.

구글 비전 API 로고 인식 기능을 사용해서 윈도우 데스크탑 또는 안드로이드/iOS 모바일 앱을 완성해봅시다.

이제 REST Debugger에서 API 호출을 성공적으로 구성하고 테스트하는 방법은 이해가 되셨나요? Copy Components 버튼을 클릭하고 델파이로 돌아가서, 새로운 애플리케이션 프로젝트를 생성하고 메인 폼에 컴포넌트들을 붙여넣기만 하면 됩니다.

TButton OnClick이벤트에 정말 간단한 코드만 추가하고 모든 것들이 올바르게 구성되었는지 확인만 하면 됩니다! 단 5분만에 구글 비전 API을 호출하고 로고 탐지 기능을 수행하고자 하는 이미지에 대한 JSON 응답 설정까지 완료했습니다. TRESTResponse 컴포넌트에서 RootElement를 responses[0].logoAnnotations 로 설정합니다. 이는 JSON에서 logoAnnotations 요소를 메모리 테이블, 특히 TFDMemTable로 끌어오도록 특별히 설정했음을 의미합니다.

procedure TForm1.Button1Click(Sender: TObject);
var
APIkey: String;
begin
FDMemTable1.Active := False;
RESTClient1.ResetToDefaults;
RESTClient1.Accept := 'application/json, text/plain; q=0.9, text/html;q=0.8,';
RESTClient1.AcceptCharset := 'UTF-8, *;q=0.8';
RESTClient1.BaseURL := 'https://vision.googleapis.com';
RESTClient1.HandleRedirects := True;
RESTClient1.RaiseExceptionOn500 := False;
 
//APIkey := 'put here your Google API key';
RESTRequest1.Resource := Format('v1/images:annotate?key=%s', &#91;APIkey]);
 
RESTRequest1.Client := RESTClient1;
RESTRequest1.Response := RESTResponse1;
RESTRequest1.SynchronizedEvents := False;
 
RESTResponse1.ContentType := 'application/json';
 
RESTRequest1.Params&#91;0].Value := Format(
'{"requests": &#91;{"features": &#91;{"maxResults": %s,"type": "LOGO_DETECTION"}],"image": {'+
'"source": {"imageUri": "%s"}}}]}', &#91;Edit2.text, Edit1.text]);
 
RESTResponse1.RootElement := 'responses&#91;0].logoAnnotations';
 
RESTRequest1.Execute;
 
memo2.Lines := RESTResponse1.Headers;
memo3.Lines.text := RESTResponse1.Content;
end;

procedure TForm1.Button1Click(Sender: TObject);

var

APIkey: String;

begin

FDMemTable1.Active := False;

RESTClient1.ResetToDefaults;

RESTClient1.Accept := 'application/json, text/plain; q=0.9, text/html;q=0.8,';

RESTClient1.AcceptCharset := 'UTF-8, *;q=0.8';

RESTClient1.BaseURL := 'https://vision.googleapis.com';

RESTClient1.HandleRedirects := True;

RESTClient1.RaiseExceptionOn500 := False;

//APIkey := 'put here your Google API key';

RESTRequest1.Resource := Format('v1/images:annotate?key=%s', [APIkey]);

RESTRequest1.Client := RESTClient1;

RESTRequest1.Response := RESTResponse1;

RESTRequest1.SynchronizedEvents := False;

RESTResponse1.ContentType := 'application/json';

RESTRequest1.Params[0].Value := Format(

'{"requests": [{"features": [{"maxResults": %s,"type": "LOGO_DETECTION"}],"image": {'+

'"source": {"imageUri": "%s"}}}]}', [Edit2.text, Edit1.text]);

RESTResponse1.RootElement := 'responses[0].logoAnnotations';

RESTRequest1.Execute;

memo2.Lines := RESTResponse1.Headers;

memo3.Lines.text := RESTResponse1.Content;

end;

REST로 구글 클라우드 비전 API를 호출하는 델파이 샘플

샘플 프로그램에는 분석할 이미지 링크를 붙여넣을 수 있는 mexResults 파라메터에 대한 TEdit가 필요합니다. 그리고 REST API 호출에 대한 JSON 결과를 보여줄 수 있는 TMemo, TFDMemTable 컴포넌트와 JSON 응답 결과를 쉽게 통합할 수 있도로 표로 데이터를 보여주고 탐색할 수 있는 TStringGrid 컴포넌트도 있어야 하죠 버튼을 클릭하면, 이미지가 분석되고 프로그램은 그리드에 데이터와 텍스트 형태로 JSON 응답을 보여줍니다. 이제 응답 데이터와 통합하기 위해 필요한 모든 것이 준비되었습니다!

결론: 로고 인식 구글 클라우드 비전 API 활용

구글 클라우드 비전 API(Google Cloud Vision API)를 사용해 이미지에 있는 로고를 인식할 수 있는 방법 구현에 대해서 정리해보았습니다 RAD스튜디오 REST 디버거로 어떻게 실제 프로그램에 있는 코드를 복사해서 엔드포인트와 연결하는지에 대해서도 살펴봤구요. 무엇보다 RAD스튜디오, 델파이를 사용하면 구글 클라우드 비전 API를 연동한 실제 윈도우(리눅스, 맥OS, 안드로이드, iOS도!) 프로그램을 얼마나 쉽고 빠르게 연동할 수 있는지도 확인할 수 있었습니다.

구글 클라우드 비전 API 로고 인식 REST 기술을 적용한 데스크탑 및 모바일 용 데모는 다음 링크를 통해서 확인할 수 있습니다: https://github.com/checkdigits/google_logo_detection_api_delphi_example

Post Views: 1,105

AI 델파이 샘플 인공지능 클라우드