Improve prediction upload and dashboard charts

app.py

@@ -1,7 +1,10 @@
 import os
 import sqlite3
+from collections import Counter
 from datetime import datetime
 from pathlib import Path
+from urllib.parse import urlparse
+from urllib.request import Request, urlopen
 from uuid import uuid4
 
 import numpy as np
@@ -22,6 +25,11 @@ UPLOAD_DIR = BASE_DIR / "static" / "uploads"
 DATABASE_PATH = BASE_DIR / "instance" / "traffic_signs.sqlite3"
 MODEL_PATH = BASE_DIR / "traffic_classifier.h5"
 ALLOWED_EXTENSIONS = {"png", "jpg", "jpeg", "webp"}
+URL_CONTENT_TYPES = {
+    "image/jpeg": "jpg",
+    "image/png": "png",
+    "image/webp": "webp",
+}
 
 TRAFFIC_SIGN_CLASSES = [
     "Speed limit (20km/h)",
@@ -158,6 +166,64 @@ def allowed_file(filename):
     return "." in filename and filename.rsplit(".", 1)[1].lower() in ALLOWED_EXTENSIONS
 
 
+def extension_from_url(url, content_type):
+    path = urlparse(url).path
+    if "." in path:
+        extension = path.rsplit(".", 1)[1].lower()
+        if extension in ALLOWED_EXTENSIONS:
+            return extension
+    return URL_CONTENT_TYPES.get((content_type or "").split(";")[0].lower())
+
+
+def save_remote_image(image_url):
+    parsed = urlparse(image_url)
+    if parsed.scheme not in {"http", "https"} or not parsed.netloc:
+        raise ValueError("Please provide a valid HTTP or HTTPS image link.")
+
+    request_data = Request(image_url, headers={"User-Agent": "TrafficSignClassifier/1.0"})
+    with urlopen(request_data, timeout=10) as response:
+        content_type = response.headers.get("Content-Type", "")
+        extension = extension_from_url(image_url, content_type)
+        if not extension:
+            raise ValueError("The link must point to a PNG, JPG, JPEG, or WEBP image.")
+
+        filename = f"{uuid4().hex}_remote.{extension}"
+        save_path = UPLOAD_DIR / filename
+        max_bytes = app.config["MAX_CONTENT_LENGTH"]
+        total = 0
+        with save_path.open("wb") as output:
+            while True:
+                chunk = response.read(1024 * 64)
+                if not chunk:
+                    break
+                total += len(chunk)
+                if total > max_bytes:
+                    save_path.unlink(missing_ok=True)
+                    raise ValueError("Remote image is too large. Maximum size is 8 MB.")
+                output.write(chunk)
+
+    try:
+        Image.open(save_path).verify()
+    except Exception as exc:
+        save_path.unlink(missing_ok=True)
+        raise ValueError("The remote file is not a readable image.") from exc
+
+    return save_path, f"uploads/{filename}"
+
+
+def save_uploaded_image(file):
+    original = secure_filename(file.filename)
+    filename = f"{uuid4().hex}_{original}"
+    save_path = UPLOAD_DIR / filename
+    file.save(save_path)
+    try:
+        Image.open(save_path).verify()
+    except Exception as exc:
+        save_path.unlink(missing_ok=True)
+        raise ValueError("The uploaded file is not a readable image.") from exc
+    return save_path, f"uploads/{filename}"
+
+
 def prepare_image(path):
     image = Image.open(path).convert("RGB")
     image = image.resize((30, 30))
@@ -256,39 +322,27 @@ def predict():
     prediction = None
     if request.method == "POST":
         file = request.files.get("image")
-        if not file or file.filename == "":
-            flash("Please choose a traffic sign image.", "warning")
-        elif not allowed_file(file.filename):
-            flash("Upload a PNG, JPG, JPEG, or WEBP image.", "danger")
-        else:
-            original = secure_filename(file.filename)
-            filename = f"{uuid4().hex}_{original}"
-            save_path = UPLOAD_DIR / filename
-            file.save(save_path)
-            label, confidence = predict_sign(save_path)
-            image_path = f"uploads/{filename}"
-            with get_db() as conn:
-                cursor = conn.execute(
-                    """
-                    INSERT INTO predictions
-                    (user_id, image_path, predicted_class, confidence, is_correct, created_at)
-                    VALUES (?, ?, ?, ?, NULL, ?)
-                    """,
-                    (
-                        session["user_id"],
-                        image_path,
-                        label,
-                        confidence,
-                        datetime.utcnow().isoformat(),
-                    ),
-                )
-                prediction_id = cursor.lastrowid
-            prediction = {
-                "id": prediction_id,
-                "image_path": image_path,
-                "predicted_class": label,
-                "confidence": confidence,
-            }
+        image_url = request.form.get("image_url", "").strip()
+        save_path = None
+        image_path = None
+
+        try:
+            if file and file.filename:
+                if not allowed_file(file.filename):
+                    flash("Upload a PNG, JPG, JPEG, or WEBP image.", "danger")
+                else:
+                    save_path, image_path = save_uploaded_image(file)
+            elif image_url:
+                save_path, image_path = save_remote_image(image_url)
+            else:
+                flash("Please choose a traffic sign image or paste an image link.", "warning")
+        except ValueError as exc:
+            flash(str(exc), "danger")
+        except Exception:
+            flash("The remote image could not be downloaded. Please try another link.", "danger")
+
+        if save_path and image_path:
+            prediction = create_prediction(save_path, image_path)
             if model_error:
                 flash(model_error, "warning")
 
@@ -296,6 +350,32 @@ def predict():
     return render_template("predict.html", prediction=prediction, history=history, model_error=model_error)
 
 
+def create_prediction(save_path, image_path):
+    label, confidence = predict_sign(save_path)
+    with get_db() as conn:
+        cursor = conn.execute(
+            """
+            INSERT INTO predictions
+            (user_id, image_path, predicted_class, confidence, is_correct, created_at)
+            VALUES (?, ?, ?, ?, NULL, ?)
+            """,
+            (
+                session["user_id"],
+                image_path,
+                label,
+                confidence,
+                datetime.utcnow().isoformat(),
+            ),
+        )
+        prediction_id = cursor.lastrowid
+    return {
+        "id": prediction_id,
+        "image_path": image_path,
+        "predicted_class": label,
+        "confidence": confidence,
+    }
+
+
 @app.post("/feedback/<int:prediction_id>")
 @login_required
 def feedback(prediction_id):
@@ -330,7 +410,38 @@ def dashboard():
         "incorrect": len(reviewed) - len(correct),
         "accuracy": round((len(correct) / len(reviewed)) * 100, 1) if reviewed else 0,
     }
