Spaces:

yangtb24
/

Monitor

Paused

App Files Files Community

yangtb24 commited on Feb 15, 2025

Commit

8a62759

verified ·

1 Parent(s): b5ebe66

Update app.py

Browse files

Files changed (1) hide show

app.py +130 -135

app.py CHANGED Viewed

@@ -106,6 +106,8 @@ body {
   width: 20px;
   height: 20px;
   border-radius: 4px;
 }
 .metric-grid {
   display: grid;
@@ -142,12 +144,12 @@ body {
 }
 .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 {
@@ -196,18 +198,15 @@ body {
 }
 """
-htmlTemplate = 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>">
-  <!-- Use a CDN for Font Awesome (more reliable) -->
   <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}  /* Include styles directly in a <style> tag */
-  </style>
 </head>
 <body>
   <div class="container">
@@ -224,9 +223,8 @@ htmlTemplate = f"""
     <div id="servers" class="stats-container">
     </div>
   </div>
   <script>
-    const username = '{{username}}';
     async function fetchInstances() {{
       try {{
@@ -239,58 +237,49 @@ htmlTemplate = f"""
       }}
     }}
-    class MetricsManager {{
       constructor() {{
         this.eventSources = new Map();
-        this.servers = new Map();
         this.instanceOwners = new Map();
         this.spaceIds = new Map();
       }}
-      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);
-            this.servers.set(instanceId, { lastSeen: 0,  uploadBps: 0, downloadBps: 0 });
-            eventSource.onopen = () => {
-                console.log(`EventSource connected: ${username}/${instanceId}`);
-            };
-            eventSource.addEventListener("metric", (event) => {
-                try {
-                    const data = JSON.parse(event.data);
-                    this.servers.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 error (${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();
       }}
     }}
@@ -303,38 +292,39 @@ htmlTemplate = f"""
       }});
     }}
-   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>
-                <!-- Removed the placeholder SVG, Font Awesome will handle it -->
-              <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>
@@ -346,55 +336,55 @@ htmlTemplate = f"""
             </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() {{
-        const now = Date.now();
-        let online = 0;
-        let offline = 0;
-        let totalUpload = 0;
-        let totalDownload = 0;
-        for (const [serverId, serverData] of metricsManager.servers) {{
-            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.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) {{
@@ -408,22 +398,23 @@ htmlTemplate = f"""
     initialize();
     setInterval(updateSummary, 2000);
     setInterval(async () => {{
-        metricsManager.disconnectAll();
-        await initialize();
     }}, 300000);
   </script>
 </body>
 </html>
-"""
 @app.route('/')
 def index():
-    return render_template_string(htmlTemplate, username=os.environ.get("USERNAME", "yangtb24"))
 @app.route('/instances')
 def get_instances():
-    instances = fetch_instances(os.environ.get("USERNAME", "yangtb24"))
     return jsonify(instances)
 @app.route('/metrics/<username>/<instance_id>')
@@ -433,39 +424,43 @@ def stream_metrics(username, instance_id):
     def generate():
         try:
             response = requests.get(url, stream=True, headers={"Accept": "text/event-stream"}, timeout=15)
-            response.raise_for_status()
             for chunk in response.iter_content(chunk_size=1024, decode_unicode=True):
                 if chunk:
-                    # Simplfied event parsing, as we now *know* we're getting valid JSON
-                    if chunk.startswith("event: metric"):
-                        try:
-                            data_str = chunk.split("data:", 1)[1].strip()
-                            data_json = json.loads(data_str)
-                            yield f"event: metric\ndata: {json.dumps(data_json)}\n\n"
-                        except (IndexError, json.JSONDecodeError) as e:
-                            print(f"Error parsing SSE chunk: {e}")
-                            continue # Skip to the next chunk on error
         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')
-def fetch_instances(username):
-    try:
-        response = requests.get(f"https://huggingface.co/api/spaces?author={username}")
-        response.raise_for_status()  # Raise HTTPError for bad responses (4xx or 5xx)
-        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 []
 if __name__ == '__main__':
     app.run(debug=True, host='0.0.0.0', port=7860)

   width: 20px;
   height: 20px;
   border-radius: 4px;
+  /*  You might want to add:  */
+  /*  fill: currentColor;  */
 }
 .metric-grid {
   display: grid;
 }
 .status-online {
   background-color: #2ecc71;
+  /* color: #2ecc71;  <--  This is redundant, as background-color sets the color */
   box-shadow: 0 0 5px rgba(46, 204, 113, 0.4);
 }
 .status-offline {
   background-color: #e74c3c;
+  /* color: #e74c3c;  <--  Redundant */
   box-shadow: 0 0 5px rgba(231, 76, 60, 0.4);
 }
 @keyframes fadeIn {
 }
 """
+htmlTemplate = """
 <!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>{}</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">
     <div id="servers" class="stats-container">
     </div>
   </div>
   <script>
+    const username = '{}';
     async function fetchInstances() {{
       try {{
       }}
     }}
+     class MetricsManager {{
       constructor() {{
         this.eventSources = new Map();
+        this.serversData = new Map(); // Use a consistent name
         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); // Remove on error
+        }};
+      }}
       disconnectAll() {{
         this.eventSources.forEach(es => es.close());
         this.eventSources.clear();
+        this.serversData.clear(); // Clear server data on disconnect
       }}
     }}
       }});
     }}
+    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>
           </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) {{
     initialize();
     setInterval(updateSummary, 2000);
     setInterval(async () => {{
+      metricsManager.disconnectAll();
+      await initialize();
     }}, 300000);
   </script>
 </body>
 </html>
+""".format(lightModeStyle, USERNAME)
 @app.route('/')
 def index():
+    return render_template_string(htmlTemplate)
 @app.route('/instances')
 def get_instances():
+    instances = fetch_instances(USERNAME)
     return jsonify(instances)
 @app.route('/metrics/<username>/<instance_id>')
     def generate():
         try:
             response = requests.get(url, stream=True, headers={"Accept": "text/event-stream"}, timeout=15)
+            response.raise_for_status()  # Raise HTTPError for bad responses (4xx or 5xx)
+            buffer = ""
             for chunk in response.iter_content(chunk_size=1024, decode_unicode=True):
                 if chunk:
+                    buffer += chunk
+                    while "\n\n" in buffer:
+                        event_data, buffer = buffer.split("\n\n", 1)
+                        lines = event_data.split("\n")
+                        event_type = "message"  # Default event type
+                        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:
+                                # Parse and re-serialize to ensure valid JSON
+                                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"  # Simplified error message
         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)