deepgeek/gradio-webrtc
2
0
Fork 0
mirror of https://github.com/HumanAIGC-Engineering/gradio-webrtc.git synced 2026-02-05 18:09:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Docs fixes (#31)

Browse Source
This commit is contained in:
Freddy Boulton
2024-12-06 10:46:52 -05:00
committed by GitHub
parent 54602d8d1f
commit 80283f6631
3 changed files with 31 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/advanced-configuration.md
View File

@@ -70,6 +70,23 @@ demo.launch()
2. If the chunk has more than 0.2 seconds of speech, the user started talking. 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. 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 ## Stream Handler Output Audio
You can configure the output audio chunk size of `ReplyOnPause` (and any `StreamHandler`) You can configure the output audio chunk size of `ReplyOnPause` (and any `StreamHandler`)
@@ -86,4 +103,9 @@ with gr.Blocks as demo:
) )
demo.launch() 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.

14
frontend/shared/AudioWave.svelte
View File

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

2
pyproject.toml
View File

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