feat: add web to show scores

app.py

@@ -69,9 +69,9 @@ def upload_score():
             and "running_time" in data
             and "time" in data
         ):
-            if data["name"]=="test_name":
+            if data["name"] == "test_name":
                 return jsonify({"message": "请完善姓名，默认名字不记录成绩！"}), 400
-            elif data["id"]=="202210423xxx":
+            elif data["id"] == "202210423xxx":
                 return jsonify({"message": "请完善学号，默认学号不记录成绩！"}), 400
             data["details"] = data["details"].replace("\n", "<br>")
             write_to_csv(data)
@@ -87,8 +87,9 @@ def get_scores():
     try:
         with open(csv_file_path, mode="r", encoding="utf-8") as csvfile:
             reader = csv.DictReader(csvfile)
-            scores = list(reader)
-        return jsonify(scores)
+            scores = jsonify(list(reader))
+        scores.headers.add("Access-Control-Allow-Origin", "*")
+        return scores
     except Exception as e:
         return jsonify({"error": str(e)}), 500
 

exp/knn/main.py

@@ -140,8 +140,8 @@ def main(name, id):
 
     # 输出结果
     print("")
-    log_details.append(f"得分: {accuracy * 100:.2f}%")
-    print(f"得分: {accuracy * 100:.2f}%")
+    log_details.append(f"得分: {accuracy * 100:.2f}")
+    print(f"得分: {accuracy * 100:.2f}")
     log_details.append(f"运行时间: {running_time * 1000:.10f}ms")
     print(f"运行时间: {running_time * 1000:.10f}ms")
 
@@ -149,7 +149,7 @@ def main(name, id):
     score_data = {
         "score": accuracy,
         "running_time": f"{running_time * 1000:.10f}ms",
-        "details": "\n".join(log_details),
+        "details": "<br>".join(log_details),
     }
 
     upload_score(name, id, score_data)

index.html

@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>挑战赛数据展示</title>
+    <style>
+      table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+      table,
+      th,
+      td {
+        border: 1px solid black;
+      }
+      th,
+      td {
+        padding: 8px;
+        text-align: left;
+      }
+      th {
+        background-color: #f2f2f2;
+      }
+    </style>
+  </head>
+  <body>
+    <h2>测试结果</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>时间</th>
+          <th>学号</th>
+          <th>名称</th>
+          <th>得分</th>
+          <th>运行时间</th>
+          <th>详细信息</th>
+        </tr>
+      </thead>
+      <tbody id="data-table-body">
+        <!-- 动态填充表格数据 -->
+      </tbody> </table
+    ><!-- 模态窗口 -->
+    <div id="detailsModal" class="modal">
+      <div class="modal-content">
+        <span class="close">&times;</span>
+        <h2>详细信息</h2>
+        <div id="modal-details"></div>
+      </div>
+    </div>
+    <style>
+      .modal {
+        display: none;
+        position: fixed;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgba(0, 0, 0, 0.4);
+      }
+      .modal-content {
+        background-color: white;
+        margin: 15% auto;
+        padding: 20px;
+        border: 1px solid #888;
+        width: 80%;
+      }
+      .close {
+        color: #aaa;
+        float: right;
+        font-size: 28px;
+        font-weight: bold;
+      }
+      .close:hover,
+      .close:focus {
+        color: black;
+        text-decoration: none;
+        cursor: pointer;
+      }
+    </style>
+    <script>
+      async function fetchData() {
+        try {
+          const response = await fetch("/get_scores");
+          const data = await response.json();
+
+          const tableBody = document.getElementById("data-table-body");
+          tableBody.innerHTML = "";
+
+          data.forEach((item, index) => {
+            const row = document.createElement("tr");
+
+            row.innerHTML = `
+                    <td>${item.time}</td>
+                    <td>${item.id}</td>
+                    <td>${item.name}</td>
+                    <td>${item.score}</td>
+                    <td>${item.running_time}</td>
+                    <td>
+                        <button onclick="showDetailsModal(${index})">查看详情</button>
+                    </td>
+                `;
+
+            tableBody.appendChild(row);
+          });
+
+          const modal = document.getElementById("detailsModal");
+          const span = document.getElementsByClassName("close")[0];
+          span.onclick = function () {
+            modal.style.display = "none";
+          };
+
+          window.onclick = function (event) {
+            if (event.target === modal) {
+              modal.style.display = "none";
+            }
+          };
+        } catch (error) {
+          console.error("获取数据时发生错误:", error);
+        }
+      }
+
+      function showDetailsModal(index) {
+        const modal = document.getElementById("detailsModal");
+        const modalDetails = document.getElementById("modal-details");
+
+        fetch("/get_scores")
+          .then((response) => response.json())
+          .then((data) => {
+            modalDetails.innerHTML = data[index].details;
+            modal.style.display = "block";
+          });
+      }
+
+      window.onload = fetchData;
+    </script>
+  </body>
+</html>