Merge commit 'bb0c5a7bc83aea6f2d79ba1bc8f1f0311afa6f68' into deploy

Author: Kamenleon

.gitignore

@@ -1,5 +1,6 @@
 __pycache__
 config.yml
 
+src/static/webpack/*
 .DS_Store
-
+.venv

README.md

@@ -1,39 +1,70 @@
-# サンプル（プロダクト名）
+# にこトレ！
+
+![ogp](https://user-images.githubusercontent.com/63311737/139258315-50e6f3f6-6d3b-4649-b5f0-4668fd451664.png)
 
-[![IMAGE ALT TEXT HERE](https://jphacks.com/wp-content/uploads/2021/07/JPHACKS2021_ogp.jpg)](https://www.youtube.com/watch?v=LUPQFB4QyVo)
 
 ## 製品概要
+ミライ小町ちゃんと一緒に表情筋のトレーニングができるアプリケーションです．
+
+顔認識機能を搭載し，リアルタイムにミライ小町ちゃんからアドバイスをしてもらえます！
+
 ### 背景(製品開発のきっかけ、課題等）
+コロナ禍で人と会う機会が減り，表情筋を使う機会が大幅に減ってしまっています．
+
+しかし表情筋が衰えると顔が老けて見えてしまったりするなど様々なデメリットがあります．
+
+そんな悩みを解消するために，自宅で簡単に楽しく表情筋を鍛えることができれば良いと考え制作しました．
 ### 製品説明（具体的な製品の説明）
+
+実際にミライ小町ちゃんと一緒に「あいうえお体操」と呼ばれる表情筋全体を鍛えることができるトレーニングを行います．
+顔認識機能を搭載しており，小町ちゃんからアドバイスをもらいながらトレーニングができます．
+- 初心者モード
+  - あいうえお体操のやり方が分からない人に向けてミライ小町ちゃんがやり方を教えてくれながらトレーニングをすることができます
+- 経験者モード
+  - 慣れてきた人向けに実際にサクサクトレーニングを行えるモードです．    
+
+
 ### 特長
-####1. 特長1
-####2. 特長2
-####3. 特長3
+
+#### 1. ミライ小町ちゃんと一緒にトレーニングができる！
+#### 2. 顔認識機能を搭載しリアルタイムにミライ小町ちゃんからアドバイスをもらいながらトレーニングできる！
 
 ### 解決出来ること
+にこトレ！はコロナ禍で使われにくい表情筋のトレーニングをすることができ，顔の老け防止や小顔効果を期待することができます．
 ### 今後の展望
+現状はあいうえお体操にとどまっていますが，今後さらなる体操などを搭載したい他，
+
+顔の表情でコマンドを入力しミライ小町ちゃん遊べるようなミニゲーム等を搭載し，より楽しくトレーニングができるようにしたいと考えています．
 ### 注力したこと（こだわり等）
-* 
-* 
+* ミライ小町ちゃんと一緒にトレーニングができる！という世界観
+* 扱いやすいUI
 
 ## 開発技術
 ### 活用した技術
 #### API・データ
-* 
-* 
+* バンダイナムコ研究所さん提供
+  - ミライ小町の3Dデータ
+  - ミライ小町のボイスサンプルデータ
+
 
 #### フレームワーク・ライブラリ・モジュール
-* 
-* 
+* HTML
+* CSS(Sass)
+* JavaScript( jQuery / Three.js / Vue.js )
+* TypeScript
+* python(Flask)
+* webpack
+* Heroku
+* Unity
 
 #### デバイス
-* 
+* なし
 * 
 
 ### 独自技術
 #### ハッカソンで開発した独自機能・技術
-* 独自で開発したものの内容をこちらに記載してください
-* 特に力を入れた部分をファイルリンク、またはcommit_idを記載してください。
+* JSのclmtrackrによる顔ランドマーク推定機能
+* Three.jsによる3Dモデルの制御
 
 #### 製品に取り入れた研究内容（データ・ソフトウェアなど）（※アカデミック部門の場合のみ提出必須）
 * 

src/app.py

@@ -8,9 +8,19 @@ def index():
     return render_template("top.html", pageTitle='TopPage', css='top')
 
 
+@app.route("/top", methods=["POST"])
+def move_top():
+    return render_template("top.html", pageTitle='TopPage', css='top')
+
+
 @app.route('/face', methods=['POST'])
+def face():
+    return render_template("face.html", pageTitle='FacePage', css='face')
+
+
+@app.route('/faceTest')
 def face_test():
-    return render_template("test_face.html", pageTitle='FacePage', css='face')
+    return render_template("test_face.html", pageTitle='FaceTestPage', css='face_test')
 
 
 @app.route('/emotion')

src/entry/js/components/face_func.js

@@ -33,18 +33,27 @@ function drawLoop() {
   requestAnimationFrame(drawLoop);
 
   // 比較用変数に値が入っているか確認
-  if (positionStorage != null) {
-    console.log(positionStorage[3][0]);
-  }
+  /*if (positionStorage != null) {
+    console.log(positionStorage[3][0]);}
+  */
   // 顔部品の現在位置の取得
   var positions = tracker.getCurrentPosition();
