added UI

env.example

@@ -6,4 +6,5 @@ SAFETY_CHECKER=1
 TORCH_COMPILE=1
 USE_TAESD=1
 BOT_WILL_IDLE=1
-FPS_CAP=
+FPS_CAP=
+FAST_API_RELOAD=false

frontend/app/components/Avatar.js

@@ -0,0 +1,13 @@
+export default function Avatar() {
+  return (
+    <span className="inline-block h-14 w-14 overflow-hidden rounded-full bg-gray-100">
+      <svg
+        className="h-full w-full text-gray-300"
+        fill="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
+      </svg>
+    </span>
+  );
+}

frontend/app/components/Call.js

@@ -0,0 +1,87 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import Card from "../components/Card";
+import { VideoCameraIcon, PaintBrushIcon } from "@heroicons/react/24/outline";
+import Avatar from "../components/Avatar";
+import CreateRoom from "../components/CreateRoom";
+import { apiUrl } from "../utils";
+import Join from "../components/Joining";
+import { DailyVideo, useLocalSessionId } from "@daily-co/daily-react";
+
+const STATE_IDLE = "idle";
+const STATE_JOINING = "joining";
+const STATE_JOINED = "joined";
+const STATE_LEFT = "left";
+const BOT_STATE_STARTING = "bot_starting";
+const BOT_STATE_STARTED = "bot_started";
+
+export default function Call() {
+  const [callState, setCallState] = useState(STATE_IDLE);
+  const [roomUrl, setRoomUrl] = useState();
+  const [botState, setBotState] = useState(BOT_STATE_STARTING);
+  const localSessionId = useLocalSessionId();
+
+  const start = useCallback(async () => {
+    const resp = await fetch(`${apiUrl}/start`, {
+      method: "POST",
+      mode: "cors",
+      cache: "no-cache",
+      credentials: "same-origin",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ room_url: roomUrl }),
+    });
+
+    const data = await resp.json();
+  }, [roomUrl]);
+
+  useEffect(() => {
+    if (callState !== STATE_JOINED || botState === BOT_STATE_STARTED) return;
+    start();
+  }, [callState, botState, start]);
+
+  if (callState === STATE_IDLE) {
+    return (
+      <CreateRoom
+        onCreateRoom={(roomUrl) => {
+          setRoomUrl(roomUrl);
+          setCallState(STATE_JOINING);
+        }}
+      />
+    );
+  }
+
+  if (callState === STATE_JOINING) {
+    return <Join roomUrl={roomUrl} onJoin={() => setCallState(STATE_JOINED)} />;
+  }
+
+  // Main call loop
+  return (
+    <main className="container py-24">
+      <div className="grid grid-cols-2 grid-flow-col gap-4">
+        <div>
+          <Card headerText="Local Webcam" HeaderIcon={VideoCameraIcon}>
+            <div className="overflow-hidden bg-gray-50 sm:rounded-lg">
+              <div className="aspect-video flex items-center justify-center">
+                <DailyVideo automirror sessionId={localSessionId} />
+              </div>
+            </div>
+          </Card>
+          <div className="relative">Config - Resolution, Mbps, FPS</div>
+        </div>
+        <div>
+          <Card headerText="Inference" HeaderIcon={PaintBrushIcon}>
+            <div className="overflow-hidden bg-gray-50 sm:rounded-lg">
+              <div className="aspect-video flex items-center justify-center">
+                <Avatar />
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </main>
+  );
+}

frontend/app/components/Card.js

@@ -0,0 +1,11 @@
+export default function Card({ headerText = "Header", HeaderIcon, children }) {
+  return (
+    <div className="overflow-hidden rounded-lg bg-white border shadow-lg">
+      <header className="flex flex-row gap-2 px-4 py-5 sm:px-6">
+        <HeaderIcon className="w-5 h5" />
+        <h3 className="text-sm font-bold">{headerText}</h3>
+      </header>
+      <main className="px-4 pb-4">{children}</main>
+    </div>
+  );
+}

frontend/app/components/CreateRoom.js

