Spaces:

yangtb24
/

Monitor

Paused

App Files Files Community

yangtb24 commited on Feb 13, 2025

Commit

bd144df

verified ·

1 Parent(s): e0d8145

Update app.py

Browse files

Files changed (1) hide show

app.py +259 -287

app.py CHANGED Viewed

@@ -1,8 +1,8 @@
-from flask import Flask, render_template, Response, render_template_string
 import requests
-import json
-from threading import Lock, Thread
 import time
 app = Flask(__name__)
@@ -197,298 +197,270 @@ body {
 }
 """
-# 全局变量，用于存储服务器数据
-servers_data = {}
-servers_data_lock = Lock()  # 数据锁
-username = 'yangtb24'  # 替换为你的 Hugging Face 用户名
-instances = []  # 全局变量存储实例列表
-event_sources = {}  # 全局变量存储 SSE 连接
 def fetch_instances(username):
-    """获取 Hugging Face Space 实例列表"""
     try:
-        print(f"Fetching instances for user: {username}")
         response = requests.get(f"https://huggingface.co/api/spaces?author={username}")
-        print(f"API response status code: {response.status_code}")
-        response.raise_for_status()
         user_instances = response.json()
-        print(f"API response data: {user_instances}")
-        _instances = [  # 使用临时变量
-            {"id": instance["id"].split("/")[1], "owner": username}
-            for instance in user_instances
-        ]
-        print(f"Parsed instances: {_instances}")
-        return _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
-    print(f"Received data in update_server_data: {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>
-    """
-def connect_and_listen(instance):
-    """连接到 SSE 并持续监听"""
-    global event_sources, username
-    space_id = instance['id']
-    url = f"https://api.hf.space/v1/{username}/{space_id}/live-metrics/sse"
-    print(f"Connecting to SSE for space: {space_id}")
-    while True:  # 持续重连循环
-        try:
-            # Add the Accept header for SSE
-            headers = {'Accept': 'text/event-stream'}
-            response = requests.get(url, stream=True, headers=headers)
-            response.raise_for_status()  # 检查请求是否成功, 4xx or 5xx errors
-            event_sources[space_id] = response
-            # Check if the response is valid before accessing .raw
-            if response and hasattr(response, 'raw'):
-                for line in response.iter_lines():
-                    if line:
-                        line = line.decode("utf-8").strip()
-                        # print(f"Received line from SSE ({space_id}): {line}") # 调试
-                        if line.startswith("event: metric"):
-                            data_line = next(response.iter_lines()).decode("utf-8").strip()
-                            if data_line.startswith("data: "):
-                                try:
-                                    data = json.loads(data_line[6:])
-                                    update_server_data(data, space_id, username)
-                                except json.JSONDecodeError:
-                                    print(f"Error decoding JSON for {space_id}: {data_line}")
-            else:
-                print(f"Invalid response from SSE for {space_id}")
-        except requests.exceptions.RequestException as e:
-            print(f"Connection error for {space_id}: {e}, retrying in 5 seconds...")
-            time.sleep(5)  # 重连间隔
-        except Exception as e:  # Catch other potential errors
-            print(f"Unexpected error for {space_id}: {e}, retrying in 5 seconds...")
-            time.sleep(5)
-def background_task():
-    """后台任务：获取实例、连接 SSE、更新数据"""
-    global instances, username
-    while True: # 持续获取实例并更新
-        new_instances = fetch_instances(username)
-        if new_instances != instances:
-            print("Instances changed, reconnecting...")
-            # 关闭旧的连接
-            for es in event_sources.values():
-                es.close()
-            event_sources.clear()
-            instances = new_instances
-            # 为每个实例创建并启动监听线程
-            for instance in instances:
-                thread = Thread(target=connect_and_listen, args=(instance,), daemon=True)
-                thread.start()
-        time.sleep(300)  # 每 5 分钟检查一次实例列表
-@app.route("/")
-def home():
-    """主页"""
-    global servers_data, 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>
-        <script>
-            function updateData() {{
-                fetch('/')  // 重新请求主页
-                    .then(response => response.text())
-                    .then(html => {{
-                        const parser = new DOMParser();
-                        const doc = parser.parseFromString(html, 'text/html');
-                        // 更新概览
-                        document.getElementById('summary').innerHTML = doc.getElementById('summary').innerHTML;
-                        // 更新服务器卡片 (更有效率的方式)
-                        const newServers = doc.getElementById('servers');
-                        const currentServers = document.getElementById('servers');
-                        // 1. 移除不再存在的卡片
-                        let currentCards = currentServers.querySelectorAll('.server-card');
-                        currentCards.forEach(card => {{
-                            if (!newServers.querySelector(`#${{card.id}}`)) {{ // Corrected string interpolation
-                                card.remove();
-                            }}
-                        }});
-                        // 2. 添加/更新卡片
-                        let newCards = newServers.querySelectorAll('.server-card');
-                        newCards.forEach(newCard => {{
-                            let currentCard = currentServers.querySelector(`#${{newCard.id}}`);
-                            if (currentCard) {{
-                                // 更新现有卡片
-                                currentCard.innerHTML = newCard.innerHTML;
-                            }} else {{
-                                // 添加新卡片
-                                currentServers.appendChild(newCard.cloneNode(true));
-                            }}
-                        }});
-                    }});
-            }}
-            setInterval(updateData, 2000); // 每 2 秒更新一次
-        </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>
-    </body>
-    </html>
-    """
-    return render_template_string(html)
-@app.route("/metrics")
-def metrics():
-    """SSE 端点 (这个路由现在主要用于调试，实际数据更新在后台线程)"""
     def generate():
-        while True:
-            yield "data: {}\n\n".format(json.dumps({"status": "alive"})) #心跳
-            time.sleep(10)
-    return Response(generate(), mimetype="text/event-stream")
-if __name__ == "__main__":
-    # 启动后台任务
-    thread = Thread(target=background_task, daemon=True)
-    thread.start()
-    app.run(debug=True, host="0.0.0.0", port=7860)

+from flask import Flask, render_template_string, jsonify
 import requests
+import threading
 import time
+from sseclient import SSEClient
 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">
+    <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>
+      </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';
+    async function fetchInstances() {{
+      try {{
+        const response = await fetch(`/instances`);
+        const userInstances = await response.json();
+        return userInstances;
+      }} 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();
+      }}
+      async 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);
+        eventSource.addEventListener("metric", (event) => {{
+            try {{
+                const data = JSON.parse(event.data);
+                // console.log("Received data:", data); // Debugging line
+                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
+        }};
+        this.eventSources.set(instanceId, eventSource);
+    }} catch (error) {{
+        console.error(`连接失败 (${{username}}/${{instanceId}}):`, error);
+    }}
+}}
+      disconnectAll() {{
+        this.eventSources.forEach(es => es.close());
+        this.eventSources.clear();
+      }}
+    }}
+    const metricsManager = new MetricsManager();
+    const servers = new Map();
+    async function initialize() {{
+      const instances = await fetchInstances();
+      instances.forEach(instance => {{
+        metricsManager.connect(instance.id, instance.owner);
+      }});
+    }}
+    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>
+              <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>${{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 = `${{formatBytes(uploadBps)}}/s`;
+      card.querySelector('.download').textContent = `${{formatBytes(downloadBps)}}/s`;
+      servers.set(serverId, Date.now());
+      updateSummary();
+    }}
+    function updateSummary() {{
+      const now = Date.now();
+      let online = 0;
+      let offline = 0;
+      let totalUpload = 0;
+      let totalDownload = 0;
+      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 = 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) {{
+      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];
+    }}
+    initialize(); // Initial load
+    setInterval(updateSummary, 2000);
+    setInterval(async () => {{
+        metricsManager.disconnectAll();
+        await initialize();
+    }}, 300000);
+  </script>
+</body>
+</html>
+"""
+USERNAME = 'yangtb24'  # Replace with your Hugging Face username
 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 []
+@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 stream_metrics(username, instance_id):
+    # Use requests.get with stream=True for SSE
+    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"})
+        response.raise_for_status()  # Important: raise HTTP errors
+        client = SSEClient(response)
+        for event in client.events():
+          if event.event == 'metric':
+            yield f"event: {event.event}\\ndata: {event.data}\\n\\n"
+      except requests.exceptions.RequestException as e:
+          print(f"Request Exception: {e}")
+          yield f"event: error\ndata: Connection error\n\n"  # Send an error event
+      except Exception as e:
+        print(f"An error occurred: {e}")
+        yield f"event: error\ndata: An 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) #Huggingface use 7860 port