Deploy from GitHub Actions (branch: main, sha: 83d61fdf)

CLAUDE.md

@@ -0,0 +1,107 @@
+# CLAUDE.md - Project Instructions for Claude Code
+
+## Project Overview
+
+EleFind is an aerial elephant detection web application using YOLOv11 and SAHI (Slicing Aided Hyper Inference). It provides a Gradio-based UI for detecting elephants in drone/aerial imagery for wildlife conservation.
+
+## Tech Stack
+
+- **Language:** Python 3.10
+- **UI Framework:** Gradio (5.50.0 on HF Spaces, >=4.44 locally)
+- **ML Framework:** Ultralytics YOLOv11, SAHI, PyTorch
+- **Deployment:** HuggingFace Spaces
+
+## Project Structure
+
+- `app.py` — Main application (Gradio UI, detection pipeline, heatmap generation)
+- `test_detection.py` — Pytest test suite
+- `requirements.txt` — Python dependencies
+- `packages.txt` — System-level dependencies for HF Spaces
+- `README.md` — Project docs (contains HF Spaces frontmatter with `sdk_version`)
+- `MODEL_CARD.md` — Model card and usage guide
+- `examples/` — Sample aerial images for demo
+- `assets/` — Training visualization images
+- `meeting_materials/` — Local-only directory (gitignored), contains models and docs
+
+## Running Locally
+
+```bash
+pip install -r requirements.txt
+python app.py
+# Access at http://127.0.0.1:7860
+```
+
+## Testing
+
+```bash
+# Run all tests
+pytest test_detection.py -v
+
+# Skip slow inference tests
+pytest test_detection.py -v -m "not slow"
+
+# Run specific test
+pytest test_detection.py -v -k "test_model"
+```
+
+## Deployment to HuggingFace Spaces
+
+HF Space is NOT synced with GitHub. Upload manually:
+
+```python
+from huggingface_hub import upload_folder
+
+upload_folder(
+    folder_path='.',
+    repo_id='iamhelitha/EleFind-gradio-ui',
+    repo_type='space',
+    ignore_patterns=[
+        '.git/*', '.git',
+        'meeting_materials/*', 'meeting_materials',
+        '.DS_Store',
+        '__pycache__/*', '*.pyc',
+        '.claude/*', '.claude',
+    ],
+    commit_message='Your commit message here',
+)
+```
+
+## Important Rules
+
+- **Do NOT pin gradio in `requirements.txt`** — the version is controlled by `sdk_version` in `README.md` frontmatter for HF Spaces. Pinning causes build conflicts.
+- **Max image dimension is 6000px** — images are downscaled to avoid CPU inference timeouts on free HF Spaces tier.
+- **Model auto-downloads from HuggingFace Hub** — configured via `HF_MODEL_REPO` and `HF_MODEL_FILE` env vars, falls back to local paths.
+- **`meeting_materials/` is gitignored** — never commit files from this directory.
+
+## Environment Variables
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `HF_MODEL_REPO` | `iamhelitha/EleFind-yolo11-elephant` | HuggingFace model repository |
+| `HF_MODEL_FILE` | `best.pt` | Model filename in the repo |
+
+## Default SAHI Parameters
+
+- Confidence threshold: `0.30`
+- Slice size: `1024 x 1024`
+- Overlap ratio: `0.30`
+- IoU threshold (NMS): `0.40`
+
+## Code Conventions
+
+- Single main file (`app.py`) contains the full application
+- Use OpenCV headless (`opencv-python-headless`) — no GUI dependencies
+- Green bounding boxes for detections, Gaussian density heatmaps for XAI
+- Gradio Soft theme with emerald/green primary colors
+
+## Git Commit Style
+
+Follow the existing commit message style — short imperative sentences describing the change:
+- `Fix HF Space build: remove gradio pin from requirements.txt`
+- `Redesign UI with tabbed layout, stats dashboard, and confidence charts`
+- `Add deployment instructions for HuggingFace Space`
+
+## Claude Settings
+
+- **`includeCoAuthoredBy`: false** — Do not add Claude as co-author to commits
+- **`gitAttribution`: false** — Disable git attribution for Claude

README.md

@@ -4,7 +4,7 @@ emoji: "\U0001F418"
 colorFrom: green
 colorTo: blue
 sdk: gradio
-sdk_version: 5.50.0
+sdk_version: 6.8.0
 app_file: app.py
 python_version: "3.10"
 suggested_hardware: cpu-basic
