Spaces:

yangtb24
/

Monitor

Paused

App Files Files Community

yangtb24 commited on Feb 13, 2025

Commit

b80478e

verified ·

1 Parent(s): 6c3c69d

Update app.py

Browse files

Files changed (1) hide show

app.py +305 -253

app.py CHANGED Viewed

@@ -1,8 +1,7 @@
-from flask import Flask, render_template_string, jsonify
 import requests
-import threading
-import time
-from concurrent.futures import ThreadPoolExecutor
 app = Flask(__name__)
@@ -197,14 +196,14 @@ body {
 }
 """
-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>{{ lightModeStyle }}</style>
 </head>
 <body>
   <div class="container">
@@ -226,266 +225,319 @@ htmlTemplate = """
   <script>
     const username = 'yangtb24';
-    const serversData = {{ servers_data|tojson }};
-    function createServerCard(serverId, spaceId, owner) {
-        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 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);
-    }
-    function updateServerCard(data, spaceId) {
-      const serverId = data.replica;
-      const serverElement = document.getElementById(`server-${serverId}`);
-      const owner = data.owner;
-      if (!serverElement) {
-          createServerCard(serverId, spaceId, owner);
-      }
-      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(serverId, data);
-    }
-    function updateSummary(serverId, data) {
-      const now = Date.now();
-      let online = 0;
-      let offline = 0;
-      let totalUpload = 0;
-      let totalDownload = 0;
-      for (const serverId in serversData) {
-          const server = serversData[serverId];
-          const isOnline = server.isOnline;
-          const serverCard = document.getElementById(`server-${serverId}`);
-          if (serverCard) {
-            const statusDot = serverCard.querySelector('.status-dot');
-            statusDot.className = `status-dot status-${isOnline ? 'online' : 'offline'}`;
-            if (isOnline && server.data) {
-                const uploadText = formatBytes(server.data.tx_bps);
-                const downloadText = formatBytes(server.data.rx_bps);
-                totalUpload += server.data.tx_bps;
-                totalDownload += server.data.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;
-      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];
-    }
-    // Initial render based on initial data
-    for (const serverId in serversData) {
-        const server = serversData[serverId];
-        if (server.data) {
-            updateServerCard(server.data, server.spaceId);
-        } else {
-            createServerCard(serverId, server.spaceId, server.owner)
-        }
-    }
-    updateSummary();
   </script>
 </body>
 </html>
 """
-class MetricsManager:
-    def __init__(self, username):
-        self.username = username
-        self.executor = ThreadPoolExecutor(max_workers=10)  # Adjust as needed
-        self.servers_data = {}
-        self.lock = threading.Lock()  # Protect shared data
-        self.stop_event = threading.Event()
-    def fetch_instances(self):
-        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()
-            return [
-                {"id": instance["id"].split("/")[1], "owner": self.username}
-                for instance in user_instances
-            ]
-        except requests.RequestException as e:
-            print(f"Error fetching instances: {e}")
-            return []
-    def connect(self, instance_id, username):
-        if self.stop_event.is_set():
-             return
-        url = f"https://api.hf.space/v1/{username}/{instance_id}/live-metrics/sse"
         try:
-            # Use stream=True for streaming response
-            with requests.get(url, stream=True, timeout=(5, 60)) as response:  # Connect timeout, read timeout
-                response.raise_for_status()
-                if response.encoding is None:
-                    response.encoding = 'utf-8'
-                lines_iter = response.iter_lines(decode_unicode=True)
-                # Skip initial lines until we find the first "event: metric"
-                for line in lines_iter:
-                    if line.strip() == "event: metric":
-                        break
-                # Now process the actual metric data
-                for line in lines_iter:
-                    if self.stop_event.is_set():
-                        break
-                    if line.strip().startswith("data:"):
-                        try:
-                            data_str = line.strip()[5:]  # Remove "data:" prefix
-                            data = eval(data_str)  # Use eval (safer than direct JSON for this case)
-                            server_id = data['replica']
-                            with self.lock:
-                                if server_id not in self.servers_data:
-                                    self.servers_data[server_id] = {
-                                        'spaceId': instance_id,
-                                        'owner': username,
-                                        'data': None,
-                                        'last_seen': 0,
-                                        'isOnline': False,
                                     }
-                                self.servers_data[server_id]['data'] = data
-                                self.servers_data[server_id]['last_seen'] = time.time()
-                                self.servers_data[server_id]['isOnline'] = True
-                        except Exception as e:
-                            print(f"Error parsing data for {instance_id}: {e}")
-                            print(f"  Problematic line: {line.strip()}") # Debugging
         except requests.exceptions.RequestException as e:
-            print(f"Connection failed ({username}/{instance_id}): {e}")
-            # Mark all replicas of this space as offline
-            with self.lock:
-                for server_id, server_info in list(self.servers_data.items()): # Iterate on a copy
-                    if server_info['spaceId'] == instance_id:
-                      server_info['isOnline'] = False
-                      # Optionally remove after a longer timeout:
-                      # if time.time() - server_info['last_seen'] > 30:  # 30 seconds
-                      #     del self.servers_data[server_id]
-    def check_timeouts(self):
-        while not self.stop_event.is_set():
-            with self.lock:
-                now = time.time()
-                for server_id, server_info in list(self.servers_data.items()): # Iterate on a copy
-                    if now - server_info['last_seen'] > 10:
-                        server_info['isOnline'] = False
-                        # Optionally remove after a longer timeout:
-                        # if now - server_info['last_seen'] > 30: # 30 seconds
-                        #     del self.servers_data[server_id]
-            time.sleep(2)
-    def start_monitoring(self):
-        instances = self.fetch_instances()
-        for instance in instances:
-            self.executor.submit(self.connect, instance['id'], instance['owner'])
-        self.timeout_thread = threading.Thread(target=self.check_timeouts, daemon=True)
-        self.timeout_thread.start()
-    def stop_monitoring(self):
-        self.stop_event.set()
-        self.executor.shutdown(wait=False)
-        if hasattr(self, 'timeout_thread'):
-            self.timeout_thread.join()
-    def get_data(self):
-        with self.lock:
-            return self.servers_data.copy()
-metrics_manager = MetricsManager(username='yangtb24')
-@app.route("/")
-def home():
-    servers_data = metrics_manager.get_data()
-    return render_template_string(htmlTemplate, servers_data=servers_data)
-# Initialize and start monitoring *before* running the Flask app
-metrics_manager.start_monitoring()
-# Important:  Use a context manager to cleanly shut down monitoring
-#             when the Flask app stops.  This prevents orphaned threads.
-@app.teardown_appcontext
-def shutdown_session(exception=None):
-    metrics_manager.stop_monitoring()
-if __name__ == "__main__":
-    app.run(debug=False, host="0.0.0.0", port=7860) # Use port 7860 for HF Spaces

+from flask import Flask, render_template_string
 import requests
+import json
+from threading import Lock
 app = Flask(__name__)
 }
 """
+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>">
+  <style>{lightModeStyle}</style>
 </head>
 <body>
   <div class="container">
   <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}`);
+          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 = `${this.formatBytes(uploadBps)}/s`;
+          card.querySelector('.download').textContent = `${this.formatBytes(downloadBps)}/s`;
+          this.servers.set(serverId, Date.now());
+          this.updateSummary();
+        }}
+        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];
+        }}
+    }}
+    const metricsManager = new MetricsManager();
+    async function initialize() {{
+      const instances = await fetchInstances();
+      if (instances) {{
+          instances.forEach(instance => {{
+            metricsManager.connect(instance.id, instance.owner);
+          }});
+      }}
+    }}
+    initialize();
+    setInterval(() => metricsManager.updateSummary(), 2000);
+    // Re-initialize every 5 minutes
+    setInterval(async () => {{
+        metricsManager.disconnectAll();
+        await initialize();
+    }}, 300000);
   </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('/')
+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