この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
好物はインフラとフロントエンドのかじわらゆたかです。 今回大澤が構築したネジ検出・ネジ分類を推論するSageMakerのエンドポイントにリクエストを送付するWebアプリケーションを構築したので、 その実装方法とアーキテクチャ・ソースコードを公開します。
まずは、動作している様子を御覧ください
アーキテクチャ図
実装解説(フロントエンド)
今回のフロントエンドの実装はHTMLファイルにすべて実装をしています。 以下のような流れでリクエストを行っています。
- このサイトにアクセスすると、アクセスしたブラウザ経由で端末についているカメラにアクセスの許可を求めます。
- カメラへのアクセスが許可されると、カメラから取得した映像をvideoタグのソースとして設定します。
- Captureボタンを押すと、カメラから取得している画像を切り出し、Canvasに配置します。
- Sendボタンを押すと、Captureボタンを押したタイミングで保存した画像をリクエストとしてAPI Gatewayに送付します。
- API Gatewayから推論の結果として、ネジの領域と種類がレスポンスとして返ってくるので、その領域に矩形とテキストのラベルを描画します。
実装解説(APIGateway & AWS Lambda)
今回の推論を行わせるAPI側はServerlessFrameworkで実装を行いました。 API Gatewayではフロントエンドから受け取ったリクエストを以下のように処理しています。
- リクエストで受け取ったBodyの内容をBase64でデコードを行い、画像ファイルとして推論用の関数にパラメータとして渡します。
- 推論用の関数は
RealTimePredictorを継承したクラスを作成し、そのなかのpredict関数で画像からの検出・推論を行わせています。 SageMakerのエンドポイントはLambdaの環境変数で指定できるようにし、 SageMakerのエンドポイントが更新されたとしても環境変数の変更のみで対応できるようになっています。 実際におこなっている処理の解説は大澤のブログ記事を参考にしてください。 - 大澤のブログ記事では画像に対して矩形で検出した情報を画像に対して描画していますが、 画像の描画はフロントエンド側で行いますので、レスポンスとしてはJSONを返しています。
デプロイの注意点
アプリケーションをデプロイするにあたって２点注意する必要があります。
- HTMLはHTTPSでアクセスできる箇所に配置する
こちらはフロントエンドの仕様となりますが、カメラ等にアクセスするHTMLが配置されているサーバーはHTTPSで構築されている必要があります。参考 今回のサンプルはS3のオブジェクトの参照権限等を設定した上でアクセスしていますが、 実際にWebアプリケーションとして配置する場合は、CloudFrontとAWS Certificate Managerを用いる等HTTPSでアクセスする環境を構築する必要があります。
- 一部Pythonのライブラリのデプロイに関してDockerを用います
ServerlesFrameworkで実装しているLambdaのPythonのライブラリ管理に、 Serverless Python Requirementsを用いています。その際、一部ライブラリの導入にDockerを用いていますので、Dockerが起動している環境でデプロイを実施する必要があります。
ソースコード
まとめ
このような方法で実装することで、機械学習を用いたWebアプリケーションを実装できることがわかりました。 また、今回の実装は推論のエンドポイントの構築とWebアプリの構築を分業で行うことができました。 機械学習の推論のエンドポイントが完成次第、このような形でアプリケーションの構築が行えるのも、AWSの特徴と言えるのではないでしょうか。
6
