brilliantsole 0.0.27 → 0.0.29

package/examples/graph/script.js

@@ -12,7 +12,9 @@ window.device = device;
 // GET DEVICES
 
 /** @type {HTMLTemplateElement} */
-const availableDeviceTemplate = document.getElementById("availableDeviceTemplate");
+const availableDeviceTemplate = document.getElementById(
+  "availableDeviceTemplate"
+);
 const availableDevicesContainer = document.getElementById("availableDevices");
 /** @param {BS.Device[]} availableDevices */
 function onAvailableDevices(availableDevices) {
@@ -24,19 +26,24 @@ function onAvailableDevices(availableDevices) {
       const availableDeviceContainer = availableDeviceTemplate.content
         .cloneNode(true)
         .querySelector(".availableDevice");
-      availableDeviceContainer.querySelector(".name").innerText = availableDevice.name;
-      availableDeviceContainer.querySelector(".type").innerText = availableDevice.type;
+      availableDeviceContainer.querySelector(".name").innerText =
+        availableDevice.name;
+      availableDeviceContainer.querySelector(".type").innerText =
+        availableDevice.type;
 
       /** @type {HTMLButtonElement} */
-      const toggleConnectionButton = availableDeviceContainer.querySelector(".toggleConnection");
+      const toggleConnectionButton =
+        availableDeviceContainer.querySelector(".toggleConnection");
       toggleConnectionButton.addEventListener("click", () => {
         device.connectionManager = availableDevice.connectionManager;
         device.reconnect();
       });
       device.addEventListener("connectionStatus", () => {
-        toggleConnectionButton.disabled = device.connectionStatus != "notConnected";
+        toggleConnectionButton.disabled =
+          device.connectionStatus != "notConnected";
       });
-      toggleConnectionButton.disabled = device.connectionStatus != "notConnected";
+      toggleConnectionButton.disabled =
+        device.connectionStatus != "notConnected";
 
       availableDevicesContainer.appendChild(availableDeviceContainer);
     });
