| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8" />
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| <title>Cloud Workload Forecasting</title>
|
|
|
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
| </head>
|
| <body>
|
|
|
| <h1 class="title">⚡ Cloud Workload Forecasting Dashboard</h1>
|
|
|
| <div class="upload-box">
|
| <input type="file" id="fileInput" accept=".csv" />
|
| </div>
|
|
|
| <div class="row">
|
|
|
| <div class="panel left-panel">
|
| <h2>📊 First 10 Values</h2>
|
| <pre id="dataPreview">Upload CSV...</pre>
|
|
|
| <h3 style="margin-top:25px;">📉 Model Performance (MSE)</h3>
|
| <p>Train MSE: <span id="trainMSE">--</span></p>
|
| <p>Test MSE : <span id="testMSE">--</span></p>
|
| </div>
|
|
|
|
|
|
|
| <div class="panel right-panel">
|
| <h2>🧠 Predictions</h2>
|
|
|
| <div class="prediction">
|
| <p>Last Value in Given Dataset: <span id="lastValue">--</span></p>
|
| <p>Next Prediction: <span id="nextPred">--</span></p>
|
| </div>
|
|
|
| <h3>⏳ Future 20 Predictions</h3>
|
| <pre id="futurePreds">--</pre>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="graph-section">
|
| <h2>📈 Forecast Graph</h2>
|
| <canvas id="forecastChart"></canvas>
|
| </div>
|
|
|
| <script src="{{ url_for('static', filename='script.js') }}"></script>
|
| </body>
|
| </html>
|
|
|
