Spaces:
Sleeping
Sleeping
File size: 9,207 Bytes
3a84963 5cf313a 3a84963 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 |
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ForestAI - Image to GeoJSON Processing</title>
<!-- Bootstrap CSS (Replit-themed) -->
<link rel="stylesheet" href="https://cdn.replit.com/agent/bootstrap-agent-dark-theme.min.css">
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<i class="fas fa-tree"></i> ForestAI
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-4">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h2><i class="fas fa-image"></i> Image to GeoJSON Processing Pipeline</h2>
</div>
<div class="card-body">
<p class="lead">
Upload an image to process and visualize as GeoJSON on a map.
</p>
<div class="alert alert-info">
<i class="fas fa-info-circle"></i> Supported formats: PNG, JPG, TIFF
</div>
<form id="uploadForm" class="mb-4">
<div class="mb-3">
<label for="imageFile" class="form-label">Select Image File</label>
<input class="form-control" type="file" id="imageFile" accept=".png,.jpg,.jpeg,.tif,.tiff">
</div>
<div class="mb-3">
<label for="featureType" class="form-label">Feature Type to Extract</label>
<select class="form-select" id="featureType" name="feature_type">
<option value="buildings" selected>Buildings</option>
<option value="trees">Trees/Vegetation</option>
<option value="water">Water Bodies</option>
<option value="roads">Roads</option>
</select>
<div class="form-text">Select the type of features you want to extract from the image.</div>
</div>
<button type="submit" class="btn btn-primary">
<i class="fas fa-upload"></i> Upload & Process
</button>
</form>
<!-- Processing status -->
<div id="processingStatus" class="d-none">
<div class="d-flex align-items-center">
<div class="spinner-border text-primary me-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<span>Processing image, please wait...</span>
</div>
</div>
<!-- Error message display -->
<div id="errorMessage" class="alert alert-danger d-none"></div>
</div>
</div>
</div>
</div>
<!-- Results Section (initially hidden) -->
<div id="resultsSection" class="row mt-4 d-none">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-map"></i> Processing Results</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12 mb-3">
<div id="map" style="height: 500px;"></div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<div class="d-flex justify-content-between">
<div>
<h4>GeoJSON Data</h4>
</div>
<div>
<button id="downloadBtn" class="btn btn-success">
<i class="fas fa-download"></i> Download GeoJSON
</button>
</div>
</div>
<div class="mt-2">
<pre id="geojsonDisplay" class="bg-dark text-light p-3" style="max-height: 300px; overflow-y: auto;"></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- About Section -->
<div id="about" class="row mt-4">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-info-circle"></i> About This Tool</h3>
</div>
<div class="card-body">
<p>
This application provides an image processing pipeline that converts uploaded images to
GeoJSON data and visualizes it on a map. It uses advanced algorithms to detect features
in satellite or aerial imagery and represent them as geographic vector data.
</p>
<h4>Features:</h4>
<ul>
<li>Upload and process various image formats</li>
<li>Automatic feature detection and extraction</li>
<li>Conversion to standard GeoJSON format</li>
<li>Interactive map visualization</li>
<li>Download processed GeoJSON data</li>
</ul>
<h4>How It Works:</h4>
<ol>
<li>Upload an image (satellite imagery, aerial photos, etc.)</li>
<li>Our system processes the image using computer vision techniques</li>
<li>Features are detected and converted to geographic coordinates</li>
<li>Results are displayed on an interactive map and available for download</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-dark text-light py-4 mt-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<h5><i class="fas fa-tree"></i> ForestAI</h5>
<p>Image processing pipeline for geospatial data</p>
</div>
<div class="col-md-6 text-md-end">
<p>© 2023 ForestAI</p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<!-- Custom JS -->
<script src="{{ url_for('static', filename='js/map.js') }}"></script>
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
</body>
</html>
|