Merge pull request #239 from Mattk70/TFJS-optimisation

Fixes to TFJS Flask App.
kahst · Jan 26, 2024 · a03e09c · a03e09c
2 parents 17d60c7 + 00ac386
commit a03e09c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/checkpoints/V2.4/BirdNET_GLOBAL_6K_V2.4_Model_TFJS/static/main.js b/checkpoints/V2.4/BirdNET_GLOBAL_6K_V2.4_Model_TFJS/static/main.js
@@ -121,8 +121,9 @@ async function run() {
     const response = await fetch('static/sample.wav');
     const arrayBuffer = await response.arrayBuffer();
 
-    // Decode the audio data
-    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    // Decode the audio data 
+    // - we need to set sampleRate option to prevent AudioContext resampling the file to the its default 44100Hz
+    const audioCtx = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 48000});
     const audioBuffer = await new Promise((resolve, reject) => {
         audioCtx.decodeAudioData(arrayBuffer, resolve, reject);
     });
@@ -181,4 +182,11 @@ async function run() {
 }
 
 // Run the function above after the page is fully loaded
-window.addEventListener('load', run);
+// To avoid CORS security errors, the run function must be called after a user interaction
+// or the AudioContext will be blocked, however, let's only enable the button when the page is loaded
+
+window.addEventListener('load', () => {
+    const button = document.getElementById('button')
+    button.value = 'Ready. Click to run example';
+    button.disabled = false;
+});
diff --git a/checkpoints/V2.4/BirdNET_GLOBAL_6K_V2.4_Model_TFJS/templates/index.html b/checkpoints/V2.4/BirdNET_GLOBAL_6K_V2.4_Model_TFJS/templates/index.html
@@ -5,7 +5,8 @@
 </head>
 <body>
     <h1>BirdNET TFJS Example</h1>
-
+    <!-- Button to permit user's interation, which avoids a CORS error-->
+    <input type="button" id="button" onClick="run()" value="Loading... please wait. This may take a while" disabled />
     <p id="status"></p>
 
     <!-- Load TensorFlow.js -->