@@ -0,0 +1,54 @@
+import { ArrowRightIcon } from "@heroicons/react/20/solid";
+import { useState } from "react";
+import { apiUrl } from "../utils";
+
+export default function CreateRoom({ onCreateRoom }) {
+  const [fetching, setFetching] = useState(false);
+
+  async function create() {
+    setFetching(true);
+
+    const resp = await fetch(`${apiUrl}/create`, {
+      method: "POST",
+      mode: "cors",
+      cache: "no-cache",
+      credentials: "same-origin",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    const data = await resp.json();
+
+    if (!data.room_url) {
+      setFetching(false);
+      console.log("error creating room");
+    }
+
+    onCreateRoom(data.room_url);
+  }
+
+  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
+            type="button"
+            disabled={fetching}
+            className="inline-flex items-center gap-x-2 rounded-md bg-indigo-600 px-3.5 py-2.5 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"
+            onClick={() => create()}
+          >
+            Start
+            <ArrowRightIcon className="-h-5 w-5" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/components/Joining.js

@@ -0,0 +1,22 @@
+import { useDaily } from "@daily-co/daily-react";
+import { useEffect } from "react";
+
+export default function Join({ roomUrl, onJoin }) {
+  const daily = useDaily();
+
+  useEffect(() => {
+    daily.join({ url: 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>
+      </div>
+    </div>
+  );
+}

frontend/app/components/PresetPrompts.js

@@ -0,0 +1,178 @@
+import { Popover, Transition } from "@headlessui/react";
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import { Fragment } from "react";
+
+const solutions = [
+  {
+    name: "Insights",
+    description: "Measure actions your users take",
+    href: "##",
+    icon: IconOne,
+  },
+  {
+    name: "Automations",
+    description: "Create your own targeted content",
+    href: "##",
+    icon: IconTwo,
+  },
+  {
+    name: "Reports",
+    description: "Keep track of your growth",
+    href: "##",
+    icon: IconThree,
+  },
+];
+
+export default function PresetPrompts() {
+  return (
+    <div className="top-16 w-full max-w-sm px-4">
+      <Popover className="relative">
+        {({ open }) => (
+          <>
+            <Popover.Button
+              className={`
+                ${open ? "text-white" : "text-white/90"}
+                group inline-flex items-center rounded-md bg-orange-700 px-3 py-2 text-base font-medium hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75`}
+            >
+              <span>Solutions</span>
+              <ChevronDownIcon
+                className={`${open ? "text-orange-300" : "text-orange-300/70"}
+                  ml-2 h-5 w-5 transition duration-150 ease-in-out group-hover:text-orange-300/80`}
+                aria-hidden="true"
+              />
+            </Popover.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-sm -translate-x-1/2 transform px-4 sm:px-0 lg:max-w-3xl">
+                <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black/5">
+                  <div className="relative grid gap-8 bg-white p-7 lg:grid-cols-2">
+                    {solutions.map((item) => (
+                      <a
+                        key={item.name}
+                        href={item.href}
+                        className="-m-3 flex items-center rounded-lg p-2 transition duration-150 ease-in-out hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-orange-500/50"
+                      >
+                        <div className="flex h-10 w-10 shrink-0 items-center justify-center text-white sm:h-12 sm:w-12">
+                          <item.icon aria-hidden="true" />
+                        </div>
+                        <div className="ml-4">
+                          <p className="text-sm font-medium text-gray-900">
+                            {item.name}
+                          </p>
+                          <p className="text-sm text-gray-500">
+                            {item.description}
+                          </p>
+                        </div>
+                      </a>
+                    ))}
+                  </div>
+                  <div className="bg-gray-50 p-4">
+                    <a
+                      href="##"
+                      className="flow-root rounded-md px-2 py-2 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-orange-500/50"
+                    >
+                      <span className="flex items-center">
+                        <span className="text-sm font-medium text-gray-900">
+                          Documentation
+                        </span>
+                      </span>
+                      <span className="block text-sm text-gray-500">
+                        Start integrating products and tools
+                      </span>
+                    </a>
+                  </div>
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </>
+        )}
+      </Popover>
+    </div>
+  );
+}
+
+function IconOne() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="48" height="48" rx="8" fill="#FFEDD5" />
+      <path
+        d="M24 11L35.2583 17.5V30.5L24 37L12.7417 30.5V17.5L24 11Z"
+        stroke="#FB923C"
+        strokeWidth="2"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.7417 19.8094V28.1906L24 32.3812L31.2584 28.1906V19.8094L24 15.6188L16.7417 19.8094Z"
+        stroke="#FDBA74"
+        strokeWidth="2"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20.7417 22.1196V25.882L24 27.7632L27.2584 25.882V22.1196L24 20.2384L20.7417 22.1196Z"
+        stroke="#FDBA74"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+}
+
+function IconTwo() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="48" height="48" rx="8" fill="#FFEDD5" />
+      <path
+        d="M28.0413 20L23.9998 13L19.9585 20M32.0828 27.0001L36.1242 34H28.0415M19.9585 34H11.8755L15.9171 27"
+        stroke="#FB923C"
+        strokeWidth="2"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.804 30H29.1963L24.0001 21L18.804 30Z"
+        stroke="#FDBA74"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+}
+
+function IconThree() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="48" height="48" rx="8" fill="#FFEDD5" />
+      <rect x="13" y="32" width="2" height="4" fill="#FDBA74" />
+      <rect x="17" y="28" width="2" height="8" fill="#FDBA74" />
+      <rect x="21" y="24" width="2" height="12" fill="#FDBA74" />
+      <rect x="25" y="20" width="2" height="16" fill="#FDBA74" />
+      <rect x="29" y="16" width="2" height="20" fill="#FB923C" />
+      <rect x="33" y="12" width="2" height="24" fill="#FB923C" />
+    </svg>
+  );
+}

frontend/app/globals.css

@@ -2,26 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
+* {
+  box-sizing: border-box;
 }
 
+html,
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  @apply text-black;
 }

frontend/app/layout.js

@@ -1,17 +1,21 @@
-import { Inter } from 'next/font/google'
-import './globals.css'
+import { Inter } from "next/font/google";
+import "./globals.css";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Real-time SDTurbo + WebRTC",
+  description: "",
+};
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="en" className="bg-gray-100">
+      <body className={inter.className}>
+        <div className="container flex align-center min-h-screen">
+          <div className="self-center w-full">{children}</div>
+        </div>
+      </body>
     </html>
