[レポート] 自動化とAIを使ったスケールするメディア利用 #Cloudinary #ImageCon2020

Cloudinary ImageCon 2020 の "Handling Media at Scale Using Automation and AI" のセッションレポートです。Cloudinaryの自動化やAIに関する機能を活用し、メディア管理をスケールさせるための導入セッションです。

Ito ma

2020.08.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Guten Tag! ベルリンの伊藤です。

Cloudinary の ImageCon 2020 が開催されており、誰でも無料で登録し、オンライン配信を視聴することができます。本稿では、私が試聴したセッション「Handling Media at Scale Using Automation and AI」のレポートを行います。

概要

スピーカー

  • Yaron Reichert (Cloudinary / Technical Content Team Leader)
  • Jackie Rosenzveig (Cloudinary / Director of Product)

セッション: Handling Media at Scale Using Automation and AI

https://www.imagecon.com/agenda/session/276192

Digital media is booming all over the world, across every medium and format. So how do you manage and automate all of this rich media effectively? This session will dive into how to automate media handling tasks using AI with Cloudinary.

豊富なメディアを効率的に自動化して管理するにはどうすれば良いか、Cloudinary のAI技術に関するする導入セッションです。

レポート

メディアのライフサイクル

  • 一般的なライフサイクルは、アップロード、管理（フォルダに入れるなど）、検索&共有、サイズや内容を編集、最適化&配信、分析（エンゲージメントなど） のステップ
  • このうち、部分的なステップに使えるツールは数多くあるが、全体を網羅したエンドツーエンドのソリューションはCloudinaryだけ
  • 最初の3つのステップにはいくらか手動の作業（人による意思決定）が必要かもしれないが、後半の3つのステップは自動化処理がないと負荷が高く、スケールすることはできない

本セッションでは、以下のようなテーマでスケールさせる方法について触れていく：

  • SNSの動画作成
  • ユーザ生成のコンテンツ
  • 動画の最適化
  • メディア管理の自動化

ソーシャルメディアの動画をスケールさせる

  • 動画はカスタマーエンゲージメントやコンバージョンに対して大きな効果があり、顧客はより多くの動画コンテンツを期待する
  • 一方、動画作成・配信は技術、クリエイティブ、マーケティング、IT、ビジネスラインにおいて大変な作業で膨大な時間を消費する
  • 統計データ（ソース: Forbes, Google, Hubspot）
    • 90% の顧客が製品映像を購入の決め手とする
    • ランディングページに動画があるとコンバージョン率が 80% 上がる
    • 時間とリソースの障壁を超えられるなら、83% の企業がもっと動画を使いたいと思っている

動画の要素

動画作成では、以下のような要素を含めるべき：

  • アスペクト比：SNSごとの厳しい比率の要件に沿う必要がある
  • タイトルとキャプション：多くの動画はミュートで再生されるので注目を集めるには大事
  • ブランディング：コンテンツを一貫させ、見つけやすくするためにロゴやフォント、カラーを統一する
  • 進捗バー：動画のおおよその時間の長さを示すことで、ユーザは時間がかかりすぎないことが分かり、エンゲージメントに繋がる

例えば、Instagram のストーリーにベトナム旅行の動画を上げる場合、Cloudinaryを使って次のように進める。

#1 動画を用意

横向きのオリジナル動画で、パソコンには最適だがスマホでは見づらい:

https://res.cloudinary.com/cloud-name/video/upload/
vietnam.mp4

#2 スマホに合うよう切り抜き

中央で切り抜くと、映像内の船が部分的に切り落とされる:

https://res.cloudinary.com/cloud-name/video/upload/
ar_9:16,c_fill,w_400/
vietnam.mp4

AIによるコンテンツに合わせた切り抜きで、動画の中で最も主な対象物を検知し、そこに焦点を当てる。g_autoパラメータを追加し、今回の場合、船を追うように動的に切り抜き:

https://res.cloudinary.com/cloud-name/video/upload/
ar_9:16,c_fill,g_auto,w_400/
vietnam.mp4

#3 キャプション、タイトル、ロゴを追加

統一したフォントや色を使ったテキストオーバーレイで行き先を示すキャプションを加え、画像オーバーレイでロゴを配置する:

https://res.cloudinary.com/cloud-name/video/upload/
ar_9:16,c_fill,g_auto,w_400/
l_text:heebo_44_bold:Visit%20Vietnam!,g_south,y_40,co_rgb:FFFFFF/
l_ctravel,g_north_east,w_60,x_10,y_10/
vietnam.mp4

#4 進捗バーを追加

e_progressbarパラメータを追加し、フレームの左下から画面を囲むようにバーが進む:

