templates/predict.html

{% extends "base.html" %}

{% block title %}Predict | Traffic Sign Classifier{% endblock %}

{% block content %}
<section class="page-grid">
  <div class="tool-panel">
    <div class="tool-header">
      <div>
        <p class="eyebrow">Classifier</p>
        <h1>Upload a traffic sign image</h1>
      </div>
      <a class="button secondary dashboard-link" href="{{ url_for('dashboard') }}">Open dashboard</a>
    </div>
    <p class="panel-copy">The prediction is saved automatically to your personal history.</p>

    {% if model_error %}
      <div class="model-warning">{{ model_error }}</div>
    {% endif %}

    <form class="upload-form" method="post" enctype="multipart/form-data">
      <label class="upload-box">
        <span>Choose image from your device</span>
        <input id="imageInput" type="file" name="image" accept="image/png,image/jpeg,image/webp">
      </label>

      <div class="upload-divider"><span>or</span></div>

      <label class="link-field">
        <span>Paste image link</span>
        <input id="imageUrlInput" type="url" name="image_url" placeholder="https://example.com/traffic-sign.jpg">
      </label>

      <div class="preview-card" id="previewCard" hidden>
        <span>Preview before classification</span>
        <img id="imagePreview" alt="Selected traffic sign preview">
      </div>

      <button class="button primary" type="submit">Classify sign</button>
    </form>
  </div>

  <aside class="result-panel">
    <h2>Latest result</h2>
    {% if prediction %}
      <img class="result-image" src="{{ url_for('static', filename=prediction.image_path) }}" alt="Uploaded traffic sign">
      <div class="prediction-result">
        <span>Predicted class</span>
        <strong>{{ prediction.predicted_class }}</strong>
        <small>Confidence: {{ format_confidence(prediction.confidence) }}</small>
      </div>
      <form class="feedback-row" method="post" action="{{ url_for('feedback', prediction_id=prediction.id) }}">
        <input type="hidden" name="next" value="{{ url_for('predict') }}">
        <button name="is_correct" value="1" class="feedback true" type="submit">True</button>
        <button name="is_correct" value="0" class="feedback false" type="submit">False</button>
      </form>
    {% else %}
      <p class="empty">Your next prediction will appear here.</p>
    {% endif %}
  </aside>
</section>

<section class="history-strip">
  <div class="section-heading">
    <div>
      <p class="eyebrow">Historique</p>
      <h2>Recent history</h2>
    </div>
  </div>
  <div class="history-grid">
    {% for row in history %}
      <article class="history-card">
        <img src="{{ url_for('static', filename=row.image_path) }}" alt="Traffic sign prediction">
        <strong>{{ row.predicted_class }}</strong>
        <small>{{ format_confidence(row.confidence) }} confidence</small>
      </article>
    {% else %}
      <p class="empty">No predictions yet.</p>
    {% endfor %}
  </div>
</section>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
{% endblock %}