Docs fixes (#31)

docs/advanced-configuration.md

@@ -70,6 +70,23 @@ demo.launch()
 2. If the chunk has more than 0.2 seconds of speech, the user started talking.
 3. If, after the user started speaking, there is a chunk with less than 0.1 seconds of speech, the user stopped speaking.
 
+
+## Stream Handler Input Audio
+
+You can configure the sampling rate of the audio passed to the `ReplyOnPause` or `StreamHandler` instance with the `input_sampling_rate` parameter. The current default is `48000`
+
+```python
+from gradio_webrtc import ReplyOnPause, WebRTC
+
+with gr.Blocks as demo:
+    audio = WebRTC(...)
+    audio.stream(ReplyOnPause(..., input_sampling_rate=24000)
+    )
+
+demo.launch()
+```
+
+
 ## Stream Handler Output Audio
 
 You can configure the output audio chunk size of `ReplyOnPause` (and any `StreamHandler`) 
@@ -86,4 +103,9 @@ with gr.Blocks as demo:
     )
 
 demo.launch()
-```
+```
+
+!!! tip
+
+    In general it is best to leave these settings untouched. In some cases,
+    lowering the output_frame_size can yield smoother audio playback.

frontend/shared/AudioWave.svelte

@@ -41,7 +41,7 @@
   
     function updateBars() {
       analyser.getByteFrequencyData(dataArray);
-      const bars = document.querySelectorAll('.waveContainer .box');
+      const bars = document.querySelectorAll('.gradio-webrtc-waveContainer .gradio-webrtc-box');
       for (let i = 0; i < bars.length; i++) {
         const barHeight = (dataArray[i] / 255) * 2; // Amplify the effect
         bars[i].style.transform = `scaleY(${Math.max(0.1, barHeight)})`;
@@ -51,23 +51,23 @@
     }
 </script>
   
-<div class="waveContainer">
-  <div class="boxContainer" style:width={containerWidth}>
+<div class="gradio-webrtc-waveContainer">
+  <div class="gradio-webrtc-boxContainer" style:width={containerWidth}>
     {#each Array(numBars) as _}
-      <div class="box"></div>
+      <div class="gradio-webrtc-box"></div>
     {/each}
   </div>
 </div>
   
 <style>
-  .waveContainer {
+  .gradio-webrtc-waveContainer {
     position: relative;
     display: flex;
     min-height: 100px;
     max-height: 128px;
   }
 
-  .boxContainer {
+  .gradio-webrtc-boxContainer {
     display: flex;
     justify-content: space-between;
     height: 64px;
@@ -75,7 +75,7 @@
     --gutter: 4px;
   }
 
-  .box {
+  .gradio-webrtc-box {
     height: 100%;
     width: var(--boxSize);
     background: var(--color-accent);

pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_webrtc"
-version = "0.0.18"
+version = "0.0.19"
 description = "Stream images in realtime with webrtc"
 readme = "README.md"
 license = "apache-2.0"