@@ -23,6 +23,10 @@ pinned: false
 
 # EleFind — Aerial Elephant Detection
 
+[![HuggingFace Space](https://img.shields.io/badge/%F0%9F%A4%97%20HuggingFace-Space-blue)](https://huggingface.co/spaces/iamhelitha/EleFind-gradio-ui)
+[![HuggingFace Model](https://img.shields.io/badge/%F0%9F%A4%97%20HuggingFace-Model-yellow)](https://huggingface.co/iamhelitha/EleFind-yolo11-elephant)
+[![GitHub](https://img.shields.io/badge/GitHub-EleFind--gradio--ui-181717?logo=github)](https://github.com/iamhelitha/EleFind-gradio-ui)
+
 A web application for detecting elephants in aerial and drone imagery using [YOLOv11](https://docs.ultralytics.com/) with [SAHI](https://github.com/obss/sahi) (Slicing Aided Hyper Inference) and explainable AI heatmap visualizations.
 
 ## Features
@@ -79,7 +83,7 @@ A web application for detecting elephants in aerial and drone imagery using [YOL
 ## Getting Started
 
 ```bash
-git clone https://github.com/helithalochana/EleFind-gradio-ui.git
+git clone https://github.com/iamhelitha/EleFind-gradio-ui.git
 cd EleFind-gradio-ui
 pip install -r requirements.txt
 

app.py

@@ -1,17 +1,15 @@
 """
-EleFind - Aerial Elephant Detection with Explainable AI
-========================================================
+EleFind - Aerial Elephant Detection
+=====================================
 
-A Gradio 5/6 web interface for detecting elephants in aerial/drone imagery
+A Gradio 6 web interface for detecting elephants in aerial/drone imagery
 using YOLOv11 with SAHI (Slicing Aided Hyper Inference).
 
 Features:
 - Upload aerial images and detect elephants with bounding boxes
-- XAI heatmap visualization showing detection density
 - Adjustable SAHI parameters (confidence, slice size, overlap)
 - Automatic model download from HuggingFace Hub
 - Confidence bar chart and detection data table
-- Tabbed output with download buttons on every result image
 
 Author: Helitha Guruge
 Project: EleFind (Undergraduate Research Project)
@@ -173,7 +171,7 @@ def run_detection(
     slice_size: int = DEFAULT_SLICE,
     overlap_ratio: float = DEFAULT_OVERLAP,
     iou_threshold: float = DEFAULT_IOU,
-) -> list[dict]:
+) -> list:
     """Run SAHI sliced prediction and return a list of detection dicts."""
 
     # Update model confidence threshold
@@ -215,7 +213,7 @@ def run_detection(
     return predictions
 
 
-def draw_detections(image: np.ndarray, predictions: list[dict]) -> np.ndarray:
+def draw_detections(image: np.ndarray, predictions: list) -> np.ndarray:
     """Draw bounding boxes and labels on the image."""
     img = image.copy()
 
@@ -239,52 +237,6 @@ def draw_detections(image: np.ndarray, predictions: list[dict]) -> np.ndarray:
     return img
 
 
-def create_heatmap(image: np.ndarray, predictions: list[dict]) -> np.ndarray:
-    """Create a Gaussian-blurred density heatmap of detections."""
-    h, w = image.shape[:2]
-    heatmap = np.zeros((h, w), dtype=np.float32)
-
-    for pred in predictions:
-        x1, y1, x2, y2 = pred["x1"], pred["y1"], pred["x2"], pred["y2"]
-        conf = pred["confidence"]
-        cx, cy = (x1 + x2) // 2, (y1 + y2) // 2
-        bw, bh = x2 - x1, y2 - y1
-        sx, sy = max(bw / 2, 1), max(bh / 2, 1)
-
-        yr = np.arange(max(0, y1 - bh), min(h, y2 + bh))
-        xr = np.arange(max(0, x1 - bw), min(w, x2 + bw))
-
-        if len(xr) > 0 and len(yr) > 0:
-            xx, yy = np.meshgrid(xr, yr)
-            gaussian = np.exp(
-                -((xx - cx) ** 2 / (2 * sx**2) + (yy - cy) ** 2 / (2 * sy**2))
-            )
-            gaussian *= conf
-            heatmap[yr[0] : yr[-1] + 1, xr[0] : xr[-1] + 1] += gaussian
-
-    if heatmap.max() > 0:
-        heatmap /= heatmap.max()
-
-    heatmap_color = cv2.applyColorMap(
-        (heatmap * 255).astype(np.uint8), cv2.COLORMAP_JET
-    )
-    heatmap_color = cv2.cvtColor(heatmap_color, cv2.COLOR_BGR2RGB)
-
-    blended = cv2.addWeighted(image, 0.4, heatmap_color, 0.6, 0)
-
-    # White detection outlines on heatmap
-    for pred in predictions:
-        cv2.rectangle(
-            blended,
-            (pred["x1"], pred["y1"]),
-            (pred["x2"], pred["y2"]),
-            (255, 255, 255),
-            2,
-        )
-
-    return blended
-
-
 # ---------------------------------------------------------------------------
 # Normalisation helpers (handle various Gradio input types)
 # ---------------------------------------------------------------------------
@@ -318,15 +270,14 @@ def process_image(
     slice_size: int,
     overlap_ratio: float,
     iou_threshold: float,
-    enable_heatmap: bool = False,
     progress=gr.Progress(),
 ):
-    """Run detection pipeline and return annotated image, heatmap, stats HTML,
-    confidence chart data, and detection table data."""
+    """Run detection pipeline and return annotated image, stat values,
+    parameters text, confidence chart data, and detection table data."""
 
     image_np = _to_numpy_rgb(image)
     if image_np is None:
-        return None, None, "<p style='color:#ef4444;padding:16px;'>Please upload an aerial image to detect elephants.</p>", None, None
+        return None, 0, 0.0, 0.0, 0.0, "", None, None
 
     try:
         progress(0.05, desc="Validating image")
@@ -345,26 +296,24 @@ def process_image(
         progress(0.80, desc="Drawing detections")
         det_image = draw_detections(image_np, predictions)
 
-        heatmap_image = None
-        if enable_heatmap:
-            progress(0.90, desc="Generating XAI heatmap")
-            heatmap_image = create_heatmap(image_np, predictions)
-
     except Exception as e:
         import traceback
-        err_html = (
-            f"<div style='color:#ef4444;padding:16px;'>"
-            f"<strong>Error during detection:</strong><br><pre>{e}</pre>"
-            f"<details><summary>Traceback</summary><pre>{traceback.format_exc()}</pre></details>"
-            f"</div>"
-        )
-        return None, None, err_html, None, None
+        err_msg = f"Error: {e}\n\n```\n{traceback.format_exc()}\n```"
+        return None, 0, 0.0, 0.0, 0.0, err_msg, None, None
 
-    stats = _stats_html(predictions, w, h, slice_size, overlap_ratio,
-                        conf_threshold, iou_threshold)
+    # Compute stats
+    n = len(predictions)
+    avg_conf = sum(p["confidence"] for p in predictions) / n if n else 0.0
+    max_conf = max((p["confidence"] for p in predictions), default=0.0)
+    min_conf = min((p["confidence"] for p in predictions), default=0.0)
+
+    params_text = (
+        f"**Parameters:** Slice {int(slice_size)}x{int(slice_size)} px · "
+        f"Overlap {overlap_ratio:.0%} · Confidence >= {conf_threshold:.0%} · "
+        f"IoU {iou_threshold:.0%} · Image {w}x{h} px · Device `{DEVICE}`"
+    )
 
     progress(1.0, desc="Done")
-    heatmap_out = Image.fromarray(heatmap_image.astype(np.uint8)) if heatmap_image is not None else None
 
     # Build chart / table data (pandas optional)
     conf_chart = None
@@ -391,8 +340,11 @@ def process_image(
 
     return (
         Image.fromarray(det_image.astype(np.uint8)),
-        heatmap_out,
-        stats,
+        n,
+        avg_conf,
+        max_conf,
+        min_conf,
+        params_text,
         conf_chart,
         det_table,
     )
@@ -408,235 +360,23 @@ _THEME = gr.themes.Soft(
     neutral_hue="gray",
     font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
     font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace", "monospace"],
-).set(
-    button_primary_background_fill="*primary_500",
-    button_primary_background_fill_hover="*primary_600",
-    button_primary_text_color="white",
-    block_label_text_weight="600",
-    block_title_text_weight="700",
 )
 
-CSS = """
-/* ── Global container ──────────────────────────────────────── */
-.gradio-container {
-    max-width: 1200px !important;
-    margin: 0 auto !important;
-}
-
-/* ── Hero banner ────────────────────────────────────────────── */
-.elefind-hero {
-    background: linear-gradient(135deg, #064e3b 0%, #065f46 40%, #0d9488 100%);
-    border-radius: 16px;
-    padding: 32px 40px;
-    margin-bottom: 8px;
-    color: white;
-    position: relative;
-    overflow: hidden;
-}
-.elefind-hero::before {
-    content: "🐘";
-    position: absolute;
-    right: 32px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 80px;
-    opacity: 0.18;
-}
-.elefind-hero h1 {
-    font-size: 2rem !important;
-    font-weight: 800 !important;
-    margin: 0 0 6px 0 !important;
-    color: white !important;
-}
-.elefind-hero p {
-    font-size: 1rem;
-    opacity: 0.88;
-    margin: 0;
-    max-width: 640px;
-}
-.elefind-hero .badge {
-    display: inline-block;
-    background: rgba(255,255,255,0.15);
-    border: 1px solid rgba(255,255,255,0.3);
-    border-radius: 20px;
-    padding: 2px 12px;
-    font-size: 0.75rem;
-    margin-right: 6px;
-    margin-top: 12px;
-}
-
-/* ── Stat cards ──────────────────────────────────────────────── */
-.stat-cards {
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-    margin: 4px 0;
-}
-.stat-card {
-    flex: 1;
-    min-width: 120px;
-    background: var(--background-fill-primary, #f9fafb);
-    border: 1px solid var(--border-color-primary, #e5e7eb);
-    border-radius: 12px;
-    padding: 16px 20px;
-    text-align: center;
-}
-.stat-card .value {
-    font-size: 2rem;
-    font-weight: 800;
-    color: #065f46;
-    line-height: 1;
-    display: block;
-}
-.stat-card .label {
-    font-size: 0.78rem;
-    color: var(--body-text-color-subdued, #6b7280);
-    margin-top: 4px;
-    display: block;
-}
-.stat-card.highlight .value { color: #0d9488; }
-
-/* ── Param card ──────────────────────────────────────────────── */
-.param-card {
-    background: var(--background-fill-secondary, #f3f4f6);
-    border-radius: 10px;
-    padding: 12px 16px;
-    margin-top: 8px;
-    font-size: 0.85rem;
-    line-height: 1.8;
-}
-.param-card strong { color: #065f46; }
-
-/* ── Tips box ────────────────────────────────────────────────── */
-.tips-box {
-    background: #ecfdf5;
-    border-left: 4px solid #10b981;
-    border-radius: 0 8px 8px 0;
-    padding: 10px 14px;
-    font-size: 0.84rem;
-    line-height: 1.7;
-    color: #064e3b;
-}
-
-/* ── Tab active indicator ──────────────────────────────────── */
-.gradio-tabs .tab-nav button.selected {
-    border-bottom-color: #10b981 !important;
-    color: #065f46 !important;
-    font-weight: 700 !important;
-}
-
-/* ── About accordion ──────────────────────────────────────── */
-.about-section { font-size: 0.88rem; line-height: 1.7; }
-.about-section a { color: #10b981; }
-
-/* ── Hide empty heatmap placeholder ──────────────────────── */
-.heatmap-placeholder {
-    background: var(--background-fill-secondary, #f3f4f6);
-    border-radius: 12px;
-    padding: 48px 24px;
-    text-align: center;
-    color: var(--body-text-color-subdued, #9ca3af);
-    font-size: 0.9rem;
-}
-"""
-
-# ---------------------------------------------------------------------------
-# Helper: build stats HTML
-# ---------------------------------------------------------------------------
-def _stats_html(predictions: list[dict], w: int, h: int, slice_size: int,
-                overlap_ratio: float, conf_threshold: float,
-                iou_threshold: float) -> str:
-    n = len(predictions)
-    avg_conf = sum(p["confidence"] for p in predictions) / n if n else 0.0
-    max_conf = max((p["confidence"] for p in predictions), default=0.0)
-    min_conf = min((p["confidence"] for p in predictions), default=0.0)
-
-    if n > 0:
-        cards_html = f"""
-        <div class="stat-cards">
-          <div class="stat-card">
-            <span class="value">{n}</span>
-            <span class="label">Elephants<br>Detected</span>
-          </div>
-          <div class="stat-card highlight">
-            <span class="value">{avg_conf:.0%}</span>
-            <span class="label">Average<br>Confidence</span>
-          </div>
-          <div class="stat-card">
-            <span class="value">{max_conf:.0%}</span>
-            <span class="label">Highest<br>Confidence</span>
-          </div>
-          <div class="stat-card">
-            <span class="value">{min_conf:.0%}</span>
-            <span class="label">Lowest<br>Confidence</span>
-          </div>
-        </div>
-        """
-        conf_list = ", ".join(f'<code>{p["confidence"]:.0%}</code>' for p in predictions[:20])
-        if n > 20:
-            conf_list += f" <em>+ {n - 20} more</em>"
-        det_detail = f"""
-        <p style="margin:12px 0 4px; font-size:0.85rem; color:var(--body-text-color-subdued)">
-          Individual confidences: {conf_list}
-        </p>
-        """
-    else:
-        cards_html = """
-        <div class="stat-cards">
-          <div class="stat-card">
-            <span class="value">0</span>
-            <span class="label">Elephants<br>Detected</span>
-          </div>
-        </div>
-        <p style="margin:12px 0 4px; color:#6b7280; font-size:0.88rem;">
-          No elephants found — try lowering the confidence threshold or upload
-          an aerial image with visible elephants.
-        </p>
-        """
-        det_detail = ""
-
-    param_html = f"""
-    <div class="param-card">
-      <strong>Parameters used</strong><br>
-      Slice&nbsp;{int(slice_size)}&thinsp;×&thinsp;{int(slice_size)}&nbsp;px
-      &nbsp;·&nbsp; Overlap&nbsp;{overlap_ratio:.0%}
-      &nbsp;·&nbsp; Confidence&nbsp;≥&nbsp;{conf_threshold:.0%}
-      &nbsp;·&nbsp; IoU&nbsp;{iou_threshold:.0%}
-      &nbsp;·&nbsp; Image&nbsp;{w}&thinsp;×&thinsp;{h}&nbsp;px
-      &nbsp;·&nbsp; Device&nbsp;<code>{DEVICE}</code>
-    </div>
-    """
-
-    return cards_html + det_detail + param_html
-
-
-# ---------------------------------------------------------------------------
-# Updated process_image (returns 5 outputs)
-# ---------------------------------------------------------------------------
 def build_ui() -> gr.Blocks:
-    """Construct the Gradio Blocks interface (Gradio 6.x)."""
+    """Construct the Gradio Blocks interface."""
 
     with gr.Blocks(
-        css=CSS,
         theme=_THEME,
         title="EleFind – Aerial Elephant Detection",
         fill_width=False,
     ) as demo:
 
         # ── Hero banner ─────────────────────────────────────────────────────
-        gr.HTML(
-            """
-            <div class="elefind-hero">
-              <h1>🐘 EleFind</h1>
-              <p>Aerial elephant detection powered by <strong>YOLOv11 + SAHI</strong>
-                 (Slicing Aided Hyper Inference). Upload a drone or satellite image
-                 and get instant detection results with XAI heatmaps.</p>
-              <span class="badge">YOLOv11</span>
-              <span class="badge">SAHI</span>
-              <span class="badge">XAI Heatmaps</span>
-              <span class="badge">Conservation AI</span>
-            </div>
-            """
+        gr.Markdown(
+            "# EleFind\n\n"
+            "Aerial elephant detection powered by **YOLOv11 + SAHI** "
+            "(Slicing Aided Hyper Inference). Upload a drone or satellite image "
+            "and get instant detection results."
         )
 
         # ── Main two-column layout ─────────────────────────────────────────
@@ -650,11 +390,10 @@ def build_ui() -> gr.Blocks:
                     type="pil",
                     sources=["upload", "clipboard"],
                     show_fullscreen_button=True,
-                    show_download_button=False,
                     height=320,
                 )
 
-                with gr.Accordion("⚙️ SAHI Detection Parameters", open=False):
+                with gr.Accordion("SAHI Detection Parameters", open=False):
                     conf_slider = gr.Slider(
                         minimum=0.05,
                         maximum=0.95,
@@ -688,29 +427,12 @@ def build_ui() -> gr.Blocks:
                         info="Suppress duplicate boxes above this overlap",
                     )
 
-                heatmap_toggle = gr.Checkbox(
-                    label="Generate XAI Density Heatmap",
-                    value=False,
-                    info="Overlay a Gaussian density map on the detection image",
-                )
-
                 detect_btn = gr.Button(
-                    "🔍 Detect Elephants",
+                    "Detect Elephants",
                     variant="primary",
                     size="lg",
                 )
 
-                gr.HTML(
-                    """
-                    <div class="tips-box">
-                      <strong>Tips for best results</strong><br>
-                      • Use high-resolution aerial / drone images (≥ 4K)<br>
-                      • Optimal source resolution: ~5472 × 3648 px<br>
-                      • Lower confidence threshold → more detections (noisier)<br>
-                      • Increase slice size for larger, spread-out herds
-                    </div>
-                    """
-                )
 
             # ── RIGHT: Output tabs ────────────────────────────────────────
             with gr.Column(scale=6, min_width=400):
@@ -718,43 +440,38 @@ def build_ui() -> gr.Blocks:
                 with gr.Tabs() as result_tabs:
 
                     # ── Tab 1: Detection image ────────────────────────────
-                    with gr.Tab("📷 Detections", id="tab_det"):
+                    with gr.Tab("Detections", id="tab_det"):
                         detection_output = gr.Image(
                             label="Annotated detections",
                             type="pil",
                             interactive=False,
-                            show_fullscreen_button=True,
                             show_download_button=True,
-                            height=420,
-                        )
-
-                    # ── Tab 2: XAI Heatmap ────────────────────────────────
-                    with gr.Tab("🌡️ XAI Heatmap", id="tab_hm"):
-                        heatmap_output = gr.Image(
-                            label="Gaussian density heatmap",
-                            type="pil",
-                            interactive=False,
                             show_fullscreen_button=True,
-                            show_download_button=True,
                             height=420,
                         )
-                        gr.HTML(
-                            """
-                            <p style="font-size:0.8rem; color:#6b7280; margin:4px 0 0;">
-                              Enable <em>Generate XAI Density Heatmap</em> in the left panel
-                              then run detection to see the heatmap.
-                            </p>
-                            """
-                        )
 
-                    # ── Tab 3: Statistics ─────────────────────────────────
-                    with gr.Tab("📊 Statistics", id="tab_stats"):
-                        stats_html_out = gr.HTML(
-                            value="<p style='color:#9ca3af;padding:24px;text-align:center;'>"
-                                  "Run detection to see statistics.</p>"
-                        )
+                    # ── Tab 2: Statistics ─────────────────────────────────
+                    with gr.Tab("Statistics", id="tab_stats"):
+                        with gr.Row():
+                            stat_count = gr.Number(
+                                label="Elephants Detected", value=0,
+                                interactive=False,
+                            )
+                            stat_avg = gr.Number(
+                                label="Avg Confidence", value=0.0,
+                                interactive=False, precision=2,
+                            )
+                            stat_max = gr.Number(
+                                label="Highest Confidence", value=0.0,
+                                interactive=False, precision=2,
+                            )
+                            stat_min = gr.Number(
+                                label="Lowest Confidence", value=0.0,
+                                interactive=False, precision=2,
+                            )
+                        params_md = gr.Markdown()
 
-                        with gr.Accordion("📋 Detection Table", open=True):
+                        with gr.Accordion("Detection Table", open=True):
                             det_table_out = gr.Dataframe(
                                 headers=["ID", "Confidence", "BBox (x1,y1,x2,y2)",
                                          "Width (px)", "Height (px)"],
@@ -763,7 +480,7 @@ def build_ui() -> gr.Blocks:
                                 wrap=True,
                             )
 
-                        with gr.Accordion("📈 Confidence Chart", open=True):
+                        with gr.Accordion("Confidence Chart", open=True):
                             if _PANDAS:
                                 conf_chart_out = gr.BarPlot(
                                     value=_EMPTY_CHART,
@@ -786,70 +503,37 @@ def build_ui() -> gr.Blocks:
         example_dir = Path(__file__).parent / "examples"
         example_files = sorted(example_dir.glob("*.jpg")) if example_dir.exists() else []
         if example_files:
-            with gr.Accordion("🖼️ Example Aerial Images", open=True):
+            with gr.Accordion("Example Aerial Images", open=True):
                 gr.Examples(
                     examples=[[str(f)] for f in example_files],
                     inputs=[input_image],
                     label=None,
                 )
 
-        # ── About accordion ────────────────────────────────────────────────
-        with gr.Accordion("ℹ️ About EleFind", open=False):
-            gr.HTML(
-                """
-                <div class="about-section">
-                  <p><strong>EleFind</strong> is an undergraduate research project for
-                  automated elephant detection in aerial imagery to support wildlife
-                  conservation efforts.</p>
-                  <ul>
-                    <li><strong>Model:</strong> YOLOv11 trained on sliced 1024 × 1024
-                        aerial patches</li>
-                    <li><strong>Inference:</strong> SAHI – tiled inference for
-                        high-resolution images without GPU memory overflow</li>
-                    <li><strong>XAI:</strong> Gaussian density heatmaps highlight
-                        detection hotspot areas</li>
-                    <li><strong>Performance:</strong> Precision&nbsp;53.2 %
-                        &nbsp;|&nbsp; Recall&nbsp;49.1 %
-                        &nbsp;|&nbsp; F1&nbsp;51.0 %</li>
-                  </ul>
-                  <p>
-                    <a href="https://github.com/helithalochana/EleFind-gradio-ui"
-                       target="_blank">GitHub Repository</a>
-                    &nbsp;·&nbsp;
-                    <a href="https://huggingface.co/iamhelitha/EleFind-yolo11-elephant"
-                       target="_blank">Model on HuggingFace</a>
-                  </p>
-                </div>
-                """
-            )
-
         # ── Event wiring ───────────────────────────────────────────────────
         _outputs = [
             detection_output,
-            heatmap_output,
-            stats_html_out,
+            stat_count,
+            stat_avg,
+            stat_max,
+            stat_min,
+            params_md,
             conf_chart_out,
             det_table_out,
         ]
 
-        def _run(image, conf, ssize, overlap, iou, hm, progress=gr.Progress()):
-            det_img, heatmap_img, raw_stats, conf_data, table_data = process_image(
-                image, conf, ssize, overlap, iou, hm, progress
-            )
-            return det_img, heatmap_img, raw_stats, conf_data, table_data
-
         detect_btn.click(
-            fn=_run,
+            fn=process_image,
             inputs=[
                 input_image,
                 conf_slider,
                 slice_slider,
                 overlap_slider,
                 iou_slider,
-                heatmap_toggle,
             ],
             outputs=_outputs,
             concurrency_limit=1,
+            api_name="detect",
         )
 
     return demo

docs/api-usage.md

@@ -0,0 +1,242 @@
+# EleFind API Usage
+
+EleFind exposes a detection endpoint through Gradio's built-in API. The Space is publicly accessible — no authentication is required.
+
+**Base URL:** `https://iamhelitha-elefind-gradio-ui.hf.space`
+
+---
+
+## Endpoint
+
+### `POST /call/detect`
+
+Submits an image for elephant detection. Returns an `event_id` used to retrieve results.
+
+**Request**
+
+```http
+POST /call/detect
+Content-Type: application/json
+
+{
+  "data": [
+    { "path": "https://example.com/aerial-image.jpg" },
+    0.30,
+    1024,
+    0.30,
+    0.40
+  ]
+}
+```
+
+**Parameters (positional, in `data` array)**
+
+| Index | Name | Type | Default | Range | Description |
+|-------|------|------|---------|-------|-------------|
+| 0 | `image` | URL or file path | required | — | Aerial image to analyse |
+| 1 | `conf_threshold` | float | `0.30` | 0.05 – 0.95 | Minimum detection confidence |
+| 2 | `slice_size` | int | `1024` | 256 – 2048 | SAHI tile size in pixels |
+| 3 | `overlap_ratio` | float | `0.30` | 0.05 – 0.50 | Tile overlap fraction |
+| 4 | `iou_threshold` | float | `0.40` | 0.10 – 0.80 | NMS IoU threshold |
+
+**Response**
+
+```json
+{ "event_id": "abc123xyz" }
+```
+
+---
+
+### `GET /call/detect/{event_id}`
+
+Streams results for a submitted job using Server-Sent Events (SSE).
+
+```http
+GET /call/detect/abc123xyz
+```
+
+The stream emits events until a `complete` event is received:
+
+```
+event: generating
+data: null
+
+event: complete
+data: [<detection_image>, <count>, <avg_confidence>, <max_confidence>, <min_confidence>, <params_text>, <conf_chart>, <det_table>]
+```
+
+**Output fields (positional)**
+
+| Index | Field | Type | Description |
+|-------|-------|------|-------------|
+| 0 | `detection_image` | object | Annotated image `{ path, url, size, orig_name }` |
+| 1 | `count` | int | Number of elephants detected |
+| 2 | `avg_confidence` | float | Average detection confidence (0.0 – 1.0) |
+| 3 | `max_confidence` | float | Highest single detection confidence |
+| 4 | `min_confidence` | float | Lowest single detection confidence |
+| 5 | `params_text` | string | Markdown summary of inference parameters |
+| 6 | `conf_chart` | object / null | Per-elephant confidence data (pandas DataFrame as JSON) |
+| 7 | `det_table` | object / null | Full detection table with bounding boxes |
+
+---
+
+## Using the JavaScript client (recommended for React / Next.js)
+
+Install the official Gradio client:
+
+```bash
+npm install @gradio/client
+```
+
+### Basic usage
+
+```javascript
+import { Client, handle_file } from "@gradio/client";
+
+async function detectElephants(imageFile, options = {}) {
+  const client = await Client.connect("iamhelitha/EleFind-gradio-ui");
+
+  const result = await client.predict("/detect", {
+    image:          handle_file(imageFile),       // File or Blob object
+    conf_threshold: options.conf    ?? 0.30,
+    slice_size:     options.slice   ?? 1024,
+    overlap_ratio:  options.overlap ?? 0.30,
+    iou_threshold:  options.iou     ?? 0.40,
+  });
+
+  const [
+    detectionImage,
+    count,
+    avgConfidence,
+    maxConfidence,
+    minConfidence,
+    paramsText,
+    confChart,
+    detTable,
+  ] = result.data;
+
+  return { detectionImage, count, avgConfidence, maxConfidence, minConfidence };
+}
+```
+
+### React component example
+
+```jsx
+import { useState } from "react";
+import { Client, handle_file } from "@gradio/client";
+
+export default function ElephantDetector() {
+  const [result, setResult] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    const file = e.target.image.files[0];
+    if (!file) return;
+
+    setLoading(true);
+    try {
+      const client = await Client.connect("iamhelitha/EleFind-gradio-ui");
+      const { data } = await client.predict("/detect", {
+        image:          handle_file(file),
+        conf_threshold: 0.30,
+        slice_size:     1024,
+        overlap_ratio:  0.30,
+        iou_threshold:  0.40,
+      });
+
+      setResult({
+        imageUrl:  data[0].url,
+        count:     data[1],
+        avgConf:   data[2],
+      });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input type="file" name="image" accept="image/*" />
+      <button type="submit" disabled={loading}>
+        {loading ? "Detecting..." : "Detect Elephants"}
+      </button>
+      {result && (
+        <div>
+          <p>Elephants found: {result.count}</p>
+          <p>Avg confidence: {(result.avgConf * 100).toFixed(1)}%</p>
+          <img src={result.imageUrl} alt="Detection result" />
+        </div>
+      )}
+    </form>
+  );
+}
+```
+
+---
+
+## Using curl (testing / server-side)
+
+### Step 1 — Submit the job
+
+```bash
+curl -X POST https://iamhelitha-elefind-gradio-ui.hf.space/call/detect \
+  -H "Content-Type: application/json" \
+  -d '{
+    "data": [
+      { "path": "https://example.com/aerial-image.jpg" },
+      0.30,
+      1024,
+      0.30,
+      0.40
+    ]
+  }'
+```
+
+Response:
+```json
+{ "event_id": "abc123xyz" }
+```
+
+### Step 2 — Stream the result
+
+```bash
+curl -N https://iamhelitha-elefind-gradio-ui.hf.space/call/detect/abc123xyz
+```
+
+---
+
+## Using the Python client
+
+```bash
+pip install gradio_client
+```
+
+```python
+from gradio_client import Client, handle_file
+
+client = Client("iamhelitha/EleFind-gradio-ui")
+
+result = client.predict(
+    image=handle_file("/path/to/aerial-image.jpg"),
+    conf_threshold=0.30,
+    slice_size=1024,
+    overlap_ratio=0.30,
+    iou_threshold=0.40,
+    api_name="/detect",
+)
+
+detection_image, count, avg_conf, max_conf, min_conf, params, chart, table = result
+print(f"Elephants detected: {count}")
+print(f"Average confidence: {avg_conf:.1%}")
+```
+
+---
+
+## Notes
+
+- **CORS:** Gradio Spaces allow requests from any origin, including browser-side JavaScript on Vercel or other external domains.
+- **Rate limits:** The Space runs on CPU (free tier). Inference on a large image can take 30–120 seconds. Set appropriate timeouts in your client.
+- **Concurrency:** The Space processes one request at a time (`concurrency_limit=1`, queue `max_size=10`). Requests beyond the queue limit will be rejected.
+- **Image size:** Images larger than 6000 px on the longest edge are automatically downscaled before inference.
+- **Interactive docs:** Visit `https://iamhelitha-elefind-gradio-ui.hf.space` and click "Use via API" in the footer to see the live API reference.