Update UI with new Activity event stream from #195

- use new metrics data instead of log parsing
- auto-start events connection to server, improves responsiveness
- remove unnecessary libraries and code

ui/src/contexts/APIProvider.tsx

@@ -44,16 +44,16 @@ interface APIEventEnvelope {
 const APIContext = createContext<APIProviderType | undefined>(undefined);
 type APIProviderProps = {
   children: ReactNode;
+  autoStartAPIEvents?: boolean;
 };
 
-export function APIProvider({ children }: APIProviderProps) {
+export function APIProvider({ children, autoStartAPIEvents = true }: APIProviderProps) {
   const [proxyLogs, setProxyLogs] = useState("");
   const [upstreamLogs, setUpstreamLogs] = useState("");
   const [metrics, setMetrics] = useState<Metrics[]>([]);
   const apiEventSource = useRef<EventSource | null>(null);
 
   const [models, setModels] = useState<Model[]>([]);
-  const modelStatusEventSource = useRef<EventSource | null>(null);
 
   const appendLog = useCallback((newData: string, setter: React.Dispatch<React.SetStateAction<string>>) => {
     setter((prev) => {
@@ -66,6 +66,7 @@ export function APIProvider({ children }: APIProviderProps) {
     if (!enabled) {
       apiEventSource.current?.close();
       apiEventSource.current = null;
+      setMetrics([]);
       return;
     }
 
@@ -101,7 +102,7 @@ export function APIProvider({ children }: APIProviderProps) {
             case "metrics":
               {
                 const newMetric = JSON.parse(message.data) as Metrics;
-                setMetrics(prevMetrics => {
+                setMetrics((prevMetrics) => {
                   return [newMetric, ...prevMetrics];
                 });
               }
@@ -125,10 +126,14 @@ export function APIProvider({ children }: APIProviderProps) {
   }, []);
 
   useEffect(() => {
+    if (autoStartAPIEvents) {
+      enableAPIEvents(true);
+    }
+
     return () => {
-      modelStatusEventSource.current?.close();
+      enableAPIEvents(false);
     };
-  }, []);
+  }, [enableAPIEvents, autoStartAPIEvents]);
 
   const listModels = useCallback(async (): Promise<Model[]> => {
     try {

ui/src/lib/Utils.ts

@@ -1,18 +0,0 @@
-export function processEvalTimes(text: string) {
-  const lines = text.match(/^ *eval time.*$/gm) || [];
-
-  let totalTokens = 0;
-  let totalTime = 0;
-
-  lines.forEach((line) => {
-    const tokensMatch = line.match(/\/\s*(\d+)\s*tokens/);
-    const timeMatch = line.match(/=\s*(\d+\.\d+)\s*ms/);
-
-    if (tokensMatch) totalTokens += parseFloat(tokensMatch[1]);
-    if (timeMatch) totalTime += parseFloat(timeMatch[1]);
-  });
-
-  const avgTokensPerSecond = totalTime > 0 ? totalTokens / (totalTime / 1000) : 0;
-
-  return [lines.length, totalTokens, Math.round(avgTokensPerSecond * 100) / 100];
-}

ui/src/pages/Activity.tsx

@@ -1,17 +1,10 @@
-import { useState, useEffect } from 'react';
-import { useAPI } from '../contexts/APIProvider';
+import { useState, useEffect } from "react";
+import { useAPI } from "../contexts/APIProvider";
 
 const ActivityPage = () => {
-  const { metrics, enableAPIEvents } = useAPI();
+  const { metrics } = useAPI();
   const [error, setError] = useState<string | null>(null);
 
-  useEffect(() => {
-    enableAPIEvents(true);
-    return () => {
-      enableAPIEvents(false);
-    };
-  }, []);
-
   useEffect(() => {
     if (metrics.length > 0) {
       setError(null);
@@ -23,11 +16,11 @@ const ActivityPage = () => {
   };
 
   const formatSpeed = (speed: number) => {
-    return speed.toFixed(2) + ' t/s';
+    return speed.toFixed(2) + " t/s";
   };
 
   const formatDuration = (ms: number) => {
-    return (ms / 1000).toFixed(2) + 's';
+    return (ms / 1000).toFixed(2) + "s";
   };
 
   if (error) {
@@ -54,47 +47,23 @@ const ActivityPage = () => {
           <table className="min-w-full divide-y">
             <thead>
               <tr>
-                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
-                  Timestamp
-                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
-                  Model
-                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
-                  Input Tokens
-                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
-                  Output Tokens
-                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
-                  Processing Speed
-                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
-                  Duration
-                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Timestamp</th>
+                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Model</th>
+                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Input Tokens</th>
+                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Output Tokens</th>
+                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Processing Speed</th>
+                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Duration</th>
               </tr>
             </thead>
             <tbody className="divide-y">
               {metrics.map((metric, index) => (
                 <tr key={`${metric.id}-${index}`}>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm">
-                    {formatTimestamp(metric.timestamp)}
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm">
-                    {metric.model}
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm">
-                    {metric.input_tokens.toLocaleString()}
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm">
-                    {metric.output_tokens.toLocaleString()}
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm">
-                    {formatSpeed(metric.tokens_per_second)}
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm">
-                    {formatDuration(metric.duration_ms)}
-                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm">{formatTimestamp(metric.timestamp)}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm">{metric.model}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm">{metric.input_tokens.toLocaleString()}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm">{metric.output_tokens.toLocaleString()}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm">{formatSpeed(metric.tokens_per_second)}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm">{formatDuration(metric.duration_ms)}</td>
                 </tr>
               ))}
             </tbody>

ui/src/pages/LogViewer.tsx

@@ -3,14 +3,7 @@ import { useAPI } from "../contexts/APIProvider";
 import { usePersistentState } from "../hooks/usePersistentState";
 
 const LogViewer = () => {
-  const { proxyLogs, upstreamLogs, enableAPIEvents } = useAPI();
-
-  useEffect(() => {
-    enableAPIEvents(true);
-    return () => {
-      enableAPIEvents(false);
-    };
-  }, []);
+  const { proxyLogs, upstreamLogs } = useAPI();
 
   return (
     <div className="flex flex-col gap-5" style={{ height: "calc(100vh - 125px)" }}>

ui/src/pages/Models.tsx

@@ -1,11 +1,10 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useAPI } from "../contexts/APIProvider";
 import { LogPanel } from "./LogViewer";
-import { processEvalTimes } from "../lib/Utils";
 import { usePersistentState } from "../hooks/usePersistentState";
 
 export default function ModelsPage() {
-  const { models, unloadAllModels, loadModel, upstreamLogs, enableAPIEvents } = useAPI();
+  const { models, unloadAllModels, loadModel, upstreamLogs, metrics } = useAPI();
   const [isUnloading, setIsUnloading] = useState(false);
   const [showUnlisted, setShowUnlisted] = usePersistentState("showUnlisted", true);
 
@@ -13,13 +12,6 @@ export default function ModelsPage() {
     return models.filter((model) => showUnlisted || !model.unlisted);
   }, [models, showUnlisted]);
 
-  useEffect(() => {
-    enableAPIEvents(true);
-    return () => {
-      enableAPIEvents(false);
-    };
-  }, []);
-
   const handleUnloadAllModels = useCallback(async () => {
     setIsUnloading(true);
     try {
@@ -34,9 +26,12 @@ export default function ModelsPage() {
     }
   }, []);
 
-  const [totalLines, totalTokens, avgTokensPerSecond] = useMemo(() => {
-    return processEvalTimes(upstreamLogs);
-  }, [upstreamLogs]);
+  const [totalRequests, totalTokens, avgTokensPerSecond] = useMemo(() => {
+    const totalTokens = metrics.reduce((sum, m) => sum + m.input_tokens + m.output_tokens, 0);
+    const totalSeconds = metrics.reduce((sum, m) => sum + m.duration_ms / 1000, 0);
+    const avgTokensPerSecond = totalSeconds > 0 ? totalTokens / totalSeconds : 0;
+    return [metrics.length, totalTokens, avgTokensPerSecond.toFixed(2)];
+  }, [metrics]);
 
   return (
     <div>
@@ -96,14 +91,13 @@ export default function ModelsPage() {
 
         {/* Right Column */}
         <div className="w-full md:w-1/2 flex flex-col" style={{ height: "calc(100vh - 125px)" }}>
-          <div className="card mb-4 min-h-[250px]">
-            <h2>Log Stats</h2>
-            <p className="italic my-2">note: eval logs from llama-server</p>
+          <div className="card mb-4 min-h-[225px]">
+            <h2>Chat Activity</h2>
             <table className="w-full border border-gray-200">
               <tbody>
                 <tr className="border-b border-gray-200">
                   <td className="py-2 px-4 font-medium border-r border-gray-200">Requests</td>
-                  <td className="py-2 px-4 text-right">{totalLines}</td>
+                  <td className="py-2 px-4 text-right">{totalRequests}</td>
                 </tr>
                 <tr className="border-b border-gray-200">
                   <td className="py-2 px-4 font-medium border-r border-gray-200">Total Tokens Generated</td>