Upload app.py with huggingface_hub

app.py

@@ -1,7 +1,12 @@
 import gradio as gr
 from huggingface_hub import snapshot_download
 import sys
+import statistics
+from html import escape
 
+# -----------------------------
+# Load model + inspector
+# -----------------------------
 local_dir = snapshot_download(repo_id="Janani-V/pcb-defect-yolov8s-deeppcb")
 sys.path.append(local_dir)
 
@@ -9,96 +14,632 @@ from inspector import PCBDefectInspector
 
 inspector = PCBDefectInspector(weights_path=f"{local_dir}/best.pt")
 
+# -----------------------------
+# Severity config
+# -----------------------------
 SEVERITY_COLORS = {
     "Critical": "#ff4d4f",
     "High": "#ff7a45",
     "Medium-High": "#ffa940",
-    "Medium": "#ffc53d",
+    "Medium": "#fadb14",
     "Low-Medium": "#95de64",
 }
 
 SEVERITY_RANK = {
-    "Critical": 4,
-    "High": 3,
-    "Medium-High": 2,
-    "Medium": 1,
-    "Low-Medium": 0,
+    "Critical": 5,
+    "High": 4,
+    "Medium-High": 3,
+    "Medium": 2,
+    "Low-Medium": 1,
 }
 
+DEFAULT_SEVERITY_COLOR = "#8c8c8c"
+
+# -----------------------------
+# Helper: render KPI card
+# -----------------------------
+def kpi_card(title, value, subtitle="", accent="#5B8FF9"):
+    return f"""
+    <div class="kpi-card" style="border-top: 4px solid {accent};">
+        <div class="kpi-title">{escape(str(title))}</div>
+        <div class="kpi-value">{escape(str(value))}</div>
+        <div class="kpi-subtitle">{escape(str(subtitle))}</div>
+    </div>
+    """
+
+# -----------------------------
+# Helper: defect display names
+# -----------------------------
+def pretty_label(name: str) -> str:
+    return name.replace("-", " ").replace("_", " ").title()
+
+# -----------------------------
+# Main detection function
+# -----------------------------
 def detect(image, conf):
     inspector.conf = conf
     result = inspector.inspect(image)
 
-    if not result["findings"]:
-        return result["annotated_image"], "<p>No defects detected above the confidence threshold.</p>"
+    findings = result.get("findings", [])
+    annotated_image = result.get("annotated_image", image)
+    summary = result.get("summary", "Inspection completed.")
+
+    # No detections
+    if not findings:
+        no_defects_html = """
+        <div class="empty-state">
+            <div class="empty-icon">✓</div>
+            <div class="empty-title">No defects detected</div>
+            <div class="empty-text">
+                No PCB defects were detected above the selected confidence threshold.
+            </div>
+        </div>
+        """
+        return annotated_image, no_defects_html
 
-    # Group findings by class so repeated instances don't repeat the same text
+    # -----------------------------
+    # Group findings by class
+    # -----------------------------
     grouped = {}
-    for f in result["findings"]:
-        grouped.setdefault(f["class"], {"count": 0, "confidences": [], "info": f})
-        grouped[f["class"]]["count"] += 1
-        grouped[f["class"]]["confidences"].append(f["confidence"])
+    all_confidences = []
 
-    # Sort groups by severity, worst first
+    for f in findings:
+        cls = f.get("class", "unknown")
+        conf_score = float(f.get("confidence", 0.0))
+        all_confidences.append(conf_score)
+
+        if cls not in grouped:
+            grouped[cls] = {
+                "count": 0,
+                "confidences": [],
+                "info": f
+            }
+
+        grouped[cls]["count"] += 1
+        grouped[cls]["confidences"].append(conf_score)
+
+    # Sort by severity descending
     sorted_items = sorted(
         grouped.items(),
-        key=lambda x: SEVERITY_RANK.get(x[1]["info"]["severity"], 0),
+        key=lambda x: SEVERITY_RANK.get(x[1]["info"].get("severity", ""), 0),
         reverse=True
     )
 
