added ui elements

frontend/app/components/Call.js

@@ -1,6 +1,5 @@
 "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";
@@ -8,7 +7,11 @@ 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";
+import {
+  DailyVideo,
+  useLocalSessionId,
+  useParticipantIds,
+} from "@daily-co/daily-react";
 
 const STATE_IDLE = "idle";
 const STATE_JOINING = "joining";
@@ -22,6 +25,7 @@ export default function Call() {
   const [roomUrl, setRoomUrl] = useState();
   const [botState, setBotState] = useState(BOT_STATE_STARTING);
   const localSessionId = useLocalSessionId();
+  const participantIds = useParticipantIds({ filter: "remote" });
 
   const start = useCallback(async () => {
     const resp = await fetch(`${apiUrl}/start`, {
@@ -61,6 +65,7 @@ export default function Call() {
   // Main call loop
   return (
     <main className="container py-24">
+      {roomUrl}
       <div className="grid grid-cols-2 grid-flow-col gap-4">
         <div>
           <Card headerText="Local Webcam" HeaderIcon={VideoCameraIcon}>
@@ -76,7 +81,11 @@ export default function Call() {
           <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 />
+                {participantIds.length ? (
+                  <DailyVideo sessionId={participantIds[0]} />
+                ) : (
+                  <Avatar />
+                )}
               </div>
             </div>
           </Card>

server.py

@@ -68,7 +68,7 @@ def _start_bot(bot_path, room_url, args=None):
     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:
@@ -101,7 +101,7 @@ def _start_bot(bot_path, room_url, args=None):
 @app.post("/start")
 async def start(request: Request):
     data = await request.json()
-    return _start_bot("./app/bot.py", data.room_url)
+    return _start_bot("./app/bot.py",data['room_url'])
 
 @app.post("/create")
 async def create():