Add Flask PV defect classifier app with EfficientNet-B0 ONNX model

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.onnx.data filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,24 @@
+# ── PV Defect Classifier — Docker Image ──
+# Lightweight Python image, ~350MB final size
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install dependencies first (cache layer)
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy app code
+COPY app.py .
+COPY templates/ templates/
+COPY static/ static/
+COPY models/ models/
+
+# Expose port (HF Spaces requires 7860)
+EXPOSE 7860
+
+# Production server (gunicorn instead of Flask dev server)
+RUN pip install --no-cache-dir gunicorn
+
+# Run with gunicorn: 2 workers, bind to all interfaces
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers", "2", "--timeout", "30", "app:app"]

app.py

@@ -0,0 +1,120 @@
+"""
+PV Defect Classification — Flask Demo
+======================================
+Loads the best ONNX model and serves a web interface for
+real-time photovoltaic panel defect classification.
+
+Usage:
+  1. Put your .onnx model file in the /models folder
+  2. pip install flask onnxruntime pillow numpy
+  3. python app.py
+  4. Open http://localhost:7860 in your browser
+"""
+
+import os
+import time
+import numpy as np
+from PIL import Image
+from flask import Flask, render_template, request, jsonify
+import onnxruntime as ort
+
+# ── Config ────────────────────────────────────────────────────
+MODEL_DIR = os.path.join(os.path.dirname(__file__), "models")
+CLASS_NAMES = ["DEFECTIVE", "NORMAL"]
+IMG_SIZE = 224
+MEAN = np.array([0.485, 0.456, 0.406], dtype=np.float32)
+STD  = np.array([0.229, 0.224, 0.225], dtype=np.float32)
+
+app = Flask(__name__)
+
+# ── Load ONNX model ──────────────────────────────────────────
+def find_onnx_model():
+    """Auto-detect the first .onnx file in /models."""
+    for f in os.listdir(MODEL_DIR):
+        if f.endswith(".onnx"):
+            return os.path.join(MODEL_DIR, f)
+    return None
+
+model_path = find_onnx_model()
+if model_path:
+    session = ort.InferenceSession(model_path)
+    input_name = session.get_inputs()[0].name
+    print(f"✅ Loaded model: {os.path.basename(model_path)}")
+else:
+    session = None
+    print("⚠️  No .onnx file found in /models — place your model there and restart.")
+
+
+# ── Preprocessing (same as val_tf in your notebook) ──────────
+def preprocess(image: Image.Image) -> np.ndarray:
+    """Resize, normalise, and convert PIL image to ONNX input tensor."""
+    img = image.convert("RGB").resize((IMG_SIZE, IMG_SIZE))
+    arr = np.array(img, dtype=np.float32) / 255.0   # [H, W, 3]
+    arr = (arr - MEAN) / STD                          # normalise
+    arr = arr.transpose(2, 0, 1)                      # [3, H, W]
+    return arr[np.newaxis, ...]                        # [1, 3, H, W]
+
+
+def softmax(x):
+    e = np.exp(x - np.max(x))
+    return e / e.sum()
+
+
+# ── Routes ────────────────────────────────────────────────────
+@app.route("/")
+def index():
+    model_name = os.path.basename(model_path) if model_path else "No model loaded"
+    return render_template("index.html", model_name=model_name)
+
+
+@app.route("/predict", methods=["POST"])
+def predict():
+    if session is None:
+        return jsonify({"error": "No model loaded. Put a .onnx file in /models."}), 500
+
+    if "file" not in request.files:
+        return jsonify({"error": "No file uploaded."}), 400
+
+    file = request.files["file"]
+    if file.filename == "":
+        return jsonify({"error": "Empty filename."}), 400
+
+    try:
+        image = Image.open(file.stream)
+        tensor = preprocess(image)
+
+        # Inference with timing
+        t0 = time.time()
+        outputs = session.run(None, {input_name: tensor})
+        latency_ms = (time.time() - t0) * 1000
+
+        logits = outputs[0][0]
+        probs = softmax(logits)
+        pred_idx = int(np.argmax(probs))
+        confidence = float(probs[pred_idx]) * 100
+
+        return jsonify({
+            "prediction": CLASS_NAMES[pred_idx],
+            "confidence": round(confidence, 1),
+            "latency_ms": round(latency_ms, 1),
+            "probabilities": {
+                CLASS_NAMES[i]: round(float(probs[i]) * 100, 1)
+                for i in range(len(CLASS_NAMES))
+            }
+        })
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+
+@app.route("/health")
+def health():
+    """Health check endpoint — useful for cloud deployment."""
+    return jsonify({
+        "status": "ok",
+        "model_loaded": session is not None,
+        "model_file": os.path.basename(model_path) if model_path else None
+    })
+
+
+if __name__ == "__main__":
+    app.run(debug=False, host="0.0.0.0", port=7860)

