Spaces:

yangtb24
/

Monitor

Paused

App Files Files Community

yangtb24 commited on Feb 15, 2025

Commit

6c57e5b

verified ·

1 Parent(s): 9e96e96

Update app.py

Browse files

Files changed (1) hide show

app.py +81 -87

app.py CHANGED Viewed

@@ -1,7 +1,7 @@
 from flask import Flask, render_template_string, jsonify, Response
 import requests
 import os
-import json  # Import the json module
 app = Flask(__name__)
@@ -142,12 +142,10 @@ 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 {
@@ -203,7 +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>
   <div class="container">
@@ -239,7 +237,7 @@ htmlTemplate = f"""
     class MetricsManager {{
       constructor() {{
         this.eventSources = new Map();
-        this.servers = new Map();  // Store server data
         this.instanceOwners = new Map();
         this.spaceIds = new Map();
       }}
@@ -252,19 +250,23 @@ htmlTemplate = f"""
             this.spaceIds.set(instanceId, instanceId);
             this.instanceOwners.set(instanceId, username);
-            this.servers.set(instanceId, {{ lastSeen: 0,  uploadBps: 0, downloadBps: 0 }}); // Initialize server data
             eventSource.addEventListener("metric", (event) => {{
                 try {{
                     const data = JSON.parse(event.data);
-                    // console.log("Received data:", data); // Debugging line
                     this.servers.set(instanceId, {{
                         lastSeen: Date.now(),
                         uploadBps: data.tx_bps,
                         downloadBps: data.rx_bps,
                     }});
-                    updateServerCard(data, instanceId);
                 }} catch (error) {{
                     console.error(`解析数据失败 (${{instanceId}}):`, error);
@@ -274,7 +276,7 @@ htmlTemplate = f"""
             eventSource.onerror = (error) => {{
                 console.error(`EventSource 错误 (${{instanceId}}):`, error);
                 eventSource.close();
-                this.eventSources.delete(instanceId); // Remove on error
             }};
             this.eventSources.set(instanceId, eventSource);
@@ -290,7 +292,6 @@ htmlTemplate = f"""
     }}
     const metricsManager = new MetricsManager();
-    //const servers = new Map(); // Moved to MetricsManager
     async function initialize() {{
       const instances = await fetchInstances();
@@ -306,13 +307,14 @@ htmlTemplate = f"""
         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>
@@ -345,25 +347,49 @@ htmlTemplate = f"""
               </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()); // NO LONGER NEEDED - handled in MetricsManager
-          updateSummary();
     }}
     function updateSummary() {{
@@ -377,15 +403,19 @@ htmlTemplate = f"""
             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;  // Use serverData, handle null/undefined
-                totalDownload += serverData.downloadBps || 0; // Use serverData, handle null/undefined
             }} else {{
                 offline++;
             }}
@@ -406,6 +436,30 @@ htmlTemplate = f"""
     }}
     initialize(); // Initial load
     setInterval(updateSummary, 2000);
@@ -420,65 +474,5 @@ htmlTemplate = f"""
 </html>
 """
-USERNAME = os.environ.get("USERNAME", "yangtb24")  # Default username
-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():
-    instances = fetch_instances(USERNAME)
-    return jsonify(instances)
-@app.route('/metrics/<username>/<instance_id>')
-def stream_metrics(username, instance_id):
-    url = f"https://api.hf.space/v1/{username}/{instance_id}/live-metrics/sse"
-    def generate():
-        try:
-            response = requests.get(url, stream=True, headers={"Accept": "text/event-stream"}, timeout=15)
-            response.raise_for_status()
-            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"
-                        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":
-                            # Correctly yield the JSON data:
-                            yield f"event: {event_type}\ndata: {json.dumps(json.loads(''.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)

 from flask import Flask, render_template_string, jsonify, Response
 import requests
 import os
+import json
 app = Flask(__name__)
 }
 .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 {
   <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>
   <div class="container">
     class MetricsManager {{
       constructor() {{
         this.eventSources = new Map();
+        this.servers = new Map();
         this.instanceOwners = new Map();
         this.spaceIds = new Map();
       }}
             this.spaceIds.set(instanceId, instanceId);
             this.instanceOwners.set(instanceId, username);
+            this.servers.set(instanceId, {{ lastSeen: 0,  uploadBps: 0, downloadBps: 0 }});
             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,
                     }});
+                  //  console.log("Received data:", data);
+                    // Use MutationObserver to wait for the card to be added
+                    waitForElement(`#server-${{data.replica}}`, () => {{
+                        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);
     }}
     const metricsManager = new MetricsManager();
     async function initialize() {{
       const instances = await fetchInstances();
         const owner = metricsManager.instanceOwners.get(spaceId);
         if (!serverElement) {{
+          // console.log(`Creating card for server: ${{serverId}}`);
             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-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 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>
             `;
             document.getElementById('servers').appendChild(card);
+            // console.log(`Card created and appended for server: ${{serverId}}`);
         }}
+        // Use querySelectorAll and check for null to be extra safe
+        const card = document.getElementById(`server-${{serverId}}`);
+        if (!card) return; // Defensive check
+        const cpuUsageElements = card.querySelectorAll('.cpu-usage');
+        const cpuProgressBarElements = card.querySelectorAll('.cpu-progress-bar');
+        const memoryUsageElements = card.querySelectorAll('.memory-usage');
+        const memoryProgressBarElements = card.querySelectorAll('.memory-progress-bar');
+        const uploadElements = card.querySelectorAll('.upload');
+        const downloadElements = card.querySelectorAll('.download');
+        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;
+        if (cpuUsageElements.length > 0) {{
+          cpuUsageElements[0].textContent = `${{cpuUsage.toFixed(2)}}%`;
+        }}
+        if (cpuProgressBarElements.length > 0) {{
+          cpuProgressBarElements[0].style.width = `${{cpuUsage}}%`;
+        }}
+        if (memoryUsageElements.length > 0) {{
+            memoryUsageElements[0].textContent = `${{memoryUsage.toFixed(2)}}%`;
+        }}
+        if(memoryProgressBarElements.length > 0){{
+            memoryProgressBarElements[0].style.width = `${{memoryUsage}}%`;
+        }}
+        if (uploadElements.length > 0) {{
+            uploadElements[0].textContent = `${{formatBytes(uploadBps)}}/s`;
+        }}
+        if (downloadElements.length > 0) {{
+            downloadElements[0].textContent = `${{formatBytes(downloadBps)}}/s`;
+        }}
+        updateSummary();
     }}
     function updateSummary() {{
             const isOnline = (now - serverData.lastSeen) < 10000;
             const serverCard = document.getElementById(`server-${{serverId}}`);
+            //Update status dot
             if (serverCard) {{
                 const statusDot = serverCard.querySelector('.status-dot');
+                if(statusDot){{
+                    statusDot.classList.remove('status-online', 'status-offline');
+                    statusDot.classList.add(isOnline ? 'status-online' : 'status-offline');
+                }}
             }}
             if (isOnline) {{
                 online++;
+                totalUpload += serverData.uploadBps || 0;
+                totalDownload += serverData.downloadBps || 0;
             }} else {{
                 offline++;
             }}
     }}
+    // MutationObserver to wait for elements to be added to the DOM
+    function waitForElement(selector, callback) {{
+        const element = document.querySelector(selector);
+        if (element) {{
+            callback();
+            return;
+        }}
+        const observer = new MutationObserver(mutations => {{
+            const element = document.querySelector(selector);
+            if (element) {{
+                observer.disconnect();
+                callback();
+            }}
+        }});
+        observer.observe(document.body, {{
+            childList: true,
+            subtree: true
+        }});
+    }}
     initialize(); // Initial load
     setInterval(updateSummary, 2000);
 </html>
 """
 if __name__ == '__main__':
     app.run(debug=True, host='0.0.0.0', port=7860)