Update app.py

app.py

@@ -1,8 +1,9 @@
 from flask import Flask, render_template_string
 import requests
-import threading
+import json
+from threading import Thread, Lock
 import time
-from concurrent.futures import ThreadPoolExecutor
+from datetime import datetime, timedelta
 
 app = Flask(__name__)
 
@@ -225,209 +226,246 @@ htmlTemplate = f"""
     <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 }}';
-    const serversData = {{ servers_data|tojson }};
+    const username = 'yangtb24';
+    let serversData = {{ servers_data|tojson }};  // 从 Flask 传入初始数据
 
     function updateServerCard(data, spaceId) {{
-        const serverId = data.replica;
-        const serverElement = document.getElementById(`server-${serverId}`);
-        const owner = '{{ username }}';
-
-        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>
+      const serverId = data.replica;
+      const serverElement = document.getElementById(`server-${serverId}`);
+      const owner = username; // Simplified, since we know the 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>
-              <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 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-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;
+                <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);
+      }}
 
-        card.querySelector('.cpu-usage').textContent = `${cpuUsage.toFixed(2)}%`;
-        card.querySelector('.cpu-progress-bar').style.width = `${cpuUsage}%`;
+      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('.memory-usage').textContent = `${memoryUsage.toFixed(2)}%`;
-        card.querySelector('.memory-progress-bar').style.width = `${memoryUsage}%`;
+      card.querySelector('.cpu-usage').textContent = `${cpuUsage.toFixed(2)}%`;
+      card.querySelector('.cpu-progress-bar').style.width = `${cpuUsage}%`;
 
-        card.querySelector('.upload').textContent = `${formatBytes(uploadBps)}/s`;
-        card.querySelector('.download').textContent = `${formatBytes(downloadBps)}/s`;
+      card.querySelector('.memory-usage').textContent = `${memoryUsage.toFixed(2)}%`;
+      card.querySelector('.memory-progress-bar').style.width = `${memoryUsage}%`;
 
-        serversData[serverId] = {{ last_seen: Date.now() }};  // Update last seen
-        updateSummary();
+      card.querySelector('.upload').textContent = `${formatBytes(uploadBps)}/s`;
+      card.querySelector('.download').textContent = `${formatBytes(downloadBps)}/s`;
     }}
-
-    function updateSummary() {{
-        const now = Date.now();
+    
+        function updateSummary() {
         let online = 0;
         let offline = 0;
         let totalUpload = 0;
         let totalDownload = 0;
+        let totalServers = 0;
 
-      for (const serverId in serversData) {{
-        const lastSeen = serversData[serverId].last_seen;
-        const isOnline = (now - lastSeen) < 10000;
-        const serverCard = document.getElementById(`server-${serverId}`);
+        for (const spaceId in serversData) {
+            for (const replicaId in serversData[spaceId]) {
+                totalServers++;
+                const server = serversData[spaceId][replicaId];
+                const isOnline = server.isOnline;
+                const serverCard = document.getElementById(`server-${replicaId}`);
 
-        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++;
-      }}
+                if (serverCard) {
+                    const statusDot = serverCard.querySelector('.status-dot');
+                    statusDot.className = `status-dot status-${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`;
-    }}
 
+                if (isOnline) {
+                    online++;
+                    totalUpload += server.tx_bps;
+                    totalDownload += server.rx_bps;
+
+                } 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) {{
+    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 rendering of server cards (from server-side data)
+    }
+    
+    //初始更新
     for (const spaceId in serversData) {{
-        for (const replicaId in serversData[spaceId].replicas) {{
-            updateServerCard(serversData[spaceId].replicas[replicaId], spaceId);
-        }}
-    }}
-      updateSummary(); // Initial summary update
-
-
-    // Long-polling (simulated SSE with fetch)
-    async function fetchMetrics() {{
-      try {{
-        const response = await fetch('/metrics');
-        const updatedServersData = await response.json();
-
-        for (const spaceId in updatedServersData) {{
-            for(const replicaId in updatedServersData[spaceId].replicas) {
-                updateServerCard(updatedServersData[spaceId].replicas[replicaId], spaceId);
-            }
-        }}
-        updateSummary(); // Update summary after each fetch
-      }} catch (error) {{
-        console.error("Error fetching metrics:", error);
+      for (const replicaId in serversData[spaceId]) {{
+          const server = serversData[spaceId][replicaId];
+          updateServerCard(server, spaceId);
       }}
-       setTimeout(fetchMetrics, 2000); // Poll every 2 seconds
     }}
-
-    fetchMetrics(); // Start fetching metrics
-
+    updateSummary();
+
+    // 定时更新
+    setInterval(() => {{
+      fetch('/update_data')
+        .then(response => response.json())
+        .then(data => {{
+          serversData = data.servers_data;
+          for (const spaceId in serversData) {{
+              for (const replicaId in serversData[spaceId]) {{
+                  const server = serversData[spaceId][replicaId];
+                  updateServerCard(server, spaceId);
+              }}
+          }}
+          updateSummary();
+        }});
+    }}, 2000);
   </script>
 </body>
 </html>
 """
 
 
+USERNAME = 'yangtb24'
+servers_data = {}  # {space_id: {replica_id: {metrics}, ...}, ...}
+data_lock = Lock()
+last_fetch_time = {}  # 记录每个space的上次获取时间
+FETCH_INTERVAL = 5  # 5秒获取间隔
+MAX_OFFLINE_TIME = 10  # 10秒判定为离线
+
+
 def fetch_instances(username):