https://res.cloudinary.com/cloud-name/video/upload/
ar_9:16,c_fill,g_auto,w_400/
l_text:heebo_44_bold:Visit%20Vietnam!,g_south,y_40,co_rgb:FFFFFF/
l_ctravel,g_north_east,w_60,x_10,y_10/
e_progressbar:frame:white:8/
vietnam.mp4

ImageCon2020 transform social videos

これらのパラメータの組み合わせをテンプレートとし、ファイル名を書き換えるだけで同様の変換が可能なので、色やサイズを多少調整した同様のパラメータの組み合わせを使い回すことで、一貫した変換を行うことができる。

ユーザ生成コンテンツで体験を最大化

  • 各業界で、ユーザ生成コンテンツ (UGC) はものすごいコンバージョン率（全体平均で約160%）に増加させる
  • ユーザによる個人的な経験の共有は、信頼できる情報として他のユーザの関心を集める
  • ただし、そのコンテンツが自社のデザインに合っているか、プライバシー水準を満たすか、その上で、そのユーザに高いユーザエクスペリエンスを提供しているか、といった観点で、考えることがたくさん

UGCに対するCloudinaryの機能

・承認とフィードバック - 分析を行い、基準に合わないファイルはアップロードを拒否したり、ユーザに警告したりする

アップロード時、品質が適切か、アクセシビリティが適切か（色盲に優しい色合いか）、マルウェア検出、モデレーションできているか（ヌードなど基準に違反していないか）、といった情報を判定できる。閾値を指定し、それを超える場合には特定の処理を行うようにする。

ImageCon2020 Cloudinary extended options

※品質、アクセシビリティは現時点ではBeta版の拡張オプションのため、使用するにはサポートに連絡すること

 

・プライバシー - 顔や文字を検知し、モザイクやぼかしを入れる

e_blur_faces / e_pixelate_faces パラメータを加えることで、顔が映っている画像の場合、顔部分にモザイクやぼかしを加えることができる。アドオンを使って、車のナンバープレート、クレジットカードの番号などを同様に文字認識で隠すことも。

 

・メタデータと検索 - フォームデータを保管し、検索機能強化のため自動タグ付けする

使うタグ付けエンジン（Amazon, Google, Imagga）を選択し、ユーザのファイルアップロード時に自動で関連するタグを付与するよう設定できる。また、顧客がフォーム入力した情報や、ファイルそのものに含まれるデータをメタデータとしてアセットに紐づけて格納しておくことができる。そして、これらの情報を使ってアセットを検索することが可能。

 

・自動切り抜き - 1つの画像/映像を複数の目的に活用する

先ほどの動画の切り抜きと同様、g_autoで画像でも主な対象物に焦点が当たるよう自動で切り抜きできる。対象物が既に明らかなケースでは、さらなる指定が可能。例えば、顧客が電子レンジを販売したく、キッチンの画像をアップロードしている場合、サムネイル用に次のようなパラメータを加えることで、microwave (電子レンジ) に焦点を当てた変換画像を自動で生成できる。同じキッチンの写真から、パラメータによりシンクや冷蔵庫を自動で切り抜くことも。

g_auto:microwave,c_thumb,w_600,ar_1

さらに、fl_getinfo パラメータを付与するとJSON情報を返却するので、アプリケーションに活用することができる。例えば、この対象物の座標情報を使えば、アプリ内で切り抜き機能を提供する場合にデフォルトの切り抜き範囲としたり、オーバーレイをする場合にこの対象物を避けるように重ねたりする。

 

Make it Fun! - おしゃれフィルタやエフェクトを付ける

ユーザがファイルをアップロードする際、エフェクトのオプションがあるに越したことはないはず。一から開発するのはかなりの手間だが、Cloudinaryのオプションで簡単にエフェクトを適用させることができる。例えば、e_cartoonify（アニメ調）、e_art:sizzle（Instagramっぽいフィルター）など様々。また、自動背景除去のアドオンもあり、別の背景画像と組み合わせることも。

ちなみに、写真と美術品を組み合わせて、その画家により写真が描かれたようなエフェクトに仕上げる美術品スタイル変換もぜひデモを試してほしい。例えば、モナリザの絵と自分の写真を組み合わせて、モナリザの絵のタッチで描かれた自分の画像を生成することができる。

動画の最適化

  • 動画は読み込みが速くスムーズに再生された上で、見栄えが良いのが理想
  • 実際には、多くの場合ネットワークに制限があり、品質vsサイズvsスピード/コストの間で選択が迫られる
  • ゴールは、可能な限り圧縮しつつ、コンテンツと要件を元にちょうど良い落としどこにすること

