Hugging Face's logo

Spaces:
Perception365
/
UrbanFlow
Running

App Files Community
Subh775 commited on
Commit
0bdf61b
·
1 Parent(s): a14a412

nav fix; setting icon change; pcu card placement; gradcam gradients..

Browse files
Files changed (6) hide show
  1. backend/server.py +5 -2
  2. backend/visualize.py +1 -1
  3. frontend/initial.html +4 -9
  4. frontend/js/initial.js +3 -1
  5. frontend/js/vehicles.js +20 -14
  6. frontend/vehicles.html +16 -32
backend/server.py CHANGED
@@ -68,6 +68,11 @@ def index():
68
  return FileResponse(FRONTEND / "initial.html")
69
 
70
 
 
 
 
 
 
71
  @app.post("/upload")
72
  async def upload(file: UploadFile = File(...)):
73
  video_id = str(uuid.uuid4())[:8]
@@ -411,8 +416,6 @@ async def ws_run(ws: WebSocket):
411
  pass
412
 
413
 
414
- from fastapi.staticfiles import StaticFiles
415
-
416
  class SmartCacheStaticFiles(StaticFiles):
417
  def is_not_modified(self, response_headers, request_headers) -> bool:
418
  return False
 
68
  return FileResponse(FRONTEND / "initial.html")
69
 
70
 
71
+ @app.get("/vehicles.html")
72
+ def vehicles():
73
+ return FileResponse(FRONTEND / "vehicles.html")
74
+
75
+
76
  @app.post("/upload")
77
  async def upload(file: UploadFile = File(...)):
78
  video_id = str(uuid.uuid4())[:8]
 
416
  pass
417
 
418
 
 
 
419
  class SmartCacheStaticFiles(StaticFiles):
420
  def is_not_modified(self, response_headers, request_headers) -> bool:
421
  return False
backend/visualize.py CHANGED
@@ -186,7 +186,7 @@ def spatial_heatmap(heatmap_points, video_path, out_dir, fmt="png"):
186
  for pt in heatmap_points:
187
  cx, cy = int(pt[0]), int(pt[1])
188
  if 0 <= cx < w and 0 <= cy < h:
189
- cv2.circle(density, (cx, cy), 15, 1.0, -1)
190
 
191
  density = cv2.GaussianBlur(density, (75, 75), 0)
192
 
 
186
  for pt in heatmap_points:
187
  cx, cy = int(pt[0]), int(pt[1])
188
  if 0 <= cx < w and 0 <= cy < h:
189
+ density[cy, cx] += 1.0
190
 
191
  density = cv2.GaussianBlur(density, (75, 75), 0)
192
 
frontend/initial.html CHANGED
@@ -2,17 +2,12 @@
2
  <html lang="en">
3
 
4
  <head>
5
- <!-- SPA Bootstrap: load dashboard without changing URL -->
6
  <script>
7
  if (sessionStorage.getItem('funky_run')) {
8
- document.documentElement.style.display = 'none';
9
- fetch('vehicles.html')
10
- .then(function (r) { return r.text(); })
11
- .then(function (html) {
12
- document.open();
13
- document.write(html);
14
- document.close();
15
- });
16
  }
17
  </script>
18
  <meta charset="UTF-8">
 
2
  <html lang="en">
3
 
4
  <head>
5
+ <!-- SPA Router: go to vehicles dashboard if run data is pending -->
6
  <script>
7
  if (sessionStorage.getItem('funky_run')) {
8
+ // Direct navigation — eliminates the document.write white-flash glitch.
9
+ // vehicles.html has bg-black on <body>, so the browser paints dark immediately.
10
+ window.location.replace('vehicles.html');
 
 
 
 
 
11
  }
12
  </script>
13
  <meta charset="UTF-8">
frontend/js/initial.js CHANGED
@@ -278,7 +278,9 @@ function startRun() {
278
  config: runConfig
279
  }));
280
  sessionStorage.setItem('uf_active_tab', 'settings');
281
- window.location.href = './';
 
 
282
  }
283
 
284
  // =============================================
 
278
  config: runConfig
279
  }));
280
  sessionStorage.setItem('uf_active_tab', 'settings');
281
+ // Navigate directly to vehicles.html — avoids the initial.html bootstrap entirely,
282
+ // which eliminates the white-flash / freeze glitch on the settings transition.
283
+ window.location.href = 'vehicles.html';
284
  }
285
 
286
  // =============================================
