Cloud Run で塗り絵生成ツールを数分でデプロイ

※この投稿は米国時間 2022 年 4 月 6 日に、Google Cloud blog に投稿されたものの抄訳です。

画像を変換するスクリプトを書いたことはありますか？スクリプトを他の人と共有したり、複数のコンピュータで実行したりしたことがありますか？スクリプトやセットアップ手順のアップデートは何回くらい必要でしたか？サービスやオンライン アプリを使用しましたか？もし、作成したスクリプトが有用であれば、他の人にも公開したいと思うはずです。処理サービスのデプロイは、繰り返し必要とされるものであるため、それなりの課題があります。サーバーレス技術は、これらの課題を簡単かつ効率的に解決できます。

今回は、解決方法をご紹介します。

• 塗り絵を生成する画像処理サービスを作成する

• 最小限のリソースで、オンラインで利用できるようにする

200 行以下の Python と JavaScript ですべてを行うことができます。

ツール

塗り絵ページ生成ツールを構築してデプロイするには、いくつかのツールが必要です。

• 画像を処理するためのライブラリ

• ウェブ アプリケーション フレームワーク

• ウェブサーバー

• デモを 24 時間 365 日利用できるようにするためのサーバーレス ソリューション

アーキテクチャ

Cloud Run を使った塗り絵生成ツールのアーキテクチャの一例を紹介します。

ワークフローは以下の通りです。

ユーザーはウェブアプリを開き、ブラウザはメインページをリクエストします。

1. Cloud Run は、アプリの HTML コードを提供します。

2. ブラウザは、必要なリソースを追加でリクエストします。

3. Cloud Run は、CSS や JavaScript などのリソースを提供します。

1. ユーザーが画像を選択すると、フロントエンドは画像を /api/coloring-page エンドポイントに送信します。

2. バックエンドは入力画像を処理し、出力画像を返します。ユーザーはこの出力画像をブラウザ経由で可視化すること、ダウンロードすること、印刷できます。

ソフトウェア スタック

もちろん、このようなアーキテクチャを実現するために、さまざまなソフトウェア スタックがあります。

Python をベースにした良いものがあります。

次の機能が含まれます。

• Gunicorn: 本番環境グレードの WSGI HTTP サーバー

• Flask: 人気のウェブアプリ フレームワーク

• scikit-image: 豊富な画像処理ライブラリ

これらのアプリの依存関係を requirements.txt というファイルに定義します。

画像処理

画像から色を取り除くにはどうしたらよいですか？一つは、オブジェクトのエッジを検出し、結果画像からエッジ以外を削除する方法です。これは、画像の強度が最も変化する領域を検出する畳み込みフィルタである Sobel フィルタで実現できます。

main.py という Python ファイルを作成し、画像処理関数を定義し、その中で Sobel フィルタと scikit-image の他の関数を使用します。

注意: NumPy と Pillow ライブラリは scikit-image の依存ライブラリとして自動的にインストールされます。

例として、Cloud Run のロゴが各ステップでどのように処理されるかを紹介します。

ウェブアプリ

バックエンド

フロントエンド

ブラウザ側では、/api/coloring-page エンドポイントを呼び出し、処理後の画像を受け取る JavaScript 関数を作成します。

アプリのベースはそこにあります。あとは、HTML＋CSS＋JS の組み合わせで、目的のユーザー エクスペリエンスを完成させるだけです。

ローカルでの開発

パソコンでアプリを開発しテストするために、環境が整ったら、必要な依存関係を確認します。

main.py に以下のブロックを追加します。アプリを手動で実行したときのみ実行されます。

Flask がローカルでウェブサーバを起動します。

注: このモードでは、開発用ウェブサーバー（本番環境には適さないもの）を使用します。次に、本番環境グレードのサーバーである Gunicorn でアプリを提供するためのデプロイをセットアップします。

もう大丈夫です。ブラウザで localhost:8080 を開き、テストし、絞り込み、反復処理します。

デプロイメント

アプリが完成したら、Procfile というファイルにあるこの一行で、アプリの提供方法を定義できます。

以上で、ソースフォルダからアプリをデプロイできるようになりました。