-  )
+  );
 }

frontend/app/page.js

@@ -1,54 +1,22 @@
 "use client";
 
-import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { DailyProvider } from "@daily-co/daily-react";
+import Daily from "@daily-co/daily-js";
+import Call from "./components/Call";
 
 export default function Home() {
-  const [starting, setStarting] = useState(false);
-  const [roomUrl, setRoomUrl] = useState();
+  const [daily, setDaily] = useState();
 
-  async function start() {
-    setStarting(true);
+  useEffect(() => {
+    if (daily) return;
 
-    const apiUrl = `${
-      window.location.protocol === "https:" ? "https" : "http"
-    }:${window.location.host}`;
-
-    const resp = await fetch(`${process.env.API_URL || apiUrl}/start`, {
-      method: "POST",
-      mode: "cors",
-      cache: "no-cache",
-      credentials: "same-origin",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({}),
-    });
-
-    const data = await resp.json();
-
-    setRoomUrl(data.room_url);
-  }
+    setDaily(Daily.createCallObject());
+  }, [daily]);
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      {!starting ? (
-        <button
-          onClick={() => start()}
-          disabled={starting}
-          className="bg-white text-black rounded-xl p-4 px-6"
-        >
-          Connect
-        </button>
-      ) : (
-        <div>
-          {roomUrl ? (
-            <Link href={roomUrl}>Open Room</Link>
-          ) : (
-            "Waiting for bot to load..."
-          )}
-        </div>
-      )}
-    </main>
+    <DailyProvider callObject={daily}>
+      <Call />
+    </DailyProvider>
   );
 }

frontend/app/test/page.js

@@ -1,7 +0,0 @@
-export default function Test() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      Hi
-    </main>
-  );
-}

frontend/app/utils.js

@@ -0,0 +1,5 @@
+export const apiUrl =
+  process.env.NEXT_PUBLIC_API_URL ||
+  `${window.location.protocol === "https:" ? "https" : "http"}://${
+    window.location.host
+  }`;

frontend/env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=

frontend/next.config.js

@@ -1,6 +1,5 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
+module.exports = {
+  reactStrictMode: false,
   output: "export",
 };
