Spaces:

yangtb24
/

Monitor

Paused

App Files Files Community

yangtb24 commited on Feb 13, 2025

Commit

b2b93c9

verified ·

1 Parent(s): 9a61cfe

Update app.py

Browse files

Files changed (1) hide show

app.py +158 -231

app.py CHANGED Viewed

@@ -1,9 +1,5 @@
 from flask import Flask, render_template_string
-import requests
-import json
-from threading import Thread, Lock
-import time
-from datetime import datetime, timedelta
 app = Flask(__name__)
@@ -205,6 +201,7 @@ htmlTemplate = f"""
   <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>
 </head>
 <body>
@@ -223,111 +220,178 @@ htmlTemplate = f"""
       <!-- 服务器卡片将在这里动态生成 -->
     </div>
   </div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/js/all.min.js" integrity="sha512-yFjZbTYRCJodnuyGlsKamNE/LlEaEA/3uWCGാരി7eIq7jWqVl3J8jL/kof/tfu9Xqzh/y/VM5sJd/tq5iEew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script>
-    const serversData = {{ servers_data|tojson }};
     function updateServerCard(data, spaceId) {{
-        const serverId = data.replica;
-        const serverElement = document.getElementById(`server-${serverId}`);
-        const owner = data.owner;
-        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>
-                    <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>
-            `;
-            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}%`;
-        card.querySelector('.memory-usage').textContent = `${memoryUsage.toFixed(2)}%`;
-        card.querySelector('.memory-progress-bar').style.width = `${memoryUsage}%`;
-        card.querySelector('.upload').textContent = `${formatBytes(uploadBps)}/s`;
-        card.querySelector('.download').textContent = `${formatBytes(downloadBps)}/s`;
-        updateSummary();
     }}
     function updateSummary() {{
-        let online = 0;
-        let offline = 0;
-        let totalUpload = 0;
-        let totalDownload = 0;
-      for (const serverId in serversData) {{
-        const serverData = serversData[serverId];
-        if (!serverData) continue; // Skip if serverData is null
-        const isOnline = serverData.status === 'online';
         const serverCard = document.getElementById(`server-${serverId}`);
         if (serverCard) {{
           const statusDot = serverCard.querySelector('.status-dot');
-          statusDot.className = `status-dot status-${{isOnline ? 'online' : 'offline'}}`;
           if (isOnline) {{
-            totalUpload += serverData.tx_bps;
-            totalDownload += serverData.rx_bps;
           }}
         }}
         isOnline ? online++ : offline++;
-      }}
-      document.getElementById('totalServers').textContent = Object.keys(serversData).length;
       document.getElementById('onlineServers').textContent = online;
       document.getElementById('offlineServers').textContent = offline;
       document.getElementById('totalUpload').textContent = `${formatBytes(totalUpload)}/s`;
       document.getElementById('totalDownload').textContent = `${formatBytes(totalDownload)}/s`;
     }}
     function formatBytes(bytes) {{
       if (bytes === 0) return '0 B';
       const k = 1024;
@@ -336,159 +400,22 @@ htmlTemplate = f"""
       return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
     }}
-    // Initial update with existing data
-    for (const spaceId in serversData) {{
-        for(const replicaId in serversData[spaceId]){{
-           updateServerCard(serversData[spaceId][replicaId], spaceId);
-        }}
-    }}
-    // No need for setInterval here;  data is updated via Flask
   </script>
 </body>
 </html>
 """
-class MetricsManager:
-    def __init__(self, username):
-        self.username = username
-        self.servers_data = {}  # Store all server data
-        self.data_lock = Lock()  # Lock for thread-safe updates
-        self.last_fetch_time = {}  # Track last fetch time for each instance
-        self.instance_ids = set() # store instance ids
-    def fetch_instances(self):
-        """Fetches instances for the given username."""
-        try:
-            response = requests.get(f"https://huggingface.co/api/spaces?author={self.username}")
-            response.raise_for_status()  # Raise an exception for bad status codes
-            user_instances = response.json()
-            new_instance_ids = {instance['id'].split('/')[1] for instance in user_instances}
-            # Check for removed instances
-            for instance_id in list(self.instance_ids):  # Iterate over a copy
-                if instance_id not in new_instance_ids:
-                    self.remove_instance(instance_id)
-                    print(f"Instance removed: {instance_id}")
-            self.instance_ids.update(new_instance_ids) # Update the set of instance IDs
-            return [{'id': instance_id, 'owner': self.username} for instance_id in new_instance_ids]
-        except requests.RequestException as e:
-            print(f"Error fetching instances: {e}")
-            return []
-        except (KeyError, IndexError, json.JSONDecodeError) as e:
-            print(f"Error parsing instance data: {e}")
-            return []
-    def remove_instance(self, instance_id):
-        """Removes an instance and its associated data."""
-        with self.data_lock:
-            if instance_id in self.servers_data:
-                del self.servers_data[instance_id]
-            if instance_id in self.last_fetch_time:
-                del self.last_fetch_time[instance_id]
-            if instance_id in self.instance_ids:
-                self.instance_ids.remove(instance_id)
-    def fetch_metrics(self, instance_id, owner):
-        """Fetches metrics for a single instance."""
-        url = f"https://api.hf.space/v1/{owner}/{instance_id}/live-metrics/sse"
-        try:
-            response = requests.get(url, stream=True, timeout=10)  # Timeout for connection
-            response.raise_for_status()
-            for line in response.iter_lines():
-                if line:
-                    try:
-                        decoded_line = line.decode('utf-8')
-                        if decoded_line.startswith("event: metric"):
-                            data_part = decoded_line.split("data: ", 1)[1]
-                            data = json.loads(data_part)
-                            self.update_server_data(data, instance_id, owner)
-                    except (IndexError, json.JSONDecodeError) as e:
-                        print(f"Error parsing metric data for {instance_id}: {e}, Line: {line.decode('utf-8')}")
-                        continue  # Continue to the next line
-        except requests.exceptions.RequestException as e:
-            print(f"Error fetching metrics for {instance_id}: {e}")
-            self.mark_offline(instance_id) # Mark as offline
-        except Exception as e:
-            print(f"An unexpected error occurred for {instance_id}: {e}")
-            self.mark_offline(instance_id)
-    def update_server_data(self, data, space_id, owner):
-        """Updates server data in a thread-safe manner."""
-        with self.data_lock:
-            replica_id = data['replica']
-            # Check if the space_id exists in servers_data, if not, create it
-            if space_id not in self.servers_data:
-                self.servers_data[space_id] = {}
-            # Now, update the data for the specific replica within that space_id
-            if replica_id not in self.servers_data[space_id]:
-                self.servers_data[space_id][replica_id] = {}
-            self.servers_data[space_id][replica_id] = {
-                'replica': replica_id,
-                'owner': owner,
-                'cpu_usage_pct': data['cpu_usage_pct'],
-                'memory_used_bytes': data['memory_used_bytes'],
-                'memory_total_bytes': data['memory_total_bytes'],
-                'tx_bps': data['tx_bps'],
-                'rx_bps': data['rx_bps'],
-                'status': 'online'  # Mark as online when data is received
-            }
-            self.last_fetch_time[space_id] = datetime.utcnow()
-    def mark_offline(self, instance_id):
-        """Marks an instance as offline."""
-        with self.data_lock:
-            if instance_id in self.servers_data:
-                for replica_id in self.servers_data[instance_id]:
-                  if self.servers_data[instance_id][replica_id]: # Check if not None
-                      self.servers_data[instance_id][replica_id]['status'] = 'offline'
-    def check_timeouts(self):
-        """Checks for instances that haven't been updated recently."""
-        now = datetime.utcnow()
-        with self.data_lock:
-            for instance_id in list(self.last_fetch_time.keys()):  # Iterate on a copy
-                if now - self.last_fetch_time.get(instance_id, datetime.min) > timedelta(seconds=10):
-                    self.mark_offline(instance_id)
-    def run_fetch(self):
-        """Fetches metrics for all instances in a loop."""
-        while True:
-            instances = self.fetch_instances()
-            for instance in instances:
-                self.fetch_metrics(instance['id'], instance['owner'])
-            self.check_timeouts()
-            time.sleep(2)  # Fetch every 2 seconds
-    def start(self):
-        """Starts the data fetching in a separate thread."""
-        thread = Thread(target=self.run_fetch)
-        thread.daemon = True  # Allow the program to exit even if the thread is running
-        thread.start()
-# --- Flask App Setup ---
-username = 'yangtb24'  # Replace with your Hugging Face username
-metrics_manager = MetricsManager(username)
-metrics_manager.start()  # Start the data collection
-@app.route('/')
-def home():
-    with metrics_manager.data_lock:
-        # Make a copy to avoid modification during iteration
-        servers_data_copy = metrics_manager.servers_data.copy()
-    return render_template_string(htmlTemplate, servers_data=servers_data_copy)
-if __name__ == '__main__':
-    app.run(debug=True, host='0.0.0.0', port=7860)

 from flask import Flask, render_template_string
+import os
 app = Flask(__name__)
   <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>">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <style>{lightModeStyle}</style>
 </head>
 <body>
       <!-- 服务器卡片将在这里动态生成 -->
     </div>
   </div>
   <script>
+    const username = 'yangtb24';
+    async function fetchInstances() {
+      try {
+        const response = await fetch(`https://huggingface.co/api/spaces?author=${username}`);
+        const userInstances = await response.json();
+        return userInstances.map(instance => ({{
+          id: instance.id.split('/')[1],
+          owner: username
+        }}));
+      } 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();
+      }}
+      async connect(instanceId, username) {{
+        if (this.eventSources.has(instanceId)) return;
+        try {{
+          const eventSource = new EventSource(
+            `https://api.hf.space/v1/${username}/${instanceId}/live-metrics/sse`
+          );
+          this.spaceIds.set(instanceId, instanceId);
+          this.instanceOwners.set(instanceId, username);
+          eventSource.addEventListener("metric", (event) => {{
+            try {{
+              const data = JSON.parse(event.data);
+              updateServerCard(data, instanceId);
+            }} catch (error) {{
+              console.error(`解析数据失败 (${instanceId}):`, error);
+            }}
+          }});
+          eventSource.onerror = (error) => {{
+            console.error(`EventSource 错误 (${instanceId}):`, error);
+            eventSource.close();
+          }};
+          this.eventSources.set(instanceId, eventSource);
+        }} catch (error) {{
+          console.error(`连接失败 (${username}/${instanceId}):`, error);
+        }}
+      }}
+      disconnectAll() {{
+        this.eventSources.forEach(es => es.close());
+        this.eventSources.clear();
+      }}
+    }}
+    const metricsManager = new MetricsManager();
+    const servers = new Map();
+    async function initialize() {{
+      const instances = await fetchInstances();
+      instances.forEach(instance => {{
+        metricsManager.connect(instance.id, instance.owner);
+      }});
+    }}
+    initialize();
     function updateServerCard(data, spaceId) {{
+      const serverId = data.replica;
+      const serverElement = document.getElementById(`server-${serverId}`);
+      const owner = metricsManager.instanceOwners.get(spaceId);
+      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>
+                <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>
+        `;
+        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}%`;
+      card.querySelector('.memory-usage').textContent = `${memoryUsage.toFixed(2)}%`;
+      card.querySelector('.memory-progress-bar').style.width = `${memoryUsage}%`;
+      card.querySelector('.upload').textContent = `${formatBytes(uploadBps)}/s`;
+      card.querySelector('.download').textContent = `${formatBytes(downloadBps)}/s`;
+      servers.set(serverId, Date.now());
+      updateSummary();
     }}
     function updateSummary() {{
+      const now = Date.now();
+      let online = 0;
+      let offline = 0;
+      let totalUpload = 0;
+      let totalDownload = 0;
+      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 = servers.size;
       document.getElementById('onlineServers').textContent = online;
       document.getElementById('offlineServers').textContent = offline;
       document.getElementById('totalUpload').textContent = `${formatBytes(totalUpload)}/s`;
       document.getElementById('totalDownload').textContent = `${formatBytes(totalDownload)}/s`;
     }}
     function formatBytes(bytes) {{
       if (bytes === 0) return '0 B';
       const k = 1024;
       return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
     }}
+    setInterval(updateSummary, 2000);
+    setInterval(async () => {{
+      metricsManager.disconnectAll();
+      await initialize();
+    }}, 300000);
   </script>
 </body>
 </html>
 """
+@app.route("/")
+def index():
+    return render_template_string(htmlTemplate)
+if __name__ == "__main__":
+    app.run(debug=True, host="0.0.0.0", port=int(os.environ.get("PORT", 7860)))