Spaces:

yangtb24
/

Monitor

Paused

App Files Files Community

yangtb24 commited on Feb 15, 2025

Commit

9c5947c

verified ·

1 Parent(s): 48d99a6

Update app.py

Browse files

Files changed (1) hide show

app.py +154 -125

app.py CHANGED Viewed

@@ -6,7 +6,6 @@ import json
 app = Flask(__name__)
 lightModeStyle = """
-/* ... (Your CSS styles, same as before) ... */
 * {
   margin: 0;
   padding: 0;
@@ -143,10 +142,12 @@ body {
 }
 .status-online {
   background-color: #2ecc71;
   box-shadow: 0 0 5px rgba(46, 204, 113, 0.4);
 }
 .status-offline {
   background-color: #e74c3c;
   box-shadow: 0 0 5px rgba(231, 76, 60, 0.4);
 }
 @keyframes fadeIn {
@@ -195,9 +196,6 @@ body {
 }
 """
-# Define USERNAME *before* using it in htmlTemplate
-USERNAME = os.environ.get("USERNAME", "yangtb24")
 htmlTemplate = f"""
 <!DOCTYPE html>
 <html lang="zh">
@@ -206,7 +204,6 @@ htmlTemplate = f"""
   <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>
-  <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" />
 </head>
 <body>
   <div class="container">
@@ -223,8 +220,10 @@ htmlTemplate = f"""
     <div id="servers" class="stats-container">
     </div>
   </div>
   <script>
-    const username = '{USERNAME}';
     async function fetchInstances() {{
       try {{
@@ -237,53 +236,54 @@ htmlTemplate = f"""
       }}
     }}
-     class MetricsManager {{
       constructor() {{
         this.eventSources = new Map();
-        this.serversData = new Map();
         this.instanceOwners = new Map();
         this.spaceIds = new Map();
       }}
-      connect(instanceId, username) {{
         if (this.eventSources.has(instanceId)) return;
-        const eventSource = new EventSource(`/metrics/${{username}}/${{instanceId}}`);
-        this.eventSources.set(instanceId, eventSource);
-        this.spaceIds.set(instanceId, instanceId);
-        this.instanceOwners.set(instanceId, username);
-        this.serversData.set(instanceId, {{ lastSeen: 0, uploadBps: 0, downloadBps: 0 }});
-        eventSource.addEventListener("metric", (event) => {{
-          try {{
-            const data = JSON.parse(event.data);
-            this.serversData.set(instanceId, {{
-              lastSeen: Date.now(),
-              uploadBps: data.tx_bps,
-              downloadBps: data.rx_bps,
             }});
-            updateServerCard(data, instanceId);
-          }} catch (error) {{
-            console.error(`解析数据失败 (${{instanceId}}):`, error);
-          }}
-        }});
-        eventSource.onerror = (error) => {{
-            console.error(`EventSource 错误 (${{instanceId}}):`, error);
-            eventSource.close();
-            this.eventSources.delete(instanceId);
-        }};
-      }}
       disconnectAll() {{
         this.eventSources.forEach(es => es.close());
         this.eventSources.clear();
-        this.serversData.clear();
       }}
     }}
     const metricsManager = new MetricsManager();
     async function initialize() {{
       const instances = await fetchInstances();
@@ -292,100 +292,121 @@ htmlTemplate = f"""
       }});
     }}
     function updateServerCard(data, spaceId) {{
-      const serverId = data.replica;
-      let serverElement = document.getElementById(`server-${{serverId}}`);
-      const owner = metricsManager.instanceOwners.get(spaceId);
-      if (!serverElement) {{
-        serverElement = document.createElement('div');
-        serverElement.id = `server-${{serverId}}`;
-        serverElement.className = 'server-card';
-        serverElement.innerHTML = `
-          <div class="server-header">
-            <div class="server-name">
-              <div class="status-dot status-online"></div>
-              <svg class="server-flag" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H4V5h16v14z"/>
-              </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(serverElement);
-      }}
-      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;
-      serverElement.querySelector('.cpu-usage').textContent = `${{cpuUsage.toFixed(2)}}%`;
-      serverElement.querySelector('.cpu-progress-bar').style.width = `${{cpuUsage}}%`;
-      serverElement.querySelector('.memory-usage').textContent = `${{memoryUsage.toFixed(2)}}%`;
-      serverElement.querySelector('.memory-progress-bar').style.width = `${{memoryUsage}}%`;
-      serverElement.querySelector('.upload').textContent = `${{formatBytes(uploadBps)}}/s`;
-      serverElement.querySelector('.download').textContent = `${{formatBytes(downloadBps)}}/s`;
-      updateSummary();
     }}
-    function updateSummary() {{
       const now = Date.now();
       let online = 0;
       let offline = 0;
       let totalUpload = 0;
       let totalDownload = 0;
-      for (const [serverId, serverData] of metricsManager.serversData) {{
-        const isOnline = (now - serverData.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) {{
-          online++;
-          totalUpload += serverData.uploadBps || 0;
-          totalDownload += serverData.downloadBps || 0;
-        }} else {{
-          offline++;
-        }}
-      }}
-      document.getElementById('totalServers').textContent = metricsManager.serversData.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';
@@ -395,21 +416,36 @@ htmlTemplate = f"""
       return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
     }}