仕組み

コマンドラインの出力は、すべての異なるステップの詳細を示します。

Cloud Build は、アプリをコンテナ化するために間接的に呼び出されます。そのコア コンポーネントの 1 つが Google Cloud Buildpacks です。これにより、ソースコードから本番環境に対応したコンテナ イメージを自動的にビルドできます。ここでは、主な手順をご紹介します。

• Cloud Build がソースコードを取得します。

• Buildpacks は、アプリの言語（この場合は Python）を自動検出し、対応する安全なベースイメージを使用します。

• Buildpacks は、アプリの依存関係（Python の場合は requirements.txt に定義されている）をインストールします。

• Buildpacks はサービスのエントリ ポイントを構成します（Python 向け Procfile で定義）。

• Cloud Build はコンテナ イメージを Artifact Registry に push します。

• Cloud Run は、このコンテナ イメージに基づいて、サービスの新しいリビジョンを作成します。

• Cloud Run は、本番環境のトラフィックをルーティングします。

注:

• Buildpacks は現在、Go、Java、.NET、Node.js、Python のランタイムをサポートしています。

• Google は、このベースイメージのセキュリティ上の脆弱性をスキャンし、既知の問題が存在する場合はパッチを適用し、積極的に維持します。これは、アップデートをデプロイする際に、サービスが可能な限り安全なイメージに基づくことを意味します。

独自のコンテナ イメージを構築する必要がある場合、例えばカスタム ランタイムを使用する場合、独自の Dockerfile を追加すれば、Buildpacks はそれを代わりに使用できます。

更新

実際のユーザーによるテストを重ねた結果、いくつかの問題があることがわかりました。

まず、デジタルカメラで撮影した写真の向きが、本来の向きでない場合は扱えません。EXIF の画面の向きデータを使用して修正できます。

また、このアプリは入力画像のディテールに対して敏感すぎます。ペイントのテクスチャや写真のノイズは、処理後の画像に多くのエッジを発生させることがあります。ノイズ除去のステップを前もって追加することで、処理アルゴリズムを改善できます。

このステップを追加することで、塗り絵をよりきれいに仕上げることができ、印刷した場合のインクの使用量も減らすことができます。

再デプロイすると、アプリが自動的に更新されます。

利用可能な状態

アプリが Cloud Run のサービスとして表示されます。

サービス ダッシュボードでは、アプリの利用状況を把握できます。

以上で、画像処理アプリの完成です。

サーバーレス

このアーキテクチャで Cloud Run を使用すると、多くの利点があります。

• アプリは 24 時間 365 日利用可能。

• 環境はフルマネージドなので、インフラストラクチャを気にすることなく、コードに集中可能。

• アプリは自動的に HTTPS で利用可能。

• アプリをカスタム ドメインにマッピング可能。

• Cloud Run は、インスタンス数を自動的にスケーリングする。課金にはコードの実行時に使用されるリソースのみが含まれる。

• アプリが使用されない場合、Cloud Run はゼロにスケールダウンする。

• アプリのトラフィックが増えた場合（ニュースになったらと想像し）、Cloud Run は必要な数のインスタンスにスケールアップする。

• CPU、メモリ、同時実行数、最小インスタンス数、最大インスタンス数など、多くの設定を微調整することで、パフォーマンスと費用をコントロール可能。

• 毎月、最初の 50 vCPU 時間、100 GiB 時間、200 万リクエストを無償で提供する無料枠がある。

ソースコード

このプロジェクトには、わずか 7 つのファイルと 200 行以下の Python + JavaScript のコードが含まれています。

このデモをベースにして、独自の画像処理アプリを作ることができます。

• ソースコードは、GitHub で確認してください。

• 自分でアプリを数分でデプロイする手順については、「ゼロからデプロイする」をご覧ください。

さらに表示

• デモを見て、オリジナルの塗り絵を生成。

• Cloud Run の詳細を調べる。

• その他のクラウド コンテンツについては、Twitter （@PicardParis）または LinkedIn （in/PicardParis）をフォローし、フィードバックや質問があればお気軽にご連絡ください。