| <!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> |