-    # Overall severity banner
-    highest_severity = sorted_items[0][1]["info"]["severity"]
-    banner_color = SEVERITY_COLORS.get(highest_severity, "#333")
+    # -----------------------------
+    # Overall summary metrics
+    # -----------------------------
+    total_defects = len(findings)
+    unique_types = len(grouped)
+    highest_severity = sorted_items[0][1]["info"].get("severity", "Unknown")
+    highest_severity_color = SEVERITY_COLORS.get(highest_severity, DEFAULT_SEVERITY_COLOR)
+    avg_conf = statistics.mean(all_confidences) if all_confidences else 0.0
 
-    html = f"""
-    <div style="padding:14px 18px; border-radius:10px; margin-bottom:18px; background:{banner_color}; color:#000;">
-        <b style="font-size:16px;">{result['summary']}</b><br/>
-        <span style="font-size:14px;">Highest severity found: <b>{highest_severity}</b></span>
+    summary_cards_html = f"""
+    <div class="kpi-grid">
+        {kpi_card("Total Defects", total_defects, "All detected instances", accent="#5B8FF9")}
+        {kpi_card("Defect Types", unique_types, "Unique classes found", accent="#36CFC9")}
+        {kpi_card("Highest Severity", highest_severity, "Most critical detected class", accent=highest_severity_color)}
+        {kpi_card("Avg Confidence", f"{avg_conf:.2f}", "Mean detection confidence", accent="#9254DE")}
     </div>
     """
 
+    # -----------------------------
+    # Summary banner
+    # -----------------------------
+    summary_banner_html = f"""
+    <div class="summary-banner" style="border-left: 6px solid {highest_severity_color};">
+        <div class="summary-title">Inspection Summary</div>
+        <div class="summary-text">{escape(summary)}</div>
+        <div class="summary-meta">
+            Highest severity detected:
+            <span class="severity-pill" style="background:{highest_severity_color}; color:#111;">
+                {escape(highest_severity)}
+            </span>
+        </div>
+    </div>
+    """
+
+    # -----------------------------
+    # Defect cards
+    # -----------------------------
+    defect_cards_html = '<div class="section-title">Detected Defect Analysis</div>'
+
     for cls, data in sorted_items:
         info = data["info"]
-        color = SEVERITY_COLORS.get(info["severity"], "#d9d9d9")
-        conf_list = ", ".join(str(c) for c in data["confidences"])
-
-        html += f"""
-        <div style="border:1px solid #444; border-radius:10px; padding:16px; margin-bottom:14px; background:#1e1e1e;">
-            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
-                <span style="font-size:18px; font-weight:600; color:#fff;">
-                    {cls.upper()} <span style="font-weight:400; color:#aaa;">× {data['count']}</span>
-                </span>
-                <span style="background:{color}; color:#000; padding:4px 12px; border-radius:20px; font-size:13px; font-weight:600;">
-                    {info['severity']}
-                </span>
+        severity = info.get("severity", "Unknown")
+        severity_color = SEVERITY_COLORS.get(severity, DEFAULT_SEVERITY_COLOR)
+        display_name = pretty_label(cls)
+
+        conf_list = ", ".join(f"{c:.2f}" for c in data["confidences"])
+        avg_cls_conf = statistics.mean(data["confidences"]) if data["confidences"] else 0.0
+
+        explanation = info.get("explanation", "No explanation available.")
+        root_cause = info.get("root_cause", "Not available.")
+        impact = info.get("impact", "Not available.")
+        action = info.get("action", "Not available.")
+
+        defect_cards_html += f"""
+        <div class="defect-card">
+            <div class="defect-header">
+                <div>
+                    <div class="defect-name">{escape(display_name)}</div>
+                    <div class="defect-submeta">
+                        Count: <b>{data['count']}</b> &nbsp;|&nbsp;
+                        Avg confidence: <b>{avg_cls_conf:.2f}</b>
+                    </div>
+                </div>
+                <div class="severity-pill" style="background:{severity_color}; color:#111;">
+                    {escape(severity)}
+                </div>
+            </div>
+
+            <div class="defect-body">
+                <div class="defect-row">
+                    <span class="defect-label">Confidence Scores</span>
+                    <span class="defect-value">{escape(conf_list)}</span>
+                </div>
+
+                <div class="defect-row">
+                    <span class="defect-label">Explanation</span>
+                    <span class="defect-value">{escape(explanation)}</span>
+                </div>
+
+                <div class="defect-row">
+                    <span class="defect-label">Likely Root Cause</span>
+                    <span class="defect-value">{escape(root_cause)}</span>
+                </div>
+
+                <div class="defect-row">
+                    <span class="defect-label">Potential Impact</span>
+                    <span class="defect-value">{escape(impact)}</span>
+                </div>
+
+                <div class="defect-row">
+                    <span class="defect-label">Recommended Action</span>
+                    <span class="defect-value">{escape(action)}</span>
+                </div>
             </div>
-            <p style="color:#bbb; font-size:13px; margin:4px 0;"><b>Confidence:</b> {conf_list}</p>
-            <p style="color:#eee; margin:10px 0 6px 0;"><b>Explanation:</b> {info['explanation']}</p>
-            <p style="color:#eee; margin:6px 0;"><b>Root Cause:</b> {info['root_cause']}</p>
-            <p style="color:#eee; margin:6px 0;"><b>Impact:</b> {info['impact']}</p>
-            <p style="color:#eee; margin:6px 0;"><b>Recommended Action:</b> {info['action']}</p>
         </div>
         """
 
