HackDay2019に出場して、SNSを薄めるChrome Extensionを作成してプレゼンをしたのですが、裏の仕組みはどうなっているのか聞きたい、という意見をちらほら頂けたので、振り返りの意味も込めてQiitaに投稿していきたいと思います。
つくったもの
Facebookの投稿内容を薄める拡張機能を作りました。
投稿したテキストの内容をいい感じに一言で表現して、さらに投稿された画像も抽象度の高い画像に変換して表示してくれます。
変換前
変換後
当日の発表の様子がYouTubeに公開されているので、ぜひ気になる方は見てください。
https://youtu.be/HNjXZwRTybU?t=13336
全体構成
今回作成したプロダクトの全体構成は以下の図のような感じです。
ここからはそれぞれの要素について解説していきたいと思います。
Chrome Extension
Chrome Extensionでは以下を行います。
-
投稿したテキストと画像情報をDOMから取得する
-
取得した情報をテキスト変換API, 画像生成/配信APIに渡す
-
変換前のテキストを変換後のテキストに書き換える
-
画像生成APIを叩いて生成された画像の特徴タグと画像のパスを受け取る
-
変換前の画像のパスを生成した画像のパスに置き換える
文章情報と画像情報の取得
Facebook上に投稿された画像の特徴情報として、今回はFacebookの自動代替テキストという機能を利用しました。
自動代替テキストは、物体認識技術を利用して、視覚に障がいを持つ方のために写真の説明を生成します。写真の自動代替テキストを編集する方法については、こちらをご覧ください
この機能を提供するために、Facebookの画像が置かれたimgタグのalt属性には画像の特徴を表すキーワードが格納されています。
今回は、このキーワードを利用することで画像の特徴を取得しました。
例えば、Facebookで以下のように画像を投稿すると、
imgタグのalt属性には、画像の特徴を表す「1人」、「帽子」というキーワードが格納されています。
<img alt="画像に含まれている可能性があるもの:1人、帽子" width="500" height="468">
文章変換API
文章変換APIは以下をおこなうシンプルなREST APIです。
-
Chrome ExtensionからHTTPリクエストとして、投稿した文章データを受け取る
-
HTTPリクエストとして受け取った文章データを、自作した文章変換ライブラリに渡して変換された文章データを取得する
-
変換された文章データをHTTPレスポンスとしてChrome Extensionに返す
自然言語処理周りのライブラリが豊富という点からPythonを利用することになったため、PythonのWebフレームワークであるFlaskを用いて実装しました。
Djangoなど別のWebフレームワークの選択肢もありましたが、実装を担当した自分がPythonの開発経験がほとんどなかったこと、APIとしてやりたいことがとてもシンプルだったことを考慮してより軽量なフレームワークを利用しました。
ソースコードはGitHubで公開しているので、詳細は以下を参照してください。
https://github.com/urashin/futakoburakuda/tree/master/textapi
画像生成/配信API
画像生成/配信APIの文章変換APIと同じく、以下をおこなうシンプルなREST APIです。
画像生成API
-
画像の特徴タグの文字列を受け取り、画像生成モジュールに渡すパラメータに変換する
-
変換対象の画像のパスをハッシュ化してユニークなファイル名を生成する
-
画像生成モジュールに、パラメータと、生成したファイル名を渡し、画像をローカルに生成する
-
生成した画像のファイル名をHTTPレスポンスとしてChrome Extensionに返す
画像配信API
- パスパラメータで指定されたファイル名と一致するファイルを返す
画像生成/配信APIも文章変換APIと同じくFlaskを用いて実装しました。
ソースコードはGitHubで公開しているので、詳細は以下を参照してください。
https://github.com/urashin/futakoburakuda/tree/master/imgapi
文章変換ライブラリ
文章変換ライブラリの詳細は以下の記事にまとめてあります。
https://qiita.com/lipt03458/private/8c94b1bfff8d447d7a45
画像生成ライブラリ
画像生成ライブラリの詳細は以下の記事にまとめてあります。
https://qiita.com/urashin/private/580f842a19a90aee93ed