forked from enviPath/enviPy
[Feature] PEPPER in enviPath (#332)
Co-authored-by: Tim Lorsbach <tim@lorsba.ch> Reviewed-on: enviPath/enviPy#332
This commit is contained in:
430
templates/objects/model/classification_model.html
Normal file
430
templates/objects/model/classification_model.html
Normal file
@ -0,0 +1,430 @@
|
||||
{% extends "objects/model/_model_base.html" %}
|
||||
{% load static %}
|
||||
{% load envipytags %}
|
||||
|
||||
{% block libraries %}
|
||||
<!-- Include required libs -->
|
||||
<script src="https://d3js.org/d3.v5.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
{% 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 %}
|
||||
|
||||
{% if model.ready_for_prediction and model.app_domain %}
|
||||
<!-- App Domain -->
|
||||
<div class="collapse-arrow bg-base-200 collapse">
|
||||
<input type="checkbox" checked />
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
Applicability Domain Assessment
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<div class="form-control">
|
||||
<div class="join w-full">
|
||||
<input
|
||||
id="smiles-to-assess"
|
||||
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="assess-button"
|
||||
>
|
||||
Assess!
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="appDomainLoading" class="mt-2 flex hidden justify-center">
|
||||
<div class="h-8 w-8">
|
||||
{% include "components/loading-spinner.html" %}
|
||||
</div>
|
||||
</div>
|
||||
<div id="appDomainAssessmentResultTable" class="mt-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
function handlePredictionResponse(data) {
|
||||
let stereo = data["stereo"];
|
||||
data = data["pred"];
|
||||
let res = "";
|
||||
if (stereo) {
|
||||
res +=
|
||||
"<span class='alert alert-warning alert-soft'>Removed stereochemistry for prediction</span><br>";
|
||||
}
|
||||
res += "<table class='table table-zebra'>";
|
||||
res += "<thead>";
|
||||
res += "<th scope='col'>#</th>";
|
||||
|
||||
const columns = ["products", "image", "probability", "btrule"];
|
||||
|
||||
for (const col of columns) {
|
||||
res += "<th scope='col'>" + col + "</th>";
|
||||
}
|
||||
res += "</thead>";
|
||||
res += "<tbody>";
|
||||
let cnt = 1;
|
||||
for (const transformation in data) {
|
||||
res += "<tr>";
|
||||
res += "<th scope='row'>" + cnt + "</th>";
|
||||
res +=
|
||||
"<th scope='row'>" +
|
||||
data[transformation]["products"][0].join(", ") +
|
||||
"</th>";
|
||||
res +=
|
||||
"<th scope='row'>" +
|
||||
"<img width='400' src='{% url 'depict' %}?smiles=" +
|
||||
encodeURIComponent(data[transformation]["products"][0].join(".")) +
|
||||
"'></th>";
|
||||
res +=
|
||||
"<th scope='row'>" +
|
||||
data[transformation]["probability"].toFixed(3) +
|
||||
"</th>";
|
||||
if (data[transformation]["btrule"] != null) {
|
||||
res +=
|
||||
"<th scope='row'>" +
|
||||
"<a href='" +
|
||||
data[transformation]["btrule"]["url"] +
|
||||
"' class='link link-primary'>" +
|
||||
data[transformation]["btrule"]["name"] +
|
||||
"</a>" +
|
||||
"</th>";
|
||||
} else {
|
||||
res += "<th scope='row'>N/A</th>";
|
||||
}
|
||||
res += "</tr>";
|
||||
cnt += 1;
|
||||
}
|
||||
|
||||
res += "</tbody>";
|
||||
res += "</table>";
|
||||
const resultTable = document.getElementById("predictResultTable");
|
||||
if (resultTable) {
|
||||
resultTable.innerHTML = res;
|
||||
}
|
||||
}
|
||||
|
||||
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,
|
||||
classify: "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");
|
||||
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 :/";
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Assess button handler
|
||||
const assessButton = document.getElementById("assess-button");
|
||||
if (assessButton) {
|
||||
assessButton.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
clear("appDomainAssessmentResultTable");
|
||||
|
||||
const smilesInput = document.getElementById("smiles-to-assess");
|
||||
const smiles = smilesInput ? smilesInput.value.trim() : "";
|
||||
|
||||
if (smiles === "") {
|
||||
const resultTable = document.getElementById(
|
||||
"appDomainAssessmentResultTable",
|
||||
);
|
||||
if (resultTable) {
|
||||
resultTable.classList.add("alert", "alert-error");
|
||||
resultTable.innerHTML =
|
||||
"Please enter a SMILES string to predict!";
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const loadingEl = document.getElementById("appDomainLoading");
|
||||
if (loadingEl) loadingEl.classList.remove("hidden");
|
||||
|
||||
const params = new URLSearchParams({
|
||||
smiles: smiles,
|
||||
"app-domain-assessment": "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("appDomainLoading");
|
||||
if (loadingEl) loadingEl.classList.add("hidden");
|
||||
if (typeof handleAssessmentResponse === "function") {
|
||||
handleAssessmentResponse("{% url 'depict' %}", data);
|
||||
}
|
||||
console.log(data);
|
||||
})
|
||||
.catch((error) => {
|
||||
const loadingEl = document.getElementById("appDomainLoading");
|
||||
if (loadingEl) loadingEl.classList.add("hidden");
|
||||
const resultTable = document.getElementById(
|
||||
"appDomainAssessmentResultTable",
|
||||
);
|
||||
if (resultTable) {
|
||||
resultTable.classList.add("alert", "alert-error");
|
||||
resultTable.innerHTML =
|
||||
error.error || "Error while processing response :/";
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% block evaluation %}
|
||||
{# prettier-ignore-start #}
|
||||
{% if model.model_status == 'FINISHED' %}
|
||||
<!-- Single Gen Curve Panel -->
|
||||
<div class="collapse-arrow bg-base-200 collapse">
|
||||
<input type="checkbox" checked/>
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
Precision Recall Curve
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<div class="flex justify-center">
|
||||
<div id="sg-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if model.multigen_eval %}
|
||||
<div class="collapse-arrow bg-base-200 collapse">
|
||||
<input type="checkbox" checked/>
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
Multi Gen Precision Recall Curve
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<div class="flex justify-center">
|
||||
<div id="mg-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<script>
|
||||
function makeChart(selector, data) {
|
||||
const x = ['Recall'];
|
||||
const y = ['Precision'];
|
||||
const thres = ['threshold'];
|
||||
|
||||
function compare(a, b) {
|
||||
if (a.threshold < b.threshold)
|
||||
return -1;
|
||||
else if (a.threshold > b.threshold)
|
||||
return 1;
|
||||
else
|
||||
return 0;
|
||||
}
|
||||
|
||||
function getIndexForValue(data, val, val_name) {
|
||||
for (const idx in data) {
|
||||
if (data[idx][val_name] == val) {
|
||||
return idx;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
if (!data || data.length === 0) {
|
||||
console.warn('PR curve data is empty');
|
||||
return;
|
||||
}
|
||||
const dataLength = data.length;
|
||||
data.sort(compare);
|
||||
|
||||
for (const idx in data) {
|
||||
const d = data[idx];
|
||||
x.push(d.recall);
|
||||
y.push(d.precision);
|
||||
thres.push(d.threshold);
|
||||
}
|
||||
const chart = c3.generate({
|
||||
bindto: selector,
|
||||
data: {
|
||||
onclick: function (d, e) {
|
||||
const idx = d.index;
|
||||
const thresh = data[dataLength - idx - 1].threshold;
|
||||
},
|
||||
x: 'Recall',
|
||||
y: 'Precision',
|
||||
columns: [
|
||||
x,
|
||||
y,
|
||||
]
|
||||
},
|
||||
size: {
|
||||
height: 400,
|
||||
width: 480
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
max: 1,
|
||||
min: 0,
|
||||
label: 'Recall',
|
||||
padding: 0,
|
||||
tick: {
|
||||
fit: true,
|
||||
values: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
|
||||
}
|
||||
},
|
||||
y: {
|
||||
max: 1,
|
||||
min: 0,
|
||||
label: 'Precision',
|
||||
padding: 0,
|
||||
tick: {
|
||||
fit: true,
|
||||
values: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
|
||||
}
|
||||
}
|
||||
},
|
||||
point: {
|
||||
r: 4
|
||||
},
|
||||
tooltip: {
|
||||
format: {
|
||||
title: function (recall) {
|
||||
const idx = getIndexForValue(data, recall, "recall");
|
||||
if (idx != -1) {
|
||||
return "Threshold: " + data[idx].threshold;
|
||||
}
|
||||
return "";
|
||||
},
|
||||
value: function (precision, ratio, id) {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
},
|
||||
zoom: {
|
||||
enabled: true
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
{% if model.model_status == 'FINISHED' %}
|
||||
// Precision Recall Curve
|
||||
makeChart('#sg-chart', {{ model.pr_curve|safe }});
|
||||
{% if model.multigen_eval %}
|
||||
// Multi Gen Precision Recall Curve
|
||||
makeChart('#mg-chart', {{ model.mg_pr_curve|safe }});
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
});
|
||||
</script>
|
||||
{# prettier-ignore-end #}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user