| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Predictive Maintenance — Intelligence Platform</title> |
| <meta name="description" content="Industrial predictive maintenance intelligence platform with real-time health monitoring, remaining useful life prediction, and AI-powered diagnostics."> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet"> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
| |
| <div id="app-loader" class="loader-overlay"> |
| <div class="loader-inner"> |
| <div class="loader-bar"></div> |
| </div> |
| </div> |
|
|
| <div class="shell"> |
| |
| <aside class="sidebar" id="sidebar"> |
| <div class="sidebar-head"> |
| <span class="logotype">Predictive<em>AI</em></span> |
| </div> |
|
|
| <nav class="sidebar-nav"> |
| <span class="nav-group-label">Monitoring</span> |
| <a href="#" class="nav-link active" data-view="overview" id="nav-overview">Overview</a> |
| <a href="#" class="nav-link" data-view="fleet" id="nav-fleet">Fleet health</a> |
|
|
| <span class="nav-group-label">Intelligence</span> |
| <a href="#" class="nav-link" data-view="predict" id="nav-predict">Diagnostics</a> |
| <a href="#" class="nav-link" data-view="reports" id="nav-reports">Reports</a> |
|
|
| <span class="nav-group-label">Operations</span> |
| <a href="#" class="nav-link" data-view="schedule" id="nav-schedule">Scheduling</a> |
| </nav> |
|
|
| <div class="sidebar-foot" id="system-pulse"> |
| <span class="pulse-dot"></span> |
| <span class="pulse-label">System online</span> |
| </div> |
| </aside> |
|
|
| |
| <main class="main"> |
|
|
| |
| <section class="view active" id="view-overview"> |
| <header class="view-head"> |
| <div> |
| <h1 class="view-title">Factory overview</h1> |
| <p class="view-sub">Real-time health summary across your fleet</p> |
| </div> |
| <button class="btn" id="btn-refresh-overview">Refresh data</button> |
| </header> |
|
|
| |
| <div class="stat-strip"> |
| <div class="stat-item"> |
| <span class="stat-value" id="kpi-total">--</span> |
| <span class="stat-label">Machines monitored</span> |
| </div> |
| <div class="stat-divider"></div> |
| <div class="stat-item"> |
| <span class="stat-value" id="kpi-healthy">--</span> |
| <span class="stat-label">Operating optimally</span> |
| </div> |
| <div class="stat-divider"></div> |
| <div class="stat-item"> |
| <span class="stat-value stat-value--warn" id="kpi-atrisk">--</span> |
| <span class="stat-label">At risk</span> |
| </div> |
| <div class="stat-divider"></div> |
| <div class="stat-item"> |
| <span class="stat-value stat-value--danger" id="kpi-critical">--</span> |
| <span class="stat-label">Critical action required</span> |
| </div> |
| </div> |
|
|
| <div class="two-col"> |
| <div class="section-block"> |
| <h2 class="section-title">Health distribution</h2> |
| <div class="chart-wrap"><canvas id="chart-health-dist"></canvas></div> |
| </div> |
| <div class="section-block"> |
| <h2 class="section-title">Remaining useful life</h2> |
| <div class="chart-wrap"><canvas id="chart-rul-dist"></canvas></div> |
| </div> |
| </div> |
|
|
| <div class="section-block"> |
| <h2 class="section-title">Active pipelines</h2> |
| <div class="pipeline-row"> |
| <div class="pipeline-item"> |
| <h3>AI4I 2020</h3> |
| <p>Milling machine failure classification. XGBoost + Random Forest ensemble.</p> |
| <span class="tag">Classification</span> |
| </div> |
| <div class="pipeline-item"> |
| <h3>Pump sensor</h3> |
| <p>Water pump early-warning with 60-minute lookahead window.</p> |
| <span class="tag">Classification</span> |
| </div> |
| <div class="pipeline-item"> |
| <h3>NASA CMAPSS</h3> |
| <p>Turbofan engine regression. LSTM and CNN on sliding windows.</p> |
| <span class="tag">Deep learning</span> |
| </div> |
| <div class="pipeline-item"> |
| <h3>Azure PdM</h3> |
| <p>Multi-machine fleet telemetry. FAISS RAG index over maintenance logs.</p> |
| <span class="tag">RAG</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="view" id="view-fleet"> |
| <header class="view-head"> |
| <div> |
| <h1 class="view-title">Fleet health</h1> |
| <p class="view-sub">Individual machine status and sensor telemetry</p> |
| </div> |
| <div class="head-actions"> |
| <select class="sel" id="fleet-filter"> |
| <option value="all">All statuses</option> |
| <option value="Healthy">Healthy</option> |
| <option value="At Risk">At risk</option> |
| <option value="Critical">Critical</option> |
| </select> |
| <select class="sel" id="fleet-model-filter"> |
| <option value="all">All models</option> |
| <option value="model1">Model 1</option> |
| <option value="model2">Model 2</option> |
| <option value="model3">Model 3</option> |
| <option value="model4">Model 4</option> |
| </select> |
| <button class="btn" id="btn-refresh-fleet">Refresh list</button> |
| </div> |
| </header> |
|
|
| |
| <div class="fleet-bar-wrap"> |
| <span class="fleet-bar-total" id="fleet-total">--</span> |
| <span class="fleet-bar-label">Total fleet</span> |
| <div class="fleet-bar"> |
| <div class="fleet-seg fleet-seg--crit" id="bar-critical"></div> |
| <div class="fleet-seg fleet-seg--warn" id="bar-warning"></div> |
| <div class="fleet-seg fleet-seg--ok" id="bar-healthy"></div> |
| </div> |
| </div> |
|
|
| <div class="machine-grid" id="machine-grid"> |
| <div class="empty-msg">Select a filter or refresh to load fleet.</div> |
| </div> |
| </section> |
|
|
| |
| <section class="view" id="view-predict"> |
| <header class="view-head"> |
| <div> |
| <h1 class="view-title">Diagnostics</h1> |
| <p class="view-sub">Execute the inference engine on live telemetry</p> |
| </div> |
| </header> |
|
|
| <div class="diag-layout"> |
| |
| <div class="diag-input"> |
| <div class="section-block"> |
| <h2 class="section-title">Telemetry input</h2> |
| <form id="predict-form"> |
| <div class="field-row"> |
| <div class="field"> |
| <label>Machine identifier</label> |
| <input type="number" id="inp-machine" value="3" min="1" max="100"> |
| </div> |
| <div class="field"> |
| <label>Service age <span class="field-unit">years</span></label> |
| <input type="number" id="inp-age" value="5" step="0.1"> |
| </div> |
| </div> |
| <div class="field-row"> |
| <div class="field"> |
| <label>Voltage <span class="field-unit">V</span></label> |
| <input type="number" id="inp-volt" value="170.5" step="0.1"> |
| </div> |
| <div class="field"> |
| <label>Rotation <span class="field-unit">rpm</span></label> |
| <input type="number" id="inp-rotate" value="440.2" step="0.1"> |
| </div> |
| </div> |
| <div class="field-row"> |
| <div class="field"> |
| <label>Pressure <span class="field-unit">kPa</span></label> |
| <input type="number" id="inp-pressure" value="100.1" step="0.1"> |
| </div> |
| <div class="field"> |
| <label>Vibration <span class="field-unit">mm/s</span></label> |
| <input type="number" id="inp-vib" value="40.2" step="0.1"> |
| </div> |
| </div> |
|
|
| <div class="presets-row"> |
| <span class="presets-label">Data scenarios:</span> |
| <button type="button" class="btn btn--sm btn-preset" data-preset="healthy">Standard</button> |
| <button type="button" class="btn btn--sm btn-preset" data-preset="atrisk">Elevated</button> |
| <button type="button" class="btn btn--sm btn-preset" data-preset="critical">Severe</button> |
| </div> |
|
|
| <button type="submit" class="btn btn--accent btn--full">Run diagnostic sequence</button> |
| </form> |
| </div> |
| </div> |
|
|
| |
| <div class="diag-results"> |
| <div id="predict-empty" class="empty-msg"> |
| Enter machine telemetry parameters to begin diagnostics. |
| </div> |
|
|
| <div id="predict-loading" class="empty-msg" style="display:none"> |
| <div class="loader-bar" style="width:60px;margin:0 auto 16px"></div> |
| Executing inference engine... |
| <span class="empty-detail">This process compiles LLM context and FAISS retrieval.</span> |
| </div> |
|
|
| <div id="results-top" class="results-pair" style="display:none"> |
| |
| <div class="result-card"> |
| <span class="result-card-label">Failure probability</span> |
| <div class="gauge-wrap"> |
| <canvas id="chart-gauge"></canvas> |
| <div class="gauge-center"> |
| <span class="gauge-num" id="gauge-value">0%</span> |
| </div> |
| </div> |
| <span class="status-indicator" id="status-badge">Nominal</span> |
| </div> |
| |
| <div class="result-card"> |
| <span class="result-card-label">Remaining useful life</span> |
| <div class="rul-display"> |
| <span class="rul-num" id="rul-value">--</span> |
| <span class="rul-unit">hours</span> |
| </div> |
| <div class="rul-bar-track"> |
| <div class="rul-bar-fill" id="rul-bar"></div> |
| </div> |
| <div class="rul-trend-wrap"> |
| <canvas id="chart-rul-trend"></canvas> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="ai-insight-panel" class="section-block" style="display:none"> |
| <div class="ai-header"> |
| <h2 class="section-title">Diagnostic summary</h2> |
| <span class="ai-tag">Generated via RAG + LLM</span> |
| </div> |
| <div class="prose" id="ai-report-content"></div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="view" id="view-reports"> |
| <header class="view-head"> |
| <div> |
| <h1 class="view-title">Reports</h1> |
| <p class="view-sub">Historical archive of machine diagnostics</p> |
| </div> |
| </header> |
|
|
| <div class="reports-layout"> |
| <div class="reports-sidebar"> |
| <div id="reports-list"> |
| <div class="empty-msg">Fetching archives...</div> |
| </div> |
| </div> |
| <div class="reports-viewer"> |
| <div class="prose" id="report-viewer"> |
| <div class="empty-msg">Select a document from the index.</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="view" id="view-schedule"> |
| <header class="view-head"> |
| <div> |
| <h1 class="view-title">Production scheduling</h1> |
| <p class="view-sub">Automated job reallocation based on machine health requirements</p> |
| </div> |
| <div class="head-actions"> |
| <select class="sel" id="schedule-filter"> |
| <option value="all">All statuses</option> |
| <option value="Scheduled">Scheduled</option> |
| <option value="Rescheduled">Rescheduled</option> |
| <option value="Risk Alert">Risk alert</option> |
| </select> |
| <button class="btn btn--accent" id="btn-run-reschedule">Optimize schedule</button> |
| </div> |
| </header> |
|
|
| |
| <div class="stat-strip" id="reschedule-summary" style="display:none"> |
| <div class="stat-item"> |
| <span class="stat-value" id="rs-total">--</span> |
| <span class="stat-label">Active jobs</span> |
| </div> |
| <div class="stat-divider"></div> |
| <div class="stat-item"> |
| <span class="stat-value stat-value--warn" id="rs-moved">--</span> |
| <span class="stat-label">Reallocated</span> |
| </div> |
| <div class="stat-divider"></div> |
| <div class="stat-item"> |
| <span class="stat-value stat-value--danger" id="rs-alerts">--</span> |
| <span class="stat-label">Alerts triggered</span> |
| </div> |
| <div class="stat-divider"></div> |
| <div class="stat-item"> |
| <span class="stat-value" id="rs-ok">--</span> |
| <span class="stat-label">Operating as planned</span> |
| </div> |
| </div> |
|
|
| <div class="section-block"> |
| <div class="table-scroll"> |
| <table class="tbl"> |
| <thead> |
| <tr> |
| <th>Job ID</th> |
| <th>Machine</th> |
| <th>Duration</th> |
| <th>Priority</th> |
| <th>Status</th> |
| <th>System notes</th> |
| </tr> |
| </thead> |
| <tbody id="schedule-tbody"> |
| <tr><td colspan="6" class="tbl-empty">Awaiting data retrieval.</td></tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </section> |
| </main> |
| </div> |
|
|
| |
| <div class="modal-overlay" id="reschedule-modal" style="display:none"> |
| <div class="modal"> |
| <div class="modal-head"> |
| <h3>Schedule optimization</h3> |
| <button class="modal-x" id="modal-close">×</button> |
| </div> |
| <div class="modal-body"> |
| <p class="modal-desc">Define parameters for at-risk machines. The system will systematically reallocate jobs to healthy assets of the corresponding model.</p> |
| <div class="field"> |
| <label>Target machine identifiers</label> |
| <input type="text" id="rs-machines" value="3, 12" placeholder="e.g. 3, 12, 17"> |
| </div> |
| <div class="field-row" style="margin-top:16px"> |
| <div class="field"> |
| <label>Probability threshold</label> |
| <input type="number" id="rs-threshold" value="0.70" step="0.05" min="0" max="1"> |
| </div> |
| <div class="field"> |
| <label>Minimum RUL buffer</label> |
| <input type="number" id="rs-min-rul" value="48" step="1" min="0"> |
| </div> |
| </div> |
| </div> |
| <div class="modal-foot"> |
| <button class="btn" id="modal-cancel">Dismiss</button> |
| <button class="btn btn--accent" id="modal-confirm">Confirm execution</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="toast-container" id="toast-container"></div> |
|
|
| <script src="app.js"></script> |
| </body> |
| </html> |
|
|
