Video chat temp (#1)

* 视觉更新

---------

Co-authored-by: 杍超 <huangbinchao.hbc@alibaba-inc.com>
Co-authored-by: 款冬 <neil.xh@alibaba-inc.com>

frontend/shared/AudioWave.svelte

@@ -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);

frontend/shared/PulsingIcon.svelte

@@ -7,6 +7,7 @@
     export let icon: string | ComponentType = undefined;
     export let icon_button_color: string = "var(--color-accent)";
     export let pulse_color: string = "var(--color-accent)";
+    
 
     let audioContext: AudioContext;
     let analyser: AnalyserNode;

frontend/shared/Webcam.svelte

@@ -193,7 +193,6 @@
                         case "connected":
                             stream_state = "open";
                             _time_limit = time_limit;
-							dispatch("tick");
                             break;
                         case "disconnected":
                             stream_state = "closed";

frontend/shared/stream_utils.ts

@@ -19,18 +19,30 @@ export async function get_video_stream(
   include_audio: boolean | { deviceId: { exact: string } },
   video_source: HTMLVideoElement,
   device_id?: string,
-  track_constraints?: MediaTrackConstraints
+  track_constraints?:
+    | MediaTrackConstraints
+    | { video: MediaTrackConstraints; audio: MediaTrackConstraints }
 ): Promise<MediaStream> {
-  const fallback_constraints = track_constraints || {
-    width: { ideal: 500 },
-    height: { ideal: 500 },
-  };
-
+  console.log(track_constraints);
+  const video_fallback_constraints = (track_constraints as any)?.video ||
+    track_constraints || {
+      width: { ideal: 500 },
+      height: { ideal: 500 },
+    };
+  const audio_fallback_constraints = (track_constraints as any)?.audio ||
+    track_constraints || {
+      echoCancellation: true,
+      noiseSuppression: true,
+      autoGainControl: true,
+    };
   const constraints = {
     video: device_id
-      ? { deviceId: { exact: device_id }, ...fallback_constraints }
-      : fallback_constraints,
-    audio: include_audio,
+      ? { deviceId: { exact: device_id }, ...video_fallback_constraints }
+      : video_fallback_constraints,
+    audio:
+      typeof include_audio === "object"
+        ? { ...include_audio, ...audio_fallback_constraints }
+        : include_audio,
   };
 
   return navigator.mediaDevices