-    """Fetches the list of instances for a given username."""
     try:
         response = requests.get(f"https://huggingface.co/api/spaces?author={username}")
-        response.raise_for_status()  # Raise an exception for bad status codes
+        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 [{"id": instance["id"].split('/')[1], "owner": username} for instance in user_instances]
+    except requests.RequestException as e:
+        print(f"获取实例列表失败：{e}")
         return []
 
-def fetch_metrics_for_instance(username, instance_id):
-    """Fetches metrics for a single instance using long-polling."""
+def fetch_metrics(username, space_id):
     try:
-        response = requests.get(f"https://api.hf.space/v1/{username}/{instance_id}/live-metrics", timeout=30)  # Use a timeout
+        response = requests.get(f"https://api.hf.space/v1/{username}/{space_id}/live-metrics/sse", stream=True)
         response.raise_for_status()
-        return response.json()
-    except requests.exceptions.RequestException as e:
-        print(f"Error fetching metrics for {username}/{instance_id}: {e}")
-        return None
-
-def get_all_metrics(username, instances):
-    """Fetches metrics for all instances concurrently."""
-    all_servers_data = {}
-    with ThreadPoolExecutor(max_workers=10) as executor:  # Adjust max_workers as needed
-        futures = {executor.submit(fetch_metrics_for_instance, username, instance['id']): instance for instance in instances}
-        for future in futures:
-            instance = futures[future]
-            try:
-                metrics = future.result()
-                if metrics:
-                    all_servers_data[instance['id']] = {
-                        "last_seen": int(time.time() * 1000),
-                        "replicas": {replica["replica"]: replica for replica in metrics}
-                    }
-
-            except Exception as e:
-                print(f"Error processing metrics for {instance['id']}: {e}")
-    return all_servers_data
-
-@app.route("/")
-def home():
-    username = "yangtb24"  # Replace with your desired username
-    instances = fetch_instances(username)
-    initial_servers_data = get_all_metrics(username, instances)
-
-    return render_template_string(htmlTemplate, username=username, servers_data=initial_servers_data)
-
-@app.route("/metrics")
-def metrics():
-    username = "yangtb24"
-    instances = fetch_instances(username)
-    updated_servers_data = get_all_metrics(username, instances)
-    return updated_servers_data, 200, {'Content-Type': 'application/json'}
-
-
-if __name__ == "__main__":
-    app.run(debug=True, host="0.0.0.0", port=7860) # Use port 7860 for HF Spaces
 
+        for line in response.iter_lines():
+            if line:
+                decoded_line = line.decode('utf-8')
+                if decoded_line.startswith("event: metric"):
+                    try:
+                        data_str = decoded_line.split("data: ", 1)[1]
+                        data = json.loads(data_str)
+                        with data_lock:
+                            if space_id not in servers_data:
+                                servers_data[space_id] = {}
+                            data['isOnline'] = True #初始都设置为在线
+                            servers_data[space_id][data['replica']] = data
+                            last_fetch_time[space_id] = datetime.now()
+
+                    except json.JSONDecodeError as e:
+                        print(f"解析数据失败 ({space_id}): {e}")
+
+    except requests.RequestException as e:
+        print(f"连接失败 ({username}/{space_id}): {e}")
+        with data_lock:
+            # 如果请求失败,设置isOnline为False
+            if space_id in servers_data:
+                for replica_id in servers_data[space_id]:
+                    servers_data[space_id][replica_id]['isOnline'] = False
+
+def update_metrics():
+    """定期更新所有实例的指标"""
+    while True:
+        instances = fetch_instances(USERNAME)
+        threads = []
+        for instance in instances:
+            thread = Thread(target=fetch_metrics, args=(instance['owner'], instance['id']))
+            threads.append(thread)
+            thread.start()
+
+        for thread in threads:
+            thread.join()  # 等待所有线程完成,防止线程过多
+
+        time.sleep(300)  # 每 5 分钟刷新一次实例列表
+
+
+# 启动指标更新线程
+update_thread = Thread(target=update_metrics)
+update_thread.daemon = True  # 设置为守护线程，主程序退出时自动退出
+update_thread.start()
+
+def check_online_status():
+    """定期检查服务器在线状态"""
+    while True:
+        now = datetime.now()
+        with data_lock:
+            for space_id in list(last_fetch_time.keys()):  # 使用list防止迭代时字典大小改变
+                if now - last_fetch_time[space_id] > timedelta(seconds=MAX_OFFLINE_TIME):
+                    if space_id in servers_data:
+                        for replica_id in servers_data[space_id]:
+                            servers_data[space_id][replica_id]['isOnline'] = False
+        time.sleep(2) #每2秒检查一次
+
+
+# 启动在线状态检查线程
+check_status_thread = Thread(target=check_online_status)
+check_status_thread.daemon = True
+check_status_thread.start()
+
+
+@app.route('/')
+def index():
+    with data_lock:
+        return render_template_string(htmlTemplate, servers_data=servers_data)
+
+@app.route('/update_data')
+def update_data():
+    with data_lock:
+        return {'servers_data': servers_data}
+
+if __name__ == '__main__':
+    app.run(debug=True, host="0.0.0.0", port=7860) # HF Spaces 默认端口是 7860