frontend/js/vehicles.js CHANGED
@@ -336,15 +336,17 @@ function switchTab(tab) {
336
  // =========== Insights Rendering ===========
337
  function renderInsights(d) {
338
  const panel = document.getElementById('insights-panel');
339
- panel.classList.remove('hidden');
340
 
341
  // Congestion insights
342
  const ci = document.getElementById('congestion-insights');
343
  const pcu = d.pcu || {};
344
- ci.innerHTML = [
345
- infoRow('Total PCU', pcu.total_pcu || 0, 'Passenger Car Units (IRC:106-1990). Normalizes mixed traffic.'),
346
- infoRow('PCU In / Out', `${pcu.pcu_in || 0} / ${pcu.pcu_out || 0}`, 'Directional PCU split.'),
347
- ].join('');
 
 
348
 
349
  // PCU card in Stats
350
  const pcuCard = document.getElementById('pcu-stats-card');
@@ -598,10 +600,9 @@ function switchTab(tab) {
598
 
599
  // Original init() logic
600
  const raw = sessionStorage.getItem('funky_run');
601
- if (!raw) { window.location.href = './'; return; }
602
 
603
  _params = JSON.parse(raw);
604
- sessionStorage.removeItem('funky_run');
605
 
606
  const cRes = await fetch('constants');
607
  const cData = await cRes.json();
@@ -730,12 +731,8 @@ function switchTab(tab) {
730
  function startNewAnalysis() {
731
  sessionStorage.clear();
732
  _params = null;
733
- [congChart, doughChart, domChart, flowChart].forEach(c => {
734
- c.data.labels = [];
735
- c.data.datasets[0].data = [];
736
- c.update();
737
- });
738
- window.location.href = '/';
739
  }
740
  function updateBreakdown(classIn, classOut) {
741
  const container = document.getElementById('class-breakdown');
@@ -1159,10 +1156,19 @@ function switchTab(tab) {
1159
  previewHTML = `<img src="${url}" alt="${info.title}" class="max-w-full max-h-[320px] object-contain rounded">`;
1160
  }
1161
 
 
 
 
 
 
 
 
 
 
1162
  card.innerHTML = `
1163
  <div class="px-5 py-3 border-b border-slate-800 bg-slate-900/40 flex justify-between items-center">
1164
  <div>
1165
- <h3 class="font-bold text-white text-sm">${info.title}</h3>
1166
  <p class="text-[10px] text-slate-400 mt-0.5">${info.desc}</p>
1167
  </div>
1168
  <a href="${url}" download="${name}"
 
336
  // =========== Insights Rendering ===========
337
  function renderInsights(d) {
338
  const panel = document.getElementById('insights-panel');
339
+ if (panel) panel.classList.remove('hidden');
340
 
341
  // Congestion insights
342
  const ci = document.getElementById('congestion-insights');
343
  const pcu = d.pcu || {};
344
+ if (ci) {
345
+ ci.innerHTML = [
346
+ infoRow('Total PCU', pcu.total_pcu || 0, 'Passenger Car Units (IRC:106-1990). Normalizes mixed traffic.'),
347
+ infoRow('PCU In / Out', `${pcu.pcu_in || 0} / ${pcu.pcu_out || 0}`, 'Directional PCU split.'),
348
+ ].join('');
349
+ }
350
 
351
  // PCU card in Stats
352
  const pcuCard = document.getElementById('pcu-stats-card');
 
600
 
601
  // Original init() logic
602
  const raw = sessionStorage.getItem('funky_run');
603
+ if (!raw) { window.location.replace('initial.html'); return; }
604
 
605
  _params = JSON.parse(raw);
 
606
 
607
  const cRes = await fetch('constants');
608
  const cData = await cRes.json();
 
731
  function startNewAnalysis() {
732
  sessionStorage.clear();
733
  _params = null;
734
+ // Navigate to initial page directly — skips SPA router
735
+ window.location.replace('initial.html');
 
 
 
 
736
  }
737
  function updateBreakdown(classIn, classOut) {
738
  const container = document.getElementById('class-breakdown');
 
1156
  previewHTML = `<img src="${url}" alt="${info.title}" class="max-w-full max-h-[320px] object-contain rounded">`;
1157
  }
1158
 
1159
+ const isHeatmap = name.includes('heatmap');
1160
+ const tooltipHTML = isHeatmap ? `
1161
+ <span class="info-wrap ml-1.5 relative inline-flex items-center">
1162
+ <span class="info-btn cursor-pointer inline-flex items-center justify-center rounded-full border border-neutral-700 bg-neutral-900 text-[8px] text-slate-400 hover:text-white hover:border-slate-400 transition-all" style="width: 14px; height: 14px;">
1163
+ <i class="fa-solid fa-info"></i>
1164
+ </span>
1165
+ <span class="info-tip">Aggregated path utilization mapping. Hot spots represent true accumulated vehicle presence and dwell time across paths.</span>
1166
+ </span>` : '';
1167
+
1168
  card.innerHTML = `
1169
  <div class="px-5 py-3 border-b border-slate-800 bg-slate-900/40 flex justify-between items-center">
1170
  <div>
1171
+ <h3 class="font-bold text-white text-sm flex items-center">${info.title}${tooltipHTML}</h3>
1172
  <p class="text-[10px] text-slate-400 mt-0.5">${info.desc}</p>
1173
  </div>
1174
  <a href="${url}" download="${name}"
frontend/vehicles.html CHANGED
@@ -3,6 +3,7 @@
3
 
4
  <head>
5
  <meta charset="UTF-8">
 
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7
  <title>UrbanFlow</title>
8
  <link rel="icon" type="image/png" href="assets/rf.png">
@@ -45,7 +46,7 @@
45
  </div>
46
 
47
  <!-- Sidebar -->
48
- <aside class="w-60 bg-white shadow-xl flex flex-col z-20 flex-shrink-0 border-r border-slate-200 relative">
49
  <div class="h-28 bg-black flex items-center justify-center px-4 my-2 border-b border-slate-800 flex-shrink-0">
50
  <img id="sidebar-logo-top" src="assets/uf_rf.png" alt="UrbanFlow Logo" class="h-24 w-auto object-contain">
51
  </div>
@@ -68,7 +69,7 @@
68
  </a>
69
  <a onclick="switchTab('settings')" id="nav-settings"
70
  class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
71
- <i class="fa-solid fa-sliders w-6"></i> <span class="font-medium">Settings</span>
72
  </a>
73
  <a onclick="switchTab('help')" id="nav-help"
74
  class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
@@ -213,7 +214,7 @@
213
 
214
  <!-- Progress Bar (shared) -->
215
  <div id="progress-bar-wrapper"
216
- class="w-full bg-white rounded-xl px-6 py-4 border border-slate-200 shadow-sm flex items-center justify-between flex-shrink-0">
217
  <div class="flex items-center space-x-4 flex-1 mr-6">
218
  <span class="text-[11px] font-black text-white uppercase tracking-wider whitespace-nowrap"
219
  id="proc-label">Waiting</span>
@@ -260,7 +261,7 @@
260
 
261
  <!-- Congestion Index -->
262
  <div
263
- class="col-span-12 xl:col-span-6 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col min-h-0">
264
  <div class="flex justify-between items-center mb-2 relative">
265
  <h3 class="font-bold text-slate-900 text-sm flex items-center">Congestion Index
266
  <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
@@ -275,7 +276,7 @@
275
 
276
  <!-- Doughnut — In / Out -->
277
  <div
278
- class="col-span-6 xl:col-span-3 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col items-center justify-center min-h-0">
279
  <h3 class="font-bold text-slate-900 text-sm mb-2 self-start flex items-center">Directional Distribution
280
  <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
281
  <span class="info-tip">Incoming vs outgoing vehicles detected along the defined path</span></span>
@@ -296,7 +297,7 @@
296
 
297
  <!-- Vehicle Classification Breakdown -->
298
  <div
299
- class="col-span-6 xl:col-span-3 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col overflow-hidden min-h-0">
300
  <div class="flex justify-between items-center mb-1 relative">
301
  <h3 class="font-bold text-slate-900 text-sm flex items-center">Vehicle Classification
302
  <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
@@ -310,7 +311,7 @@
310
 
311
  <!-- Class Dominance -->
312
  <div
313
- class="col-span-12 xl:col-span-6 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col min-h-0">
314
  <div class="flex justify-between items-center mb-2 relative">
315
  <h3 class="font-bold text-slate-900 text-sm flex items-center">Big Picture
316
  <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
@@ -326,7 +327,7 @@
326
 
327
  <!-- Traffic Flow Over Time -->
328
  <div
329
- class="col-span-12 xl:col-span-6 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col min-h-0">
330
  <div class="flex justify-between items-center mb-2 relative">
331
  <h3 class="font-bold text-slate-900 text-sm flex items-center">Temporal Traffic Flow
332
  <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
@@ -349,7 +350,7 @@
349
  <div class="space-y-6 w-full max-w-[1400px] mx-auto">
350
 
351
  <!-- HERO: Process Analytics -->
352
- <div id="run-results-card" class="bg-white rounded-xl border shadow-sm overflow-hidden flex flex-col"
353
  style="border-color:#2a2a2a">
354
  <div class="px-6 py-4 border-b flex flex-col lg:flex-row justify-between items-center gap-4"
355
  style="border-color:#1a1a1a;background:#050505">
@@ -374,28 +375,28 @@
374
 
375
  <!-- Technical Context Row -->
376
  <div class="grid grid-cols-2 gap-6">
377
- <div class="bg-white rounded-xl border shadow-sm flex flex-col overflow-hidden"
378
  style="border-color:#2a2a2a">
379
  <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
380
  <h3 class="font-bold text-sm" style="color:#f0ece6">Stream Source Profile</h3>
381
  </div>
382
  <div class="p-6 space-y-4" id="panel-video"></div>
383
  </div>
384
- <div class="bg-white rounded-xl border shadow-sm flex flex-col overflow-hidden"
385
  style="border-color:#2a2a2a">
386
  <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
387
  <h3 class="font-bold text-sm" style="color:#f0ece6">System Resource Utilization</h3>
388
  </div>
389
  <div class="p-6 space-y-4" id="panel-perf"></div>
390
  </div>
391
- <div class="bg-white rounded-xl border shadow-sm flex flex-col overflow-hidden"
392
  style="border-color:#2a2a2a">
393
  <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
394
  <h3 class="font-bold text-sm" style="color:#f0ece6">Model Architecture &amp; Logic</h3>
395
  </div>
396
  <div class="p-6 space-y-4" id="panel-model"></div>
397
  </div>
398
- <div class="bg-white rounded-xl border shadow-sm flex flex-col overflow-hidden"
399
  style="border-color:#2a2a2a">
400
  <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
401
  <h3 class="font-bold text-sm" style="color:#f0ece6">Inference Parameters</h3>
@@ -404,24 +405,7 @@
404
  </div>
405
  </div>
406
 
407
- <!-- Insights Panel (xAI) -->
408
- <div id="insights-panel" class="hidden">
409
- <div class="mt-6">
410
- <div class="bg-white rounded-xl border shadow-sm flex flex-col overflow-hidden"
411
- style="border-color:#2a2a2a">
412
- <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
413
- <h3 class="font-bold text-sm flex items-center" style="color:#f0ece6">Congestion
414
- Insights
415
- <span class="info-wrap"><span class="info-btn"><i
416
- class="fa-solid fa-info"></i></span>
417
- <span class="info-tip">Automated peak detection and congestion
418
- classification.</span></span>
419
- </h3>
420
- </div>
421
- <div class="p-6 space-y-3" id="congestion-insights"></div>
422
- </div>
423
- </div>
424
- </div>
425
 
426
  </div>
427
  </div>
@@ -1328,7 +1312,7 @@
1328
  <i class="fa-solid fa-file-lines"></i>
1329
  </button>
1330
  <button class="mob-nav-item" id="mob-nav-settings" onclick="switchTab('settings')">
1331
- <i class="fa-solid fa-sliders"></i>
1332
  </button>
1333
  <button class="mob-nav-item" id="mob-nav-help" onclick="switchTab('help')">
1334
  <i class="fa-solid fa-circle-question"></i>
 
3
 
4
  <head>
5
  <meta charset="UTF-8">
6
+ <meta name="color-scheme" content="dark">
7
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8
  <title>UrbanFlow</title>
9
  <link rel="icon" type="image/png" href="assets/rf.png">
 
46
  </div>
47
 
48
  <!-- Sidebar -->
49
+ <aside class="w-60 bg-neutral-950 shadow-xl flex flex-col z-20 flex-shrink-0 border-r border-neutral-800 relative">
50
  <div class="h-28 bg-black flex items-center justify-center px-4 my-2 border-b border-slate-800 flex-shrink-0">
51
  <img id="sidebar-logo-top" src="assets/uf_rf.png" alt="UrbanFlow Logo" class="h-24 w-auto object-contain">
52
  </div>
 
69
  </a>
70
  <a onclick="switchTab('settings')" id="nav-settings"
71
  class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
72
+ <i class="fa-solid fa-gear w-6"></i> <span class="font-medium">Settings</span>
73
  </a>
74
  <a onclick="switchTab('help')" id="nav-help"
75
  class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
 
214
 
215
  <!-- Progress Bar (shared) -->
216
  <div id="progress-bar-wrapper"
217
+ class="w-full bg-neutral-950 rounded-xl px-6 py-4 border border-neutral-800 shadow-sm flex items-center justify-between flex-shrink-0">
218
  <div class="flex items-center space-x-4 flex-1 mr-6">
219
  <span class="text-[11px] font-black text-white uppercase tracking-wider whitespace-nowrap"
220
  id="proc-label">Waiting</span>
 
261
 
262
  <!-- Congestion Index -->
263
  <div
264
+ class="col-span-12 xl:col-span-6 bg-neutral-950 rounded-xl p-5 border border-neutral-800 shadow-sm flex flex-col min-h-0">
265
  <div class="flex justify-between items-center mb-2 relative">
266
  <h3 class="font-bold text-slate-900 text-sm flex items-center">Congestion Index
267
  <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
 
276
 
277
  <!-- Doughnut — In / Out -->
278
  <div
279
+ class="col-span-6 xl:col-span-3 bg-neutral-950 rounded-xl p-5 border border-neutral-800 shadow-sm flex flex-col items-center justify-center min-h-0">
280
  <h3 class="font-bold text-slate-900 text-sm mb-2 self-start flex items-center">Directional Distribution
281
  <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
282
  <span class="info-tip">Incoming vs outgoing vehicles detected along the defined path</span></span>
 
297
 
298
  <!-- Vehicle Classification Breakdown -->
299
  <div
300
+ class="col-span-6 xl:col-span-3 bg-neutral-950 rounded-xl p-5 border border-neutral-800 shadow-sm flex flex-col overflow-hidden min-h-0">
301
  <div class="flex justify-between items-center mb-1 relative">
302
  <h3 class="font-bold text-slate-900 text-sm flex items-center">Vehicle Classification
303
  <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
 
311
 
312
  <!-- Class Dominance -->
313
  <div
314
+ class="col-span-12 xl:col-span-6 bg-neutral-950 rounded-xl p-5 border border-neutral-800 shadow-sm flex flex-col min-h-0">
315
  <div class="flex justify-between items-center mb-2 relative">
316
  <h3 class="font-bold text-slate-900 text-sm flex items-center">Big Picture
317
  <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
 
327
 
328
  <!-- Traffic Flow Over Time -->
329
  <div
330
+ class="col-span-12 xl:col-span-6 bg-neutral-950 rounded-xl p-5 border border-neutral-800 shadow-sm flex flex-col min-h-0">
331
  <div class="flex justify-between items-center mb-2 relative">
332
  <h3 class="font-bold text-slate-900 text-sm flex items-center">Temporal Traffic Flow
333
  <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
 
350
  <div class="space-y-6 w-full max-w-[1400px] mx-auto">
351
 
352
  <!-- HERO: Process Analytics -->
353
+ <div id="run-results-card" class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm overflow-hidden flex flex-col"
354
  style="border-color:#2a2a2a">
355
  <div class="px-6 py-4 border-b flex flex-col lg:flex-row justify-between items-center gap-4"
356
  style="border-color:#1a1a1a;background:#050505">
 
375
 
376
  <!-- Technical Context Row -->
377
  <div class="grid grid-cols-2 gap-6">
378
+ <div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden"
379
  style="border-color:#2a2a2a">
380
  <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
381
  <h3 class="font-bold text-sm" style="color:#f0ece6">Stream Source Profile</h3>
382
  </div>
383
  <div class="p-6 space-y-4" id="panel-video"></div>
384
  </div>
385
+ <div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden"
386
  style="border-color:#2a2a2a">
387
  <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
388
  <h3 class="font-bold text-sm" style="color:#f0ece6">System Resource Utilization</h3>
389
  </div>
390
  <div class="p-6 space-y-4" id="panel-perf"></div>
391
  </div>
392
+ <div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden"
393
  style="border-color:#2a2a2a">
394
  <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
395
  <h3 class="font-bold text-sm" style="color:#f0ece6">Model Architecture &amp; Logic</h3>
396
  </div>
397
  <div class="p-6 space-y-4" id="panel-model"></div>
398
  </div>
399
+ <div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden"
400
  style="border-color:#2a2a2a">
401
  <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
402
  <h3 class="font-bold text-sm" style="color:#f0ece6">Inference Parameters</h3>
 
405
  </div>
406
  </div>
407
 
408
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
409
 
410
  </div>
411
  </div>
 
1312
  <i class="fa-solid fa-file-lines"></i>
1313
  </button>
1314
  <button class="mob-nav-item" id="mob-nav-settings" onclick="switchTab('settings')">
1315
+ <i class="fa-solid fa-gear"></i>
1316
  </button>
1317
  <button class="mob-nav-item" id="mob-nav-help" onclick="switchTab('help')">
1318
  <i class="fa-solid fa-circle-question"></i>