PaulCreaserML.github.io/index2.html at master · PaulCreaserML/PaulCreaserML.github.io · 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
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/speech-commands"></script>
  <style>
    .title {
      border: 1px outset black;
      background-color: blue;
      text-align: center;
      padding: 5px;
    }
    .capture {
      border: 1px outset black;
      background-color: lightblue;
      text-align: center;
      padding: 5px;
    }
    .capture_window {
      background-color: lightblue;
      text-align: center;
      padding: 5px;
    }
    .capture_settings {
      background-color: lightblue;
      text-align: center;
      padding-bottom: 100%;
      margin-bottom: -100%;
      padding: 5px;
    }
    .train {
      border: 1px outset black;
      background-color: lightblue;
      text-align: center;
      padding: 5px;
    }
    .test {
      border: 1px outset black;
      background-color: lightblue;
      text-align: center;
      padding: 5px;
    }
    .console {
      border: 1px outset black;
      background-color: lightblue;
      text-align: center;
      padding: 5px;
    }
  </style>
</head>
<body>
  <title>Simple Training Demo</title>
  <div class="title">
    <h1 align="center">Audio Training Demo</h1>
  </div>
  <div class="capture" style="overflow: hidden;">
    <div class="capture_window" style="width: 696px; float: left;">
      <h2>Audio Capture</h2>
      <canvas id="myCanvas" width="696" height="150"></canvas>
      <br/><br/>
      <button id="button0" onclick="collect(0)">Left</button>
      <button id="button1" onclick="collect(1)">Right</button>
      <button id="button2" onclick="collect(2)">Background Noise</button>
      <button id="captureReset" onclick="captureReset()">Capture Reset</button>
    </div>
    <div class="capture_settings" style="margin-left: 200px;" >
      <h2>Settings</h2>
      Threshold: <input id="thresholdDb" type="number" min="-60" max="-20" value="-45" onchange="thresholdChange()">
      dB Change Threshold: <input id="changeThresholdDb" type="number" min="10" max="40" value="30" onchange="changeThresholdChange()"> dB
    <h2>Status</h2>
      Current peak: <button id="currentVolume">-</button> dB
      <br/><br/>
      <button id="captureCount">Count</button>
      <button id="captureCountValue">0</button>
    </div>
  </div>

  <div class="train" style=" overflow: hidden;">
    <div class="train_control" style="width: 696px; float: left;">
      <h2>Model Training</h2>
      <button id="train"  onclick="train()">Start</button>
      Epoch Limit: <input id="epochLimit" type="number" min="10" max="20" value="20" onchange="epochChange()">
      <button id="epochs">Epochs: 0 of ?</button>
      <button id="accuracy">Accuracy: 0</button>
    </div>
    <div class="model" style="margin-left: 200px;">
      <h2>Model Options</h2>
      Model Num: <input id="modelNum" type="number" min="0" max="4" value="0" onchange="modelNumChange()">
      <button id="saveModel" onclick="saveModel()">Save Model</button>
      <button id="loadModel" onclick="loadModel()">Load Model</button>
    </div>
  </div>

  <div class="test" style="overflow: hidden;">
    <div class="test_control" style="width: 696px; float: left;">
      <h2>Test Model</h2>
      <button id="listen" onclick="listen()">Listen</button>
      <input type="range" id="output" min="0" max="10" step="0.1">
      <button id="reset"  onclick="reset()">Reset</button>
      <br/><br/>
      <button id="dispButton0">Left</button>
      <button id="dispButton2">Background Noise</button>
      <button id="dispButton1">Right</button>
    </div>
    <div class="test_settings"  style="margin-left: 200px;">
      <h2>Settings</h2>
      Threshold: <input id="thresholdPer" type="number" min="70" max="99" value="80" onchange="thresholdPerChange()">%
      Model: <button id="modelNumButton">None</button>
    </div>
  </div>
  <div class="console" id="console"></div>
  <script src="demo4.js"></script>
</body>
</html>