Slide 1
Slide 1 text
Watson API を呼び出すアプリを
IBM Kubernetes上で動かそう
Kyoko Nishito
Developer Advocate
Tokyo City Team
Slide 2
Slide 2 text
Speaker
⻄⼾ 京⼦
Kyoko Nishito
IBM Developer Advocate
KyokoNishito
Slide 3
Slide 3 text
タイムテーブル
14:00-14:05
(5min)
オープニング
資料ダウンロード,出席登録など
⽇本アイ・ビー・エム株式会社
デベロッパーアドボケイト
⻄⼾ 京⼦
14:05-15:00
(55min)
Watson API を呼び出すアプリケーショ
ンをIBM Kubernetes上で動かそう
作成アプリケーション解説
⽇本アイ・ビー・エム株式会社
デベロッパーアドボケイト
⻄⼾ 京⼦
15:00-16:30
(90min)
Watson API を呼び出すアプリケーショ
ンをIBM Kubernetes上で動かそう
コードチャレンジ(実習、休憩を含む)
⽇本アイ・ビー・エム株式会社
デベロッパーアドボケイト
⻄⼾ 京⼦
〜17:00 クローズ
Slide 4
Slide 4 text
本⽇の資料
本⽇の資料はこちらからダウンロードお願いします。
URLをクリックしたり、コマンドをコピペしたりできますので、
サイトでみるのではなく、ダウンロードをお勧めします。
http://ibm.biz/dojo20191009doc
Slide 5
Slide 5 text
出席登録
こちらのURLにアクセスして、IBM Cloudにログイン
お願いします。
アカウント未登録の⽅もこちらから登録お願いします。
https://ibm.biz/BdzJad
Slide 6
Slide 6 text
事前準備
https://ibm.box.com/v/dojo-iks-watson
未実施の⽅はクラスターの作成に時間がかかりますので、
5. IBM Cloud上にてIKSクラスタを作成する
を必ず今実施お願いします。
Slide 7
Slide 7 text
学習の⽬的とゴール
⽬的
Watson APIを呼び出すアプリケーションをKubernetes上で
動かす⽅法を体験する
ゴール
アプリケーションをKubernetes上で動かせるようになる
Slide 8
Slide 8 text
蛇
作成アプリケーション解説
Slide 9
Slide 9 text
どんなアプリケーション?
9
スマートフォンのカメラやファイ
ルから取得した画像を送ると、
Watson Visual Recognitionで
画像認識し、
結果を表⽰するPython Flaskアプ
リケーションを
IBM Kubernetes Service上にデプ
ロイします。
Slide 10
Slide 10 text
使⽤している主なテクノロジー
10
• Flask
• Python⽤のマイクロWeb開発フレームワーク
• Watson Visual Reconginition
• IBM Watsonの画像認識サービス。ディープ・ラーニングを使⽤
して、画像に写った物体・情景・顔など様々なものを分析・認
識します。
• IBM Cloud Kubernetes Service
• IBM CloudのKubernetesのマネージドサービス
• Vue.js:UIを構築するためのプログレッシブフレームワー
ク
• bootswatch: Bootstrapのテーマ
• vue-qriously: Vue.jsでQRCodeを表⽰するライブラリ
Slide 11
Slide 11 text
11
Visual Recognition
• 画像認識「⼀般種別」(General Tagging):
• 画像の特徴を検知し、タグとして抽出しクラス・キー
ワード(⽝、⼭などの⼀般名詞)を⽣成します
• 顔検出(Facial Detection): (2019/09/12に廃⽌)
• イメージ内の⼈物の顔を検出し、顔の⼀般的な年齢層と
性別も⽰します。
• 画像認識「カスタム」:
• 識別を⾏いたいクラスのイメージを事前学習させ、
その分類器(Classifier)の出⼒を返します。
事前学習
不要
事前学習
必要
https://www.ibm.com/watson/jp-ja/developercloud/visual-recognition.html
Slide 12
Slide 12 text
12
画像認識「⼀般種別」 (General Tagging)
事前学習済みのモデルの出⼒を返します。
具体的な分類クラスの⼀覧は、クラスが⽇々更新されているため⾮公開ですが、
2016年12⽉時点で数千個の分類クラスがあります。
General Taggingには、「default」の分類クラス以外に「food」「explicit」とい
う2つの特別な⽬的の分類クラスがあります。
foodは⾷べ物に特化した分類クラスです。explicitはネット上で不適切な画像をチェ
ックするクラスとなっています。
今回は、画像認識「default」「food」を使います。
Slide 13
Slide 13 text
アーキテクチャー図
13
WEB UI VISUAL
RECOGNITION
PYTHON
FLASK
3
Slide 14
Slide 14 text
VISUAL
RECOGNITION
PYTHON
FLASK
3
WEB UI
アーキテクチャー図
14
この部分のコンテナイメージを
作成します
Slide 15
Slide 15 text
WEB UI VISUAL
RECOGNITION
PYTHON
FLASK
3
アーキテクチャー図
15
--- Worker Node
--- Kubernetes クラスター: mycluster
IBM Cloud
Kubernetes Service
Slide 16
Slide 16 text
IBM Cloud Kubernetes Service
16
Worker Node
コンテナ
(Pod)
Kubernetes
クラスター:
mycluster
本⽇のコードチャレンジでは、
• 1つのKubernetes クラスター
• 1つのWorker Node
• 1つのコンテナ(Pod)
をIBM Cloud Kubernetes
Service上に作成します
Slide 17
Slide 17 text
アーキテクチャー図(+Development)
17
WEB UI VISUAL
RECOGNITION
PYTHON
FLASK
3
DEVELOPER
CONTAINER
REGISTRY
DOCKER IMAGE
Build a docker image with Container Registry
Slide 18
Slide 18 text
Flaskアプリ解説
18
WEB UI VISUAL
RECOGNITION
PYTHON
FLASK
3
Slide 19
Slide 19 text
ソース
19
https://github.com/kyokonishito/watson-vr-flask
Slide 20
Slide 20 text
server/requirements.txt
20
必要なライブラリの指定
flask >= 1.0.2, < 2.0
ibm-watson >= 3.0.4, < 4.0
ibm-watsonはpython⽤のWatsonAPI SDK
localで実⾏する場合は以下のコマンドでライブラリーをイン
ストールする︓
pip install -r requirements.txt
Slide 21
Slide 21 text
server/app.py
21
3⾏⽬︓
Visual Recognitionライブラリのインポート
from ibm_watson import VisualRecognitionV3
Slide 22
Slide 22 text
server/app.py
22
14⾏⽬: APIKEYはソースに書かず、
IKSの場合はVISUAL_RECOGNITION_BIND_PATH
からAPIKEY読み込み
if os.path.exists(VISUAL_RECOGNITION_BIND_PATH): # For IKS
with open(VISUAL_RECOGNITION_BIND_PATH, 'r') as conffile:
confData = json.load(conffile)
visual_recognition = VisualRecognitionV3(
version = VISUAL_RECOGNITION_API_VERSION,
iam_apikey= confData['apikey']
)
VISUAL_RECOGNITION_BIND_PATH = '/opt/vr-service-bind/binding'
server/watson-vr-flask.ymlでマウントしているPATH (後で解説)
Slide 23
Slide 23 text
server/app.py
23
else:
visual_recognition = VisualRecognitionV3(
version = VISUAL_RECOGNITION_API_VERSION
)
IKS以外の場合は、
ibm-credentials.envから読み込み(SDKで⾃動で実施)
IKS以外で実⾏する場合は環境変数IBM_CREDENTIALS_FILE
にibm-credentials.envのフルパスをセット
21⾏⽬
Slide 24
Slide 24 text
server/app.py
24
classifyメッソド呼出
32⾏⽬、44⾏⽬
@app.route('/classifyImages', methods=['POST'])
def classifyImages():
file = request.files['file']
if file:
classes = visual_recognition.classify(
file,
threshold='0.6',
accept_language='ja').get_result()
return json.dumps(classes)
return
参考: API Document
https://cloud.ibm.com/apid
ocs/visual-
recognition?code=python
@app.route('/classifyCustomImages', methods=['POST'])
def classifyCustomImages():
file = request.files['file']
if file:
classes = visual_recognition.classify(
file,
threshold='0.6',
classifier_ids=["food"], # ここでClassification ID を指定
accept_language='ja').get_result()
return json.dumps(classes)
return
カスタムクラスを使⽤する場
合はここにClassifier IDを
セットする
Slide 25
Slide 25 text
server/Dockerfile
25
FROM python:3
ARG project_dir=/app/
RUN apt-get update
RUN pip install --upgrade pip
WORKDIR $project_dir
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY config ./config
COPY ibm-credentials.env ./
COPY static ./static
COPY app.py ./
python3のベースイメージ
project_dirに/app/をセット
python3のベースイメージの最新化
pipコマンドの最新化
作業ディレクトリを/app/とし、作成
してカレントディレクトリを移動
requirements.txtを/app/にコピー
requirements.txt に書いてあるライブラリの導⼊
configディレクトリごと/app/configにコピー
ibm-credentials.envを/app/にコピー
staticディレクトリごと/app/staticにコピー
app.pyを/app/にコピー
次ページに続く
Slide 26
Slide 26 text
server/Dockerfile
26
ENV IBM_CREDENTIALS_FILE /app/ibm-credentials.env
CMD ["python", "app.py"]
環境変数IBM_CREDENTIALS_FILEに
/app/ibm-credentials.envをセット
pythonをapp.pyのパラメータで実⾏
環境変数IBM_CREDENTIALS_FILEに/app/ibm-credentials.envをセットしていますが、
IKSの場合はバインドしたSecretsより読むので、今回ibm-credentials.envは使いません。
ローカルDockerまたはIKS以外の環境のための処理となります。
Slide 27
Slide 27 text
server/watson-vr-flask.yml
27
spec:
containers:
- name: deploy-watson-vr
image: us.icr.io//watson-vr-flask:v1
ports:
- containerPort: 5000
# imagePullPolicy: Always
volumeMounts:
- mountPath: /opt/vr-service-bind
name: service-bind-volume
volumes:
- name: service-bind-volume
secret:
defaultMode: 420
secretName:
26⾏⽬以降:
Visual Recognition にアクセスするため
のシークレットをボリュームとしてここ
にマウントしている。
バインドすると資格情報がこの下の
bindingに⼊る。
サービスをバインドした時のsecrets
nameをセット
参考: https://cloud.ibm.com/docs/containers?topic=containers-service-binding#reference_secret
Slide 28
Slide 28 text
実⾏中のコンテナのシェルで確認
Kubernatesクラスターにdeploy後、IBM Cloudにログイン、ibmcloud ks cluster config –
clusterコマンドでconfigをダウンロード後、環境変数KUBECONFIGセット後実施
$ kubectl get pod
NAME READY STATUS RESTARTS AGE
deploy-watson-vr-deployment-cc6cc66cb-btt94 1/1 Running 0 5d23h
$ kubectl exec -it deploy-watson-vr-deployment-cc6cc66cb-btt94 -- /bin/bash
root@deploy-watson-vr-deployment-cc6cc66cb-btt94:/app#
root@deploy-watson-vr-deployment-cc6cc66cb-btt94:/app# ls /opt/vr-service-bind
binding
root@deploy-watson-vr-deployment-cc6cc66cb-btt94:/app# cat /opt/vr-service-
bind/binding
実⾏中のpod名を取得
実⾏中のコンテナへのシェルを取得(コンテナに⼊る, ⻩⾊部分は⾃分のpod nameに変更)
バインドしたVolumeの確認
その他Dockerファイルで指定した通りに設定されているか確認してみましょう! シェルを抜けるのはexitコマンドです。
Slide 29
Slide 29 text
コードチャレンジ: IKS+Watson
〜17:00
休憩⾃由
不明な点は 質問
Slide 30
Slide 30 text
30
https://ibm.box.com/v/dojo-iks-watson
1. (再度)事前準備の確認
尚、本⽇のチャレンジは、ほぼほぼコマンド操作です︕
ターミナル(Mac) または コマンドウィンドウ(Win)を
使います。
Slide 31
Slide 31 text
2. レポジトリのClone
31
1. 以下のコマンドでレポジトリをCloneしてください
$ git clone https://github.com/kyokonishito/watson-vr-flask.git
$ cd watson-vr-flask
command.txtというファイルがありますので、
エディターで開いておきます。
今後使⽤するコマンドは全てここからコピペできま
す。
Slide 32
Slide 32 text
3. IBM Cloudへのログインと設定(1)
32
1. 以下のコマンドでIBM Cloudにログインします
$ ibmcloud login -a cloud.ibm.com -r us-south -g Default
E-mail(IBM Cloudのアカウント)と
Passwordを聞かれるので⼊⼒します
Slide 33
Slide 33 text
33
出⼒例:
API エンドポイント: https://cloud.ibm.com
Email> [email protected]
Password>
認証中です...
OK
ターゲットのアカウント XXXXXXXX's Account (bxxxxxxxx07e44eaba7711faxxxxxxx)
ターゲットのリソース・グループ Default
ターゲットの地域 us-south
API エンドポイント: https://cloud.ibm.com
地域: us-south
ユーザー: [email protected]
アカウント: XXXXXXXX's Account (bxxxxxxxx07e44eaba7711faxxxxxxx)
リソース・グループ: Default
CF API エンドポイント:
組織:
スペース:
ヒント: Cloud Foundry アプリケーションおよびサービスを管理している場合
- 'ibmcloud target --cf' を使⽤して Cloud Foundry 組織/スペースを対話式にターゲットにするか、'ibmcloud target --cf-api
ENDPOINT -o ORG -s SPACE' を使⽤して組織/スペースをターゲットにします。
- 現⾏の IBM Cloud CLI コンテキストを使⽤して Cloud Foundry CLI を実⾏する場合は、'ibmcloud cf' を使⽤します。
Slide 34
Slide 34 text
3. IBM Cloudへのログインと設定(2)
34
2. 以下のコマンドでCloudFoundry 環境をターゲット
に設定します。
$ ibmcloud target --cf
Slide 35
Slide 35 text
4. IBM Cloud コンテナレジストリ
のセットアップ (1-1)
35
IBM コンテナー・レジストリーとは、Kubernetes 内の Docker で使⽤するイメージを、セキュア
に保管できる場所です。
本ハンスオンではここにDockerイメージを作成して、IBM Cloud Kubernetes Serviceから利⽤し
ます。
$ ibmcloud cr namespace-add
1. 以下のコマンドで名前空間を設定してください
既にご⾃⾝の名前空間を設定済みの場合はこの⼿順はSKIPしてください。
を、⾃分の名前等、他⼈と重ならない任意の名前空間に置き換えてください。
はレジストリー「 us.icr.io」でユニークである必要があります。
例: ibmcloud cr namespace-add nishito_dojo_ws
Slide 36
Slide 36 text
4. IBM Cloud コンテナレジストリ
のセットアップ(1-2)
36
設定した名前空間は後で使⽤するので、
command.txtの以下の<ここにコピペ>にコピーして
ください
(設定したnamespaceを以下にコピペしてください)
: <ここにコピペ>
Slide 37
Slide 37 text
OK
ID パブリック IP プライベート IP フレーバー 状態 状況 ゾーン バージョン
kube-bm5bm4gd0v63ean36gk0-mycluster-default-00000050 173.193.99.122 10.47.64.227 free normal Ready hou02 1.14.6_1533*
5. ワーカー・ノードのデプロイメント
が完了したことを確認
37
1.以下のコマンドを実⾏してください
$ ibmcloud ks workers mycluster
ワーカー・ノードのプロビジョニングが終了すると、状況 が Ready に変わり、IBM Cloud サー
ビスのバインドを開始できます。
Slide 38
Slide 38 text
6. クラスター環境のセットアップ(1)
38
1. 以下のコマンドを実⾏してください
$ ibmcloud ks cluster config mycluster
構成ファイルのダウンロードが完了すると、そのローカルの Kubernetes 構成ファイルのパスを
環境変数として設定するために使⽤できるコマンドが表⽰されます。
環境変数を設定して Kubernetes 構成ファイルをダウンロードするためのコマンドを取得します。
export KUBECONFIG=/Users//.bluemix/plugins/container-
service/clusters/mycluster/kube-config-hou02-mycluster.yml
OS X の場合の例:
SET KUBECONFIG="C:¥Users¥¥.bluemix¥plugins¥container-
service¥clusters¥mycluster¥kube-config-hou02-mycluster.yml"
Windows の場合の例:
Slide 39
Slide 39 text
6. クラスター環境のセットアップ(2)
39
2. KUBECONFIG 環境変数を設定するためのコマンドと
してターミナルに表⽰されたものを、コピーして貼り付
け、実⾏(Enter⼊⼒)します。
$ export KUBECONFIG=/Users//.bluemix/plugins/container-
service/clusters/mycluster/kube-config-hou02-mycluster.yml
OS X の場合の例: 環境によって異なりますので、ご⾃⾝のものをご使⽤ください
> SET KUBECONFIG="C:¥Users¥IBM
InnovationCenter¥.bluemix¥plugins¥container-
service¥clusters¥mycluster¥kube-config-hou02-mycluster.yml"
Windows の場合の例:
Slide 40
Slide 40 text
6. クラスター環境のセットアップ(2)
40
$ kubectl version --short
Client Version: v1.14.1
Server Version: v1.14.6+IKS
出⼒例:
3. Kubernetes CLI サーバーのバージョンを調べて、ご
使⽤のクラスターで kubectl コマンドが正常に実⾏する
ことを確認します。
Slide 41
Slide 41 text
7. クラスターにサービスをバインド(1)
41
1. Visual Recognition サービスを
ご⾃⾝のIBM Cloudアカウントに作成します。
$ ibmcloud resource service-instance-create
watson-vision-combined lite us-south
クラスターにIBM Cloud サービスをバインドします。バインドされているすべての IBM Cloud
サービスは、そのクラスターにデプロイされたアプリで使⽤できます。
にはサービスインスタンス名を⼊れます。
ご⾃⾝でわかりやすいものを設定します(英数字とハイフン(-)ドット(.)のみ使⽤可能,、最初の１
⽂字は英数字)。
例: VisualRecognition01
Slide 42
Slide 42 text
7. クラスターにサービスをバインド
(21)
2. 作成したVisual Recognitionのサービスインスタン
スをクラスターの default の Kubernetes 名前空間に
バインドします。
$ ibmcloud ks cluster service bind --cluster mycluster --namespace
default --service
には１で設定したサービスインスタンス名を⼊れます。
42
Slide 43
Slide 43 text
7. クラスターにサービスをバインド
(22)
名前空間にサービス・インスタンスをバインド中...
OK
名前空間: default
秘密名: binding-visualrecognition01
出⼒例:
43
出⼒された機密名(Secret Name)は後で使⽤するので、
command.txtの以下の<ここにコピペ>にコピーして
ください
(出⼒されたSecret Nameを以下にコピペしてください)
visual_recognition_service Secret Name: <ここにコピペ>
43
Slide 44
Slide 44 text
7. クラスターにサービスをバインド(4)
44
3. クラスターの名前空間内に Kubernetes シークレッ
トが作成されたことを確認します。
下記のコマンドを実⾏してください。
$ kubectl get secrets --namespace=default
NAME TYPE DATA AGE
binding-visualrecognition01 Opaque 1 23h
default-au-icr-io kubernetes.io/dockerconfigjson 1 4d2h
default-de-icr-io kubernetes.io/dockerconfigjson 1 4d2h
default-icr-io kubernetes.io/dockerconfigjson 1 4d2h
default-jp-icr-io kubernetes.io/dockerconfigjson 1 4d2h
default-token-84gtn kubernetes.io/service-account-token 3 4d2h
default-uk-icr-io kubernetes.io/dockerconfigjson 1 4d2h
default-us-icr-io kubernetes.io/dockerconfigjson 1 4d2h
出⼒例:
すべての IBM Cloud サービスは、ユーザー名、パスワード、コンテナーがアクセスするために使⽤する URL など、機密情報を含む JSON
ファイルによって定義されます。この情報を安全に保管するために、Kubernetes シークレットが使⽤されます。 この例では、アカウントに
プロビジョンされる、Visual Recognition にアクセスするための資格情報がシークレットに格納されます。
Slide 45
Slide 45 text
クラスターが構成され、ローカル環境でアプリをクラ
スターにデプロイする準備が整いました︕
Slide 46
Slide 46 text
8. Dockerイメージをビルド(1)
46
$ cd server
(windowsの場合)$ copy ibm-credentials.env.sample ibm-credentials.env
(macの場合)$ cp ibm-credentials.env.sample ibm-credentials.env
$ ibmcloud cr build -t us.icr.io//watson-vr-flask:v1 .
今回はIBM Cloud内で直接イメージをビルドします。
Dockerを導⼊している場合はPC上でイメージをビルドしてプッシュする⽅法もあります。
1. watson-vr-flask/serverにcd後、IBM Cloud
コンテナレジストリにイメージをビルドします。
下記のコマンドを実⾏します。
は４で設定したコンテナレジストリの名前空間です。
4でcommand.txtにコピペしていますので、確認してください。
または ibmcloud cr namespace-list コマンドで表⽰できます
ibm-credentials.envはIBM Cloudサービスをバインドしていれば設定不要ですが、ファイルが必要なためコピーだけします。
Slide 47
Slide 47 text
ビルドには3分から5分ほどかかります
Slide 48
Slide 48 text
8. Dockerイメージをビルド(2)
48
Dockerfile
Dockerイメージは同じフォルダにあるDockerfileに基
づいて作成されます。
Dockerfile
FROM python:3
ARG project_dir=/app/
RUN apt-get update
RUN pip install --upgrade pip
WORKDIR $project_dir
COPY requirements.txt .
RUN pip install -r requirements.txt
(次ページへ続く)
Slide 49
Slide 49 text
8. Dockerイメージをビルド(3)
49
Docerfile(前ページからの続き)
COPY config ./config
COPY ibm-credentials.env ./
COPY static ./static
COPY app.py ./
ENV IBM_CREDENTIALS_FILE /app/ibm-credentials.env
CMD ["python", "app.py"]
Slide 50
Slide 50 text
9. Kubernates マニフェストファイル
server/ watson-vr-flask.ymlの編集(1)
50
Kubernetesの各種リソースを定義するファイルをマニフェストファイルと呼びます。
マニフェストファイル watson-vr-flask.ymlをご⾃⾝の環境に合わせて編集します。
1. 29⾏⽬
image: us.icr.io//watson-vr-flask:v1
: ４で設定したコンテナレジストリの名前空間です。
4でcommand.txtにコピペしていますので、確認してください。
または ibmcloud cr namespace-list コマンドで表⽰できます。
例
image: us.icr.io/ibmwork/watson-vr-flask:v1
Slide 51
Slide 51 text
9. Kubernates マニフェストファイル
watson-vr-flask.ymlの編集(2)
51
2. 40⾏⽬
secretName:
7でバインドしたサービスのSecret Nameです。
7でcommand.txtにコピペしていますので、確認してください。
またはkubectl get secrets --namespace=defaultコマンドで表⽰でき
ます。
例
secretName: binding-visualrecognition01
Slide 52
Slide 52 text
ビルドは完了しましたか︖
Slide 53
Slide 53 text
いよいよデプロイです!
Slide 54
Slide 54 text
10.クラスターへのアプリケーション
デプロイ
54
クラスターへアプリケーションをデプロイします。
デプロイの設定は先ほど作成したマニフェストファイル
に設定してあります。下記のコマンドを実⾏してくださ
い。
$ kubectl apply -f watson-vr-flask.yml
Slide 55
Slide 55 text
11.アプリケーションの動作確認(1)
55
1. 下記のコマンドでIPアドレスを確認します。
$ ibmcloud ks workers mycluster
OK
ID パブリック IP プライベート IP フレーバー 状態 状況 ゾーン バージョン
kube-bm5bm4gd0v63ean36gk0-mycluster-default-00000050 173.193.99.122 10.47.64.227 free normal Ready hou02 1.14.6_1533*
出⼒例:
出⼒のパブリック IPがIPアドレスです
2. http://:30000
にPCのブラウザーでアクセスします。
Slide 56
Slide 56 text
11.アプリケーションの動作確認(2)
56
1. 「ファイルを選択」
ボタンをクリックして
sampleフォルダーにあ
るsushi.pngファイルを
選択します。
2. 「Watsonで認識
（Watson学習済みモデ
ルを利⽤）」をクリック
し, 画像認識結果を確認
Slide 57
Slide 57 text
11.アプリケーションの動作確認(2)
57
3. 「 Watsonで認識（カス
タム学習モデル IBM提供
「Food」を利⽤）」を
クリックし, 画像認識結果を
確認
これは⾷品に特化してIBMが
作成したモデルを使⽤した認
識結果です。
Slide 58
Slide 58 text
11.アプリケーションの動作確認(3)
58
4. スマートフォンでも結果を確認します
⼀番下にQRコードが表⽰されているので、スマートフォ
ンのカメラで読み込み、ブラウザーでアクセスします。
スマートフォンの場合は「ファイルを選択」をクリック
後、「写真を撮る」でとった写真を認識に使⽤できます。
他いろいろな写真をとって試してみましょう。
Slide 59
Slide 59 text
以降は時間があれば実施ください!
Slide 60
Slide 60 text
12. UIデザインの変更(1)
server/static/index.htmlを編集し、デザインを変更してversion2をデプロイしてみましょう。
1. ファイルのコピー
下記のコマンドでindex.htmlをindex_v1.htmlとindex_v2.htmlに
コピーします。
cd static
(Winの場合)$ copy index.html index_v1.html
(Winの場合)$ copy index.html index_v2.html
(macの場合)$ cp index.html index_v1.html
(macの場合)$ cp index.html index_v2.html
Slide 61
Slide 61 text
12. UIデザインの変更(2)
2. index_v2.html 16⾏⽬をで囲んでコメント
アウトする
変更前:
変更後: で囲む
Slide 62
Slide 62 text
12. UIデザインの変更(3)
3. index_v2.html 20⾏⽬のを削除してコメン
トアウトを無効にする。その後保存して閉じる。
変更前:
変更後: を削除
Slide 63
Slide 63 text
12. UIデザインの変更(参考)
デザインテンプレートはbootswatchを利⽤しています。
v1はcerulean、v2はdarklyです。
どのようなデザインかは以下を参照してください:
https://bootswatch.com/
また組み込んでいるcssのCDNは以下を使⽤しています:
https://www.bootstrapcdn.com/bootswatch/
Slide 64
Slide 64 text
12. UIデザインの変更(4)
server/static/index.htmlを編集し、デザインを変更してversion2をデプロイしてみましょう。
4. ファイルのコピー
下記のコマンドでindex_v2.htmlをindex.htmlにコピーします。
(Winの場合)$ copy index_v2.html index.html
(macの場合)$ cp index_v2.html index.html
Slide 65
Slide 65 text
12. UIデザインの変更(5)
65
$ cd ..
$ ibmcloud cr build -t us.icr.io//watson-vr-flask:v2 .
5. IBM Cloudコンテナレジストリにv2イメージをビル
ドします。
下記のコマンドを実⾏します。
は４で設定したコンテナレジストリの名前空間です。
4でcommand.txtにコピペしていますので、確認してください。
または ibmcloud cr namespace-list コマンドで表⽰できます
実⾏ディレクトリはserverです。
Slide 66
Slide 66 text
12. UIデザインの変更(６)
マニフェストファイル watson-vr-flask.yml をコピーして、v2イメージ⽤のマニフェストファイ
ルを作成します。
6. ファイルのコピー
下記のコマンドでwatson-vr-flask.ymlをwatson-vr-flask_v2.yml に
コピーします。
(Winの場合)$ copy watson-vr-flask.yml watson-vr-flask_v2.yml
(macの場合)$ cp watson-vr-flask.yml watson-vr-flask_v2.yml
Slide 67
Slide 67 text
12. UIデザインの変更(7)
7. server/watson-vr-flask_v2.yml 29⾏⽬の
イメージタグ v1を v2 に変更して保存します。
変更前
image: us.icr.io//watson-vr-flask:v1
変更後
image: us.icr.io//watson-vr-flask:v2
注: ４で設定したコンテナレジストリの名前空間になっています。
例(変更後)
image: us.icr.io/ibmwork/watson-vr-flask:v2
Slide 68
Slide 68 text
12. UIデザインの変更(8)
68
クラスターへアプリケーションv2をデプロイします。
デプロイの設定は先ほど作成したマニフェストファイル
に設定してあります。下記のコマンドを実⾏してくださ
い。
$ kubectl apply -f watson-vr-flask_v2.yml
完了後、 アプリケーションを表⽰していたWebブラウ
ザーをリロードします。
(またはhttp://:30000 にアクセス)
UIのデザインが変わっていれば変更完了です。
Slide 69
Slide 69 text
12. UIデザインの変更(9)
69
元に戻します。以下のコマンドを実⾏します。
$ kubectl apply -f watson-vr-flask.yml
または以下のコマンドでロールバックをしても
元に戻ります。
$ kubectl rollout undo deployment deploy-watson-vr-deployment
Slide 70
Slide 70 text
13.アプリケーションの削除
70
デプロイしたアプリケーションを削除します。
1. Deploymentを削除します。
$ kubectl delete deployment deploy-watson-vr-deployment
2. Serviceを削除します。
$ kubectl delete service deploy-watson-vr-service
もう⼀度デプロイする場合は、10で実施したコマンドを実施します。
尚、今回使⽤しているフリー・クラスターは 30 ⽇後に⾃動的に削除されます。
ここから先は作成したアプリを削除したい⽅のみ実施してください。
Slide 71
Slide 71 text
14.イメージの削除
71
ビルドしたイメージを削除します。
$ ibmcloud cr image-rm us.icr.io//watson-vr-flask:v1
UIを変更したイメージv2を作成した場合は、以下も実施。
は４で設定したコンテナレジストリの名前空間です。
4でcommand.txtにコピペしていますので、確認してください。
または ibmcloud cr namespace-list コマンドで表⽰できます
もう⼀度ビルドする場合は、8および125で実施したコマンドを実施します。
$ ibmcloud cr image-rm us.icr.io//watson-vr-flask:v2
Slide 72
Slide 72 text
15.サービスのアンバインド
72
クラスターにバインドしたサービスを解除(アンバイン
ド)します。
$ ibmcloud ks cluster service unbind --cluster mycluster --namespace
default --service
(尚、エラーが出ることがありますが、実際はアンバインドされているので、
ibmcloud ks cluster service ls --cluster mycluster
で削除されたことを確認してください)
もう⼀度バインドする場合は、７-2で実施したバインドのコマンドを実施します。
には7-１で設定したサービスインスタンス名を⼊れます。
ibmcloud ks cluster service ls --cluster mycluster
Slide 73
Slide 73 text
16.コンテナレジストリの名前空間の削除
73
作成した名前空間を削除します(削除したい場合のみ)。
$ ibmcloud cr namespace-rm
名前空間「nishito_dojo」を削除してよろしいですか? 名前空間を削除すると、その名前空間内の
すべてのイメージおよび信⽤情報も削除されます。 [y/N]>
と聞かれるので、yを⼊⼒してEnterを押します。
もう⼀度ビルドする場合は、4-1で実施したコマンドを実施します。
は4-1で設定したコンテナレジストリの名前空間です。
4でcommand.txtにコピペしていますので、確認してください。
または ibmcloud cr namespace-list コマンドで表⽰できます。
削除するとその名前空間内のイメージは全て削除されますので、当ハンズオン外で作成したイメージがあり保存して置きたい場合は実⾏しないでく
ださい。
Slide 74
Slide 74 text
17. Visual Recognitionサービスの削除
74
作成したVisual Recognitionサービスを削除します(削
除したい場合のみ)。
$ ibmcloud resource service-instance-delete
ID crn:v1:bluemix:public:watson-vision-combined:us-south:a/xxxxxxxxx:xxxxxxxx:: の
サービス・インスタンス VisualRecognition01 を本当に削除しますか? [y/N] >
と聞かれるので、yを⼊⼒してEnterを押します。
もう⼀度作成する場合は、7-1で実施したコマンドを実施します。
には71で設定したサービスインスタンス名を⼊れます。
忘れた場合は ibmcloud resource service-instances コマンドで表⽰できます。
当ハンズオン外でVisual Recognitionサービスを利⽤している場合は実⾏しないでください。
Slide 75
Slide 75 text
--- ここまでがオプションです ---
Slide 76
Slide 76 text
Watson Visual Recognition カスタムクラスを作
ろう!
https://qiita.com/nishikyon/items/7d1c07e2f50c1002e815
Visual Recognitionのカスタムクラスを作成して、本⽇作成したアプリに
組み込んでみましょう。Visual RecognitionサービスをGUIで作成する場合
は名前にスペースを⼊れないように変更してください。
カスタムクラスを作成後、/server/app.pyの
def classifyCustomImages():内のclassifier_ids=["food"]のfoodを
Classifier IDに変更してください (51⾏⽬)。
オプションチャレンジ
Slide 77
Slide 77 text
まとめ
• IBM Cloud Kubernetes サービス上でWatsonサー
ビスをを使⽤する場合は、バインド+シークレット
の設定でAPI KEYのセットが不要(アプリ側で要読み込み
処理)。
• IBM Cloudコンテナ・レジストリ上でコンテナイ
メージのビルドができる。
• Kubernates マニフェストファイルを作成して、 設
定とともにKubernetes サービス上にアプリケー
ションのデプロイができる。