Hugging Face's logo

Spaces:
MoShow
/
mnt
Running

App Files Community
MoShow commited on
Commit
3caa6e5
·
verified ·
1 Parent(s): d6b8d42

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1108 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mnt
3
- emoji: 📊
4
- colorFrom: yellow
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mnt
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1108 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Hub - Environmental & Rodent Monitoring</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
9
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
10
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+ <style>
13
+ .map-container {
14
+ height: 500px;
15
+ z-index: 10;
16
+ }
17
+ .cesium-container {
18
+ height: 500px;
19
+ z-index: 10;
20
+ }
21
+ .sidebar {
22
+ height: calc(100vh - 64px);
23
+ overflow-y: auto;
24
+ }
25
+ .animated-panel {
26
+ transition: all 0.3s ease;
27
+ }
28
+ .animated-panel:hover {
29
+ transform: translateY(-5px);
30
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
31
+ }
32
+ .notification-dot {
33
+ position: absolute;
34
+ top: -5px;
35
+ right: -5px;
36
+ width: 15px;
37
+ height: 15px;
38
+ background-color: #ef4444;
39
+ border-radius: 50%;
40
+ }
41
+ .blink {
42
+ animation: blink-animation 1.5s steps(5, start) infinite;
43
+ }
44
+ @keyframes blink-animation {
45
+ to {
46
+ opacity: 0.3;
47
+ }
48
+ }
49
+ .radar-bg {
50
+ background: radial-gradient(circle, rgba(59,130,246,0.1) 0%, rgba(59,130,246,0) 70%);
51
+ }
52
+ .dark-radar-bg {
53
+ background: radial-gradient(circle, rgba(37,99,235,0.1) 0%, rgba(37,99,235,0) 70%);
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200">
58
+ <header class="bg-white dark:bg-gray-800 shadow-md fixed top-0 left-0 right-0 z-50">
59
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
60
+ <div class="flex items-center space-x-2">
61
+ <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center text-white">
62
+ <i class="fas fa-brain text-xl"></i>
63
+ </div>
64
+ <h1 class="text-xl font-bold">AI Hub <span class="text-sm text-indigo-600 dark:text-indigo-400">by MoStar Industries</span></h1>
65
+ </div>
66
+ <div class="flex items-center space-x-4">
67
+ <div class="relative">
68
+ <button id="notifications-btn" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 relative">
69
+ <i class="fas fa-bell text-xl"></i>
70
+ <div class="notification-dot blink"></div>
71
+ </button>
72
+ <div id="notifications-panel" class="hidden absolute right-0 mt-2 w-72 bg-white dark:bg-gray-800 rounded-md shadow-lg z-50 py-1 border border-gray-200 dark:border-gray-700">
73
+ <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
74
+ <h3 class="font-semibold">Notifications</h3>
75
+ </div>
76
+ <div class="max-h-64 overflow-y-auto">
77
+ <div class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer">
78
+ <div class="flex items-start">
79
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center">
80
+ <i class="fas fa-exclamation text-red-600 dark:text-red-300"></i>
81
+ </div>
82
+ <div class="ml-3">
83
+ <p class="text-sm font-medium">High risk cluster detected in Lagos State</p>
84
+ <p class="text-xs text-gray-500 dark:text-gray-400">5 min ago</p>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ <div class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer">
89
+ <div class="flex items-start">
90
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
91
+ <i class="fas fa-chart-line text-blue-600 dark:text-blue-300"></i>
92
+ </div>
93
+ <div class="ml-3">
94
+ <p class="text-sm font-medium">New temporal pattern identified</p>
95
+ <p class="text-xs text-gray-500 dark:text-gray-400">12 min ago</p>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ <div class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer">
100
+ <div class="flex items-start">
101
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
102
+ <i class="fas fa-tasks text-green-600 dark:text-green-300"></i>
103
+ </div>
104
+ <div class="ml-3">
105
+ <p class="text-sm font-medium">Model retraining completed (F1: 0.94)</p>
106
+ <p class="text-xs text-gray-500 dark:text-gray-400">25 min ago</p>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ <div class="px-4 py-2 border-t border-gray-200 dark:border-gray-700 text-center">
112
+ <a href="#" class="text-sm text-indigo-600 dark:text-indigo-400 font-medium">View all</a>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">
117
+ <i id="theme-icon" class="fas fa-moon text-xl"></i>
118
+ </button>
119
+ <div class="relative">
120
+ <button id="user-menu-btn" class="flex items-center space-x-2 p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">
121
+ <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center text-white text-sm font-semibold">AD</div>
122
+ </button>
123
+ <div id="user-menu" class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-50 py-1 border border-gray-200 dark:border-gray-700">
124
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Profile</a>
125
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a>
126
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Log out</a>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </header>
132
+
133
+ <div class="flex pt-16">
134
+ <!-- Sidebar -->
135
+ <aside class="bg-white dark:bg-gray-800 shadow-md w-64 flex-shrink-0 sidebar hidden md:block">
136
+ <div class="px-4 py-6">
137
+ <div class="mb-6">
138
+ <h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-4">Navigation</h2>
139
+ <nav>
140
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md bg-indigo-50 dark:bg-gray-700 text-indigo-700 dark:text-indigo-300">
141
+ <i class="fas fa-tachometer-alt text-indigo-500 dark:text-indigo-400 mr-3"></i>
142
+ Dashboard
143
+ </a>
144
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1">
145
+ <i class="fas fa-map-marked-alt text-blue-500 dark:text-blue-400 mr-3"></i>
146
+ Geospatial Analysis
147
+ </a>
148
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1">
149
+ <i class="fas fa-chart-line text-green-500 dark:text-green-400 mr-3"></i>
150
+ Temporal Analysis
151
+ </a>
152
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1">
153
+ <i class="fas fa-robot text-purple-500 dark:text-purple-400 mr-3"></i>
154
+ Predictive Models
155
+ </a>
156
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1">
157
+ <i class="fas fa-camera text-yellow-500 dark:text-yellow-400 mr-3"></i>
158
+ Image Detection
159
+ </a>
160
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1">
161
+ <i class="fas fa-database text-red-500 dark:text-red-400 mr-3"></i>
162
+ Data Management
163
+ </a>
164
+ </nav>
165
+ </div>
166
+
167
+ <div class="mb-6">
168
+ <h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-4">Quick Access</h2>
169
+ <nav>
170
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
171
+ <i class="fas fa-radar text-indigo-500 dark:text-indigo-400 mr-3"></i>
172
+ Habitat Radar
173
+ </a>
174
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1">
175
+ <i class="fas fa-bolt text-yellow-500 dark:text-yellow-400 mr-3"></i>
176
+ Risk Alerts
177
+ </a>
178
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1">
179
+ <i class="fas fa-question-circle text-blue-500 dark:text-blue-400 mr-3"></i>
180
+ RAG Assistant
181
+ </a>
182
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1">
183
+ <i class="fas fa-chalkboard-teacher text-purple-500 dark:text-purple-400 mr-3"></i>
184
+ Model Training
185
+ </a>
186
+ </nav>
187
+ </div>
188
+
189
+ <div class="mb-6">
190
+ <h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-4">Monitoring</h2>
191
+ <div class="space-y-1">
192
+ <div class="flex items-center justify-between px-3 py-2 text-sm rounded-md text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-gray-700">
193
+ <span>System Status</span>
194
+ <span class="text-green-500">Online</span>
195
+ </div>
196
+ <div class="flex items-center justify-between px-3 py-2 text-sm rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
197
+ <span>API Connections</span>
198
+ <span class="text-green-500">7/7</span>
199
+ </div>
200
+ <div class="flex items-center justify-between px-3 py-2 text-sm rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
201
+ <span>Data Latency</span>
202
+ <span class="text-green-500">98 ms</span>
203
+ </div>
204
+ <div class="flex items-center justify-between px-3 py-2 text-sm rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
205
+ <span>Model Accuracy</span>
206
+ <span class="text-green-500">92.7%</span>
207
+ </div>
208
+ </div>
209
+ </div>
210
+
211
+ <div class="p-4 bg-indigo-50 dark:bg-gray-700 rounded-lg">
212
+ <h3 class="text-sm font-medium mb-2">Data Collection</h3>
213
+ <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
214
+ <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 83%"></div>
215
+ </div>
216
+ <p class="text-xs mt-2 text-gray-500 dark:text-gray-300">83% of daily target collected</p>
217
+ <button class="mt-2 w-full bg-indigo-600 hover:bg-indigo-700 text-white py-1 px-3 rounded-md text-sm font-medium transition-colors">
218
+ <i class="fas fa-upload mr-1"></i> Submit Data
219
+ </button>
220
+ </div>
221
+ </div>
222
+ </aside>
223
+
224
+ <!-- Mobile sidebar button -->
225
+ <button id="mobile-sidebar-btn" class="md:hidden fixed bottom-4 right-4 z-40 bg-indigo-600 text-white p-3 rounded-full shadow-lg hover:bg-indigo-700 transition-colors">
226
+ <i class="fas fa-bars text-xl"></i>
227
+ </button>
228
+
229
+ <!-- Mobile sidebar -->
230
+ <aside id="mobile-sidebar" class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 z-40">
231
+ <div class="fixed inset-y-0 left-0 w-64 bg-white dark:bg-gray-800 shadow-md overflow-y-auto sidebar">
232
+ <div class="px-4 py-6">
233
+ <div class="flex justify-between items-center mb-8">
234
+ <h1 class="text-xl font-bold">AI Hub</h1>
235
+ <button id="close-mobile-sidebar" class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">
236
+ <i class="fas fa-times"></i>
237
+ </button>
238
+ </div>
239
+
240
+ <div class="mb-6">
241
+ <h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-4">Navigation</h2>
242
+ <nav>
243
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md bg-indigo-50 dark:bg-gray-700 text-indigo-700 dark:text-indigo-300">
244
+ <i class="fas fa-tachometer-alt text-indigo-500 dark:text-indigo-400 mr-3"></i>
245
+ Dashboard
246
+ </a>
247
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1">
248
+ <i class="fas fa-map-marked-alt text-blue-500 dark:text-blue-400 mr-3"></i>
249
+ Geospatial Analysis
250
+ </a>
251
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1">
252
+ <i class="fas fa-chart-line text-green-500 dark:text-green-400 mr-3"></i>
253
+ Temporal Analysis
254
+ </a>
255
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1">
256
+ <i class="fas fa-robot text-purple-500 dark:text-purple-400 mr-3"></i>
257
+ Predictive Models
258
+ </a>
259
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1">
260
+ <i class="fas fa-camera text-yellow-500 dark:text-yellow-400 mr-3"></i>
261
+ Image Detection
262
+ </a>
263
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1">
264
+ <i class="fas fa-database text-red-500 dark:text-red-400 mr-3"></i>
265
+ Data Management
266
+ </a>
267
+ </nav>
268
+ </div>
269
+
270
+ <div class="mb-6">
271
+ <h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-4">Quick Access</h2>
272
+ <nav>
273
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
274
+ <i class="fas fa-radar text-indigo-500 dark:text-indigo-400 mr-3"></i>
275
+ Habitat Radar
276
+ </a>
277
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1">
278
+ <i class="fas fa-bolt text-yellow-500 dark:text-yellow-400 mr-3"></i>
279
+ Risk Alerts
280
+ </a>
281
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1">
282
+ <i class="fas fa-question-circle text-blue-500 dark:text-blue-400 mr-3"></i>
283
+ RAG Assistant
284
+ </a>
285
+ </nav>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </aside>
290
+
291
+ <!-- Main Content -->
292
+ <main class="flex-1 overflow-auto">
293
+ <div class="container mx-auto px-4 py-6">
294
+ <!-- Dashboard Header -->
295
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-6">
296
+ <div>
297
+ <h2 class="text-2xl font-bold mb-2">Environmental & Rodent Monitoring</h2>
298
+ <p class="text-gray-600 dark:text-gray-300">Real-time analysis of Mastomys Natalensis habitats and Lassa fever risk assessment</p>
299
+ </div>
300
+ <div class="mt-4 md:mt-0 flex space-x-3">
301
+ <div class="relative">
302
+ <select class="appearance-none bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
303
+ <option>Nigeria</option>
304
+ <option>Ghana</option>
305
+ <option>Benin</option>
306
+ </select>
307
+ <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
308
+ <i class="fas fa-chevron-down text-gray-400"></i>
309
+ </div>
310
+ </div>
311
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md text-sm font-medium transition-colors flex items-center">
312
+ <i class="fas fa-sync-alt mr-2"></i> Refresh Data
313
+ </button>
314
+ </div>
315
+ </div>
316
+
317
+ <!-- Stats Cards -->
318
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
319
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 animated-panel">
320
+ <div class="flex items-center justify-between">
321
+ <div>
322
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Detections Today</p>
323
+ <p class="text-2xl font-bold mt-1">142</p>
324
+ <p class="text-xs text-green-500 mt-1">
325
+ <i class="fas fa-arrow-up mr-1"></i> 12% from yesterday
326
+ </p>
327
+ </div>
328
+ <div class="h-12 w-12 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center">
329
+ <i class="fas fa-search text-indigo-600 dark:text-indigo-300 text-xl"></i>
330
+ </div>
331
+ </div>
332
+ </div>
333
+
334
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 animated-panel">
335
+ <div class="flex items-center justify-between">
336
+ <div>
337
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">High Risk Areas</p>
338
+ <p class="text-2xl font-bold mt-1">8</p>
339
+ <p class="text-xs text-red-500 mt-1">
340
+ <i class="fas fa-exclamation-circle mr-1"></i> 2 new hotspots
341
+ </p>
342
+ </div>
343
+ <div class="h-12 w-12 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center">
344
+ <i class="fas fa-radiation text-red-600 dark:text-red-300 text-xl"></i>
345
+ </div>
346
+ </div>
347
+ </div>
348
+
349
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 animated-panel">
350
+ <div class="flex items-center justify-between">
351
+ <div>
352
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Habitat Suitability</p>
353
+ <p class="text-2xl font-bold mt-1">6.8/10</p>
354
+ <p class="text-xs text-yellow-500 mt-1">
355
+ <svg class="inline mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
356
+ <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
357
+ </svg>
358
+ Similar to last week
359
+ </p>
360
+ </div>
361
+ <div class="h-12 w-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
362
+ <i class="fas fa-leaf text-green-600 dark:text-green-300 text-xl"></i>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 animated-panel">
368
+ <div class="flex items-center justify-between">
369
+ <div>
370
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Model Accuracy</p>
371
+ <p class="text-2xl font-bold mt-1">92.7%</p>
372
+ <p class="text-xs text-green-500 mt-1">
373
+ <i class="fas fa-arrow-up mr-1"></i> 1.2% improvement
374
+ </p>
375
+ </div>
376
+ <div class="h-12 w-12 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
377
+ <i class="fas fa-brain text-purple-600 dark:text-purple-300 text-xl"></i>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+
383
+ <!-- Main Dashboard Content -->
384
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
385
+ <!-- Map and Main Visualizations -->
386
+ <div class="lg:col-span-2 space-y-6">
387
+ <!-- Map Visualization -->
388
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
389
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700">
390
+ <h3 class="font-semibold flex items-center">
391
+ <i class="fas fa-map-marked-alt text-indigo-500 mr-2"></i>
392
+ Geospatial Habitat Analysis
393
+ </h3>
394
+ </div>
395
+ <div class="p-4">
396
+ <div id="map" class="map-container rounded-md"></div>
397
+ </div>
398
+ <div class="p-4 border-t border-gray-200 dark:border-gray-700 flex justify-between items-center">
399
+ <div class="flex space-x-2">
400
+ <div class="flex items-center">
401
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-1"></div>
402
+ <span class="text-xs">High Risk</span>
403
+ </div>
404
+ <div class="flex items-center">
405
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-1"></div>
406
+ <span class="text-xs">Medium Risk</span>
407
+ </div>
408
+ <div class="flex items-center">
409
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-1"></div>
410
+ <span class="text-xs">Low Risk</span>
411
+ </div>
412
+ </div>
413
+ <button class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 flex items-center">
414
+ <i class="fas fa-layer-group mr-1"></i> Layers
415
+ </button>
416
+ </div>
417
+ </div>
418
+
419
+ <!-- Temporal Analysis -->
420
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
421
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700">
422
+ <h3 class="font-semibold flex items-center">
423
+ <i class="fas fa-chart-line text-green-500 mr-2"></i>
424
+ Detection Patterns Over Time
425
+ </h3>
426
+ </div>
427
+ <div class="p-4">
428
+ <canvas id="temporalChart" height="250"></canvas>
429
+ </div>
430
+ <div class="p-4 border-t border-gray-200 dark:border-gray-700 flex justify-between items-center">
431
+ <div class="flex space-x-4">
432
+ <button class="text-xs px-2 py-1 rounded bg-indigo-50 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200">Daily</button>
433
+ <button class="text-xs px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700">Weekly</button>
434
+ <button class="text-xs px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700">Monthly</button>
435
+ </div>
436
+ <button class="text-xs text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300">
437
+ <i class="fas fa-download mr-1"></i> Export
438
+ </button>
439
+ </div>
440
+ </div>
441
+ </div>
442
+
443
+ <!-- Right Sidebar - Alerts and Results -->
444
+ <div class="space-y-6">
445
+ <!-- Risk Alerts -->
446
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
447
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700">
448
+ <h3 class="font-semibold flex items-center justify-between">
449
+ <span><i class="fas fa-exclamation-triangle text-red-500 mr-2"></i> Risk Alerts</span>
450
+ <span class="text-xs bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 px-2 py-1 rounded-full">3 New</span>
451
+ </h3>
452
+ </div>
453
+ <div class="divide-y divide-gray-200 dark:divide-gray-700 max-h-96 overflow-y-auto">
454
+ <div class="p-4 hover:bg-red-50 dark:hover:bg-red-900 cursor-pointer">
455
+ <div class="flex items-start">
456
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 dark:bg-red-800 flex items-center justify-center text-red-600 dark:text-red-300">
457
+ <i class="fas fa-radiation"></i>
458
+ </div>
459
+ <div class="ml-3">
460
+ <p class="text-sm font-medium">High risk cluster in Lagos</p>
461
+ <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">New cluster detected with 87% outbreak probability</p>
462
+ <p class="text-xs text-gray-400 mt-1">15 min ago</p>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ <div class="p-4 hover:bg-orange-50 dark:hover:bg-gray-700 cursor-pointer">
467
+ <div class="flex items-start">
468
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-orange-100 dark:bg-orange-800 flex items-center justify-center text-orange-600 dark:text-orange-300">
469
+ <i class="fas fa-chart-line"></i>
470
+ </div>
471
+ <div class="ml-3">
472
+ <p class="text-sm font-medium">Unusual movement pattern</p>
473
+ <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Detected erratic movements in Ogun State</p>
474
+ <p class="text-xs text-gray-400 mt-1">42 min ago</p>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ <div class="p-4 hover:bg-yellow-50 dark:hover:bg-gray-700 cursor-pointer">
479
+ <div class="flex items-start">
480
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 dark:bg-yellow-800 flex items-center justify-center text-yellow-600 dark:text-yellow-300">
481
+ <i class="fas fa-tint"></i>
482
+ </div>
483
+ <div class="ml-3">
484
+ <p class="text-sm font-medium">Rainfall anomaly detected</p>
485
+ <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Increased rainfall in Kano may affect habitats</p>
486
+ <p class="text-xs text-gray-400 mt-1">2 hours ago</p>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ <div class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer">
491
+ <div class="flex items-start">
492
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-800 flex items-center justify-center text-blue-600 dark:text-blue-300">
493
+ <i class="fas fa-home"></i>
494
+ </div>
495
+ <div class="ml-3">
496
+ <p class="text-sm font-medium">New habitat identified</p>
497
+ <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Potential nesting area in Rivers State</p>
498
+ <p class="text-xs text-gray-400 mt-1">5 hours ago</p>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ <div class="p-4 border-t border-gray-200 dark:border-gray-700 text-center">
504
+ <a href="#" class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 font-medium">View all alerts (12)</a>
505
+ </div>
506
+ </div>
507
+
508
+ <!-- Habitat Suitability Analysis -->
509
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
510
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700">
511
+ <h3 class="font-semibold flex items-center">
512
+ <i class="fas fa-leaf text-green-500 mr-2"></i>
513
+ Habitat Suitability
514
+ </h3>
515
+ </div>
516
+ <div class="p-4">
517
+ <div class="flex items-center justify-between mb-3">
518
+ <div class="text-sm font-medium">Lagos State</div>
519
+ <div class="text-sm font-bold text-blue-600 dark:text-blue-400">6.8/10</div>
520
+ </div>
521
+ <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
522
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 68%"></div>
523
+ </div>
524
+
525
+ <div class="flex items-center justify-between mt-4 mb-3">
526
+ <div class="text-sm font-medium">Ogun State</div>
527
+ <div class="text-sm font-bold text-green-600 dark:text-green-400">7.4/10</div>
528
+ </div>
529
+ <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
530
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 74%"></div>
531
+ </div>
532
+
533
+ <div class="flex items-center justify-between mt-4 mb-3">
534
+ <div class="text-sm font-medium">Kano State</div>
535
+ <div class="text-sm font-bold text-yellow-600 dark:text-yellow-400">5.1/10</div>
536
+ </div>
537
+ <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
538
+ <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 51%"></div>
539
+ </div>
540
+ </div>
541
+ <div class="p-4 border-t border-gray-200 dark:border-gray-700">
542
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md text-sm font-medium transition-colors">
543
+ <i class="fas fa-chart-pie mr-2"></i> Full Analysis Report
544
+ </button>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </div>
549
+
550
+ <!-- Ecosystem Analytics -->
551
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
552
+ <!-- Weather and Climate -->
553
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
554
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700">
555
+ <h3 class="font-semibold flex items-center">
556
+ <i class="fas fa-cloud-sun text-blue-500 mr-2"></i>
557
+ Weather & Climate Impact
558
+ </h3>
559
+ </div>
560
+ <div class="p-4">
561
+ <div class="grid grid-cols-3 gap-4 text-center mb-4">
562
+ <div class="p-3 rounded-lg bg-blue-50 dark:bg-blue-900">
563
+ <div class="text-2xl font-bold">28°C</div>
564
+ <div class="text-xs text-gray-500 dark:text-gray-300 mt-1">Temperature</div>
565
+ </div>
566
+ <div class="p-3 rounded-lg bg-green-50 dark:bg-green-900">
567
+ <div class="text-2xl font-bold">76%</div>
568
+ <div class="text-xs text-gray-500 dark:text-gray-300 mt-1">Humidity</div>
569
+ </div>
570
+ <div class="p-3 rounded-lg bg-purple-50 dark:bg-purple-900">
571
+ <div class="text-2xl font-bold">12mm</div>
572
+ <div class="text-xs text-gray-500 dark:text-gray-300 mt-1">Rainfall</div>
573
+ </div>
574
+ </div>
575
+ <canvas id="weatherChart" height="180"></canvas>
576
+ </div>
577
+ <div class="p-4 border-t border-gray-200 dark:border-gray-700 text-sm text-gray-600 dark:text-gray-300">
578
+ <i class="fas fa-info-circle text-indigo-500 mr-1"></i> Next 3 days expected to increase suitability scores by 1-2 points
579
+ </div>
580
+ </div>
581
+
582
+ <!-- Model Performance -->
583
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
584
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
585
+ <h3 class="font-semibold flex items-center">
586
+ <i class="fas fa-brain text-purple-500 mr-2"></i>
587
+ Model Performance
588
+ </h3>
589
+ <div class="flex space-x-2">
590
+ <button class="text-xs px-2 py-1 rounded bg-indigo-50 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200">XGBoost</button>
591
+ <button class="text-xs px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700">LSTM</button>
592
+ </div>
593
+ </div>
594
+ <div class="p-4">
595
+ <canvas id="modelChart" height="180"></canvas>
596
+ </div>
597
+ <div class="p-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-3 gap-2 text-center">
598
+ <div>
599
+ <div class="text-lg font-bold text-green-500">94%</div>
600
+ <div class="text-xs text-gray-500 dark:text-gray-300">Accuracy</div>
601
+ </div>
602
+ <div>
603
+ <div class="text-lg font-bold text-blue-500">92%</div>
604
+ <div class="text-xs text-gray-500 dark:text-gray-300">Precision</div>
605
+ </div>
606
+ <div>
607
+ <div class="text-lg font-bold text-purple-500">89%</div>
608
+ <div class="text-xs text-gray-500 dark:text-gray-300">Recall</div>
609
+ </div>
610
+ </div>
611
+ </div>
612
+ </div>
613
+
614
+ <!-- Recent Detections -->
615
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mb-6">
616
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
617
+ <h3 class="font-semibold flex items-center">
618
+ <i class="fas fa-search-location text-indigo-500 mr-2"></i>
619
+ Recent Detections
620
+ </h3>
621
+ <button class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 flex items-center">
622
+ <i class="fas fa-filter mr-1"></i> Filter
623
+ </button>
624
+ </div>
625
+ <div class="overflow-x-auto">
626
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
627
+ <thead class="bg-gray-50 dark:bg-gray-700">
628
+ <tr>
629
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Timestamp</th>
630
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Location</th>
631
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Confidence</th>
632
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Environmental Data</th>
633
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
634
+ </tr>
635
+ </thead>
636
+ <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
637
+ <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
638
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">10:23 AM</td>
639
+ <td class="px-6 py-4 whitespace-nowrap">
640
+ <div class="text-sm font-medium">Lagos (6.5244, 3.3792)</div>
641
+ </td>
642
+ <td class="px-6 py-4 whitespace-nowrap">
643
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
644
+ 98%
645
+ </span>
646
+ </td>
647
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
648
+ <div>Temp: 28°C</div>
649
+ <div>Humidity: 76%</div>
650
+ </td>
651
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
652
+ <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3">View</a>
653
+ <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Flag</a>
654
+ </td>
655
+ </tr>
656
+ <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
657
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">09:47 AM</td>
658
+ <td class="px-6 py-4 whitespace-nowrap">
659
+ <div class="text-sm font-medium">Ogun (7.1557, 3.3456)</div>
660
+ </td>
661
+ <td class="px-6 py-4 whitespace-nowrap">
662
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">
663
+ 87%
664
+ </span>
665
+ </td>
666
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
667
+ <div>Temp: 26°C</div>
668
+ <div>Humidity: 82%</div>
669
+ </td>
670
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
671
+ <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3">View</a>
672
+ <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Flag</a>
673
+ </td>
674
+ </tr>
675
+ <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
676
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">08:12 AM</td>
677
+ <td class="px-6 py-4 whitespace-nowrap">
678
+ <div class="text-sm font-medium">Kano (12.0024, 8.5923)</div>
679
+ </td>
680
+ <td class="px-6 py-4 whitespace-nowrap">
681
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
682
+ 96%
683
+ </span>
684
+ </td>
685
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
686
+ <div>Temp: 30°C</div>
687
+ <div>Humidity: 65%</div>
688
+ </td>
689
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
690
+ <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3">View</a>
691
+ <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Flag</a>
692
+ </td>
693
+ </tr>
694
+ <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
695
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">07:35 AM</td>
696
+ <td class="px-6 py-4 whitespace-nowrap">
697
+ <div class="text-sm font-medium">Rivers (4.8156, 7.0498)</div>
698
+ </td>
699
+ <td class="px-6 py-4 whitespace-nowrap">
700
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">
701
+ 82%
702
+ </span>
703
+ </td>
704
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
705
+ <div>Temp: 25°C</div>
706
+ <div>Humidity: 88%</div>
707
+ </td>
708
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
709
+ <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3">View</a>
710
+ <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Flag</a>
711
+ </td>
712
+ </tr>
713
+ </tbody>
714
+ </table>
715
+ </div>
716
+ <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
717
+ <div class="flex-1 flex justify-between sm:hidden">
718
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"> Previous </a>
719
+ <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"> Next </a>
720
+ </div>
721
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
722
+ <div>
723
+ <p class="text-sm text-gray-700 dark:text-gray-300"> Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">127</span> results </p>
724
+ </div>
725
+ <div>
726
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
727
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"> <span class="sr-only">Previous</span> <i class="fas fa-chevron-left"></i> </a>
728
+ <a href="#" aria-current="page" class="z-10 bg-indigo-50 dark:bg-indigo-900 border-indigo-500 dark:border-indigo-700 text-indigo-600 dark:text-indigo-300 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a>
729
+ <a href="#" class="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a>
730
+ <a href="#" class="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a>
731
+ <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300"> ... </span>
732
+ <a href="#" class="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 8 </a>
733
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"> <span class="sr-only">Next</span> <i class="fas fa-chevron-right"></i> </a>
734
+ </nav>
735
+ </div>
736
+ </div>
737
+ </div>
738
+ </div>
739
+
740
+ <!-- AI Assistant Panel -->
741
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mb-6">
742
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700">
743
+ <h3 class="font-semibold flex items-center">
744
+ <i class="fas fa-robot text-indigo-500 mr-2"></i>
745
+ AI Assistant - Generate Insights
746
+ </h3>
747
+ </div>
748
+ <div class="p-4">
749
+ <div class="rounded-lg border border-gray-200 dark:border-gray-700 p-4 mb-4">
750
+ <div class="flex items-start">
751
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center text-indigo-600 dark:text-indigo-300">
752
+ <i class="fas fa-robot"></i>
753
+ </div>
754
+ <div class="ml-3">
755
+ <div class="text-sm font-medium mb-1">AI Assistant</div>
756
+ <div class="text-sm bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
757
+ <p>Hello! I can help analyze trends, predict outbreaks, or explain any patterns in the data. What would you like to know?</p>
758
+ <div class="mt-2 flex flex-wrap gap-2">
759
+ <button class="text-xs px-2 py-1 rounded bg-indigo-50 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200">Trends in Lagos</button>
760
+ <button class="text-xs px-2 py-1 rounded bg-indigo-50 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200">Risk factors</button>
761
+ <button class="text-xs px-2 py-1 rounded bg-indigo-50 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200">Explain prediction</button>
762
+ </div>
763
+ </div>
764
+ </div>
765
+ </div>
766
+ </div>
767
+ <div class="relative">
768
+ <textarea id="ai-prompt" class="w-full border border-gray-300 dark:border-gray-600 rounded-md pl-4 pr-12 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700" rows="3" placeholder="Ask me anything about the data, habitats, or predictions..."></textarea>
769
+ <button id="send-prompt" class="absolute right-2 bottom-3 bg-indigo-600 hover:bg-indigo-700 text-white p-2 rounded-md">
770
+ <i class="fas fa-paper-plane"></i>
771
+ </button>
772
+ </div>
773
+ </div>
774
+ <div class="p-4 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400">
775
+ <i class="fas fa-info-circle text-indigo-500 mr-1"></i> Using DeepSeek-R1-Distill-Qwen-7B with LangChain integration
776
+ </div>
777
+ </div>
778
+ </div>
779
+ </main>
780
+ </div>
781
+
782
+ <script>
783
+ // Toggle dark/light mode
784
+ const themeToggle = document.getElementById('theme-toggle');
785
+ const themeIcon = document.getElementById('theme-icon');
786
+ const html = document.documentElement;
787
+
788
+ // Check for saved theme preference or use preferred color scheme
789
+ const currentTheme = localStorage.getItem('theme') ||
790
+ (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
791
+ html.classList.toggle('dark', currentTheme === 'dark');
792
+ themeIcon.className = currentTheme === 'dark' ? 'fas fa-sun text-xl' : 'fas fa-moon text-xl';
793
+
794
+ themeToggle.addEventListener('click', () => {
795
+ const isDark = html.classList.toggle('dark');
796
+ themeIcon.className = isDark ? 'fas fa-sun text-xl' : 'fas fa-moon text-xl';
797
+ localStorage.setItem('theme', isDark ? 'dark' : 'light');
798
+ });
799
+
800
+ // Toggle mobile sidebar
801
+ const mobileSidebarBtn = document.getElementById('mobile-sidebar-btn');
802
+ const mobileSidebar = document.getElementById('mobile-sidebar');
803
+ const closeMobileSidebar = document.getElementById('close-mobile-sidebar');
804
+
805
+ mobileSidebarBtn.addEventListener('click', () => {
806
+ mobileSidebar.classList.remove('hidden');
807
+ });
808
+
809
+ closeMobileSidebar.addEventListener('click', () => {
810
+ mobileSidebar.classList.add('hidden');
811
+ });
812
+
813
+ // Notification dropdown
814
+ const notificationsBtn = document.getElementById('notifications-btn');
815
+ const notificationsPanel = document.getElementById('notifications-panel');
816
+
817
+ notificationsBtn.addEventListener('click', (e) => {
818
+ e.stopPropagation();
819
+ notificationsPanel.classList.toggle('hidden');
820
+ });
821
+
822
+ // Close notifications when clicking elsewhere
823
+ document.addEventListener('click', () => {
824
+ if (!notificationsPanel.classList.contains('hidden')) {
825
+ notificationsPanel.classList.add('hidden');
826
+ }
827
+ });
828
+
829
+ // User menu dropdown
830
+ const userMenuBtn = document.getElementById('user-menu-btn');
831
+ const userMenu = document.getElementById('user-menu');
832
+
833
+ userMenuBtn.addEventListener('click', (e) => {
834
+ e.stopPropagation();
835
+ userMenu.classList.toggle('hidden');
836
+ });
837
+
838
+ // Close user menu when clicking elsewhere
839
+ document.addEventListener('click', () => {
840
+ if (!userMenu.classList.contains('hidden')) {
841
+ userMenu.classList.add('hidden');
842
+ }
843
+ });
844
+
845
+ // Initialize Leaflet map
846
+ const map = L.map('map').setView([9.0820, 8.6753], 6);
847
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
848
+ attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
849
+ }).addTo(map);
850
+
851
+ // Add some sample markers and clusters
852
+ const highRiskIcon = L.divIcon({
853
+ className: 'risk-icon-high',
854
+ html: '<div class="w-6 h-6 rounded-full bg-red-500 border-2 border-white flex items-center justify-center text-white text-xs font-bold shadow-lg">H</div>',
855
+ iconSize: [24, 24],
856
+ iconAnchor: [12, 12]
857
+ });
858
+
859
+ const mediumRiskIcon = L.divIcon({
860
+ className: 'risk-icon-medium',
861
+ html: '<div class="w-6 h-6 rounded-full bg-yellow-500 border-2 border-white flex items-center justify-center text-white text-xs font-bold shadow-lg">M</div>',
862
+ iconSize: [24, 24],
863
+ iconAnchor: [12, 12]
864
+ });
865
+
866
+ const lowRiskIcon = L.divIcon({
867
+ className: 'risk-icon-low',
868
+ html: '<div class="w-6 h-6 rounded-full bg-green-500 border-2 border-white flex items-center justify-center text-white text-xs font-bold shadow-lg">L</div>',
869
+ iconSize: [24, 24],
870
+ iconAnchor: [12, 12]
871
+ });
872
+
873
+ // Sample data - in a real app this would come from the API
874
+ const detectionData = [
875
+ { lat: 6.5244, lng: 3.3792, risk: 'high', confidence: 98, popup: 'Lagos Cluster - 15 detections' },
876
+ { lat: 7.1557, lng: 3.3456, risk: 'medium', confidence: 87, popup: 'Ogun Group - 8 detections' },
877
+ { lat: 12.0024, lng: 8.5923, risk: 'low', confidence: 65, popup: 'Kano Sighting - 2 detections' },
878
+ { lat: 4.8156, lng: 7.0498, risk: 'medium', confidence: 82, popup: 'Rivers Area - 5 detections' },
879
+ { lat: 10.5172, lng: 7.4333, risk: 'low', confidence: 72, popup: 'Kaduna Zone - 3 detections' },
880
+ { lat: 9.0579, lng: 7.4951, risk: 'high', confidence: 93, popup: 'Abuja Cluster - 12 detections' },
881
+ { lat: 5.1477, lng: 7.3539, risk: 'medium', confidence: 81, popup: 'Imo Group - 6 detections' }
882
+ ];
883
+
884
+ // Add markers to the map
885
+ detectionData.forEach(detection => {
886
+ let icon;
887
+ if (detection.risk === 'high') {
888
+ icon = highRiskIcon;
889
+ } else if (detection.risk === 'medium') {
890
+ icon = mediumRiskIcon;
891
+ } else {
892
+ icon = lowRiskIcon;
893
+ }
894
+
895
+ const marker = L.marker([detection.lat, detection.lng], { icon: icon })
896
+ .addTo(map)
897
+ .bindPopup(`<div class="p-1"><b>${detection.popup}</b><br>Risk: ${detection.risk}<br>Confidence: ${detection.confidence}%</div>`);
898
+ });
899
+
900
+ // Temporal Analysis Chart
901
+ const temporalCtx = document.getElementById('temporalChart').getContext('2d');
902
+ const temporalChart = new Chart(temporalCtx, {
903
+ type: 'line',
904
+ data: {
905
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
906
+ datasets: [
907
+ {
908
+ label: 'Detections 2023',
909
+ data: [45, 60, 75, 82, 90, 105, 95, 110, 98, 85, 70, 55],
910
+ borderColor: '#4f46e5',
911
+ backgroundColor: 'rgba(79, 70, 229, 0.1)',
912
+ tension: 0.3,
913
+ fill: true
914
+ },
915
+ {
916
+ label: 'Detections 2022',
917
+ data: [30, 45, 50, 65, 75, 85, 80, 90, 78, 65, 50, 40],
918
+ borderColor: '#10b981',
919
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
920
+ tension: 0.3,
921
+ fill: true,
922
+ borderDash: [5, 5]
923
+ }
924
+ ]
925
+ },
926
+ options: {
927
+ responsive: true,
928
+ plugins: {
929
+ legend: {
930
+ position: 'top',
931
+ },
932
+ tooltip: {
933
+ mode: 'index',
934
+ intersect: false,
935
+ }
936
+ },
937
+ scales: {
938
+ y: {
939
+ beginAtZero: true,
940
+ title: {
941
+ display: true,
942
+ text: 'Number of Detections'
943
+ }
944
+ },
945
+ x: {
946
+ title: {
947
+ display: true,
948
+ text: 'Month'
949
+ }
950
+ }
951
+ }
952
+ }
953
+ });
954
+
955
+ // Weather Chart
956
+ const weatherCtx = document.getElementById('weatherChart').getContext('2d');
957
+ const weatherChart = new Chart(weatherCtx, {
958
+ type: 'bar',
959
+ data: {
960
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
961
+ datasets: [
962
+ {
963
+ label: 'Rainfall (mm)',
964
+ data: [20, 40, 65, 130, 170, 185, 160, 145, 175, 150, 45, 15],
965
+ backgroundColor: 'rgba(59, 130, 246, 0.7)',
966
+ borderColor: 'rgba(59, 130, 246, 1)',
967
+ borderWidth: 1,
968
+ yAxisID: 'y'
969
+ },
970
+ {
971
+ label: 'Temperature (°C)',
972
+ data: [30, 32, 33, 32, 30, 28, 27, 27, 28, 29, 31, 31],
973
+ borderColor: 'rgba(220, 38, 38, 1)',
974
+ backgroundColor: 'rgba(220, 38, 38, 0.1)',
975
+ borderWidth: 2,
976
+ type: 'line',
977
+ yAxisID: 'y1'
978
+ }
979
+ ]
980
+ },
981
+ options: {
982
+ responsive: true,
983
+ plugins: {
984
+ legend: {
985
+ position: 'top',
986
+ },
987
+ tooltip: {
988
+ mode: 'index',
989
+ intersect: false,
990
+ }
991
+ },
992
+ scales: {
993
+ y: {
994
+ type: 'linear',
995
+ display: true,
996
+ position: 'left',
997
+ title: {
998
+ display: true,
999
+ text: 'Rainfall (mm)'
1000
+ }
1001
+ },
1002
+ y1: {
1003
+ type: 'linear',
1004
+ display: true,
1005
+ position: 'right',
1006
+ title: {
1007
+ display: true,
1008
+ text: 'Temperature (°C)'
1009
+ },
1010
+ grid: {
1011
+ drawOnChartArea: false,
1012
+ },
1013
+ min: 25,
1014
+ max: 35
1015
+ }
1016
+ }
1017
+ }
1018
+ });
1019
+
1020
+ // Model Performance Chart
1021
+ const modelCtx = document.getElementById('modelChart').getContext('2d');
1022
+ const modelChart = new Chart(modelCtx, {
1023
+ type: 'radar',
1024
+ data: {
1025
+ labels: ['Accuracy', 'Precision', 'Recall', 'F1 Score', 'Specificity', 'ROC AUC'],
1026
+ datasets: [
1027
+ {
1028
+ label: 'XGBoost',
1029
+ data: [94, 92, 89, 90, 93, 95],
1030
+ backgroundColor: 'rgba(124, 58, 237, 0.2)',
1031
+ borderColor: 'rgba(124, 58, 237, 1)',
1032
+ borderWidth: 2
1033
+ },
1034
+ {
1035
+ label: 'Random Forest',
1036
+ data: [89, 87, 84, 85, 88, 90],
1037
+ backgroundColor: 'rgba(16, 185, 129, 0.2)',
1038
+ borderColor: 'rgba(16, 185, 129, 1)',
1039
+ borderWidth: 2
1040
+ }
1041
+ ]
1042
+ },
1043
+ options: {
1044
+ responsive: true,
1045
+ plugins: {
1046
+ legend: {
1047
+ position: 'top',
1048
+ }
1049
+ },
1050
+ scales: {
1051
+ r: {
1052
+ angleLines: {
1053
+ display: true
1054
+ },
1055
+ suggestedMin: 70,
1056
+ suggestedMax: 100
1057
+ }
1058
+ }
1059
+ }
1060
+ });
1061
+
1062
+ // Simulate AI assistant response
1063
+ const aiPrompt = document.getElementById('ai-prompt');
1064
+ const sendPrompt = document.getElementById('send-prompt');
1065
+
1066
+ sendPrompt.addEventListener('click', () => {
1067
+ const question = aiPrompt.value.trim();
1068
+ if (question) {
1069
+ // In a real app, this would call the LangChain API
1070
+ console.log(`Sending to AI: ${question}`);
1071
+ aiPrompt.value = '';
1072
+
1073
+ // Simulate response
1074
+ setTimeout(() => {
1075
+ const responsePanel = document.querySelector('.rounded-lg.border');
1076
+ const responseDiv = document.createElement('div');
1077
+ responseDiv.className = 'flex items-start mt-4';
1078
+ responseDiv.innerHTML = `
1079
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center text-indigo-600 dark:text-indigo-300">
1080
+ <i class="fas fa-robot"></i>
1081
+ </div>
1082
+ <div class="ml-3">
1083
+ <div class="text-sm font-medium mb-1">AI Assistant</div>
1084
+ <div class="text-sm bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
1085
+ <p>Based on the recent data, I've detected an increasing trend in Lagos detections (+18% from last month).
1086
+ The primary factors contributing to this increase appear to be higher rainfall and vegetation density,
1087
+ which create ideal habitat conditions for Mastomys Natalensis.</p>
1088
+ <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
1089
+ <i class="fas fa-info-circle text-indigo-500 mr-1"></i> Confidence: 89% | Sources: MNTRK API, OpenWeather, Cesium
1090
+ </div>
1091
+ </div>
1092
+ </div>
1093
+ `;
1094
+ responsePanel.appendChild(responseDiv);
1095
+ }, 1000);
1096
+ }
1097
+ });
1098
+
1099
+ // Press Enter to send message
1100
+ aiPrompt.addEventListener('keypress', (e) => {
1101
+ if (e.key === 'Enter' && !e.shiftKey) {
1102
+ e.preventDefault();
1103
+ sendPrompt.click();
1104
+ }
1105
+ });
1106
+ </script>
1107
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MoShow/mnt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1108
+ </html>
prompts.txt ADDED
File without changes