speechCommandsJS/index.html at master · codeiaks/speechCommandsJS · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Getting Started with ml5.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- p5 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
    <!-- ml5 -->
    <script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js"></script>
    <link rel="stylesheet" href="myStyle.css" type="text/css">
  </head>
  <body>
    <div class="centered">
      <h1>Result</h1>
      <p><b><u>Speech Commands: </u></b>Requires microphone access</p>
      <p>The following are the words it should recognize:</p>
      <ul id="list">
        <li>Zero to Nine,</li>
        <li>Up,</li>
        <li>Down,</li>
        <li>Left,</li>
        <li>Right,</li>
        <li>Go,</li>
        <li>Stop,</li>
        <li>Yes,</li>
        <li>No</li>
      </ul>
      <hr>
      <p id="showResults"></p>
      <img id="keywords" src="./images/placeholder.png" width="250" height="250" alt="the results">
      <hr>
    </div>
    <script>
      var keyWords = {
        "zero": "./images/zero.png",
        "one": "./images/one.png",
        "two": "./images/two.png",
        "three": "./images/three.png",
        "four": "./images/four.png",
        "five": "./images/five.png",
        "six": "./images/six.png",
        "seven": "./images/seven.png",
        "eight": "./images/eight.png",
        "nine": "./images/nine.png",
        "up": "./images/up.png",
        "down": "./images/down.png",
        "left": "./images/left.png",
        "right": "./images/right.png",
        "go": "./images/go.png",
        "stop": "./images/stop.png",
        "yes": "./images/yes.png",
        "no": "./images/no.png"
      };

      console.log('ml5 version:', ml5.version);
      const options = { probabilityThreshold: 0.85 };
      const classifier = ml5.soundClassifier('SpeechCommands18w', options, modelReady);

      function modelReady(){
        classifier.classify(gotResult);
      }

      function gotResult(error, result){
        if (error){
          console.log(error);
          return;
        }
        var answer = result[0].label;
        upperAnswer = answer.toUpperCase();

        document.getElementById("showResults").innerHTML = upperAnswer;
        document.getElementById("keywords").src = keyWords[answer];
        console.log(keyWords[answer]);
        console.log(result[0].label);

      }
    </script>
    <canvas class="background"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js"></script>
  </body>
  <script>
    window.onload = function(){
      Particles.init({
        selector: '.background',
        connectParticles: true,
        color: '#FF0000'
      });
    };
  </script>
</html>