Spaces:
Sleeping
Sleeping
File size: 3,098 Bytes
6bf9e00 4ba1c15 6bf9e00 366dac3 6bf9e00 366dac3 6bf9e00 52cb39a 6bf9e00 366dac3 6bf9e00 52cb39a 6bf9e00 366dac3 | 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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | {% 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 %}
|