ID-183: metrics refresh

client/templates/main.html

@@ -308,7 +308,7 @@ <h3></h3>
       </div>
     </div>
 
-    <div class="metrics" id="metrics">Coming soon!</div>
+    <div class="metrics" id="metrics" style="display: flex; justify-content: center">No metrics yet</div>
 
     <!--Работа с Drawflow-->
     <script>
@@ -1271,6 +1271,95 @@ <h3></h3>
     </script>
     <!--Метрики-->
 
+    <!--Метрики-->
+    <script>
+      // async function getMetricsFromServer() {
+      //   let metricsPage = document.querySelector("#metrics")
+      //   const response = await fetch(`http://${py_server_address}/get_plots/${user_id}/${model_id}/1`, {
+      //     method: "PUT",
+      //     headers: {
+      //       "Content-Type": "application/json",
+      //     },
+      //     body: JSON.stringify({
+      //       label: "train",
+      //     }),
+      //   })
+      //   if (!response.ok) {
+      //     console.error("Ошибка при получении метрик:", response.statusText)
+      //     return
+      //   }
+      //   const blob = await response.blob()
+      //   const imageUrl = URL.createObjectURL(blob)
+      //   metricsPage.innerHTML = ""
+      //   const imageElement = document.createElement("img")
+      //   imageElement.src = imageUrl
+      //   // Добавляем стили для центрирования изображения
+      //   imageElement.style.display = "block"
+      //   imageElement.style.margin = "auto"
+      //   metricsPage.appendChild(imageElement)
+      //   URL.revokeObjectURL(imageUrl)
+      // }
+
+      async function getMetricsFromServer() {
+        let metricsPage = document.querySelector("#metrics")
+
+        const container = document.createElement("div")
+        container.style.display = "flex"
+        container.style.justifyContent = "center"
+
+        const response1 = await fetch(`http://${py_server_address}/get_plots/${user_id}/${model_id}/1`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            label: "train",
+          }),
+        })
+
+        const response2 = await fetch(`http://${py_server_address}/get_plots/${user_id}/${model_id}/0`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            label: "train",
+          }),
+        })
+
+        if (!response1.ok || !response2.ok) {
+          console.error("Ошибка при получении метрик")
+          return
+        }
+
+        const blob1 = await response1.blob()
+        const imageUrl1 = URL.createObjectURL(blob1)
+
+        const blob2 = await response2.blob()
+        const imageUrl2 = URL.createObjectURL(blob2)
+
+        const imageElement1 = document.createElement("img")
+        imageElement1.src = imageUrl1
+
+        const imageElement2 = document.createElement("img")
+        imageElement2.src = imageUrl2
+
+        imageElement1.style.margin = "auto"
+        imageElement2.style.margin = "auto"
+
+        container.appendChild(imageElement1)
+        container.appendChild(imageElement2)
+
+        metricsPage.innerHTML = ""
+
+        metricsPage.appendChild(container)
+        URL.revokeObjectURL(imageUrl1)
+        URL.revokeObjectURL(imageUrl2)
+      }
+      setInterval(getMetricsFromServer, 10000)
+    </script>
+    <!--Метрики-->
+
     <!--Заглушки-->
     <script>
       function getLayerInfoFromDB(id) {

py_server/mlcraft/server.py

@@ -270,7 +270,6 @@ def get_plots(user_id: int, model_id: int, get_loss: bool):
         "Loss" if get_loss else "Metric",
     )
     current_dir = os.getcwd()
-    print(current_dir)
     response = send_file(os.path.join(current_dir, "images", plot_path))
     # delete_file(os.path.join(current_dir, "images", plot_path))
     return response

py_server/mlcraft/utils.py

@@ -137,7 +137,7 @@ def plot_metrics(
     plt.title(title)
     path = f"{user_id}_{model_id}_{label}_{title}.png"
     plt.savefig(os.path.join("images", path))
-    plt.cla()
+    plt.close()
     return path