Google Cloud Vision APIを利用して画像のロゴ検出を行うDelphiアプリケーションを作成する

google cloud vision label detection api hero image

この記事は、Victory Fernandes氏のブログの抄訳です

開発者は「コーヒーを飲みながら長時間仕事をする趣味があることで知られている」という決まり文句があるようです。これは開発者の中にはコーヒー好きが多いという文言ですが、別に開発者じゃなくてもおそらく、下の画像のロゴマークは誰でもご存じではないかと思います。そうです、これは米国の多国籍企業であり、世界最大のコーヒーチェーンである「スターバックス」のロゴです。

Table of Contents

ロゴが持つ力

ポイントは、コーヒーカップには名前が書かれておらず、ロゴがあるだけだということです。そのロゴがどのブランドのものかわからないとしたら、そのロゴが何を表しているのか、誰のものなのかを知る方法があったらいいと思いませんか？さらに言えば、そのロゴを認識する能力を、独自のWindows、デスクトップ、モバイルアプリケーションに取り入れることができたら、もっといいと思いませんか？Google Cloud Vision APIを使えば、まさにそれが可能になります。

Google Cloud Vision ロゴ検出API

「ロゴ検出」のオプションは、Google Cloud Vision APIの一部であり、画像内の複数のロゴを検出して情報を抽出するために使用できます。検出されたロゴに、Googleは識別されたエンティティのテキスト説明、機械学習AIによる検出の正確さを示す信頼度スコア、ファイル内のロゴの境界ポリゴンが提供されるので、画像のエリア内でのロゴの位置がわかります。

Delphiアプリケーションで機械学習AIを使用できますか?

Google Cloud Vision APIは、事前に学習された強力な機械学習モデルを提供しており、RESTまたはRPC APIメソッド呼び出しを介して、デスクトップおよびモバイルアプリケーションで簡単に使用することができます。例えば、アプリケーションでオブジェクト、場所、アクティビティ、動物種、製品を検出したい場合や、顔だけでなく感情も検出したい場合、または印刷されたテキストや手書きのテキストを読み取る必要がある場合などです。これらの機能は、無料（機能ごとに最初の1,000ユニット/月まで）または非常に手頃な価格で実行でき、先行投資なしでお客様の使用状況に合わせて拡張することができます。

RAD Studioで提供しているRESTクライアントライブラリを使用して、Google CloudのVision APIへ簡単にアクセスでき、デスクトップおよびモバイルアプリケーションを強化することができます。リクエストが成功した場合、サーバーは200 OK HTTPステータスコードとJSON形式のレスポンスを返します。

RAD StudioやDelphiのアプリケーションでは、APIを呼び出してローカルの画像ファイルの検出を行い、リクエストの本文に画像ファイルのコンテンツをbase64エンコードした文字列として送信する方法と、Google Cloud StorageやWeb上の画像ファイルを使用する方法(この場合は、リクエスト本文に画像ファイルを含めての送信は不要)があります。

Google Cloud Vision ロゴ検出APIを設定するにはどうすればよいですか？

[ロゴの検出]セクション（https://cloud.google.com/vision/docs/detecting-logos）のGoogle Cloud Vision APIドキュメントを必ず参照してください。一般的に以下の手順はGoogleのWebサイトで行う必要があります。

https://cloud.google.com/visionにアクセスし、Gmailアカウントでログインする
Google Cloud Platform（GCP）のプロジェクトを作成または選択します
そのプロジェクトのVision APIを有効にする
そのプロジェクトの請求を有効にする
API Key credentialを作成する

Google Vision ロゴ検出 APIのエンドポイントを呼び出すにはどうすればよいですか？

ここで必要なのは、HTTP POSTメソッドでAPIのURLを呼び出し、リクエストのJSON bodyにLOGO_DETECTIONタイプを、ソースに解析したい画像へのリンクを渡すことです。

APIのアクセスには、Java、Node.js、Python、C#、PHPなどプログラミング言語が利用できますが、Delphi言語には対応していないため、代わりにRESTクライアントライブラリを使用することができます。RESTクライアントライブラリの詳細はクイックスタートガイド（https://cloud.google.com/vision/docs/quickstart-client-libraries）に掲載されています。

