ehsanulhaque92/multimodal-prescriptive-pdm

1{% extends "layout.html" %}2 3{% block content %}4    <header>5        <h1>Model Performance & Adaptivity Monitor</h1>6        <p>This page demonstrates the system's ability to detect concept drift and monitor performance over time.</p>7    </header>8 9    <article>10        <header><strong>Live Model Accuracy</strong></header>11        <!-- This is where our accuracy chart will be rendered -->12        <div id="accuracy-chart-div" style="width:100%; height:500px;"></div>13    </article>14    15    <article>16        <header><strong>System Logs & Events</strong></header>17        <div id="log-container">18            <p><strong>Initial Model Trained:</strong> A baseline model was trained on the first 200 data points.</p>19            <!-- Drift events will be added here by JavaScript -->20            <div id="drift-log"></div>21        </div>22    </article>23 24    <!-- Pass data from Flask to JS and draw the chart -->25    <script>26        const monitoringData = {{ monitoring_data | tojson }};27 28        // --- Create the Accuracy Chart ---29        const accuracyTrace = {30            x: monitoringData.time_steps,31            y: monitoringData.accuracies,32            mode: 'lines+markers',33            name: 'Model Accuracy'34        };35 36        const thresholdTrace = {37            x: monitoringData.time_steps,38            y: Array(monitoringData.time_steps.length).fill(monitoringData.drift_threshold),39            mode: 'lines',40            name: 'Drift Threshold',41            line: { dash: 'dash', color: 'red' }42        };43 44        const layout = {45            title: 'Model Accuracy Over Simulated Time',46            xaxis: { title: 'Time Step (Data Point Index)' },47            yaxis: { title: 'Accuracy', range: [0, 1] },48            annotations: [] // We will add drift points here49        };50 51        // Add annotations for detected drift points52        monitoringData.drift_points.forEach(point => {53            layout.annotations.push({54                x: point.time,55                y: monitoringData.drift_threshold,56                xref: 'x',57                yref: 'y',58                text: point.label,59                showarrow: true,60                arrowhead: 7,61                ax: 0,62                ay: -4063            });64            // Also add the event to our log65            document.getElementById('drift-log').innerHTML += `<p><strong>Drift Detected at Time Step ${Math.round(point.time)}:</strong> Performance dropped below threshold. Retraining should be triggered.</p>`;66        });67 68        Plotly.newPlot('accuracy-chart-div', [accuracyTrace, thresholdTrace], layout);69    </script>70{% endblock %}