From 2a433da77ff2c1aca0632659082d606093519cfa Mon Sep 17 00:00:00 2001
From: heartmarshall <heartmarshall@yandex.ru>
Date: Mon, 25 Dec 2023 15:49:09 +0300
Subject: [PATCH 1/6] task done

---
 client/templates/main.html | 35 ++++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/client/templates/main.html b/client/templates/main.html
index fa97f20..11ae549 100644
--- a/client/templates/main.html
+++ b/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">No metrics yet</div>
 
     <!--Работа с Drawflow-->
     <script>
@@ -1271,6 +1271,39 @@ <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)
+      }
+
+      setInterval(getMetricsFromServer, 10000)
+    </script>
+    <!--Метрики-->
+
     <!--Заглушки-->
     <script>
       function getLayerInfoFromDB(id) {

From 61c0aa8c82b65ebc52fd548c335228d14219516e Mon Sep 17 00:00:00 2001
From: heartmarshall <heartmarshall@yandex.ru>
Date: Mon, 25 Dec 2023 16:17:37 +0300
Subject: [PATCH 2/6] add two pics :)

---
 client/templates/main.html  | 91 +++++++++++++++++++++++++++++--------
 py_server/mlcraft/server.py |  1 -
 2 files changed, 73 insertions(+), 19 deletions(-)

diff --git a/client/templates/main.html b/client/templates/main.html
index 11ae549..9ce76ef 100644
--- a/client/templates/main.html
+++ b/client/templates/main.html
@@ -1273,9 +1273,38 @@ <h3></h3>
 
     <!--Метрики-->
     <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 response = await fetch(`http://${py_server_address}/get_plots/${user_id}/${model_id}/1`, {
+        let metricsPage = document.querySelector("#metrics");
+
+        const response1 = await fetch(`http://${py_server_address}/get_plots/${user_id}/${model_id}/1`, {
           method: "PUT",
           headers: {
             "Content-Type": "application/json",
@@ -1283,24 +1312,50 @@ <h3></h3>
           body: JSON.stringify({
             label: "train",
           }),
-        })
-        if (!response.ok) {
-          console.error("Ошибка при получении метрик:", response.statusText)
-          return
+        });
+
+        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 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)
-      }
 
-      setInterval(getMetricsFromServer, 10000)
+        const blob1 = await response1.blob();
+        const imageUrl1 = URL.createObjectURL(blob1);
+
+        const blob2 = await response2.blob();
+        const imageUrl2 = URL.createObjectURL(blob2);
+
+        metricsPage.innerHTML = "";
+
+        const imageElement1 = document.createElement("img");
+        imageElement1.src = imageUrl1;
+
+        const imageElement2 = document.createElement("img");
+        imageElement2.src = imageUrl2;
+
+        imageElement1.style.display = "block";
+        imageElement1.style.margin = "auto";
+
+        imageElement2.style.display = "block";
+        imageElement2.style.margin = "auto";
+
+        metricsPage.appendChild(imageElement1);
+        metricsPage.appendChild(imageElement2);
+
+        URL.revokeObjectURL(imageUrl1);
+        URL.revokeObjectURL(imageUrl2);
+      }
+      setInterval(getMetricsFromServer, 10000);
     </script>
     <!--Метрики-->
 
diff --git a/py_server/mlcraft/server.py b/py_server/mlcraft/server.py
index 3441c36..b353cde 100644
--- a/py_server/mlcraft/server.py
+++ b/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

From 1d2595dca0c3deb26a98d1c2b3cd82c18274ceb6 Mon Sep 17 00:00:00 2001
From: heartmarshall <heartmarshall@yandex.ru>
Date: Mon, 25 Dec 2023 16:35:26 +0300
Subject: [PATCH 3/6] job done

---
 client/templates/main.html | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/client/templates/main.html b/client/templates/main.html
index 9ce76ef..1f3793f 100644
--- a/client/templates/main.html
+++ b/client/templates/main.html
@@ -308,7 +308,7 @@ <h3></h3>
       </div>
     </div>
 
-    <div class="metrics" id="metrics">No metrics yet</div>
+    <div class="metrics" id="metrics" style="display: flex; justify-content: center">No metrics yet</div>
 
     <!--Работа с Drawflow-->
     <script>
@@ -1304,6 +1304,10 @@ <h3></h3>
       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: {
@@ -1335,23 +1339,21 @@ <h3></h3>
         const blob2 = await response2.blob();
         const imageUrl2 = URL.createObjectURL(blob2);
 
-        metricsPage.innerHTML = "";
-
         const imageElement1 = document.createElement("img");
         imageElement1.src = imageUrl1;
 
         const imageElement2 = document.createElement("img");
         imageElement2.src = imageUrl2;
 
-        imageElement1.style.display = "block";
         imageElement1.style.margin = "auto";
-
-        imageElement2.style.display = "block";
         imageElement2.style.margin = "auto";
 
-        metricsPage.appendChild(imageElement1);
-        metricsPage.appendChild(imageElement2);
+        container.appendChild(imageElement1);
+        container.appendChild(imageElement2);
+
+        metricsPage.innerHTML = "";
 
+        metricsPage.appendChild(container);
         URL.revokeObjectURL(imageUrl1);
         URL.revokeObjectURL(imageUrl2);
       }