-
-module.exports = nextConfig;

frontend/package.json

@@ -9,15 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@daily-co/daily-js": "^0.55.1",
+    "@daily-co/daily-react": "^0.16.0",
+    "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.0.18",
+    "next": "14.0.3",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.0.3"
+    "recoil": "^0.7.7"
   },
   "devDependencies": {
     "autoprefixer": "^10.0.1",
-    "postcss": "^8",
-    "tailwindcss": "^3.3.0",
     "eslint": "^8",
-    "eslint-config-next": "14.0.3"
+    "eslint-config-next": "14.0.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0"
   }
 }

frontend/tailwind.config.js

@@ -1,18 +1,28 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
+      container: {
+        center: true,
+        screens: {
+          sm: "640px",
+          md: "768px",
+          lg: "1024px",
+          xl: "1280px",
+          "2xl": "1280px",
+        },
+      },
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
     },
   },
   plugins: [],
-}
+};

frontend/yarn.lock

@@ -12,13 +12,34 @@
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
   integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
 
-"@babel/runtime@^7.23.2":
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.23.2":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.5.tgz#11edb98f8aeec529b82b211028177679144242db"
   integrity sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@daily-co/daily-js@^0.55.1":
+  version "0.55.1"
+  resolved "https://registry.yarnpkg.com/@daily-co/daily-js/-/daily-js-0.55.1.tgz#e4c8199d141c52f829f6ec1002fb514793b798d1"
+  integrity sha512-UaTFBHeGfeR+169uTuRSkcv0Sj9n2q5mORNs3Gez/rq0by9UHosnK7uO56AKvXCH/fR0dx/yLIR7p9Lamv2mkQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@sentry/browser" "^7.60.1"
+    bowser "^2.8.1"
+    dequal "^2.0.3"
+    events "^3.1.0"
+    fast-equals "^1.6.3"
+    lodash "^4.17.15"
+
+"@daily-co/daily-react@^0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@daily-co/daily-react/-/daily-react-0.16.0.tgz#02189d596999a0b3b1f208c8f19323637293f276"
+  integrity sha512-EP5QZs8WUBxrMI5Kzqdr8HYV+cbPZVMhYeMY1ycYHcZTb+p9V4ay4bSKYsYGCsH0Fut2sXOQc8p7UWl/mxmbXw==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    lodash.throttle "^4.1.1"
+
 "@eslint-community/eslint-utils@^4.2.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
@@ -51,6 +72,18 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.55.0.tgz#b721d52060f369aa259cf97392403cb9ce892ec6"
   integrity sha512-qQfo2mxH5yVom1kacMtZZJFVdW+E70mqHMJvVg6WTLo+VBuQJ4TojZlfWBjK0ve5BdEeNAVxOsl/nvNMpJOaJA==
 
+"@headlessui/react@^1.7.17":
+  version "1.7.17"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.17.tgz#a0ec23af21b527c030967245fd99776aa7352bc6"
+  integrity sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==
+  dependencies:
+    client-only "^0.0.1"
+
+"@heroicons/react@^2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.18.tgz#f80301907c243df03c7e9fd76c0286e95361f7c1"
+  integrity sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==
+
 "@humanwhocodes/config-array@^0.11.13":
   version "0.11.13"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297"
@@ -185,6 +218,66 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.6.0.tgz#1898e7a7b943680d757417a47fb10f5fcc230b39"
   integrity sha512-2/U3GXA6YiPYQDLGwtGlnNgKYBSwCFIHf8Y9LUY5VATHdtbLlU0Y1R3QoBnT0aB4qv/BEiVVsj7LJXoQCgJ2vA==
 
