add think animation

src/background.ts

@@ -34,7 +34,7 @@ function createWindow() {
   // Create the browser window.
   win = new BrowserWindow({
     width: 800,
-    height: 600,
+    height: 1200,
     webPreferences: {
       // Use pluginOptions.nodeIntegration, leave this alone
       // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
@@ -59,7 +59,10 @@ function createWindow() {
       recorder.start({
         onAudio: (audio: object, speech: boolean) => {
           if (win) {
-            win.webContents.send('render-audio', audio)
+            win.webContents.send('render-audio', {
+              audio: audio,
+              speech: speech
+            })
           }
           if (speech) {
             // TODO: send audio to crimata BE

src/components/AI/index.vue

@@ -4,12 +4,12 @@
       id="radial-gradient"
       cx="0.5"
       cy="1"
-      r="0.54"
+      :r="radius"
       gradientTransform="translate(-1.489 1.5) rotate(-90) scale(1 1.989)"
       gradientUnits="objectBoundingBox"
     >
       <stop offset="0" stop-color="#fff" />
-      <stop id="sound" offset="1" stop-color="#e6e6e6" />
+      <stop id="sound" offset="1" stop-color="rgb(230, 230, 230)" />
     </radialGradient>
     <filter id="Rectangle_410" x="0" y="0" width="380" height="530" filterUnits="userSpaceOnUse">
       <feOffset dy="3" input="SourceAlpha" />
@@ -33,85 +33,80 @@
 </template>
 
 <script>
-import { defineComponent, onMounted, ref } from "vue";
+import { defineComponent, onMounted, ref, inject, watch } from "vue";
 export default defineComponent({
   name: "AI",
   setup() {
     const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
     const analyzer = audioCtx.createAnalyser();
-    analyzer.fftSize = 256;
+    analyzer.fftSize = 2048;
+    const xInitial = 24;
+    const xFinal = 640;
+    // analyzer.minDecibels = -90;
+    analyzer.smoothingTimeConstant = 0.85;
     const dataArray = new Uint8Array(analyzer.frequencyBinCount);
     const sampleRate = 16000;
     let gradient;
-    const amplitude = ref(0);
+    const radius = ref(0);
+    const think = ref(false);
+    const aiOffset = ref(1);
+
+    const anime = inject("animejs");
 
     onMounted(() => {
-      gradient = document.getElementById("sound");
+      gradient = document.getElementById("radial-gradient");
     });
 
     function convertBlock(buffer) {
       // incoming data is an ArrayBuffer
       const incomingData = new Uint8Array(buffer); // create a uint8 view on the ArrayBuffer
-      let i,
-        l = incomingData.length; // length, we need this for the loop
+      const l = incomingData.length; // length, we need this for the loop
       const outputData = new Float32Array(incomingData.length); // create the Float32Array for output
-      for (i = 0; i < l; i++) {
+      for (let i = 0; i < l; i++) {
         outputData[i] = (incomingData[i] - 128) / 128.0; // convert audio to float
       }
       return outputData; // return the Float32Array
     }
 
-    window.addEventListener("load", function (e) {
-      window.ipcRenderer.on("render-audio", (event, audio) => {
-        const floatArray = convertBlock(audio.buffer);
-        const buffer = audioCtx.createBuffer(1, floatArray.length, sampleRate);
-        buffer.copyToChannel(floatArray, 0, 0);
-        const source = audioCtx.createBufferSource();
-        source.buffer = buffer;
-        source.connect(analyzer);
-        source.start();
-        visualize();
-      });
+    window.ipcRenderer.on("think", (event, think) => {
+      console.log("think", think);
     });
 
-    const render = () => {
-      // whatever you want to do per frame of animation
-
-      const range = 64;
-      const interval = range / 6;
-
-      const sensitivity = 0.25;
-
-      const min = 0;
-      const max = 25;
-
-      let channel = 1;
-
-      const to = Math.floor(interval * channel);
-      const from = Math.ceil(to - interval);
-      const segment = dataArray.slice(from, to);
-
-      const sum = segment.reduce((a, b) => a + b);
-      const average = sum / segment.length;
-      console.log(average);
-      // let height = sensitivity * average;
-      //
-      // height = Math.max(min, Math.min(max, height));
-      //
-      // height = height + 230;
-      //
-      // // we have to write a function what scales between
-      // gradient.setAttribute(
-      //   "stop-color",
-      //   `rgb(${height}, ${height}, ${height})`
-      // );
-    };
-
-    function visualize() {
-      requestAnimationFrame(visualize);
+    window.ipcRenderer.on("render-audio", (event, payload) => {
+      const floatArray = convertBlock(payload.audio.buffer);
+      const buffer = audioCtx.createBuffer(1, floatArray.length, sampleRate);
+      buffer.copyToChannel(floatArray, 0, 0);
+      const source = audioCtx.createBufferSource();
+      source.buffer = buffer;
+      source.connect(analyzer);
+      source.start();
       analyzer.getByteFrequencyData(dataArray);
-      render();
-    }
+      const dataView = dataArray.slice(xInitial, xFinal);
+      const sum = dataView.reduce((a, b) => a + b);
+      const average = sum / dataView.length;
+      const scaled = average / 255;
+      const zeroed = scaled - 0.6;
+      if (zeroed > 0) {
+        radius.value = zeroed;
+      }
+      const amplified = zeroed;
+      if (payload.speech === think) {
+        return;
+      } else {
+        think.value = payload.speech;
+      }
+    });
+
+    watch(think, (think, prevThink) => {
+      if (think) {
+        console.log("think");
+      } else {
+        console.log("dont think");
+      }
+    });
+    return {
+      radius,
+    };
   },
 });
 </script>