WhyIsEveryoneAngry/index.html at master · dhamberlin/WhyIsEveryoneAngry · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Why Is Everyone Angry?</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="styles/reset.css">
    <link rel="stylesheet" href="styles/styles.css">
    <link rel="stylesheet" href="styles/main.css" type="text/css" media="all">

  </head>
  <body>

    <div class="top">
      <h1 class="title">Why Is Everyone Angry?</h1>
      <div class="record">
        <h2>Recording</h2>
        <button id="startBtn" disabled="disabled" onclick="startRecordingFrames()">Start</button>
        <button id="stopBtn" disabled="disabled" onclick="stopRecordingFrames()">Stop</button>
      </div>
    </div>

    <div class="stream">

      <div class="video">
        <h2>Current Video</h2>
        <div class="videoCanvas">
          <div class="camera">
            <video id="video">Video stream not available.</video>
          </div>
        </div>
        <span id="timer">Time: 0:00</span>
      </div>
      <canvas id="canvas"></canvas>

      <div class="speech">
        <h2>Speech</h2>
        <div class="speechCanvas" id="speechCanvas"></div>
      </div>

    </div>

    <div class="results">

      <div class="charts">
        <div class="timeChart">
          <h2>Sentiment Analysis: Audience Reaction</h2>
          <div class="timeChartCanvas" id="time-series"></div>
        </div>
        <div class="avgChart">
          <h2>Average Sentiment (Entire Presentation)</h2>
          <div class="avgChartCanvas" id="bar-chart"></div>
        </div>
      </div>

      <div class="frame">
        <div class="framePicture">
          <h2>Current Frame</h2>
          <div class="framePictureCanvas">
            <img src="" />
          </div>
        </div>
        <div class="frameInfo">
          <h2>Average Sentiment (Entire Presesntation)</h2>
          <div class="frameInfoCanvas" id="gauge-chart"></div>
        </div>
      </div>

    </div>

    <table style="display:none" width="100%"> <tr> <td></td><td> <h1 style="font-weight:500;">Speech Recognition</h1> <h2 style="font-weight:500;">Microsoft Cognitive Services</h2> </td></tr><tr> <td align="right"><a href="https://www.microsoft.com/cognitive-services/en-us/sign-up" target="_blank">Subscription</a>:</td><td><input id="key" type="text" size="40" value="70c52b11c9d948088d7e85a212ce9538"></td></tr><tr> <td align="right">Laguage:</td><td align="left"> <select id="languageOptions"> <option value="zh-CN">Chinese - CN</option> <option value="en-GB">English - GB</option> <option value="en-US" selected="selected">English - US</option> <option value="fr-FR">French - FR</option> <option value="de-DE">German - DE</option> <option value="it-IT">Italian - IT</option> <option value="es-ES">Spanish - ES</option> <option value="ar-EG">Arabic - EG</option> </select> </td></tr><tr> <td align="right">Format:</td><td align="left"> <select id="formatOptions"> <option value="Simple" selected="selected">Simple Result</option> <option value="Detailed">Detailed Result</option> </select> </td></tr><tr> <td></td><td> <button id="startBtn" disabled="disabled">Start</button> <button id="stopBtn" disabled="disabled">Stop</button> </td></tr><tr> <td></td><td>Current hypothesis: <span id="hypothesisDiv"></span></td></tr><tr> <td></td><td> <textarea id="resultDiv" style="width:500px;height:200px"></textarea> </td></tr><tr> <td></td><td> <textarea id="phraseDiv" style="width:500px;height:200px"></textarea> </td></tr><tr> <td></td><td>Status: <span id="statusDiv"></span></td></tr></table>

    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>
      <!-- The SDK has a dependency on requirejs (http://requirejs.org/). -->
      <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>
      <script src="https://www.gstatic.com/charts/loader.js"></script>
      <script>
          // Special handling to let the sample work when loaded directly from file system.
          if (window.location.protocol == "file:") {
              document.write('\<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js">\<\/script>');
          }
      </script>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
      <script src="scripts/capture.js"></script>
      <script type="text/javascript">

      // Store all image data here
      let imageData = [];

      // record thread
      let recordInterval = null;

      // Call upload photo to server
      function sendImageDataToServer(data) {
        let frame = {time: Date.now() - window.startTime, photoId: null, emotions: null}

        var request = new XMLHttpRequest();
        request.open('POST', '/api/upload', true);

        // On Receive Response
        request.onreadystatechange = function() {
          if (request.readyState == XMLHttpRequest.DONE) {
            // do something with response text here
            let result = JSON.parse(request.responseText);

            if(typeof result.result === 'string') {
              console.log('Could not get data from azure')
            } else {
              // console.log('Received', result);
              frame.photoId = result.photoId;
              frame.emotions = result.result;
              imageData.push(frame);
              drawCharts();
              $('.framePictureCanvas img').attr('src', `photos/${imageData.length - 1}.png`)
              // console.log('Total image date', imageData);
            }
          }
        }
        request.send(data);
      }

      function startRecordingFrames(time = 4000) {
        console.log('startRecordingFrames', time);
        window.startTime = Date.now();
        fetch('/upload/reset').then(() => {
          imageData = [];
          takepicture();
          recordInterval = setInterval(takepicture, time);
        })
      }

      function stopRecordingFrames() {
        console.log('stopRecordingFrames');
        clearInterval(recordInterval);
      }
      </script>

      <!-- SDK REFERENCE -->
      <script src="scripts/speech.browser.sdk-min.js"></script>
      <script src="scripts/speech.js"></script>
      <script src="scripts/charts.js"></script>
  </body>
</html>

<!-- <div class="phrase">
  <div class="timestamp">
    <span>0:00</span>
  </div>
  <div class="content">
    <span>This is a sample text</span>
  </div>
</div> -->