-  console.log(positions[3][0]);
-  /*
-    ここで現在位置と前回位置の計算を行う
-  */
+  
+    //ここで現在位置と前回位置の計算を行う
+    //x方向の値を計算する
+  var faceWidth = positions[11][0]-positions[3][0]
+  var lipWidth = positions[50][0] - positions[44][0]
+  var xMouth = lipWidth/faceWidth
+  
+  var faceHeight = positions[37][1] - positions[7][1]
+  var lipHeightLeft = positions[44][1] - positions[7][1]  
+  var lipHeightRight = positions[50][1] - positions[7][1]
+  var yMouthLeft = lipHeightLeft/faceHeight
+  var yMouthRight = lipHeightRight/faceHeight
+
   // 顔部品の現在位置を比較用変数に代入して値を更新する
-  positionStorage = positions
-  console.log(positionStorage[3][0]);
+  var positionStorage = positions
+  //console.log(positionStorage[3][0]);
 
   // データの表示
   showData(positions);
@@ -58,14 +67,19 @@ drawLoop();
 
 // 顔部品（特徴点）の位置データを表示する showData 関数
 function showData(pos) {
+  /*
   //test
   console.log('右口角の座標');
   console.log('x座標：「'+pos[44][0]+'」y座標：「' + pos[44][1] + '」');
   console.log('左口角の座標');
   console.log('x座標：「' + pos[50][0] + '」y座標：「' + pos[50][1] + '」');
-  console.log('2点の差');
-  console.log('x座標：「' + Math.round(pos[50][0] - pos[44][0]) + '」y座標：「' + Math.round(pos[50][1] - pos[44][1] )+ '」');
-
+  */
+  //console.log('Xの2点');
+  //console.log('x座標：「' + Math.round(pos[50][0] - pos[44][0]) + '」y座標：「' + Math.round(pos[50][1] - pos[44][1] )+ '」');
+  //console.log('x座標：「' + Math.round(pos[11][0] - pos[3][0]) + '」y座標：「' + Math.round(pos[50][1] - pos[3][1] )+ '」');
+  console.log('頬：「' + Math.round(pos[11][0] - pos[3][0]) + '」くちびる：「' + Math.round(pos[50][0] - pos[44][0] )+ '」');
+  console.log('鼻下: 「'+Math.round(pos[37][1] - pos[7][1]) + '」唇: 「'+Math.round(pos[44][1] - pos[7][1])+'」');
+  
   // データの文字列を入れる変数
   var str = "";
   // 全ての特徴点（71個）について

src/entry/js/components/face_vue.js

@@ -0,0 +1,58 @@
+const face = new Vue({
+  el: '#face',
+  // FlaskとVueを共存させるためにDelimiterを変更する
+  delimiters: ["[[", "]]"],
+  data: {
+    modeChoicePage: true,
+    beginnerPage: false,
+    advancedPage: false,
+    startBtn: true,
+    nextBtnArea: false,
+    modelMessage: 'こんにちは！',
+    tutorialText: ['口を全体に大きく「あ」の形に開け、目を最大限に大きく見開き、眉毛をできるだけ上に上げます。', '口を横に大きく「い」の形に開け、顔全体を横に引っ張る意識で思い切り力を入れます。', '口をできるだけすぼめて「う」の形を作り、目はギュッと閉じ、顔のすべてのパーツを中心に集めるつもりで力を入れます。', '口を横に大きく「え」の形に開け、目は大きく見開き、口角を引き上げた位置でキープします。', '口を縦に大きく「お」の形に開け、目は驚いたときのように大きく見開き、顔全体を縦に引っ張る意識で力を入れます。'],
+    advancedText: [
+      { id: '0', text: '・「あ」', check: 'done' },
+      { id: '1', text: '・「い」', check: '' },
+      { id: '2', text: '・「う」', check: '' },
+      { id: '3', text: '・「え」', check: '' },
+      { id: '4', text: '・「お」', check: '' }
+    ],
+    tutorialCountNum: 0,
+    nextBtnMessage: '次へ進む',
+    animationFlag: -5 //ページの初期番号 camera位置修正に使う
+  },
+  methods: {
+    beginnerMode: function () {
+      this.modeChoicePage=false
+      this.beginnerPage = true
+    },
+    advancedMode: function () {
+      this.modeChoicePage=false
+      this.advancedPage=true
+    },
+    trainingStart: function () {
+      this.startBtn = false
+      this.nextBtnArea = true
+      this.animationFlag = 1 //進んだら一に戻す
+    },
+    replayBtn: function () {
+      this.nextBtnArea = false
+      this.startBtn = true
+      //this.animationFlag = -1 //戻ったらマイナス－1
+    },
+    nextTraining: function () {
+      if (this.tutorialCountNum < 4) {
+        this.tutorialCountNum += 1
+        this.replayBtn()
+        if (this.tutorialCountNum == 4) {
+          this.nextBtnMessage = 'おわる'
+        }
+      } else {
+        this.tutorialCountNum = 0
+        this.nextBtnMessage = '次へ進む'
+        this.modeChoicePage = true
+        this.beginnerPage =false
+      }
+    }
+  }
+});

src/entry/js/pages/face.js

@@ -2,4 +2,5 @@
 import '../../ts/index.ts';
 
 // JavaScript
-import '../components/face_func.js';
+import '../components/test.js';
+import '../components/face_vue.js';

src/entry/js/pages/face_test.js

@@ -0,0 +1,5 @@
+// TypeScript
+import '../../ts/index.ts';
+
+// JavaScript
+import '../components/face_func.js';

src/entry/style/components/component.scss

@@ -1,11 +1,20 @@
+/* 変数宣言 */
+$main-color:#ff943d;
+$dark-main-color:#f36d00;
+$bg-thin-color:#ffa963;
+$sub-color: #FFD655;
+$BG-white-thin: #fffffff3;
+$text-color: #494949;
+$grid-size: 12rem;
+
 html {
   height:100%;
-  background: #ff943d;
+  background: $main-color;
 }
 
 body {
   height:100%;
-  background: repeating-linear-gradient(-45deg, #ffa963, 30px, #ff943d 0, #ff943d 120px);
+  background: repeating-linear-gradient(-45deg, $bg-thin-color, 30px, $main-color 0, $main-color 120px);
 }
 
 #modelArea{
@@ -15,6 +24,41 @@ body {
   }
 }
 
+/* model & dialog */
+.modelAndDialogue{
+  width: unset;
+  margin: unset;
+  position: relative;
+  .modelMessage{
+    width: fit-content;
+    max-width: 90%;
+    position: absolute;
+    top: 80%;
+    left: 50%;
+    transform: translateY(-50%) translateX(-50%);
+    background-color: $BG-white-thin;
+    padding: 1.5rem 2rem;
+    border-radius: 10px;
+    font-size: 1.1rem;
+    color: $text-color;
+  }
+}
+
+/* 戻るボタン */
+.back2topBtn{
+  width: fit-content;
+  position: absolute;
+  margin: 2rem;
+  z-index: 500;
+  color: #fff;
+  button{
+    .material-icons{
+      font-weight: bold;
+      font-size: 35px;
+    }
+  }
+}
+
 /* mobileここから */
 @media screen and (max-width: 950px) {
   body {