Spaces:
Sleeping
Sleeping
File size: 1,800 Bytes
c8b3494 b306c73 c8b3494 b306c73 c8b3494 21e2ad6 c8b3494 21e2ad6 c8b3494 21e2ad6 c8b3494 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
{% extends "base.html" %}
{% block content %}
<div class="container py-4">
<h3 class="fw-bold mb-4">Generative Molecule Design</h3>
<div class="card card-metric p-4 mb-4">
<h5 class="fw-bold mb-3">Generate a Molecule from Target DCN</h5>
<form method="POST">
<div class="mb-3">
<label class="form-label">Target DCN</label>
<input type="number" step="0.1" name="target_cn" class="form-control" placeholder="ex: 45" required>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox"
name="minimize_ysi" checked>
<label class="form-check-label">Minimise YSI</label>
</div>
<button id="generate-btn" class="btn btn-primary" type="submit">
Generate Molecules
</button>
<div id="loading" class="mt-3" style="display:none;">
<div class="spinner-border text-primary" role="status"></div>
<span class="ms-2">
Generating molecules… this may take a few minutes.
</span>
</div>
</form>
</div>
{% if pareto_table %}
<div class="card card-metric p-4 mb-4">
<h5 class="fw-bold mb-3">Pareto Front</h5>
{{ pareto_table|safe }}
</div>
{% endif %}
{% if final_table %}
<div class="card card-metric p-4 mb-4">
<h5 class="fw-bold mb-3">Final Selected Molecules</h5>
{{ final_table|safe }}
</div>
{% endif %}
{% if error %}
<div class="alert alert-danger">{{ error }}</div>
{% endif %}
</div>
<script>
const form = document.querySelector("form");
const btn = document.getElementById("generate-btn");
const loading = document.getElementById("loading");
form.addEventListener("submit", () => {
btn.disabled = true;
loading.style.display = "block";
});
</script>
{% endblock %}
|