Added experimental tensorflowjs code

AnanthVivekanand · Dec 7, 2020 · 660fc44 · 660fc44
1 parent efb6e4a
commit 660fc44
Show file tree

Hide file tree

Showing 4 changed files with 145 additions and 0 deletions.
diff --git a/GUI/templates/home.html b/GUI/templates/home.html
@@ -0,0 +1,144 @@
+ <!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
+<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
+
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
+<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/js/plugins/piexif.min.js" type="text/javascript"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/js/plugins/sortable.min.js" type="text/javascript"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/themes/fas/theme.min.js"></script>
+<script src="https://unpkg.com/wavesurfer.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/2.0.4/plugin/wavesurfer.spectrogram.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
+
+
+
+<title>Image Recognition Server</title>
+  <body class style="margin:10px;padding:10px">
+    <div class="page-header" id="banner">
+      <div class="row">
+        <div class="col-lg-8 col-md-7 col-sm-6">
+          <h3>Audio Classification</h3>
+          <p class="lead">Upload a .wav file and the Convolutional Neural Network model will classify it into one of ten catagories.</p>
+        </div>
+      </div>
+      <form action="" method=post enctype=multipart/form-data>
+        <input id="input-b1" name="input-b1" type="file" class="file" data-browse-on-zone-click="true">
+    </form>
+
+
+    </div>
+    <p style="margin-bottom:2cm;"></p>
+    <div class="row">
+        <div class="">
+          <div class="page-header">
+            <h3 id="tables">Result</h3>
+          </div>
+          <div class="bs-component">
+            <table class="table table-hover">
+                <tr class="table-active">
+                  <th scope="col">Waveform</th>
+                  <th scope="col">Predict</th>
+                  <th scope="col">Visualization</th>
+                </tr>
+                <tr>
+                    <td style="width:40vw"> 
+                      <div id="waveform"></div>
+                      <div id="wave-spectrogram"></div>
+                      <br>
+                      <button class="btn btn-primary" onclick="wavesurfer.playPause()">Play audio</button>
+                    </td>
+                    <td style="width: 20vw"><pre id="labelOutput"> {{ label }} </pre></td>
+                    <td style="width: 40vw"><canvas id="myChart" width="100%", height="50%"></canvas></td>
+                  </tr>
+            </table> 
+        </div>
+      </div>
+<script>
+
+function format(s) {
+  return s
+  s = JSON.stringify(s);
+  s.replaceAll("{", "<br>    ");
+  s.replaceAll("}", "<br>")
+  return s
+}
+
+var wavesurfer = WaveSurfer.create({
+    container: '#waveform',
+    // your options here
+    waveColor: '#007bff',
+    plugins: [
+       WaveSurfer.spectrogram.create({
+            wavesurfer: wavesurfer,
+            container: "#wave-spectrogram",
+            fftSamples: 512,
+            labels: true
+        })
+    ]
+});
+
+wavesurfer.load('{{audiosource}}');
+
+var ctx = document.getElementById('myChart').getContext('2d');
+data = JSON.parse(document.getElementById("labelOutput").innerHTML.replaceAll("'", '"'))
+document.getElementById("labelOutput").innerHTML = JSON.stringify(data, undefined, 2);
+var chart = new Chart(ctx, {
+    // The type of chart we want to create
+    type: 'bar',
+
+    // The data for our dataset
+    data: {
+        labels: Object.keys(data),
+        datasets: [{
+            label: 'Model Prediction',
+            backgroundColor: '#007bff',
+            data: Object.values(data)
+        }]
+    },
+
+    // Configuration options go here
+    options: {
+      scales: {
+        yAxes: [{
+          scaleLabel: {
+              display: true,
+              labelString: 'Confidence',
+          },
+          type: 'logarithmic',
+          position: 'left',
+          ticks: {
+              min: 0, //minimum tick
+              max: 1, //maximum tick
+              callback: function (value, index, values) {
+                  return Number(value.toString());//pass tick values as a string into Number function
+              }
+          },
+          afterBuildTicks: function (chartObj) { //Build ticks labelling as per your need
+              chartObj.ticks = [];
+              chartObj.ticks.push(0.00001);
+              chartObj.ticks.push(0.0001);
+              chartObj.ticks.push(0.001);
+              chartObj.ticks.push(0.1);
+              chartObj.ticks.push(1);
+          }
+        }]
+      }
+    }
+});
+
+</script>
+
+  </body>
diff --git a/GUI/tfjs/group1-shard1of2.bin b/GUI/tfjs/group1-shard1of2.bin
diff --git a/GUI/tfjs/group1-shard2of2.bin b/GUI/tfjs/group1-shard2of2.bin