LoginSignup
2

More than 3 years have passed since last update.

TensorFlowJs で笑顔じゃないと使えないSNS作ってみた

Last updated at Posted at 2020-12-10

昨日9日目は@wintia さんの AzureKinectで肩乗りペットでしたね。
あなたもクソは肩に乗せましたか?

くそは肩に乗せてたまま、10日目に参りましょう!

みなさんのSNSはポジティブな投稿で溢れてますか?

さて突然ですが、みなさんのSNSはポジティブな投稿で溢れてますか?

ポジティブのタイムラインになるのであれば、ポジティブになれるらしいんですよ!

僕がポジティブじゃなくなったら、僕のせいじゃなくて、タイムラインのせいじゃん!!

ポジティブタイムラインのSNSを使いたいですよね!

どうしたら、、ポジティブにな投稿を、、ってことで見つけたアイデアはこちら。(FBの埋め込み方法わからぬ)
https://www.facebook.com/1047637624/videos/10221576486775332/

笑顔にならないと開かない扉!なるほど。これだ!

笑顔で、ネガティブなこと、投稿できるやつおらんでしょ?!

というわけで

今回作ったクソアプリ

↓↓↓↓↓↓↓↓↓↓↓
https://emoemo.netlify.app/
↑↑↑↑↑↑↑↑↑↑↑
ロード最適化してないから、クソ重いよ!w

127.0.0.1_5500_index.html(iPhone 6_7_8).png

悲しい顔や、ビビった顔すると、薄くなって SNSは見れないし、投稿もできません!
Screen Shot 2020-12-10 at 14.12.03.png

みんな笑顔で投稿するんだ!

技術的なお話

レポジトリ
https://github.com/yahsan2/emoemo

笑顔の判定

基本的にはこちらの記事を参考に vue に置き換えてつくっています。
github にコードも公開されていて非常に勉強になりました。
https://book.mynavi.jp/manatee/detail/id=99887

ですので、モデル自体はこの中の記事で紹介されている

感情認識の学習済みモデルは公開レポジトリoarriaga/face_classification - GitHub

を利用していますし、さらに TensorFlowJS が読み込み可能な形にコンバートされたモデルとして利用させていただいてます。
https://github.com/PonDad/manatee/tree/master/2_emotion_recognition-master

ですので、学習自体はやってない!モデルがすでにあるものを使うとめちゃくちゃ楽チンですね。

こんな感じで 感情のデータが返ってくるので、あとは probability 利用して、opacity などを調整してます。

      let prediction = await this.model.predict(tensor).data();
      this.results = Array.from(prediction).map((p,i)=>{
        return {
            probability: p,
            color: COLORS[i],
            emoji: EMOJIS[i],
            className: CLASSES[i],
            classNumber: i
        };
      }).sort((a,b)=>{
          return b.probability - a.probability;
      }).slice(0,6);

詳細はコードを見たらわかると思うよ!

firebase

で作ってます。よく巷に溢れてやつ。

詳細はコードを見たらわかると思うよ!

その他

フレームワーク: https://vuetifyjs.com/en/
vue で俊足で作るなら楽チンなので利用するが、今回はあんま意味なかった気もする。

アバター: https://avataaars.com
クソアプリですし、ログインをさせるのもめんどいと思い、とはいえ違う人感を出したかったので、ランダムで作成。

名前:くそアプリですし、ログインさせるのも、名前書くのもめんどいと思い、3匹のこぶた形式でランダム作成

        name: function() {
          const sizes = ['', 'おお', '']
          const animals = ['クマ', 'ネコ', 'ブタ','ネズミ','イヌ','ゾウ','キリン', 'タヌキ', '炭治郎']

          const animal = animals[Math.floor(Math.random() * animals.length)];
          const size = sizes[Math.floor(Math.random() * sizes.length)];
          const count = Math.floor(Math.random() * 10) + 1
          return `${count} 匹の${size}${animal}さん`
        }()

詳細はコードを見たらわかると思うよ!

まとめ

アドベントカレンダー間に合わないので、雑な技術的説明 de とりあえず公開!w
何か気になるところ教えて欲しいことあれば返事するので、twitter かコメントで教えてください

皆さんも笑顔で、ハッピーなクソアプリライフを!
明日も楽しみですね!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2