Updated WebUI

index.html

@@ -126,7 +126,8 @@
     </div>
   </div>
   <div style="margin-top: 1em; display: flex; gap: 0.5em;">
-    <input type="text" id="textMessage" placeholder="Type your message here" style="flex: 1; padding: 0.5em; border: 1px solid #ddd; border-radius: 3px;" />
+    <input type="text" id="textMessage" placeholder="Type your message here" style="flex: 1; padding: 0.5em; border: 1px solid #ddd; border-radius: 3px;" 
+      onkeydown="if(event.key === 'Enter') { event.preventDefault(); sendText(); }" />
     <button onclick="sendText()" style="white-space: nowrap;">
       <span style="margin-right: 0.3em;">📤</span> Send
     </button>
@@ -140,9 +141,9 @@
 
 <div style="margin: 1em 0;">
   <strong>Log Settings:</strong><br>
-  <label><input type="checkbox" id="logWebSocket" checked> WebSocket Events</label>
-  <label style="margin-left: 1em"><input type="checkbox" id="logAudio" checked> Audio Events</label>
-  <label style="margin-left: 1em"><input type="checkbox" id="logText" checked> Text Events</label>
+  <label><input type="checkbox" id="logWebSocket"> WebSocket Events</label>
+  <label style="margin-left: 1em"><input type="checkbox" id="logAudio"> Audio Events</label>
+  <label style="margin-left: 1em"><input type="checkbox" id="logText"> Text Events</label>
   <label style="margin-left: 1em"><input type="checkbox" id="logError" checked> Error Events</label>
 </div>
 
@@ -250,7 +251,10 @@
 
     if (!analyser && playbackCtx) {
       analyser = playbackCtx.createAnalyser();
-      analyser.fftSize = 2048;
+      analyser.fftSize = 256;  // Reduced for wider bars
+      analyser.minDecibels = -90;
+      analyser.maxDecibels = -10;
+      analyser.smoothingTimeConstant = 0.85;
     }
   }
 
@@ -259,34 +263,39 @@
     
     const bufferLength = analyser.frequencyBinCount;
     const dataArray = new Uint8Array(bufferLength);
-    analyser.getByteTimeDomainData(dataArray);
+    analyser.getByteFrequencyData(dataArray);
 
     visualizerCtx.fillStyle = '#f0f0f0';
     visualizerCtx.fillRect(0, 0, visualizerCanvas.width, visualizerCanvas.height);
 
-    visualizerCtx.lineWidth = 2;
-    visualizerCtx.strokeStyle = '#4caf50';
-    visualizerCtx.beginPath();
-
-    const sliceWidth = visualizerCanvas.width / bufferLength;
+    const barWidth = (visualizerCanvas.width / bufferLength) * 2.5;
+    const centerY = visualizerCanvas.height / 2;
     let x = 0;
 
     for (let i = 0; i < bufferLength; i++) {
-      const v = dataArray[i] / 128.0;
-      const y = v * visualizerCanvas.height / 2;
-
-      if (i === 0) {
-        visualizerCtx.moveTo(x, y);
-      } else {
-        visualizerCtx.lineTo(x, y);
-      }
+      const barHeight = (dataArray[i] / 255) * (visualizerCanvas.height / 2); // Half height for centering
+      
+      // Create gradient for top half (going up)
+      const gradientTop = visualizerCtx.createLinearGradient(0, centerY, 0, centerY - barHeight);
+      gradientTop.addColorStop(0, '#4caf50');  // Green at center
+      gradientTop.addColorStop(1, '#81c784');  // Lighter green at top
+      
+      // Create gradient for bottom half (going down)
+      const gradientBottom = visualizerCtx.createLinearGradient(0, centerY, 0, centerY + barHeight);
+      gradientBottom.addColorStop(0, '#4caf50');  // Green at center
+      gradientBottom.addColorStop(1, '#81c784');  // Lighter green at bottom
+
+      // Draw top half of the bar
+      visualizerCtx.fillStyle = gradientTop;
+      visualizerCtx.fillRect(x, centerY - barHeight, barWidth, barHeight);
+      
+      // Draw bottom half of the bar
+      visualizerCtx.fillStyle = gradientBottom;
+      visualizerCtx.fillRect(x, centerY, barWidth, barHeight);
 
-      x += sliceWidth;
+      x += barWidth + 1;  // Add 1 pixel gap between bars
     }
 
-    visualizerCtx.lineTo(visualizerCanvas.width, visualizerCanvas.height / 2);
-    visualizerCtx.stroke();
-
     animationFrame = requestAnimationFrame(drawVisualizer);
   }