From d335f4b98cc6e9f04551cd0336c5d52c37acf50e Mon Sep 17 00:00:00 2001
From: heartmarshall <heartmarshall@yandex.ru>
Date: Mon, 25 Dec 2023 17:06:25 +0300
Subject: [PATCH 4/6] final

---
 py_server/mlcraft/server.py | 1 +
 py_server/mlcraft/utils.py  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/py_server/mlcraft/server.py b/py_server/mlcraft/server.py
index b353cde..0cac851 100644
--- a/py_server/mlcraft/server.py
+++ b/py_server/mlcraft/server.py
@@ -269,6 +269,7 @@ def get_plots(user_id: int, model_id: int, get_loss: bool):
         label,
         "Loss" if get_loss else "Metric",
     )
+    print(plot_path)
     current_dir = os.getcwd()
     response = send_file(os.path.join(current_dir, "images", plot_path))
     # delete_file(os.path.join(current_dir, "images", plot_path))
diff --git a/py_server/mlcraft/utils.py b/py_server/mlcraft/utils.py
index 3cdf9c4..9334916 100644
--- a/py_server/mlcraft/utils.py
+++ b/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
 
 

From 343b62713caed2caa140c97b40db445f154e607d Mon Sep 17 00:00:00 2001
From: heartmarshall <heartmarshall@yandex.ru>
Date: Mon, 25 Dec 2023 17:14:41 +0300
Subject: [PATCH 5/6] cleanup

---
 py_server/mlcraft/server.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/py_server/mlcraft/server.py b/py_server/mlcraft/server.py
index 0cac851..b353cde 100644
--- a/py_server/mlcraft/server.py
+++ b/py_server/mlcraft/server.py
@@ -269,7 +269,6 @@ def get_plots(user_id: int, model_id: int, get_loss: bool):
         label,
         "Loss" if get_loss else "Metric",
     )
-    print(plot_path)
     current_dir = os.getcwd()
     response = send_file(os.path.join(current_dir, "images", plot_path))
     # delete_file(os.path.join(current_dir, "images", plot_path))

From ce83d04addab46e71dd8ca3d1ca954c421c90a80 Mon Sep 17 00:00:00 2001
From: heartmarshall <heartmarshall@yandex.ru>
Date: Mon, 25 Dec 2023 17:16:44 +0300
Subject: [PATCH 6/6] format

---
 client/templates/main.html | 51 +++++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/client/templates/main.html b/client/templates/main.html
index 1f3793f..aa61600 100644
--- a/client/templates/main.html
+++ b/client/templates/main.html
@@ -1300,13 +1300,12 @@ <h3></h3>
       //   URL.revokeObjectURL(imageUrl)
       // }
 
-
       async function getMetricsFromServer() {
-        let metricsPage = document.querySelector("#metrics");
+        let metricsPage = document.querySelector("#metrics")
 
-        const container = document.createElement("div");
-        container.style.display = "flex";
-        container.style.justifyContent = "center";
+        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",
@@ -1316,7 +1315,7 @@ <h3></h3>
           body: JSON.stringify({
             label: "train",
           }),
-        });
+        })
 
         const response2 = await fetch(`http://${py_server_address}/get_plots/${user_id}/${model_id}/0`, {
           method: "PUT",
@@ -1326,38 +1325,38 @@ <h3></h3>
           body: JSON.stringify({
             label: "train",
           }),
-        });
+        })
 
         if (!response1.ok || !response2.ok) {
-          console.error("Ошибка при получении метрик");
-          return;
+          console.error("Ошибка при получении метрик")
+          return
         }
 
-        const blob1 = await response1.blob();
-        const imageUrl1 = URL.createObjectURL(blob1);
+        const blob1 = await response1.blob()
+        const imageUrl1 = URL.createObjectURL(blob1)
 
-        const blob2 = await response2.blob();
-        const imageUrl2 = URL.createObjectURL(blob2);
+        const blob2 = await response2.blob()
+        const imageUrl2 = URL.createObjectURL(blob2)
 
-        const imageElement1 = document.createElement("img");
-        imageElement1.src = imageUrl1;
+        const imageElement1 = document.createElement("img")
+        imageElement1.src = imageUrl1
 
-        const imageElement2 = document.createElement("img");
-        imageElement2.src = imageUrl2;
+        const imageElement2 = document.createElement("img")
+        imageElement2.src = imageUrl2
 
-        imageElement1.style.margin = "auto";
-        imageElement2.style.margin = "auto";
+        imageElement1.style.margin = "auto"
+        imageElement2.style.margin = "auto"
 
-        container.appendChild(imageElement1);
-        container.appendChild(imageElement2);
+        container.appendChild(imageElement1)
+        container.appendChild(imageElement2)
 
-        metricsPage.innerHTML = "";
+        metricsPage.innerHTML = ""
 
-        metricsPage.appendChild(container);
-        URL.revokeObjectURL(imageUrl1);
-        URL.revokeObjectURL(imageUrl2);
+        metricsPage.appendChild(container)
+        URL.revokeObjectURL(imageUrl1)
+        URL.revokeObjectURL(imageUrl2)
       }
-      setInterval(getMetricsFromServer, 10000);
+      setInterval(getMetricsFromServer, 10000)
     </script>
     <!--Метрики-->