Hugging Face's logo

Spaces:
sikeaditya
/
geomap_2
Sleeping

App Files Community
AdityaAdaki commited on
Commit
f2b66b8
·
1 Parent(s): af11331

_

Browse files
Files changed (2) hide show
  1. templates/analysis.html +87 -17
  2. templates/index.html +24 -6
templates/analysis.html CHANGED
@@ -1,25 +1,95 @@
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
- <title>Analysis Results</title>
 
 
 
5
  </head>
6
  <body>
7
- <h1>Analysis Results</h1>
8
- <img src="{{ image_path }}" alt="Original Image">
9
-
10
- <h2>Segmentation Results:</h2>
11
- <ul>
12
- {% for feature, percentage in results.items() %}
13
- <li>{{ feature }}: {{ percentage }}%</li>
14
- {% endfor %}
15
- </ul>
16
-
17
- <h2>Segmentation Masks:</h2>
18
- {% for feature, mask_path in masks.items() %}
19
- <div>
20
- <h3>{{ feature }}</h3>
21
- <img src="{{ mask_path }}" alt="{{ feature }} mask">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  </div>
23
- {% endfor %}
24
  </body>
25
  </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
+ <title>Satellite Image Analysis</title>
5
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
6
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
7
+ <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
8
  </head>
9
  <body>
10
+ <div class="container-fluid py-4">
11
+ <div class="row justify-content-center">
12
+ <div class="col-lg-11">
13
+ <h1 class="text-center mb-4">Satellite Image Analysis Results</h1>
14
+
15
+ <div class="row">
16
+ <!-- Original and Segmented Images -->
17
+ <div class="col-lg-8">
18
+ <div class="card mb-4">
19
+ <div class="card-body">
20
+ <div class="row">
21
+ <div class="col-md-6">
22
+ <h3 class="card-title">
23
+ <i class="fas fa-image me-2"></i>Original Image
24
+ </h3>
25
+ <div class="image-wrapper">
26
+ <img src="{{ image_path }}" alt="Original Image" class="analyzed-image">
27
+ </div>
28
+ </div>
29
+ <div class="col-md-6">
30
+ <h3 class="card-title">
31
+ <i class="fas fa-layer-group me-2"></i>Segmented Image
32
+ </h3>
33
+ <div class="image-wrapper">
34
+ <img src="{{ masks['segmented'] }}" alt="Segmented Image" class="analyzed-image">
35
+ </div>
36
+ </div>
37
+ </div>
38
+ </div>
39
+ </div>
40
+ </div>
41
+
42
+ <!-- Results Panel -->
43
+ <div class="col-lg-4">
44
+ <div class="card mb-4">
45
+ <div class="card-body">
46
+ <h3 class="card-title">
47
+ <i class="fas fa-chart-pie me-2"></i>Distribution Analysis
48
+ </h3>
49
+ <div class="results-list-wrapper">
50
+ <ul class="results-list">
51
+ {% for feature, percentage in results.items() %}
52
+ <li class="feature-item">
53
+ <div class="feature-header">
54
+ <span class="feature-name">{{ feature|title }}</span>
55
+ <span class="feature-percentage">{{ percentage }}%</span>
56
+ </div>
57
+ <div class="progress">
58
+ <div class="progress-bar feature-{{ feature }}"
59
+ style="width: {{ percentage }}%">
60
+ </div>
61
+ </div>
62
+ </li>
63
+ {% endfor %}
64
+ </ul>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </div>
70
+
71
+ <!-- Feature Masks -->
72
+ <div class="card">
73
+ <div class="card-body">
74
+ <h3 class="card-title mb-4">
75
+ <i class="fas fa-map-marked-alt me-2"></i>Feature Detection Masks
76
+ </h3>
77
+ <div class="masks-grid">
78
+ {% for feature, mask_path in masks.items() %}
79
+ {% if feature != 'segmented' %}
80
+ <div class="mask-item">
81
+ <h4 class="mask-title">{{ feature|title }}</h4>
82
+ <div class="mask-wrapper">
83
+ <img src="{{ mask_path }}" alt="{{ feature }} mask" class="mask-image">
84
+ </div>
85
+ </div>
86
+ {% endif %}
87
+ {% endfor %}
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </div>
92
  </div>
93
+ </div>
94
  </body>
95
  </html>
templates/index.html CHANGED
@@ -11,13 +11,31 @@
11
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
12
  </head>
13
  <body>
14
- <div class="container">
15
- <h1>Map Screenshot Tool</h1>
16
 
17
- <div class="controls">
18
- <input type="text" id="location-input" placeholder="Enter location...">
19
- <button onclick="searchLocation()">Search</button>
20
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
 
22
  <div class="card mb-4">
23
  <div class="card-body">
 
11
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
12
  </head>
13
  <body>
14
+ <div class="container py-5">
15
+ <h1 class="text-center">Satellite Image Analyzer</h1>
16
 
17
+ <div class="row justify-content-center">
18
+ <div class="col-lg-10">
19
+ <div class="card mb-4">
20
+ <div class="card-body">
21
+ <form id="locationForm" class="mb-3">
22
+ <div class="form-group">
23
+ <label for="location" class="form-label">
24
+ <i class="fas fa-search-location me-2"></i>Enter Location
25
+ </label>
26
+ <input type="text"
27
+ class="form-control form-control-lg"
28
+ id="location"
29
+ name="location"
30
+ placeholder="Enter an address or location name"
31
+ required>
32
+ </div>
33
+ <button type="submit" class="btn btn-primary mt-3">
34
+ <i class="fas fa-map-marked-alt me-2"></i>Search Location
35
+ </button>
36
+ </form>
37
+ </div>
38
+ </div>
39
 
40
  <div class="card mb-4">
41
  <div class="card-body">