templates/generative.html

{% 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 %}