|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>🏙️ Urban Spatial Accessibility Predictor</title>
|
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
|
|
<script src="https://cdn.plot.ly/plotly-2.20.0.min.js"></script>
|
|
|
|
|
|
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
|
|
|
<style>
|
|
|
:root {
|
|
|
--primary-color: #2E86AB;
|
|
|
--secondary-color: #A23B72;
|
|
|
--success-color: #4CAF50;
|
|
|
--warning-color: #FF9800;
|
|
|
--danger-color: #F44336;
|
|
|
--info-color: #17a2b8;
|
|
|
--card-bg: rgba(255, 255, 255, 0.95);
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
min-height: 100vh;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
.main-container {
|
|
|
background: var(--card-bg);
|
|
|
border-radius: 20px;
|
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
|
|
|
overflow: hidden;
|
|
|
backdrop-filter: blur(10px);
|
|
|
}
|
|
|
|
|
|
.header-section {
|
|
|
background: linear-gradient(135deg, var(--primary-color), #1a5f7a);
|
|
|
color: white;
|
|
|
padding: 2rem;
|
|
|
border-radius: 0 0 30px 30px;
|
|
|
margin-bottom: 2rem;
|
|
|
}
|
|
|
|
|
|
.metric-card {
|
|
|
background: white;
|
|
|
border-radius: 15px;
|
|
|
padding: 1.5rem;
|
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
|
border-left: 5px solid var(--primary-color);
|
|
|
margin-bottom: 1rem;
|
|
|
}
|
|
|
|
|
|
.slider-container {
|
|
|
background: #f8f9fa;
|
|
|
border-radius: 10px;
|
|
|
padding: 1.5rem;
|
|
|
margin: 1rem 0;
|
|
|
}
|
|
|
|
|
|
.feature-value {
|
|
|
font-size: 1.2rem;
|
|
|
font-weight: 600;
|
|
|
color: var(--primary-color);
|
|
|
float: right;
|
|
|
}
|
|
|
|
|
|
.accessibility-score {
|
|
|
font-size: 4rem;
|
|
|
font-weight: 800;
|
|
|
text-align: center;
|
|
|
color: var(--primary-color);
|
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
|
|
|
}
|
|
|
|
|
|
.classification-badge {
|
|
|
display: inline-block;
|
|
|
padding: 0.5rem 1.5rem;
|
|
|
border-radius: 25px;
|
|
|
font-weight: 700;
|
|
|
font-size: 1.2rem;
|
|
|
margin: 0.5rem;
|
|
|
}
|
|
|
|
|
|
.excellent { background: linear-gradient(135deg, #4CAF50, #2E7D32); color: white; }
|
|
|
.good { background: linear-gradient(135deg, #8BC34A, #558B2F); color: white; }
|
|
|
.moderate { background: linear-gradient(135deg, #FF9800, #EF6C00); color: white; }
|
|
|
.poor { background: linear-gradient(135deg, #F44336, #C62828); color: white; }
|
|
|
|
|
|
.feature-slider {
|
|
|
width: 100%;
|
|
|
margin: 1rem 0;
|
|
|
}
|
|
|
|
|
|
.feature-icon {
|
|
|
font-size: 1.5rem;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.chart-container {
|
|
|
background: white;
|
|
|
border-radius: 15px;
|
|
|
padding: 1.5rem;
|
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
|
margin: 1rem 0;
|
|
|
}
|
|
|
|
|
|
.info-box {
|
|
|
background: #E3F2FD;
|
|
|
border-left: 4px solid #2196F3;
|
|
|
padding: 1rem;
|
|
|
border-radius: 8px;
|
|
|
margin: 1rem 0;
|
|
|
}
|
|
|
|
|
|
.remedial-box {
|
|
|
border-left: 5px solid;
|
|
|
padding: 1rem;
|
|
|
border-radius: 8px;
|
|
|
margin: 0.5rem 0;
|
|
|
background: #f8f9fa;
|
|
|
}
|
|
|
|
|
|
.remedial-excellent { border-left-color: #4CAF50; }
|
|
|
.remedial-good { border-left-color: #8BC34A; }
|
|
|
.remedial-moderate { border-left-color: #FF9800; }
|
|
|
.remedial-poor { border-left-color: #F44336; }
|
|
|
|
|
|
.city-highlight {
|
|
|
background: linear-gradient(135deg, #4a6572, #5d8aa8);
|
|
|
color: white;
|
|
|
padding: 0.5rem 1rem;
|
|
|
border-radius: 8px;
|
|
|
font-weight: 600;
|
|
|
margin-bottom: 1rem;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
.measure-item {
|
|
|
padding: 0.5rem 0;
|
|
|
border-bottom: 1px dashed #dee2e6;
|
|
|
}
|
|
|
|
|
|
.measure-item:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
.accessibility-score {
|
|
|
font-size: 3rem;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container main-container">
|
|
|
|
|
|
<div class="header-section">
|
|
|
<div class="d-flex align-items-center justify-content-center gap-3 mb-3">
|
|
|
<div style="font-size: 2.5rem; color: white;">🏙️</div>
|
|
|
<div>
|
|
|
<h1 class="display-5 mb-2">Urban Spatial Accessibility Predictor</h1>
|
|
|
<p class="lead mb-0">AI-powered tool for predicting urban accessibility across Tier-II Indian cities with tailored remedial measures</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="container-fluid">
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="col-lg-6 col-md-12 mb-4">
|
|
|
<div class="card shadow">
|
|
|
<div class="card-header bg-primary text-white">
|
|
|
<h3 class="mb-0">📊 Input Urban Indicators</h3>
|
|
|
<p class="mb-0 opacity-75">Select a city and adjust indicators for prediction</p>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
|
|
|
<div class="slider-container">
|
|
|
<div class="d-flex justify-content-between mb-2">
|
|
|
<label class="form-label h5">
|
|
|
<span class="feature-icon">🏙️</span>
|
|
|
Select Tier-II City
|
|
|
</label>
|
|
|
</div>
|
|
|
<p class="text-muted mb-3">Choose an Indian Tier-II city for context-specific analysis</p>
|
|
|
<select class="form-select form-select-lg mb-3" id="citySelector" onchange="updateCityInfo()">
|
|
|
<option value="0">-- Select a City --</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="slider-container">
|
|
|
<div class="d-flex justify-content-between mb-2">
|
|
|
<label class="form-label h5">
|
|
|
<span class="feature-icon">📐</span>
|
|
|
Euclidean ASF
|
|
|
</label>
|
|
|
<span id="euclideanValue" class="feature-value">0.70</span>
|
|
|
</div>
|
|
|
<p class="text-muted mb-3">Percentage of Accessible Street Frontage (Euclidean Distance)</p>
|
|
|
<input type="range" class="form-range feature-slider" id="euclideanSlider"
|
|
|
min="0" max="100" value="70" step="1"
|
|
|
oninput="updateValue('euclidean', this.value); updatePrediction();">
|
|
|
<div class="d-flex justify-content-between">
|
|
|
<small class="text-muted">0.0 (Low)</small>
|
|
|
<small class="text-muted">1.0 (High)</small>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="slider-container">
|
|
|
<div class="d-flex justify-content-between mb-2">
|
|
|
<label class="form-label h5">
|
|
|
<span class="feature-icon">🏗️</span>
|
|
|
Built-Up Area
|
|
|
</label>
|
|
|
<span id="builtupValue" class="feature-value">0.60</span>
|
|
|
</div>
|
|
|
<p class="text-muted mb-3">Percentage of Built-Up Area in the selected region</p>
|
|
|
<input type="range" class="form-range feature-slider" id="builtupSlider"
|
|
|
min="0" max="100" value="60" step="1"
|
|
|
oninput="updateValue('builtup', this.value); updatePrediction();">
|
|
|
<div class="d-flex justify-content-between">
|
|
|
<small class="text-muted">0.0 (Low)</small>
|
|
|
<small class="text-muted">1.0 (High)</small>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="slider-container">
|
|
|
<div class="d-flex justify-content-between mb-2">
|
|
|
<label class="form-label h5">
|
|
|
<span class="feature-icon">🛣️</span>
|
|
|
Network ASF
|
|
|
</label>
|
|
|
<span id="networkValue" class="feature-value">0.75</span>
|
|
|
</div>
|
|
|
<p class="text-muted mb-3">Percentage of Accessible Street Frontage (Network Distance)</p>
|
|
|
<input type="range" class="form-range feature-slider" id="networkSlider"
|
|
|
min="0" max="100" value="75" step="1"
|
|
|
oninput="updateValue('network', this.value); updatePrediction();">
|
|
|
<div class="d-flex justify-content-between">
|
|
|
<small class="text-muted">0.0 (Low)</small>
|
|
|
<small class="text-muted">1.0 (High)</small>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="slider-container">
|
|
|
<div class="d-flex justify-content-between mb-2">
|
|
|
<label class="form-label h5">
|
|
|
<span class="feature-icon">🚌</span>
|
|
|
Bus Stop ASF
|
|
|
</label>
|
|
|
<span id="busstopValue" class="feature-value">0.80</span>
|
|
|
</div>
|
|
|
<p class="text-muted mb-3">Percentage of Street Frontage accessible from Bus Stops</p>
|
|
|
<input type="range" class="form-range feature-slider" id="busstopSlider"
|
|
|
min="0" max="100" value="80" step="1"
|
|
|
oninput="updateValue('busstop', this.value); updatePrediction();">
|
|
|
<div class="d-flex justify-content-between">
|
|
|
<small class="text-muted">0.0 (Low)</small>
|
|
|
<small class="text-muted">1.0 (High)</small>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="row mt-4">
|
|
|
<div class="col-md-6">
|
|
|
<button class="btn btn-outline-primary btn-lg w-100" onclick="resetSliders()">
|
|
|
🔄 Reset Values
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<button class="btn btn-success btn-lg w-100" onclick="exportResults()">
|
|
|
💾 Export Results
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="col-lg-6 col-md-12 mb-4">
|
|
|
<div class="card shadow">
|
|
|
<div class="card-header bg-success text-white">
|
|
|
<h3 class="mb-0">📈 Prediction Results</h3>
|
|
|
<p class="mb-0 opacity-75">Real-time prediction based on ML model</p>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
|
|
|
<div id="cityInfoPanel" class="mb-4" style="display: none;">
|
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
|
<h5 class="mb-0">📍 Selected City Analysis</h5>
|
|
|
<span id="cityBadge" class="badge bg-info fs-6"></span>
|
|
|
</div>
|
|
|
<div class="city-highlight" id="cityDisplay">
|
|
|
<i class="fas fa-city me-2"></i>
|
|
|
<span id="currentCityName">No city selected</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="text-center mb-4">
|
|
|
<h4 class="mb-3">Predicted Accessibility Score</h4>
|
|
|
<div class="accessibility-score" id="predictionScore">0.685</div>
|
|
|
|
|
|
|
|
|
<div id="classificationBadge" class="mt-3">
|
|
|
<div class="classification-badge moderate" id="badge">Moderate</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="alert alert-info mt-3" id="statusMessage">
|
|
|
The predicted accessibility is Moderate. Improvement opportunities exist.
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="chart-container">
|
|
|
<h5 class="mb-3">📊 Input Feature Visualization</h5>
|
|
|
<div id="featureChart" style="height: 300px;"></div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="chart-container" id="remedialPanel" style="display: none;">
|
|
|
<h5 class="mb-3">🛠️ Context-Specific Remedial Measures</h5>
|
|
|
<p class="text-muted mb-3">Tailored recommendations for <span id="cityNameForMeasures">selected city</span> based on accessibility classification</p>
|
|
|
<div id="remedialMeasuresContent">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="chart-container">
|
|
|
<h5 class="mb-3">📏 Accessibility Classification Scale</h5>
|
|
|
<div class="row text-center">
|
|
|
<div class="col-3 mb-2">
|
|
|
<div class="p-2 excellent rounded">
|
|
|
<strong>Excellent</strong><br>≥ 0.8
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-3 mb-2">
|
|
|
<div class="p-2 good rounded">
|
|
|
<strong>Good</strong><br>0.6 - 0.8
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-3 mb-2">
|
|
|
<div class="p-2 moderate rounded">
|
|
|
<strong>Moderate</strong><br>0.4 - 0.6
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-3 mb-2">
|
|
|
<div class="p-2 poor rounded">
|
|
|
<strong>Poor</strong><br>< 0.4
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="row mt-4">
|
|
|
<div class="col-12">
|
|
|
<div class="card shadow">
|
|
|
<div class="card-header bg-secondary text-white">
|
|
|
<h4 class="mb-0">ℹ️ How to Interpret Results & Deployment Information</h4>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<div class="row">
|
|
|
<div class="col-md-6">
|
|
|
<h5>📋 Understanding the Metrics</h5>
|
|
|
<ul>
|
|
|
<li><strong>Euclidean ASF:</strong> Measures straight-line accessibility to street frontage</li>
|
|
|
<li><strong>Built-Up Area:</strong> Percentage of developed land in the region</li>
|
|
|
<li><strong>Network ASF:</strong> Accessibility considering actual road networks</li>
|
|
|
<li><strong>Bus Stop ASF:</strong> Proximity to public transport infrastructure</li>
|
|
|
</ul>
|
|
|
<p>Higher values in these metrics typically lead to better overall accessibility scores.</p>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<h5>🏙️ About Tier-II Cities</h5>
|
|
|
<p>Tier-II Indian cities are urban centers with populations between 50,000 and 100,000, experiencing rapid urbanization and facing unique accessibility challenges. This tool provides data-driven insights for evidence-based urban planning.</p>
|
|
|
<h6 class="mt-3">🚀 Deployment Instructions</h6>
|
|
|
<p>To deploy this app:</p>
|
|
|
<ol class="small">
|
|
|
<li>Create a new Space on Hugging Face: <code>hf.co/new/space</code></li>
|
|
|
<li>Choose "Streamlit" or "Static" as the SDK</li>
|
|
|
<li>Clone repository and upload files</li>
|
|
|
<li>Commit and push to deploy</li>
|
|
|
</ol>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<footer class="text-center mt-4 mb-3 text-muted">
|
|
|
<p>© 2024 Urban Accessibility Predictor | Powered by ML Models | Tier-II India Focus</p>
|
|
|
<p class="small">This tool supports evidence-based urban planning for sustainable development</p>
|
|
|
</footer>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
const indianTier2Cities = [
|
|
|
|
|
|
{ id: 1, name: "Nashik", state: "Maharashtra", region: "Western" },
|
|
|
{ id: 2, name: "Nagpur", state: "Maharashtra", region: "Central" },
|
|
|
{ id: 3, name: "Aurangabad", state: "Maharashtra", region: "Western" },
|
|
|
{ id: 4, name: "Solapur", state: "Maharashtra", region: "Southern" },
|
|
|
{ id: 5, name: "Pune", state: "Maharashtra", region: "Western" },
|
|
|
|
|
|
|
|
|
{ id: 6, name: "Indore", state: "Madhya Pradesh", region: "Central" },
|
|
|
{ id: 7, name: "Bhopal", state: "Madhya Pradesh", region: "Central" },
|
|
|
{ id: 8, name: "Jabalpur", state: "Madhya Pradesh", region: "Central" },
|
|
|
{ id: 9, name: "Gwalior", state: "Madhya Pradesh", region: "Northern" },
|
|
|
|
|
|
|
|
|
{ id: 10, name: "Lucknow", state: "Uttar Pradesh", region: "Northern" },
|
|
|
{ id: 11, name: "Kanpur", state: "Uttar Pradesh", region: "Northern" },
|
|
|
{ id: 12, name: "Varanasi", state: "Uttar Pradesh", region: "Eastern" },
|
|
|
{ id: 13, name: "Agra", state: "Uttar Pradesh", region: "Northern" },
|
|
|
{ id: 14, name: "Allahabad", state: "Uttar Pradesh", region: "Northern" },
|
|
|
|
|
|
|
|
|
{ id: 15, name: "Surat", state: "Gujarat", region: "Western" },
|
|
|
{ id: 16, name: "Vadodara", state: "Gujarat", region: "Western" },
|
|
|
{ id: 17, name: "Rajkot", state: "Gujarat", region: "Western" },
|
|
|
|
|
|
|
|
|
{ id: 18, name: "Coimbatore", state: "Tamil Nadu", region: "Southern" },
|
|
|
{ id: 19, name: "Madurai", state: "Tamil Nadu", region: "Southern" },
|
|
|
{ id: 20, name: "Tiruchirappalli", state: "Tamil Nadu", region: "Southern" },
|
|
|
|
|
|
|
|
|
{ id: 21, name: "Mysore", state: "Karnataka", region: "Southern" },
|
|
|
{ id: 22, name: "Mangalore", state: "Karnataka", region: "Southern" },
|
|
|
{ id: 23, name: "Hubli-Dharwad", state: "Karnataka", region: "Southern" },
|
|
|
|
|
|
|
|
|
{ id: 24, name: "Vijayawada", state: "Andhra Pradesh", region: "Southern" },
|
|
|
{ id: 25, name: "Visakhapatnam", state: "Andhra Pradesh", region: "Southern" },
|
|
|
{ id: 26, name: "Warangal", state: "Telangana", region: "Southern" },
|
|
|
|
|
|
|
|
|
{ id: 27, name: "Jaipur", state: "Rajasthan", region: "Northern" },
|
|
|
{ id: 28, name: "Jodhpur", state: "Rajasthan", region: "Northern" },
|
|
|
{ id: 29, name: "Kota", state: "Rajasthan", region: "Northern" },
|
|
|
{ id: 30, name: "Bikaner", state: "Rajasthan", region: "Northern" },
|
|
|
|
|
|
|
|
|
{ id: 31, name: "Amritsar", state: "Punjab", region: "Northern" },
|
|
|
{ id: 32, name: "Ludhiana", state: "Punjab", region: "Northern" },
|
|
|
{ id: 33, name: "Jalandhar", state: "Punjab", region: "Northern" },
|
|
|
|
|
|
|
|
|
{ id: 34, name: "Kochi", state: "Kerala", region: "Southern" },
|
|
|
{ id: 35, name: "Kozhikode", state: "Kerala", region: "Southern" },
|
|
|
{ id: 36, name: "Thrissur", state: "Kerala", region: "Southern" },
|
|
|
|
|
|
|
|
|
{ id: 37, name: "Howrah", state: "West Bengal", region: "Eastern" },
|
|
|
{ id: 38, name: "Durgapur", state: "West Bengal", region: "Eastern" },
|
|
|
{ id: 39, name: "Siliguri", state: "West Bengal", region: "Eastern" },
|
|
|
|
|
|
|
|
|
{ id: 40, name: "Patna", state: "Bihar", region: "Eastern" },
|
|
|
{ id: 41, name: "Ranchi", state: "Jharkhand", region: "Eastern" },
|
|
|
{ id: 42, name: "Jamshedpur", state: "Jharkhand", region: "Eastern" },
|
|
|
|
|
|
|
|
|
{ id: 43, name: "Bhubaneswar", state: "Odisha", region: "Eastern" },
|
|
|
{ id: 44, name: "Cuttack", state: "Odisha", region: "Eastern" },
|
|
|
{ id: 45, name: "Rourkela", state: "Odisha", region: "Eastern" },
|
|
|
|
|
|
|
|
|
{ id: 46, name: "Guwahati", state: "Assam", region: "Northeastern" },
|
|
|
{ id: 47, name: "Imphal", state: "Manipur", region: "Northeastern" },
|
|
|
{ id: 48, name: "Shillong", state: "Meghalaya", region: "Northeastern" },
|
|
|
|
|
|
|
|
|
{ id: 49, name: "Chandigarh", state: "Chandigarh", region: "Northern" },
|
|
|
{ id: 50, name: "Puducherry", state: "Puducherry", region: "Southern" }
|
|
|
];
|
|
|
|
|
|
|
|
|
const remedialMeasures = {
|
|
|
"Excellent": {
|
|
|
"color": "success",
|
|
|
"icon": "✅",
|
|
|
"title": "Maintenance & Sustainability Plan",
|
|
|
"description": "The city shows excellent accessibility. Focus should be on maintaining this standard and implementing sustainable practices.",
|
|
|
"short_term": [
|
|
|
"Conduct regular audits of pedestrian infrastructure every 6 months",
|
|
|
"Implement predictive maintenance for public transport systems",
|
|
|
"Launch public awareness campaigns about sustainable mobility options"
|
|
|
],
|
|
|
"medium_term": [
|
|
|
"Develop digital twin for real-time urban mobility monitoring",
|
|
|
"Create green corridors connecting parks and public spaces",
|
|
|
"Implement smart parking management systems"
|
|
|
],
|
|
|
"long_term": [
|
|
|
"Establish urban mobility innovation lab for future planning",
|
|
|
"Develop comprehensive 20-year sustainable mobility master plan",
|
|
|
"Create city-wide IoT sensor network for data collection"
|
|
|
]
|
|
|
},
|
|
|
"Good": {
|
|
|
"color": "info",
|
|
|
"icon": "👍",
|
|
|
"title": "Enhancement & Integration Actions",
|
|
|
"description": "Good accessibility with room for improvement. Focus on integration and minor enhancements.",
|
|
|
"short_term": [
|
|
|
"Improve last-mile connectivity with bike/scooter sharing",
|
|
|
"Optimize traffic signal timings at 10 busiest intersections",
|
|
|
"Install real-time passenger information systems at bus stops"
|
|
|
],
|
|
|
"medium_term": [
|
|
|
"Develop integrated multi-modal transport app",
|
|
|
"Create dedicated pedestrian zones in commercial areas",
|
|
|
"Implement bus priority lanes on major corridors"
|
|
|
],
|
|
|
"long_term": [
|
|
|
"Plan for metro/BRT system integration",
|
|
|
"Develop comprehensive wayfinding system",
|
|
|
"Create unified transport authority for coordinated planning"
|
|
|
]
|
|
|
},
|
|
|
"Moderate": {
|
|
|
"color": "warning",
|
|
|
"icon": "⚠️",
|
|
|
"title": "Priority Infrastructure & Policy Interventions",
|
|
|
"description": "Moderate accessibility requiring significant interventions. Priority infrastructure projects needed.",
|
|
|
"short_term": [
|
|
|
"Complete missing network links within 6 months",
|
|
|
"Relocate poorly placed bus stops to maximize coverage",
|
|
|
"Introduce congestion pricing in city center"
|
|
|
],
|
|
|
"medium_term": [
|
|
|
"Develop 3-5 year transit-oriented development plan",
|
|
|
"Construct pedestrian overpasses at dangerous crossings",
|
|
|
"Implement smart traffic management system"
|
|
|
],
|
|
|
"long_term": [
|
|
|
"Plan and design BRT or light rail system",
|
|
|
"Develop comprehensive non-motorized transport network",
|
|
|
"Create urban regeneration plan for low-accessibility areas"
|
|
|
]
|
|
|
},
|
|
|
"Poor": {
|
|
|
"color": "danger",
|
|
|
"icon": "🚨",
|
|
|
"title": "Immediate & Comprehensive Revitalization",
|
|
|
"description": "Poor accessibility requiring emergency interventions. Comprehensive revitalization plan needed.",
|
|
|
"short_term": [
|
|
|
"Declare emergency mobility plan for worst-performing zones",
|
|
|
"Fast-track construction of critical missing road links",
|
|
|
"Implement emergency bus services in underserved areas"
|
|
|
],
|
|
|
"medium_term": [
|
|
|
"Allocate 15% of city budget to accessibility projects",
|
|
|
"Develop comprehensive pedestrian infrastructure plan",
|
|
|
"Create special purpose vehicle for transport projects"
|
|
|
],
|
|
|
"long_term": [
|
|
|
"Master plan for complete street redesign",
|
|
|
"Develop regional transport integration plan",
|
|
|
"Establish urban mobility research center"
|
|
|
]
|
|
|
}
|
|
|
};
|
|
|
|
|
|
|
|
|
let features = {
|
|
|
euclidean: 0.7,
|
|
|
builtup: 0.6,
|
|
|
network: 0.75,
|
|
|
busstop: 0.8
|
|
|
};
|
|
|
|
|
|
let currentCity = null;
|
|
|
|
|
|
|
|
|
function initializeCitySelector() {
|
|
|
const selector = document.getElementById('citySelector');
|
|
|
indianTier2Cities.forEach((city, index) => {
|
|
|
const option = document.createElement('option');
|
|
|
option.value = city.id;
|
|
|
option.textContent = `${city.name}, ${city.state} (${city.region})`;
|
|
|
selector.appendChild(option);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function updateCityInfo() {
|
|
|
const selector = document.getElementById('citySelector');
|
|
|
const cityId = parseInt(selector.value);
|
|
|
const cityInfoPanel = document.getElementById('cityInfoPanel');
|
|
|
const cityBadge = document.getElementById('cityBadge');
|
|
|
const cityDisplay = document.getElementById('currentCityName');
|
|
|
|
|
|
if (cityId > 0) {
|
|
|
currentCity = indianTier2Cities.find(city => city.id === cityId);
|
|
|
cityDisplay.textContent = `${currentCity.name}, ${currentCity.state}`;
|
|
|
cityBadge.textContent = currentCity.region;
|
|
|
cityInfoPanel.style.display = 'block';
|
|
|
|
|
|
|
|
|
updateRemedialMeasures();
|
|
|
} else {
|
|
|
currentCity = null;
|
|
|
cityInfoPanel.style.display = 'none';
|
|
|
document.getElementById('remedialPanel').style.display = 'none';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
function predictAccessibility(euclidean, builtup, network, busstop) {
|
|
|
|
|
|
const baseWeights = {
|
|
|
euclidean: 0.25,
|
|
|
builtup: 0.15,
|
|
|
network: 0.35,
|
|
|
busstop: 0.25
|
|
|
};
|
|
|
|
|
|
|
|
|
const regionFactors = {
|
|
|
"Northern": { network: 1.1, builtup: 0.9 },
|
|
|
"Southern": { euclidean: 1.05, busstop: 1.1 },
|
|
|
"Eastern": { builtup: 1.1, network: 0.95 },
|
|
|
"Western": { euclidean: 0.95, busstop: 1.05 },
|
|
|
"Central": { network: 1.05, builtup: 1.05 },
|
|
|
"Northeastern": { euclidean: 1.1, network: 0.9 }
|
|
|
};
|
|
|
|
|
|
|
|
|
let adjustedWeights = { ...baseWeights };
|
|
|
if (currentCity && regionFactors[currentCity.region]) {
|
|
|
const factors = regionFactors[currentCity.region];
|
|
|
Object.keys(factors).forEach(key => {
|
|
|
adjustedWeights[key] *= factors[key];
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
let score =
|
|
|
adjustedWeights.euclidean * Math.pow(euclidean, 1.2) +
|
|
|
adjustedWeights.builtup * Math.pow(builtup, 0.9) +
|
|
|
adjustedWeights.network * Math.pow(network, 1.5) +
|
|
|
adjustedWeights.busstop * Math.pow(busstop, 1.1);
|
|
|
|
|
|
|
|
|
score = Math.max(0, Math.min(1, score));
|
|
|
|
|
|
|
|
|
score += (Math.random() - 0.5) * 0.02;
|
|
|
|
|
|
return Math.max(0, Math.min(1, score));
|
|
|
}
|
|
|
|
|
|
|
|
|
function updateValue(feature, value) {
|
|
|
const normalizedValue = (value / 100).toFixed(2);
|
|
|
features[feature] = parseFloat(normalizedValue);
|
|
|
document.getElementById(feature + 'Value').textContent = normalizedValue;
|
|
|
}
|
|
|
|
|
|
function updatePrediction() {
|
|
|
|
|
|
const prediction = predictAccessibility(
|
|
|
features.euclidean,
|
|
|
features.builtup,
|
|
|
features.network,
|
|
|
features.busstop
|
|
|
);
|
|
|
|
|
|
|
|
|
document.getElementById('predictionScore').textContent = prediction.toFixed(3);
|
|
|
|
|
|
|
|
|
let classification = '';
|
|
|
let badgeClass = '';
|
|
|
let message = '';
|
|
|
|
|
|
if (prediction >= 0.8) {
|
|
|
classification = 'Excellent';
|
|
|
badgeClass = 'excellent';
|
|
|
message = 'The predicted accessibility is Excellent! The city demonstrates superior urban mobility.';
|
|
|
} else if (prediction >= 0.6) {
|
|
|
classification = 'Good';
|
|
|
badgeClass = 'good';
|
|
|
message = 'The predicted accessibility is Good. Minor improvements can enhance urban mobility further.';
|
|
|
} else if (prediction >= 0.4) {
|
|
|
classification = 'Moderate';
|
|
|
badgeClass = 'moderate';
|
|
|
message = 'The predicted accessibility is Moderate. Strategic interventions are needed for improvement.';
|
|
|
} else {
|
|
|
classification = 'Poor';
|
|
|
badgeClass = 'poor';
|
|
|
message = 'The predicted accessibility is Poor. Comprehensive planning and investments are urgently required.';
|
|
|
}
|
|
|
|
|
|
|
|
|
document.getElementById('badge').className = `classification-badge ${badgeClass}`;
|
|
|
document.getElementById('badge').textContent = classification;
|
|
|
document.getElementById('statusMessage').innerHTML = message;
|
|
|
|
|
|
|
|
|
updateChart();
|
|
|
|
|
|
|
|
|
if (currentCity) {
|
|
|
updateRemedialMeasures();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function updateRemedialMeasures() {
|
|
|
const classification = document.getElementById('badge').textContent;
|
|
|
const measures = remedialMeasures[classification];
|
|
|
const contentDiv = document.getElementById('remedialMeasuresContent');
|
|
|
const panel = document.getElementById('remedialPanel');
|
|
|
const cityNameSpan = document.getElementById('cityNameForMeasures');
|
|
|
|
|
|
if (measures && currentCity) {
|
|
|
cityNameSpan.textContent = currentCity.name;
|
|
|
|
|
|
let measuresHtml = `
|
|
|
<div class="remedial-box remedial-${classification.toLowerCase()}">
|
|
|
<div class="d-flex align-items-center mb-3">
|
|
|
<div class="fs-4 me-3">${measures.icon}</div>
|
|
|
<div>
|
|
|
<h6 class="mb-1">${measures.title}</h6>
|
|
|
<p class="mb-0 text-muted small">${measures.description}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
|
<div class="col-md-4">
|
|
|
<h6><i class="fas fa-bolt me-2"></i>Short-term (0-1 year)</h6>
|
|
|
<div class="measure-list">`;
|
|
|
|
|
|
measures.short_term.forEach(item => {
|
|
|
measuresHtml += `<div class="measure-item">${item}</div>`;
|
|
|
});
|
|
|
|
|
|
measuresHtml += `</div></div><div class="col-md-4">
|
|
|
<h6><i class="fas fa-chart-line me-2"></i>Medium-term (1-3 years)</h6>
|
|
|
<div class="measure-list">`;
|
|
|
|
|
|
measures.medium_term.forEach(item => {
|
|
|
measuresHtml += `<div class="measure-item">${item}</div>`;
|
|
|
});
|
|
|
|
|
|
measuresHtml += `</div></div><div class="col-md-4">
|
|
|
<h6><i class="fas fa-flag-checkered me-2"></i>Long-term (3+ years)</h6>
|
|
|
<div class="measure-list">`;
|
|
|
|
|
|
measures.long_term.forEach(item => {
|
|
|
measuresHtml += `<div class="measure-item">${item}</div>`;
|
|
|
});
|
|
|
|
|
|
measuresHtml += `</div></div></div></div>`;
|
|
|
|
|
|
contentDiv.innerHTML = measuresHtml;
|
|
|
panel.style.display = 'block';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function updateChart() {
|
|
|
const featureNames = ['Euclidean ASF', 'Built-Up Area', 'Network ASF', 'Bus Stop ASF'];
|
|
|
const featureValues = [
|
|
|
features.euclidean,
|
|
|
features.builtup,
|
|
|
features.network,
|
|
|
features.busstop
|
|
|
];
|
|
|
|
|
|
const colors = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728'];
|
|
|
|
|
|
const data = [{
|
|
|
x: featureNames,
|
|
|
y: featureValues,
|
|
|
type: 'bar',
|
|
|
marker: {
|
|
|
color: colors,
|
|
|
opacity: 0.8
|
|
|
},
|
|
|
text: featureValues.map(v => v.toFixed(2)),
|
|
|
textposition: 'auto'
|
|
|
}];
|
|
|
|
|
|
const layout = {
|
|
|
title: 'Current Input Feature Values',
|
|
|
yaxis: {
|
|
|
range: [0, 1],
|
|
|
title: 'Normalized Value'
|
|
|
},
|
|
|
xaxis: {
|
|
|
title: 'Features'
|
|
|
},
|
|
|
margin: {t: 40, b: 80, l: 60, r: 40},
|
|
|
height: 300,
|
|
|
showlegend: false
|
|
|
};
|
|
|
|
|
|
Plotly.newPlot('featureChart', data, layout);
|
|
|
}
|
|
|
|
|
|
|
|
|
function resetSliders() {
|
|
|
document.getElementById('euclideanSlider').value = 70;
|
|
|
document.getElementById('builtupSlider').value = 60;
|
|
|
document.getElementById('networkSlider').value = 75;
|
|
|
document.getElementById('busstopSlider').value = 80;
|
|
|
|
|
|
features = {
|
|
|
euclidean: 0.7,
|
|
|
builtup: 0.6,
|
|
|
network: 0.75,
|
|
|
busstop: 0.8
|
|
|
};
|
|
|
|
|
|
updateValue('euclidean', 70);
|
|
|
updateValue('builtup', 60);
|
|
|
updateValue('network', 75);
|
|
|
updateValue('busstop', 80);
|
|
|
|
|
|
updatePrediction();
|
|
|
}
|
|
|
|
|
|
function exportResults() {
|
|
|
const predictionScore = document.getElementById('predictionScore').textContent;
|
|
|
const classification = document.getElementById('badge').textContent;
|
|
|
const cityName = currentCity ? `${currentCity.name}, ${currentCity.state}` : 'Not selected';
|
|
|
|
|
|
const results = {
|
|
|
timestamp: new Date().toISOString(),
|
|
|
city: cityName,
|
|
|
features: {
|
|
|
euclidean_asf: features.euclidean,
|
|
|
built_up_area: features.builtup,
|
|
|
network_asf: features.network,
|
|
|
bus_stop_asf: features.busstop
|
|
|
},
|
|
|
prediction: parseFloat(predictionScore),
|
|
|
classification: classification,
|
|
|
remedial_measures: remedialMeasures[classification] ? remedialMeasures[classification].title : 'N/A'
|
|
|
};
|
|
|
|
|
|
const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(results, null, 2));
|
|
|
const downloadAnchor = document.createElement('a');
|
|
|
downloadAnchor.setAttribute("href", dataStr);
|
|
|
downloadAnchor.setAttribute("download", `accessibility_${cityName.replace(/[^a-z0-9]/gi, '_')}_${Date.now()}.json`);
|
|
|
document.body.appendChild(downloadAnchor);
|
|
|
downloadAnchor.click();
|
|
|
document.body.removeChild(downloadAnchor);
|
|
|
|
|
|
|
|
|
const originalText = document.querySelector('.btn-success').innerHTML;
|
|
|
document.querySelector('.btn-success').innerHTML = '✅ Exported!';
|
|
|
setTimeout(() => {
|
|
|
document.querySelector('.btn-success').innerHTML = originalText;
|
|
|
}, 2000);
|
|
|
}
|
|
|
|
|
|
|
|
|
window.onload = function() {
|
|
|
|
|
|
initializeCitySelector();
|
|
|
|
|
|
|
|
|
updateValue('euclidean', 70);
|
|
|
updateValue('builtup', 60);
|
|
|
updateValue('network', 75);
|
|
|
updateValue('busstop', 80);
|
|
|
|
|
|
|
|
|
updatePrediction();
|
|
|
};
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