-    return render_template("dashboard.html", history=history, stats=stats)
+    charts = build_dashboard_charts(history, stats)
+    return render_template("dashboard.html", history=history, stats=stats, charts=charts)
+
+
+def build_dashboard_charts(history, stats):
+    class_counts = Counter(row["predicted_class"] for row in history)
+    max_class_count = max(class_counts.values(), default=1)
+    class_chart = [
+        {
+            "label": label,
+            "count": count,
+            "percent": round((count / max_class_count) * 100, 1),
+        }
+        for label, count in class_counts.most_common(8)
+    ]
+
+    feedback_chart = [
+        {"label": "True predictions", "count": stats["correct"], "percent": percent_of(stats["correct"], stats["total"])},
+        {"label": "False predictions", "count": stats["incorrect"], "percent": percent_of(stats["incorrect"], stats["total"])},
+        {
+            "label": "Pending review",
+            "count": stats["total"] - stats["reviewed"],
+            "percent": percent_of(stats["total"] - stats["reviewed"], stats["total"]),
+        },
+    ]
+    return {"class_chart": class_chart, "feedback_chart": feedback_chart}
+
+
+def percent_of(value, total):
+    if not total:
+        return 0
+    return round((value / total) * 100, 1)
 
 
 def get_user_history(limit=None):

static/css/app.css

