| from flask import Flask, render_template_string, jsonify, Response |
| import requests |
| import os |
|
|
| 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 = '{{username}}'; |
| |
| 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 = os.environ.get("USERNAME", "yangtb24") |
|
|
| 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 [{"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, username=USERNAME) |
|
|
| @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): |
| 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"}, timeout=15) |
| response.raise_for_status() |
|
|
| buffer = "" |
| for chunk in response.iter_content(chunk_size=1024, decode_unicode=True): |
| if chunk: |
| buffer += chunk |
| while "\n\n" in buffer: |
| event_data, buffer = buffer.split("\n\n", 1) |
| lines = event_data.split("\n") |
| event_type = "message" |
| data_lines = [] |
| for line in lines: |
| if line.startswith("event:"): |
| event_type = line.split(":", 1)[1].strip() |
| elif line.startswith("data:"): |
| data_lines.append(line.split(":", 1)[1].strip()) |
| |
| if event_type == "metric": |
| yield f"event: {event_type}\ndata: {''.join(data_lines)}\n\n" |
|
|
| except requests.exceptions.RequestException as e: |
| print(f"Request Exception: {e}") |
| yield f"event: error\ndata: Connection error: {e}\\n\\n" |
| except Exception as e: |
| print(f"An error occurred: {e}") |
| yield f"event: error\ndata: An error occurred: {e}\\n\\n" |
|
|
| return Response(generate(), mimetype='text/event-stream') |
|
|
| if __name__ == '__main__': |
| app.run(debug=True, host='0.0.0.0', port=7860) |
