Hugging Face's logo

Spaces:
WebashalarForML
/
DiamRapo
Running

App Files Community
WebashalarForML commited on
Commit
637c7f1
·
verified ·
1 Parent(s): 4e6d72a

Update templates/output.html

Browse files
Files changed (1) hide show
  1. templates/output.html +67 -60
templates/output.html CHANGED
@@ -2,7 +2,7 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
- <title>Prediction Result</title>
6
  <style>
7
  body {
8
  background-color: #041C32;
@@ -11,106 +11,113 @@
11
  margin: 0;
12
  padding: 20px;
13
  }
14
-
15
  .container {
16
- max-width: auto;
17
- margin: 30px auto;
18
  background-color: #04293A;
19
- padding: 25px;
20
  border-radius: 10px;
21
  text-align: center;
 
22
  box-shadow: 0px 0px 15px rgba(236, 179, 101, 0.3);
23
  }
24
-
25
- h1 {
26
- color: #ECB365;
27
- margin-bottom: 15px;
28
  }
29
-
30
- .result-box {
31
- padding: 20px;
32
- margin-top: 20px;
33
- border: 2px solid #ECB365;
34
- background-color: #064663;
35
- font-size: 1.1em;
36
- font-weight: normal;
37
- border-radius: 8px;
38
- box-shadow: 0px 0px 10px rgba(236, 179, 101, 0.2);
39
- }
40
-
41
- .btn {
42
- margin-top: 20px;
43
- padding: 12px 18px;
44
  background-color: #ECB365;
45
  color: #041C32;
46
- border: none;
47
- border-radius: 6px;
48
- cursor: pointer;
49
- font-weight: bold;
50
  text-decoration: none;
51
- display: inline-block;
52
- transition: 0.3s;
 
53
  }
54
-
55
- .btn:hover {
56
  background-color: #d69f50;
57
  }
58
-
 
 
 
 
 
 
 
 
 
 
59
  .table-wrapper {
60
  overflow-x: auto;
61
  margin: auto;
62
- max-width: 100%;
63
  padding: 15px;
64
  background-color: #04293A;
65
  border-radius: 6px;
66
- box-shadow: 0px 0px 10px rgba(236, 179, 101, 0.15);
67
  }
68
-
69
  table {
70
  width: 100%;
71
  border-collapse: collapse;
72
  color: #ECB365;
73
  }
74
-
75
  th, td {
76
  border: 1px solid #ECB365;
77
  padding: 10px;
78
  text-align: center;
79
  }
80
-
81
  th {
82
  background-color: #064663;
 
 
 
 
 
 
 
 
 
 
83
  font-weight: bold;
 
 
 
 
84
  }
85
  </style>
86
  </head>
87
  <body>
88
-
89
- <!--Prediction Report-->
90
  <div class="container">
91
- <h1>Predicted Diamond Price</h1>
92
- <div class="result-box">
93
- <p>The Prediction on diamond:</p>
94
- <div class="table-wrapper">
95
- {{ df|safe }}
96
- </div>
97
  </div>
98
- <a href="{{ url_for('download_pred') }}" class="btn">Download CSV</a>
99
- <a href="/" class="btn">Go Back</a>
100
- </div>
101
 
102
- <!--Analysis Report-->
103
- <div class="container">
104
- <h1>Analysis of Diamond Parameter Changes</h1>
105
- <div class="result-box">
106
- <p>The analysis on diamond:</p>
107
- <div class="table-wrapper">
108
- {{ dx|safe }}
109
- </div>
 
 
 
 
 
 
110
  </div>
111
- <a href="{{ url_for('download_class') }}" class="btn">Download CSV</a>
112
- <a href="/" class="btn">Go Back</a>
113
- </div>
114
 
 
 
 
 
 
 
 
 
 
 
115
  </body>
116
  </html>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <title>Report Viewer</title>
6
  <style>
7
  body {
8
  background-color: #041C32;
 
11
  margin: 0;
12
  padding: 20px;
13
  }
 
