49
IBM Bluemix AlchemyAPI を使って 画像認識 アプリケーションを作る 日本アイ・ビー・エム 木村

IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

IBM Bluemix とAlchemyAPI を使って

画像認識アプリケーションを作る

日本アイ・ビー・エム

木村 桂

Page 2: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

まずは Free API Key の取得

http://www.alchemyapi.com/

Page 3: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

入力項目目的

メールアドレス

確認メールアドレス

挑戦すること

(例)To retrieve meta information in images.チェック

Page 4: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

Free API Key の条件

•無料

• 1日 1000 トランザクション

• API の種類は問わずに合計した値• 画像関連だけでなく、言語やニュース系 API を使う場合にも適用

• API を1回実行 = 1トランザクション?• →違います

• API を1回実行した時のトランザクション数は実行結果に含まれています。• より複雑な API ほど、トランザクション数が大きくなります

Page 5: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

API Key を保管

(申請から5分程度で、このようなメールが届きます)

この文字列を保管しておく

Page 6: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、
Page 7: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

「人工知能」学習の種類

人間型 非人間型

人間の脳 学習モデル 人間の脳ではないもの

先生 上限 無限

人間らしさ 目的 人間を超える

人間の棋譜を使って、人間のように打てるように学習させる

(例)将棋AI 膨大な選択肢から仮説に基いた絞り込みを行い、最適解を探す

AlchemyAPI Watson

ちなみに IBM では「人工知能(AI)」とは言いません。「コグニティブ(Cognitive 認識型人工知能)」と言います。

↑今日はこちら↑

Page 8: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

「画像認識」

結果のフォーマット 各配列要素の中身

何が写っているのか? ○○の可能性がある、××の可能性がある、:

(という配列)

識別したものその確率

誰が写っているのか? ○○人が写っている1人目の情報2人目の情報:

(という配列)

顔の位置、性別、その確率、年齢、その確率、個人名、その確率

Alchemy Vision

Alchemy Face Detection

Page 9: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

これからこんなアプリを作ります。

認識対象画像のURLを(パラメータで)指定すると、その画像を顔認識/物体認識した結果を視覚的に表示する。

Alchemy Vision の結果をタグクラウド

指定画像と、Alchemy Face Detect の結果を表示

この API で使ったトランザクション数

Page 10: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

AlchemyVision デモサイト

http://www.alchemyapi.com/products/demo/alchemyvision

Page 11: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

Alchemy Vision API

画像ファイルのURLから「何が写っているのか」の認識を行う※パブリックに公開されている URL であること!

具体的には以下のエンドポイントへ Get メソッドでアクセスする:http://access.alchemyapi.com/calls/url/URLGetRankedImageKeywords?apikey=(API キー)&url=(画像URL)&outputMode=json&knowledgeGraph=1

Page 12: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

URLGetRankedImageKeywords API の実行結果

{"status": "OK","usage": "By accessing AlchemyAPI or …","url": "http://xxx.com/wp-content/uploads/2015/05/aaaa.jpg","totalTransactions": “4","imageKeywords": [

{“text": “sport", "score": "0.989013“

},{ “text": “football", "score": "0.985226“

}]

}

結果は imageKeywordsの中(配列)

“sport” の確率が 98.9013% と認識

“football” の確率が 98.5226% と認識

詳細は API リファレンス参照http://www.alchemyapi.com/api/image-tagging/urls.html

この API コールで消費したトランザクションは 4

Page 13: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

API リファレンス情報

http://www.alchemyapi.com/api/image-tagging/urls.html

Page 14: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

試しにブラウザで実行してみる

ウェブブラウザで以下の URL を指定してアクセスします:http://access.alchemyapi.com/calls/url/URLGetRankedImageKeywords

?apikey=(API Key の値)&outputMode=json&url=画像URL

Page 15: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

Alchemy Face Detection デモサイト

http://www.alchemyapi.com/products/demo/face-detection

Page 16: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

