barry/Wildlife-Detection
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

yellowstone

Browse Source
This commit is contained in:
everbarry 2026-03-19 13:35:40 +01:00
parent c300289aec
commit eed4d3cf00
5 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -1,8 +1,8 @@
# Wildlife Monitoring Dashboard — Nationaal Park De Hoge Veluwe
# Wildlife Monitoring Dashboard — Yellowstone National Park
A real-time wildlife camera-trap monitoring dashboard powered by an EfficientNet V2-S classifier and multiple Explainable AI (XAI) methods. Built for the 0HM340 Human-AI Interaction assignment.
The dashboard simulates a live feed of camera-trap detections across five locations in [Nationaal Park De Hoge Veluwe](https://hogeveluwe.nl/), classifying images into seven species (bear, deer, fox, hare, moose, person, wolf) and providing interactive explanations of each prediction.
The dashboard simulates a live feed of camera-trap detections across five locations in [Yellowstone National Park](https://www.nps.gov/yell/), classifying images into seven species (bear, deer, fox, hare, moose, person, wolf) and providing interactive explanations of each prediction.
## Prerequisites
@ -55,7 +55,7 @@ The server starts at **http://localhost:5000**.
assignment-HAI/
├── dashboard.py # Flask application (main entry point)
├── train.py # Standalone training script
├── map.webp # Park map background image
├── yellowstone-camping-map.jpg # Park map background image
├── pyproject.toml # Project metadata and dependencies
├── uv.lock # Locked dependency versions
├── .python-version # Python version pin (3.13)

2
USER_GUIDE.md
View File

@ -5,7 +5,7 @@ This guide explains how to use the Wildlife Monitoring Dashboard as an end user
## Home Page — Live Map
The home page shows a fullscreen map of Nationaal Park De Hoge Veluwe with five camera locations marked as blue dots. Each dot represents a physical camera trap deployed in the park.
The home page shows a fullscreen map of Yellowstone National Park with five camera locations marked as blue dots. Each dot represents a physical camera trap deployed in the park.
### Live Camera Feed

34
dashboard.py
View File

@ -1,5 +1,5 @@
"""
Wildlife Monitoring Dashboard — Nationaal Park De Hoge Veluwe
Wildlife Monitoring Dashboard — Yellowstone National Park
Flask app with two pages:
/ – fullscreen map with camera markers + togglable sidebar
@ -48,16 +48,16 @@ XAI_DIR.mkdir(exist_ok=True)
# Camera positions as percentages of the map image (adjust to match map.webp)
CAMERAS = {
"CAM-01": {"name": "Hubertus Trail", "px": 50, "py": 15,
"desc": "Northern forest near Jachthuis Sint Hubertus"},
"CAM-02": {"name": "Otterlo Gate", "px": 25, "py": 38,
"desc": "Western entrance, deciduous woodland"},
"CAM-03": {"name": "Kröller-Müller", "px": 42, "py": 48,
"desc": "Central area near the museum"},
"CAM-04": {"name": "Hoenderloo Path", "px": 72, "py": 32,
"desc": "Eastern forest corridor"},
"CAM-05": {"name": "Deelense Veld", "px": 55, "py": 68,
"desc": "Southern heathland near Schaarsbergen"},
"CAM-01": {"name": "Lamar Valley", "px": 65, "py": 17,
"desc": "Northeast corridor, prime wolf and bison territory"},
"CAM-02": {"name": "Hayden Valley", "px": 48, "py": 38,
"desc": "Central meadows between canyon and lake"},
"CAM-03": {"name": "Mammoth Hot Springs", "px": 28, "py": 12,
"desc": "Northern range, year-round elk habitat"},
"CAM-04": {"name": "Old Faithful", "px": 24, "py": 54,
"desc": "Upper Geyser Basin, forested southwest"},
"CAM-05": {"name": "Yellowstone Lake", "px": 55, "py": 48,
"desc": "Eastern shoreline, moose and waterfowl corridor"},
}
SPECIES_ICON = {
@ -384,9 +384,9 @@ def api_detections():
return jsonify(detections)
@app.route("/map.webp")
@app.route("/map.jpg")
def serve_map():
return send_from_directory(".", "map.webp")
return send_from_directory(".", "yellowstone-camping-map.jpg")
@app.route("/xai/<det_id>/<filename>")
@ -401,7 +401,7 @@ HOME_HTML = r"""<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>De Hoge Veluwe — Wildlife Monitor</title>
<title>Yellowstone — Wildlife Monitor</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,-apple-system,sans-serif;overflow:hidden;height:100vh;background:#0f172a}
@ -550,12 +550,12 @@ body{font-family:system-ui,-apple-system,sans-serif;overflow:hidden;height:100vh
</head>
<body>
<div id="title"><h1>Nationaal Park De Hoge Veluwe</h1><p>Wildlife Camera Monitoring</p></div>
<div id="title"><h1>Yellowstone National Park</h1><p>Wildlife Camera Monitoring</p></div>
<!-- map -->
<div id="map-outer">
<div id="map-wrap">
<img id="map-img" src="/map.webp" alt="Park map" draggable="false">
<img id="map-img" src="/map.jpg" alt="Park map" draggable="false">
{% for cid, c in cameras.items() %}
<a href="/cam/{{ cid }}" class="cam-marker" id="mk-{{ cid }}" style="left:{{ c.px }}%;top:{{ c.py }}%"></a>
<div class="cam-label" style="left:{{ c.px }}%;top:calc({{ c.py }}% - 18px)">{{ cid }} &middot; {{ c.name }}</div>
@ -757,7 +757,7 @@ DETAIL_HTML = r"""<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Detection {{ det.id }} — De Hoge Veluwe</title>
<title>Detection {{ det.id }} — Yellowstone</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2e8f0;line-height:1.5}

BIN
map.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 133 KiB

BIN
yellowstone-camping-map.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB