Hugging Face's logo

Spaces:
WebashalarForML
/
diamond_price_predictor
Sleeping

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

Update templates/home.html

Browse files
Files changed (1) hide show
  1. templates/home.html +219 -218
templates/home.html CHANGED
@@ -1,218 +1,219 @@
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>
 
 
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
+ <p><strong>Note:</strong>there may be values missing in option due to less data.</p>
63
+ {% with messages = get_flashed_messages(with_categories=true) %}
64
+ {% if messages %}
65
+ {% for category, message in messages %}
66
+ <div class="flash">{{ message }}</div>
67
+ {% endfor %}
68
+ {% endif %}
69
+ {% endwith %}
70
+ <form action="{{ url_for('predict') }}" method="post">
71
+
72
+ <!-- Fixed dropdown fields -->
73
+ <label for="Tag">Tag (Category)</label>
74
+ <select id="Tag" name="Tag">
75
+ <option value="">Select Tag</option>
76
+ <option value="A">A</option>
77
+ <option value="B">B</option>
78
+ <option value="C">C</option>
79
+ <option value="D">D</option>
80
+ <option value="E">E</option>
81
+ <option value="F">F</option>
82
+ <option value="G">G</option>
83
+ <option value="H">H</option>
84
+ <option value="I">I</option>
85
+ </select>
86
+
87
+ <label for="EngShp">EngShp</label>
88
+ <select id="EngShp" name="EngShp">
89
+ <option value="">Select EngShp</option>
90
+ <option value="OV">OV</option>
91
+ <option value="MQ">MQ</option>
92
+ <option value="PE">PE</option>
93
+ <option value="R">R</option>
94
+ <option value="EM">EM</option>
95
+ <option value="HR">HR</option>
96
+ <option value="RD">RD</option>
97
+ <option value="PR">PR</option>
98
+ </select>
99
+
100
+ <label for="EngQua">EngQua</label>
101
+ <select id="EngQua" name="EngQua">
102
+ <option value="">Select EngQua</option>
103
+ <option value="SI2">SI2</option>
104
+ <option value="SI1">SI1</option>
105
+ <option value="VS2">VS2</option>
106
+ <option value="VVS2">VVS2</option>
107
+ <option value="VS1">VS1</option>
108
+ <option value="I2">I2</option>
109
+ <option value="I1">I1</option>
110
+ <option value="I2-">I2-</option>
111
+ <option value="I3">I3</option>
112
+ <option value="SI3">SI3</option>
113
+ <option value="I1-">I1-</option>
114
+ <option value="I4">I4</option>
115
+ <option value="I5">I5</option>
116
+ <option value="VVS1">VVS1</option>
117
+ </select>
118
+
119
+ <label for="EngCol">EngCol</label>
120
+ <select id="EngCol" name="EngCol">
121
+ <option value="">Select EngCol</option>
122
+ <option value="G">G</option>
123
+ <option value="F">F</option>
124
+ <option value="H">H</option>
125
+ <option value="E">E</option>
126
+ <option value="I">I</option>
127
+ <option value="J">J</option>
128
+ <option value="D">D</option>
129
+ <option value="L">L</option>
130
+ <option value="K">K</option>
131
+ <option value="M">M</option>
132
+ </select>
133
+
134
+ <label for="EngCut">EngCut</label>
135
+ <select id="EngCut" name="EngCut">
136
+ <option value="">Select EngCut</option>
137
+ <option value="EX3">EX3</option>
138
+ <option value="VG1">VG1</option>
139
+ <option value="EX1">EX1</option>
140
+ <option value="EX4">EX4</option>
141
+ <option value="EX2">EX2</option>
142
+ <option value="GD1">GD1</option>
143
+ </select>
144
+
145
+ <label for="EngPol">EngPol</label>
146
+ <select id="EngPol" name="EngPol">
147
+ <option value="">Select EngPol</option>
148
+ <option value="EX">EX</option>
149
+ <option value="VG">VG</option>
150
+ </select>
151
+
152
+ <label for="EngSym">EngSym</label>
153
+ <select id="EngSym" name="EngSym">
154
+ <option value="">Select EngSym</option>
155
+ <option value="EX">EX</option>
156
+ <option value="VG">VG</option>
157
+ </select>
158
+
159
+ <label for="EngFlo">EngFlo</label>
160
+ <select id="EngFlo" name="EngFlo">
161
+ <option value="">Select EngFlo</option>
162
+ <option value="Non">Non</option>
163
+ <option value="Fnt">Fnt</option>
164
+ <option value="Med">Med</option>
165
+ <option value="Str">Str</option>
166
+ <option value="VStr">VStr</option>
167
+ </select>
168
+
169
+ <label for="EngNts">EngNts</label>
170
+ <select id="EngNts" name="EngNts">
171
+ <option value="">Select EngNts</option>
172
+ <option value="N">N</option>
173
+ <option value="NTS2">NTS2</option>
174
+ <option value="NTS1">NTS1</option>
175
+ <option value="RSP-1">RSP-1</option>
176
+ </select>
177
+
178
+ <label for="EngMikly">EngMikly</label>
179
+ <select id="EngMikly" name="EngMikly">
180
+ <option value="">Select EngMikly</option>
181
+ <option value="N">N</option>
182
+ <option value="ML1">ML1</option>
183
+ <option value="Nv">Nv</option>
184
+ </select>
185
+
186
+ <label for="EngLab">EngLab</label>
187
+ <select id="EngLab" name="EngLab">
188
+ <option value="">Select EngLab</option>
189
+ <option value="nan">None</option>
190
+ <option value="IGI">IGI</option>
191
+ </select>
192
+
193
+ <!-- Other input fields remain for user to fill manually -->
194
+ <!-- <label for="ICarat">ICarat</label>
195
+ <input type="number" step="any" id="ICarat" name="ICarat" placeholder="Enter ICarat">
196
+
197
+ <label for="MkblCarat">MkblCarat</label>
198
+ <input type="number" step="any" id="MkblCarat" name="MkblCarat" placeholder="Enter MkblCarat">
199
+
200
+ <label for="SawLossCarat">SawLossCarat</label>
201
+ <input type="number" step="any" id="SawLossCarat" name="SawLossCarat" placeholder="Enter SawLossCarat">
202
+
203
+ <label for="CrapsCarat">CrapsCarat</label>
204
+ <input type="number" step="any" id="CrapsCarat" name="CrapsCarat" placeholder="Enter CrapsCarat">
205
+
206
+ <label for="EngGraphCts">EngGraphCts</label>
207
+ <input type="number" step="any" id="EngGraphCts" name="EngGraphCts" placeholder="Enter EngGraphCts"> -->
208
+
209
+ <label for="EngCts">EngCts</label>
210
+ <input type="number" step="any" id="EngCts" name="EngCts" placeholder="Enter EngCts">
211
+
212
+ <label for="EngAmt">EngAmt</label>
213
+ <input type="number" step="any" id="EngAmt" name="EngAmt" placeholder="Enter EngAmt">
214
+
215
+ <button type="submit" class="btn">Predict Price</button>
216
+ </form>
217
+ </div>
218
+ </body>
219
+ </html>