+"@sentry-internal/[email protected]":
+  version "7.86.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/feedback/-/feedback-7.86.0.tgz#01c7b509a3adc9cdd03658082daf29a6cae9cc8f"
+  integrity sha512-6rl0JYjmAKnhm4/fuFaROh4Ht8oi9f6ZeIcViCuGJcrGICZJJY0s+R77XJI78rNa82PYFrSCcnWXcGji4T8E7g==
+  dependencies:
+    "@sentry/core" "7.86.0"
+    "@sentry/types" "7.86.0"
+    "@sentry/utils" "7.86.0"
+
+"@sentry-internal/[email protected]":
+  version "7.86.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.86.0.tgz#657e80eb7d08d1030393902c1a7bc47fc39ccb2d"
+  integrity sha512-b4dUsNWlPWRwakGwR7bhOkqiFlqQszH1hhVFwrm/8s3kqEBZ+E4CeIfCvuHBHQ1cM/fx55xpXX/BU163cy+3iQ==
+  dependencies:
+    "@sentry/core" "7.86.0"
+    "@sentry/types" "7.86.0"
+    "@sentry/utils" "7.86.0"
+
+"@sentry/browser@^7.60.1":
+  version "7.86.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.86.0.tgz#9b828a444949f8fe4a47d830cc87b8b52275c24e"
+  integrity sha512-nfYWpVOmug+W7KJO7/xhA1JScMZcYHcoOVHLsUFm4znx51U4qZEk+zZDM11Q2Nw6MuDyEYg6bsH1QCwaoC6nLw==
+  dependencies:
+    "@sentry-internal/feedback" "7.86.0"
+    "@sentry-internal/tracing" "7.86.0"
+    "@sentry/core" "7.86.0"
+    "@sentry/replay" "7.86.0"
+    "@sentry/types" "7.86.0"
+    "@sentry/utils" "7.86.0"
+
+"@sentry/[email protected]":
+  version "7.86.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.86.0.tgz#d01f538783dee9a0d79141a63145392ad2c1cb89"
+  integrity sha512-SbLvqd1bRYzhDS42u7GMnmbDMfth/zRiLElQWbLK/shmuZzTcfQSwNNdF4Yj+VfjOkqPFgGmICHSHVUc9dh01g==
+  dependencies:
+    "@sentry/types" "7.86.0"
+    "@sentry/utils" "7.86.0"
+
+"@sentry/[email protected]":
+  version "7.86.0"
+  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.86.0.tgz#d001eac9687de3555efded9423d3cf00e8ae6d9f"
+  integrity sha512-YYZO8bfQSx1H87Te/zzyHPLHvExWiYwUfMWW68yGX+PPZIIzxaM81/iCQHkoucxlvuPCOtxCgf7RSMbsnqEa8g==
+  dependencies:
+    "@sentry-internal/tracing" "7.86.0"
+    "@sentry/core" "7.86.0"
+    "@sentry/types" "7.86.0"
+    "@sentry/utils" "7.86.0"
+
+"@sentry/[email protected]":
+  version "7.86.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.86.0.tgz#56ed2f5b15e8130ea5ecfbbc4102d88eaa3b3a67"
+  integrity sha512-pGAt0+bMfWgo0KG2epthfNV4Wae03tURpoxNjGo5Fr4cXxvLTSijSAQ6rmmO4bXBJ7+rErEjX30g30o/eEdP9g==
+
+"@sentry/[email protected]":
+  version "7.86.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.86.0.tgz#356ec19bf1e3e5c40935dd987fd15bee8c6b37ba"
+  integrity sha512-6PejFtw9VTFFy5vu0ks+U7Ozkqz+eMt+HN8AZKBKErYzX5/xs0kpkOcSRpu3ETdTYcZf8VAmLVgFgE2BE+3WuQ==
+  dependencies:
+    "@sentry/types" "7.86.0"
+
 "@swc/[email protected]":
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.2.tgz#85ea0c76450b61ad7d10a37050289eded783c27d"
@@ -439,6 +532,11 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
+bowser@^2.8.1:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
+  integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -518,7 +616,7 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
-[email protected]:
+[email protected], client-only@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
@@ -961,11 +1059,21 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+events@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-equals@^1.6.3:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-1.6.3.tgz#84839a1ce20627c463e1892f2ae316380c81b459"
+  integrity sha512-4WKW0AL5+WEqO0zWavAfYGY1qwLsBgE//DN4TTcVEN2UlINgkv9b3vm2iHicoenWKSX9mKWmGOsU/iI5IST7pQ==
+
 fast-glob@^3.2.9, fast-glob@^3.3.0, fast-glob@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
@@ -1195,6 +1303,11 @@ graphemer@^1.4.0:
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
+[email protected]:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hamt_plus/-/hamt_plus-1.0.2.tgz#e21c252968c7e33b20f6a1b094cd85787a265601"
+  integrity sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==
+
 has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