Alchemy Face Detection API

画像ファイルのURLから「誰が写っているのか」の顔認識を行う※パブリックに公開されている URL であること!

具体的には以下のエンドポイントへ Get メソッドでアクセスする:http://access.alchemyapi.com/calls/url/URLGetRankedImageFaceTags?apikey=(API キー)&url=(画像URL)&outputMode=json&knowledgeGraph=1

Page 17: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

URLGetRankedImageFaceTags API の実行結果

{"status": "OK","usage": "By accessing AlchemyAPI or …","url": "http://xxx.com/wp-content/uploads/2015/05/aaaa.jpg","totalTransactions": "5","imageFaces": [{ “age”: { "ageRange": "18-24", "score": "0.702753“ },"gender": { "gender": "FEMALE", "score": "0.991837“ },"identity": {"knowledgeGraph": { "typeHierarchy": "/people/ariana grande“ },"name": "Ariana Grande","score": "0.622459"},"positionX": "116","positionY": "19",“height”: “48”,"width": "48“ }

]}

結果は imageFacesの中(配列)age: 推定年齢層と、その確度

gender: 推定性別と、その確度

個人が特定できた場合は identity 内に情報が入り、名前とその確度

positionX, positionY: 顔の位置width, height: 顔のサイズ

詳細は API リファレンス参照http://www.alchemyapi.com/api/face-detection/urls.html

この API コールで消費したトランザクションは 5

Page 18: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

API リファレンス情報

http://www.alchemyapi.com/api/face-detection/urls.html

Page 19: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

試しにブラウザで実行してみる

ウェブブラウザで以下の URL を指定してアクセスします:http://access.alchemyapi.com/calls/url/URLGetRankedImageFaceTags

?apikey=(API Key の値)&outputMode=json&url=画像URL

Page 20: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、
Page 21: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

これから作成するアプリ(今日のゴール)

認識対象画像のURLを(パラメータで)指定すると、その画像を顔認識/物体認識した結果を表形式で表示する。

Page 22: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

これから作成するアプリ(最終形)

認識対象画像のURLを(パラメータで)指定すると、その画像を顔認識/物体認識した結果を視覚的に表示する。

Alchemy Vision の結果をタグクラウド

指定画像と、Alchemy Face Detect の結果を重ねて表示(男性=青枠、女性=赤枠)

この API で使ったトランザクション数

Page 23: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

Bluemix にログイン

ログイン後のダッシュボード画面で「アプリの作成」をクリック

Page 24: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

WEB アプリを選択

アプリの種類は「WEB」を選択

Page 25: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

PHP ランタイムを選択

ランタイムの種類は「PHP」を選択。※実際はどのランタイムでも作れるが、本資料では PHP で作成する

Page 26: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

続行

PHP ランタイムの説明を確認して「続行」。

Page 27: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

アプリケーションの名前を指定

PHP ランタイムアプリケーションの名前を指定して入力して「終了」。ホスト名の一部になるので、重ならない名前にする。(例) kkimura(自分の名前)-php-YYYYMMDD(日付)

Page 28: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

ステージング処理待ち

PHP ランタイムの作成はこれで終わり。ステージング処理が完了するまで待つ。この画面では、この後にどうやって PHP アプリをランタイムに反映させるか、の方法が紹介されている。

Page 29: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

ステージング処理完了

ステージング処理完了(もうアプリケーションサーバーとして利用可能)。一度ダッシュボードに戻る。

Page 30: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

ダッシュボード画面

ダッシュボード画面に今作った PHP ランタイムが追加されていることを確認。このアイコンをクリック。

Page 31: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

作成した PHP ランタイムの概要

作成して稼働中の PHP ランタイムが表示されていることを確認。

Page 32: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

アプリの実装内容(1) PHP ファイルがパラメータで画像URLを受け取る。(例 ***.php?url=http://XXXXXXXX/XXX.jpg)

(2) 受け取ったパラメータの値(画像URL)に対して、Alchemy Vision API と Alchemy Face Detection API をそれぞれ実行する。

(3) 各結果の JSON を解析して、表形式で表示する。

(4) (おまけ)結果表示方法をより視覚的にカスタマイズする。

Page 33: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

Bluemixソースコードの開発/デプロイ

•選択肢は3つ• Eclipse 環境で開発し、Eclipse プラグインを使ってデプロイ

• 普通にテキストエディタで開発し、cf ツールを使ってデプロイ

• IDS(IBM DevOps Services) を使って Git リポジトリを作り、リポジトリのコードを編集した後にビルド&デプロイ

今回は cf ツールを使った方法を紹介します。

Page 34: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

cf コマンドラインツールをダウンロード

https://github.com/cloudfoundry/cli#downloads

の Stable Installers から環境にあったモジュールをダウンロードしてインストール

Page 35: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

cf コマンドラインツールの動作確認

コマンドプロンプト(OS X の場合はターミナル)を開き、”cf –v” と入力。バージョン番号が表示されれば、インストール成功

Page 36: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

ドキュメントルート作成

PHP のウェブアプリケーションを作る上での、ドキュメントルートとなる空フォルダをローカルマシン内に作成します。この例では c:¥tmp¥docroot をドキュメントルートとしました。

Page 37: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

ドキュメントルートに移動

コマンドプロンプトで、このドキュメントルートのフォルダに移動します。

> cd ¥tmp¥docroot

Page 38: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

cf ツールでログイン

cf ツールを使って Bluemix にログインします:

> cf login –a https://api.ng.bluemix.net/

(ユーザー名とパスワードを聞かれるので入力する)

Page 39: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

PHP ファイル作成

このドキュメントルートフォルダに PHP ファイルを新規に作成します:

> notepad image.php

Page 40: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

image.php の内容(1)<html>

<head>

<title>AlchemyAPI サンプル</title>

</head>

<body>

<?php

$trans1 = 0;

$trans2 = 0;

if( isset( $_GET['url'] ) ){

$apikey = ‘(Alchemy API Key の値)';

$url = $_GET['url'];

$alchemyurl = 'http://access.alchemyapi.com/calls/url/';

?>

<img src='<?php echo $url; ?>'/>

<p/>

<?php

$apiurl1 = $alchemyurl . 'URLGetRankedImageKeywords?apikey=' . $apikey . '&outputMode=json&url=' . urlencode( $url );

$text1 = file_get_contents( $apiurl1 );

$json1 = json_decode( $text1 );

$trans1 = $json1->totalTransactions;

$imageKeywords = $json1->imageKeywords;

if( count( $imageKeywords ) ){

?>

<h2>Keywords</h2>

<table border='1'>

<tr><th>text</th><th>score</th></tr>

<?php

for( $i = 0; $i < count( $imageKeywords ); $i ++ ){

$imageKeyword = $imageKeywords[$i];

$text = $imageKeyword->text;

$score = $imageKeyword->score;

?>

<tr><td><?php echo $text; ?></td><td><?php echo $score; ?></td></tr>

<?php

}

?>

</table>

<p/>

<?php

}

API key の値

画像 URL を取得

モノ認識 API の URL

API を実行して、結果の JSON を取り出す

配列の結果をループで1つずつ取り出す

Page 41: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

image.php の内容(2)$apiurl2 = $alchemyurl . 'URLGetRankedImageFaceTags?apikey=' .

$apikey . '&outputMode=json&knowledgeGraph=1&url=' . urlencode( $url );

$text2 = file_get_contents( $apiurl2 );

$json2 = json_decode( $text2 );

$trans2 = $json2->totalTransactions;

$imageFaces = $json2->imageFaces;

if( count( $imageFaces ) ){

?>

<h2>FaceTags</h2>

<table border='1'>

<tr><th>attr</th><th>value</th><th>score</th></tr>

<?php

for( $i = 0; $i < count( $imageFaces ); $i ++ ){

$imageFace = $imageFaces[$i];

$positionX = $imageFace->positionX;

$positionY = $imageFace->positionY;

$width = $imageFace->width;

$height = $imageFace->height;

$ageO = $imageFace->age;

$ageRange = $ageO->ageRange;

$ageScore = $ageO->score;

$genderO = $imageFace->gender;

$gender = $genderO->gender;

$genderScore = $genderO->score;

?>

<tr><th colspan='3'><?php echo $i; ?></th></tr>

<tr><td>positionX</td><td><?php echo $positionX; ?></td><td>&nbsp;</td></tr>

<tr><td>positionY</td><td><?php echo $positionY; ?></td><td>&nbsp;</td></tr>

<tr><td>width</td><td><?php echo $width; ?></td><td>&nbsp;</td></tr>

<tr><td>height</td><td><?php echo $height; ?></td><td>&nbsp;</td></tr>

<tr><td>age</td><td><?php echo $ageRange; ?></td><td><?php echo $ageScore; ?></td></tr>

<tr><td>gender</td><td><?php echo $gender; ?></td><td><?php echo $genderScore; ?></td></tr>

<?php

$identityO = $imageFace->identity;

if( $identityO ){

$name = $identityO->name;

$nameScore = $identityO->score;

?>

<tr><td>name</td><td><?php echo $name; ?></td><td><?php echo $nameScore; ?></td></tr>

顔認識 API の URL

API を実行して、結果の JSON を取り出す

配列の結果をループで1つずつ取り出す

Page 42: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

image.php の内容(3)<?php

}

?>

<?php

}

?>

</table>

<p/>

<?php

}

?>

<div align='right'>

使ったトランザクション数:<?php echo $trans1; ?> + <?php echo $trans2; ?> = <?php echo ($trans1 + $trans2); ?>

</div>

<?php

}

?>

</body>

</html>

Page 43: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

ソースコード•本ハンズオンセミナーのソースコードはこちらからダウンロード可能です:• https://github.com/dotnsf/alchemyapi_php_sample

•実際に使う場合は、jQCloud ライブラリと合わせて用意する必要があります:• https://github.com/lucaong/jQCloud

上記2サイトからダウンロード&解凍した結果の *.php, *.js, *.css ファイルを全て同じ(ドキュメントルートの)フォルダに展開します。

Page 44: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

PHP ファイルをプッシュ

カレントディレクトリを丸ごと Bluemix 上の PHP サーバーのドキュメントルートにプッシュ(転送)します:

> cf push (アプリ名)

Page 45: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

プッシュ成功を確認

プッシュが成功すると、図のような PHP サーバーの稼働状態が表示されます:

Page 46: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

image.php の動作確認

ウェブブラウザでhttp://(アプリ名).mybluemix.net/image.php?url=(画像のURL)

にアクセスして、期待通りに表が出力される結果になることを確認する。いくつかの画像URLで確認する。

Page 47: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

(おまけ)index.php の動作確認

ウェブブラウザでhttp://(アプリ名).mybluemix.net/?url=(画像のURL)

にアクセスして、期待通りにタグクラウドと顔認識結果が出力されることを確認する。いくつかの画像URLで確認する。

Page 48: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、

(改良に挑戦してほしいこと)

•人間が写っているとは限らないのに顔認識が実行されていて、トランザクションが無駄• 写っているものが人間だった場合のみ、顔認識を実行する

•画像がプライベートネットワーク上にあったり、認証がかかっていて、普通に URL を指定しただけではアクセスできない場合を想定• 画像を一度ダウンロードした上で、そのバイナリデータをポストして認識させる、というアルゴリズムに変更

• ImageGetRankedImageKeywords API とImageGetRankedImageFaceTags API を使う

Page 49: IBM Bluemix AlchemyAPI を使って 画像認識 アプリ …これからこんなアプリを作ります。認識対象画像のURLを(パラメータで)指定すると、