moved buffer into loop

app/bot.py

@@ -101,11 +101,6 @@ class DailyVision(EventHandler):
             })
 
     def process_frames(self):
-        if self.__params_buffer:
-            print("New buffer params found")
-            print(self.__params_buffer)
-            self.__params = self.__pipeline.InputParams(**self.__params_buffer)
-
         params = self.__params
         
         while not self.__app_quit:
@@ -123,6 +118,11 @@ class DailyVision(EventHandler):
                 #video_frame = self.__queue.get(timeout=5)
                 video_frame = self.__image_buffer
 
+                if self.__params_buffer:
+                    print("New buffer params found")
+                    params = self.__pipeline.InputParams(**self.__params_buffer)
+                    self.__params_buffer = None
+                    
                 if not video_frame == None:
                     image = Image.frombytes("RGB", (video_frame.width, video_frame.height), video_frame.buffer)
                     result_image = self.__pipeline.predict(params, image)

frontend/app/components/Call.js

@@ -14,6 +14,8 @@ const STATE_LEFT = "left";
 const BOT_STATE_STARTING = "bot_starting";
 const BOT_STATE_STARTED = "bot_started";
 
+//@TODO change to portrait constraints and update UI
+//@TODO Disable simulcast
 export default function Call() {
   const daily = useDaily();
   const [callState, setCallState] = useState(STATE_IDLE);

frontend/app/components/CreateRoom.js

@@ -32,65 +32,71 @@ export default function CreateRoom({ onCreateRoom }) {
   }
 
   return (
-    <div className="bg-white shadow sm:rounded-lg max-w-xl mx-auto">
-      <div className="px-4 py-5 sm:p-6">
-        <h3 className="text-base font-semibold leading-6 text-gray-900">
-          What is this
-        </h3>
-        <div className="mt-2 text-sm text-gray-500">
-          <p>Explanation goes here</p>
-        </div>
-        <div className="mt-5">
-          <Button
-            rightSection={<IconArrowRight stroke={2} className="h-5 w-5" />}
-            size="md"
-            loading={fetching}
-            onClick={() => create()}
-          >
-            Join
-          </Button>
-        </div>
+    <main className="min-h-screen flex items-center justify-center bg-zinc-100">
+      <div className="flex-1 bg-white shadow sm:rounded-lg max-w-xl mx-auto">
+        <div className="px-4 py-5 sm:p-6">
+          <h3 className="text-base font-semibold leading-6 text-gray-900">
+            Stable Diffusion + WebRTC Latency Demo
+          </h3>
+          <div className="mt-2 text-sm text-gray-500">
+            <p>
+              Demonstrates implementating WebRTC via daily.co to create
+              real-time vision inference. Currently implemented using SD 1.5
+              Turbo with Control Net.
+            </p>
+          </div>
+          <div className="mt-5">
+            <Button
+              rightSection={<IconArrowRight stroke={2} className="h-5 w-5" />}
+              size="md"
+              loading={fetching}
+              onClick={() => create()}
+            >
+              Join
+            </Button>
+          </div>
 
-        <hr className="my-6" />
+          <hr className="my-6" />
 
-        <div
-          className="inline-flex items-center gap-1 text-sm text-gray-500 cursor-pointer"
-          onClick={() => setShowManual(!showManual)}
-        >
-          Join an existing room
-          <IconChevronRight
-            stoke={2}
-            className={`w-4 h-4 text-gray-300 transition-transform ${
-              showManual && "rotate-90"
-            }`}
-          />
-        </div>
+          <div
+            className="inline-flex items-center gap-1 text-sm text-gray-500 cursor-pointer"
+            onClick={() => setShowManual(!showManual)}
+          >
+            Join an existing room
+            <IconChevronRight
+              stoke={2}
+              className={`w-4 h-4 text-gray-300 transition-transform ${
+                showManual && "rotate-90"
+              }`}
+            />
+          </div>
 
-        {showManual && (
-          <div className="mt-5 sm:flex sm:items-center">
-            <div className="w-full">
-              <label htmlFor="room" className="sr-only">
-                Daily Room URL
-              </label>
-              <input
-                type="text"
-                name="room"
-                id="room"
-                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                placeholder="https://..."
-                onChange={(e) => setRoomUrl(e.target.value)}
-              />
+          {showManual && (
+            <div className="mt-5 sm:flex sm:items-center">
+              <div className="w-full">
+                <label htmlFor="room" className="sr-only">
+                  Daily Room URL
+                </label>
+                <input
+                  type="text"
+                  name="room"
+                  id="room"
+                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  placeholder="https://..."
+                  onChange={(e) => setRoomUrl(e.target.value)}
+                />
+              </div>
+              <button
+                type="submit"
+                onClick={() => onCreateRoom(roomUrl)}
+                className="mt-3 inline-flex w-full items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:ml-3 sm:mt-0 sm:w-auto"
+              >
+                Join
+              </button>
             </div>
-            <button
-              type="submit"
-              onClick={() => onCreateRoom(roomUrl)}
-              className="mt-3 inline-flex w-full items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:ml-3 sm:mt-0 sm:w-auto"
-            >
-              Join
-            </button>
-          </div>
-        )}
+          )}
+        </div>
       </div>
-    </div>
+    </main>
   );
 }

frontend/app/components/Joining.js

@@ -11,12 +11,14 @@ export default function Join({ roomUrl, onJoin }) {
   });
 
   return (
-    <div className="bg-white shadow sm:rounded-lg max-w-xl mx-auto">
-      <div className="px-4 py-5 sm:p-6">
-        <h3 className="text-base font-semibold leading-6 text-gray-900">
-          Joining...
-        </h3>
+    <main className="min-h-screen flex items-center justify-center bg-zinc-200">
+      <div className="bg-white shadow sm:rounded-lg max-w-xl mx-auto">
+        <div className="px-4 py-5 sm:p-6">
+          <h3 className="text-base font-semibold leading-6 text-gray-900">
+            Joining...
+          </h3>
+        </div>
       </div>
-    </div>
+    </main>
   );
 }