@@ -75,7 +82,9 @@ device.addEventListener("connectionStatus", () => {
     case "connected":
     case "notConnected":
       toggleConnectionButton.disabled = false;
-      toggleConnectionButton.innerText = device.isConnected ? "disconnect" : "connect";
+      toggleConnectionButton.innerText = device.isConnected
+        ? "disconnect"
+        : "connect";
       break;
     case "connecting":
     case "disconnecting":
@@ -99,15 +108,20 @@ function onConnectedDevice(connectedDevice) {
 // SENSOR CONFIGURATION
 
 /** @type {HTMLTemplateElement} */
-const sensorTypeConfigurationTemplate = document.getElementById("sensorTypeConfigurationTemplate");
+const sensorTypeConfigurationTemplate = document.getElementById(
+  "sensorTypeConfigurationTemplate"
+);
 BS.ContinuousSensorTypes.forEach((sensorType) => {
-  const sensorTypeConfigurationContainer = sensorTypeConfigurationTemplate.content
-    .cloneNode(true)
-    .querySelector(".sensorTypeConfiguration");
-  sensorTypeConfigurationContainer.querySelector(".sensorType").innerText = sensorType;
+  const sensorTypeConfigurationContainer =
+    sensorTypeConfigurationTemplate.content
+      .cloneNode(true)
+      .querySelector(".sensorTypeConfiguration");
+  sensorTypeConfigurationContainer.querySelector(".sensorType").innerText =
+    sensorType;
 
   /** @type {HTMLInputElement} */
-  const sensorRateInput = sensorTypeConfigurationContainer.querySelector(".sensorRate");
+  const sensorRateInput =
+    sensorTypeConfigurationContainer.querySelector(".sensorRate");
   sensorRateInput.value = 0;
   sensorRateInput.max = BS.MaxSensorRate;
   sensorRateInput.step = BS.SensorRateStep;
@@ -117,15 +131,20 @@ BS.ContinuousSensorTypes.forEach((sensorType) => {
     device.setSensorConfiguration({ [sensorType]: sensorRate });
   });
 
-  sensorTypeConfigurationTemplate.parentElement.appendChild(sensorTypeConfigurationContainer);
+  sensorTypeConfigurationTemplate.parentElement.appendChild(
+    sensorTypeConfigurationContainer
+  );
   sensorTypeConfigurationContainer.dataset.sensorType = sensorType;
 });
 /** @param {BS.Device} device */
 function onSensorConfiguration(device) {
-  for (const sensorType in device.sensorConfiguration) {
-    const sensorRate = device.sensorConfiguration[sensorType];
+  BS.SensorTypes.forEach((sensorType) => {
+    const sensorRate = device.sensorConfiguration[sensorType] ?? 0;
+
     /** @type {HTMLInputElement?} */
-    const input = document.querySelector(`.sensorTypeConfiguration[data-sensor-type="${sensorType}"] .input`);
+    const input = document.querySelector(
+      `.sensorTypeConfiguration[data-sensor-type="${sensorType}"] .input`
+    );
     if (input) {
       input.value = sensorRate;
     }
@@ -146,17 +165,21 @@ function onSensorConfiguration(device) {
         chartContainer.style.display = display;
       });
     }
-  }
+  });
 }
 /** @param {BS.Device} device */
 function updateSensorRateInputs(device) {
-  for (const sensorType in device.sensorConfiguration) {
+  BS.SensorTypes.forEach((sensorType) => {
     /** @type {HTMLInputElement?} */
-    const input = document.querySelector(`[data-sensor-type="${sensorType}"] .input`);
+    const input = document.querySelector(
+      `[data-sensor-type="${sensorType}"] .input`
+    );
     if (input) {
-      input.disabled = !device.isConnected;
+      const containsSensorType = sensorType in device.sensorConfiguration;
+      input.closest("label").style.display = containsSensorType ? "" : "none";
+      input.disabled = !device.isConnected || !containsSensorType;
     }
-  }
+  });
 }
 
 // GRAPHING
@@ -276,7 +299,9 @@ window.chartContainers = chartContainers;
 /** @type {HTMLTemplateElement} */
 const chartTemplate = document.getElementById("chartTemplate");
 BS.ContinuousSensorTypes.forEach((sensorType) => {
-  const chartContainer = chartTemplate.content.cloneNode(true).querySelector(".chart");
+  const chartContainer = chartTemplate.content
+    .cloneNode(true)
+    .querySelector(".chart");
   chartsContainer.appendChild(chartContainer);
   chartContainers[sensorType] = chartContainer;
 
@@ -299,6 +324,12 @@ BS.ContinuousSensorTypes.forEach((sensorType) => {
     case "rotation":
       axesLabels = ["x", "y", "z", "w"];
       break;
+    case "orientation":
+      axesLabels = ["heading", "pitch", "roll"];
+      break;
+    case "barometer":
+      axesLabels = ["barometer"];
+      break;
     default:
       console.warn(`uncaught sensorType "${sensorType}"`);
       return;
@@ -323,36 +354,53 @@ BS.ContinuousSensorTypes.forEach((sensorType) => {
       yRange = { min: -360, max: 360 };
       break;
     case "magnetometer":
-      // FILL
+      yRange = { min: -100, max: 100 };
       break;
     case "gameRotation":
     case "rotation":
       yRange = { min: -1, max: 1 };
       break;
+    case "orientation":
+      yRange = { min: -360, max: 360 };
+      break;
   }
 
   switch (sensorType) {
     case "gameRotation":
     case "rotation":
       {
-        const eulerChartContainer = chartTemplate.content.cloneNode(true).querySelector(".chart");
+        const eulerChartContainer = chartTemplate.content
+          .cloneNode(true)
+          .querySelector(".chart");
         chartsContainer.appendChild(eulerChartContainer);
         chartContainers[`${sensorType}.euler`] = eulerChartContainer;
-        createChart(eulerChartContainer.querySelector("canvas"), sensorType + "Euler", ["yaw", "pitch", "roll"], {
-          min: -Math.PI,
-          max: Math.PI,
-        });
+        createChart(
+          eulerChartContainer.querySelector("canvas"),
+          sensorType + "Euler",
+          ["yaw", "pitch", "roll"],
+          {
+            min: -Math.PI,
+            max: Math.PI,
+          }
+        );
       }
       break;
     case "pressure":
       {
-        const pressureMetadataChartContainer = chartTemplate.content.cloneNode(true).querySelector(".chart");
+        const pressureMetadataChartContainer = chartTemplate.content
+          .cloneNode(true)
+          .querySelector(".chart");
         chartsContainer.appendChild(pressureMetadataChartContainer);
         chartContainers["pressureMetadata"] = pressureMetadataChartContainer;
-        createChart(pressureMetadataChartContainer.querySelector("canvas"), "pressureMetadata", ["sum", "x", "y"], {
-          min: 0,
-          max: 1,
-        });
+        createChart(
+          pressureMetadataChartContainer.querySelector("canvas"),
+          "pressureMetadata",
+          ["sum", "x", "y"],
+          {
+            min: 0,
+            max: 1,
+          }
+        );
       }
       break;
   }
@@ -361,7 +409,12 @@ BS.ContinuousSensorTypes.forEach((sensorType) => {
   const euler = new THREE.Euler();
   euler.reorder("YXZ");
 
-  createChart(chartContainer.querySelector("canvas"), sensorType, axesLabels, yRange);
+  createChart(
+    chartContainer.querySelector("canvas"),
+    sensorType,
+    axesLabels,
+    yRange
+  );
 });
 
 /** @param {BS.Device} device */
@@ -437,12 +490,16 @@ if (false)
 
 const websocketClient = new BS.WebSocketClient();
 /** @type {HTMLButtonElement} */
-const toggleServerConnectionButton = document.getElementById("toggleServerConnection");
+const toggleServerConnectionButton = document.getElementById(
+  "toggleServerConnection"
+);
 toggleServerConnectionButton.addEventListener("click", () => {
   websocketClient.toggleConnection();
 });
 websocketClient.addEventListener("isConnected", () => {
-  toggleServerConnectionButton.innerText = websocketClient.isConnected ? "disconnect from server" : "connect to server";
+  toggleServerConnectionButton.innerText = websocketClient.isConnected
+    ? "disconnect from server"
+    : "connect to server";
 });
 websocketClient.addEventListener("connectionStatus", () => {
   let disabled;

package/examples/microphone/gender.js

@@ -0,0 +1,54 @@
+import { pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.2.4";
+
+import { registerModel } from "./utils.js";
+
+let classifier = undefined;
+let isRunning = false;
+
+const createClassifier = async () => {
+  console.log("creating classifier");
+  classifier = await pipeline(
+    "audio-classification",
+    "Xenova/wav2vec2-large-xlsr-53-gender-recognition-librispeech"
+  );
+  console.log("created classifier", classifier);
+};
+
+registerModel(
+  "gender",
+  () => {
+    if (!classifier) {
+      createClassifier();
+    }
+  },
+  () => {},
+  async (microphoneRecordingAudio, mediaResultsElement) => {
+    if (!classifier) {
+      console.error("classifier not created yet");
+      return;
+    }
+    if (isRunning) {
+      return;
+    }
+    isRunning = true;
+    const output = await classifier(microphoneRecordingAudio.src);
+    isRunning = false;
+
+    console.log("output", output);
+    let maxLabel, maxScore;
+    output.forEach(({ label, score }) => {
+      maxLabel ??= label;
+      maxScore ??= score;
+      if (score > maxScore) {
+        maxScore = score;
+        maxLabel = label;
+      }
+    });
+    mediaResultsElement.innerText = `${maxLabel}: ${maxScore.toFixed(3)}`;
+  }
+);
+
+const sampleOutput = [
+  { label: "male", score: 0.9976564049720764 },
+  { label: "female", score: 0.002343568252399564 },
+];

package/examples/microphone/index.html

@@ -0,0 +1,102 @@
+<html>
+  <head>
+    <title>Microphone | BrilliantSole JavaScript SDK</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
+    <script src="https://unpkg.com/peaks.js/dist/peaks.js"></script>
+    <script type="module" src="./script.js"></script>
+    <script type="module" src="./whisper.js"></script>
+    <script type="module" src="./whisper-realtime.js"></script>
+    <script type="module" src="./gender.js"></script>
+  </head>
+  <style>
+    #zoomview-container,
+    #overview-container {
+      width: 1000px;
+      height: 100px;
+    }
+    .highlighted {
+      color: green;
+    }
+  </style>
+  <body>
+    <nav>
+      <a href="../../">home</a>
+    </nav>
+
+    <h1>Microphone | BrilliantSole JavaScript SDK</h1>
+
+    <button id="toggleConnection">connect</button>
+    <label>
+      model type
+      <select id="modelType">
+        <optgroup label="model type">
+          <option>none</option>
+        </optgroup>
+      </select>
+    </label>
+    <br />
+
+    <label><b>status:</b> <span id="microphoneStatus"></span></label>
+
+    <button disabled hidden id="toggleMicrophone">start microphone</button>
+    <button disabled id="startMicrophone">start microphone</button>
+    <button disabled id="stopMicrophone">stop microphone</button>
+    <button disabled id="enableMicrphoneVad">
+      enable microphone voice activity detection
+    </button>
+    <br />
+    <button disabled id="toggleMicrophoneRecording">start recording</button>
+
+    <br />
+    <label>
+      <b>microphone configuration: </b>
+      <pre id="microphoneConfigurationPre"></pre>
+    </label>
+    <br />
+
+    <div id="microphoneConfiguration">
+      <template id="microphoneConfigurationTypeTemplate">
+        <label class="microphoneConfigurationType">
+          <b class="type"></b> <span hidden></span>
+          <select disabled>
+            <optgroup></optgroup>
+          </select>
+        </label>
+      </template>
+    </div>
+
+    <div>
+      <b>stream</b>
+      <br />
+      <audio id="microphoneStream" controls autoplay></audio>
+    </div>
+
+    <label>
+      visualization type
+      <select id="audioVisualizationType">
+        <optgroup label="type">
+          <option>waveform</option>
+          <option>fft</option>
+        </optgroup>
+      </select>
+    </label>
+    <br />
+    <canvas id="audioVisualizer" width="1000" height="200"></canvas>
+
+    <h1 id="modelResults"></h1>
+
+    <div>
+      <b>recording</b>
+      <label>
+        auto play
+        <input type="checkbox" id="autoPlayMicrphoneRecording" />
+      </label>
+      <br />
+      <audio id="microphoneRecording" controls></audio>
+    </div>
+
+    <div id="zoomview-container"></div>
+    <div id="overview-container"></div>
+  </body>
+</html>