DIAM_DEMO_APP

Sleeping

App Files Files Community

WebashalarForML commited on May 12

Commit

245b453

verified ·

1 Parent(s): 2dbaf32

Update templates/output.html

Browse files

Files changed (1) hide show

templates/output.html +18 -156

templates/output.html CHANGED Viewed

@@ -2,8 +2,6 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <!-- Add Plotly.js CDN in <head> -->
-  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
   <title>Report Viewer</title>
   <style>
     body {
@@ -22,9 +20,7 @@
       max-width: 90%;
       box-shadow: 0px 0px 15px rgba(236, 179, 101, 0.3);
     }
-    .toggle-buttons {
-      margin-bottom: 20px;
-    }
     .toggle-buttons a {
       padding: 10px 15px;
       background-color: #ECB365;
@@ -34,20 +30,7 @@
       border-radius: 5px;
       font-weight: bold;
     }
-    .toggle-buttons a.active {
-      background-color: #d69f50;
-    }
-    .pagination {
-      margin-top: 15px;
-    }
-    .pagination a {
-      padding: 8px 12px;
-      background-color: #ECB365;
-      color: #041C32;
-      text-decoration: none;
-      margin: 0 5px;
-      border-radius: 5px;
-    }
     .table-wrapper {
       overflow-x: auto;
       margin: auto;
@@ -65,10 +48,16 @@
       padding: 10px;
       text-align: center;
     }
-    th {
-      background-color: #064663;
     }
-    /* Improved Button Styling */
     .btn {
       display: inline-block;
       padding: 12px 20px;
@@ -80,9 +69,7 @@
       font-weight: bold;
       transition: background-color 0.3s ease;
     }
-    .btn:hover {
-      background-color: #d69f50;
-    }
   </style>
 </head>
 <body>
@@ -90,9 +77,9 @@
     <!-- Toggle Buttons -->
     <div class="toggle-buttons">
       <a href="{{ url_for('report_view', report_type='pred', page=1) }}"
-         class="{% if report_type == 'pred' %}active{% endif %}">Prediction Report</a>
-      <!-- <a href="{{ url_for('report_view', report_type='class', page=1) }}"
-         class="{% if report_type == 'class' %}active{% endif %}">Classification Analysis</a> -->
     </div>
     <!-- Report Table -->
@@ -100,145 +87,20 @@
       {{ table_html | safe }}
     </div>
-    <!-- Chart Section -->
-    <div class="table-wrapper" style="margin-top: 30px;">
-      <h2 style="color:#ECB365;">Makable Predicted & Diff vs EngCts</h2>
-      <div id="line-chart" style="height: 400px;"></div>
-    </div>
-    <!-- Line Chart with Markers -->
-    <!-- <script>
-      const chartData = {{ chart_data | safe }};
-      const trace1 = {
-        x: chartData.EngCts,
-        y: chartData.Makable_Predicted,
-        type: 'scatter',
-        mode: 'lines+markers',
-        name: 'Makable_Predicted',
-        line: { color: '#00BFFF' }
-      };
-      const trace2 = {
-        x: chartData.EngCts,
-        y: chartData.Makable_Diff,
-        type: 'scatter',
-        mode: 'lines+markers',
-        name: 'Makable_Diff',
-        line: { color: '#FF6347' }
-      };
-      const layout = {
-        paper_bgcolor: "#04293A",
-        plot_bgcolor: "#041C32",
-        font: { color: "#ECB365" },
-        xaxis: { title: "EngCts" },
-        yaxis: { title: "Values" },
-        margin: { t: 40, l: 50, r: 30, b: 50 }
-      };
-      Plotly.newPlot('line-chart', [trace1, trace2], layout);
-    </script> -->
-    <!-- Dot Chart with Markers -->
-    <!-- <script>
-      const chartData = {{ chart_data | safe }};
-      const trace1 = {
-        x: chartData.EngCts,
-        y: chartData.Makable_Predicted,
-        type: 'scatter',
-        mode: 'markers',  // Changed here
-        name: 'Makable_Predicted',
-        marker: { color: '#00BFFF' }
-      };
-      const trace2 = {
-        x: chartData.EngCts,
-        y: chartData.Makable_Diff,
-        type: 'scatter',
-        mode: 'markers',  // Changed here
-        name: 'Makable_Diff',
-        marker: { color: '#FF6347' }
-      };
-      const layout = {
-        paper_bgcolor: "#04293A",
-        plot_bgcolor: "#041C32",
-        font: { color: "#ECB365" },
-        xaxis: { title: "EngCts" },
-        yaxis: { title: "Values" },
-        margin: { t: 40, l: 50, r: 30, b: 50 }
-      };
-      Plotly.newPlot('line-chart', [trace1, trace2], layout);
-    </script> -->
-    <!-- Dot Chart Fixed View -->
-    <script>
-      const chartData = {{ chart_data | safe }};
-      const trace1 = {
-        x: chartData.EngCts,
-        y: chartData.Makable_Predicted,
-        type: 'scatter',
-        mode: 'markers',
-        name: 'Makable_Predicted',
-        marker: { color: '#00BFFF', size: 8 }
-      };
-      const trace2 = {
-        x: chartData.EngCts,
-        y: chartData.Makable_Diff,
-        type: 'scatter',
-        mode: 'markers',
-        name: 'Makable_Diff',
-        marker: { color: '#FF6347', size: 8 }
-      };
-      const layout = {
-        paper_bgcolor: "#04293A",
-        plot_bgcolor: "#041C32",
-        font: { color: "#ECB365" },
-        xaxis: {
-          title: "EngCts",
-          tickangle: 0
-        },
-        yaxis: {
-          title: "Values",
-          tickfont: {
-            size: 10,
-            color: "#ECB365"
-          },
-          automargin: true,           // 🔧 Add space for long labels
-          tickmode: "auto",           // Let Plotly auto-decide tick values
-          nticks: 10,                 // Reduce clutter
-        },
-        margin: { t: 40, l: 80, r: 30, b: 50 } // ⬅️ Increase left margin for Y-axis labels
-      };
-      Plotly.newPlot('line-chart', [trace1, trace2], layout);
-    </script>
     <!-- Pagination Controls -->
     <div class="pagination">
       {% if has_prev %}
