Upload folder using huggingface_hub

frontend/src/components/views/chat/chat.tsx

@@ -30,6 +30,7 @@ import SampleTasks from "./sampletasks";
 import ProgressBar from "./progressbar";
 import { Tabs } from "antd";
 import Vision from "./vision";
+import Logs from "./logs";
 
 // Extend RunStatus for sidebar status reporting
 type SidebarRunStatus = BaseRunStatus | "final_answer_awaiting_input";
@@ -1361,6 +1362,15 @@ export default function ChatView({
               </div>
             ),
           },
+          {
+            key: "logs",
+            label: "Logs",
+            children: (
+              <div className="h-[calc(100vh-150px)] w-full">
+                <Logs />
+              </div>
+            ),
+          },
         ]}
       />
     </div>

frontend/src/components/views/chat/logs.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { getServerUrl } from "../../utils";
+
+export default function Logs() {
+  const [logs, setLogs] = React.useState<string[]>([]);
+  const logsEndRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    // Determine the WebSocket URL based on the server URL
+    const serverUrl = getServerUrl();
+    const isSecure = serverUrl.startsWith("https://");
+    const wsProtocol = isSecure ? "wss://" : "ws://";
+    // Usually getServerUrl returns something like http://localhost:8081/api
+    const domainAndPath = serverUrl.replace(/^https?:\/\//, "");
+    
+    // Fallback if getServerUrl returns something unexpected
+    let wsUrl = "";
+    if (domainAndPath.includes("/api")) {
+      wsUrl = `${wsProtocol}${domainAndPath}/ws/app_logs`;
+    } else {
+      wsUrl = `${wsProtocol}${domainAndPath}/api/ws/app_logs`;
+    }
+
+    const socket = new WebSocket(wsUrl);
+
+    socket.onmessage = (event) => {
+      setLogs((prev) => {
+        // Keep the last 1000 logs to prevent memory issues
+        const newLogs = [...prev, event.data];
+        if (newLogs.length > 1000) {
+          return newLogs.slice(newLogs.length - 1000);
+        }
+        return newLogs;
+      });
+    };
+
+    socket.onclose = () => {
+      console.log("Log WebSocket connection closed");
+    };
+
+    return () => {
+      socket.close();
+    };
+  }, []);
+
+  React.useEffect(() => {
+    // Auto-scroll to bottom when new logs arrive
+    if (logsEndRef.current) {
+      logsEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [logs]);
+
+  return (
+    <div className="h-full w-full bg-[#1e1e1e] text-green-400 font-mono text-xs p-4 overflow-y-auto rounded-md shadow-inner">
+      {logs.length === 0 ? (
+        <div className="opacity-50 text-gray-500 italic">Waiting for logs...</div>
+      ) : (
+        logs.map((log, index) => (
+          <div key={index} className="whitespace-pre-wrap mb-1 break-all">
+            {log}
+          </div>
+        ))
+      )}
+      <div ref={logsEndRef} />
+    </div>
+  );
+}

src/magentic_ui/backend/web/routes/ws.py

@@ -14,6 +14,44 @@ from ...utils.utils import construct_task
 router = APIRouter()
 
 
+class LogStreamer:
+    def __init__(self):
+        self.queues: list[asyncio.Queue] = []
+
+    def sink(self, message):
+        record = message.record
+        log_str = f"{record['time'].strftime('%Y-%m-%d %H:%M:%S.%f')[:-3]} | {record['level'].name:<8} | {record['name']}:{record['function']}:{record['line']} - {record['message']}"
+        for q in self.queues:
+            # Non-blocking put, skip if full to avoid blocking the logger
+            try:
+                q.put_nowait(log_str)
+            except asyncio.QueueFull:
+                pass
+
+log_streamer = LogStreamer()
+logger.add(log_streamer.sink, format="{message}")
+
+@router.websocket("/app_logs")
+async def app_logs_websocket(websocket: WebSocket):
+    """WebSocket endpoint to stream application logs"""
+    await websocket.accept()
+    queue = asyncio.Queue(maxsize=1000)
+    log_streamer.queues.append(queue)
+    try:
+        while True:
+            # Wait for a log message
+            log_str = await queue.get()
+            # Send the log message to the client
+            await websocket.send_text(log_str)
+    except WebSocketDisconnect:
+        pass
+    except Exception as e:
+        logger.error(f"Error streaming logs: {e}")
+    finally:
+        if queue in log_streamer.queues:
+            log_streamer.queues.remove(queue)
+
+
 @router.websocket("/runs/{run_id}")
 async def run_websocket(
     websocket: WebSocket,