File size: 5,888 Bytes
0d4f97b | 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 | <!DOCTYPE html>
<html>
<head>
<title>Gas Danger Monitoring</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.dashboard { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.card { background: #f5f5f5; padding: 15px; border-radius: 8px; margin-bottom: 15px; }
.danger { background: #ffcccc; border-left: 5px solid red; }
.safe { background: #ccffcc; border-left: 5px solid green; }
.gauge { height: 20px; background: #ddd; border-radius: 10px; margin: 5px 0; }
.gauge-fill { height: 100%; border-radius: 10px; }
</style>
</head>
<body>
<h1>Factory Gas Monitoring</h1>
<div class="dashboard">
<div>
<div class="card" id="status-card">
<h2>System Status: <span id="overall-status">Loading...</span></h2>
<p>Danger Probability: <span id="danger-prob">-</span></p>
<div class="gauge">
<div class="gauge-fill" id="danger-gauge"></div>
</div>
</div>
<div class="card">
<h2>Gas Levels vs Safety Thresholds</h2>
<canvas id="gasChart" height="300"></canvas>
</div>
</div>
<div>
<div class="card">
<h2>Alerts</h2>
<div id="alerts-container"></div>
</div>
<div class="card">
<h2>Key Metrics</h2>
<div id="metrics">
<p>Last Updated: <span id="timestamp">-</span></p>
<p>Top Risk Factor: <span id="top-risk">CO_rolling_12h</span></p>
</div>
</div>
</div>
</div>
<script>
let gasChart;
// Fetch data every 5 seconds
function updateData() {
fetch('/api/predict')
.then(response => response.json())
.then(data => {
// Update overall status
document.getElementById('overall-status').textContent =
data.overall_status.toUpperCase();
document.getElementById('overall-status').className = data.overall_status;
// Update danger probability
const dangerPercent = (data.prediction * 100).toFixed(1);
document.getElementById('danger-prob').textContent = ${dangerPercent}%;
document.getElementById('danger-gauge').style.width = ${dangerPercent}%;
document.getElementById('danger-gauge').style.backgroundColor =
data.prediction > 0.4 ? 'red' : 'green';
// Update timestamp
document.getElementById('timestamp').textContent =
new Date(data.timestamp).toLocaleString();
// Update alerts
const alertsContainer = document.getElementById('alerts-container');
alertsContainer.innerHTML = '';
for (const [gas, info] of Object.entries(data.alerts)) {
const alertDiv = document.createElement('div');
alertDiv.className = card ${info.status};
alertDiv.innerHTML = `
<h3>${gas}</h3>
<p>${info.value.toFixed(2)} ppm (Threshold: ${info.threshold} ppm)</p>
<p>Status: <strong>${info.status.toUpperCase()}</strong></p>
`;
alertsContainer.appendChild(alertDiv);
}
// Update chart
updateChart(data.alerts);
});
}
function updateChart(alerts) {
const gases = Object.keys(alerts);
const values = gases.map(gas => alerts[gas].value);
const thresholds = gases.map(gas => alerts[gas].threshold);
if (gasChart) {
gasChart.data.datasets[0].data = values;
gasChart.data.datasets[1].data = thresholds;
gasChart.update();
} else {
const ctx = document.getElementById('gasChart').getContext('2d');
gasChart = new Chart(ctx, {
type: 'bar',
data: {
labels: gases,
datasets: [
{
label: 'Current Level (ppm)',
data: values,
backgroundColor: values.map((v, i) =>
v > thresholds[i] ? 'rgba(255, 99, 132, 0.7)' : 'rgba(54, 162, 235, 0.7)'
)
},
{
label: 'Safety Threshold',
data: thresholds,
type: 'line',
borderColor: 'rgba(255, 159, 64, 1)',
borderWidth: 2,
fill: false
}
]
},
options: {
scales: {
y: { beginAtZero: true, title: { display: true, text: 'Concentration (ppm)' } }
}
}
});
}
}
// Initial load
updateData();
setInterval(updateData, 5000); // Refresh every 5 seconds
</script>
</body>
</html>
|