Update app.py

app.py

@@ -3,216 +3,10 @@ import requests
 import json
 from threading import Lock
 import time
-from datetime import datetime, timedelta
 
 app = Flask(__name__)
 
-# Global variables to store metrics data, updated by background threads
-metrics_data = {}
-server_status = {}  # {server_id: last_seen_timestamp}
-summary_data = {
-    "totalServers": 0,
-    "onlineServers": 0,
-    "offlineServers": 0,
-    "totalUpload": 0,
-    "totalDownload": 0,
-}
-data_lock = Lock()  # Lock for thread-safe access to metrics_data and server_status
-last_fetch_time = datetime.min  # Initialize to a time in the distant past
-
-USERNAME = 'yangtb24'  # Replace with your Hugging Face username
-FETCH_INTERVAL = 300  # Fetch instances every 5 minutes (seconds)
-SSE_UPDATE_INTERVAL = 2 # Update SSE connections and metrics every 2 seconds (for display)
-SSE_TIMEOUT = 10 # Consider a server offline after this many seconds without updates
-
-
-def fetch_instances():
-    global last_fetch_time
-    if datetime.now() - last_fetch_time < timedelta(seconds=FETCH_INTERVAL):
-        return  # Don't fetch if within the interval
-
-    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()
-        instance_ids = [instance["id"].split('/')[1] for instance in user_instances]
-
-        with data_lock:
-            # Remove old servers
-            for server_id in list(server_status.keys()):
-                if not any(server_id in instance_id for instance_id in instance_ids):
-                    del server_status[server_id]
-                    if server_id in metrics_data: # Check if server_id exists before deleting
-                        del metrics_data[server_id]
-
-
-            # Add new connections (if any).  Connections are made in the get_metrics_stream() function.
-            for instance_id in instance_ids:
-                if not any(instance_id in server_id for server_id in server_status):
-                     server_status[instance_id] = 0  # Initialize with 0 (will be updated by SSE)
-
-        last_fetch_time = datetime.now()
-
-    except requests.exceptions.RequestException as e:
-        print(f"Error fetching instances: {e}")
-
-
-def format_bytes(bytes_value):
-    if bytes_value == 0:
-        return '0 B'
-    k = 1024
-    sizes = ['B', 'KB', 'MB', 'GB', 'TB']
-    i = 0
-    while bytes_value >= k and i < len(sizes) - 1:
-        bytes_value /= k
-        i += 1
-    return f"{bytes_value:.2f} {sizes[i]}"
-
-
-def update_summary():
-    global summary_data
-    with data_lock:
-        now = time.time()
-        online_count = 0
-        offline_count = 0
-        total_upload = 0
-        total_download = 0
-
-        for server_id, last_seen in server_status.items():
-            is_online = (now - last_seen) < SSE_TIMEOUT
-
-            if is_online:
-                online_count += 1
-                if server_id in metrics_data:  # Make sure server_id exists
-                    total_upload += metrics_data[server_id].get('tx_bps', 0)
-                    total_download += metrics_data[server_id].get('rx_bps', 0)
-            else:
-                offline_count += 1
-
-
-        summary_data = {
-            "totalServers": len(server_status),
-            "onlineServers": online_count,
-            "offlineServers": offline_count,
-            "totalUpload": total_upload,
-            "totalDownload": total_download,
-        }
-
-
-def get_metrics_stream():
-    """
-    Generator function for the Server-Sent Events (SSE) stream.
-    """
-
-    while True:
-        fetch_instances() # fetch instances periodically
-
-        with data_lock:
-            # Prepare data for all servers
-            all_servers_data = []
-            for server_id in server_status:
-                instance_id = server_id #instance and server are the same here.
-                owner = USERNAME
-
-                if server_id not in metrics_data:
-                    # Attempt to establish initial connection (important for new instances)
-                    try:
-                        response = requests.get(f"https://api.hf.space/v1/{owner}/{instance_id}/live-metrics/sse", stream=True, timeout=5) #timeout added
-                        response.raise_for_status()
-                        if response.status_code == 200:
-                            # Read the first event to initialize
-                            first_event = next(response.iter_lines()).decode('utf-8')
-                            if first_event.startswith("event: metric"):
-                                data = json.loads(first_event.split("data: ", 1)[1])
-                                metrics_data[server_id] = data
-                                server_status[server_id] = time.time()
-
-                    except (requests.exceptions.RequestException, StopIteration, json.JSONDecodeError) as e:
-                        print(f"Initial connection failed for {server_id}: {e}")
-                        server_status[server_id] = 0  # Mark as potentially offline
-                        continue  # Skip to the next server
-
-                # Process existing connections and updates
-                else:
-                    try:
-                        response = requests.get(f"https://api.hf.space/v1/{owner}/{instance_id}/live-metrics/sse", stream=True, timeout=5)
-                        response.raise_for_status()
-
-                        if response.status_code == 200:
-                            # Read the next event
-                            try:
-                                event = next(response.iter_lines()).decode('utf-8')
-                                if event.startswith("event: metric"):
-                                    data = json.loads(event.split("data: ", 1)[1])
-                                    metrics_data[server_id] = data
-                                    server_status[server_id] = time.time()
-
-                            except StopIteration:
-                                # print(f"No data received for {server_id}, connection likely closed.")
-                                server_status[server_id] = 0  # Mark as potentially offline
-                            except (json.JSONDecodeError, requests.exceptions.RequestException) as e:
-                                print(f"Error processing SSE for {server_id}: {e}")
-                                server_status[server_id] = 0
-                        else:
-                            print(f"Failed to connect for {server_id}, status code: {response.status_code}")
-                            server_status[server_id] = 0
-
-                    except requests.exceptions.RequestException as e:
-                        print(f"Connection error for {server_id}: {e}")
-                        server_status[server_id] = 0  # Mark as potentially offline
-
-
-
-                # Prepare data for this server (even if offline)
-                if server_id in metrics_data:
-                    data = metrics_data[server_id]
-                    cpu_usage = data.get('cpu_usage_pct', 0)
-                    memory_used = data.get('memory_used_bytes', 0)
-                    memory_total = data.get('memory_total_bytes', 1)  # Avoid division by zero
-                    memory_usage = (memory_used / memory_total) * 100 if memory_total > 0 else 0
-                    upload_bps = data.get('tx_bps', 0)
-                    download_bps = data.get('rx_bps', 0)
-                else:
-                    # Default values if no data is available
-                    cpu_usage = 0
-                    memory_usage = 0
-                    upload_bps = 0
-                    download_bps = 0
-
-                server_data = {
-                    "serverId": server_id,
-                    "owner": owner,
-                    "spaceId": instance_id,
-                    "isOnline": (time.time() - server_status.get(server_id, 0)) < SSE_TIMEOUT,
-                    "cpuUsage": f"{cpu_usage:.2f}",
-                    "memoryUsage": f"{memory_usage:.2f}",
-                    "upload": format_bytes(upload_bps),
-                    "download": format_bytes(download_bps),
-                }
-                all_servers_data.append(server_data)
-
-
-            update_summary() # update summary after processing each server.
-            # Include summary data in the SSE payload
-            payload = {
-                "servers": all_servers_data,
-                "summary": summary_data,
-            }
-
-        yield f"data: {json.dumps(payload)}\n\n"
-        time.sleep(SSE_UPDATE_INTERVAL)
-
-
-@app.route('/')
-def index():
-    return render_template('index.html')
-
-@app.route('/metrics')
-def metrics():
-    return Response(get_metrics_stream(), mimetype='text/event-stream')
-
-
-light_mode_style = """
+lightModeStyle = """
 * {
   margin: 0;
   padding: 0;
@@ -403,147 +197,247 @@ body {
 }
 """
 
-@app.route('/test')
-def test():
-    return "Test route is working!"
-
-# Integrated HTML template
-html_template = 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>{light_mode_style}</style>
-</head>
-<body>
-  <div class="container">
-    <div class="overview">
-      <div class="overview-title"><i class="fas fa-chart-line"></i>系统概览</div>
-      <div id="summary">
-        <div>总实例数: <span id="totalServers">0</span></div>
-        <div>在线实例: <span id="onlineServers">0</span></div>
-        <div>离线实例: <span id="offlineServers">0</span></div>
-        <div>总上传: <span id="totalUpload">0 B/s</span></div>
-        <div>总下载: <span id="totalDownload">0 B/s</span></div>
+# 全局变量，用于存储服务器数据
+servers_data = {}
+servers_data_lock = Lock()  # 数据锁
+username = 'yangtb24'  # 替换为你的 Hugging Face 用户名
+
+def fetch_instances(username):
+    """获取 Hugging Face Space 实例列表"""
+    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.RequestException as e:
+        print(f"获取实例列表失败：{e}")
+        return []
+
+
+def format_bytes(bytes_num):
+    """格式化字节数"""
+    if bytes_num == 0:
+        return '0 B'
+    k = 1024
+    sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+    i = 0
+    while bytes_num >= k:
+        bytes_num /= k
+        i += 1
+    return f"{bytes_num:.2f} {sizes[i]}"
+
+
+def update_server_data(data, space_id, owner):
+    """更新服务器数据"""
+    global servers_data
+
+    server_id = data["replica"]
+    with servers_data_lock:
+        if server_id not in servers_data:
+            servers_data[server_id] = {
+                "space_id": space_id,
+                "owner": owner,
+                "last_seen": time.time(),
+                "cpu_usage": 0,
+                "memory_usage": 0,
+                "upload": 0,
+                "download": 0,
+            }
+
+        servers_data[server_id]["last_seen"] = time.time()
+        servers_data[server_id]["cpu_usage"] = data["cpu_usage_pct"]
+        servers_data[server_id]["memory_usage"] = (
+            (data["memory_used_bytes"] / data["memory_total_bytes"]) * 100
+            if data["memory_total_bytes"] > 0 else 0
+        )
+        servers_data[server_id]["upload"] = data["tx_bps"]
+        servers_data[server_id]["download"] = data["rx_bps"]
+
+
+def get_server_cards_html():
+    """生成服务器卡片的 HTML"""
+    global servers_data
+
+    server_cards_html = ""
+    with servers_data_lock:
+      for server_id, data in servers_data.items():
+          is_online = (time.time() - data["last_seen"]) < 10
+          status_class = "status-online" if is_online else "status-offline"
+
+          server_cards_html += f"""
+          <div class="server-card" id="server-{server_id}">
+            <div class="server-header">
+              <div class="server-name">
+                <div class="status-dot {status_class}"></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>{server_id} ({data['owner']}/{data['space_id']})</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" style="width: {data['cpu_usage']:.2f}%"></div>
+                  </div>
+                  <div class="metric-value cpu-usage">{data['cpu_usage']:.2f}%</div>
+              </div>
+              <div class="metric-item">
+                  <div class="metric-label">内存</div>
+                  <div class="progress-bar-container">
+                      <div class="memory-progress-bar" style="width: {data['memory_usage']:.2f}%"></div>
+                  </div>
+                  <div class="metric-value memory-usage">{data['memory_usage']:.2f}%</div>
+              </div>
+              <div class="metric-item">
+                <div class="metric-label">上传</div>
+                <div class="metric-value upload">{format_bytes(data['upload'])}/s</div>
+              </div>
+              <div class="metric-item">
+                <div class="metric-label">下载</div>
+                <div class="metric-value download">{format_bytes(data['download'])}/s</div>
+              </div>
+            </div>
+          </div>
+          """
+    return server_cards_html
+
+
+def get_summary_html():
+    """生成概览的 HTML"""
+    global servers_data
+
+    total_servers = 0
+    online_servers = 0
+    offline_servers = 0
+    total_upload = 0
+    total_download = 0
+
+    with servers_data_lock:
+        total_servers = len(servers_data)
+        for server_id, data in servers_data.items():
+            if (time.time() - data["last_seen"]) < 10:
+                online_servers += 1
+                total_upload += data["upload"]
+                total_download += data["download"]
+            else:
+                offline_servers += 1
+
+    return f"""
+    <div>总实例数: <span id="totalServers">{total_servers}</span></div>
+    <div>在线实例: <span id="onlineServers">{online_servers}</span></div>
+    <div>离线实例: <span id="offlineServers">{offline_servers}</span></div>
+    <div>总上传: <span id="totalUpload">{format_bytes(total_upload)}/s</span></div>
+    <div>总下载: <span id="totalDownload">{format_bytes(total_download)}/s</span></div>
+    """
+
+@app.route("/")
+def home():
+    """主页"""
+    global servers_data, username
+    # 获取实例
+    instances = fetch_instances(username)
+
+    # 构建 HTML 页面
+    html = 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>
+        <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>
+
+    </head>
+    <body>
+      <div class="container">
+        <div class="overview">
+          <div class="overview-title"><i class="fas fa-chart-line"></i>系统概览</div>
+          <div id="summary">
+            {get_summary_html()}
+          </div>
+        </div>
+        <div id="servers" class="stats-container">
+            {get_server_cards_html()}
+        </div>
       </div>
-    </div>
-    <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 = 'yangtb24';
-
-    function updateServerCard(serverData) {{
-        const serverId = serverData.serverId;
-        let serverElement = document.getElementById(`server-${{serverId}}`); // Corrected line
-
-        if (!serverElement) {{
-            const card = document.createElement('div');
-            card.id = `server-${{serverId}}`;  // Corrected line
-            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}} (${{serverData.owner}}/${{serverData.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);
-            serverElement = card; // Update serverElement to the newly created card
-        }}
-
-        const statusDot = serverElement.querySelector('.status-dot');
-        statusDot.className = `status-dot status-${{serverData.isOnline ? 'online' : 'offline'}}`;
-
-        serverElement.querySelector('.cpu-usage').textContent = `${{serverData.cpuUsage}}%`;
-        serverElement.querySelector('.cpu-progress-bar').style.width = `${{serverData.cpuUsage}}%`;
-
-        serverElement.querySelector('.memory-usage').textContent = `${{serverData.memoryUsage}}%`;
-        serverElement.querySelector('.memory-progress-bar').style.width = `${{serverData.memoryUsage}}%`;
-
-        serverElement.querySelector('.upload').textContent = `${{serverData.upload}}/s`;
-        serverElement.querySelector('.download').textContent = `${{serverData.download}}/s`;
-    }}
-
-
-    function updateSummary(summaryData) {{
-      document.getElementById('totalServers').textContent = summaryData.totalServers;
-      document.getElementById('onlineServers').textContent = summaryData.onlineServers;
-      document.getElementById('offlineServers').textContent = summaryData.offlineServers;
-      document.getElementById('totalUpload').textContent = `${{formatBytes(summaryData.totalUpload)}}/s`;
-      document.getElementById('totalDownload').textContent = `${{formatBytes(summaryData.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];
-      }}
-
-    function connectSSE() {{
-      const eventSource = new EventSource('/metrics');
-
-      eventSource.onmessage = function(event) {{
-        const data = JSON.parse(event.data);
-        data.servers.forEach(serverData => {{
-          updateServerCard(serverData);
-        }});
-        updateSummary(data.summary);
-      }};
-
-      eventSource.onerror = function(err) {{
-        console.error("EventSource failed:", err);
-        eventSource.close();
-        setTimeout(connectSSE, 5000); // Attempt to reconnect after 5 seconds
-      }};
-    }}
-    connectSSE();
-
-  </script>
-</body>
-</html>
-"""
 
-@app.route('/index.html')  # Explicitly serve index.html (for clarity)
-def index_html():
-    return render_template('index.html')
+    </body>
+    </html>
+    """
+    return render_template_string(html)
+
+@app.route("/metrics")
+def metrics():
+    """SSE 端点"""
+    global username
+
+    def generate():
+        instances = fetch_instances(username)
+        # 使用字典推导式来创建连接
+        event_sources = {
+            instance["id"]: requests.get(
+                f"https://api.hf.space/v1/{username}/{instance['id']}/live-metrics/sse",
+                stream=True
+            )
+            for instance in instances
+        }
+        try:
+            while True: # 外层循环，处理重连
+                for instance in instances:
+                    space_id = instance["id"]
+
+                    try:
+                        # 检查连接是否还活跃, 如果不活跃, 重新建立连接
+                        if event_sources[space_id].raw.closed:
+                            print(f"Reconnecting to {space_id}...")
+                            event_sources[space_id] = requests.get(
+                                f"https://api.hf.space/v1/{username}/{space_id}/live-metrics/sse",
+                                stream=True
+                            )
+
+                        # 读取一行数据
+                        line = event_sources[space_id].raw.readline()
+
+                        if not line:  # 如果读取到空行，跳过
+                            continue
+
+                        line = line.decode("utf-8").strip()
+
+                        if line.startswith("event: metric"):
+                            data_line = event_sources[space_id].raw.readline().decode("utf-8").strip()
+                            if data_line.startswith("data: "):
+                                try:
+                                    data = json.loads(data_line[6:])
+                                    update_server_data(data, space_id, username)
+                                    # print(f"Received data for {space_id}: {data}") # 调试输出
+                                    yield f"data: {json.dumps({'status': 'updated'})}\\n\\n"  # 发送确认消息
+                                except json.JSONDecodeError:
+                                     print(f"Error decoding JSON for {space_id}: {data_line}")
+                    except requests.exceptions.RequestException as e:
+                        print(f"Connection error for {space_id}: {e}")
+                        # 在这里可以添加重试逻辑, 例如等待一段时间后重新连接
+
+                time.sleep(2)  # 短暂休眠，避免过于频繁的轮询
+
+        finally:  # 确保关闭所有连接
+            for es in event_sources.values():
+                es.close()
+            print("All EventSources closed.")
+
+
+    return Response(generate(), mimetype="text/event-stream")
+
 
+def render_template_string(html_string):
+    """渲染 HTML 字符串"""
+    return Response(html_string, mimetype="text/html")
 
-if __name__ == '__main__':
-    app.run(debug=True, host='0.0.0.0', port=7860)
+if __name__ == "__main__":
+    app.run(debug=True, host="0.0.0.0", port=7860) # 部署到hf，port用7860