From 62aad057cbf962a0bf56629fe70f046b7d79f3a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B1=BC=E9=AA=A8=E5=89=AA?= <1580622474@qq.com>
Date: Thu, 8 Aug 2024 22:46:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AE=9E=E7=8E=B0=E4=BA=86?=
 =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=99=A8=E6=95=B0=E6=8D=AE=E7=9A=84=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.py     |  2 +-
 index.html | 74 ++++++++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 68 insertions(+), 8 deletions(-)
diff --git a/app.py b/app.py
index d4852ee..3dc9ae4 100644
--- a/app.py
+++ b/app.py
@@ -25,7 +25,7 @@ data_dict = dict()
 def hello():
     return 'hi. —— CheckGPUsWeb'
 
-@app.route('/data', methods=['GET'])
+@app.route('/all_data', methods=['GET'])
 def get_data():
     return jsonify(get_all_data())
 
diff --git a/index.html b/index.html
index 7e20b05..e63498d 100644
--- a/index.html
+++ b/index.html
@@ -3,26 +3,86 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Fetch JSON from Flask</title>
+    <title>Server and GPU Information</title>
+    <style>
+        .card {
+            margin: 10px;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            width: 300px;
+            display: inline-block;
+            vertical-align: top;
+        }
+        .server-name {
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+        .gpu-info {
+            margin-top: 10px;
+        }
+    </style>
 </head>
 <body>
-    <h1>Fetch JSON from Flask Example</h1>
-    <button onclick="fetchData()">Fetch Data</button>
-    <div id="output"></div>
+    <h1>Server and GPU Information</h1>
+    <div id="server-data"></div>
 
     <script>
         function fetchData() {
-            fetch('http://127.0.0.1:15002/data')  // 发起 GET 请求到 Flask 服务器的 '/get_data' 路径
+            fetch('http://127.0.0.1:15002/all_data')
+                // 获取服务器和显卡数据
                 .then(response => response.json())  // 解析 JSON 响应
                 .then(data => {
                     // 处理 JSON 数据
-                    console.log(data);
-                    document.getElementById('output').innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
+                    // console.log(data);
+                    displayServerData(data); // 调用显示数据的函数
                 })
                 .catch(error => {
                     console.error('Error fetching data:', error);
                 });
         }
+
+        function displayServerData(serverData) {
+            // 绘制 -------------------
+            let serverDataContainer = document.getElementById('server-data');
+            serverDataContainer.innerHTML = ''; // 清空容器
+
+            for (let key in serverData){
+                let serverCard = document.createElement('div');
+                serverCard.classList.add('card');
+
+                let serverName = document.createElement('div');
+                serverName.classList.add('server-name');
+                let updateFlag = serverData[key].updated ? '' : ' -X-';
+                serverName.textContent = key + updateFlag;
+                serverCard.appendChild(serverName);
+
+                if ('info_list' in serverData[key]){
+                    serverData[key].info_list.forEach(function(gpu){
+                        let gpuInfo = document.createElement('div');
+                        gpuInfo.classList.add('gpu-info');
+                        gpuInfo.innerHTML = '<strong>' + gpu.idx + ' - ' + gpu.gpu_name + '</strong><br>'
+                                            + 'Temperature: ' + gpu.temperature + '°C<br>'
+                                            + 'Memory: ' + gpu.used_mem + ' / ' + gpu.total_mem + " MB" + '<br>'
+                                            + 'Utilization: ' + gpu.util_gpu + '%';
+                        serverCard.appendChild(gpuInfo);
+                    });
+                }else{
+                    let errInfo = document.createElement('div');
+                    errInfo.classList.add('error-info');
+                    errInfo.innerHTML = '<strong>error info</strong><br>' + serverData[key].err_info;
+                    serverCard.appendChild(errInfo);
+                }
+
+                serverDataContainer.appendChild(serverCard);
+            }
+        }
+
+        // 页面加载时获取数据并定时刷新
+        document.addEventListener('DOMContentLoaded', function() {
+            fetchData();
+            setInterval(fetchData, 2000); // 每5秒刷新一次数据
+        });
     </script>
 </body>
 </html>
