[Feature] PEPPER in enviPath (#332)

Co-authored-by: Tim Lorsbach <tim@lorsba.ch>
Reviewed-on: enviPath/enviPy#332

templates/objects/model/property_model.html

@@ -0,0 +1,168 @@
+{% extends "objects/model/_model_base.html" %}
+{% load static %}
+{% load envipytags %}
+
+{% block libraries %}
+{% endblock %}
+
+{% block usemodel %}
+
+  {% if model.ready_for_prediction %}
+    <!-- Predict Panel -->
+    <div class="collapse-arrow bg-base-200 collapse">
+      <input type="checkbox" checked />
+      <div class="collapse-title text-xl font-medium" id="predictTitle">
+        Predict
+      </div>
+      <div class="collapse-content">
+        <div class="form-control">
+          <div class="join w-full">
+            <input
+              id="smiles-to-predict"
+              type="text"
+              class="input input-bordered join-item grow"
+              placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C"
+            />
+            <button
+              class="btn btn-primary join-item"
+              type="button"
+              id="predict-button"
+            >
+              Predict!
+            </button>
+          </div>
+        </div>
+        <div id="predictLoading" class="mt-2 flex hidden justify-center">
+          <div class="h-8 w-8">
+            {% include "components/loading-spinner.html" %}
+          </div>
+        </div>
+        <div id="predictResultTable" class="mt-4"></div>
+      </div>
+    </div>
+  {% endif %}
+
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      // Show actions button if there are actions
+      const actionsButton = document.getElementById("actionsButton");
+      const actionsList = actionsButton?.querySelector("ul");
+      if (actionsList && actionsList.children.length > 0) {
+        actionsButton?.classList.remove("hidden");
+      }
+      // Predict button handler
+      const predictButton = document.getElementById("predict-button");
+      if (predictButton) {
+        predictButton.addEventListener("click", function (e) {
+          e.preventDefault();
+          clear("predictResultTable");
+          const smilesInput = document.getElementById("smiles-to-predict");
+          const smiles = smilesInput ? smilesInput.value.trim() : "";
+
+          if (smiles === "") {
+            const resultTable = document.getElementById("predictResultTable");
+            if (resultTable) {
+              resultTable.classList.add("alert", "alert-error");
+              resultTable.innerHTML =
+                "Please enter a SMILES string to predict!";
+            }
+            return;
+          }
+          const loadingEl = document.getElementById("predictLoading");
+          if (loadingEl) loadingEl.classList.remove("hidden");
+          const params = new URLSearchParams({
+            smiles: smiles,
+            half_life: "ILikeCats!",
+          });
+          fetch("?" + params.toString(), {
+            method: "GET",
+            headers: {
+              "X-CSRFToken":
+                document.querySelector("[name=csrf-token]").content,
+            },
+          })
+            .then((response) => {
+              if (!response.ok) {
+                return response.json().then((err) => {
+                  throw err;
+                });
+              }
+              return response.json();
+            })
+            .then((data) => {
+              const loadingEl = document.getElementById("predictLoading");
+              if (loadingEl) {
+                loadingEl.classList.add("hidden");
+              }
+              if (data.svg === null) {
+                document.getElementById("predictResultTable").innerHTML =
+                  "<span class='alert alert-error alert-soft'>Processing failed...</span><br>";
+                return;
+              }
+              handlePredictionResponse(data);
+            })
+            .catch((error) => {
+              const loadingEl = document.getElementById("predictLoading");
+              if (loadingEl) loadingEl.classList.add("hidden");
+              const resultTable = document.getElementById("predictResultTable");
+              if (resultTable) {
+                resultTable.classList.add("alert", "alert-error");
+                resultTable.innerHTML =
+                  error.error || "Error while processing response :/";
+              }
+            });
+        });
+      }
+    });
+
+    function handlePredictionResponse(data) {
+      let stereo = data["stereo"];
+      data = data["svg"];
+      let res = "";
+      if (stereo) {
+        res +=
+          "<span class='alert alert-warning'>Removed stereochemistry for prediction</span><br>";
+      }
+      res += "<div class='flex justify-center'>" + data + "<\div>";
+      const resultTable = document.getElementById("predictResultTable");
+      if (resultTable) {
+        resultTable.innerHTML = res;
+      }
+    }
+  </script>
+{% endblock %}
+
+{% block evaluation %}
+  {% if model.model_status == 'FINISHED' %}
+    <!-- Model Statistics Panel -->
+    <div class="collapse-arrow bg-base-200 collapse">
+      <input type="checkbox" checked />
+      <div class="collapse-title text-xl font-medium">Model Statistics</div>
+      <div class="collapse-content">
+        <div class="flex justify-center">
+          <div
+            id="model-stats"
+            class="overflow-x-auto rounded-box shadow-md bg-base-100"
+          >
+            <table class="table table-fixed w-full">
+              <thead class="text-base">
+                <tr>
+                  <th class="w-1/5">Metric</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                {% for metric, value in model.eval_results.items %}
+                  <tr>
+                    <td>{{ metric|upper }}</td>
+                    <td>{{ value|floatformat:4 }}</td>
+                  </tr>
+                {% endfor %}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  {% endif %}
+{% endblock %}