Spaces:

yangtb24
/

Monitor

Paused

App Files Files Community

yangtb24 commited on Feb 13, 2025

Commit

34d7aaa

verified ·

1 Parent(s): d739a56

Create app.py

Browse files

Files changed (1) hide show

app.py +418 -0

app.py ADDED Viewed

	@@ -0,0 +1,418 @@

+from flask import Flask, render_template_string
+import requests
+import threading
+import time
+from collections import defaultdict
+app = Flask(__name__)
+lightModeStyle = """
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
+  background: #f0f2f5;
+  color: #333;
+  padding: 20px;
+  min-height: 100vh;
+}
+.container {
+  max-width: 1400px;
+  margin: 0 auto;
+  animation: fadeIn 0.5s ease;
+  padding: 0 20px;
+}
+.overview {
+  background: #fff;
+  border-radius: 15px;
+  padding: 25px;
+  margin-bottom: 30px;
+  border: 1px solid #dfe1e6;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+.overview-title {
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+  color: #2e86de;
+  font-weight: 600;
+}
+.overview-title i {
+    margin-right: 8px;
+}
+#summary {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 15px;
+}
+#summary div {
+  background: #f9fafb;
+  padding: 15px;
+  border-radius: 8px;
+  border: 1px solid #dfe1e6;
+  transition: background-color 0.2s ease;
+}
+#summary div:hover {
+  background-color: #f0f2f5;
+}
+#summary div {
+  font-size: 14px;
+  color: #555;
+}
+#summary span {
+  display: block;
+  font-size: 24px;
+  font-weight: bold;
+  margin-top: 5px;
+  color: #333;
+}
+.stats-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  margin-top: 20px;
+}
+.server-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  border: 1px solid #dfe1e6;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  height: auto;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+.server-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+.server-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  font-size: 16px;
+  color: #444;
+}
+.server-name {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.server-flag {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
+  margin-top: 15px;
+}
+.metric-item {
+  background: #f9fafb;
+  padding: 12px;
+  border-radius: 8px;
+  border: 1px solid #dfe1e6;
+  transition: background-color 0.2s ease;
+}
+.metric-item:hover {
+  background-color: #f0f2f5;
+}
+.metric-label {
+  color: #777;
+  font-size: 13px;
+  margin-bottom: 5px;
+}
+.metric-value {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+.status-dot {
+  display: inline-block;
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+  width: 12px;
+  height: 12px;
+}
+.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 {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes pulse {
+  0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4); }
+  70% { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
+}
+@media (max-width: 768px) {
+  #summary {
+    grid-template-columns: 1fr;
+  }
+  .stats-container {
+    grid-template-columns: 1fr;
+  }
+  .metric-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.progress-bar-container {
+    width: 100%;
+    background-color: #ddd;
+    border-radius: 4px;
+    margin-top: 4px;
+}
+.progress-bar {
+    height: 8px;
+    border-radius: 4px;
+    background-color: #2e86de;
+    width: 0%;
+}
+.cpu-progress-bar {
+    height: 8px;
+    border-radius: 4px;
+    background-color: #2ecc71;
+    width: 0%;
+}
+.memory-progress-bar{
+    height: 8px;
+    border-radius: 4px;
+    background-color: #e67e22;
+    width: 0%;
+}
+"""
+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';
+    let serversData = {{}};
+    function updateUI() {{
+        let totalServers = 0;
+        let onlineServers = 0;
+        let offlineServers = 0;
+        let totalUpload = 0;
+        let totalDownload = 0;
+      const serversContainer = document.getElementById('servers');
+      serversContainer.innerHTML = '';
+        for (const spaceId in serversData) {{
+            for (const serverId in serversData[spaceId]) {{
+                const server = serversData[spaceId][serverId];
+                totalServers++;
+                const isOnline = server.status === 'online';
+                if (isOnline) {{
+                    onlineServers++;
+                  totalUpload += server.uploadBps;
+                  totalDownload += server.downloadBps;
+                }} else {{
+                    offlineServers++;
+                }}
+              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-${{isOnline ? 'online' : '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}} (${{username}}/${{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" style="width: ${{server.cpuUsage}}%"></div>
+                        </div>
+                        <div class="metric-value cpu-usage">${{server.cpuUsage.toFixed(2)}}%</div>
+                    </div>
+                    <div class="metric-item">
+                        <div class="metric-label">内存</div>
+                        <div class="progress-bar-container">
+                            <div class="memory-progress-bar" style="width: ${{server.memoryUsage}}%"></div>
+                        </div>
+                        <div class="metric-value memory-usage">${{server.memoryUsage.toFixed(2)}}%</div>
+                    </div>
+                    <div class="metric-item">
+                      <div class="metric-label">上传</div>
+                      <div class="metric-value upload">${{formatBytes(server.uploadBps)}}/s</div>
+                    </div>
+                    <div class="metric-item">
+                      <div class="metric-label">下载</div>
+                      <div class="metric-value download">${{formatBytes(server.downloadBps)}}/s</div>
+                    </div>
+                  </div>
+                `;
+                serversContainer.appendChild(card);
+            }}
+        }}
+        document.getElementById('totalServers').textContent = totalServers;
+        document.getElementById('onlineServers').textContent = onlineServers;
+        document.getElementById('offlineServers').textContent = offlineServers;
+        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];
+    }}
+    updateUI();
+    fetch('/update_data')
+        .then(response => response.json())
+        .then(data => {{
+            serversData = data;
+            updateUI();
+            setInterval(() => {{
+                fetch('/update_data')
+                    .then(response => response.json())
+                    .then(data => {{
+                        serversData = data;
+                        updateUI();
+                    }});
+            }}, 2000);
+        }});
+  </script>
+</body>
+</html>
+"""
+USERNAME = 'yangtb24'
+servers_data = defaultdict(lambda: defaultdict(dict))
+last_seen = defaultdict(lambda: defaultdict(lambda: 0))
+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 [instance['id'].split('/')[1] for instance in user_instances]
+    except requests.RequestException as e:
+        print(f"Error fetching instances: {e}")
+        return []
+def fetch_metrics(username, instance_id):
+    try:
+        response = requests.get(f"https://api.hf.space/v1/{username}/{instance_id}/live-metrics/sse", stream=True)
+        response.raise_for_status()
+        for line in response.iter_lines():
+            if line:
+                decoded_line = line.decode('utf-8')
+                if decoded_line.startswith("event: metric"):
+                    try:
+                        data_part = decoded_line.split("data: ", 1)[1]
+                        data = eval(data_part) # Use eval (safer than json.loads for this specific HF API)
+                        server_id = data['replica']
+                        cpu_usage = data['cpu_usage_pct']
+                        memory_usage = (data['memory_used_bytes'] / data['memory_total_bytes']) * 100
+                        upload_bps = data['tx_bps']
+                        download_bps = data['rx_bps']
+                        servers_data[instance_id][server_id] = {
+                            'cpuUsage': cpu_usage,
+                            'memoryUsage': memory_usage,
+                            'uploadBps': upload_bps,
+                            'downloadBps': download_bps,
+                            'status': 'online'
+                        }
+                        last_seen[instance_id][server_id] = time.time()
+                    except (IndexError, KeyError, SyntaxError) as e:
+                         print(f"Error parsing metric data: {e}, data: {decoded_line}")
+    except requests.RequestException as e:
+        print(f"Error fetching metrics for {instance_id}: {e}")
+        for server_id in list(servers_data[instance_id].keys()):
+             servers_data[instance_id][server_id]['status'] = 'offline'
+def check_offline_servers():
+    while True:
+        now = time.time()
+        for instance_id in list(last_seen.keys()):
+            for server_id in list(last_seen[instance_id].keys()):
+                if now - last_seen[instance_id][server_id] > 10:
+                    if instance_id in servers_data and server_id in servers_data[instance_id]:
+                        servers_data[instance_id][server_id]['status'] = 'offline'
+        time.sleep(2)
+def start_monitoring(username):
+    instances = fetch_instances(username)
+    if not instances:
+        print("No instances found.")
+        return
+    threads = []
+    for instance_id in instances:
+        thread = threading.Thread(target=fetch_metrics, args=(username, instance_id), daemon=True)
+        threads.append(thread)
+        thread.start()
+    offline_check_thread = threading.Thread(target=check_offline_servers, daemon=True)
+    offline_check_thread.start()
+@app.route('/')
+def index():
+    return render_template_string(htmlTemplate)
+@app.route('/update_data')
+def update_data():
+    return servers_data
+if __name__ == '__main__':
+    start_monitoring(USERNAME)
+    app.run(debug=False, host="0.0.0.0", port=7860)