14
  .container {
15
+ margin: 20px auto;
16
+ padding: 20px;
17
  background-color: #04293A;
 
18
  border-radius: 10px;
19
  text-align: center;
20
+ max-width: 90%;
21
  box-shadow: 0px 0px 15px rgba(236, 179, 101, 0.3);
22
  }
23
+ .toggle-buttons {
24
+ margin-bottom: 20px;
 
 
25
  }
26
+ .toggle-buttons a {
27
+ padding: 10px 15px;
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  background-color: #ECB365;
29
  color: #041C32;
 
 
 
 
30
  text-decoration: none;
31
+ margin: 0 10px;
32
+ border-radius: 5px;
33
+ font-weight: bold;
34
  }
35
+ .toggle-buttons a.active {
 
36
  background-color: #d69f50;
37
  }
38
+ .pagination {
39
+ margin-top: 15px;
40
+ }
41
+ .pagination a {
42
+ padding: 8px 12px;
43
+ background-color: #ECB365;
44
+ color: #041C32;
45
+ text-decoration: none;
46
+ margin: 0 5px;
47
+ border-radius: 5px;
48
+ }
49
  .table-wrapper {
50
  overflow-x: auto;
51
  margin: auto;
 
52
  padding: 15px;
53
  background-color: #04293A;
54
  border-radius: 6px;
 
55
  }
 
56
  table {
57
  width: 100%;
58
  border-collapse: collapse;
59
  color: #ECB365;
60
  }
 
61
  th, td {
62
  border: 1px solid #ECB365;
63
  padding: 10px;
64
  text-align: center;
65
  }
 
66
  th {
67
  background-color: #064663;
68
+ }
69
+ /* Improved Button Styling */
70
+ .btn {
71
+ display: inline-block;
72
+ padding: 12px 20px;
73
+ background-color: #ECB365;
74
+ color: #041C32;
75
+ text-decoration: none;
76
+ margin: 10px 5px;
77
+ border-radius: 6px;
78
  font-weight: bold;
79
+ transition: background-color 0.3s ease;
80
+ }
81
+ .btn:hover {
82
+ background-color: #d69f50;
83
  }
84
  </style>
85
  </head>
86
  <body>
 
 
87
  <div class="container">
88
+ <!-- Toggle Buttons -->
89
+ <div class="toggle-buttons">
90
+ <a href="{{ url_for('report_view', report_type='pred', page=1) }}"
91
+ class="{% if report_type == 'pred' %}active{% endif %}">Prediction Report</a>
92
+ <a href="{{ url_for('report_view', report_type='class', page=1) }}"
93
+ class="{% if report_type == 'class' %}active{% endif %}">Classification Analysis</a>
94
  </div>
 
 
 
95
 
96
+ <!-- Report Table -->
97
+ <div class="table-wrapper">
98
+ {{ table_html | safe }}
99
+ </div>
100
+
101
+ <!-- Pagination Controls -->
102
+ <div class="pagination">
103
+ {% if has_prev %}
104
+ <a href="{{ url_for('report_view', report_type=report_type, page=page-1) }}">Previous</a>
105
+ {% endif %}
106
+ <span>Page {{ page }}</span>
107
+ {% if has_next %}
108
+ <a href="{{ url_for('report_view', report_type=report_type, page=page+1) }}">Next</a>
109
+ {% endif %}
110
  </div>
 
 
 
111
 
112
+ <!-- Download and Navigation Buttons -->
113
+ <div style="margin-top:20px;">
114
+ {% if report_type == 'pred' %}
115
+ <a href="{{ url_for('download_pred') }}" class="btn">Download Prediction CSV</a>
116
+ {% else %}
117
+ <a href="{{ url_for('download_class') }}" class="btn">Download Classification CSV</a>
118
+ {% endif %}
119
+ <a href="/" class="btn">Go Back</a>
120
+ </div>
121
+ </div>
122
  </body>
123
  </html>