Update app.py

app.py

@@ -1,8 +1,9 @@
-from flask import Flask, Response, render_template_string
+from flask import Flask, render_template_string
 import requests
 import json
-from threading import Lock
+from threading import Thread, Lock
 import time
+from datetime import datetime, timedelta
 
 app = Flask(__name__)
 
@@ -225,177 +226,108 @@ 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 = 'yangtb24';
-
-    async function fetchInstances() {{
-      try {{
-        const response = await fetch(`https://huggingface.co/api/spaces?author=${{username}}`);
-        const userInstances = await response.json();
-        return userInstances.map(instance => ({{
-          id: instance.id.split('/')[1],
-          owner: username
-        }}));
-      }} 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(
-            `https://api.hf.space/v1/${{username}}/${{instanceId}}/live-metrics/sse`
-          );
-
-          this.spaceIds.set(instanceId, instanceId);
-          this.instanceOwners.set(instanceId, username);
-
-          eventSource.addEventListener("metric", (event) => {{
-            try {{
-              const data = JSON.parse(event.data);
-              updateServerCard(data, instanceId);
-            }} catch (error) {{
-              console.error(`解析数据失败 (${{instanceId}}):`, error);
-            }}
-          }});
-
-          eventSource.onerror = (error) => {{
-            console.error(`EventSource 错误 (${{instanceId}}):`, error);
-            eventSource.close();
-          }};
-
-          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);
-      }});
-    }}
-
-    initialize();
+    const serversData = {{ servers_data|tojson }};
 
     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 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>
+        const serverId = data.replica;
+        const serverElement = document.getElementById(`server-${serverId}`);
+        const owner = data.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 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-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-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-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);
+        }}
 
-      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('.memory-usage').textContent = `${memoryUsage.toFixed(2)}%`;
+        card.querySelector('.memory-progress-bar').style.width = `${memoryUsage}%`;
 
-      card.querySelector('.download').textContent = `${{formatBytes(downloadBps)}}/s`;
+        card.querySelector('.upload').textContent = `${formatBytes(uploadBps)}/s`;
+        card.querySelector('.download').textContent = `${formatBytes(downloadBps)}/s`;
 
-      servers.set(serverId, Date.now());
-      updateSummary();
+        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}}`);
+        let online = 0;
+        let offline = 0;
+        let totalUpload = 0;
+        let totalDownload = 0;
+
+      for (const serverId in serversData) {{
+        const serverData = serversData[serverId];
+
+        if (!serverData) continue; // Skip if serverData is null
+
+        const isOnline = serverData.status === 'online';
+        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;
+            totalUpload += serverData.tx_bps;
+            totalDownload += serverData.rx_bps;
           }}
         }}
         isOnline ? online++ : offline++;
-      }});
+      }}
+      
 
-      document.getElementById('totalServers').textContent = servers.size;
+      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`;
+      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;
@@ -404,214 +336,159 @@ htmlTemplate = f"""
       return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
     }}
 
-    setInterval(updateSummary, 2000);
-
-    setInterval(async () => {{
-      metricsManager.disconnectAll();
-      await initialize();
-    }}, 300000);
+    // Initial update with existing data
+    for (const spaceId in serversData) {{
+        for(const replicaId in serversData[spaceId]){{
+           updateServerCard(serversData[spaceId][replicaId], spaceId);
+        }}
+    }}
 
+    // No need for setInterval here;  data is updated via Flask
   </script>
 </body>
 </html>
 """
 
-
 class MetricsManager:
