|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
|
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Predictive Maintenance API - Test Interface</title> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
min-height: 100vh; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.header { |
|
|
text-align: center; |
|
|
color: white; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
font-size: 2.5em; |
|
|
margin-bottom: 10px; |
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.header p { |
|
|
font-size: 1.1em; |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
.tabs { |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.tab-button { |
|
|
flex: 1; |
|
|
padding: 15px; |
|
|
background: white; |
|
|
border: none; |
|
|
border-radius: 10px 10px 0 0; |
|
|
font-size: 1.1em; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.tab-button:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); |
|
|
} |
|
|
|
|
|
.tab-button.active { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.tab-content { |
|
|
display: none; |
|
|
background: white; |
|
|
border-radius: 0 0 10px 10px; |
|
|
padding: 30px; |
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.tab-content.active { |
|
|
display: block; |
|
|
animation: fadeIn 0.3s; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(10px); |
|
|
} |
|
|
|
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.form-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: 20px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
label { |
|
|
font-weight: 600; |
|
|
margin-bottom: 8px; |
|
|
color: #333; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 5px; |
|
|
} |
|
|
|
|
|
.info-icon { |
|
|
font-size: 0.9em; |
|
|
color: #667eea; |
|
|
cursor: help; |
|
|
} |
|
|
|
|
|
input, |
|
|
select { |
|
|
padding: 12px; |
|
|
border: 2px solid #e0e0e0; |
|
|
border-radius: 8px; |
|
|
font-size: 1em; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
input:focus, |
|
|
select:focus { |
|
|
outline: none; |
|
|
border-color: #667eea; |
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
|
|
} |
|
|
|
|
|
.button-group { |
|
|
display: flex; |
|
|
gap: 15px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
button { |
|
|
flex: 1; |
|
|
padding: 15px 30px; |
|
|
font-size: 1.1em; |
|
|
font-weight: 600; |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 12px rgba(102, 126, 234, 0.4); |
|
|
} |
|
|
|
|
|
.btn-secondary { |
|
|
background: #f0f0f0; |
|
|
color: #333; |
|
|
} |
|
|
|
|
|
.btn-secondary:hover { |
|
|
background: #e0e0e0; |
|
|
} |
|
|
|
|
|
.result-container { |
|
|
margin-top: 30px; |
|
|
padding: 25px; |
|
|
border-radius: 10px; |
|
|
display: none; |
|
|
animation: slideIn 0.4s; |
|
|
} |
|
|
|
|
|
@keyframes slideIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateX(-20px); |
|
|
} |
|
|
|
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.result-container.success { |
|
|
background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%); |
|
|
border: 2px solid #667eea; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.result-container.error { |
|
|
background: #fff0f0; |
|
|
border: 2px solid #ff4444; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.prediction-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 15px; |
|
|
margin-bottom: 20px; |
|
|
padding-bottom: 15px; |
|
|
border-bottom: 2px solid #e0e0e0; |
|
|
} |
|
|
|
|
|
.prediction-badge { |
|
|
padding: 10px 20px; |
|
|
border-radius: 25px; |
|
|
font-weight: 700; |
|
|
font-size: 1.2em; |
|
|
text-transform: uppercase; |
|
|
} |
|
|
|
|
|
.badge-healthy { |
|
|
background: #4caf50; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.badge-failure { |
|
|
background: #ff4444; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.confidence-bar { |
|
|
flex: 1; |
|
|
height: 30px; |
|
|
background: #e0e0e0; |
|
|
border-radius: 15px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.confidence-fill { |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: white; |
|
|
font-weight: 600; |
|
|
transition: width 0.5s ease; |
|
|
} |
|
|
|
|
|
.diagnostics-grid { |
|
|
display: grid; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.diagnostic-item { |
|
|
padding: 15px; |
|
|
background: white; |
|
|
border-radius: 8px; |
|
|
border-left: 4px solid #667eea; |
|
|
} |
|
|
|
|
|
.diagnostic-label { |
|
|
font-weight: 600; |
|
|
color: #667eea; |
|
|
margin-bottom: 5px; |
|
|
text-transform: uppercase; |
|
|
font-size: 0.9em; |
|
|
} |
|
|
|
|
|
.diagnostic-value { |
|
|
color: #333; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.severity-badge { |
|
|
display: inline-block; |
|
|
padding: 5px 15px; |
|
|
border-radius: 15px; |
|
|
font-weight: 600; |
|
|
font-size: 0.9em; |
|
|
} |
|
|
|
|
|
.severity-low { |
|
|
background: #4caf50; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.severity-medium { |
|
|
background: #ff9800; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.severity-high { |
|
|
background: #ff5722; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.severity-critical { |
|
|
background: #f44336; |
|
|
color: white; |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
|
|
|
0%, |
|
|
100% { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
50% { |
|
|
opacity: 0.7; |
|
|
} |
|
|
} |
|
|
|
|
|
.upload-area { |
|
|
border: 3px dashed #667eea; |
|
|
border-radius: 10px; |
|
|
padding: 40px; |
|
|
text-align: center; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
background: #f8f9ff; |
|
|
} |
|
|
|
|
|
.upload-area:hover { |
|
|
background: #eef1ff; |
|
|
border-color: #764ba2; |
|
|
} |
|
|
|
|
|
.upload-area.dragging { |
|
|
background: #e0e7ff; |
|
|
border-color: #4f46e5; |
|
|
} |
|
|
|
|
|
.upload-icon { |
|
|
font-size: 3em; |
|
|
color: #667eea; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.file-name { |
|
|
margin-top: 15px; |
|
|
padding: 10px; |
|
|
background: white; |
|
|
border-radius: 8px; |
|
|
font-weight: 600; |
|
|
color: #667eea; |
|
|
} |
|
|
|
|
|
.loading { |
|
|
display: none; |
|
|
text-align: center; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.loading.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.spinner { |
|
|
border: 4px solid #f3f3f3; |
|
|
border-top: 4px solid #667eea; |
|
|
border-radius: 50%; |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
animation: spin 1s linear infinite; |
|
|
margin: 0 auto 15px; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { |
|
|
transform: rotate(0deg); |
|
|
} |
|
|
|
|
|
100% { |
|
|
transform: rotate(360deg); |
|
|
} |
|
|
} |
|
|
|
|
|
.preset-buttons { |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
margin-bottom: 20px; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.preset-btn { |
|
|
padding: 8px 16px; |
|
|
background: #f0f0f0; |
|
|
border: 2px solid #667eea; |
|
|
border-radius: 20px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
font-size: 0.9em; |
|
|
font-weight: 600; |
|
|
color: #667eea; |
|
|
} |
|
|
|
|
|
.preset-btn:hover { |
|
|
background: #667eea; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.api-status { |
|
|
position: fixed; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
padding: 10px 20px; |
|
|
background: white; |
|
|
border-radius: 25px; |
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.status-dot { |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
animation: blink 2s infinite; |
|
|
} |
|
|
|
|
|
.status-online { |
|
|
background: #4caf50; |
|
|
} |
|
|
|
|
|
.status-offline { |
|
|
background: #ff4444; |
|
|
} |
|
|
|
|
|
@keyframes blink { |
|
|
|
|
|
0%, |
|
|
100% { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
50% { |
|
|
opacity: 0.5; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.form-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.button-group { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
font-size: 1.8em; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<div class="api-status" id="apiStatus"> |
|
|
<div class="status-dot status-offline" id="statusDot"></div> |
|
|
<span id="statusText">Checking...</span> |
|
|
</div> |
|
|
|
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1>🔧 Predictive Maintenance</h1> |
|
|
<p>ML-Powered Equipment Failure Prediction & Diagnostics</p> |
|
|
</div> |
|
|
|
|
|
<div class="tabs"> |
|
|
<button class="tab-button active" onclick="switchTab('single')"> |
|
|
📊 Single Prediction |
|
|
</button> |
|
|
<button class="tab-button" onclick="switchTab('batch')"> |
|
|
📁 Batch Processing |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="singleTab" class="tab-content active"> |
|
|
<h2 style="margin-bottom: 20px; color: #333;">🎯 Single Machine Prediction</h2> |
|
|
|
|
|
<div class="preset-buttons"> |
|
|
<button class="preset-btn" onclick="loadPreset('healthy')">✅ Healthy Machine</button> |
|
|
<button class="preset-btn" onclick="loadPreset('toolwear')">🔨 Tool Wear Critical</button> |
|
|
<button class="preset-btn" onclick="loadPreset('overstrain')">⚡ Power Overstrain</button> |
|
|
<button class="preset-btn" onclick="loadPreset('cooling')">❄️ Cooling Issue</button> |
|
|
</div> |
|
|
|
|
|
<form id="predictionForm" onsubmit="handleSinglePredict(event)"> |
|
|
<div class="form-grid"> |
|
|
<div class="form-group"> |
|
|
<label for="machine_id"> |
|
|
Machine ID <span class="info-icon" title="Optional identifier">ℹ️</span> |
|
|
</label> |
|
|
<input type="text" id="machine_id" placeholder="e.g., M_L_01"> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="type"> |
|
|
Machine Type <span class="info-icon" title="L=Low, M=Medium, H=High">ℹ️</span> |
|
|
</label> |
|
|
<select id="type" required> |
|
|
<option value="">Select Type</option> |
|
|
<option value="L">L - Low Quality</option> |
|
|
<option value="M">M - Medium Quality</option> |
|
|
<option value="H">H - High Quality</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="air_temperature"> |
|
|
Air Temperature (K) <span class="info-icon" title="Range: 250-350 K">ℹ️</span> |
|
|
</label> |
|
|
<input type="number" id="air_temperature" step="0.1" min="250" max="350" required |
|
|
placeholder="e.g., 298.1"> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="process_temperature"> |
|
|
Process Temperature (K) <span class="info-icon" title="Range: 250-400 K">ℹ️</span> |
|
|
</label> |
|
|
<input type="number" id="process_temperature" step="0.1" min="250" max="400" required |
|
|
placeholder="e.g., 308.6"> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="rotational_speed"> |
|
|
Rotational Speed (RPM) <span class="info-icon" title="Range: 0-3000 RPM">ℹ️</span> |
|
|
</label> |
|
|
<input type="number" id="rotational_speed" min="0" max="3000" required placeholder="e.g., 1551"> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="torque"> |
|
|
Torque (Nm) <span class="info-icon" title="Range: 0-100 Nm">ℹ️</span> |
|
|
</label> |
|
|
<input type="number" id="torque" step="0.1" min="0" max="100" required placeholder="e.g., 42.8"> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="tool_wear"> |
|
|
Tool Wear (min) <span class="info-icon" title="Range: 0-300 minutes">ℹ️</span> |
|
|
</label> |
|
|
<input type="number" id="tool_wear" min="0" max="300" required placeholder="e.g., 0"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="button-group"> |
|
|
<button type="submit" class="btn-primary">🔍 Analyze & Predict</button> |
|
|
<button type="button" class="btn-secondary" onclick="resetForm()">🔄 Reset Form</button> |
|
|
</div> |
|
|
</form> |
|
|
|
|
|
<div class="loading" id="loading"> |
|
|
<div class="spinner"></div> |
|
|
<p>Analyzing machine data...</p> |
|
|
</div> |
|
|
|
|
|
<div id="result" class="result-container"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="batchTab" class="tab-content"> |
|
|
<h2 style="margin-bottom: 20px; color: #333;">📁 Batch Processing</h2> |
|
|
|
|
|
<div class="upload-area" id="uploadArea" onclick="document.getElementById('csvFile').click()"> |
|
|
<div class="upload-icon">📤</div> |
|
|
<h3>Click or Drag & Drop CSV File</h3> |
|
|
<p style="margin-top: 10px; color: #666;">Upload a CSV file with machine data for batch prediction</p> |
|
|
<input type="file" id="csvFile" accept=".csv" style="display: none;" onchange="handleFileSelect(event)"> |
|
|
<div id="fileName" class="file-name" style="display: none;"></div> |
|
|
</div> |
|
|
|
|
|
<div style="margin-top: 20px; padding: 20px; background: #f8f9ff; border-radius: 10px;"> |
|
|
<h4 style="margin-bottom: 10px;">📋 Required CSV Columns:</h4> |
|
|
<ul style="list-style: none; padding-left: 0;"> |
|
|
<li>✓ <code>air_temperature</code> - Air temperature in Kelvin</li> |
|
|
<li>✓ <code>process_temperature</code> - Process temperature in Kelvin</li> |
|
|
<li>✓ <code>rotational_speed</code> - Rotational speed in RPM</li> |
|
|
<li>✓ <code>torque</code> - Torque in Nm</li> |
|
|
<li>✓ <code>tool_wear</code> - Tool wear in minutes</li> |
|
|
<li>✓ <code>type</code> - Machine type (L, M, or H)</li> |
|
|
<li>⭕ <code>machine_id</code> - Optional machine identifier</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="button-group" style="margin-top: 20px;"> |
|
|
<button class="btn-primary" onclick="uploadBatch()" id="uploadBtn" disabled>📊 Process Batch</button> |
|
|
<button class="btn-secondary" onclick="downloadTemplate()">⬇️ Download Template CSV</button> |
|
|
</div> |
|
|
|
|
|
<div class="loading" id="batchLoading"> |
|
|
<div class="spinner"></div> |
|
|
<p>Processing batch predictions...</p> |
|
|
</div> |
|
|
|
|
|
<div id="batchResult" class="result-container"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const API_URL = 'http://localhost:8000'; |
|
|
let selectedFile = null; |
|
|
|
|
|
|
|
|
async function checkApiStatus() { |
|
|
try { |
|
|
const response = await fetch(`${API_URL}/health`); |
|
|
const data = await response.json(); |
|
|
document.getElementById('statusDot').className = 'status-dot status-online'; |
|
|
document.getElementById('statusText').textContent = 'API Online'; |
|
|
} catch (error) { |
|
|
document.getElementById('statusDot').className = 'status-dot status-offline'; |
|
|
document.getElementById('statusText').textContent = 'API Offline'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function switchTab(tab) { |
|
|
document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active')); |
|
|
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); |
|
|
|
|
|
if (tab === 'single') { |
|
|
document.querySelector('.tab-button:nth-child(1)').classList.add('active'); |
|
|
document.getElementById('singleTab').classList.add('active'); |
|
|
} else { |
|
|
document.querySelector('.tab-button:nth-child(2)').classList.add('active'); |
|
|
document.getElementById('batchTab').classList.add('active'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function loadPreset(type) { |
|
|
const presets = { |
|
|
healthy: { |
|
|
machine_id: 'M_L_01', |
|
|
type: 'M', |
|
|
air_temperature: 298.1, |
|
|
process_temperature: 308.6, |
|
|
rotational_speed: 1551, |
|
|
torque: 42.8, |
|
|
tool_wear: 0 |
|
|
}, |
|
|
toolwear: { |
|
|
machine_id: 'M_H_03', |
|
|
type: 'H', |
|
|
air_temperature: 297.5, |
|
|
process_temperature: 312.8, |
|
|
rotational_speed: 1800, |
|
|
torque: 52.0, |
|
|
tool_wear: 220 |
|
|
}, |
|
|
overstrain: { |
|
|
machine_id: 'M_H_05', |
|
|
type: 'H', |
|
|
air_temperature: 298.5, |
|
|
process_temperature: 316.0, |
|
|
rotational_speed: 1900, |
|
|
torque: 72.5, |
|
|
tool_wear: 150 |
|
|
}, |
|
|
cooling: { |
|
|
machine_id: 'M_M_02', |
|
|
type: 'M', |
|
|
air_temperature: 299.8, |
|
|
process_temperature: 305.2, |
|
|
rotational_speed: 1650, |
|
|
torque: 45.0, |
|
|
tool_wear: 100 |
|
|
} |
|
|
}; |
|
|
|
|
|
const preset = presets[type]; |
|
|
Object.keys(preset).forEach(key => { |
|
|
const element = document.getElementById(key); |
|
|
if (element) element.value = preset[key]; |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
async function handleSinglePredict(event) { |
|
|
event.preventDefault(); |
|
|
|
|
|
const formData = { |
|
|
machine_id: document.getElementById('machine_id').value || null, |
|
|
type: document.getElementById('type').value, |
|
|
air_temperature: parseFloat(document.getElementById('air_temperature').value), |
|
|
process_temperature: parseFloat(document.getElementById('process_temperature').value), |
|
|
rotational_speed: parseInt(document.getElementById('rotational_speed').value), |
|
|
torque: parseFloat(document.getElementById('torque').value), |
|
|
tool_wear: parseInt(document.getElementById('tool_wear').value) |
|
|
}; |
|
|
|
|
|
document.getElementById('loading').classList.add('active'); |
|
|
document.getElementById('result').style.display = 'none'; |
|
|
|
|
|
try { |
|
|
console.log('Sending request to API:', formData); |
|
|
|
|
|
const response = await fetch(`${API_URL}/predict`, { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify(formData) |
|
|
}); |
|
|
|
|
|
console.log('Response status:', response.status); |
|
|
|
|
|
const data = await response.json(); |
|
|
console.log('Response data:', data); |
|
|
|
|
|
if (!response.ok) { |
|
|
throw new Error(data.detail || 'Prediction failed'); |
|
|
} |
|
|
|
|
|
displayResult(data); |
|
|
} catch (error) { |
|
|
console.error('Error during prediction:', error); |
|
|
displayError(error.message); |
|
|
} finally { |
|
|
document.getElementById('loading').classList.remove('active'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function displayResult(data) { |
|
|
console.log('Displaying result:', data); |
|
|
|
|
|
const resultDiv = document.getElementById('result'); |
|
|
const isFailure = data.prediction === 'FAILURE'; |
|
|
const severityClass = `severity-${data.diagnostics.severity.toLowerCase()}`; |
|
|
|
|
|
|
|
|
const probability = (data.confidence * 100).toFixed(1); |
|
|
|
|
|
resultDiv.className = 'result-container success'; |
|
|
resultDiv.style.display = 'block'; |
|
|
resultDiv.innerHTML = ` |
|
|
<h3 style="margin-bottom: 15px;">🔍 Prediction Result</h3> |
|
|
|
|
|
<!-- Prediction Badge and Confidence Bar --> |
|
|
<div class="prediction-header"> |
|
|
<span class="prediction-badge ${isFailure ? 'badge-failure' : 'badge-healthy'}"> |
|
|
${data.prediction} |
|
|
</span> |
|
|
<div class="confidence-bar"> |
|
|
<div class="confidence-fill" style="width: ${probability}%"> |
|
|
${probability}% Confidence |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Severity and Risk Level --> |
|
|
<div style="display: flex; gap: 10px; margin: 15px 0;"> |
|
|
<span class="severity-badge ${severityClass}" style="font-size: 14px; padding: 8px 16px;"> |
|
|
${data.diagnostics.severity} SEVERITY |
|
|
</span> |
|
|
</div> |
|
|
|
|
|
<!-- Main Diagnostics Grid --> |
|
|
<div class="diagnostics-grid"> |
|
|
<div class="diagnostic-item"> |
|
|
<div class="diagnostic-label">🎯 Primary Cause</div> |
|
|
<div class="diagnostic-value">${data.diagnostics.primary_cause}</div> |
|
|
</div> |
|
|
|
|
|
<div class="diagnostic-item"> |
|
|
<div class="diagnostic-label">📊 Sensor Alert</div> |
|
|
<div class="diagnostic-value">${data.diagnostics.sensor_alert}</div> |
|
|
</div> |
|
|
|
|
|
<div class="diagnostic-item"> |
|
|
<div class="diagnostic-label">🔧 Recommended Action</div> |
|
|
<div class="diagnostic-value">${data.diagnostics.recommended_action}</div> |
|
|
</div> |
|
|
|
|
|
${data.machine_id ? ` |
|
|
<div class="diagnostic-item"> |
|
|
<div class="diagnostic-label">🏷️ Machine ID</div> |
|
|
<div class="diagnostic-value">${data.machine_id}</div> |
|
|
</div> |
|
|
` : ''} |
|
|
|
|
|
<div class="diagnostic-item"> |
|
|
<div class="diagnostic-label">⏰ Timestamp</div> |
|
|
<div class="diagnostic-value">${new Date(data.timestamp).toLocaleString()}</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Engineered Features Section --> |
|
|
${data.features && Object.keys(data.features).length > 0 ? ` |
|
|
<div style="margin-top: 25px;"> |
|
|
<h4 style="margin-bottom: 15px; color: #667eea;">📊 Engineered Features Analysis</h4> |
|
|
<div class="feature-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;"> |
|
|
${Object.entries(data.features).map(([key, value]) => ` |
|
|
<div class="feature-item" style="background: white; padding: 12px; border-radius: 8px; border-left: 3px solid #667eea;"> |
|
|
<div class="feature-label" style="font-size: 11px; color: #6c757d; margin-bottom: 4px; text-transform: uppercase;"> |
|
|
${key.replace(/_/g, ' ')} |
|
|
</div> |
|
|
<div class="feature-value" style="font-size: 16px; font-weight: 600; color: #333;"> |
|
|
${typeof value === 'number' ? value.toFixed(2) : value} |
|
|
</div> |
|
|
</div> |
|
|
`).join('')} |
|
|
</div> |
|
|
</div> |
|
|
` : ''} |
|
|
|
|
|
<!-- Anomaly Detection Section (if available) --> |
|
|
${data.anomalies && data.anomalies.length > 0 ? ` |
|
|
<div style="margin-top: 25px; padding: 20px; background: #f8f9fa; border-radius: 10px; border-left: 5px solid #667eea;"> |
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;"> |
|
|
<h4 style="margin: 0; color: #667eea;">🔧 Parameter Anomaly Analysis</h4> |
|
|
<span style="color: #667eea; font-weight: 600; font-size: 14px;"> |
|
|
${data.anomalies.length} anomalies detected |
|
|
</span> |
|
|
</div> |
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px;"> |
|
|
${data.anomalies.map(anomaly => ` |
|
|
<div style="background: white; padding: 15px; border-radius: 10px; border-left: 4px solid ${anomaly.status === 'CRITICAL' ? '#dc3545' : anomaly.status === 'WARNING' ? '#ffc107' : '#28a745'};"> |
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;"> |
|
|
<strong style="font-size: 16px;">${anomaly.parameter}</strong> |
|
|
<span style="font-size: 12px; padding: 4px 8px; border-radius: 10px; font-weight: 600; background: ${anomaly.status === 'CRITICAL' ? '#f8d7da' : anomaly.status === 'WARNING' ? '#fff3cd' : '#d4edda'}; color: ${anomaly.status === 'CRITICAL' ? '#721c24' : anomaly.status === 'WARNING' ? '#856404' : '#155724'};"> |
|
|
${anomaly.status} |
|
|
</span> |
|
|
</div> |
|
|
<div style="font-size: 18px; font-weight: 600; color: #333; margin: 5px 0;"> |
|
|
Current: ${anomaly.value} |
|
|
</div> |
|
|
<div style="font-size: 12px; color: #6c757d; margin: 5px 0;"> |
|
|
Normal range: ${anomaly.normal_range} |
|
|
</div> |
|
|
<div style="font-size: 13px; color: #495057; margin-top: 10px; padding: 8px; background: #f1f3f4; border-radius: 6px;"> |
|
|
${anomaly.explanation} |
|
|
</div> |
|
|
</div> |
|
|
`).join('')} |
|
|
</div> |
|
|
</div> |
|
|
` : ''} |
|
|
|
|
|
<!-- Overall Health Summary (if available) --> |
|
|
${data.overall_health ? ` |
|
|
<div style="margin-top: 20px; padding: 15px; border-radius: 10px; font-weight: 600; text-align: center; background: ${data.overall_health.includes('EXCELLENT') ? '#d4edda' : data.overall_health.includes('GOOD') ? '#d1ecf1' : data.overall_health.includes('FAIR') ? '#fff3cd' : '#f8d7da'}; color: ${data.overall_health.includes('EXCELLENT') ? '#155724' : data.overall_health.includes('GOOD') ? '#0c5460' : data.overall_health.includes('FAIR') ? '#856404' : '#721c24'}; border: 2px solid ${data.overall_health.includes('EXCELLENT') ? '#28a745' : data.overall_health.includes('GOOD') ? '#17a2b8' : data.overall_health.includes('FAIR') ? '#ffc107' : '#dc3545'};"> |
|
|
🏥 ${data.overall_health} |
|
|
</div> |
|
|
` : ''} |
|
|
`; |
|
|
} |
|
|
|
|
|
|
|
|
function displayError(message) { |
|
|
console.error('Displaying error:', message); |
|
|
|
|
|
const resultDiv = document.getElementById('result'); |
|
|
resultDiv.className = 'result-container error'; |
|
|
resultDiv.style.display = 'block'; |
|
|
resultDiv.innerHTML = ` |
|
|
<h3 style="color: #ff4444; margin-bottom: 10px;">❌ Error</h3> |
|
|
<p>${message}</p> |
|
|
`; |
|
|
} |
|
|
|
|
|
|
|
|
function resetForm() { |
|
|
document.getElementById('predictionForm').reset(); |
|
|
document.getElementById('result').style.display = 'none'; |
|
|
} |
|
|
|
|
|
|
|
|
const uploadArea = document.getElementById('uploadArea'); |
|
|
|
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
|
|
uploadArea.addEventListener(eventName, preventDefaults, false); |
|
|
}); |
|
|
|
|
|
function preventDefaults(e) { |
|
|
e.preventDefault(); |
|
|
e.stopPropagation(); |
|
|
} |
|
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => { |
|
|
uploadArea.addEventListener(eventName, () => { |
|
|
uploadArea.classList.add('dragging'); |
|
|
}, false); |
|
|
}); |
|
|
|
|
|
['dragleave', 'drop'].forEach(eventName => { |
|
|
uploadArea.addEventListener(eventName, () => { |
|
|
uploadArea.classList.remove('dragging'); |
|
|
}, false); |
|
|
}); |
|
|
|
|
|
uploadArea.addEventListener('drop', (e) => { |
|
|
const files = e.dataTransfer.files; |
|
|
if (files.length > 0) { |
|
|
handleFile(files[0]); |
|
|
} |
|
|
}, false); |
|
|
|
|
|
function handleFileSelect(event) { |
|
|
const file = event.target.files[0]; |
|
|
if (file) { |
|
|
handleFile(file); |
|
|
} |
|
|
} |
|
|
|
|
|
function handleFile(file) { |
|
|
if (!file.name.endsWith('.csv')) { |
|
|
alert('Please upload a CSV file'); |
|
|
return; |
|
|
} |
|
|
|
|
|
selectedFile = file; |
|
|
document.getElementById('fileName').style.display = 'block'; |
|
|
document.getElementById('fileName').textContent = `📄 ${file.name}`; |
|
|
document.getElementById('uploadBtn').disabled = false; |
|
|
} |
|
|
|
|
|
|
|
|
async function uploadBatch() { |
|
|
if (!selectedFile) return; |
|
|
|
|
|
const formData = new FormData(); |
|
|
formData.append('file', selectedFile); |
|
|
|
|
|
document.getElementById('batchLoading').classList.add('active'); |
|
|
document.getElementById('batchResult').style.display = 'none'; |
|
|
|
|
|
try { |
|
|
console.log('Uploading batch file:', selectedFile.name); |
|
|
|
|
|
const response = await fetch(`${API_URL}/predict/batch/json`, { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}); |
|
|
|
|
|
if (!response.ok) { |
|
|
const error = await response.json(); |
|
|
throw new Error(error.detail || 'Batch processing failed'); |
|
|
} |
|
|
|
|
|
const data = await response.json(); |
|
|
console.log('Batch response:', data); |
|
|
|
|
|
displayBatchResults(data); |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Batch processing error:', error); |
|
|
const resultDiv = document.getElementById('batchResult'); |
|
|
resultDiv.className = 'result-container error'; |
|
|
resultDiv.style.display = 'block'; |
|
|
resultDiv.innerHTML = ` |
|
|
<h3 style="color: #ff4444; margin-bottom: 10px;">❌ Batch Processing Error</h3> |
|
|
<p>${error.message}</p> |
|
|
<p style="margin-top: 10px; font-size: 0.9em; color: #666;"> |
|
|
Make sure your CSV has the required columns: air_temperature, process_temperature, |
|
|
rotational_speed, torque, tool_wear, type |
|
|
</p> |
|
|
`; |
|
|
} finally { |
|
|
document.getElementById('batchLoading').classList.remove('active'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function displayBatchResults(data) { |
|
|
const resultDiv = document.getElementById('batchResult'); |
|
|
resultDiv.className = 'result-container success'; |
|
|
resultDiv.style.display = 'block'; |
|
|
|
|
|
const summary = data.summary; |
|
|
const results = data.results; |
|
|
|
|
|
let html = ` |
|
|
<h3 style="margin-bottom: 20px;">📊 Batch Processing Results</h3> |
|
|
|
|
|
<!-- Summary Statistics --> |
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 25px;"> |
|
|
<div style="background: white; padding: 20px; border-radius: 10px; text-align: center; border-left: 4px solid #667eea;"> |
|
|
<div style="font-size: 32px; font-weight: 700; color: #667eea;">${summary.total_records}</div> |
|
|
<div style="font-size: 14px; color: #666; margin-top: 5px;">Total Records</div> |
|
|
</div> |
|
|
<div style="background: white; padding: 20px; border-radius: 10px; text-align: center; border-left: 4px solid #4caf50;"> |
|
|
<div style="font-size: 32px; font-weight: 700; color: #4caf50;">${summary.predictions.healthy}</div> |
|
|
<div style="font-size: 14px; color: #666; margin-top: 5px;">Healthy</div> |
|
|
</div> |
|
|
<div style="background: white; padding: 20px; border-radius: 10px; text-align: center; border-left: 4px solid #ff4444;"> |
|
|
<div style="font-size: 32px; font-weight: 700; color: #ff4444;">${summary.predictions.failure}</div> |
|
|
<div style="font-size: 14px; color: #666; margin-top: 5px;">Failures</div> |
|
|
</div> |
|
|
<div style="background: white; padding: 20px; border-radius: 10px; text-align: center; border-left: 4px solid #ff9800;"> |
|
|
<div style="font-size: 32px; font-weight: 700; color: #ff9800;">${summary.failure_rate}%</div> |
|
|
<div style="font-size: 14px; color: #666; margin-top: 5px;">Failure Rate</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Individual Results --> |
|
|
<h4 style="margin: 25px 0 15px 0; color: #333;">🔍 Detailed Analysis</h4> |
|
|
<div style="display: flex; flex-direction: column; gap: 20px;"> |
|
|
`; |
|
|
|
|
|
|
|
|
results.forEach((result, index) => { |
|
|
const isFailure = result.prediction === 'FAILURE'; |
|
|
const severityClass = result.diagnostics ? `severity-${result.diagnostics.severity.toLowerCase()}` : ''; |
|
|
const probability = (result.confidence * 100).toFixed(1); |
|
|
|
|
|
html += ` |
|
|
<div style="background: white; padding: 20px; border-radius: 10px; border-left: 5px solid ${isFailure ? '#ff4444' : '#4caf50'};"> |
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 2px solid #e0e0e0;"> |
|
|
<div style="display: flex; align-items: center; gap: 15px;"> |
|
|
<span style="font-size: 14px; font-weight: 600; color: #666;">Row ${result.row_number}</span> |
|
|
<span style="font-size: 14px; font-weight: 600; color: #667eea;">${result.machine_id}</span> |
|
|
<span class="prediction-badge ${isFailure ? 'badge-failure' : 'badge-healthy'}" style="font-size: 14px; padding: 6px 14px;"> |
|
|
${result.prediction} |
|
|
</span> |
|
|
${result.diagnostics ? ` |
|
|
<span class="severity-badge ${severityClass}" style="font-size: 12px; padding: 4px 10px;"> |
|
|
${result.diagnostics.severity} |
|
|
</span> |
|
|
` : ''} |
|
|
</div> |
|
|
<div style="background: #e0e0e0; height: 20px; width: 120px; border-radius: 10px; overflow: hidden;"> |
|
|
<div style="height: 100%; background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); width: ${probability}%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: white; font-weight: 600;"> |
|
|
${probability}% |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
${result.diagnostics ? ` |
|
|
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 15px; margin-bottom: 15px;"> |
|
|
<div style="padding: 12px; background: #f8f9fa; border-radius: 8px;"> |
|
|
<div style="font-size: 11px; color: #667eea; font-weight: 600; margin-bottom: 5px; text-transform: uppercase;">🎯 Primary Cause</div> |
|
|
<div style="font-size: 13px; color: #333;">${result.diagnostics.primary_cause}</div> |
|
|
</div> |
|
|
<div style="padding: 12px; background: #f8f9fa; border-radius: 8px;"> |
|
|
<div style="font-size: 11px; color: #667eea; font-weight: 600; margin-bottom: 5px; text-transform: uppercase;">🔧 Recommended Action</div> |
|
|
<div style="font-size: 13px; color: #333;">${result.diagnostics.recommended_action}</div> |
|
|
</div> |
|
|
</div> |
|
|
` : ''} |
|
|
|
|
|
${result.anomalies && result.anomalies.length > 0 ? ` |
|
|
<div style="margin-top: 15px; padding: 15px; background: #f8f9fa; border-radius: 8px;"> |
|
|
<div style="font-size: 12px; color: #667eea; font-weight: 600; margin-bottom: 10px;"> |
|
|
⚠️ ${result.anomalies.length} Anomalies Detected |
|
|
</div> |
|
|
<div style="display: flex; flex-wrap: wrap; gap: 10px;"> |
|
|
${result.anomalies.map(anomaly => ` |
|
|
<span style="font-size: 11px; padding: 4px 8px; border-radius: 12px; background: ${anomaly.status === 'CRITICAL' ? '#f8d7da' : anomaly.status === 'WARNING' ? '#fff3cd' : '#d4edda'}; color: ${anomaly.status === 'CRITICAL' ? '#721c24' : anomaly.status === 'WARNING' ? '#856404' : '#155724'};"> |
|
|
${anomaly.parameter} |
|
|
</span> |
|
|
`).join('')} |
|
|
</div> |
|
|
</div> |
|
|
` : ''} |
|
|
|
|
|
${result.overall_health ? ` |
|
|
<div style="margin-top: 15px; padding: 10px; border-radius: 8px; text-align: center; font-size: 13px; font-weight: 600; background: ${result.overall_health.includes('EXCELLENT') ? '#d4edda' : result.overall_health.includes('GOOD') ? '#d1ecf1' : result.overall_health.includes('FAIR') ? '#fff3cd' : '#f8d7da'}; color: ${result.overall_health.includes('EXCELLENT') ? '#155724' : result.overall_health.includes('GOOD') ? '#0c5460' : result.overall_health.includes('FAIR') ? '#856404' : '#721c24'};"> |
|
|
${result.overall_health} |
|
|
</div> |
|
|
` : ''} |
|
|
|
|
|
${result.error ? ` |
|
|
<div style="margin-top: 10px; padding: 10px; background: #fff0f0; border-radius: 8px; color: #ff4444; font-size: 13px;"> |
|
|
<strong>Error:</strong> ${result.error} |
|
|
</div> |
|
|
` : ''} |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
|
|
|
html += ` |
|
|
</div> |
|
|
|
|
|
<!-- Download CSV Button --> |
|
|
<div style="margin-top: 25px; text-align: center;"> |
|
|
<button onclick="downloadBatchCSV()" class="btn-secondary" style="padding: 12px 24px;"> |
|
|
⬇️ Download Results as CSV |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
resultDiv.innerHTML = html; |
|
|
} |
|
|
|
|
|
|
|
|
async function downloadBatchCSV() { |
|
|
if (!selectedFile) return; |
|
|
|
|
|
try { |
|
|
const formData = new FormData(); |
|
|
formData.append('file', selectedFile); |
|
|
|
|
|
const response = await fetch(`${API_URL}/predict/batch`, { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}); |
|
|
|
|
|
if (!response.ok) { |
|
|
throw new Error('CSV download failed'); |
|
|
} |
|
|
|
|
|
|
|
|
const blob = await response.blob(); |
|
|
const url = window.URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = `predictions_${new Date().getTime()}.csv`; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
window.URL.revokeObjectURL(url); |
|
|
document.body.removeChild(a); |
|
|
} catch (error) { |
|
|
alert('Failed to download CSV: ' + error.message); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function downloadTemplate() { |
|
|
const template = `machine_id,air_temperature,process_temperature,rotational_speed,torque,tool_wear,type |
|
|
M_L_01,298.1,308.6,1551,42.8,0,M |
|
|
M_L_02,299.2,310.1,1450,38.5,150,L |
|
|
M_H_01,297.5,312.8,1800,65.2,220,H`; |
|
|
|
|
|
const blob = new Blob([template], { type: 'text/csv' }); |
|
|
const url = window.URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = 'template.csv'; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
window.URL.revokeObjectURL(url); |
|
|
document.body.removeChild(a); |
|
|
} |
|
|
|
|
|
|
|
|
checkApiStatus(); |
|
|
setInterval(checkApiStatus, 10000); |
|
|
</script> |
|
|
</body> |
|
|
|
|
|
</html> |
