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

Video chat temp (#1)

Browse Source 
* 视觉更新

---------

Co-authored-by: 杍超 <huangbinchao.hbc@alibaba-inc.com>
Co-authored-by: 款冬 <neil.xh@alibaba-inc.com>
This commit is contained in:
bingochaos
2025-02-14 15:53:54 +08:00
committed by GitHub
parent d567721603
commit 2b19ee493e
23 changed files with 1844 additions and 770 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/shared/AudioWave.svelte
View File

@@ -10,6 +10,7 @@
export let icon: string | undefined | ComponentType = undefined;
export let icon_button_color: string = "var(--color-accent)";
export let pulse_color: string = "var(--color-accent)";
export let wave_color: string = "var(--color-accent)";
let audioContext: AudioContext;
let analyser: AnalyserNode;
@@ -19,7 +20,7 @@
$: containerWidth = icon
? "128px"
: `calc((var(--boxSize) + var(--gutter)) * ${numBars})`;
: `calc((var(--boxSize) + var(--gutter)) * ${numBars} + 80px)`;
$: if(stream_state === "open") setupAudioContext();
@@ -52,12 +53,23 @@
// Update bars
const bars = document.querySelectorAll('.gradio-webrtc-waveContainer .gradio-webrtc-box');
for (let i = 0; i < bars.length; i++) {
const barHeight = (dataArray[i] / 255) * 2;
const barHeight = (dataArray[transformIndex(i)] / 255);
bars[i].style.transform = `scaleY(${Math.max(0.1, barHeight)})`;
bars[i].style.background = wave_color;
bars[i].style.opacity = 0.5;
}
animationId = requestAnimationFrame(updateVisualization);
}
// 声波高度从两侧向中间收拢
function transformIndex(index: number): number {
const mapping = [0, 2, 4, 6, 8, 10, 12, 14, 15, 13, 11, 9, 7, 5, 3, 1];
if (index < 0 || index >= mapping.length) {
throw new Error("Index must be between 0 and 15");
}
return mapping[index];
}
</script>
<div class="gradio-webrtc-waveContainer">
@@ -78,7 +90,11 @@
</div>
{:else}
<div class="gradio-webrtc-boxContainer" style:width={containerWidth}>
{#each Array(numBars) as _}
{#each Array(numBars/2) as _}
<div class="gradio-webrtc-box"></div>
{/each}
<div class="split-container"></div>
{#each Array(numBars/2) as _}
<div class="gradio-webrtc-box"></div>
{/each}
</div>
@@ -99,10 +115,13 @@
display: flex;
justify-content: space-between;
height: 64px;
--boxSize: 8px;
--boxSize: 4px;
--gutter: 4px;
}
}
.split-container {
width: 80px;
}
.gradio-webrtc-box {
height: 100%;
width: var(--boxSize);