Rebrand to FastRTC (#60)

* Add code

* add code

* add code

* Rename messages

* rename

* add code

* Add demo

* docs + demos + bug fixes

* add code

* styles

* user guide

* Styles

* Add code

* misc docs updates

* print nit

* whisper + pr

* url for images

* whsiper update

* Fix bugs

* remove demo files

* version number

* Fix pypi readme

* Fix

* demos

* Add llama code editor

* Update llama code editor and object detection cookbook

* Add more cookbook demos

* add code

* Fix links for PR deploys

* add code

* Fix the install

* add tts

* TTS docs

* Typo

* Pending bubbles for reply on pause

* Stream redesign (#63)

* better error handling

* Websocket error handling

* add code

---------

Co-authored-by: Freddy Boulton <freddyboulton@hf-freddy.local>

* remove docs from dist

* Some docs typos

* more typos

* upload changes + docs

* docs

* better phone

* update docs

* add code

* Make demos better

* fix docs + websocket start_up

* remove mention of FastAPI app

* fastphone tweaks

* add code

* ReplyOnStopWord fixes

* Fix cookbook

* Fix pypi readme

* add code

* bump versions

* sambanova cookbook

* Fix tags

* Llm voice chat

* kyutai tag

* Add error message to all index.html

* STT module uses Moonshine

* Not required from typing extensions

* fix llm voice chat

* Add vpn warning

* demo fixes

* demos

* Add more ui args and gemini audio-video

* update cookbook

* version 9

---------

Co-authored-by: Freddy Boulton <freddyboulton@hf-freddy.local>

frontend/shared/StaticAudio.svelte

@@ -1,17 +1,14 @@
 <script lang="ts">
-	import { Empty } from "@gradio/atoms";
-	import {
-		BlockLabel,
-	} from "@gradio/atoms";
-	import { Music } from "@gradio/icons";
-	import type { I18nFormatter } from "@gradio/utils";
-	import { createEventDispatcher } from "svelte";
+    import { Empty } from "@gradio/atoms";
+    import { BlockLabel } from "@gradio/atoms";
+    import { Music } from "@gradio/icons";
+    import type { I18nFormatter } from "@gradio/utils";
+    import { createEventDispatcher } from "svelte";
     import { onMount } from "svelte";
 
     import { start, stop } from "./webrtc_utils";
     import AudioWave from "./AudioWave.svelte";
 
-
     export let value: string | null = null;
     export let label: string | undefined = undefined;
     export let show_label = true;
@@ -21,7 +18,7 @@
     export let icon: string | undefined = undefined;
     export let icon_button_color: string = "var(--color-accent)";
     export let pulse_color: string = "var(--color-accent)";
-    
+
     export let server: {
         offer: (body: any) => Promise<any>;
     };
@@ -31,13 +28,12 @@
     let pc: RTCPeerConnection;
     let _webrtc_id = Math.random().toString(36).substring(2);
 
-
     const dispatch = createEventDispatcher<{
         tick: undefined;
-        error: string
+        error: string;
         play: undefined;
         stop: undefined;
-	}>();
+    }>();
 
     onMount(() => {
         window.setInterval(() => {
@@ -45,38 +41,53 @@
                 dispatch("tick");
             }
         }, 1000);
-        }
-    )
+    });
 
     async function start_stream(value: string): Promise<string> {
-        if( value === "start_webrtc_stream") {
+        if (value === "start_webrtc_stream") {
             stream_state = "waiting";
-            _webrtc_id = Math.random().toString(36).substring(2)
+            _webrtc_id = Math.random().toString(36).substring(2);
             value = _webrtc_id;
-            console.log("set value to ", value);
             pc = new RTCPeerConnection(rtc_configuration);
-            pc.addEventListener("connectionstatechange",
-                async (event) => {
-                    switch(pc.connectionState) {
-                        case "connected":
-                            console.info("connected");
-                            stream_state = "open";
-                            break;
-                        case "disconnected":
-                            console.info("closed");
-                            stop(pc);
-                            break;
-                        default:
-                            break;
-                    }
+            pc.addEventListener("connectionstatechange", async (event) => {
+                switch (pc.connectionState) {
+                    case "connected":
+                        console.info("connected");
+                        stream_state = "open";
+                        break;
+                    case "disconnected":
+                        console.info("closed");
+                        stop(pc);
+                        break;
+                    default:
+                        break;
                 }
-            )
+            });
             let stream = null;
-            start(stream, pc, audio_player, server.offer, _webrtc_id, "audio", on_change_cb).then((connection) => {
+            const timeoutId = setTimeout(() => {
+                on_change_cb({ type: "connection_timeout" });
+            }, 5000);
+
+            start(
+                stream,
+                pc,
+                audio_player,
+                server.offer,
+                _webrtc_id,
+                "audio",
+                on_change_cb,
+            )
+                .then((connection) => {
+                    clearTimeout(timeoutId);
                     pc = connection;
-                }).catch(() => {
-                    console.info("catching")
-                    dispatch("error", "Too many concurrent users. Come back later!");
+                })
+                .catch(() => {
+                    clearTimeout(timeoutId);
+                    console.info("catching");
+                    dispatch(
+                        "error",
+                        "Too many concurrent users. Come back later!",
+                    );
                 });
         }
         return value;
@@ -85,16 +96,13 @@
     $: start_stream(value).then((val) => {
         value = val;
     });
-
-
-    
 </script>
 
 <BlockLabel
-	{show_label}
-	Icon={Music}
-	float={false}
-	label={label || i18n("audio.audio")}
+    {show_label}
+    Icon={Music}
+    float={false}
+    label={label || i18n("audio.audio")}
 />
 <audio
     class="standard-player"
@@ -106,8 +114,14 @@
 />
 {#if value !== "__webrtc_value__"}
     <div class="audio-container">
-    <AudioWave audio_source_callback={() => audio_player.srcObject} {stream_state} {icon} {icon_button_color} {pulse_color}/>
-    </div>  
+        <AudioWave
+            audio_source_callback={() => audio_player.srcObject}
+            {stream_state}
+            {icon}
+            {icon_button_color}
+            {pulse_color}
+        />
+    </div>
 {/if}
 {#if value === "__webrtc_value__"}
     <Empty size="small">
@@ -115,15 +129,14 @@
     </Empty>
 {/if}
 
-
 <style>
     .audio-container {
-		display: flex;
-		height: 100%;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
 
     .standard-player {
         width: 100%;
@@ -132,4 +145,4 @@
     .hidden {
         display: none;
     }
-</style>
+</style>