セマンティックセグメンテーションでやっていく年賀状作成 2022

この記事は、CAMPHOR- Advent Calendar 2021 の3日目の記事です。

概要

年賀状やメッセージカード作成に役立つWebツール、SSフォトカードメーカー を作りました。 このツールを使うと、写真からこういった画像を作成できます1。 f:id:shiba6v:20211202205444j:plain

全面写真の年賀状と「上に文字が乗らない問題」

年末といえば、年賀状作成ですね。最近はSNSで送る人もいるみたいです。 テンプレートに小さい写真を入れていくのではなく、全面が写真の年賀状もおしゃれですよね。

ですが、どんな写真でも全面写真年賀状にできるわけではありません。 写真の上に文字を貼ると、文字が見づらくなってしまいます。 f:id:shiba6v:20211202205436j:plain

この「上に文字が乗らない問題」は、Webデザインでもよく出くわす問題です2。 対処法は、写真の色を薄くする、暗くする、ぼかすなどがあります。 例えば、CAMPHOR-のWebサイト3 (https://camph.net/) でも、写真を暗くしてぼかすことでこの問題を回避しています。

ですが、人が入った写真の場合は、この対処法に従って色を薄くしてしまうと、人の色まで薄くなってしまいます。 f:id:shiba6v:20211202213440j:plain

そこで、画像の人の部分だけを残して、他の部分を薄くすれば、 f:id:shiba6v:20211202213146p:plain

人の部分は元の写真のままで、文字が乗りやすくなります。 f:id:shiba6v:20211202205444j:plain

セマンティックセグメンテーションでやっていく

画像の人の部分だけを残すという問題は、コンピュータビジョンのセマンティックセグメンテーションという問題にあたります。 セマンティックセグメンテーションは、画像の全てのピクセルを意味(歩道、車道、車など)に応じて分類する問題です。 今回は、人かそうでないかを分類するように訓練されたセマンティックセグメンテーションのモデル 4を使って、白黒のマスクを得ます。 このマスクを使うことで、人とそれ以外の部分を別々に加工できます。 f:id:shiba6v:20211202215148p:plain 5

Webサービスの構成について説明します。 画像を読み込んだら、画像を縮小してサーバーに投げ、サーバー側でマスクを推定します。 画像の加工は、NumJs 6 とjQueryを使ってフロントエンド側で行いました。この理由は、スライダーの値によって背景の明るさを変更するため、毎回通信すると遅くなるからです。 f:id:shiba6v:20211202222052j:plain

使ってみた

いろいろな画像で試しました。[^7] f:id:shiba6v:20211202223536p:plain f:id:shiba6v:20211202223948p:plain

うまく行かない場合としては、こちらの赤ちゃんの画像は性能が出ませんでした。 赤ちゃんの画像が訓練データにおそらく少ないであろうことと、背景と服の見分けが付きづらいことが原因だと思います。 f:id:shiba6v:20211202223859p:plain

感想・今後の課題など

  • タイトルは、morishinさんの記事 のパクリ へのオマージュです。
  • SSフォトカードメーカーのSSは、セマンティックセグメンテーションです。
  • このツールは、年賀状だけではなく、メッセージカードやチラシ、Webデザインにも便利だと思います。
  • こういったセマンティックセグメンテーションを使った画像加工は、そのうちパワポなどにも組み込まれていくと思います。
  • 本当は、文字を入れてメッセージカードを作るところまでやりたかったのですが、凝りだすとキリが無いのと、時間がないためやりませんでした。
  • ブラウザでセマンティックセグメンテーションができる BodyPix.js を使って、フロントエンド側にもたせたほうがスケーラブルで良かったかもしれません。Webアプリとニューラルネットを同じプロセスで動かしていて、メモリもいっぱいなので、一人の処理中は他の人は処理できないようになってしまいました。
  • NumJsがNumPyくらい便利になると嬉しいですが、フロントエンドで画像処理をやっている人は何を使っているんでしょうか？TensorFlow.jsあたりが良いんでしょうか。

ということで、SSフォトカードメーカー をぜひ、年賀状作成に使ってみてください。 要望や感想など、ブログへのコメント、Twitterのリプライもお待ちしています！

CAMPHOR- Advent Calendar 2021 の次の記事は、morishinさんです。お楽しみに！

  1. 写真はぱくたそさんからお借りしました。 年賀状素材は、brotherさんからお借りしました。年賀状素材や文字を貼る部分は、Webサービス上ではなく別のソフトで行いました。↩

  2. 初心者デザインから脱出！写真の上の文字を見やすくするテクニック7選 | masaca↩

  3. CAMPHOR-のサイトは最近リニューアルしました！

    ↩

  4. GitHub - xuebinqin/U-2-Net: The code for our newly accepted paper in Pattern Recognition 2020: "U^2-Net: Going Deeper with Nested U-Structure for Salient Object Detection."↩

  5. セマンティックセグメンテーション - MATLAB & Simulink↩

  6. GitHub - nicolaspanel/numjs: Like NumPy, in JavaScript↩