なお、デスクトップ、タブレット、スマホなど様々な端末で、異なるOS、ブラウザ、アプリケーションを使用し、それぞれでサポートされるフォーマットを使う必要がある。

人気の動画フォーマット/コーデック

  • MP4
    • AVC (H.264)
    • HEVC
  • アダプティブビットレート
    • HLS, MPEG-DASH
  • WebM
    • VP8
    • VP9
    • AV1
  • その他
    • MKV, AVI, OGG, WMV...

ブラウザへの互換性を比較してみると：

  • AVC/H.264 - 最も人気でほぼどのブラウザでもサポートされる互換性の高いもの
  • HEVC/H.265 - H.264より20-40%性能が良いが、Safariでしかサポートされていない
  • VP8/VP9 - Chrome, Firefox, Edge, Android等でサポートされていて、パフォーマンスとしては8/9それぞれH.264/265と同じくらい
  • AV1 - 最新のもので、新しいChromeやFirefox、Edge等でサポートされていて、H.265/VP9よりさらに20-40%性能が良いが、まだまだCPU負荷が高い

※ ImageCon2020のこちらのセッションでも紹介されていた CanIUse.com の情報が使用されています。

ただし、ただフォーマットを選べば良いわけではなく、動画の内容（例えば、単純な亀が泳いでいる映像と、より複雑で動的なラフティングの映像）によって適切な選択をする必要がある。

Cloudinaryのf_autoとq_auto

Cloudinaryでは、f_autoを付与することでブラウザごとに最適なフォーマットを自動選択し、配信することができる。

また、q_autoを適用すると、映像の内容に応じた最善の品質で配信する。

デモサイトでこれらのパラメータを付与した前後を比較することができ、多くの場合、見栄えを変えずに大きく（例の場合、70%減）ファイルサイズを減らすことができる。

参考資料

Cloudinanry CLI

一括操作などをプログラムで行うには、API/サーバサイドSDKを使うことができるが、クライアントがアプリを持ってなかったり、普段使うプログラムはいじらずに、ちょっとしたリクエストを実行したいという場合に、最近CloudinaryでリリースされたCLIがとっても便利。CLIをインストール、環境変数を定義するだけで、コマンド実行が始められる。

例えば以下のようなコマンドが実行できる：

  • Migrate：外部のファイル一覧をあらかじめ定義し、その通りにマッピングしてCloudinaryへ移行
  • Upload_dir：指定したローカルディレクトリから、フォルダ構成をそのままにアップロード
  • Sync：ローカルフォルダとCloudinaryフォルダを同期させ、ローカルに追加したファイルを自動的にアップロードさせられる
  • Make：アップロードウィジェットや動画プレイヤーなどのウィジェットを使用する場合のテンプレートコードを生成する

ImageCon2020 Cloudinary CLI Commands

CLI のデモ

プリセット（アップロードに適用させる設定のテンプレートのようなもの）を作成し、プリセットには画像の背景を除去すること、ファイル名を使ってアップロード、同じファイル名なら上書きすること、を定義する。

$ cld admin create_upload_preset name="bgd_remove6" backgroud_removal="cloudinary_ai" overwrite=true use_filename=true unique_filename=false type=upload

作成したプリセットを使ってローカルのフォルダからファイルをアップロードする。

$ cld upload_dir -f imagecon/no_bgd_products -p bgd_remove6 documents/cloudinary/imagecon/winter_clothes

コンソールから対象のパス（-fで指定した"imagecon/no_bgd_products"）を確認すると、画像が背景除去されており、ローカルと同様にサブフォルダがある形でアップロードされたことを確認できる。

ImageCon2020 コンソール画面でアップロードの確認

参考資料

おわり

1時間のセッション映像ですが、導入セッションといってもかなり広い範囲のテーマで非常に濃い内容でした！Cloudinaryの機能では多岐にわたってAIや自動化が取り入れられており、これらの機能を活用することで、コストもリソースも削減してサービスをスケールさせられることが学べました。

ImageCon 2020 は10月23日までオンデマンドでいつでも試聴可能です。

クラスメソッドでは、Cloudinary のパートナーとして導入サポートを行なっています。お気軽にこちらからお問い合わせください。

AWS

関連記事

Amazon Rekognitionをアルティメット完全理解する

nokomoro3

2024.03.09

Terraformで構築する機械学習ワークロード（Batch on EC2編）

nokomoro3

2023.09.19

Terraformで構築する機械学習ワークロード（Batch on Fargate編）

nokomoro3

2023.09.18

Terraformで構築する機械学習ワークロード（Lambda編）

nokomoro3

2023.09.12