fix timeout/queue message

app_init.py

@@ -41,7 +41,6 @@ def init_app(app: FastAPI, user_data: UserData, args: Args, pipeline):
         try:
             user_id = uuid.uuid4()
             print(f"New user connected: {user_id}")
-
             await user_data.create_user(user_id, websocket)
             await websocket.send_json(
                 {"status": "connected", "message": "Connected", "userId": str(user_id)}
@@ -61,6 +60,16 @@ def init_app(app: FastAPI, user_data: UserData, args: Args, pipeline):
         last_time = time.time()
         try:
             while True:
+                if args.timeout > 0 and time.time() - last_time > args.timeout:
+                    await websocket.send_json(
+                        {
+                            "status": "timeout",
+                            "message": "Your session has ended",
+                            "userId": str(user_id),
+                        }
+                    )
+                    await websocket.close()
+                    return
                 data = await websocket.receive_json()
                 if data["status"] != "next_frame":
                     asyncio.sleep(THROTTLE)
@@ -74,21 +83,11 @@ def init_app(app: FastAPI, user_data: UserData, args: Args, pipeline):
                     image_data = await websocket.receive_bytes()
                     if len(image_data) == 0:
                         await websocket.send_json({"status": "send_frame"})
+                        await asyncio.sleep(THROTTLE)
                         continue
                     params.image = bytes_to_pil(image_data)
                 await user_data.update_data(user_id, params)
                 await websocket.send_json({"status": "wait"})
-                if args.timeout > 0 and time.time() - last_time > args.timeout:
-                    await websocket.send_json(
-                        {
-                            "status": "timeout",
-                            "message": "Your session has ended",
-                            "userId": user_id,
-                        }
-                    )
-                    await websocket.close()
-                    return
-                await asyncio.sleep(THROTTLE)
 
         except Exception as e:
             logging.error(f"Error: {e}")
@@ -102,7 +101,6 @@ def init_app(app: FastAPI, user_data: UserData, args: Args, pipeline):
     @app.get("/api/stream/{user_id}")
     async def stream(user_id: uuid.UUID, request: Request):
         try:
-            print(f"New stream request: {user_id}")
 
             async def generate():
                 websocket = user_data.get_websocket(user_id)
@@ -112,6 +110,7 @@ def init_app(app: FastAPI, user_data: UserData, args: Args, pipeline):
                     params = await user_data.get_latest_data(user_id)
                     if not vars(params) or params.__dict__ == last_params.__dict__:
                         await websocket.send_json({"status": "send_frame"})
+                        await asyncio.sleep(THROTTLE)
                         continue
 
                     last_params = params
@@ -119,6 +118,7 @@ def init_app(app: FastAPI, user_data: UserData, args: Args, pipeline):
 
                     if image is None:
                         await websocket.send_json({"status": "send_frame"})
+                        await asyncio.sleep(THROTTLE)
                         continue
                     frame = pil_to_frame(image)
                     yield frame

frontend/src/lib/components/Warning.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  export let message: string = '';
+
+  let timeout = 0;
+  $: if (message !== '') {
+    console.log('message', message);
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      message = '';
+    }, 5000);
+  }
+</script>
+
+{#if message}
+  <div class="fixed right-0 top-0 m-4 cursor-pointer" on:click={() => (message = '')}>
+    <div class="rounded bg-red-800 p-4 text-white">
+      {message}
+    </div>
+    <div class="bar transition-all duration-500" style="width: 0;"></div>
+  </div>
+{/if}
+
+<style lang="postcss" scoped>
+  .button {
+    @apply rounded bg-gray-700 font-normal text-white hover:bg-gray-800 disabled:cursor-not-allowed disabled:bg-gray-300 dark:disabled:bg-gray-700 dark:disabled:text-black;
+  }
+</style>

frontend/src/lib/lcmLive.ts

@@ -40,7 +40,6 @@ export const lcmLiveActions = {
                             const userId = data.userId;
                             lcmLiveStatus.set(LCMLiveStatus.CONNECTED);
                             streamId.set(userId);
-                            resolve(userId);
                             break;
                         case "send_frame":
                             lcmLiveStatus.set(LCMLiveStatus.SEND_FRAME);
@@ -57,12 +56,12 @@ export const lcmLiveActions = {
                             console.log("timeout");
                             lcmLiveStatus.set(LCMLiveStatus.DISCONNECTED);
                             streamId.set(null);
-                            reject("timeout");
+                            resolve({ status: "timeout" });
                         case "error":
                             console.log(data.message);
                             lcmLiveStatus.set(LCMLiveStatus.DISCONNECTED);
                             streamId.set(null);
-                            reject(data.message);
+                            reject(new Error(data.message));
                     }
                 };
 

frontend/src/routes/+page.svelte

@@ -7,6 +7,7 @@
   import Button from '$lib/components/Button.svelte';
   import PipelineOptions from '$lib/components/PipelineOptions.svelte';
   import Spinner from '$lib/icons/spinner.svelte';
+  import Warning from '$lib/components/Warning.svelte';
   import { lcmLiveStatus, lcmLiveActions, LCMLiveStatus } from '$lib/lcmLive';
   import { mediaStreamActions, onFrameChangeStore } from '$lib/mediaStream';
   import { getPipelineValues, deboucedPipelineValues } from '$lib/store';
@@ -18,6 +19,7 @@
   let maxQueueSize: number = 0;
   let currentQueueSize: number = 0;
   let queueCheckerRunning: boolean = false;
+  let warningMessage: string = '';
 
   onMount(() => {
     getSettings();
@@ -60,20 +62,27 @@
 
   let disabled = false;
   async function toggleLcmLive() {
-    if (!isLCMRunning) {
-      if (isImageMode) {
-        await mediaStreamActions.enumerateDevices();
-        await mediaStreamActions.start();
+    try {
+      if (!isLCMRunning) {
+        if (isImageMode) {
+          await mediaStreamActions.enumerateDevices();
+          await mediaStreamActions.start();
+        }
+        disabled = true;
+        await lcmLiveActions.start(getSreamdata);
+        warningMessage = 'Timeout, please try again.';
+        disabled = false;
+        toggleQueueChecker(false);
+      } else {
+        if (isImageMode) {
+          mediaStreamActions.stop();
+        }
+        lcmLiveActions.stop();
+        toggleQueueChecker(true);
       }
-      disabled = true;
-      await lcmLiveActions.start(getSreamdata);
+    } catch (e) {
+      warningMessage = e instanceof Error ? e.message : '';
       disabled = false;
-      toggleQueueChecker(false);
-    } else {
-      if (isImageMode) {
-        mediaStreamActions.stop();
-      }
-      lcmLiveActions.stop();
       toggleQueueChecker(true);
     }
   }
@@ -86,6 +95,7 @@
 </svelte:head>
 
 <main class="container mx-auto flex max-w-5xl flex-col gap-3 px-4 py-4">
+  <Warning bind:message={warningMessage}></Warning>
   <article class="text-center">
     {#if pageContent}
       {@html pageContent}