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

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

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

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

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

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

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

というわけで

今回作ったクソアプリ

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

悲しい顔や、ビビった顔すると、薄くなって SNSは見れないし、投稿もできません！

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

技術的なお話

レポジトリ
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
クソアプリですし、ログインをさせるのもめんどいと思い、とはいえ違う人感を出したかったので、ランダムで作成。

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

        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 かコメントで教えてください

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