Spaces:

HomemadeMirpur
/

LiveK

Paused

App Files Files Community

SakibAhmed commited on Oct 5, 2025

Commit

efd7f96

verified ·

1 Parent(s): bf4595d

Upload 2 files

Browse files

Files changed (2) hide show

server.py +20 -16
templates/index.html +107 -16

server.py CHANGED Viewed

@@ -37,7 +37,7 @@ def index():
 @app.route("/get-token", methods=["GET"])
 def get_token():
-    """Generates a Livekit token for a user to join the room."""
     identity = f"user-{uuid.uuid4()}"
     # Create a token with permissions to join a specific room
@@ -45,32 +45,29 @@ def get_token():
         api.AccessToken(LIVEKIT_API_KEY, LIVEKIT_API_SECRET)
         .with_identity(identity)
         .with_name(f"Visitor-{identity}")
-        # CORRECTED: api.VideoGrant changed to api.VideoGrants
         .with_grants(api.VideoGrants(room_join=True, room=ROOM_NAME))
     )
-    return flask.jsonify({"token": token.to_jwt()})
 def run_agent_worker():
     """
     Runs the app.py agent worker in a subprocess.
-    This worker needs its own token to connect to the room.
     """
     print("Starting Livekit Agent worker...")
-    # The agent also needs a token to join the room
     agent_token = (
         api.AccessToken(LIVEKIT_API_KEY, LIVEKIT_API_SECRET)
         .with_identity("devraze-agent")
         .with_name("DevRaze")
-        # CORRECTED: api.VideoGrant changed to api.VideoGrants
         .with_grants(api.VideoGrants(room_join=True, room=ROOM_NAME, room_admin=True, hidden=True))
     )
-    # The `livekit-agent` CLI is the standard way to run agent workers
-    # It takes the URL and token as arguments.
-    # We pass the module and class name of our agent.
     command = [
         "livekit-agent",
         "run-agent",
@@ -82,14 +79,21 @@ def run_agent_worker():
     ]
     try:
-        # Using subprocess.run to block and see output for debugging
-        # In a real production scenario, you might use Popen for non-blocking
-        subprocess.run(command, check=True)
-    except subprocess.CalledProcessError as e:
-        print(f"Agent worker failed with error: {e}")
     except FileNotFoundError:
         print("Error: 'livekit-agent' command not found.")
-        print("Please make sure you have installed the livekit-agents package correctly.")
 if __name__ == "__main__":
@@ -98,5 +102,5 @@ if __name__ == "__main__":
     agent_thread.daemon = True
     agent_thread.start()
-    # Run the Flask app for the frontend and token generation
     app.run(host="0.0.0.0", port=7860)

 @app.route("/get-token", methods=["GET"])
 def get_token():
+    """Generates a Livekit token and returns it with the correct WS URL."""
     identity = f"user-{uuid.uuid4()}"
     # Create a token with permissions to join a specific room
         api.AccessToken(LIVEKIT_API_KEY, LIVEKIT_API_SECRET)
         .with_identity(identity)
         .with_name(f"Visitor-{identity}")
         .with_grants(api.VideoGrants(room_join=True, room=ROOM_NAME))
     )
+    # FIX: Return both the token AND the Livekit URL from the environment
+    return flask.jsonify({
+        "token": token.to_jwt(),
+        "livekitUrl": LIVEKIT_URL
+    })
 def run_agent_worker():
     """
     Runs the app.py agent worker in a subprocess.
     """
     print("Starting Livekit Agent worker...")
     agent_token = (
         api.AccessToken(LIVEKIT_API_KEY, LIVEKIT_API_SECRET)
         .with_identity("devraze-agent")
         .with_name("DevRaze")
         .with_grants(api.VideoGrants(room_join=True, room=ROOM_NAME, room_admin=True, hidden=True))
     )
     command = [
         "livekit-agent",
         "run-agent",
     ]
     try:
+        # Using Popen instead of run so it doesn't block, but streams output
+        process = subprocess.Popen(
+            command,
+            stdout=subprocess.PIPE,
+            stderr=subprocess.STDOUT,
+            text=True
+        )
+        # Print agent logs to the main console
+        for line in process.stdout:
+            print(f"[AGENT] {line.strip()}")
     except FileNotFoundError:
         print("Error: 'livekit-agent' command not found.")