実際には、Google Cloud Visionドキュメントガイドの下部のページ（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": [
{
"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"
}}}]}

{

"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"

}}}]}

Google Vision ロゴ検出 APIのエンドポイントは、どんなデータを返すのですか?

APIの呼び出し後の結果は、「ロゴ」の説明、0（信頼なし）から1（非常に高い信頼）までの範囲(小数点)の信頼度のスコア値、および画像内のオブジェクトが見つかった場所を示す境界ポリゴンを含むリストです。ポリゴンの情報を使用して、画像の上に正方形を描画し、ロゴを強調表示し、最終的には下の画像のような結果になります。

{
   "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
               }
             ]
           }
         }
       ]
     }
   ]
 }

{

"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

}

]

}

]

}

]

}

アプリケーションからGoogle Cloud Vision ロゴ検出 APIへアクセスするにはどうすればよいですか？

Google側でロゴ検出APIを設定する基本的な手順が完了したら、コンソールに移動し、Credentialsメニュー項目でCreate Credentials butonをクリックし、APIキーを追加します。このキーは後で必要になるので、コピーしておきましょう。

RAD Studio (Delphi)では、RESTデバッガを使ってRESTコンポーネントを自動的に作成し、アプリに貼り付けることができるので、APIへの接続が非常に簡単です。

RAD Studio (Delphi/C++Builder)では、すべての作業は3つのコンポーネントを使用して行われ、API呼び出しが行われます。それらは、TRESTClient、TRESTRequest、およびTRESTResponseです。 RESTデバッガを利用して正常に接続できたら、コンポーネントをコピーして貼り付けると、TRESTClientのBaseURLにAPIのURLが設定されます。 TRESTRequestコンポーネントで、リクエストタイプがrmPOST、ContentTypeがctAPPLICATION_JSONがそれぞれ設定され、そしてPOSTのリクエスト本文が1つ設定されます。

DelphiアプリケーションでREST接続の設定するには、どうすればいいですか？

RAD Studio (Delphi)を起動し、IDEのメインメニューから [ツール] > [RESTデバッガ] をクリックします。REST デバッガを以下のように設定します。 content-typeを application/jsonに設定して、POST URL、JSON リクエスト本文、作成した API キーを追加します。最後に「(Send Request)要求の送信」ボタンをクリックすると、先ほど示したようなJSONレスポンスが表示されます。

Google Cloud Vision ロゴ検出 APIを使用してWindowsデスクトップまたはAndroid / iOSモバイルデバイスアプリケーションを構築するにはどうすればよいですか？

RESTデバッガでAPI呼び出しを正常に設定およびテストが完了したので、「(Copy Components)コンポーネントのコピー」ボタンをクリックし、Delphi IDEに戻って新しいアプリケーションプロジェクトを作成し、メインフォームにコンポーネントを貼り付けます。

