Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
「初めてのWatson」
ハンズオン
2016年11⽉7⽇/14⽇
井上 研⼀ (@inoccu)
確認
• Bluemixのアカウントは作成しましたか?
• 地域「⽶国南部」で組織とスペースを作成していますか?
• Monacaのアカウントは作成しましたか?
• PC/MacにChrome、スマートフォン(Android/iPhone)に
...
⾃⼰紹介
• 井上 研⼀
• ITエンジニア
• ITCA認定 ITコーディネータ(経済産業省推進資格)
• アルティザンエッジ合同会社 代表社員・CEO
• Tech Garden School 講師(CakePHP等)
• こどもプログラミ...
⼈⼯知能の研究者ではありません
• 書籍にも書いたことですが・・・ (「おわりに」など)
• Watsonの導⼊プロジェクト(2案件)や、機械学習の活⽤など
を「開発のお仕事の⼀環として」やっています。
• あくまで現場⽬線で「初めてのWats...
書籍「初めてのWatson」
著者:井上研⼀ 出版:リックテレコム
B5変型版 224ページ
定価:2,200円+税 2016年10⽉下旬刊⾏
ISBN:978-4-86594-052-7
https://www.amazon.co.jp/dp...
「初めてのWatson」⽬次
1. Watsonを知るための6つの
質問
2. ⼈⼯知能とは何か?
3. とにかくWatsonを体験して
みよう
4. Watsonでできること
5. Node-REDでTwitter Botを
作ろう
6. 画...
今⽇のハンズオンは・・・
• 書籍「初めてのWatson」の第6章にある顔認識アプリを作って
みます。
• ⼈⼯知能(機械学習)の醍醐味は、⾃分で準備したデータで学
習モデルを作ったり、その精度を⾼めたりする「学習フェー
ズ」にあると思います・...
独⾃の学習モデル
Watsonデフォルト
の学習モデルを使⽤
する場合は、学習
フェーズは必要ない
Watsonデフォルトの学習モデル:
・画像分類のデフォルト分類器
・顔認識
書籍:P129
Visual Recognition
Visual Recognitionの有効化
• Bluemixダッシュボード>カタログ>Watson>Visual
Recognition
• 画⾯最下部の「作成」
※既にVisual Recognitionのインスタンスがある⽅は、それを
...
api_keyの確認
Monaca
Monaca Debugger
書籍:P193
• アプリのインストール後、Monacaの
ユーザID/パスワードでログインしてお
いてください。
プロジェクトのインポート
• Monacaの演習が⽬的ではないので、既にできあがったプロ
ジェクトをインポートして、⾃分の環境のVisual Recognition
インスタンスを使うようにコードを記述していきます。
• 画⾯遷移と撮影機能は実...
プロジェクトのインポート
インポート完了(Watson Camera)
Monaca IDE
index.htmlを開く
アプリの概要
撮影画⾯ (page1)
• Cameraボタン
Face Detectボタン
結果表⽰画⾯
(page2)
Watson
Visual
Recognition
API Referenceの確認(1)
API Referenceの確認(2)
Visual Recognitionでできること
• Classify an image(画像の分類)
• デフォルトの学習モデル
• 独⾃の学習モデル
• Detect faces(顔の認識)
• Collections (Similarit...
Detect faces(顔認識)
Visual Recognition APIの呼び出し
//画像ファイルのアップロード(顔認識APIの呼び出し)
var url = 'https://gateway-a.watsonplatform.net/visual-
recogniti...
APIからの出⼒を表⽰(1)
fileTransfer.upload(photoFileUri, url, function(r) {
//顔認識APIからのレスポンスを処理
var response = JSON.parse(r.respon...
APIからの出⼒を表⽰(2)
if ('faces' in image) {
if (image.faces.length > 0) {
//顔認識ができた場合
var face = image.faces[0];
//年齢
text += '...
Watsonからのレスポンス
//顔認識APIからのレスポンスを処理
console.log(r.response);
var response = JSON.parse(r.response);
• 年齢の上限または下限だけが結果になった場合...
<応⽤編>
画像の分類
※顔認識ができた⽅はチャレンジしてみましょう!
Classify an image(画像の分類)
APIの違い
• 顔認識
https://gateway-a.watsonplatform.net/visual-
recognition/api/v3/detect_faces?api_key={api-
key}&version=2016-...
「初めてのWatson」ハンズオン
Upcoming SlideShare
Loading in …5
×

「初めてのWatson」ハンズオン

2,538 views

Published on

2016年11月7日/14日に行った「初めてのWatson」ハンズオンの資料です。
2016年10月下旬刊行の「初めてのWatson」(井上研一=著・リックテレコム=刊)の書籍と連動したハンズオンで、第6章の顔認識アプリの開発をベースにしています。BluemixとMonacaのアカウントが必要です。
ハンズオンを進めるためのMonacaプロジェクトのアーカイブは資料内のURLでダウンロード可能です。(完成版のMonacaプロジェクトのアーカイブは書籍をご購入の上、書籍に記載のダウンロードサイトから入手できます。)

Published in: Technology
  • Be the first to comment

「初めてのWatson」ハンズオン

  1. 1. 「初めてのWatson」 ハンズオン 2016年11⽉7⽇/14⽇ 井上 研⼀ (@inoccu)
  2. 2. 確認 • Bluemixのアカウントは作成しましたか? • 地域「⽶国南部」で組織とスペースを作成していますか? • Monacaのアカウントは作成しましたか? • PC/MacにChrome、スマートフォン(Android/iPhone)に Monacaデバッガーはインストールしてありますか?
  3. 3. ⾃⼰紹介 • 井上 研⼀ • ITエンジニア • ITCA認定 ITコーディネータ(経済産業省推進資格) • アルティザンエッジ合同会社 代表社員・CEO • Tech Garden School 講師(CakePHP等) • こどもプログラミング 中野まなびじゅく 講師(Scratch/Arduino) • 2000年より某SIerで業務向けWebシステム等の開発に携わる • 2013年7⽉にアルティザンエッジ合同会社を創業 • @IT「JobSchedulerをNagiosと連携して⾃動化!」(2014/1) • 第1回Cordova勉強会「Cordovaで業務アプリを作る」(2014/11)
  4. 4. ⼈⼯知能の研究者ではありません • 書籍にも書いたことですが・・・ (「おわりに」など) • Watsonの導⼊プロジェクト(2案件)や、機械学習の活⽤など を「開発のお仕事の⼀環として」やっています。 • あくまで現場⽬線で「初めてのWatson」や2冊⽬となる⼈⼯知 能系の書籍の執筆を⾏っています。 • 今⽇のハンズオンをきっかけにして、Watsonはもちろん、そ の他の⼈⼯知能も試してみてください。実際のプロジェクトに 活⽤してみてください!( Watsonは特に簡単です!!) • きっと損はしません!!!
  5. 5. 書籍「初めてのWatson」 著者:井上研⼀ 出版:リックテレコム B5変型版 224ページ 定価:2,200円+税 2016年10⽉下旬刊⾏ ISBN:978-4-86594-052-7 https://www.amazon.co.jp/dp/4865940529 本書は「Watsonを使ってみたい」という⽅向けの解説書で す。「Watsonとは何か?」からスタートし、クラウドサー ビスIBM Bluemixの無料枠を使ってWatsonを動かしたり、 簡単なボットアプリや画像認識アプリを作ります。ITエン ジニアに限らず、JavaScriptが書ける⽅なら、⼀般ビジネ スマンや学⽣さんでも、余さず本書を活⽤できるでしょう。
  6. 6. 「初めてのWatson」⽬次 1. Watsonを知るための6つの 質問 2. ⼈⼯知能とは何か? 3. とにかくWatsonを体験して みよう 4. Watsonでできること 5. Node-REDでTwitter Botを 作ろう 6. 画像認識アプリを作ろう 7. Watsonの可能性 ハンズオンの対象
  7. 7. 今⽇のハンズオンは・・・ • 書籍「初めてのWatson」の第6章にある顔認識アプリを作って みます。 • ⼈⼯知能(機械学習)の醍醐味は、⾃分で準備したデータで学 習モデルを作ったり、その精度を⾼めたりする「学習フェー ズ」にあると思います・・・。 • しかし、データの準備が⼤変ですし、Watsonが学習に要する 時間が読めないということもあり、ハンズオンには不向きなの です・・・。 • なので、Watsonに実装済みの学習モデル(顔認識)を使った ハンズオンとなることをご了承ください。
  8. 8. 独⾃の学習モデル Watsonデフォルト の学習モデルを使⽤ する場合は、学習 フェーズは必要ない Watsonデフォルトの学習モデル: ・画像分類のデフォルト分類器 ・顔認識 書籍:P129
  9. 9. Visual Recognition
  10. 10. Visual Recognitionの有効化 • Bluemixダッシュボード>カタログ>Watson>Visual Recognition • 画⾯最下部の「作成」 ※既にVisual Recognitionのインスタンスがある⽅は、それを 使っていただいても構いません。 書籍:P127
  11. 11. api_keyの確認
  12. 12. Monaca
  13. 13. Monaca Debugger 書籍:P193 • アプリのインストール後、Monacaの ユーザID/パスワードでログインしてお いてください。
  14. 14. プロジェクトのインポート • Monacaの演習が⽬的ではないので、既にできあがったプロ ジェクトをインポートして、⾃分の環境のVisual Recognition インスタンスを使うようにコードを記述していきます。 • 画⾯遷移と撮影機能は実装済みです。 ダウンロードURL http://bit.ly/2dXBIGU
  15. 15. プロジェクトのインポート
  16. 16. インポート完了(Watson Camera)
  17. 17. Monaca IDE
  18. 18. index.htmlを開く
  19. 19. アプリの概要 撮影画⾯ (page1) • Cameraボタン Face Detectボタン 結果表⽰画⾯ (page2) Watson Visual Recognition
  20. 20. API Referenceの確認(1)
  21. 21. API Referenceの確認(2)
  22. 22. Visual Recognitionでできること • Classify an image(画像の分類) • デフォルトの学習モデル • 独⾃の学習モデル • Detect faces(顔の認識) • Collections (Similarity Search:類似画像の検索) • 2016/9/8 Beta版リリース • Text Recognition(画像内の⽂字列の認識) • 2016/9/8 Beta版クローズ
  23. 23. Detect faces(顔認識)
  24. 24. Visual Recognition APIの呼び出し //画像ファイルのアップロード(顔認識APIの呼び出し) var url = 'https://gateway-a.watsonplatform.net/visual- recognition/api/v3/detect_faces?api_key=' + apiKey + '&version=2016-05-20'; var options = new FileUploadOptions(); options.fileKey = 'images_file'; options.fileName = 'uploadfile.jpg'; options.mimeType = 'image/jpeg'; var fileTransfer = new FileTransfer(); 書籍:P199
  25. 25. APIからの出⼒を表⽰(1) fileTransfer.upload(photoFileUri, url, function(r) { //顔認識APIからのレスポンスを処理 var response = JSON.parse(r.response); var image = response.images[0]; var text = ''; //recognize...部分を書き換え var message = document.getElementById('message'); message.innerHTML = text; }, function(error) { alert(error.code); }, options, true); 書籍:P199 ここに次スライドの コードが⼊ります Android4.xの⽅は重要!
  26. 26. APIからの出⼒を表⽰(2) if ('faces' in image) { if (image.faces.length > 0) { //顔認識ができた場合 var face = image.faces[0]; //年齢 text += 'Age: '; if ('max' in face.age && 'min' in face.age) { //年齢の上限と下限が認識された場合 text += face.age.min + ' - ' + face.age.max + ' (' + face.age.score + ')<br>'; } } else { //顔認識ができなかった場合 text += 'not found!'; } } else if ('error' in image) { //その他のエラーがあった場合 text += image.error.description; } 書籍:P199 書籍のコードより、 ⼀部省略しています。
  27. 27. Watsonからのレスポンス //顔認識APIからのレスポンスを処理 console.log(r.response); var response = JSON.parse(r.response); • 年齢の上限または下限だけが結果になった場合にも対応しま しょう。 • 性別の表⽰もしてみましょう。 この⾏を追加 書籍:P199
  28. 28. <応⽤編> 画像の分類 ※顔認識ができた⽅はチャレンジしてみましょう!
  29. 29. Classify an image(画像の分類)
  30. 30. APIの違い • 顔認識 https://gateway-a.watsonplatform.net/visual- recognition/api/v3/detect_faces?api_key={api- key}&version=2016-05-20 • 画像の分類(パラメータファイルを使⽤しない場合) https://gateway-a.watsonplatform.net/visual- recognition/api/v3/classify?api_key={api- key}&version=2016-05-20

×