IBM Bluemix と AlchemyAPI を使って画像認識アプリケーションを作る

IBM Bluemix と AlchemyAPI を使って
画像認識アプリケーションを作る
日本アイ・ビー・エム
1
© 2015 IBM Corporation
Alchemy APIとは
2
© 2015 IBM Corporation
まずは Free API Key の取得
h"p://www.alchemyapi.com/
3
© 2015 IBM Corporation
入力項目
目的
名
姓
メールアドレス
確認メール
アドレス
挑戦すること
チェック
（例）To retrieve meta informa7on in images.
4
© 2015 IBM Corporation
Free API Key の条件
!  無料
!  １日 1000 トランザクション
!  API の種類は問わずに合計した値
•  画像関連だけでなく、言語やニュース系 API を使う場合にも適
用
!  API を１回実行 = １トランザクション？
•  →違います
!  API を１回実行した時のトランザクション数は実行結果に含まれ
ています。
•  より複雑な API ほど、トランザクション数が大きくなります
5
© 2015 IBM Corporation
API Key を保管
（申請から５分程度で、このようなメールが届きます）
この文字列を保管しておく
6
© 2015 IBM Corporation
7
© 2015 IBM Corporation
「人工知能」学習の種類
ちなみに IBM では「⼈人⼯工知能(AI)」とは⾔言いません。
「コグニティブ(Cogni.ve 認識識型⼈人⼯工知能）」と⾔言います。
人間型
ディープ・ラーニング
人間の脳
学習モデル人間の脳ではないもの
先生
上限
無限
人間らしさ
目的
人間を超える
人間の棋譜を使って、人間のように打て
るように学習させる
AlchemyAPI
8
非人間型
統計的アプローチ
↑今日はこちら↑
(例)将棋AI
膨大な選択肢から仮説に基いた絞り込み
を行い、最適解を探す
Watson
© 2015 IBM Corporation
「画像認識」
何が写っているのか？
Alchemy Vision
結果のフォーマット
各配列要素の中身
○○の可能性がある、
××の可能性がある、
：
（という配列）
識別したもの
その確率
○○人が写っている
１人目の情報
２人目の情報
：
Alchemy Face Detec7on （という配列）
誰が写っているのか？
9
顔の位置、
性別、
その確率、
年齢、
その確率、
個人名、
その確率
© 2015 IBM Corporation
これからこんなアプリを作ります。
認識対象画像のURLを（パラメータで）指定すると、
その画像を顔認識／物体認識した結果を視覚的に表示する。
Alchemy Vision の結果をタグクラウド
指定画像と、
Alchemy Face Detect の結果を表示
この API で使ったトランザクション数
10
© 2015 IBM Corporation
AlchemyVision デモサイト
h"p://www.alchemyapi.com/products/demo/alchemyvision
Top Page >> Products >> Demo >> AlchemyVision Demo
11
© 2015 IBM Corporation
Alchemy Vision API
画像ファイルのURLから「何が写っているのか」の認識を行う
※パブリックに公開されている URL であること！
具体的には以下のエンドポイントへ Get メソッドでアクセスする：
http://access.alchemyapi.com/calls/url/URLGetRankedImageKeywords
?apikey=（API キー）
&url=（画像URL）
&outputMode=json
&knowledgeGraph=1
12
© 2015 IBM Corporation
URLGetRankedImageKeywords API の実行結果
{ "status": "OK", "usage": "By accessing AlchemyAPI or …", "url": "h<p://xxx.com/wp-‐content/uploads/2015/05/aaaa.jpg", "totalTransacJons": “4", この API コールで消費したトランザクションは 4 "imageKeywords": [ 結果は imageKeywords の中（配列） { “text": “sport", “sport” の確率が 98.9013% と認識 "score": "0.989013“ }, { “text": “football", “football” の確率が 98.5226% と認識 "score": "0.985226“ } ] } 詳細は API リファレンス参照
http://www.alchemyapi.com/api/image-tagging/urls.html
13
© 2015 IBM Corporation
API リファレンス情報
14
h"p://www.alchemyapi.com/api/image-‐tagging/urls.html
Top Page >> Developers >> Documenta7ons >> Image Tagging >> API Calls >> Web API
© 2015 IBM Corporation
試しにブラウザで実行してみる
ウェブブラウザで以下の URL を指定してアクセスします：
http://access.alchemyapi.com/calls/url/URLGetRankedImageKeywords
?apikey=（API Key の値）
&outputMode=json
&url=画像URL
15
© 2015 IBM Corporation
Alchemy Face Detection デモサイト
16
h"p://www.alchemyapi.com/products/demo/face-‐detec7on
Top Page >> Products >> Demo >> AlchemyVision Face API Demo
© 2015 IBM Corporation
Alchemy Face Detection API
画像ファイルのURLから「誰が写っているのか」の顔認識を行う
※パブリックに公開されている URL であること！
具体的には以下のエンドポイントへ Get メソッドでアクセスする：
http://access.alchemyapi.com/calls/url/URLGetRankedImageFaceTags
?apikey=（API キー）
&url=（画像URL）
&outputMode=json
&knowledgeGraph=1
17
© 2015 IBM Corporation
URLGetRankedImageFaceTags API の実行結果
{ "status": "OK", "usage": "By accessing AlchemyAPI or …", "url": "h"p://xxx.com/wp-‐content/uploads/2015/05/aaaa.jpg", "totalTransac7ons": "5", この API コールで消費したトランザクションは 5 結果は imageFaces の中（配列） "imageFaces": [ age: 推定年齢層と、その確度 { “age”: { "ageRange": "18-‐24", "score": "0.702753“ }, gender: 推定性別と、その確度 "gender": { "gender": "FEMALE", "score": "0.991837“ }, "iden7ty": { "knowledgeGraph": { "typeHierarchy": "/people/ariana grande“ }, "name": "Ariana Grande", 個人が特定できた場合は iden7ty 内に情報
"score": "0.622459" が入り、名前とその確度 }, posi7onX, posi7onY: 顔の位置 "posi7onX": "116", width, height: 顔のサイズ "posi7onY": "19", “height”: “48”, "width": "48“ } ] } 詳細は API リファレンス参照
http://www.alchemyapi.com/api/face-detection/urls.html
18
© 2015 IBM Corporation
API リファレンス情報
19
h"p://www.alchemyapi.com/api/face-‐detec7on/urls.html
Top Page >> Developers >> Documenta7ons >> Face Detec7on >> API Calls ©>2015
> WIBMeb API
Corporation
試しにブラウザで実行してみる
ウェブブラウザで以下の URL を指定してアクセスします：
http://access.alchemyapi.com/calls/url/URLGetRankedImageFaceTags
?apikey=（API Key の値）
&outputMode=json
&url=画像URL
20
© 2015 IBM Corporation
これから作成するアプリ（今日のゴール）
認識対象画像のURLを（パラメータで）指定すると、
その画像を顔認識／物体認識した結果を表形式で表示する。
21
© 2015 IBM Corporation
これから作成するアプリ（最終形）
認識対象画像のURLを（パラメータで）指定すると、
その画像を顔認識／物体認識した結果を視覚的に表示する。
Alchemy Vision の結果をタグクラウド
指定画像と、Alchemy Face Detect の結果を重
ねて表示（男性＝青枠、女性＝赤枠）
この API で使ったトランザクション数
22
© 2015 IBM Corporation
Bluemix にログイン
ログイン後のダッシュボード画面で「アプリの作成」をクリック
※ 米国南部の環境の接続し、ハンズオンを進めて下さい。
23
© 2015 IBM Corporation
WEB アプリを選択
アプリの種類は「WEB」を選択
24
© 2015 IBM Corporation
PHP ランタイムを選択
ランタイムの種類は「PHP」を選択。
※実際はどのランタイムでも作れるが、本資料では PHP で作成する
25
© 2015 IBM Corporation
続行
PHP ランタイムの説明を確認して「続行」。
26
© 2015 IBM Corporation
アプリケーションの名前を指定
PHP ランタイムアプリケーションの名前を指定して入力して「終了」。
ホスト名の一部になるので、重ならない名前にする。
（例） kkimura（自分の名前）-php-YYYYMMDD（日付）
27
© 2015 IBM Corporation
ステージング処理待ち
30秒 ~ 1分
PHP ランタイムの作成はこれで終わり。ステージング処理が完了するまで待つ。
この画面では、この後にどうやって PHP アプリをランタイムに反映させるか、の方法が
紹介されている。
28
© 2015 IBM Corporation
ステージング処理完了
ステージング処理完了（もうアプリケーションサーバーとして利用可能）。
一度ダッシュボードに戻る。
29
© 2015 IBM Corporation
ダッシュボード画面
ダッシュボード画面に今作った PHP ランタイムが追加されていることを確認。
このアイコンをクリック。
30
© 2015 IBM Corporation
作成した PHP ランタイムの概要
作成して稼働中の PHP ランタイムが表示されていることを確認。
31
© 2015 IBM Corporation
アプリの実装内容
(1)  PHP ファイルがパラメータで画像URLを受け取る。
（例 ***.php?url=http://XXXXXXXX/XXX.jpg）
(2)  受け取ったパラメータの値（画像URL）に対して、Alchemy Vision API と
Alchemy Face Detection API をそれぞれ実行する。
(3)  各結果の JSON を解析して、表形式で表示する。
(4)  （おまけ）結果表示方法をより視覚的にカスタマイズする。
32
© 2015 IBM Corporation
Bluemixソースコードの開発／デプロイ
選択肢は３つ
1.  Eclipse 環境で開発し、Eclipse プラグインを使ってデプロイ
2.  普通にテキストエディタで開発し、cf ツールを使ってデプロイ
3.  IDS(IBM DevOps Services) を使って Git リポジトリを作り、リポジト
リのコードを編集した後にビルド＆デプロイ
今回は cf ツールを使った方法を紹介します。 33
© 2015 IBM Corporation
cf コマンドラインツールをダウンロード
https://github.com/cloudfoundry/cli#downloads
の Stable Installers から環境にあったモジュールをダウンロードしてインストール
※ Googleで、「Github cf」と検索すると、すぐにダウンロードページにたどり着けます。
34
© 2015 IBM Corporation
cf コマンドラインツールの動作確認
コマンドプロンプト（OS X の場合はターミナル）を開き、”cf –v” と入
力。
バージョン番号が表示されれば、インストール成功
※ Macで、「開発元が未確認のため開けません」と表示される場合は、「システム環境設定」 >> セ
キュリティーとプライバシーにて、「ダウンロードしたアプリケーションの実行許可」にて、「すべ
てのアプリケーションを許可」するように設定を変更して下さい
35
© 2015 IBM Corporation
ドキュメントルート作成
PHP のウェブアプリケーションを作る上での、ドキュメントルートとなる空フォルダ
をローカルマシン内に作成します。この例では c:\tmp\docroot をドキュメントルートと
しました。
36
© 2015 IBM Corporation
ドキュメントルートに移動
コマンドプロンプトで、このドキュメントルートのフォルダに移動します。
> cd \tmp\docroot
37
© 2015 IBM Corporation
cf ツールでログイン
cf ツールを使って Bluemix にログインします
> cf login –a https://api.ng.bluemix.net/
※ cfツールにて米国南部のBluemix環境にLoginします。Bluemix上でPHPの環境を英国に作成し
まっており、米国南部にSpace等が存在しない場合、Login Errorとなります。
38
© 2015 IBM Corporation
PHP ファイル作成
このドキュメントルートフォルダに PHP ファイルを新規に作成します：
> notepad image.php
39
© 2015 IBM Corporation
image.php の内容(1)
<html>
$trans1 = $json1->totalTransactions;
<head>
$imageKeywords = $json1->imageKeywords;
<title>AlchemyAPI サンプル</title>
if( count( $imageKeywords ) ){
</head>
?>
<body>
<h2>Keywords</h2>
<?php
<table border='1'>
$trans1 = 0;
<tr><th>text</th><th>score</th></tr>
$trans2 = 0;
<?php
if( isset( $_GET['url'] ) ){
配列の結果をループで１つずつ取り出す for( $i = 0; $i < count( $imageKeywords ); $i ++ ){
$apikey = ‘（Alchemy API Key の値）';
API key の値 $imageKeyword = $imageKeywords[$i];
$text = $imageKeyword->text;
$url = $_GET['url'];
画像 URL を取得 $alchemyurl = 'http://access.alchemyapi.com/calls/url/';
?>
<?php
<p/>
}
<?php
?>
モノ認識 API の URL $apiurl1 = $alchemyurl . 'URLGetRankedImageKeywords?
apikey=' . $apikey . '&outputMode=json&url=' . urlencode( $url );
$json1 = json_decode( $text1 );
40
?>
<tr><td><?php echo $text; ?></td><td><?php echo $score; ?></td></tr>
<img src='<?php echo $url; ?>'/>
$text1 = file_get_contents( $apiurl1 );
$score = $imageKeyword->score;
</table>
<p/>
<?php
}
API を実行して、結果の JSON を取り出す © 2015 IBM Corporation
image.php の内容(2)
$apiurl2 = $alchemyurl . 'URLGetRankedImageFaceTags?
apikey=' . $apikey .
顔認識 API の URL $genderO = $imageFace->gender;
$gender = $genderO->gender;
'&outputMode=json&knowledgeGraph=1&url=' . urlencode( $url );
$text2 = file_get_contents( $apiurl2 );
$json2 = json_decode( $text2 );
API を実行して、結果の JSON を取り出す $genderScore = $genderO->score;
?>
<tr><th colspan='3'><?php echo $i; ?></th></tr>
<tr><td>positionX</td><td><?php echo $positionX; ?></td><td> </td></tr>
$trans2 = $json2->totalTransactions;
$imageFaces = $json2->imageFaces;
if( count( $imageFaces ) ){
?>
<tr><td>positionY</td><td><?php echo $positionY; ?></td><td> </td></tr>
<tr><td>width</td><td><?php echo $width; ?></td><td> </td></tr>
<tr><td>height</td><td><?php echo $height; ?></td><td> </td></tr>
<tr><td>age</td><td><?php echo $ageRange; ?></td><td><?php echo
<h2>FaceTags</h2>
<table border='1'>
<tr><th>attr</th><th>value</th><th>score</th></tr>
<?php
配列の結果をループで１つずつ取り出す $ageScore; ?></td></tr>
<tr><td>gender</td><td><?php echo $gender; ?></td><td><?php echo
$genderScore; ?></td></tr>
<?php
for( $i = 0; $i < count( $imageFaces ); $i ++ ){
$identityO = $imageFace->identity;
$imageFace = $imageFaces[$i];
if( $identityO ){
$positionX = $imageFace->positionX;
$name = $identityO->name;
$positionY = $imageFace->positionY;
$nameScore = $identityO->score;
$width = $imageFace->width;
$height = $imageFace->height;
$ageO = $imageFace->age;
?>
<tr><td>name</td><td><?php echo $name; ?></td><td><?php echo
$nameScore; ?></td></tr>
$ageRange = $ageO->ageRange;
41
$ageScore = $ageO->score;
© 2015 IBM Corporation
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>
42
© 2015 IBM Corporation
ソースコード
!  本ハンズオンセミナーのソースコードはこちらからダウンロード可能です：
•  https://github.com/dotnsf/alchemyapi_php_sample
!  実際に使う場合は、jQCloud ライブラリと合わせて用意する必要があり
ます：
•  https://github.com/lucaong/jQCloud
•  上記２サイトからダウンロード＆解凍した結果
の *.php, *.js, *.css ファイルを全て同じ（ドキュ
メントルートの）フォルダに展開
•  image.php , index.php
•  jqcloud.css, jqcloud-1.0.4.js
•  image.php, index.phpを開き、apikeyに
各自が取得したAPI Keyをセットし、保
存。
43
© 2015 IBM Corporation
PHP ファイルをプッシュ
30秒 ~ 1分
カレントディレクトリを丸ごと Bluemix 上の PHP サーバーのドキュメントルートにプッシュ
（転送）します：
> cf push （アプリ名） ※ アプリ名はBlumixで先ほど作成したPHPのアプリの名前
44
© 2015 IBM Corporation
プッシュ成功を確認
プッシュが成功すると、図のような PHP サーバーの稼働状態が表示されます：
45
© 2015 IBM Corporation
image.php の動作確認
ウェブブラウザで下記にアクセスして、期待通りに表が出力される結果になることを確認
する。いくつかの画像URLで確認する。
http://（アプリ名）.mybluemix.net/image.php?url=（画像のURL）
46
© 2015 IBM Corporation
index.php の動作確認
ウェブブラウザで下記にアクセスして、期待通りにタグクラウドと顔認識結果が出力されるこ
いくつかの画像URLで確認する。
http://（アプリ名）.mybluemix.net/?url=（画像のURL）
47
© 2015 IBM Corporation
改良に挑戦してほしいこと
!  人間が写っているとは限らないのに顔認識が実行されていて、トランザク
ションが無駄
•  写っているものが人間だった場合のみ、顔認識を実行する
!  画像がプライベートネットワーク上にあったり、認証がかかっていて、普
通に URL を指定しただけではアクセスできない場合を想定
•  画像を一度ダウンロードした上で、そのバイナリデータをポストして認
識させる、というアルゴリズムに変更
•  ImageGetRankedImageKeywords API と
ImageGetRankedImageFaceTags API を使う
48
© 2015 IBM Corporation

Download Report