Update app.py

app.py

@@ -1,11 +1,218 @@
-from flask import Flask, render_template_string
+from flask import Flask, render_template, Response
 import requests
 import json
 from threading import Lock
+import time
+from datetime import datetime, timedelta
 
 app = Flask(__name__)
 
-lightModeStyle = """
+# Global variables to store metrics data, updated by background threads
+metrics_data = {}
+server_status = {}  # {server_id: last_seen_timestamp}
+summary_data = {
+    "totalServers": 0,
+    "onlineServers": 0,
+    "offlineServers": 0,
+    "totalUpload": 0,
+    "totalDownload": 0,
+}
+data_lock = Lock()  # Lock for thread-safe access to metrics_data and server_status
+last_fetch_time = datetime.min  # Initialize to a time in the distant past
+
+USERNAME = 'yangtb24'  # Replace with your Hugging Face username
+FETCH_INTERVAL = 300  # Fetch instances every 5 minutes (seconds)
+SSE_UPDATE_INTERVAL = 2 # Update SSE connections and metrics every 2 seconds (for display)
+SSE_TIMEOUT = 10 # Consider a server offline after this many seconds without updates
+
+
+def fetch_instances():
+    global last_fetch_time
+    if datetime.now() - last_fetch_time < timedelta(seconds=FETCH_INTERVAL):
+        return  # Don't fetch if within the interval
+
+    try:
+        response = requests.get(f"https://huggingface.co/api/spaces?author={USERNAME}")
+        response.raise_for_status()  # Raise an exception for bad status codes
+        user_instances = response.json()
+        instance_ids = [instance["id"].split('/')[1] for instance in user_instances]
+
+        with data_lock:
+            # Remove old servers
+            for server_id in list(server_status.keys()):
+                if not any(server_id in instance_id for instance_id in instance_ids):
+                    del server_status[server_id]
+                    if server_id in metrics_data: # Check if server_id exists before deleting
+                        del metrics_data[server_id]
+
+
+            # Add new connections (if any).  Connections are made in the get_metrics_stream() function.
+            for instance_id in instance_ids:
+                if not any(instance_id in server_id for server_id in server_status):
+                     server_status[instance_id] = 0  # Initialize with 0 (will be updated by SSE)
+
+        last_fetch_time = datetime.now()
+
+    except requests.exceptions.RequestException as e:
+        print(f"Error fetching instances: {e}")
+
+
+def format_bytes(bytes_value):
+    if bytes_value == 0:
+        return '0 B'
+    k = 1024
+    sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+    i = 0
+    while bytes_value >= k and i < len(sizes) - 1:
+        bytes_value /= k
+        i += 1
+    return f"{bytes_value:.2f} {sizes[i]}"
+
+
+def update_summary():
+    global summary_data
+    with data_lock:
+        now = time.time()
+        online_count = 0
+        offline_count = 0
+        total_upload = 0
+        total_download = 0
+
+        for server_id, last_seen in server_status.items():
+            is_online = (now - last_seen) < SSE_TIMEOUT
+
+            if is_online:
+                online_count += 1
+                if server_id in metrics_data:  # Make sure server_id exists
+                    total_upload += metrics_data[server_id].get('tx_bps', 0)
+                    total_download += metrics_data[server_id].get('rx_bps', 0)
+            else:
+                offline_count += 1
+
+
+        summary_data = {
+            "totalServers": len(server_status),
+            "onlineServers": online_count,
+            "offlineServers": offline_count,
+            "totalUpload": total_upload,
+            "totalDownload": total_download,
+        }
+
+
+def get_metrics_stream():
+    """
+    Generator function for the Server-Sent Events (SSE) stream.
+    """
+
+    while True:
+        fetch_instances() # fetch instances periodically
+
+        with data_lock:
+            # Prepare data for all servers
+            all_servers_data = []
+            for server_id in server_status:
+                instance_id = server_id #instance and server are the same here.
+                owner = USERNAME
+
+                if server_id not in metrics_data:
+                    # Attempt to establish initial connection (important for new instances)
+                    try:
+                        response = requests.get(f"https://api.hf.space/v1/{owner}/{instance_id}/live-metrics/sse", stream=True, timeout=5) #timeout added
+                        response.raise_for_status()
+                        if response.status_code == 200:
+                            # Read the first event to initialize
+                            first_event = next(response.iter_lines()).decode('utf-8')
+                            if first_event.startswith("event: metric"):
+                                data = json.loads(first_event.split("data: ", 1)[1])
+                                metrics_data[server_id] = data
+                                server_status[server_id] = time.time()
+
+                    except (requests.exceptions.RequestException, StopIteration, json.JSONDecodeError) as e:
+                        print(f"Initial connection failed for {server_id}: {e}")
+                        server_status[server_id] = 0  # Mark as potentially offline
+                        continue  # Skip to the next server
+
+                # Process existing connections and updates
+                else:
+                    try:
+                        response = requests.get(f"https://api.hf.space/v1/{owner}/{instance_id}/live-metrics/sse", stream=True, timeout=5)
+                        response.raise_for_status()
+
+                        if response.status_code == 200:
+                            # Read the next event
+                            try:
+                                event = next(response.iter_lines()).decode('utf-8')
+                                if event.startswith("event: metric"):
+                                    data = json.loads(event.split("data: ", 1)[1])
+                                    metrics_data[server_id] = data
+                                    server_status[server_id] = time.time()
+
+                            except StopIteration:
+                                # print(f"No data received for {server_id}, connection likely closed.")
+                                server_status[server_id] = 0  # Mark as potentially offline
+                            except (json.JSONDecodeError, requests.exceptions.RequestException) as e:
+                                print(f"Error processing SSE for {server_id}: {e}")
+                                server_status[server_id] = 0
+                        else:
+                            print(f"Failed to connect for {server_id}, status code: {response.status_code}")
+                            server_status[server_id] = 0
+
+                    except requests.exceptions.RequestException as e:
+                        print(f"Connection error for {server_id}: {e}")
+                        server_status[server_id] = 0  # Mark as potentially offline
+
+
+
+                # Prepare data for this server (even if offline)
+                if server_id in metrics_data:
+                    data = metrics_data[server_id]
+                    cpu_usage = data.get('cpu_usage_pct', 0)
+                    memory_used = data.get('memory_used_bytes', 0)
+                    memory_total = data.get('memory_total_bytes', 1)  # Avoid division by zero
+                    memory_usage = (memory_used / memory_total) * 100 if memory_total > 0 else 0
+                    upload_bps = data.get('tx_bps', 0)
+                    download_bps = data.get('rx_bps', 0)
+                else:
+                    # Default values if no data is available
+                    cpu_usage = 0
+                    memory_usage = 0
+                    upload_bps = 0
+                    download_bps = 0
+
+                server_data = {
+                    "serverId": server_id,
+                    "owner": owner,
+                    "spaceId": instance_id,
+                    "isOnline": (time.time() - server_status.get(server_id, 0)) < SSE_TIMEOUT,
+                    "cpuUsage": f"{cpu_usage:.2f}",
+                    "memoryUsage": f"{memory_usage:.2f}",
+                    "upload": format_bytes(upload_bps),
+                    "download": format_bytes(download_bps),
+                }
+                all_servers_data.append(server_data)
+
+
+            update_summary() # update summary after processing each server.
+            # Include summary data in the SSE payload
+            payload = {
+                "servers": all_servers_data,
+                "summary": summary_data,
+            }
+
+        yield f"data: {json.dumps(payload)}\n\n"
+        time.sleep(SSE_UPDATE_INTERVAL)
+
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/metrics')
+def metrics():
+    return Response(get_metrics_stream(), mimetype='text/event-stream')
+
+
+light_mode_style = """
 * {
   margin: 0;
   padding: 0;
@@ -196,14 +403,19 @@ body {
 }
 """
 
-htmlTemplate = f"""
+@app.route('/test')
+def test():
+    return "Test route is working!"
+
+# Integrated HTML template
+html_template = f"""
 <!DOCTYPE html>
 <html lang="zh">
 <head>
   <meta charset="UTF-8">
   <title>HF Space Monitor</title>
   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
-  <style>{lightModeStyle}</style>
+  <style>{light_mode_style}</style>
 </head>
 <body>
   <div class="container">
@@ -226,318 +438,112 @@ htmlTemplate = f"""
   <script>
     const username = 'yangtb24';
 
-    async function fetchInstances() {{
-      try {{
-        const response = await fetch(`/instances`);
-        const data = await response.json();
-        return data.instances;
-      }} catch (error) {{
-        console.error("获取实例列表失败：", error);
-        return [];
-      }}
-    }}
-
-
-    class MetricsManager {{
-      constructor() {{
-        this.eventSources = new Map();
-        this.servers = new Map();
-        this.instanceOwners = new Map();
-        this.spaceIds = new Map();
-        this.lock = false;
-      }}
-
-
-      async connect(instanceId, username) {{
-        if (this.eventSources.has(instanceId)) return;
-
-        // Fetch initial metrics
-        try {{
-            const initialResponse = await fetch(`/metrics?instanceId=${instanceId}&username=${username}`);
-            const initialData = await initialResponse.json();
-
-            if(initialData && initialData.metrics) {{
-                this.updateServerCard(initialData.metrics, instanceId, username);
-            }}
-        }}
-        catch (error) {{
-          console.error(`Initial metrics fetch failed (${instanceId}):`, error);
-        }}
-
-        try {{
-          const eventSource = new EventSource(
-            `/stream?instanceId=${instanceId}&username=${username}`
-          );
-
-          this.spaceIds.set(instanceId, instanceId);
-          this.instanceOwners.set(instanceId, username);
-
-          eventSource.addEventListener("metric", (event) => {{
-            try {{
-              const data = JSON.parse(event.data);
-              this.updateServerCard(data, instanceId, username);
-            }} catch (error) {{
-              console.error(`解析数据失败 (${instanceId}):`, error);
-            }}
-          }});
-
-          eventSource.onerror = (error) => {{
-            console.error(`EventSource 错误 (${instanceId}):`, error);
-            eventSource.close();
-            this.eventSources.delete(instanceId);
-          }};
-
-          this.eventSources.set(instanceId, eventSource);
-        }} catch (error) {{
-          console.error(`连接失败 (${username}/${instanceId}):`, error);
-        }}
-      }}
-
-
-    disconnectAll() {{
-        this.eventSources.forEach(es => es.close());
-        this.eventSources.clear();
-    }}
-    
-    updateServerCard(data, spaceId, owner) {{
-          if (!data || !data.replica) return;
-
-          const serverId = data.replica;
-          const serverElement = document.getElementById(`server-${serverId}`);
-
+    function updateServerCard(serverData) {{
+        const serverId = serverData.serverId;
+        let serverElement = document.getElementById(`server-${serverId}`);
 
-          if (!serverElement) {{
+        if (!serverElement) {{
             const card = document.createElement('div');
             card.id = `server-${serverId}`;
             card.className = 'server-card';
             card.innerHTML = `
-              <div class="server-header">
-                <div class="server-name">
-                  <div class="status-dot status-online"></div>
-                  <svg class="server-flag" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M21 3H3C1.9 3 1 3.9 1 5v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 5H4V6h16v2zm1 4H3c-1.1 0-2 .9-2 2v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-3c0-1.1-.9-2-2-2zm-1 5H4v-2h16v2zm1 4H3c-1.1 0-2 .9-2 2v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-3c0-1.1-.9-2-2-2zm-1 5H4v-2h16v2z"/>
-                  </svg>
-                  <div>${serverId} (${owner}/${spaceId})</div>
-                </div>
-              </div>
-              <div class="metric-grid">
-                <div class="metric-item">
-                    <div class="metric-label">CPU</div>
-                    <div class="progress-bar-container">
-                        <div class="cpu-progress-bar"></div>
+                <div class="server-header">
+                    <div class="server-name">
+                        <div class="status-dot status-offline"></div>
+                        <svg class="server-flag" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M21 3H3C1.9 3 1 3.9 1 5v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 5H4V6h16v2zm1 4H3c-1.1 0-2 .9-2 2v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-3c0-1.1-.9-2-2-2zm-1 5H4v-2h16v2zm1 4H3c-1.1 0-2 .9-2 2v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-3c0-1.1-.9-2-2-2zm-1 5H4v-2h16v2z"/>
+                        </svg>
+                        <div>${serverId} (${serverData.owner}/${serverData.spaceId})</div>
                     </div>
-                    <div class="metric-value cpu-usage">0%</div>
                 </div>
-                <div class="metric-item">
-                    <div class="metric-label">内存</div>
-                    <div class="progress-bar-container">
-                        <div class="memory-progress-bar"></div>
+                <div class="metric-grid">
+                    <div class="metric-item">
+                        <div class="metric-label">CPU</div>
+                        <div class="progress-bar-container">
+                            <div class="cpu-progress-bar"></div>
+                        </div>
+                        <div class="metric-value cpu-usage">0%</div>
+                    </div>
+                    <div class="metric-item">
+                        <div class="metric-label">内存</div>
+                        <div class="progress-bar-container">
+                            <div class="memory-progress-bar"></div>
+                        </div>
+                        <div class="metric-value memory-usage">0%</div>
+                    </div>
+                    <div class="metric-item">
+                        <div class="metric-label">上传</div>
+                        <div class="metric-value upload">0 KB/s</div>
+                    </div>
+                    <div class="metric-item">
+                        <div class="metric-label">下载</div>
+                        <div class="metric-value download">0 KB/s</div>
                     </div>
-                    <div class="metric-value memory-usage">0%</div>
-                </div>
-                <div class="metric-item">
-                  <div class="metric-label">上传</div>
-                  <div class="metric-value upload">0 KB/s</div>
-                </div>
-                <div class="metric-item">
-                  <div class="metric-label">下载</div>
-                  <div class="metric-value download">0 KB/s</div>
                 </div>
-              </div>
             `;
             document.getElementById('servers').appendChild(card);
-          }}
-
-          const card = document.getElementById(`server-${serverId}`);
-          const cpuUsage = data.cpu_usage_pct;
-          const memoryUsage = (data.memory_used_bytes / data.memory_total_bytes) * 100;
-          const uploadBps = data.tx_bps;
-          const downloadBps = data.rx_bps;
-
-          card.querySelector('.cpu-usage').textContent = `${cpuUsage.toFixed(2)}%`;
-          card.querySelector('.cpu-progress-bar').style.width = `${cpuUsage}%`;
+            serverElement = card; // Update serverElement to the newly created card
+        }}
 
-          card.querySelector('.memory-usage').textContent = `${memoryUsage.toFixed(2)}%`;
-          card.querySelector('.memory-progress-bar').style.width = `${memoryUsage}%`;
+        const statusDot = serverElement.querySelector('.status-dot');
+        statusDot.className = `status-dot status-${{serverData.isOnline ? 'online' : 'offline'}}`;
 
-          card.querySelector('.upload').textContent = `${this.formatBytes(uploadBps)}/s`;
-          card.querySelector('.download').textContent = `${this.formatBytes(downloadBps)}/s`;
+        serverElement.querySelector('.cpu-usage').textContent = `${{serverData.cpuUsage}}%`;
+        serverElement.querySelector('.cpu-progress-bar').style.width = `${{serverData.cpuUsage}}%`;
 
-          this.servers.set(serverId, Date.now());
-          this.updateSummary();
-        }}
+        serverElement.querySelector('.memory-usage').textContent = `${{serverData.memoryUsage}}%`;
+        serverElement.querySelector('.memory-progress-bar').style.width = `${{serverData.memoryUsage}}%`;
 
-        updateSummary() {{
-              const now = Date.now();
-              let online = 0;
-              let offline = 0;
-              let totalUpload = 0;
-              let totalDownload = 0;
-
-              this.servers.forEach((lastSeen, serverId) => {{
-                const isOnline = (now - lastSeen) < 10000;
-                const serverCard = document.getElementById(`server-${serverId}`);
-                if (serverCard) {{
-                  const statusDot = serverCard.querySelector('.status-dot');
-                  statusDot.className = `status-dot status-${{isOnline ? 'online' : 'offline'}}`;
-
-                  if (isOnline) {{
-                    const uploadText = serverCard.querySelector('.upload').textContent;
-                    const downloadText = serverCard.querySelector('.download').textContent;
-                    totalUpload += parseFloat(uploadText) || 0;
-                    totalDownload += parseFloat(downloadText) || 0;
-                  }}
-                }}
-                isOnline ? online++ : offline++;
-              }});
-
-              document.getElementById('totalServers').textContent = this.servers.size;
-              document.getElementById('onlineServers').textContent = online;
-              document.getElementById('offlineServers').textContent = offline;
-              document.getElementById('totalUpload').textContent = `${this.formatBytes(totalUpload)}/s`;
-              document.getElementById('totalDownload').textContent = `${this.formatBytes(totalDownload)}/s`;
-        }}
-
-        formatBytes(bytes) {{
-              if (bytes === 0) return '0 B';
-              const k = 1024;
-              const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-              const i = Math.floor(Math.log(bytes) / Math.log(k));
-              return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-        }}
+        serverElement.querySelector('.upload').textContent = `${{serverData.upload}}/s`;
+        serverElement.querySelector('.download').textContent = `${{serverData.download}}/s`;
     }}
 
-    const metricsManager = new MetricsManager();
 
-    async function initialize() {{
-      const instances = await fetchInstances();
-      if (instances) {{
-          instances.forEach(instance => {{
-            metricsManager.connect(instance.id, instance.owner);
-          }});
-      }}
+    function updateSummary(summaryData) {{
+      document.getElementById('totalServers').textContent = summaryData.totalServers;
+      document.getElementById('onlineServers').textContent = summaryData.onlineServers;
+      document.getElementById('offlineServers').textContent = summaryData.offlineServers;
+      document.getElementById('totalUpload').textContent = `${{formatBytes(summaryData.totalUpload)}}/s`;
+      document.getElementById('totalDownload').textContent = `${{formatBytes(summaryData.totalDownload)}}/s`;
     }}
 
-    initialize();
-    setInterval(() => metricsManager.updateSummary(), 2000);
+      function formatBytes(bytes) {{
+        if (bytes === 0) return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+      }}
 
-    // Re-initialize every 5 minutes
-    setInterval(async () => {{
-        metricsManager.disconnectAll();
-        await initialize();
-    }}, 300000);
+    function connectSSE() {{
+      const eventSource = new EventSource('/metrics');
+
+      eventSource.onmessage = function(event) {{
+        const data = JSON.parse(event.data);
+        data.servers.forEach(serverData => {{
+          updateServerCard(serverData);
+        }});
+        updateSummary(data.summary);
+      }};
+
+      eventSource.onerror = function(err) {{
+        console.error("EventSource failed:", err);
+        eventSource.close();
+        setTimeout(connectSSE, 5000); // Attempt to reconnect after 5 seconds
+      }};
+    }}
+    connectSSE();
 
   </script>
 </body>
 </html>
 """
 
-# Global variable to store instances and metrics.  Using a dictionary is better
-# than separate Maps, as it allows atomic updates with a lock.
-data = {
-    "instances": [],
-    "metrics": {}  # Key: instanceId, Value: {metrics: {}, last_updated: timestamp}
-}
-data_lock = Lock()  # Use a lock for thread safety
-
-USERNAME = 'yangtb24'
-
-def fetch_instances(username):
-    try:
-        response = requests.get(f"https://huggingface.co/api/spaces?author={username}")
-        response.raise_for_status()  # Raise an exception for bad status codes
-        user_instances = response.json()
-        return [{"id": instance["id"].split('/')[1], "owner": username} for instance in user_instances]
-    except requests.exceptions.RequestException as e:
-        print(f"Error fetching instances: {e}")
-        return []
-
-def fetch_initial_metrics(username, instance_id):
-    """Fetches initial metrics using a regular GET request."""
-    try:
-        url = f"https://api.hf.space/v1/{username}/{instance_id}/live-metrics"
-        response = requests.get(url)
-        response.raise_for_status()
-        return response.json()
-    except requests.exceptions.RequestException as e:
-        print(f"Error fetching initial metrics for {username}/{instance_id}: {e}")
-        return None
+@app.route('/index.html')  # Explicitly serve index.html (for clarity)
+def index_html():
+    return render_template('index.html')
 
 
-@app.route('/')
-def home():
-    return render_template_string(htmlTemplate)
-
-
-@app.route('/instances')
-def get_instances():
-    global data
-    with data_lock:
-        # Refresh instances every time /instances is called, but only if
-        # they haven't been updated in the last 5 minutes.
-        if not data["instances"] or (time.time() - data.get("instances_last_updated", 0) > 300):
-            data["instances"] = fetch_instances(USERNAME)
-            data["instances_last_updated"] = time.time() # Add timestamp
-        return jsonify({"instances": data["instances"]})
-
-@app.route('/metrics')
-def get_metrics():
-    """Route to get initial metrics for an instance."""
-    instance_id = request.args.get('instanceId')
-    username = request.args.get('username')
-    if not instance_id or not username:
-        return jsonify({"error": "instanceId and username are required"}), 400
-
-    metrics = fetch_initial_metrics(username, instance_id)
-    if metrics:
-        return jsonify({"metrics": metrics})
-    else:
-        return jsonify({"error": "Failed to fetch initial metrics"}), 500
-
-
-@app.route('/stream')
-def stream():
-    instance_id = request.args.get('instanceId')
-    username = request.args.get('username')
-    if not instance_id or not username:
-        return "instanceId and username are required", 400
-
-    def generate():
-        global data
-        try:
-            url = f"https://api.hf.space/v1/{username}/{instance_id}/live-metrics/sse"
-            with requests.get(url, stream=True) as r:
-                r.raise_for_status()
-                for line in r.iter_lines():
-                    if line:
-                        decoded_line = line.decode('utf-8')
-                        # Check if the line starts with "data:"
-                        if decoded_line.startswith("data:"):
-                            try:
-                                # Extract the JSON part of the message
-                                json_str = decoded_line.split("data:", 1)[1].strip()
-                                metric_data = json.loads(json_str)
-
-                                with data_lock:
-                                     # Update the metrics and last_updated timestamp
-                                    data["metrics"][instance_id] = {
-                                        "metrics": metric_data,
-                                        "last_updated": time.time()
-                                    }
-                                yield f"data: {json.dumps(metric_data)}\n\n"
-
-                            except json.JSONDecodeError as e:
-                                print(f"JSONDecodeError: {e}, Line: {decoded_line}")
-                                # Optionally: yield an error message to the client
-                                # yield "data: {{'error': 'Invalid JSON'}}\n\n"
-        except requests.exceptions.RequestException as e:
-            print(f"RequestException during streaming: {e}")
-            # yield "data: {{'error': 'Connection lost'}}\n\n"  # Notify client
-
-    return app.response_class(generate(), mimetype='text/event-stream')
-
-import time
-
 if __name__ == '__main__':
-    app.run(debug=True, port=7860, host="0.0.0.0") # Hugging Face uses port 7860
+    app.run(debug=True, host='0.0.0.0', port=7860)