backend changes

app.py

@@ -1,3 +1,4 @@
+
 """
 app.py
 
@@ -11,22 +12,20 @@ Endpoints:
 Usage:
     uvicorn app:app --host 0.0.0.0 --port 8000 --reload
 
-The server loads the best model weights and label encoder from models/
-on startup. Set HF_REPO_ID env var to pull weights from HuggingFace Hub
-instead of local disk.
+Environment variables:
+    HF_REPO_ID      — HuggingFace model repo to pull weights from
+    PI_URL          — Raspberry Pi server URL e.g. http://192.168.1.42:5000
 """
 
-import io
 import json
 import os
 import tempfile
 from pathlib import Path
 from typing import Optional
 
+import httpx
 import joblib
-import librosa
 import numpy as np
-import torch
 import uvicorn
 from fastapi import FastAPI, File, HTTPException, UploadFile
 from fastapi.middleware.cors import CORSMiddleware
@@ -48,6 +47,9 @@ from scripts.model import EfficientNetModel
 MODELS_DIR  = Path("models")
 CONFIG_PATH = MODELS_DIR / "model_config.json"
 
+# ── Pi config — set PI_URL env var to enable Pi notifications ─────────────────
+PI_URL = os.getenv("PI_URL")   # e.g. "http://192.168.1.42:5000"
+
 # ── App ────────────────────────────────────────────────────────────────────────
 app = FastAPI(
     title="Warbler — Bird Audio Classifier",
@@ -57,43 +59,38 @@ app = FastAPI(
 
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"],   # tighten for production
+    allow_origins=["*"],
     allow_methods=["*"],
     allow_headers=["*"],
 )
 
-# ── Global model state (loaded once at startup) ────────────────────────────────
-_model:   Optional[EfficientNetModel] = None
-_le                                   = None
-_config:  Optional[dict]              = None
+# ── Global model state ─────────────────────────────────────────────────────────
+_model:  Optional[EfficientNetModel] = None
+_le                                  = None
+_config: Optional[dict]              = None
 
 
 def _load_from_hub(repo_id: str) -> None:
     """
-    Download model artifacts from a HuggingFace Hub model repository.
+    Download model artifacts from HuggingFace Hub.
 
     Args:
-        repo_id: HuggingFace repo string, e.g. 'username/warbler-bird-classifier'.
+        repo_id: e.g. 'mg643/chirp_model'
     """
     from huggingface_hub import hf_hub_download
-    files = ["efficientnet_best.pt", "label_encoder.pkl", "model_config.json"]
+
     MODELS_DIR.mkdir(parents=True, exist_ok=True)
-    for filename in files:
+    for filename in ["efficientnet_best.pt", "label_encoder.pkl", "model_config.json"]:
         dest = MODELS_DIR / filename
         if not dest.exists():
-            print(f"Downloading {filename}...")
+            print(f"Downloading {filename} from {repo_id}…")
             path = hf_hub_download(repo_id=repo_id, filename=filename)
             dest.write_bytes(Path(path).read_bytes())
 
 
 @app.on_event("startup")
 def load_model() -> None:
-    """
-    Load model weights, label encoder, and config at server startup.
-
-    Pulls from HuggingFace Hub if HF_REPO_ID env var is set;
-    otherwise loads from local models/ directory.
-    """
+    """Load model weights, label encoder, and config at server startup."""
     global _model, _le, _config
 
     hf_repo = "mg643/chirp_model"
@@ -101,9 +98,7 @@ def load_model() -> None:
         _load_from_hub(hf_repo)
 
     if not CONFIG_PATH.exists():
-        raise RuntimeError(
-            "model_config.json not found. Run setup.py or set HF_REPO_ID."
-        )
+        raise RuntimeError("model_config.json not found. Run setup.py or set HF_REPO_ID.")
 
     with open(CONFIG_PATH) as f:
         _config = json.load(f)
@@ -111,11 +106,11 @@ def load_model() -> None:
     _le    = joblib.load(MODELS_DIR / "label_encoder.pkl")
     _model = EfficientNetModel.load(num_classes=_config["num_classes"], models_dir=MODELS_DIR)
 
-    print(f"Model loaded: {_config['best_model']}  |  {_config['num_classes']} classes")
+    pi_status = f"Pi notifications → {PI_URL}" if PI_URL else "Pi notifications → disabled (set PI_URL)"
+    print(f"Model loaded: {_config['best_model']} | {_config['num_classes']} classes")
+    print(pi_status)
 
 
-# ── Helper ─────────────────────────────────────────────────────────────────────
-
 def _preprocess_audio(audio_bytes: bytes) -> tuple[np.ndarray, np.ndarray]:
     """
     Decode uploaded audio bytes and extract MFCC + mel spectrogram features.
@@ -124,7 +119,7 @@ def _preprocess_audio(audio_bytes: bytes) -> tuple[np.ndarray, np.ndarray]:
         audio_bytes: Raw bytes of any librosa-supported audio format.
 
     Returns:
-        Tuple of (mfcc_vector, mel_spectrogram) as numpy arrays.
+        Tuple of (mfcc_vector, mel_spectrogram).
     """
     with tempfile.NamedTemporaryFile(suffix=".ogg", delete=False) as tmp:
         tmp.write(audio_bytes)
@@ -135,20 +130,47 @@ def _preprocess_audio(audio_bytes: bytes) -> tuple[np.ndarray, np.ndarray]:
     finally:
         Path(tmp_path).unlink(missing_ok=True)
 
-    mfcc = extract_mfcc(audio)
-    mel  = compute_mel_spectrogram(audio)
-    return mfcc, mel
+    return extract_mfcc(audio), compute_mel_spectrogram(audio)
+
+
+async def _notify_pi(species_code: str, common_name: str, confidence: float) -> None:
+    """
+    Fire-and-forget POST to the Raspberry Pi server.
+    Fails silently so Pi issues never break the main prediction response.
+
+    Args:
+        species_code: BirdCLEF 6-letter code e.g. 'norcar'
+        common_name:  Human-readable name e.g. 'Northern Cardinal'
+        confidence:   Model confidence 0–1
+    """
+    if not PI_URL:
+        return
+
+    payload = {
+        "species_code": species_code,
+        "common_name":  common_name,
+        "confidence":   confidence,
+    }
+
+    try:
+        async with httpx.AsyncClient(timeout=3.0) as client:
+            res = await client.post(f"{PI_URL}/bird", json=payload)
+            print(f"Pi notified: {res.status_code}")
+    except Exception as exc:
+        # Log but never raise — Pi being offline shouldn't break predictions
+        print(f"Pi notification failed (continuing): {exc}")
 
 
 # ── Routes ─────────────────────────────────────────────────────────────────────
 
 @app.get("/health")
 def health() -> dict:
-    """Liveness check — returns model name and class count."""
+    """Liveness check."""
     return {
-        "status": "ok",
-        "model":  _config["best_model"] if _config else "not loaded",
+        "status":  "ok",
+        "model":   _config["best_model"] if _config else "not loaded",
         "classes": _config["num_classes"] if _config else 0,
+        "pi":      PI_URL ?? "not configured",
     }
 
 
@@ -170,9 +192,7 @@ async def predict(file: UploadFile = File(...), top_k: int = 3) -> dict:
         top_k: Number of top predictions to return (default 3).
 
     Returns:
-        JSON with top-K predictions, each containing:
-          - species_code  : BirdCLEF species label (e.g. 'norcar')
-          - confidence    : Softmax probability (0–1)
+        JSON with top-K predictions plus top species name and confidence.
     """
     if _model is None:
         raise HTTPException(status_code=503, detail="Model not loaded.")
@@ -186,10 +206,8 @@ async def predict(file: UploadFile = File(...), top_k: int = 3) -> dict:
     except Exception as exc:
         raise HTTPException(status_code=422, detail=f"Audio processing failed: {exc}")
 
-    # Run inference — mel shape must be (1, N_MELS, T)
-    probs      = _model.predict_proba(mel[np.newaxis])  # (1, num_classes)
-    probs_flat = probs[0]
-
+    # Run inference
+    probs_flat = _model.predict_proba(mel[np.newaxis])[0]
     top_k      = min(top_k, len(_le.classes_))
     top_idx    = np.argsort(probs_flat)[::-1][:top_k]
 
@@ -201,15 +219,26 @@ async def predict(file: UploadFile = File(...), top_k: int = 3) -> dict:
         for i in top_idx
     ]
 
+    top_species = predictions[0]["species_code"]
+    top_conf    = predictions[0]["confidence"]
+
+    # Look up common name from config classes list (species_code IS the label here)
+    # Notify Pi asynchronously — does not block response
+    await _notify_pi(
+        species_code=top_species,
+        common_name=top_species,   # replace with a lookup dict if you have common names
+        confidence=top_conf,
+    )
+
     return {
-        "predictions":  predictions,
-        "model":        _config["best_model"],
-        "top_species":  predictions[0]["species_code"],
-        "confidence":   predictions[0]["confidence"],
+        "predictions": predictions,
+        "model":       _config["best_model"],
+        "top_species": top_species,
+        "confidence":  top_conf,
     }
 
 
 # ── Entry point ────────────────────────────────────────────────────────────────
 
 if __name__ == "__main__":
-    uvicorn.run("app:app", host="0.0.0.0", port=8000, reload=True)
+    uvicorn.run("app:app", host="0.0.0.0", port=8000, reload=True)

frontend/src/App.jsx

@@ -1,49 +1,69 @@
 import React, { useState, useCallback } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
-import Header       from './components/Header'
+import Header        from './components/Header'
 import AudioUploader from './components/AudioUploader'
-import Spectrogram  from './components/Spectrogram'
-import BirdResult   from './components/BirdResult'
-import RangeMap     from './components/RangeMap'
-import { mockPredict, MOCK_BIRDS, SAMPLE_AUDIOS } from './data/mockData'
+import Spectrogram   from './components/Spectrogram'
+import BirdResult    from './components/BirdResult'
+import RangeMap      from './components/RangeMap'
+import { enrichResult } from './data/mockData'
 import { useSpectrogram } from './hooks/useSpectrogram'
 import styles from './App.module.css'
 
+const API_URL = 'https://mg643-chirp.hf.space'
+
 export default function App() {
-  const [audioSelection, setAudioSelection] = useState(null)  // { file, sampleId }
+  const [audioSelection, setAudioSelection] = useState(null)
   const [isLoading,      setIsLoading]      = useState(false)
   const [result,         setResult]         = useState(null)
+  const [error,          setError]          = useState(null)
 
   const { spectrogramUrl, generateSpectrogram, isGenerating } = useSpectrogram()
 
-  const handleAudioSelected = useCallback((selection) => {
+  const handleAudioSelected = useCallback(async (selection) => {
     setAudioSelection(selection)
     setResult(null)
-    // Generate spectrogram if a real file was uploaded
+    setError(null)
+
     if (selection.file) {
       generateSpectrogram(selection.file)
+    } else if (selection.sampleId) {
+      try {
+        const res  = await fetch(`/samples/${selection.sampleId}.ogg`)
+        const blob = await res.blob()
+        generateSpectrogram(new File([blob], `${selection.sampleId}.ogg`, { type: 'audio/ogg' }))
+      } catch (err) {
+        console.warn('Spectrogram generation failed for sample:', err)
+      }
     }
   }, [generateSpectrogram])
 
   const handleIdentify = useCallback(async () => {
     if (!audioSelection) return
     setIsLoading(true)
+    setError(null)
 
     try {
-      // Determine which mock bird to return
-      const sampleId = audioSelection.sampleId
-        ?? SAMPLE_AUDIOS[Math.floor(Math.random() * SAMPLE_AUDIOS.length)].id
-
-      // ── Replace mockPredict() with real API call when backend is ready ──
-      // const res = await fetch('http://localhost:8000/predict', {
-      //   method: 'POST',
-      //   body: formData,
-      // })
-      // const data = await res.json()
-      const data = await mockPredict(sampleId)
-      setResult(data)
+      let audioFile = audioSelection.file
+      if (!audioFile && audioSelection.sampleId) {
+        const res  = await fetch(`/samples/${audioSelection.sampleId}.ogg`)
+        const blob = await res.blob()
+        audioFile  = new File([blob], `${audioSelection.sampleId}.ogg`, { type: 'audio/ogg' })
+      }
+
+      const formData = new FormData()
+      formData.append('file', audioFile)
+
+      const res = await fetch(`${API_URL}/predict?top_k=3`, {
+        method: 'POST',
+        body:   formData,
+      })
+      if (!res.ok) throw new Error(`API ${res.status}: ${res.statusText}`)
+
+      const data = await res.json()
+      setResult(enrichResult(data))
     } catch (err) {
-      console.error('Prediction failed:', err)
+      console.error('Identify failed:', err)
+      setError('Could not reach the identification service. Please try again.')
     } finally {
       setIsLoading(false)
     }
@@ -53,7 +73,6 @@ export default function App() {
 
   return (
     <div className={styles.page}>
-      {/* Decorative background blobs */}
       <div className={styles.blob1} />
       <div className={styles.blob2} />
 
@@ -61,7 +80,7 @@ export default function App() {
         <Header />
 
         <main className={styles.main}>
-          {/* Left panel — always visible */}
+          {/* ── Left panel ── */}
           <motion.div
             className={styles.leftPanel}
             initial={{ opacity: 0, x: -20 }}
@@ -71,8 +90,8 @@ export default function App() {
             <div className={styles.panelCard}>
               <p className={styles.panelTitle}>Listen & Identify</p>
               <p className={styles.panelSub}>
-                Upload a bird call recording or try one of our curated samples.
-                Chirp will identify the species in seconds.
+                Upload a bird call recording or try our sample.
+                Chirp identifies the species in seconds.
               </p>
 
               <div className={styles.divider} />
@@ -82,7 +101,6 @@ export default function App() {
                 isLoading={isLoading}
               />
 
-              {/* Wire up identify button here */}
               {hasAudio && !isLoading && !result && (
                 <motion.button
                   className={styles.identifyBtn}
@@ -102,9 +120,13 @@ export default function App() {
                   <p>Analysing audio…</p>
                 </div>
               )}
+
+              {error && (
+                <p className={styles.errorMsg}>{error}</p>
+              )}
             </div>
 
-            {/* Spectrogram below uploader */}
+            {/* Spectrogram */}
             <AnimatePresence>
               {(spectrogramUrl || isGenerating) && (
                 <motion.div
@@ -119,7 +141,7 @@ export default function App() {
             </AnimatePresence>
           </motion.div>
 
-          {/* Right panel — results */}
+          {/* ── Right panel ── */}
           <AnimatePresence mode="wait">
             {!result ? (
               <motion.div
@@ -132,17 +154,13 @@ export default function App() {
                 <div className={styles.placeholderInner}>
                   <div className={styles.birdIllustration}>
                     <svg viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      {/* Simple elegant bird silhouette */}
                       <ellipse cx="52" cy="42" rx="22" ry="14" fill="var(--mauve-200)" />
                       <circle cx="74" cy="34" r="10" fill="var(--mauve-200)" />
                       <ellipse cx="30" cy="46" rx="18" ry="8" fill="var(--mauve-100)" transform="rotate(-15 30 46)" />
                       <ellipse cx="68" cy="56" rx="14" ry="5" fill="var(--mauve-100)" transform="rotate(10 68 56)" />
-                      {/* Eye */}
                       <circle cx="78" cy="31" r="2.5" fill="var(--ink)" />
                       <circle cx="79" cy="30" r="0.8" fill="white" />
-                      {/* Beak */}
                       <path d="M83 34 L92 36 L83 37 Z" fill="var(--gold)" />
-                      {/* Branch */}
                       <path d="M10 65 Q60 60 110 68" stroke="var(--beige-300)" strokeWidth="2.5" strokeLinecap="round" fill="none" />
                     </svg>
                   </div>
@@ -166,7 +184,6 @@ export default function App() {
                   commonName={result.commonName}
                   color={result.color}
                 />
-
                 <button
                   className={styles.resetBtn}
                   onClick={() => { setResult(null); setAudioSelection(null) }}

frontend/src/components/Header.jsx

@@ -11,11 +11,11 @@ export default function Header() {
       transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
     >
       <div className={styles.logo}>
-        <span className={styles.logoIcon}>𝄞</span>
+        <img src="/logo.png" alt="Chirp logo" className={styles.logoImg} />
         <span className={styles.logoText}>chirp!</span>
       </div>
       <p className={styles.tagline}>your birdwatching companion</p>
       <div className={styles.divider} />
     </motion.header>
   )
-}
+}

frontend/src/components/Header.module.css

@@ -40,3 +40,9 @@
   background: var(--mauve-200);
   margin: 1.5rem auto 0;
 }
+
+.logoImg {
+  height: 100px;
+  width: auto;
+  object-fit: contain;
+}

frontend/src/components/RangeMap.jsx

@@ -1,32 +1,31 @@
-import React, { useEffect } from 'react'
+/**
+ * src/components/RangeMap.jsx
+ * Renders a Leaflet map with a range circle centered on the species' known habitat.
+ */
+
+import React, { useEffect, useState } from 'react'
 import { motion } from 'framer-motion'
 import styles from './RangeMap.module.css'
 
-// Lazy-load Leaflet to avoid SSR issues
-let L, MapContainer, TileLayer, Circle, Popup
-
-async function loadLeaflet() {
-  if (typeof window === 'undefined') return false
-  L = await import('leaflet')
-  const rl = await import('react-leaflet')
-  MapContainer = rl.MapContainer
-  TileLayer    = rl.TileLayer
-  Circle       = rl.Circle
-  Popup        = rl.Popup
-  return true
-}
-
 export default function RangeMap({ range, commonName, color }) {
-  const [ready, setReady] = React.useState(false)
+  const [ready,        setReady]        = useState(false)
+  const [MapContainer, setMapContainer] = useState(null)
+  const [TileLayer,    setTileLayer]    = useState(null)
+  const [Circle,       setCircle]       = useState(null)
+  const [Popup,        setPopup]        = useState(null)
 
   useEffect(() => {
-    loadLeaflet().then(setReady)
+    import('react-leaflet').then(rl => {
+      setMapContainer(() => rl.MapContainer)
+      setTileLayer(() => rl.TileLayer)
+      setCircle(() => rl.Circle)
+      setPopup(() => rl.Popup)
+      setReady(true)
+    })
   }, [])
 
   if (!range) return null
 
-  const { center, description } = range
-
   return (
     <motion.div
       className={styles.wrapper}
@@ -38,7 +37,7 @@ export default function RangeMap({ range, commonName, color }) {
       <div className={styles.mapContainer}>
         {ready && MapContainer ? (
           <MapContainer
-            center={center}
+            center={range.center}
             zoom={3}
             scrollWheelZoom={false}
             style={{ height: '100%', width: '100%' }}
@@ -49,23 +48,23 @@ export default function RangeMap({ range, commonName, color }) {
               url="https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png"
             />
             <Circle
-              center={center}
+              center={range.center}
               radius={800000}
               pathOptions={{
-                color: color || '#9a749a',
-                fillColor: color || '#9a749a',
+                color:       color ?? '#9a749a',
+                fillColor:   color ?? '#9a749a',
                 fillOpacity: 0.18,
-                weight: 1.5,
+                weight:      1.5,
               }}
             >
-              <Popup>{commonName} — breeding range</Popup>
+              <Popup>{commonName} — approximate range</Popup>
             </Circle>
           </MapContainer>
         ) : (
           <div className={styles.mapPlaceholder}>Loading map…</div>
         )}
       </div>
-      <p className={styles.rangeDesc}>{description}</p>
+      <p className={styles.rangeDesc}>{range.description}</p>
     </motion.div>
   )
 }

frontend/src/data/mockData.js

@@ -1,113 +1,145 @@
-// Mock bird data for dummy backend responses
-// Replace with real API calls when backend is connected
+/**
+ * src/data/mockData.js
+ *
+ * - SAMPLE_AUDIOS: single test.ogg sample in public/samples/
+ * - BIRD_FACTS:    static enrichment data keyed by BirdCLEF species code
+ * - enrichResult:  merges API response with local facts for the result panel
+ */
 
-export const MOCK_BIRDS = {
-  'westan': {
-    commonName: 'Western Tanager',
-    scientificName: 'Piranga ludoviciana',
-    confidence: 0.87,
-    family: 'Cardinalidae',
-    habitat: 'Coniferous and mixed forests',
-    diet: 'Insects, berries, and fruit',
-    funFacts: [
-      'Males sport a brilliant red head with yellow and black body — one of North America\'s most colorful birds.',
-      'Despite their tropical appearance, Western Tanagers breed across western North America and migrate to Central America.',
-      'Their song is a burry, robin-like phrase often described as "pit-er-ick".',
-    ],
-    range: {
-      center: [45.5, -116.0],
-      description: 'Western North America, from Alaska south to Mexico during breeding season.',
-    },
-    topPredictions: [
-      { name: 'Western Tanager', confidence: 0.87 },
-      { name: 'American Robin',  confidence: 0.08 },
-      { name: 'Varied Thrush',   confidence: 0.05 },
-    ],
-    wikiImage: 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/thirty/Piranga_ludoviciana_-_Western_Tanager.jpg/480px-Piranga_ludoviciana_-_Western_Tanager.jpg',
-    color: '#c9a84c',
+// ── Sample audio files (place .ogg files in public/samples/) ─────────────────
+export const SAMPLE_AUDIOS = [
+  {
+    id:          'test',
+    label:       'Sample Recording',
+    description: 'Test bird call — North America',
+    file:        '/samples/test.ogg',
+    emoji:       '🎵',
   },
-  'norcar': {
-    commonName: 'Northern Cardinal',
+]
+
+// ── Static enrichment data keyed by BirdCLEF species code ────────────────────
+export const BIRD_FACTS = {
+  norcar: {
+    commonName:     'Northern Cardinal',
     scientificName: 'Cardinalis cardinalis',
-    confidence: 0.92,
-    family: 'Cardinalidae',
-    habitat: 'Woodlands, gardens, shrublands',
-    diet: 'Seeds, fruit, and insects',
+    family:         'Cardinalidae',
+    habitat:        'Woodlands, gardens, shrublands',
+    diet:           'Seeds, fruit, and insects',
     funFacts: [
-      'The male\'s brilliant red plumage comes from carotenoid pigments in its diet.',
+      "The male's brilliant red plumage comes from carotenoid pigments in its diet.",
       'Unlike most songbirds, female Northern Cardinals also sing — a rare trait among North American birds.',
       'They are non-migratory and often visit backyard feeders year-round.',
     ],
     range: {
-      center: [37.0, -85.0],
+      center:      [37.0, -85.0],
       description: 'Eastern and central North America, from southern Canada to Mexico.',
     },
-    topPredictions: [
-      { name: 'Northern Cardinal', confidence: 0.92 },
-      { name: 'House Finch',       confidence: 0.05 },
-      { name: 'Purple Finch',      confidence: 0.03 },
-    ],
     wikiImage: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Cardinalis_cardinalis_-_20070909.jpg/480px-Cardinalis_cardinalis_-_20070909.jpg',
     color: '#c4714a',
   },
-  'baleag': {
-    commonName: 'Bald Eagle',
+  westan: {
+    commonName:     'Western Tanager',
+    scientificName: 'Piranga ludoviciana',
+    family:         'Cardinalidae',
+    habitat:        'Coniferous and mixed forests',
+    diet:           'Insects, berries, and fruit',
+    funFacts: [
+      "Males sport a brilliant red head with yellow and black body — one of North America's most colorful birds.",
+      'Despite their tropical appearance, Western Tanagers breed across western North America.',
+      'Their song is a burry, robin-like phrase often described as "pit-er-ick".',
+    ],
+    range: {
+      center:      [45.5, -116.0],
+      description: 'Western North America, from Alaska south to Mexico during breeding season.',
+    },
+    wikiImage: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Piranga_ludoviciana_-Western_Tanager.jpg/480px-Piranga_ludoviciana_-Western_Tanager.jpg',
+    color: '#c9a84c',
+  },
+  baleag: {
+    commonName:     'Bald Eagle',
     scientificName: 'Haliaeetus leucocephalus',
-    confidence: 0.78,
-    family: 'Accipitridae',
-    habitat: 'Coasts, rivers, large lakes',
-    diet: 'Fish, waterfowl, small mammals',
+    family:         'Accipitridae',
+    habitat:        'Coasts, rivers, large lakes',
+    diet:           'Fish, waterfowl, small mammals',
     funFacts: [
-      'Bald Eagles can spot a fish from nearly two miles away thanks to eyesight four times sharper than humans.',
-      'Their iconic white head and tail don\'t appear until they reach maturity at age 4–5.',
-      'A Bald Eagle\'s nest, called an eyrie, can weigh over a ton after years of additions.',
+      'Bald Eagles can spot a fish from nearly two miles away.',
+      "Their iconic white head and tail don't appear until they reach maturity at age 4–5.",
+      "A Bald Eagle's nest can weigh over a ton after years of additions.",
     ],
     range: {
-      center: [55.0, -105.0],
+      center:      [55.0, -105.0],
       description: 'Across North America, especially near large bodies of open water.',
     },
-    topPredictions: [
-      { name: 'Bald Eagle',     confidence: 0.78 },
-      { name: 'Osprey',         confidence: 0.14 },
-      { name: 'Golden Eagle',   confidence: 0.08 },
-    ],
     wikiImage: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Bald_Eagle_Portrait.jpg/480px-Bald_Eagle_Portrait.jpg',
     color: '#7a9e7e',
   },
+  amecro: {
+    commonName:     'American Crow',
+    scientificName: 'Corvus brachyrhynchos',
+    family:         'Corvidae',
+    habitat:        'Open woodland, fields, urban areas',
+    diet:           'Omnivore — insects, seeds, carrion, small animals',
+    funFacts: [
+      'American Crows are among the most intelligent birds — they use tools and recognize human faces.',
+      'They form large communal roosts in winter, sometimes numbering in the millions.',
+      'Crows remember and hold grudges against specific humans who have threatened them.',
+    ],
+    range: {
+      center:      [42.0, -95.0],
+      description: 'Throughout North America except the far north and desert southwest.',
+    },
+    wikiImage: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/American-Crow.jpg/480px-American-Crow.jpg',
+    color: '#4a3a4a',
+  },
 }
 
-export const SAMPLE_AUDIOS = [
-  {
-    id: 'westan',
-    label: 'Western Tanager',
-    description: 'Coniferous forest, Pacific Northwest',
-    file: '/samples/western_tanager.ogg',
-    emoji: '🟡',
-  },
-  {
-    id: 'norcar',
-    label: 'Northern Cardinal',
-    description: 'Backyard garden, Eastern US',
-    file: '/samples/northern_cardinal.ogg',
-    emoji: '🔴',
-  },
-  {
-    id: 'baleag',
-    label: 'Bald Eagle',
-    description: 'Lakeside at dawn, Pacific Northwest',
-    file: '/samples/bald_eagle.ogg',
-    emoji: '🟤',
+// ── Default fallback for unknown species codes ────────────────────────────────
+const DEFAULT_FACTS = {
+  commonName:     null,
+  scientificName: '',
+  family:         'Unknown',
+  habitat:        'North America',
+  diet:           'Varies by species',
+  funFacts: [
+    'This species was identified from its unique acoustic signature.',
+    'Bird calls are as individual as fingerprints — no two species sound alike.',
+  ],
+  range: {
+    center:      [45.0, -100.0],
+    description: 'North America',
   },
-]
+  wikiImage: null,
+  color:     '#9a749a',
+}
 
 /**
- * Simulate a backend call with a fixed delay.
- * Replace this with a real fetch() to your FastAPI backend.
+ * Merge the raw API prediction response with local enrichment facts.
  *
- * @param {string} birdId - Key into MOCK_BIRDS
- * @returns {Promise<object>} - Mock prediction result
+ * @param {object} apiResponse - Response from POST /predict
+ *   Shape: { predictions: [{species_code, confidence}], top_species, confidence, model }
+ * @returns {object} Full result object for BirdResult + RangeMap components
  */
-export async function mockPredict(birdId = 'norcar') {
-  await new Promise(r => setTimeout(r, 2200))
-  return MOCK_BIRDS[birdId] ?? MOCK_BIRDS['norcar']
+export function enrichResult(apiResponse) {
+  const { predictions, top_species, confidence } = apiResponse
+  const facts      = BIRD_FACTS[top_species] ?? DEFAULT_FACTS
+  const commonName = facts.commonName ?? top_species
+
+  const topPredictions = predictions.map(p => ({
+    name:       BIRD_FACTS[p.species_code]?.commonName ?? p.species_code,
+    confidence: p.confidence,
+  }))
+
+  return {
+    commonName,
+    scientificName: facts.scientificName ?? '',
+    confidence,
+    family:         facts.family,
+    habitat:        facts.habitat,
+    diet:           facts.diet,
+    funFacts:       facts.funFacts,
+    range:          facts.range,
+    wikiImage:      facts.wikiImage,
+    color:          facts.color,
+    topPredictions,
+  }
 }

requirements.txt

@@ -22,3 +22,4 @@ huggingface_hub==0.21.3
 # Utilities
 tqdm==4.66.2
 kaggle==1.6.6
+httpx==0.27.0