Hugging Face's logo

Spaces:
ALAMDIENG
/
waste-prediction-api
Running

App Files Community
3
waste-prediction-api / static /index.html
ALAMDIENG's picture
ALAMDIENG
feat: implement AI autopilot, news compilation, 6-category waste composition, and API documentation
0ab1c9b
Raw History Blame
24.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aeterna AI - Waste Intelligence Platform</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;700&display=swap" rel="stylesheet">
<!-- Leaflet.js Map Library -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<!-- Background Canvas for Interactive Particle Rain -->
<canvas id="rain-canvas"></canvas>
<!-- Navigation Header -->
<header>
<div class="logo-container">
<span class="logo-text">AETERNA<span class="highlight">AI</span></span>
<span class="version-tag">v4.0.0 (Eco-Twin)</span>
</div>
<nav class="nav-links">
<button class="nav-btn active" data-target="page-home">HOME</button>
<button class="nav-btn" data-target="page-autopilot">AI AUTOPILOT</button>
<button class="nav-btn" data-target="page-predictor">SIMULATION TOOL</button>
<button class="nav-btn" data-target="page-news">NEWS FEED</button>
<button class="nav-btn" data-target="page-alerts">REGIONAL ALERTS</button>
</nav>
<div class="system-status">
<span class="status-indicator online"></span>
<span class="status-label">System Online</span>
</div>
</header>
<!-- HOME PAGE -->
<div id="page-home" class="page-container active">
<section class="hero-section">
<div class="hero-content">
<h1 class="hero-title">NEXT-GEN WASTE FORECASTING</h1>
<p class="hero-subtitle">Meningkatkan efisiensi tata kelola sampah DKI Jakarta hingga 98.28% dengan pemodelan spasial temporal real-time.</p>
<div class="hero-actions">
<button class="action-btn" onclick="switchPage('page-autopilot')">
<span class="btn-text">OPEN AUTOPILOT</span>
<span class="btn-glow"></span>
</button>
<button class="action-btn secondary-btn" onclick="switchPage('page-news')">
<span class="btn-text">EXPLORE NEWS</span>
<span class="btn-glow"></span>
</button>
</div>
</div>
<div class="hero-stats-panel panel">
<h3 class="panel-subtitle">Jakarta Waste Baseline</h3>
<div class="hero-stat-grid">
<div class="hero-stat-card">
<span class="h-stat-label">Daily Waste Total</span>
<span class="h-stat-value text-glow">8,020 <span class="unit">Tons</span></span>
</div>
<div class="hero-stat-card">
<span class="h-stat-label">Kecamatan Monitored</span>
<span class="h-stat-value">44 <span class="unit">Regions</span></span>
</div>
</div>
</div>
</section>
<!-- Keunggulan Aeterna AI -->
<section class="container features-section">
<h2 class="section-title">KEUNGGULAN AETERNA AI</h2>
<div class="features-grid">
<div class="panel feature-card">
<div class="feature-icon font-display">01</div>
<h3 class="feature-name">Akurasi Validitas Tinggi (98.28%)</h3>
<p class="feature-desc">Menggunakan arsitektur model Gradient Boosting Regressor (GBR) yang dioptimasi via GridSearchCV dengan metrik komparasi MAE, RMSE, dan MAPE secara berdampingan.</p>
</div>
<div class="panel feature-card">
<div class="feature-icon font-display">02</div>
<h3 class="feature-name">Integrasi Live Cuaca Open-Meteo</h3>
<p class="feature-desc">API dinamis asinkron yang menarik data curah hujan live tingkat kecamatan secara real-time untuk memprediksi tonase sampah basah akibat rembesan air hujan.</p>
</div>
<div class="panel feature-card">
<div class="feature-icon font-display">03</div>
<h3 class="feature-name">Pemantauan Berita Sampah 1 Jam</h3>
<p class="feature-desc">AI Scheduler internal merayap internet secara berkala tiap 1 jam untuk menangkap isu operasional, pembatasan Bantargebang, dan regulasi persampahan DKI Jakarta.</p>
</div>
<div class="panel feature-card">
<div class="feature-icon font-display">04</div>
<h3 class="feature-name">Kalibrasi Spasial 44 Kecamatan</h3>
<p class="feature-desc">Model peramalan dikalibrasi hulu-hilir menggunakan data primer Dinas Lingkungan Hidup DKI Jakarta, mencakup tonase baseline spesifik tiap kecamatan secara akuntabel.</p>
</div>
</div>
</section>
<!-- Sumber Data & Akuntabilitas -->
<section class="container data-sources-section">
<h2 class="section-title">TRANSPARANSI SUMBER DATA</h2>
<div class="panel sources-panel">
<div class="sources-grid" style="display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:1.5rem;">
<div class="source-item">
<h4 style="color:var(--cyan); margin-bottom:0.5rem; font-family:var(--font-display);">1. Timbulan Sampah</h4>
<p style="font-size:0.85rem; color:var(--text-muted); line-height:1.5;">Data baseline disesuaikan dengan volume total ~8.020 Ton/hari dari <strong>Dinas Lingkungan Hidup (DLH) DKI Jakarta</strong> dan SIPSN Kementerian LHK.</p>
</div>
<div class="source-item">
<h4 style="color:var(--cyan); margin-bottom:0.5rem; font-family:var(--font-display);">2. Prediksi Cuaca</h4>
<p style="font-size:0.85rem; color:var(--text-muted); line-height:1.5;">Data curah hujan ditarik live menggunakan <strong>Open-Meteo API</strong> berdasarkan koordinat geografis presisi masing-masing kecamatan.</p>
</div>
<div class="source-item">
<h4 style="color:var(--cyan); margin-bottom:0.5rem; font-family:var(--font-display);">3. Kalender Event & Transit</h4>
<p style="font-size:0.85rem; color:var(--text-muted); line-height:1.5;">Pola mobilitas disimulasikan dari ridership harian <strong>MRT Jakarta</strong> (~85.000) dan kalender acara Jakarta untuk mengukur lonjakan kerumunan.</p>
</div>
<div class="source-item">
<h4 style="color:var(--cyan); margin-bottom:0.5rem; font-family:var(--font-display);">4. Jarak Pengangkutan</h4>
<p style="font-size:0.85rem; color:var(--text-muted); line-height:1.5;">Jarak tempuh dihitung menggunakan <strong>Haversine Formula</strong> dari koordinat kecamatan ke TPST Bantargebang dengan faktor jalan winding 1.35x.</p>
</div>
</div>
</div>
</section>
</div>
<!-- AI AUTOPILOT PAGE -->
<div id="page-autopilot" class="page-container">
<section class="container page-header-section">
<h2 class="section-title">AETERNA AI AUTOPILOT FORECASTER</h2>
<p class="section-subtitle">Sistem peramalan otonom DKI Jakarta. AI berjalan mandiri memprediksi volume harian dan mengoordinasikan logistik tanpa campur tangan pengguna.</p>
</section>
<!-- Live Metrics Summary -->
<section class="container autopilot-grid" style="display:grid; grid-template-columns: 1.2fr 0.8fr; gap:1.5rem; margin-top:1.5rem;">
<!-- Panel Ringkasan Otonom -->
<div class="panel autopilot-summary-panel">
<h3 class="panel-title">LIVE CITY-WIDE FORECAST (TODAY)</h3>
<div class="stats-row" style="display:grid; grid-template-columns: 1fr 1fr; gap:1rem; margin-bottom:1.5rem; width:100%;">
<div class="panel stat-card text-glow" style="background:rgba(0,0,0,0.3); display:flex; flex-direction:column; padding:1.2rem; border-radius:8px;">
<span class="card-label">TOTAL DKI JAKARTA VOLUME</span>
<span id="auto-total-volume" class="card-value" style="font-size:1.8rem; font-weight:800; color:var(--cyan);">Calculating...</span>
<span class="card-meta">Autonomous prediction summation</span>
</div>
<div class="panel stat-card" style="background:rgba(0,0,0,0.3); display:flex; flex-direction:column; padding:1.2rem; border-radius:8px;">
<span class="card-label">TOTAL DISPATCHED TRUCKS</span>
<span id="auto-total-trucks" class="card-value" style="font-size:1.8rem; font-weight:800; color:#FFF;">Calculating...</span>
<span class="card-meta">Fleet size for all 44 kecamatan</span>
</div>
</div>
<h4 style="color:var(--cyan); margin-bottom:0.8rem; font-family:var(--font-display); font-size:0.95rem; border-left:3px solid var(--cyan); padding-left:8px; text-transform:uppercase;">Top 5 High-Risk Kecamatan Today:</h4>
<div id="auto-risk-list" class="auto-risk-list" style="display:flex; flex-direction:column; gap:0.8rem;">
<!-- Dynamically populated Top 5 -->
</div>
</div>
<!-- Konsol Berpikir AI -->
<div class="panel autopilot-console-panel" style="display:flex; flex-direction:column; height:100%;">
<h3 class="panel-title">AI THINKING CONSOLE</h3>
<div id="autopilot-log" style="flex:1; background:rgba(0,0,0,0.6); border:1px solid var(--border-color); border-radius:8px; padding:1.2rem; font-family:var(--font-mono); font-size:0.8rem; color:var(--green); overflow-y:auto; min-height:260px; line-height:1.6; box-shadow:inset 0 0 20px rgba(0,0,0,0.8);">
<!-- Dynamic logs -->
</div>
</div>
</section>
</div>
<!-- PREDICTOR PAGE -->
<div id="page-predictor" class="page-container">
<main class="dashboard-grid">
<!-- Panel Kontrol (Sidebar) -->
<section class="panel control-panel">
<h2 class="panel-title">PREDICTION CONFIG</h2>
<div class="control-group">
<label for="location-select">Target Location</label>
<select id="location-select" class="form-control">
<!-- Populated dynamically -->
</select>
</div>
<div class="control-group">
<label for="model-select">AI Forecasting Model</label>
<select id="model-select" class="form-control">
<option value="gradient_boosting" selected>Gradient Boosting (Real Data - 98.28% Acc)</option>
<option value="chronos">Amazon Chronos-T5 (Tiny)</option>
</select>
</div>
<div class="control-group">
<label for="forecast-slider">Forecast Horizon: <span id="forecast-val" class="value-display">7</span> Days</label>
<input type="range" id="forecast-slider" min="1" max="30" value="7" class="slider">
</div>
<div class="divider"></div>
<h3 class="panel-subtitle">Simulation Overrides</h3>
<div class="control-group">
<label for="rain-override">Manual Rain Override (mm)</label>
<div class="range-override-container">
<input type="range" id="rain-override" min="0" max="100" value="0" class="slider">
<span id="rain-override-val" class="override-display">Auto (Open-Meteo)</span>
</div>
</div>
<div class="control-group">
<label for="event-override">Crowd Event Scale (0 - 5)</label>
<input type="range" id="event-override" min="0" max="5" value="0" class="slider">
</div>
<div class="button-row">
<button id="predict-btn" class="action-btn">
<span class="btn-text">RUN PREDICTION</span>
<span class="btn-glow"></span>
</button>
<button id="export-btn" class="action-btn secondary-btn">
<span class="btn-text">EXPORT CSV</span>
<span class="btn-glow"></span>
</button>
</div>
</section>
<!-- Peta Interaktif & Main Stats -->
<section class="map-and-stats">
<!-- Peta Leaflet.js -->
<div class="panel map-panel">
<h2 class="panel-title">JAKARTA SPATIAL REALTIME MAP</h2>
<div class="map-container">
<div id="map"></div>
</div>
</div>
<!-- Stats Real-Time -->
<div class="stats-row">
<div class="panel stat-card text-glow">
<span class="card-label">TOTAL FORECAST VOLUME</span>
<span id="stat-total-volume" class="card-value">0.00 <span class="unit">Tons</span></span>
<span class="card-meta" id="stat-period-meta">Period: N/A</span>
</div>
<div class="panel stat-card">
<span class="card-label">RISK STATUS</span>
<span id="stat-risk-status" class="card-value status-badge safe">SAFE</span>
<span class="card-meta" id="stat-location-meta">Menteng</span>
</div>
<div class="panel stat-card">
<span class="card-label">RECOMMENDED FLEET</span>
<span id="stat-trucks" class="card-value">0 <span class="unit">Trucks (5T)</span></span>
<span class="card-meta">Logistics Fleet Suggestion</span>
</div>
</div>
</section>
<!-- Rincian Logistik & Analisis -->
<section class="analysis-panel">
<div class="panel category-panel">
<h2 class="panel-title">WASTE COMPOSITION BREAKDOWN</h2>
<div class="progress-container" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem;">
<div class="progress-item" style="margin-bottom: 0;">
<div class="progress-header">
<span>Organic / Sisa Makanan (~50.2%)</span>
<span id="val-organic">0.00 Ton</span>
</div>
<div class="progress-bar-bg">
<div id="bar-organic" class="progress-bar-fill organic" style="width: 0%;"></div>
</div>
</div>
<div class="progress-item" style="margin-bottom: 0;">
<div class="progress-header">
<span>Plastic / Plastik (~22.8%)</span>
<span id="val-plastic">0.00 Ton</span>
</div>
<div class="progress-bar-bg">
<div id="bar-plastic" class="progress-bar-fill plastic" style="width: 0%;"></div>
</div>
</div>
<div class="progress-item" style="margin-bottom: 0;">
<div class="progress-header">
<span>Paper & Cardboard / Kertas (~11.5%)</span>
<span id="val-paper">0.00 Ton</span>
</div>
<div class="progress-bar-bg">
<div id="bar-paper" class="progress-bar-fill paper" style="width: 0%;"></div>
</div>
</div>
<div class="progress-item" style="margin-bottom: 0;">
<div class="progress-header">
<span>Glass & Ceramics / Kaca (~3.2%)</span>
<span id="val-glass">0.00 Ton</span>
</div>
<div class="progress-bar-bg">
<div id="bar-glass" class="progress-bar-fill glass" style="width: 0%;"></div>
</div>
</div>
<div class="progress-item" style="margin-bottom: 0;">
<div class="progress-header">
<span>Textile & Leather / Tekstil (~4.2%)</span>
<span id="val-textile">0.00 Ton</span>
</div>
<div class="progress-bar-bg">
<div id="bar-textile" class="progress-bar-fill textile" style="width: 0%;"></div>
</div>
</div>
<div class="progress-item" style="margin-bottom: 0;">
<div class="progress-header">
<span>Metals & Others / Logam (~8.1%)</span>
<span id="val-metal">0.00 Ton</span>
</div>
<div class="progress-bar-bg">
<div id="bar-metal" class="progress-bar-fill metal" style="width: 0%;"></div>
</div>
</div>
</div>
</div>
<!-- Widget Cuaca Live & Info Event -->
<div class="panel weather-event-panel">
<h2 class="panel-title">WEATHER & EVENT FORECAST</h2>
<div class="weather-grid">
<div class="weather-info">
<span class="weather-temp" id="weather-forecast-text">Fetching Live...</span>
<span class="weather-label" id="weather-location-text">Jakarta, Indonesia</span>
</div>
<div class="weather-details">
<div>Precipitation (Rain): <span id="weather-precip" class="highlight">0.0 mm</span></div>
<div>BMKG Alert: <span id="weather-alert" class="highlight">None</span></div>
</div>
</div>
<div class="event-box" id="event-box">
<span class="event-title">Upcoming Event Calendar</span>
<p class="event-desc" id="event-desc-text">No major events registered for today.</p>
</div>
</div>
<!-- Logistics Plan -->
<div class="panel logistics-panel">
<h2 class="panel-title">OPERATIONAL LOGISTICS PLAN</h2>
<div class="logistics-grid">
<div class="log-item">
<span class="log-label">Manpower Required</span>
<span id="log-manpower" class="log-value">0 Crew</span>
</div>
<div class="log-item">
<span class="log-label">Estimated Collection Time</span>
<span id="log-duration" class="log-value">0.0 Hours</span>
</div>
<div class="log-item">
<span class="log-label">Operational Efficiency</span>
<span id="log-efficiency" class="log-value">85% (Optimal)</span>
</div>
<div class="log-item">
<span class="log-label">Confidence Score</span>
<span id="log-confidence" class="log-value highlight">92.0%</span>
</div>
</div>
</div>
</section>
</main>
<!-- Timeline Harian -->
<section class="container timeline-container">
<div class="panel timeline-panel">
<h2 class="panel-title">DAILY TIMELINE BREAKDOWN</h2>
<div id="timeline-list" class="timeline-list">
<!-- Will be dynamically populated -->
<div class="empty-timeline">Run a prediction to generate the forecast timeline.</div>
</div>
</div>
</section>
<!-- Hourly Breakdown -->
<section id="hourly-section" class="container hourly-container" style="display: none;">
<div class="panel hourly-panel">
<h2 class="panel-title">HOURLY DISPATCH RISK HEATMAP</h2>
<div class="hourly-grid" id="hourly-grid">
<!-- Dynamically populated -->
</div>
</div>
</section>
</div>
<!-- NEWS FEED PAGE -->
<div id="page-news" class="page-container">
<section class="container page-header-section">
<h2 class="section-title">MONITORING BERITA PERSAMPAHAN JAKARTA</h2>
<p class="section-subtitle">AI merayap berita terbaru seputar isu darurat sampah, operasional TPA Bantargebang, dan kebijakan DLH Jakarta secara otomatis setiap 1 jam.</p>
</section>
<section class="container news-feed-container">
<div class="news-grid" id="news-grid-list">
<!-- Dynamically populated with news cards -->
<div class="loading-news">Fetching latest waste intelligence updates from crawler...</div>
</div>
</section>
</div>
<!-- REGIONAL ALERTS PAGE -->
<div id="page-alerts" class="page-container">
<section class="container page-header-section">
<h2 class="section-title">REGIONAL HAZARD & ALERTS MAP</h2>
<p class="section-subtitle">Daftar wilayah kecamatan dengan prakiraan volume timbulan sampah melebihi ambang batas operasional harian.</p>
</section>
<section class="container alerts-feed-container">
<div class="alerts-summary panel">
<h3 class="panel-title">ACTIVE OPERATIONAL ALERTS</h3>
<div class="alerts-list-group" id="alerts-grid-list">
<!-- Dynamically populated with alert rows -->
<div class="loading-alerts">Evaluating active regional threshold warnings...</div>
</div>
</div>
</section>
</div>
<footer>
<p>&copy; 2026 Aeterna AI - DKI Jakarta Waste Management Intelligence. Calibrated with DLH & Open-Meteo.</p>
</footer>
<!-- Scripts -->
<script src="/static/app.js"></script>
</body>
</html>