Update app.py

app.py

@@ -250,7 +250,7 @@ htmlTemplate = f"""
 
         try {{
           const eventSource = new EventSource(
-            `https://api.hf.space/v1/${username}/${instanceId}/live-metrics/sse`
+            `https://api.hf.space/v1/${{username}}/${{instanceId}}/live-metrics/sse`
           );
 
           this.spaceIds.set(instanceId, instanceId);
@@ -261,18 +261,18 @@ htmlTemplate = f"""
               const data = JSON.parse(event.data);
               updateServerCard(data, instanceId);
             }} catch (error) {{
-              console.error(`解析数据失败 (${instanceId}):`, error);
+              console.error(`解析数据失败 (${{instanceId}}):`, error);
             }}
           }});
 
           eventSource.onerror = (error) => {{
-            console.error(`EventSource 错误 (${instanceId}):`, error);
+            console.error(`EventSource 错误 (${{instanceId}}):`, error);
             eventSource.close();
           }};
 
           this.eventSources.set(instanceId, eventSource);
         }} catch (error) {{
-          console.error(`连接失败 (${username}/${instanceId}):`, error);
+          console.error(`连接失败 (${{username}}/${{instanceId}}):`, error);
         }}
       }}
 
@@ -296,12 +296,12 @@ htmlTemplate = f"""
 
     function updateServerCard(data, spaceId) {{
       const serverId = data.replica;
-      const serverElement = document.getElementById(`server-${serverId}`);
+      const serverElement = document.getElementById(`server-${{serverId}}`);
       const owner = metricsManager.instanceOwners.get(spaceId);
 
       if (!serverElement) {{
         const card = document.createElement('div');
-        card.id = `server-${serverId}`;
+        card.id = `server-${{serverId}}`;
         card.className = 'server-card';
         card.innerHTML = `
           <div class="server-header">
@@ -310,7 +310,7 @@ htmlTemplate = f"""
               <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>${{serverId}} (${{owner}}/${{spaceId}})</div>
             </div>
           </div>
           <div class="metric-grid">
@@ -341,21 +341,21 @@ htmlTemplate = f"""
         document.getElementById('servers').appendChild(card);
       }}
 
-      const card = document.getElementById(`server-${serverId}`);
+      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('.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('.memory-usage').textContent = `${{memoryUsage.toFixed(2)}}%`;
+      card.querySelector('.memory-progress-bar').style.width = `${{memoryUsage}}%`;
 
-      card.querySelector('.upload').textContent = `${formatBytes(uploadBps)}/s`;
+      card.querySelector('.upload').textContent = `${{formatBytes(uploadBps)}}/s`;
 
-      card.querySelector('.download').textContent = `${formatBytes(downloadBps)}/s`;
+      card.querySelector('.download').textContent = `${{formatBytes(downloadBps)}}/s`;
 
       servers.set(serverId, Date.now());
       updateSummary();
@@ -370,10 +370,10 @@ htmlTemplate = f"""
 
       servers.forEach((lastSeen, serverId) => {{
         const isOnline = (now - lastSeen) < 10000;
-        const serverCard = document.getElementById(`server-${serverId}`);
+        const serverCard = document.getElementById(`server-${{serverId}}`);
         if (serverCard) {{
           const statusDot = serverCard.querySelector('.status-dot');
-          statusDot.className = `status-dot status-${isOnline ? 'online' : 'offline'}`;
+          statusDot.className = `status-dot status-${{isOnline ? 'online' : 'offline'}}`;
 
           if (isOnline) {{
             const uploadText = serverCard.querySelector('.upload').textContent;
@@ -388,8 +388,8 @@ htmlTemplate = f"""
       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`;
+      document.getElementById('totalUpload').textContent = `${{formatBytes(totalUpload)}}/s`;
+      document.getElementById('totalDownload').textContent = `${{formatBytes(totalDownload)}}/s`;
     }}
 
     function formatBytes(bytes) {{
@@ -412,9 +412,8 @@ htmlTemplate = f"""
 </html>
 """
 
-
 @app.route("/")
-def index():
+def home():
     return render_template_string(htmlTemplate)
 
 if __name__ == "__main__":