-    return result["annotated_image"], html
-
-demo = gr.Interface(
-    fn=detect,
-    inputs=[
-        gr.Image(type="numpy", label="Upload PCB Image"),
-        gr.Slider(0.1, 0.9, value=0.25, step=0.05, label="Confidence Threshold")
-    ],
-    outputs=[
-        gr.Image(type="numpy", label="Detected Defects"),
-        gr.HTML(label="Inspection Report")
-    ],
-    title="PCB Defect Detector — YOLOv8s (DeepPCB)",
-    description="Upload a PCB image to detect defects and get severity, root cause, impact, and recommended action for each defect type, sorted by severity. [Model card](https://huggingface.co/Janani-V/pcb-defect-yolov8s-deeppcb)",
-    examples=[
-        ["sample1_input.jpg", 0.25],
-        ["sample2_input.jpg", 0.25],
-        ["sample3_input.jpg", 0.25]
-    ]
-)
+    # -----------------------------
+    # Compact defect summary table
+    # -----------------------------
+    table_html = """
+    <div class="section-title" style="margin-top: 22px;">Defect Summary Table</div>
+    <div class="table-wrap">
+        <table class="summary-table">
+            <thead>
+                <tr>
+                    <th>Defect</th>
+                    <th>Count</th>
+                    <th>Severity</th>
+                    <th>Avg Confidence</th>
+                </tr>
+            </thead>
+            <tbody>
+    """
+
+    for cls, data in sorted_items:
+        info = data["info"]
+        severity = info.get("severity", "Unknown")
+        severity_color = SEVERITY_COLORS.get(severity, DEFAULT_SEVERITY_COLOR)
+        display_name = pretty_label(cls)
+        avg_cls_conf = statistics.mean(data["confidences"]) if data["confidences"] else 0.0
+
+        table_html += f"""
+            <tr>
+                <td>{escape(display_name)}</td>
+                <td>{data['count']}</td>
+                <td>
+                    <span class="severity-pill small" style="background:{severity_color}; color:#111;">
+                        {escape(severity)}
+                    </span>
+                </td>
+                <td>{avg_cls_conf:.2f}</td>
+            </tr>
+        """
+
+    table_html += """
+            </tbody>
+        </table>
+    </div>
+    """
+
+    final_html = summary_cards_html + summary_banner_html + defect_cards_html + table_html
+    return annotated_image, final_html
+
+
+# -----------------------------
+# Custom CSS
+# -----------------------------
+custom_css = """
+:root {
+    --bg: #0f1117;
+    --panel: #161b22;
+    --panel-2: #1d232d;
+    --border: #2b3240;
+    --text: #f5f7fa;
+    --muted: #a8b0bd;
+    --accent: #5B8FF9;
+    --success: #36cfc9;
+}
+
+body, .gradio-container {
+    background: var(--bg) !important;
+    color: var(--text) !important;
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+}
+
+.gradio-container {
+    max-width: 1400px !important;
+    margin: 0 auto !important;
+    padding-top: 8px !important;
+}
+
+/* Top header */
+.app-header {
+    padding: 18px 20px 8px 20px;
+    margin-bottom: 6px;
+}
+
+.app-title {
+    font-size: 30px;
+    font-weight: 800;
+    color: #ffffff;
+    margin-bottom: 8px;
+    letter-spacing: 0.2px;
+}
+
+.app-subtitle {
+    font-size: 15px;
+    color: var(--muted);
+    line-height: 1.6;
+    max-width: 1000px;
+}
+
+/* Panels */
+.panel-card {
+    background: linear-gradient(180deg, #151a22 0%, #11161d 100%);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 14px;
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
+}
+
+/* KPI cards */
+.kpi-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 14px;
+    margin-bottom: 18px;
+}
+
+.kpi-card {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    padding: 16px;
+    min-height: 110px;
+    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
+}
+
+.kpi-title {
+    color: var(--muted);
+    font-size: 13px;
+    margin-bottom: 10px;
+    letter-spacing: 0.2px;
+}
+
+.kpi-value {
+    color: #fff;
+    font-size: 28px;
+    font-weight: 800;
+    line-height: 1.1;
+    margin-bottom: 8px;
+}
+
+.kpi-subtitle {
+    color: #8b95a7;
+    font-size: 12px;
+}
+
+/* Summary banner */
+.summary-banner {
+    background: linear-gradient(180deg, #171d26 0%, #121821 100%);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    padding: 16px 18px;
+    margin-bottom: 18px;
+}
+
+.summary-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: #fff;
+    margin-bottom: 8px;
+}
+
+.summary-text {
+    color: #d7dde7;
+    font-size: 14px;
+    line-height: 1.6;
+    margin-bottom: 10px;
+}
+
+.summary-meta {
+    color: #b8c1cf;
+    font-size: 14px;
+}
+
+/* Section titles */
+.section-title {
+    color: #ffffff;
+    font-size: 18px;
+    font-weight: 700;
+    margin: 12px 0 14px 0;
+}
+
+/* Defect cards */
+.defect-card {
+    background: linear-gradient(180deg, #161b22 0%, #12171f 100%);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 16px;
+    margin-bottom: 14px;
+    box-shadow: 0 8px 20px rgba(0,0,0,0.16);
+}
+
+.defect-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+.defect-name {
+    font-size: 20px;
+    font-weight: 800;
+    color: #fff;
+    margin-bottom: 4px;
+}
+
+.defect-submeta {
+    color: var(--muted);
+    font-size: 13px;
+}
+
+.defect-body {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.defect-row {
+    display: grid;
+    grid-template-columns: 180px 1fr;
+    gap: 14px;
+    align-items: start;
+    padding: 10px 0;
+    border-top: 1px solid rgba(255,255,255,0.05);
+}
+
+.defect-row:first-child {
+    border-top: none;
+    padding-top: 0;
+}
+
+.defect-label {
+    color: #c4ccd8;
+    font-size: 13px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+}
+
+.defect-value {
+    color: #eef2f7;
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+/* Severity pills */
+.severity-pill {
+    display: inline-block;
+    padding: 6px 12px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 800;
+    letter-spacing: 0.2px;
+    white-space: nowrap;
+}
+
+.severity-pill.small {
+    padding: 4px 10px;
+    font-size: 11px;
+}
+
+/* Table */
+.table-wrap {
+    overflow-x: auto;
+    margin-top: 8px;
+}
+
+.summary-table {
+    width: 100%;
+    border-collapse: collapse;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    overflow: hidden;
+}
+
+.summary-table th {
+    background: #1d2430;
+    color: #eef2f7;
+    text-align: left;
+    font-size: 13px;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--border);
+}
+
+.summary-table td {
+    padding: 14px 16px;
+    color: #dce3ed;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+    font-size: 14px;
+}
+
+.summary-table tr:last-child td {
+    border-bottom: none;
+}
+
+/* Empty state */
+.empty-state {
+    background: linear-gradient(180deg, #161b22 0%, #12171f 100%);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 36px 20px;
+    text-align: center;
+}
+
+.empty-icon {
+    font-size: 42px;
+    margin-bottom: 12px;
+    color: #36cfc9;
+}
+
+.empty-title {
+    color: #fff;
+    font-size: 20px;
+    font-weight: 800;
+    margin-bottom: 8px;
+}
+
+.empty-text {
+    color: var(--muted);
+    font-size: 14px;
+    max-width: 600px;
+    margin: 0 auto;
+    line-height: 1.6;
+}
+
+/* Gradio element tweaks */
+.gr-button-primary {
+    border-radius: 12px !important;
+}
+
+.gr-box, .gr-panel {
+    border-radius: 14px !important;
+}
+
+footer {
+    display: none !important;
+}
+
+/* Responsive */
+@media (max-width: 1100px) {
+    .kpi-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .defect-row {
+        grid-template-columns: 1fr;
+        gap: 6px;
+    }
+}
+
+@media (max-width: 700px) {
+    .kpi-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .app-title {
+        font-size: 24px;
+    }
+
+    .defect-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+"""
+
+# -----------------------------
+# Build Gradio UI
+# -----------------------------
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
+    gr.HTML("""
+    <div class="app-header">
+        <div class="app-title">PCB Defect Detector — YOLOv8s (DeepPCB)</div>
+        <div class="app-subtitle">
+            Upload a PCB image to detect manufacturing defects and receive an inspection report with
+            <b>severity assessment</b>, <b>likely root cause</b>, <b>impact</b>, and
+            <b>recommended action</b> for each detected defect type.
+            This interface combines a fine-tuned <b>YOLOv8s defect detector</b> with a structured
+            PCB defect interpretation layer for more informative inspection outputs.
+        </div>
+    </div>
+    """)
+
+    with gr.Row(equal_height=False):
+        # LEFT PANEL
+        with gr.Column(scale=5):
+            with gr.Group():
+                input_image = gr.Image(type="numpy", label="Upload PCB Image")
+                conf_slider = gr.Slider(
+                    minimum=0.10,
+                    maximum=0.90,
+                    value=0.25,
+                    step=0.05,
+                    label="Confidence Threshold"
+                )
+
+                with gr.Row():
+                    detect_btn = gr.Button("Run Inspection", variant="primary")
+                    clear_btn = gr.ClearButton([input_image], value="Clear")
+
+            with gr.Group():
+                output_image = gr.Image(
+                    type="numpy",
+                    label="Detected Defects / Annotated Output"
+                )
+
+        # RIGHT PANEL
+        with gr.Column(scale=7):
+            report_html = gr.HTML(label="Inspection Report")
+
+    # Examples section
+    gr.Examples(
+        examples=[
+            ["sample1_input.jpg", 0.25],
+            ["sample2_input.jpg", 0.25],
+            ["sample3_input.jpg", 0.25]
+        ],
+        inputs=[input_image, conf_slider],
+        label="Example PCB Images"
+    )
+
+    # Footer / note
+    gr.HTML("""
+    <div style="margin-top:18px; color:#98a2b3; font-size:13px; line-height:1.6;">
+        <b>Note:</b> Severity, root cause, impact, and recommended action are generated from a
+        structured defect knowledge layer on top of the model’s class predictions. The YOLO model
+        itself performs visual defect detection; higher-level interpretation should still be reviewed
+        in the context of PCB manufacturing and inspection workflows.
+        <br/><br/>
+        <b>Model card:</b>
+        <a href="https://huggingface.co/Janani-V/pcb-defect-yolov8s-deeppcb" target="_blank">
+            Janani-V/pcb-defect-yolov8s-deeppcb
+        </a>
+    </div>
+    """)
+
+    detect_btn.click(
+        fn=detect,
+        inputs=[input_image, conf_slider],
+        outputs=[output_image, report_html]
+    )
 
 demo.launch()