-    def __init__(self):
-        self.event_sources = {}
-        self.servers = {}
-        self.instance_owners = {}
-        self.space_ids = {}
-        self.lock = Lock()  # Use a lock for thread safety
-
-    def connect(self, instance_id, username):
-        with self.lock:
-            if instance_id in self.event_sources:
-                return
-
-            self.space_ids[instance_id] = instance_id
-            self.instance_owners[instance_id] = username
-            #  In a real deployment, you'd manage the EventSource connections more carefully.
-            #  For simplicity, we're not actually creating them here.
-            self.event_sources[instance_id] = True # Simulate connection
-
-
-    def disconnect_all(self):
-        with self.lock:
-            # In a production environment, you would properly close the EventSource connections here.
-            self.event_sources.clear()
-            self.servers.clear() # Also clear server data on disconnect
-            self.instance_owners.clear()
-            self.space_ids.clear()
-
-
-metrics_manager = MetricsManager()
-
-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 []
-
-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 generate_server_card(data, space_id):
-    server_id = data['replica']
-    owner = metrics_manager.instance_owners.get(space_id, "Unknown")
-
-    cpu_usage = data.get('cpu_usage_pct', 0)
-    memory_used = data.get('memory_used_bytes', 1)  # Default to 1 to avoid division by zero
-    memory_total = data.get('memory_total_bytes', 1)
-    memory_usage = (memory_used / memory_total) * 100 if memory_total else 0
-    upload_bps = data.get('tx_bps', 0)
-    download_bps = data.get('rx_bps', 0)
-
-    with metrics_manager.lock:
-      metrics_manager.servers[server_id] = time.time()
-
-    return f"""
-        <div class="server-card" id="server-{server_id}">
-          <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>{server_id} ({owner}/{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:{cpu_usage:.2f}%"></div>
-                </div>
-                <div class="metric-value cpu-usage">{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:{memory_usage:.2f}%"></div>
-                </div>
-                <div class="metric-value memory-usage">{memory_usage:.2f}%</div>
-            </div>
-            <div class="metric-item">
-              <div class="metric-label">上传</div>
-              <div class="metric-value upload">{format_bytes(upload_bps)}/s</div>
-            </div>
-            <div class="metric-item">
-              <div class="metric-label">下载</div>
-              <div class="metric-value download">{format_bytes(download_bps)}/s</div>
-            </div>
-          </div>
-        </div>
-        """
-
-def update_summary():
-    now = time.time()
-    online = 0
-    offline = 0
-    total_upload = 0
-    total_download = 0
-
-    with metrics_manager.lock:
-      for server_id, last_seen in metrics_manager.servers.items():
-          is_online = (now - last_seen) < 10
-          if is_online:
-              online += 1
-          else:
-              offline += 1
-
-    return online, offline, total_upload, total_download
-
-
-@app.route("/")
+    def __init__(self, username):
+        self.username = username
+        self.servers_data = {}  # Store all server data
+        self.data_lock = Lock()  # Lock for thread-safe updates
+        self.last_fetch_time = {}  # Track last fetch time for each instance
+        self.instance_ids = set() # store instance ids
+
+
+    def fetch_instances(self):
+        """Fetches instances for the given username."""
+        try:
+            response = requests.get(f"https://huggingface.co/api/spaces?author={self.username}")
+            response.raise_for_status()  # Raise an exception for bad status codes
+            user_instances = response.json()
+            new_instance_ids = {instance['id'].split('/')[1] for instance in user_instances}
+
+            # Check for removed instances
+            for instance_id in list(self.instance_ids):  # Iterate over a copy
+                if instance_id not in new_instance_ids:
+                    self.remove_instance(instance_id)
+                    print(f"Instance removed: {instance_id}")
+
+            self.instance_ids.update(new_instance_ids) # Update the set of instance IDs
+            return [{'id': instance_id, 'owner': self.username} for instance_id in new_instance_ids]
+
+        except requests.RequestException as e:
+            print(f"Error fetching instances: {e}")
+            return []
+        except (KeyError, IndexError, json.JSONDecodeError) as e:
+            print(f"Error parsing instance data: {e}")
+            return []
+
+    def remove_instance(self, instance_id):
+        """Removes an instance and its associated data."""
+        with self.data_lock:
+            if instance_id in self.servers_data:
+                del self.servers_data[instance_id]
+            if instance_id in self.last_fetch_time:
+                del self.last_fetch_time[instance_id]
+            if instance_id in self.instance_ids:
+                self.instance_ids.remove(instance_id)
+
+    def fetch_metrics(self, instance_id, owner):
+        """Fetches metrics for a single instance."""
+        url = f"https://api.hf.space/v1/{owner}/{instance_id}/live-metrics/sse"
+        try:
+            response = requests.get(url, stream=True, timeout=10)  # Timeout for connection
+            response.raise_for_status()
+
+            for line in response.iter_lines():
+                if line:
+                    try:
+                        decoded_line = line.decode('utf-8')
+                        if decoded_line.startswith("event: metric"):
+                            data_part = decoded_line.split("data: ", 1)[1]
+                            data = json.loads(data_part)
+                            self.update_server_data(data, instance_id, owner)
+                    except (IndexError, json.JSONDecodeError) as e:
+                        print(f"Error parsing metric data for {instance_id}: {e}, Line: {line.decode('utf-8')}")
+                        continue  # Continue to the next line
+
+        except requests.exceptions.RequestException as e:
+            print(f"Error fetching metrics for {instance_id}: {e}")
+            self.mark_offline(instance_id) # Mark as offline
+        except Exception as e:
+            print(f"An unexpected error occurred for {instance_id}: {e}")
+            self.mark_offline(instance_id)
+
+
+
+    def update_server_data(self, data, space_id, owner):
+        """Updates server data in a thread-safe manner."""
+        with self.data_lock:
+            replica_id = data['replica']
+
+            # Check if the space_id exists in servers_data, if not, create it
+            if space_id not in self.servers_data:
+                self.servers_data[space_id] = {}
+
+            # Now, update the data for the specific replica within that space_id
+            if replica_id not in self.servers_data[space_id]:
+                self.servers_data[space_id][replica_id] = {}
+
+            self.servers_data[space_id][replica_id] = {
+                'replica': replica_id,
+                'owner': owner,
+                'cpu_usage_pct': data['cpu_usage_pct'],
+                'memory_used_bytes': data['memory_used_bytes'],
+                'memory_total_bytes': data['memory_total_bytes'],
+                'tx_bps': data['tx_bps'],
+                'rx_bps': data['rx_bps'],
+                'status': 'online'  # Mark as online when data is received
+            }
+
+            self.last_fetch_time[space_id] = datetime.utcnow()
+
+    def mark_offline(self, instance_id):
+        """Marks an instance as offline."""
+        with self.data_lock:
+            if instance_id in self.servers_data:
+                for replica_id in self.servers_data[instance_id]:
+                  if self.servers_data[instance_id][replica_id]: # Check if not None
+                      self.servers_data[instance_id][replica_id]['status'] = 'offline'
+
+    def check_timeouts(self):
+        """Checks for instances that haven't been updated recently."""
+        now = datetime.utcnow()
+        with self.data_lock:
+            for instance_id in list(self.last_fetch_time.keys()):  # Iterate on a copy
+                if now - self.last_fetch_time.get(instance_id, datetime.min) > timedelta(seconds=10):
+                    self.mark_offline(instance_id)
+
+    def run_fetch(self):
+        """Fetches metrics for all instances in a loop."""
+        while True:
+            instances = self.fetch_instances()
+            for instance in instances:
+                self.fetch_metrics(instance['id'], instance['owner'])
+            self.check_timeouts()
+            time.sleep(2)  # Fetch every 2 seconds
+
+    def start(self):
+        """Starts the data fetching in a separate thread."""
+        thread = Thread(target=self.run_fetch)
+        thread.daemon = True  # Allow the program to exit even if the thread is running
+        thread.start()
+
+# --- Flask App Setup ---
+username = 'yangtb24'  # Replace with your Hugging Face username
+metrics_manager = MetricsManager(username)
+metrics_manager.start()  # Start the data collection
+
+@app.route('/')
 def home():