TButtonのOnClickのイベントハンドラに以下のようなGoogleVision APIを呼び出して、JSONレスポンスを受信するコードを追加します。このコード例では、TRESTResponseコンポーネントのRootElementは’response[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', [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;

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を使用してGoogle Cloud Vision APIを呼び出すDelphiアプリケーションのサンプルプログラム

このサンプルプログラムでは、分析する画像へのリンクを貼り付けるためのTEditと、maxResultsパラメータを設定するための別のTEdit、REST API呼び出しのJSON結果を表示するTMemo、表形式でデータをナビゲートおよび表示するためのTStringGridコンポーネント、そしてJSONレスポンス結果を保持するTFDMemTableコンポーネントをフォーム上に配置しています。ボタンをクリックすると、画像が分析され、アプリケーションはJSONレスポンスをテキストおよびグリッド内のデータとして表示します。これで、レスポンスデータを統合して、アプリケーションがニーズに合った方法で情報を処理するために必要なすべてのものが揃いました。

captura de tela 2021 05 20 10 59 46 8599607 2

まとめ

このブログでは、以下の内容を紹介いたしました。

画像でロゴ検出を実行するためにGoogle Cloud Vision APIへサインアップ
RAD StudioのRESTデバッガを使ってエンドポイントに接続し、RESTコンポーネントを実際のアプリケーションにコピー
アプリケーションからGoogle Cloud Vision APIに接続し、Logo Detectionの画像解析のJSONレスポンスを取得し、その結果をメモリデータセットに保持し、データの表示

RAD Studio(Delphi)を利用すると、様々なオープンな技術をREST APIと連携し、Windows、Linux、macOS、Android、iOS等のマルチプラットホームに対応したRESTクライアントアプリケーションが簡単に作成することができます。

今回紹介いたしましたデスクトップとモバイル向けのGoogle Cloud Vision APIを利用したロゴ検出のデモプログラムは、以下のURLからダウンロードできます。

https://github.com/checkdigits/google_logo_detection_api_delphi_example

Google Cloud Vision APIを利用して画像のロゴ検出を行うDelphiアプリケーションを作成する

ロゴが持つ力

Google Cloud Vision ロゴ検出API

Delphiアプリケーションで機械学習AIを使用できますか?

Google Cloud Vision ロゴ検出APIを設定するにはどうすればよいですか？

Google Vision ロゴ検出 APIのエンドポイントを呼び出すにはどうすればよいですか？

Google Vision ロゴ検出 APIのエンドポイントは、どんなデータを返すのですか?

アプリケーションからGoogle Cloud Vision ロゴ検出 APIへアクセスするにはどうすればよいですか？

DelphiアプリケーションでREST接続の設定するには、どうすればいいですか？

Google Cloud Vision ロゴ検出 APIを使用してWindowsデスクトップまたはAndroid / iOSモバイルデバイスアプリケーションを構築するにはどうすればよいですか？

RESTを使用してGoogle Cloud Vision APIを呼び出すDelphiアプリケーションのサンプルプログラム

まとめ

関連情報

コメントコメントをキャンセル

検索

新着記事

QuickReportが復活！最新バージョンで人気の帳票ツールが利用可能に

RAD Studio 12.2 Athens Patch 2 のリリース

WebStencilsとHTMX：RAD Studioで高速なWeb開発を行うためのホワイトペーパーを公開

Popular Posts

DelphiおよびC++Builder 11.3 Community Editionがリリースされました!

RAD Studio 11.2 Alexandria リリースのお知らせ

RAD Studio 11.1 Alexandriaリリースのお知らせ

Windows11やApple M1に対応した新バージョン『RAD Studio 11 Alexandria』提供開始

RAD Studio 11新機能ウェビナーを9月14日に開催

カテゴリー

人気の記事

Google Book APIを使ってISBNコードから書籍情報を取得する

最新のC++Buidlerで旧バージョンのプロジェクトを利用する方法

基礎から学べるFireDACデータアクセス再入門（第３回）

RAD Studio 10.4.2で提供される2つの新しいVCLコントロール

RAD Studio 10.4の新機能: 新しいVCL TEdgeBrowserコンポーネント

不明なフィード

不明なフィード

不明なフィード

Categories

エンバカデロをフォロー

jp custom

Google Cloud Vision APIを利用して画像のロゴ検出を行うDelphiアプリケーションを作成する

ロゴが持つ力

Google Cloud Vision ロゴ検出API

Delphiアプリケーションで機械学習AIを使用できますか?

Google Cloud Vision ロゴ検出APIを設定するにはどうすればよいですか？

Google Vision ロゴ検出 APIのエンドポイントを呼び出すにはどうすればよいですか？

Google Vision ロゴ検出 APIのエンドポイントは、どんなデータを返すのですか?

アプリケーションからGoogle Cloud Vision ロゴ検出 APIへアクセスするにはどうすればよいですか？

DelphiアプリケーションでREST接続の設定するには、どうすればいいですか？

Google Cloud Vision ロゴ検出 APIを使用してWindowsデスクトップまたはAndroid / iOSモバイルデバイスアプリケーションを構築するにはどうすればよいですか？

RESTを使用してGoogle Cloud Vision APIを呼び出すDelphiアプリケーションのサンプルプログラム

まとめ

関連情報

コメントコメントをキャンセル

Join Our Global Developer Community

検索

新着記事

Popular Posts

カテゴリー

人気の記事

Categories

エンバカデロをフォロー

jp custom