-      <a href="{{ url_for('report_view', report_type=report_type, page=page-1) }}">Previous</a>
       {% endif %}
       <span>Page {{ page }}</span>
       {% if has_next %}
-      <a href="{{ url_for('report_view', report_type=report_type, page=page+1) }}">Next</a>
       {% endif %}
     </div>
-    <!-- Download and Navigation Buttons -->
     <div style="margin-top:20px;">
-      {% if report_type == 'pred' %}
       <a href="{{ url_for('download_pred') }}" class="btn">Download Prediction CSV</a>
-      {% else %}
-      <a href="{{ url_for('download_class') }}" class="btn">Download Classification CSV</a>
-      {% endif %}
       <a href="/" class="btn">Go Back</a>
     </div>
   </div>

 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Report Viewer</title>
   <style>
     body {
       max-width: 90%;
       box-shadow: 0px 0px 15px rgba(236, 179, 101, 0.3);
     }
+    .toggle-buttons { margin-bottom: 20px; }
     .toggle-buttons a {
       padding: 10px 15px;
       background-color: #ECB365;
       border-radius: 5px;
       font-weight: bold;
     }
+    .toggle-buttons a.active { background-color: #d69f50; }
     .table-wrapper {
       overflow-x: auto;
       margin: auto;
       padding: 10px;
       text-align: center;
     }
+    th { background-color: #064663; }
+    .pagination { margin-top: 15px; }
+    .pagination a {
+      padding: 8px 12px;
+      background-color: #ECB365;
+      color: #041C32;
+      text-decoration: none;
+      margin: 0 5px;
+      border-radius: 5px;
     }
     .btn {
       display: inline-block;
       padding: 12px 20px;
       font-weight: bold;
       transition: background-color 0.3s ease;
     }
+    .btn:hover { background-color: #d69f50; }
   </style>
 </head>
 <body>
     <!-- Toggle Buttons -->
     <div class="toggle-buttons">
       <a href="{{ url_for('report_view', report_type='pred', page=1) }}"
+         class="{% if report_type == 'pred' %}active{% endif %}">
+        Prediction Report
+      </a>
     </div>
     <!-- Report Table -->
       {{ table_html | safe }}
     </div>
     <!-- Pagination Controls -->
     <div class="pagination">
       {% if has_prev %}
+        <a href="{{ url_for('report_view', report_type=report_type, page=page-1) }}">Previous</a>
       {% endif %}
       <span>Page {{ page }}</span>
       {% if has_next %}
+        <a href="{{ url_for('report_view', report_type=report_type, page=page+1) }}">Next</a>
       {% endif %}
     </div>
+    <!-- Download & Nav Buttons -->
     <div style="margin-top:20px;">
       <a href="{{ url_for('download_pred') }}" class="btn">Download Prediction CSV</a>
       <a href="/" class="btn">Go Back</a>
     </div>
   </div>