-    username = 'yangtb24'
-    instances = fetch_instances(username)
-    for instance in instances:
-        metrics_manager.connect(instance['id'], instance['owner'])
-
-    server_cards_html = ""
-    #  We're not getting live updates, so just create static cards
-    for instance in instances:
-        # Simulate some data.  In a real application, this would come from the EventSource.
-        simulated_data = {
-            'replica': f"{instance['id']}-replica",
-            'cpu_usage_pct': 10.5,  # Example value
-            'memory_used_bytes': 1024 * 1024 * 200,  # 200MB
-            'memory_total_bytes': 1024 * 1024 * 1024,  # 1GB
-            'tx_bps': 50000,
-            'rx_bps': 25000,
-        }
-        server_cards_html += generate_server_card(simulated_data, instance['id'])
-
-    online, offline, total_upload, total_download = update_summary()
-    total_servers = len(metrics_manager.servers)
-
-    # Inject dynamic data into the HTML template
-    rendered_html = htmlTemplate.replace(
-        '<!-- 服务器卡片将在这里动态生成 -->', server_cards_html
-    ).replace(
-        '<div>总实例数: <span id="totalServers">0</span></div>',
-        f'<div>总实例数: <span id="totalServers">{total_servers}</span></div>'
-    ).replace(
-        '<div>在线实例: <span id="onlineServers">0</span></div>',
-         f'<div>在线实例: <span id="onlineServers">{online}</span></div>'
-    ).replace(
-        '<div>离线实例: <span id="offlineServers">0</span></div>',
-        f'<div>离线实例: <span id="offlineServers">{offline}</span></div>'
-    ).replace(
-        '<div>总上传: <span id="totalUpload">0 B/s</span></div>',
-        f'<div>总上传: <span id="totalUpload">{format_bytes(total_upload)}/s</span></div>'
-    ).replace(
-        '<div>总下载: <span id="totalDownload">0 B/s</span></div>',
-        f'<div>总下载: <span id="totalDownload">{format_bytes(total_download)}/s</span></div>'
-    )
-
-
-    return render_template_string(rendered_html)
-
-
-@app.route('/metrics/<username>/<instance_id>')
-def metrics(username, instance_id):
-    # This route is where you would handle real-time metrics updates using Server-Sent Events.
-    # This is a simplified example and does not include the actual SSE implementation.
-    def generate():
-      while True:
-          # Simulate receiving data
-          data = {
-              'replica': f"{instance_id}-replica",  # Correctly format replica ID
-              'cpu_usage_pct': 25.5,
-              'memory_used_bytes': 536870912,  # 512MB
-              'memory_total_bytes': 1073741824,  # 1GB
-              'tx_bps': 120000,
-              'rx_bps': 60000,
-          }
-
-          # Format the data as an SSE event
-          yield f"data: {json.dumps(data)}\n\n"
-          time.sleep(2)  # Send updates every 2 seconds
-
-    return Response(generate(), mimetype='text/event-stream')
-
-
-if __name__ == "__main__":
-    app.run(debug=True, port=7860, host="0.0.0.0") #  Make the server externally visible
+    with metrics_manager.data_lock:
+        # Make a copy to avoid modification during iteration
+        servers_data_copy = metrics_manager.servers_data.copy()
+    return render_template_string(htmlTemplate, servers_data=servers_data_copy)
 
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0', port=7860)