+    except Exception as e:
+        print(f"Error starting agent: {e}")
 if __name__ == "__main__":
     agent_thread.daemon = True
     agent_thread.start()
+    # Run the Flask app
     app.run(host="0.0.0.0", port=7860)

templates/index.html CHANGED Viewed

@@ -60,6 +60,7 @@
             padding: 10px;
             border-radius: 4px;
             transition: all 0.3s ease;
         }
         .status-disconnected {
@@ -103,23 +104,48 @@
             color: #888;
             cursor: not-allowed;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>DevRaze, the Roastmaster AI</h1>
-        <p>Embedded in Rajesh Yarra’s portfolio. Ask me anything about him. I dare you. I promise it won't crash... probably.</p>
-        <div id="status" class="status-disconnected">Status: Disconnected</div>
         <button id="connect-button">Connect Microphone</button>
     </div>
     <script>
         const connectButton = document.getElementById('connect-button');
         const statusDiv = document.getElementById('status');
-        // This will be automatically provided by Livekit when you deploy
-        // For local dev, you'll set LIVEKIT_URL in your .env
-        const LIVEKIT_URL = `wss://${window.location.hostname}`;
         const TOKEN_ENDPOINT = '/get-token';
         let room = null;
@@ -135,49 +161,75 @@
             connectButton.disabled = true;
             connectButton.textContent = "Initializing...";
-            updateStatus('Connecting...', 'status-connecting');
             try {
-                // Fetch a token from our server
                 const resp = await fetch(TOKEN_ENDPOINT);
                 if (!resp.ok) {
-                    throw new Error(`Failed to fetch token: ${resp.status} ${resp.statusText}`);
                 }
-                const { token } = await resp.json();
-                // Create and configure the room
                 room = new LivekitClient.Room({
                     audioCaptureDefaults: {
                         autoGainControl: true,
                         noiseSuppression: true,
                     },
                 });
-                // Set up event listeners
                 room.on(LivekitClient.RoomEvent.Disconnected, () => {
                     console.log('Disconnected from room');
                     handleDisconnect();
                 });
-                // Connect to the room
-                await room.connect(LIVEKIT_URL, token);
                 console.log('Successfully connected to room', room.name);
-                // Start microphone
                 await room.localParticipant.setMicrophoneEnabled(true);
                 console.log('Microphone enabled');
                 // Update UI for connected state
                 isConnected = true;
-                updateStatus('Connected. Start talking!', 'status-connected');
                 connectButton.textContent = "Disconnect";
                 connectButton.disabled = false;
             } catch (error) {
                 console.error('Connection failed:', error);
-                updateStatus(`Error: ${error.message}`, 'status-disconnected');
                 connectButton.textContent = "Connect Microphone";
                 connectButton.disabled = false;
             }
         }
@@ -190,6 +242,7 @@
             updateStatus('Disconnected', 'status-disconnected');
             connectButton.textContent = "Connect Microphone";
             connectButton.disabled = false;
         }
         connectButton.addEventListener('click', () => {
@@ -199,6 +252,44 @@
                 connectToRoom();
             }
         });
     </script>
 </body>

             padding: 10px;
             border-radius: 4px;
             transition: all 0.3s ease;
+            word-break: break-word; /* Prevent long errors from breaking layout */
         }
         .status-disconnected {
             color: #888;
             cursor: not-allowed;
         }
+        /* Visualizer bars (optional enhancement) */
+        #visualizer {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 30px;
+            margin-top: 20px;
+            gap: 3px;
+            opacity: 0;
+            transition: opacity 0.5s;
+        }
+        .bar {
+            width: 4px;
+            background-color: var(--secondary-color);
+            border-radius: 2px;
+            height: 5px;
+            transition: height 0.1s ease;
+        }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>DevRaze, the Roastmaster AI</h1>
+        <p>Embedded in Rajesh Yarra’s portfolio. Ask me anything about him. I dare you.</p>
+        <div id="status" class="status-disconnected">Status: Ready to roast.</div>
         <button id="connect-button">Connect Microphone</button>
+        <!-- Simple visualizer -->
+        <div id="visualizer">
+            <div class="bar"></div><div class="bar"></div><div class="bar"></div>
+            <div class="bar"></div><div class="bar"></div>
+        </div>
     </div>
     <script>
         const connectButton = document.getElementById('connect-button');
         const statusDiv = document.getElementById('status');