@@ -416,12 +416,14 @@ small {
 
 .cyber-field input,
 .upload-box,
+.link-field input,
 table {
   width: 100%;
 }
 
 .cyber-field input,
-.upload-box {
+.upload-box,
+.link-field input {
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 14px;
@@ -481,12 +483,62 @@ table {
   max-width: 520px;
 }
 
-.upload-box {
+.upload-box,
+.link-field {
+  display: grid;
+  gap: 10px;
+  color: var(--muted);
+}
+
+.upload-box span,
+.link-field span,
+.preview-card span {
+  font-size: 0.82rem;
+  font-weight: 800;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.upload-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.upload-divider::before,
+.upload-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.preview-card {
   display: grid;
   gap: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.04);
   color: var(--muted);
 }
 
+.preview-card[hidden] {
+  display: none;
+}
+
+.preview-card img {
+  width: 100%;
+  max-height: 260px;
+  object-fit: contain;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.24);
+}
+
 .result-image {
   width: 100%;
   max-height: 280px;
@@ -535,11 +587,16 @@ table {
 
 .section-heading {
   justify-content: space-between;
+  margin-bottom: 16px;
 }
 
-.section-heading a {
-  color: var(--green);
-  font-weight: 800;
+.section-heading h2 {
+  margin-bottom: 0;
+}
+
+.dashboard-link {
+  align-self: center;
+  white-space: nowrap;
 }
 
 .history-grid {
@@ -577,6 +634,93 @@ table {
   font-size: 2rem;
 }
 
+.charts-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
+  gap: 16px;
+  margin-top: 24px;
+}
+
+.chart-panel {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--panel);
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
+}
+
+.chart-heading,
+.bar-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.chart-heading {
+  margin-bottom: 18px;
+}
+
+.chart-heading h2 {
+  margin-bottom: 0;
+}
+
+.chart-heading span,
+.bar-meta span {
+  color: var(--muted);
+}
+
+.bar-list {
+  display: grid;
+  gap: 14px;
+}
+
+.bar-row {
+  display: grid;
+  gap: 8px;
+}
+
+.bar-meta span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bar-meta strong {
+  color: var(--text);
+}
+
+.bar-track {
+  height: 12px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.bar-fill {
+  display: block;
+  height: 100%;
+  min-width: 4px;
+  border-radius: inherit;
+}
+
+.class-fill {
+  background: linear-gradient(90deg, var(--green), var(--blue));
+}
+
+.fill-1 {
+  background: var(--green);
+}
+
+.fill-2 {
+  background: var(--pink);
+}
+
+.fill-3 {
+  background: var(--amber);
+}
+
 .table-panel {
   overflow-x: auto;
 }
@@ -643,7 +787,8 @@ th {
   .hero,
   .page-grid,
   .feature-band,
-  .stats-grid {
+  .stats-grid,
+  .charts-grid {
     grid-template-columns: 1fr;
   }
 

static/js/app.js

@@ -0,0 +1,28 @@
+const imageInput = document.querySelector("#imageInput");
+const imageUrlInput = document.querySelector("#imageUrlInput");
+const previewCard = document.querySelector("#previewCard");
+const imagePreview = document.querySelector("#imagePreview");
+
+function showPreview(src) {
+  if (!previewCard || !imagePreview || !src) return;
+  imagePreview.src = src;
+  previewCard.hidden = false;
+}
+
+if (imageInput) {
+  imageInput.addEventListener("change", () => {
+    const file = imageInput.files && imageInput.files[0];
+    if (!file) return;
+    showPreview(URL.createObjectURL(file));
+    if (imageUrlInput) imageUrlInput.value = "";
+  });
+}
+
+if (imageUrlInput) {
+  imageUrlInput.addEventListener("input", () => {
+    const value = imageUrlInput.value.trim();
+    if (!value) return;
+    showPreview(value);
+    if (imageInput) imageInput.value = "";
+  });
+}

templates/base.html

@@ -42,5 +42,6 @@
 
       {% block content %}{% endblock %}
     </main>
+    {% block scripts %}{% endblock %}
   </body>
 </html>

templates/dashboard.html

@@ -20,6 +20,50 @@
   <article><span>Feedback accuracy</span><strong>{{ stats.accuracy }}%</strong></article>
 </section>
 
+<section class="charts-grid">
+  <article class="chart-panel">
+    <div class="chart-heading">
+      <h2>Predictions by class</h2>
+      <span>Top {{ charts.class_chart|length }}</span>
+    </div>
+    <div class="bar-list">
+      {% for item in charts.class_chart %}
+        <div class="bar-row">
+          <div class="bar-meta">
+            <span>{{ item.label }}</span>
+            <strong>{{ item.count }}</strong>
+          </div>
+          <div class="bar-track">
+            <span class="bar-fill class-fill" style="width: {{ item.percent }}%"></span>
+          </div>
+        </div>
+      {% else %}
+        <p class="empty">No class data yet.</p>
+      {% endfor %}
+    </div>
+  </article>
+
+  <article class="chart-panel">
+    <div class="chart-heading">
+      <h2>Feedback summary</h2>
+      <span>{{ stats.reviewed }} reviewed</span>
+    </div>
+    <div class="bar-list">
+      {% for item in charts.feedback_chart %}
+        <div class="bar-row">
+          <div class="bar-meta">
+            <span>{{ item.label }}</span>
+            <strong>{{ item.count }}</strong>
+          </div>
+          <div class="bar-track">
+            <span class="bar-fill feedback-fill fill-{{ loop.index }}" style="width: {{ item.percent }}%"></span>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  </article>
+</section>
+
 <section class="table-panel">
   <table>
     <thead>

templates/predict.html

@@ -15,9 +15,22 @@
 
     <form class="upload-form" method="post" enctype="multipart/form-data">
       <label class="upload-box">
-        <span>Choose image</span>
-        <input type="file" name="image" accept="image/png,image/jpeg,image/webp" required>
+        <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>
@@ -44,8 +57,11 @@
 
 <section class="history-strip">
   <div class="section-heading">
-    <h2>Recent history</h2>
-    <a href="{{ url_for('dashboard') }}">Open dashboard</a>
+    <div>
+      <p class="eyebrow">Historique</p>
+      <h2>Recent history</h2>
+    </div>
+    <a class="button secondary dashboard-link" href="{{ url_for('dashboard') }}">Open dashboard</a>
   </div>
   <div class="history-grid">
     {% for row in history %}
@@ -60,3 +76,7 @@
   </div>
 </section>
 {% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/app.js') }}"></script>
+{% endblock %}