models/efficientnet_b0.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8082715f227b63acbf3a4c36cc5cec25df19eca44ed46e45b0058a6563addfa0
+size 602059

models/efficientnet_b0.onnx.data

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eb3333d9ed900411fcb851cadfc58f0665f7b1db6ca39cdf80492e4d76163cc0
+size 15990784

requirements.txt

@@ -0,0 +1,4 @@
+flask==3.0.0
+onnxruntime==1.17.0
+Pillow==10.2.0
+numpy==1.26.3

templates/index.html

@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>PV Defect Classifier</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #f5f7fa;
+      color: #1a1a2e;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .header {
+      width: 100%;
+      background: linear-gradient(135deg, #1a3c6e 0%, #2e5e8e 100%);
+      color: white;
+      padding: 2rem;
+      text-align: center;
+    }
+    .header h1 { font-size: 1.6rem; font-weight: 600; }
+    .header p { font-size: 0.85rem; opacity: 0.8; margin-top: 0.4rem; }
+    .container {
+      max-width: 560px;
+      width: 100%;
+      padding: 2rem 1.5rem;
+    }
+
+    /* Upload area */
+    .upload-area {
+      border: 2px dashed #c0cfe0;
+      border-radius: 12px;
+      padding: 2.5rem 1.5rem;
+      text-align: center;
+      background: white;
+      cursor: pointer;
+      transition: border-color 0.2s, background 0.2s;
+    }
+    .upload-area:hover, .upload-area.dragover {
+      border-color: #2e5e8e;
+      background: #eef3fa;
+    }
+    .upload-area svg { width: 48px; height: 48px; stroke: #7a8fa8; }
+    .upload-area p { color: #5a6d82; margin-top: 0.8rem; font-size: 0.9rem; }
+    .upload-area .hint { font-size: 0.75rem; color: #9aa8b8; margin-top: 0.3rem; }
+    #file-input { display: none; }
+
+    /* Preview */
+    .preview-section { margin-top: 1.5rem; display: none; }
+    .preview-section.show { display: block; }
+    .preview-img {
+      width: 100%;
+      max-height: 300px;
+      object-fit: contain;
+      border-radius: 8px;
+      background: #e8ecf2;
+    }
+    .btn {
+      display: block;
+      width: 100%;
+      margin-top: 1rem;
+      padding: 0.75rem;
+      font-size: 1rem;
+      font-weight: 500;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      background: #1a3c6e;
+      color: white;
+      transition: background 0.2s;
+    }
+    .btn:hover { background: #2e5e8e; }
+    .btn:disabled { background: #9aa8b8; cursor: not-allowed; }
+
+    /* Result card */
+    .result-card {
+      margin-top: 1.5rem;
+      background: white;
+      border-radius: 12px;
+      padding: 1.5rem;
+      display: none;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+    }
+    .result-card.show { display: block; }
+    .result-label {
+      font-size: 1.4rem;
+      font-weight: 600;
+      text-align: center;
+      padding: 0.5rem 0;
+    }
+    .result-label.defective { color: #c0392b; }
+    .result-label.normal { color: #0f6e56; }
+
+    .metrics {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 12px;
+      margin-top: 1rem;
+    }
+    .metric {
+      text-align: center;
+      background: #f5f7fa;
+      padding: 0.8rem 0.5rem;
+      border-radius: 8px;
+    }
+    .metric .value { font-size: 1.2rem; font-weight: 600; color: #1a3c6e; }
+    .metric .label { font-size: 0.7rem; color: #7a8fa8; margin-top: 2px; }
+
+    .prob-bar-container { margin-top: 1.2rem; }
+    .prob-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 6px;
+      font-size: 0.8rem;
+    }
+    .prob-name { width: 80px; text-align: right; color: #5a6d82; }
+    .prob-bar-bg {
+      flex: 1;
+      height: 10px;
+      background: #e8ecf2;
+      border-radius: 5px;
+      overflow: hidden;
+    }
+    .prob-bar {
+      height: 100%;
+      border-radius: 5px;
+      transition: width 0.5s ease;
+    }
+    .prob-bar.defective { background: #e74c3c; }
+    .prob-bar.normal { background: #1d9e75; }
+    .prob-pct { width: 44px; font-weight: 500; color: #1a1a2e; }
+
+    .model-badge {
+      text-align: center;
+      margin-top: 1rem;
+      font-size: 0.7rem;
+      color: #9aa8b8;
+    }
+
+    /* Loading spinner */
+    .spinner { display: none; text-align: center; margin-top: 1rem; }
+    .spinner.show { display: block; }
+    .spinner::after {
+      content: '';
+      display: inline-block;
+      width: 28px; height: 28px;
+      border: 3px solid #c0cfe0;
+      border-top-color: #1a3c6e;
+      border-radius: 50%;
+      animation: spin 0.7s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+  </style>
+</head>
+<body>
+
+<div class="header">
+  <h1>PV Defect Classifier</h1>
+  <p>Upload a photovoltaic cell image for real-time defect classification</p>
+</div>
+
+<div class="container">
+
+  <!-- Upload -->
+  <div class="upload-area" id="drop-zone" onclick="document.getElementById('file-input').click()">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
+    </svg>
+    <p>Click or drag an image here</p>
+    <span class="hint">Supports JPG, PNG — PV electroluminescence images</span>
+  </div>
+  <input type="file" id="file-input" accept="image/*">
+
+  <!-- Preview -->
+  <div class="preview-section" id="preview-section">
+    <img id="preview-img" class="preview-img" alt="Preview">
+    <button class="btn" id="classify-btn" onclick="classify()">Classify</button>
+  </div>
+
+  <!-- Loading -->
+  <div class="spinner" id="spinner"></div>
+
+  <!-- Result -->
+  <div class="result-card" id="result-card">
+    <div class="result-label" id="result-label"></div>
+    <div class="metrics">
+      <div class="metric">
+        <div class="value" id="confidence">—</div>
+        <div class="label">Confidence</div>
+      </div>
+      <div class="metric">
+        <div class="value" id="latency">—</div>
+        <div class="label">Latency</div>
+      </div>
+      <div class="metric">
+        <div class="value" id="model-size">—</div>
+        <div class="label">Model</div>
+      </div>
+    </div>
+    <div class="prob-bar-container" id="prob-bars"></div>
+    <div class="model-badge">Model: <span id="model-name">{{ model_name }}</span></div>
+  </div>
+
+</div>
+
+<script>
+const dropZone = document.getElementById('drop-zone');
+const fileInput = document.getElementById('file-input');
+const previewSection = document.getElementById('preview-section');
+const previewImg = document.getElementById('preview-img');
+let selectedFile = null;
+
+// Drag & drop
+dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('dragover'); });
+dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
+dropZone.addEventListener('drop', e => {
+  e.preventDefault();
+  dropZone.classList.remove('dragover');
+  if (e.dataTransfer.files.length) handleFile(e.dataTransfer.files[0]);
+});
+
+fileInput.addEventListener('change', () => {
+  if (fileInput.files.length) handleFile(fileInput.files[0]);
+});
+
+function handleFile(file) {
+  selectedFile = file;
+  const reader = new FileReader();
+  reader.onload = e => {
+    previewImg.src = e.target.result;
+    previewSection.classList.add('show');
+    document.getElementById('result-card').classList.remove('show');
+  };
+  reader.readAsDataURL(file);
+}
+
+async function classify() {
+  if (!selectedFile) return;
+  const btn = document.getElementById('classify-btn');
+  const spinner = document.getElementById('spinner');
+  const resultCard = document.getElementById('result-card');
+
+  btn.disabled = true;
+  spinner.classList.add('show');
+  resultCard.classList.remove('show');
+
+  const formData = new FormData();
+  formData.append('file', selectedFile);
+
+  try {
+    const res = await fetch('/predict', { method: 'POST', body: formData });
+    const data = await res.json();
+
+    if (data.error) {
+      alert('Error: ' + data.error);
+      return;
+    }
+
+    // Update result
+    const label = document.getElementById('result-label');
+    label.textContent = data.prediction;
+    label.className = 'result-label ' + data.prediction.toLowerCase();
+
+    document.getElementById('confidence').textContent = data.confidence + '%';
+    document.getElementById('latency').textContent = data.latency_ms + 'ms';
+    document.getElementById('model-size').textContent = document.getElementById('model-name').textContent.replace('.onnx','');
+
+    // Probability bars
+    const barsDiv = document.getElementById('prob-bars');
+    barsDiv.innerHTML = '';
+    for (const [cls, pct] of Object.entries(data.probabilities)) {
+      barsDiv.innerHTML += `
+        <div class="prob-row">
+          <span class="prob-name">${cls}</span>
+          <div class="prob-bar-bg"><div class="prob-bar ${cls.toLowerCase()}" style="width:${pct}%"></div></div>
+          <span class="prob-pct">${pct}%</span>
+        </div>`;
+    }
+
+    resultCard.classList.add('show');
+  } catch (e) {
+    alert('Request failed: ' + e.message);
+  } finally {
+    btn.disabled = false;
+    spinner.classList.remove('show');
+  }
+}
+</script>
+
+</body>
+</html>