Vue

by morphcast

HTML

<script src="https://ai-sdk.morphcast.com/dev/ai-sdk.js"></script>
<div id="app">
<div><p>Module FACE_EMOTION_HD (dev environment)</p></div>
<div class="wrapper" :class="{black:black}">
  <div class="centered">
    <div class="emo angry">
      <span>Angry</span>
      <div class="level">
        <div class="lvl" :style="{height : level.angry+'%'}"></div>
      </div>
    </div>
    <div class="emo disgust">
      <span>Disgust</span>
      <div class="level">
        <div class="lvl" :style="{height : level.disgust+'%'}"></div>
      </div>
    </div>
    <div class="emo fear">
      <span>Fear</span>
      <div class="level">
        <div class="lvl" :style="{height : level.fear+'%'}"></div>
      </div>
    </div>
    <div class="emo happy">
      <span>Happy</span>
      <div class="level">
        <div class="lvl" :style="{height : level.happy+'%'}"></div>
      </div>
    </div>
    <div class="emo sad">
      <span>Sad</span>
      <div class="level">
        <div class="lvl" :style="{height : level.sad+'%'}"></div>
      </div>
    </div>
    <div class="emo surprise">
      <span>Surprise</span>
      <div class="level">
        <div class="lvl" :style="{height : level.surprise+'%'}"></div>
      </div>
    </div>
    <div class="emo neutral">
      <span>Neutral</span>
      <div class="level">
        <div class="lvl" :style="{height : level.neutral+'%'}"></div>
      </div>
    </div>
  </div>
</div>
</div>

CSS

#app {
      height: 100%;
      width: 100%;
    }

    .centered {
      position: absolute;
      top: 40px;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      max-width: 400px;
      display: flex;
      justify-content: space-evenly;
      height: calc(100% - 30px);
    }

    .emo {
      width: 40px;
      height: 100%;
      flex: 0 0 40px;
    }

    .emo span {
      display: block;
      width: 100%;
      text-align: center;
      color: black;
      font-size: 13px;
      font-weight: 300;
    }

    .emo .level {
      width: 6px;
      margin: 10px 17px;
      background-color: darkgray;
      position: relative;
      height: 80%
    }

    .emo .level .lvl {
      position: absolute;
      width: 100%;
      bottom: 0;

      transition: height 200ms;
    }

    .emo.angry .lvl {
      background-color: #e60f28;
    }

    .emo.disgust .lvl {
      background-color: #27d534;
    }

    .emo.fear .lvl {
      background-color: #8b4f92;
    }

    .emo.happy .lvl {
      background-color: #ffea00;
    }

    .emo.sad .lvl {
      background-color: #64b5e6;
    }

    .emo.surprise .lvl {
      background-color: #ffbbc7;
    }

    .emo.neutral .lvl {
      background-color: #3e3e3e;
    }

    .emo img {
      width: 28px;
      margin: 0 6px;
    }

    .black .emo span {
      color: white;
    }

    @media screen and (max-width: 768px) {
      .centered {
        height: calc(100% - 10px);
      }

      .emo .level {
        margin: 5px 17px;
      }
    }

JavaScript

// SDK Demo settings
const fps_time_period = 142;
const emo_smoothness = 0.5;

CY.loader().addModule(CY.modules().FACE_EMOTION_HD.name, {smoothness: emo_smoothness})
          .delayMs(fps_time_period)
          .load().then(({start})=>{
          	start();
          });
          

          
let vue = new Vue({
  el: "#app",
  props:["black", "emotions"],
  data: {
    level: {
      angry: 0,
      disgust: 0,
      fear: 0,
      happy: 0,
      sad: 0,
      surprise: 0,
      neutral: 1
    }
  },
  methods: {
    init() {

    }
  }
});

window.addEventListener('CY_FACE_EMOTION_HD_RESULT', (evt) => {

  vue.level.angry = evt.detail.output.emotion.Angry * 100;
  vue.level.disgust = evt.detail.output.emotion.Disgust * 100;
  vue.level.fear = evt.detail.output.emotion.Fear * 100;
  vue.level.happy = evt.detail.output.emotion.Happy * 100;
  vue.level.sad = evt.detail.output.emotion.Sad * 100;
  vue.level.surprise = evt.detail.output.emotion.Surprise * 100;
  vue.level.neutral = evt.detail.output.emotion.Neutral * 100;
});