templates/predict.html

{% extends "base.html" %}
{% block title %}Predict — IrisAI{% endblock %}

{% block body %}
<div class="page">
<div class="container">

  <div class="page-header">
    <h1>Iris Flower Classifier</h1>
    <p>Enter measurements below to identify the species using Random Forest ML.</p>
  </div>

  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      <div class="flashes">
        {% for cat, msg in messages %}
          <div class="flash {{ cat }}">{{ msg }}</div>
        {% endfor %}
      </div>
    {% endif %}
  {% endwith %}

  <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start">

    <!-- Form -->
    <div class="card">
      <h2 class="serif" style="font-size:1.2rem;margin-bottom:1.25rem">🔬 Enter Measurements</h2>
      <form method="POST" action="{{ url_for('predict') }}">

        <p class="small muted" style="margin-bottom:1rem">Sepal dimensions (cm)</p>
        <div class="grid-2">
          <div class="form-group">
            <label for="sepal_length">Sepal Length</label>
            <input type="number" id="sepal_length" name="sepal_length" step="0.1" min="0.1" max="20"
                   placeholder="e.g. 5.1" value="{{ form_data.get('sepal_length', '') }}" required />
            <div class="input-hint">Typical: 4.3 – 7.9</div>
          </div>
          <div class="form-group">
            <label for="sepal_width">Sepal Width</label>
            <input type="number" id="sepal_width" name="sepal_width" step="0.1" min="0.1" max="20"
                   placeholder="e.g. 3.5" value="{{ form_data.get('sepal_width', '') }}" required />
            <div class="input-hint">Typical: 2.0 – 4.4</div>
          </div>
        </div>

        <p class="small muted" style="margin-bottom:1rem;margin-top:.5rem">Petal dimensions (cm)</p>
        <div class="grid-2">
          <div class="form-group">
            <label for="petal_length">Petal Length</label>
            <input type="number" id="petal_length" name="petal_length" step="0.1" min="0.1" max="20"
                   placeholder="e.g. 1.4" value="{{ form_data.get('petal_length', '') }}" required />
            <div class="input-hint">Typical: 1.0 – 6.9</div>
          </div>
          <div class="form-group">
            <label for="petal_width">Petal Width</label>
            <input type="number" id="petal_width" name="petal_width" step="0.1" min="0.1" max="20"
                   placeholder="e.g. 0.2" value="{{ form_data.get('petal_width', '') }}" required />
            <div class="input-hint">Typical: 0.1 – 2.5</div>
          </div>
        </div>

        <button type="submit" class="btn btn-primary btn-full" style="margin-top:.5rem">
          Classify Flower →
        </button>
      </form>

      <hr class="divider" />

      <!-- Quick examples -->
      <p class="small muted" style="margin-bottom:.6rem">Try an example:</p>
      <div style="display:flex;gap:.5rem;flex-wrap:wrap">
        <button class="btn btn-outline" style="font-size:.8rem;padding:.35rem .9rem"
          onclick="fillExample(5.1,3.5,1.4,0.2)">🌸 Setosa</button>
        <button class="btn btn-outline" style="font-size:.8rem;padding:.35rem .9rem"
          onclick="fillExample(6.0,2.9,4.5,1.5)">💜 Versicolor</button>
        <button class="btn btn-outline" style="font-size:.8rem;padding:.35rem .9rem"
          onclick="fillExample(6.5,3.0,5.5,1.8)">🌺 Virginica</button>
      </div>
    </div>

    <!-- Right column -->
    <div>
      <!-- Result -->
      {% if result %}
      <div class="result-card" style="background:var(--surface);margin-bottom:1.5rem"
           {% if result.info.color %}style="border-color:{{ result.info.color }}33;background:var(--surface)"{% endif %}>
        <p class="small muted" style="margin-bottom:.25rem">Prediction</p>
        <div class="result-name">
          {{ result.info.emoji }} Iris {{ result.name | capitalize }}
        </div>
        <p class="small muted">{{ result.info.description }}</p>

        <div style="margin-top:1.25rem">
          <div style="display:flex;justify-content:space-between;font-size:.8rem">
            <span class="muted">Confidence</span>
            <span class="mono">{{ result.confidence }}%</span>
          </div>
          <div class="confidence-bar-wrap">
            <div class="confidence-bar" style="width:{{ result.confidence }}%"></div>
          </div>
        </div>

        <div class="prob-grid">
          {% for cls, prob in result.all_probs.items() %}
          <span class="prob-pill {% if cls == result.name %}active{% endif %}">
            {{ cls }}: {{ prob }}%
          </span>
          {% endfor %}
        </div>
      </div>
      {% else %}
      <div class="card" style="text-align:center;padding:3rem 2rem;color:var(--muted)">
        <div style="font-size:3rem;margin-bottom:.75rem">🌿</div>
        <p class="serif" style="font-size:1.1rem;color:var(--text)">No prediction yet</p>
        <p class="small" style="margin-top:.4rem">Fill in the measurements and click classify.</p>
      </div>
      {% endif %}

      <!-- Dataset info -->
      <div class="card" style="padding:1.25rem">
        <p class="small" style="font-weight:600;margin-bottom:.5rem">About the Model</p>
        <p class="small muted">Random Forest Classifier · 100 estimators</p>
        <p class="small muted">Dataset: UCI Iris (150 samples) · <strong style="color:var(--green)">90% accuracy</strong></p>
        <p class="small muted" style="margin-top:.5rem">
          Source: <a href="https://archive.ics.uci.edu/dataset/53/iris" target="_blank"
                     style="color:var(--accent)">archive.ics.uci.edu</a>
        </p>
      </div>
    </div>
  </div>

  <!-- History -->
  {% if history %}
  <div class="card" style="margin-top:1.5rem">
    <h3 class="serif" style="font-size:1.1rem;margin-bottom:1rem">📋 Your Recent Predictions</h3>
    <div style="overflow-x:auto">
      <table>
        <thead>
          <tr>
            <th>Species</th>
            <th>Sepal L</th><th>Sepal W</th><th>Petal L</th><th>Petal W</th>
            <th>Confidence</th>
            <th>When</th>
          </tr>
        </thead>
        <tbody>
          {% for row in history %}
          <tr>
            <td><span class="badge badge-{{ row.prediction }}">{{ row.prediction | capitalize }}</span></td>
            <td class="mono">{{ row.sepal_length }}</td>
            <td class="mono">{{ row.sepal_width }}</td>
            <td class="mono">{{ row.petal_length }}</td>
            <td class="mono">{{ row.petal_width }}</td>
            <td class="mono">{{ "%.1f"|format(row.confidence) }}%</td>
            <td class="muted">{{ row.timestamp[:16] }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

</div>
</div>

<script>
function fillExample(sl, sw, pl, pw) {
  document.getElementById('sepal_length').value = sl;
  document.getElementById('sepal_width').value  = sw;
  document.getElementById('petal_length').value = pl;
  document.getElementById('petal_width').value  = pw;
}
</script>
{% endblock %}