-    initialize();
     setInterval(updateSummary, 2000);
     setInterval(async () => {{
-      metricsManager.disconnectAll();
-      await initialize();
     }}, 300000);
   </script>
 </body>
 </html>
 """
 @app.route('/')
 def index():
-    return render_template_string(htmlTemplate)
 @app.route('/instances')
 def get_instances():
@@ -434,30 +470,23 @@ def stream_metrics(username, instance_id):
                         lines = event_data.split("\n")
                         event_type = "message"
                         data_lines = []
                         for line in lines:
                             if line.startswith("event:"):
                                 event_type = line.split(":", 1)[1].strip()
                             elif line.startswith("data:"):
                                 data_lines.append(line.split(":", 1)[1].strip())
                         if event_type == "metric":
-                            try:
-                                json_data = json.loads("".join(data_lines))
-                                yield f"event: {event_type}\ndata: {json.dumps(json_data)}\n\n"
-                            except json.JSONDecodeError as e:
-                                print(f"JSONDecodeError: {e}")
-                                yield f"event: error\ndata: Invalid JSON received\n\n"
         except requests.exceptions.RequestException as e:
             print(f"Request Exception: {e}")
-            yield f"event: error\ndata: Connection error\n\n"
         except Exception as e:
             print(f"An error occurred: {e}")
-            yield f"event: error\ndata: An unexpected error occurred\n\n"
     return Response(generate(), mimetype='text/event-stream')
 if __name__ == '__main__':
     app.run(debug=True, host='0.0.0.0', port=7860)

 app = Flask(__name__)
 lightModeStyle = """
 * {
   margin: 0;
   padding: 0;
 }
 .status-online {
   background-color: #2ecc71;
+  color: #2ecc71;
   box-shadow: 0 0 5px rgba(46, 204, 113, 0.4);
 }
 .status-offline {
   background-color: #e74c3c;
+  color: #e74c3c;
   box-shadow: 0 0 5px rgba(231, 76, 60, 0.4);
 }
 @keyframes fadeIn {
 }
 """
 htmlTemplate = f"""
 <!DOCTYPE html>
 <html lang="zh">
   <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>
   <div class="container">
     <div id="servers" class="stats-container">
     </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 username = '{{username}}';
     async function fetchInstances() {{
       try {{
       }}
     }}
+    class MetricsManager {{
       constructor() {{
         this.eventSources = new Map();
+        this.servers = new Map();
         this.instanceOwners = new Map();
         this.spaceIds = new Map();
+        this.lastMetrics = new Map(); // Store last metrics for each instance
       }}
+      async connect(instanceId, username) {{
         if (this.eventSources.has(instanceId)) return;
+        try {{
+            const eventSource = new EventSource(`/metrics/${{username}}/${{instanceId}}`);
+            this.spaceIds.set(instanceId, instanceId);
+            this.instanceOwners.set(instanceId, username);
+            eventSource.addEventListener("metric", (event) => {{
+                try {{
+                    const data = JSON.parse(event.data);
+                    this.lastMetrics.set(instanceId, data); // Store the received data
+                    updateServerCard(data, instanceId);
+                }} 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();
       }}
     }}
     const metricsManager = new MetricsManager();
+    const servers = new Map();
     async function initialize() {{
       const instances = await fetchInstances();
       }});
     }}
     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 10h18c1.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;
+      for (const [instanceId, lastMetric] of metricsManager.lastMetrics) {
+        const serverId = instanceId;  // instanceId is the same as serverId in this context
+        const serverCard = document.getElementById(`server-${serverId}`);
+        if (serverCard) {
+          const lastSeen = servers.get(serverId);
+          const isOnline = lastSeen && (now - lastSeen) < 10000;
           const statusDot = serverCard.querySelector('.status-dot');
+          statusDot.className = `status-dot status-${isOnline ? 'online' : 'offline'}`;
+          if (isOnline && lastMetric) {
+            totalUpload += lastMetric.tx_bps;
+            totalDownload += lastMetric.rx_bps;
+            online++;
+          } else if (!isOnline) {
+            offline++;
+          }
+        }
+      }
+      // Count servers that might not have metrics yet (newly added)
+      let totalServers = servers.size;
+        for (let serverId of servers.keys()) {
+            if (!metricsManager.lastMetrics.has(serverId)) {
+              const lastSeen = servers.get(serverId);
+              if (lastSeen && (now-lastSeen) < 10000){
+                online++;
+              } else {
+                offline++;
+              }
+            }
+        }
+      document.getElementById('totalServers').textContent = totalServers;
       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';
       return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
     }}
+    initialize(); // Initial load
     setInterval(updateSummary, 2000);
     setInterval(async () => {{
+        metricsManager.disconnectAll();
+        await initialize();
     }}, 300000);
   </script>
 </body>
 </html>
 """
+USERNAME = os.environ.get("USERNAME", "yangtb24")
+def fetch_instances(username):
+    try:
+        response = requests.get(f"https://huggingface.co/api/spaces?author={username}")
+        response.raise_for_status()
+        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 []
 @app.route('/')
 def index():
+    return render_template_string(htmlTemplate, username=USERNAME)
 @app.route('/instances')
 def get_instances():
                         lines = event_data.split("\n")
                         event_type = "message"
                         data_lines = []
                         for line in lines:
                             if line.startswith("event:"):
                                 event_type = line.split(":", 1)[1].strip()
                             elif line.startswith("data:"):
                                 data_lines.append(line.split(":", 1)[1].strip())
                         if event_type == "metric":
+                            yield f"event: {event_type}\ndata: {''.join(data_lines)}\n\n"
         except requests.exceptions.RequestException as e:
             print(f"Request Exception: {e}")
+            yield f"event: error\ndata: Connection error: {e}\\n\\n"
         except Exception as e:
             print(f"An error occurred: {e}")
+            yield f"event: error\ndata: An error occurred: {e}\\n\\n"
     return Response(generate(), mimetype='text/event-stream')
 if __name__ == '__main__':
     app.run(debug=True, host='0.0.0.0', port=7860)