+        const visualizer = document.getElementById('visualizer');
+        const bars = document.querySelectorAll('.bar');
         const TOKEN_ENDPOINT = '/get-token';
         let room = null;
             connectButton.disabled = true;
             connectButton.textContent = "Initializing...";
+            updateStatus('Getting credentials...', 'status-connecting');
             try {
+                // 1. Fetch token and Livekit URL from our server
                 const resp = await fetch(TOKEN_ENDPOINT);
                 if (!resp.ok) {
+                    throw new Error(`Server error: ${resp.statusText}`);
                 }
+                const data = await resp.json();
+                if (!data.token || !data.livekitUrl) {
+                     throw new Error("Server didn't return token or URL");
+                }
+                updateStatus('Connecting to Livekit...', 'status-connecting');
+                // 2. Create the room
                 room = new LivekitClient.Room({
                     audioCaptureDefaults: {
                         autoGainControl: true,
+                        echoCancellation: true,
                         noiseSuppression: true,
                     },
+                    adaptiveStream: true,
+                    dynacast: true,
                 });
+                // Setup Room Event Listeners
                 room.on(LivekitClient.RoomEvent.Disconnected, () => {
                     console.log('Disconnected from room');
                     handleDisconnect();
                 });
+                // Handle incoming audio from the Agent
+                room.on(LivekitClient.RoomEvent.TrackSubscribed, (track, publication, participant) => {
+                    if (track.kind === LivekitClient.Track.Kind.Audio) {
+                        const element = track.attach();
+                        document.body.appendChild(element);
+                        startVisualizer(track); // Optional: start simple visualizer
+                    }
+                });
+                // 3. Connect to Livekit Cloud using the data from server
+                await room.connect(data.livekitUrl, data.token);
                 console.log('Successfully connected to room', room.name);
+                updateStatus('Activating microphone...', 'status-connecting');
+                // 4. Publish local microphone
                 await room.localParticipant.setMicrophoneEnabled(true);
                 console.log('Microphone enabled');
                 // Update UI for connected state
                 isConnected = true;
+                updateStatus('Connected. Prepare to be roasted.', 'status-connected');
                 connectButton.textContent = "Disconnect";
                 connectButton.disabled = false;
             } catch (error) {
                 console.error('Connection failed:', error);
+                // Make error readable
+                let errorMsg = error.message;
+                if (errorMsg.includes('could not establish signal connection')) {
+                    errorMsg = "Could not connect to Livekit Cloud. Check server logs.";
+                }
+                updateStatus(`Error: ${errorMsg}`, 'status-disconnected');
                 connectButton.textContent = "Connect Microphone";
                 connectButton.disabled = false;
+                handleDisconnect(); // Ensure cleanup
             }
         }
             updateStatus('Disconnected', 'status-disconnected');
             connectButton.textContent = "Connect Microphone";
             connectButton.disabled = false;
+            stopVisualizer();
         }
         connectButton.addEventListener('click', () => {
                 connectToRoom();
             }
         });
+        // --- Simple Audio Visualizer (Optional) ---
+        let audioContext, analyser, dataArray, visualizerFrame;
+        function startVisualizer(track) {
+            visualizer.style.opacity = 1;
+            if (!audioContext) {
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            }
+            const stream = new MediaStream([track.mediaStreamTrack]);
+            const source = audioContext.createMediaStreamSource(stream);
+            analyser = audioContext.createAnalyser();
+            analyser.fftSize = 32;
+            source.connect(analyser);
+            dataArray = new Uint8Array(analyser.frequencyBinCount);
+            animateVisualizer();
+        }
+        function animateVisualizer() {
+            if (!isConnected || !analyser) return;
+            analyser.getByteFrequencyData(dataArray);
+            // Map frequency data to the 5 bars
+            const indices = [1, 3, 5, 7, 9]; // Pick some frequencies
+            bars.forEach((bar, i) => {
+                const value = dataArray[indices[i]] || 0;
+                const height = Math.max(5, (value / 255) * 30);
+                bar.style.height = `${height}px`;
+            });
+            visualizerFrame = requestAnimationFrame(animateVisualizer);
+        }
+        function stopVisualizer() {
+            visualizer.style.opacity = 0;
+            if (visualizerFrame) cancelAnimationFrame(visualizerFrame);
+            // Reset bars
+            bars.forEach(bar => bar.style.height = '5px');
+        }
     </script>
 </body>