Abeshith's picture
Add web UI with forms
475d366
Raw
History Blame Contribute Delete
2.37 kB
<!DOCTYPE html>
<html>
<head>
<title>Status - AutoML MLOps</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<nav>
<h1>AutoML MLOps Pipeline</h1>
<a href="/">Home</a>
<a href="/ui/predict">Predict</a>
<a href="/ui/health">Status</a>
<a href="/docs">API Docs</a>
</nav>
<div class="container">
<h2>System Status</h2>
<div class="card">
<h3>Health Check</h3>
<div id="healthStatus">Loading...</div>
</div>
<div class="card">
<h3>Model Management</h3>
<button onclick="reloadModel()" class="btn">Reload Model</button>
<div id="reloadStatus"></div>
</div>
</div>
<script>
async function checkHealth() {
try {
const response = await fetch('/health/');
const data = await response.json();
const color = data.status === 'healthy' ? '#27ae60' : '#e74c3c';
document.getElementById('healthStatus').innerHTML = `
<p><strong>Status:</strong> <span style="color: ${color}">${data.status.toUpperCase()}</span></p>
<p><strong>Model Loaded:</strong> ${data.model_loaded ? 'Yes' : 'No'}</p>
<p><strong>Message:</strong> ${data.message}</p>
`;
} catch (error) {
document.getElementById('healthStatus').innerHTML = `<p style="color: #e74c3c;">Error checking health</p>`;
}
}
async function reloadModel() {
try {
const response = await fetch('/train/reload', {method: 'POST'});
const data = await response.json();
document.getElementById('reloadStatus').innerHTML = `
<p style="color: #27ae60; margin-top: 10px;">${data.message}</p>
`;
setTimeout(checkHealth, 1000);
} catch (error) {
document.getElementById('reloadStatus').innerHTML = `
<p style="color: #e74c3c; margin-top: 10px;">Error reloading model</p>
`;
}
}
checkHealth();
setInterval(checkHealth, 5000);
</script>
</body>
</html>