API Update

c323a4cf · Manilka Shalinda · 56052c65 · c323a4cf
Commit c323a4cf authored Feb 15, 2024 by Manilka Shalinda 💻
Show whitespace changes
Inline Side-by-side

Showing with 84 additions and 0 deletions

voicerecognizion/api/index.html voicerecognizion/api/index.html +84 -0

No files found.
--- a/voicerecognizion/api/index.html
+++ b/voicerecognizion/api/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Keyword Spotting Prediction</title>
+</head>
+<body>
+    <h1>Keyword Spotting Prediction</h1>
+    
+    <!-- Upload WAV file -->
+    <h2>Upload WAV File</h2>
+    <input type="file" id="uploadFile" accept=".wav">
+    <button onclick="predictUpload()">Predict from Uploaded File</button>
+    <div id="uploadResult"></div>
+
+    <!-- Microphone -->
+    <h2>Use Microphone</h2>
+    <button onclick="startRecording()">Start Recording</button>
+    <button onclick="stopRecording()">Stop Recording</button>
+    <button onclick="predictMicrophone()">Predict from Microphone</button>
+    <div id="microphoneResult"></div>
+
+    <script>
+        let mediaRecorder;
+        let audioChunks = [];
+
+        async function predictUpload() {
+            const formData = new FormData();
+            const fileInput = document.getElementById('uploadFile');
+            const file = fileInput.files[0];
+            formData.append('file', file);
+
+            const response = await fetch('/predict/upload/', {
+                method: 'POST',
+                body: formData
+            });
+
+            const result = await response.json();
+            const uploadResult = document.getElementById('uploadResult');
+            uploadResult.textContent = `Predicted Keyword from Uploaded File: ${result.predicted_keyword}`;
+        }
+
+        function startRecording() {
+            audioChunks = [];
+            navigator.mediaDevices.getUserMedia({ audio: true })
+                .then(stream => {
+                    mediaRecorder = new MediaRecorder(stream);
+                    mediaRecorder.addEventListener("dataavailable", event => {
+                        audioChunks.push(event.data);
+                    });
+                    mediaRecorder.start();
+                })
+                .catch(error => console.error(error));
+        }
+
+        function stopRecording() {
+            if (mediaRecorder && mediaRecorder.state !== "inactive") {
+                mediaRecorder.stop();
+            }
+        }
+
+        async function predictMicrophone() {
+            if (audioChunks.length === 0) {
+                console.error("No audio data recorded");
+                return;
+            }
+
+            const blob = new Blob(audioChunks);
+            const formData = new FormData();
+            formData.append('audio_file', blob, 'recording.wav');
+
+            const response = await fetch('/predict/microphone/', {
+                method: 'POST',
+                body: formData
+            });
+
+            const result = await response.json();
+            const microphoneResult = document.getElementById('microphoneResult');
+            microphoneResult.textContent = `Predicted Keyword from Microphone: ${result.predicted_keyword}`;
+        }
+    </script>
+</body>
+</html>