@@ -1571,6 +1684,16 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
+
+lodash@^4.17.15:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -1957,6 +2080,13 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+recoil@^0.7.7:
+  version "0.7.7"
+  resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.7.7.tgz#c5f2c843224384c9c09e4a62c060fb4c1454dc8e"
+  integrity sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==
+  dependencies:
+    hamt_plus "1.0.2"
+
 reflect.getprototypeof@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3"

server.py

@@ -1,4 +1,4 @@
-from fastapi import FastAPI, HTTPException
+from fastapi import FastAPI, Request, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import FileResponse, JSONResponse
@@ -26,41 +26,49 @@ app.add_middleware(
 # Mount the static directory
 app.mount("/static", StaticFiles(directory="frontend/out", html=True), name="static")
 
-def _start_bot(bot_path, args=None):
-    '''
+def _create_room():
     api_path = os.getenv("DAILY_API_PATH") or "https://api.daily.co/v1"
+    expiry_time = os.getenv("BOT_MAX_DURATION", 300)
+    daily_api_key = os.getenv("DAILY_API_KEY", None)
 
-    res = requests.post(
-        f"{api_path}/rooms",
-        headers={"Authorization": f"Bearer {daily_api_key}"},
-        json={
-            "properties": {
-                "exp": exp,
-                "enable_chat": True,
-                "enable_emoji_reactions": True,
-                "eject_at_room_exp": True,
-                "enable_prejoin_ui": False,
-            }
-        },
-    )
-    if res.status_code != 200:
-        return (
-            jsonify(
-                {
-                    "error": "Unable to create room",
-                    "status_code": res.status_code,
-                    "text": res.text,
+    try:
+        res = requests.post(
+            f"{api_path}/rooms",
+            headers={"Authorization": f"Bearer {daily_api_key}"},
+            json={
+                "properties": {
+                    "exp": time.time() + int(expiry_time),
+                    "eject_at_room_exp": True,
+                    "enable_prejoin_ui": False,
+                    "start_audio_off": True,
+                    "permissions": {
+                        "canSend": ["video"]
+                    }
                 }
-            ),
-            500,
+            }
         )
-    '''
-
-    daily_room_url = os.getenv("DAILY_ROOM_URL") #res.json()["url"]
-    daily_room_name = get_room_name(daily_room_url)
+        if res.status_code != 200:
+            return JSONResponse({
+                "error": "Unable to create room",
+                "status_code": res.status_code,
+                "text": res.text
+            }, 500)
+        
+        data = res.json()
+        print(data)
+        return JSONResponse({"room_url": data["url"], "privacy": data["privacy"]})
+    
+    except Exception:
+        return JSONResponse({"error": Exception})
+        
+
+def _start_bot(bot_path, room_url, args=None):
+    daily_room_name = get_room_name(room_url)
     daily_api_path = os.getenv("DAILY_API_PATH")
     daily_api_key = os.getenv("DAILY_API_KEY")
 
+    #@TODO error handling here
+    
     if args:
         extra_args = " ".join([f'-{x[0]} "{x[1]}"' for x in args])
     else:
@@ -68,7 +76,7 @@ def _start_bot(bot_path, args=None):
 
     proc = subprocess.Popen(
         [
-            f"python3 {bot_path} -u {daily_room_url} -k {daily_api_key} {extra_args}"
+            f"python3 {bot_path} -u {room_url} -k {daily_api_key} {extra_args}"
         ],
         shell=True,
         bufsize=1,
@@ -87,12 +95,17 @@ def _start_bot(bot_path, args=None):
             break
     print(f"Took {attempts} attempts to join room {daily_room_name}")
 
-    return JSONResponse({"room_url": daily_room_url})
+    return JSONResponse({"started": True})
 
 
 @app.post("/start")
-async def start():
-    return _start_bot("./app/bot.py")
+async def start(request: Request):
+    data = await request.json()
+    return _start_bot("./app/bot.py", data.room_url)
+
+@app.post("/create")
+async def create():
+    return _create_room()
 
 @app.get("/{path_name:path}", response_class=FileResponse)
 async def catch_all(path_name: str):