Hugging Face's logo

Spaces:
WebashalarForML
/
diamond_price_predictor
Sleeping

App Files Community
WebashalarForML commited on
Commit
c391d59
·
verified ·
1 Parent(s): d1d6125

Upload 2 files

Browse files
Files changed (2) hide show
  1. templates/home.html +218 -0
  2. templates/results.html +185 -0
templates/home.html ADDED
@@ -0,0 +1,218 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Diamond Price Prediction</title>
6
+ <style>
7
+ body {
8
+ background-color: #041C32;
9
+ color: #ECB365;
10
+ font-family: Arial, sans-serif;
11
+ margin: 0;
12
+ padding: 20px;
13
+ }
14
+ .container {
15
+ max-width: 800px;
16
+ margin: auto;
17
+ background-color: #04293A;
18
+ padding: 20px;
19
+ border-radius: 8px;
20
+ }
21
+ h1 {
22
+ color: #ECB365;
23
+ }
24
+ label {
25
+ display: block;
26
+ margin-top: 10px;
27
+ color: #ECB365;
28
+ }
29
+ input[type="text"],
30
+ input[type="number"],
31
+ select {
32
+ width: 100%;
33
+ padding: 8px;
34
+ margin-top: 5px;
35
+ border: 1px solid #064663;
36
+ border-radius: 4px;
37
+ background-color: #064663;
38
+ color: #ECB365;
39
+ box-sizing: border-box;
40
+ }
41
+ .btn {
42
+ margin-top: 20px;
43
+ padding: 10px 15px;
44
+ background-color: #ECB365;
45
+ color: #041C32;
46
+ border: none;
47
+ border-radius: 4px;
48
+ cursor: pointer;
49
+ font-weight: bold;
50
+ }
51
+ .flash {
52
+ padding: 10px;
53
+ margin-bottom: 15px;
54
+ border: 1px solid #ECB365;
55
+ background-color: #064663;
56
+ }
57
+ </style>
58
+ </head>
59
+ <body>
60
+ <div class="container">
61
+ <h1>Diamond Price Prediction</h1>
62
+ {% with messages = get_flashed_messages(with_categories=true) %}
63
+ {% if messages %}
64
+ {% for category, message in messages %}
65
+ <div class="flash">{{ message }}</div>
66
+ {% endfor %}
67
+ {% endif %}
68
+ {% endwith %}
69
+ <form action="{{ url_for('predict') }}" method="post">
70
+
71
+ <!-- Fixed dropdown fields -->
72
+ <label for="Tag">Tag (Category)</label>
73
+ <select id="Tag" name="Tag">
74
+ <option value="">Select Tag</option>
75
+ <option value="A">A</option>
76
+ <option value="B">B</option>
77
+ <option value="C">C</option>
78
+ <option value="D">D</option>
79
+ <option value="E">E</option>
80
+ <option value="F">F</option>
81
+ <option value="G">G</option>
82
+ <option value="H">H</option>
83
+ <option value="I">I</option>
84
+ </select>
85
+
86
+ <label for="EngShp">EngShp</label>
87
+ <select id="EngShp" name="EngShp">
88
+ <option value="">Select EngShp</option>
89
+ <option value="OV">OV</option>
90
+ <option value="MQ">MQ</option>
91
+ <option value="PE">PE</option>
92
+ <option value="R">R</option>
93
+ <option value="EM">EM</option>
94
+ <option value="HR">HR</option>
95
+ <option value="RD">RD</option>
96
+ <option value="PR">PR</option>
97
+ </select>
98
+
99
+ <label for="EngQua">EngQua</label>
100
+ <select id="EngQua" name="EngQua">
101
+ <option value="">Select EngQua</option>
102
+ <option value="SI2">SI2</option>
103
+ <option value="SI1">SI1</option>
104
+ <option value="VS2">VS2</option>
105
+ <option value="VVS2">VVS2</option>
106
+ <option value="VS1">VS1</option>
107
+ <option value="I2">I2</option>
108
+ <option value="I1">I1</option>
109
+ <option value="I2-">I2-</option>
110
+ <option value="I3">I3</option>
111
+ <option value="SI3">SI3</option>
112
+ <option value="I1-">I1-</option>
113
+ <option value="I4">I4</option>
114
+ <option value="I5">I5</option>
115
+ <option value="VVS1">VVS1</option>
116
+ </select>
117
+
118
+ <label for="EngCol">EngCol</label>
119
+ <select id="EngCol" name="EngCol">
120
+ <option value="">Select EngCol</option>
121
+ <option value="G">G</option>
122
+ <option value="F">F</option>
123
+ <option value="H">H</option>
124
+ <option value="E">E</option>
125
+ <option value="I">I</option>
126
+ <option value="J">J</option>
127
+ <option value="D">D</option>
128
+ <option value="L">L</option>
129
+ <option value="K">K</option>
130
+ <option value="M">M</option>
131
+ </select>
132
+
133
+ <label for="EngCut">EngCut</label>
134
+ <select id="EngCut" name="EngCut">
135
+ <option value="">Select EngCut</option>
136
+ <option value="EX3">EX3</option>
137
+ <option value="VG1">VG1</option>
138
+ <option value="EX1">EX1</option>
139
+ <option value="EX4">EX4</option>
140
+ <option value="EX2">EX2</option>
141
+ <option value="GD1">GD1</option>
142
+ </select>
143
+
144
+ <label for="EngPol">EngPol</label>
145
+ <select id="EngPol" name="EngPol">
146
+ <option value="">Select EngPol</option>
147
+ <option value="EX">EX</option>
148
+ <option value="VG">VG</option>
149
+ </select>
150
+
151
+ <label for="EngSym">EngSym</label>
152
+ <select id="EngSym" name="EngSym">
153
+ <option value="">Select EngSym</option>
154
+ <option value="EX">EX</option>
155
+ <option value="VG">VG</option>
156
+ </select>
157
+
158
+ <label for="EngFlo">EngFlo</label>
159
+ <select id="EngFlo" name="EngFlo">
160
+ <option value="">Select EngFlo</option>
161
+ <option value="Non">Non</option>
162
+ <option value="Fnt">Fnt</option>
163
+ <option value="Med">Med</option>
164
+ <option value="Str">Str</option>
165
+ <option value="VStr">VStr</option>
166
+ </select>
167
+
168
+ <label for="EngNts">EngNts</label>
169
+ <select id="EngNts" name="EngNts">
170
+ <option value="">Select EngNts</option>
171
+ <option value="N">N</option>
172
+ <option value="NTS2">NTS2</option>
173
+ <option value="NTS1">NTS1</option>
174
+ <option value="RSP-1">RSP-1</option>
175
+ </select>
176
+
177
+ <label for="EngMikly">EngMikly</label>
178
+ <select id="EngMikly" name="EngMikly">
179
+ <option value="">Select EngMikly</option>
180
+ <option value="N">N</option>
181
+ <option value="ML1">ML1</option>
182
+ <option value="Nv">Nv</option>
183
+ </select>
184
+
185
+ <label for="EngLab">EngLab</label>
186
+ <select id="EngLab" name="EngLab">
187
+ <option value="">Select EngLab</option>
188
+ <option value="nan">None</option>
189
+ <option value="IGI">IGI</option>
190
+ </select>
191
+
192
+ <!-- Other input fields remain for user to fill manually -->
193
+ <!-- <label for="ICarat">ICarat</label>
194
+ <input type="number" step="any" id="ICarat" name="ICarat" placeholder="Enter ICarat">
195
+
196
+ <label for="MkblCarat">MkblCarat</label>
197
+ <input type="number" step="any" id="MkblCarat" name="MkblCarat" placeholder="Enter MkblCarat">
198
+
199
+ <label for="SawLossCarat">SawLossCarat</label>
200
+ <input type="number" step="any" id="SawLossCarat" name="SawLossCarat" placeholder="Enter SawLossCarat">
201
+
202
+ <label for="CrapsCarat">CrapsCarat</label>
203
+ <input type="number" step="any" id="CrapsCarat" name="CrapsCarat" placeholder="Enter CrapsCarat">
204
+
205
+ <label for="EngGraphCts">EngGraphCts</label>
206
+ <input type="number" step="any" id="EngGraphCts" name="EngGraphCts" placeholder="Enter EngGraphCts"> -->
207
+
208
+ <label for="EngCts">EngCts</label>
209
+ <input type="number" step="any" id="EngCts" name="EngCts" placeholder="Enter EngCts">
210
+
211
+ <label for="EngAmt">EngAmt</label>
212
+ <input type="number" step="any" id="EngAmt" name="EngAmt" placeholder="Enter EngAmt">
213
+
214
+ <button type="submit" class="btn">Predict Price</button>
215
+ </form>
216
+ </div>
217
+ </body>
218
+ </html>
templates/results.html ADDED
@@ -0,0 +1,185 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Prediction Results</title>
6
+ <style>
7
+ body {
8
+ background-color: #041C32;
9
+ color: #ECB365;
10
+ font-family: Arial, sans-serif;
11
+ margin: 0;
12
+ padding: 20px;
13
+ }
14
+ .container {
15
+ max-width: 600px;
16
+ margin: auto;
17
+ background-color: #04293A;
18
+ padding: 20px;
19
+ border-radius: 8px;
20
+ }
21
+ h1 {
22
+ color: #ECB365;
23
+ text-align: center;
24
+ }
25
+ table {
26
+ width: 100%;
27
+ border-collapse: collapse;
28
+ margin-top: 20px;
29
+ }
30
+ th, td {
31
+ border: 1px solid #064663;
32
+ padding: 10px;
33
+ text-align: center;
34
+ }
35
+ th {
36
+ background-color: #064663;
37
+ }
38
+ .positive {
39
+ color: green;
40
+ font-weight: bold;
41
+ }
42
+ .negative {
43
+ color: red;
44
+ font-weight: bold;
45
+ }
46
+ .btn {
47
+ display: block;
48
+ margin: 20px auto 0;
49
+ padding: 10px 15px;
50
+ background-color: #ECB365;
51
+ color: #041C32;
52
+ border: none;
53
+ border-radius: 4px;
54
+ text-decoration: none;
55
+ font-weight: bold;
56
+ width: fit-content;
57
+ }
58
+ /* Tooltip container */
59
+ .tooltip {
60
+ position: relative;
61
+ display: inline-block;
62
+ cursor: pointer;
63
+ }
64
+ /* Tooltip text (info card) */
65
+ .tooltip .tooltip-content {
66
+ visibility: hidden;
67
+ width: 200px;
68
+ background-color: #ECB365;
69
+ color: #041C32;
70
+ text-align: center;
71
+ border-radius: 6px;
72
+ padding: 10px;
73
+ position: absolute;
74
+ z-index: 1;
75
+ bottom: 125%; /* Position above the text */
76
+ left: 50%;
77
+ transform: translateX(-50%);
78
+ opacity: 0;
79
+ transition: opacity 0.3s;
80
+ }
81
+ /* Tooltip arrow */
82
+ .tooltip .tooltip-content::after {
83
+ content: "";
84
+ position: absolute;
85
+ top: 100%; /* At the bottom of the tooltip */
86
+ left: 50%;
87
+ transform: translateX(-50%);
88
+ border-width: 5px;
89
+ border-style: solid;
90
+ border-color: #ECB365 transparent transparent transparent;
91
+ }
92
+ /* Show tooltip on hover */
93
+ .tooltip:hover .tooltip-content {
94
+ visibility: visible;
95
+ opacity: 1;
96
+ }
97
+ </style>
98
+ </head>
99
+ <body>
100
+ <div class="container">
101
+ <h1>Prediction Results</h1>
102
+ <p>Note: This is a demo model results, so results may vary and be weak on predictions.</p>
103
+ <table>
104
+ <tr>
105
+ <th>Model</th>
106
+ <th>Predicted Price</th>
107
+ <th>Difference (Price - EngAmt)</th>
108
+ </tr>
109
+ <tr>
110
+ <td>
111
+ <div class="tooltip">
112
+ GIA
113
+ <div class="tooltip-content">
114
+ <strong>Note:</strong> this GIA model is trainned over 372 records.
115
+ </div>
116
+ </div>
117
+ </td>
118
+ <td>{{ gia_price }}</td>
119
+ <td>
120
+ {% if gia_diff >= 0 %}
121
+ <span class="positive">{{ gia_diff }}</span>
122
+ {% else %}
123
+ <span class="negative">{{ gia_diff }}</span>
124
+ {% endif %}
125
+ </td>
126
+ </tr>
127
+ <tr>
128
+ <td>
129
+ <div class="tooltip">
130
+ Grade
131
+ <div class="tooltip-content">
132
+ <strong>Note:</strong> this Grade model is trainned over 641 records.
133
+ </div>
134
+ </div>
135
+ </td>
136
+ <td>{{ grade_price }}</td>
137
+ <td>
138
+ {% if grade_diff >= 0 %}
139
+ <span class="positive">{{ grade_diff }}</span>
140
+ {% else %}
141
+ <span class="negative">{{ grade_diff }}</span>
142
+ {% endif %}
143
+ </td>
144
+ </tr>
145
+ <tr>
146
+ <td>
147
+ <div class="tooltip">
148
+ By Grade
149
+ <div class="tooltip-content">
150
+ <strong>Note:</strong> this By Grade model is trainned over 641 records.
151
+ </div>
152
+ </div>
153
+ </td>
154
+ <td>{{ bygrade_price }}</td>
155
+ <td>
156
+ {% if bygrade_diff >= 0 %}
157
+ <span class="positive">{{ bygrade_diff }}</span>
158
+ {% else %}
159
+ <span class="negative">{{ bygrade_diff }}</span>
160
+ {% endif %}
161
+ </td>
162
+ </tr>
163
+ <tr>
164
+ <td>
165
+ <div class="tooltip">
166
+ Makable
167
+ <div class="tooltip-content">
168
+ <strong>Note:</strong> this Makable model is trainned over 1774 records.
169
+ </div>
170
+ </div>
171
+ </td>
172
+ <td>{{ makable_price }}</td>
173
+ <td>
174
+ {% if makable_diff >= 0 %}
175
+ <span class="positive">{{ makable_diff }}</span>
176
+ {% else %}
177
+ <span class="negative">{{ makable_diff }}</span>
178
+ {% endif %}
179
+ </td>
180
+ </tr>
181
+ </table>
182
+ <a href="{{ url_for('home') }}" class="btn">Make Another Prediction</a>
183
+ </div>
184
+ </body>
185
+ </html>