Hugging Face's logo

Spaces:
sikeaditya
/
geomap_2
Sleeping

App Files Community
AdityaAdaki commited on
Commit
35911bb
·
1 Parent(s): 83ba68d

Add requirements.txt

Browse files
Files changed (3) hide show
  1. requirements.txt +6 -0
  2. templates/analysis.html +95 -0
  3. templates/index.html +99 -0
requirements.txt CHANGED
@@ -1,2 +1,8 @@
1
  flask
2
  gunicorn
 
 
 
 
 
 
 
1
  flask
2
  gunicorn
3
+ geopy
4
+ folium
5
+ selenium
6
+ pillow
7
+ webdriver_manager
8
+ numpy
templates/analysis.html ADDED
@@ -0,0 +1,95 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 ADDED
@@ -0,0 +1,99 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Satellite Image Analyzer</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
9
+ <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
10
+ <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
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">
42
+ <h5 class="card-title">
43
+ <i class="fas fa-upload me-2"></i>Or Upload an Image
44
+ </h5>
45
+ <form id="uploadForm" class="mb-3">
46
+ <div class="form-group">
47
+ <input type="file"
48
+ class="form-control"
49
+ id="imageUpload"
50
+ accept=".jpg,.jpeg,.png,.tif,.tiff"
51
+ required>
52
+ </div>
53
+ <button type="submit" class="btn btn-primary mt-3">
54
+ <i class="fas fa-upload me-2"></i>Upload and Analyze
55
+ </button>
56
+ </form>
57
+ </div>
58
+ </div>
59
+
60
+ <div id="mapContainer" class="card mb-4 d-none">
61
+ <div class="card-body">
62
+ <div id="map"></div>
63
+ <div class="mt-4 d-flex justify-content-between align-items-center flex-wrap">
64
+ <button id="captureBtn" class="btn btn-success">
65
+ <i class="fas fa-camera me-2"></i>Capture Screenshot
66
+ </button>
67
+ <small class="text-muted">
68
+ <i class="fas fa-info-circle me-2"></i>Use map controls to adjust the view
69
+ </small>
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+ <div id="screenshotGallery" class="card d-none">
75
+ <div class="card-body">
76
+ <h5 class="card-title">
77
+ <i class="fas fa-image me-2"></i>Captured Image
78
+ </h5>
79
+ <div id="screenshotContainer" class="text-center">
80
+ <img id="capturedImage" class="img-fluid" alt="Captured map">
81
+ <div class="mt-4">
82
+ <a id="analyzeBtn" class="btn btn-primary">
83
+ <i class="fas fa-chart-bar me-2"></i>Analyze Image
84
+ </a>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </div>
92
+
93
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
94
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
95
+ <script src="{{ url_for('static', filename='js/polygon-draw.js') }}"></script>
96
+ <script src="{{ url_for('static', filename='js/main.js') }}"></script>
97
+ <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
98
+ </body>
99
+ </html>