Enhance results HTML generation with dynamic styling and detailed model information
Browse files- Add get_header_color function to dynamically color card headers based on classification
- Update card layout to display model name, confidence scores, and classification
- Replace placeholder content with dynamic model result information
- Improve visual representation of AI and real confidence percentages using progress bars
app.py
CHANGED
@@ -197,6 +197,17 @@ def predict_image(img, confidence_threshold):
|
|
197 |
|
198 |
# Define a function to generate the HTML content
|
199 |
def generate_results_html(results):
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
200 |
print(results)
|
201 |
html_content = f"""
|
202 |
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
|
@@ -226,33 +237,93 @@ def generate_results_html(results):
|
|
226 |
<div class="col">
|
227 |
<div class="card-group">
|
228 |
<div class="card">
|
229 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
230 |
<div class="card-body">
|
231 |
-
<h5 class="card-title">
|
232 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
233 |
</div>
|
234 |
<div class="card-footer">
|
235 |
-
<small class="text-muted">
|
236 |
</div>
|
237 |
</div>
|
238 |
<div class="card">
|
239 |
-
<
|
|
|
|
|
240 |
<div class="card-body">
|
241 |
-
<h5 class="card-title">
|
242 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
243 |
</div>
|
244 |
<div class="card-footer">
|
245 |
-
<small class="text-muted">
|
246 |
</div>
|
247 |
</div>
|
248 |
<div class="card">
|
249 |
-
<
|
|
|
|
|
250 |
<div class="card-body">
|
251 |
-
<h5 class="card-title">
|
252 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
253 |
</div>
|
254 |
<div class="card-footer">
|
255 |
-
<small class="text-muted">
|
256 |
</div>
|
257 |
</div>
|
258 |
</div>
|
|
|
197 |
|
198 |
# Define a function to generate the HTML content
|
199 |
def generate_results_html(results):
|
200 |
+
def get_header_color(label):
|
201 |
+
if label == 'AI':
|
202 |
+
return 'bg-danger'
|
203 |
+
elif label == 'REAL':
|
204 |
+
return 'bg-success'
|
205 |
+
elif label == 'UNCERTAIN':
|
206 |
+
return 'bg-warning'
|
207 |
+
elif label == 'MAINTENANCE':
|
208 |
+
return 'bg-info'
|
209 |
+
else:
|
210 |
+
return 'bg-secondary'
|
211 |
print(results)
|
212 |
html_content = f"""
|
213 |
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
|
|
|
237 |
<div class="col">
|
238 |
<div class="card-group">
|
239 |
<div class="card">
|
240 |
+
<div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
|
241 |
+
<span class="text-center font-weight-bolder">{results[0][-1]}</span>
|
242 |
+
</div>
|
243 |
+
<div class="card-body">
|
244 |
+
<h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
|
245 |
+
|
246 |
+
<div class="progress">
|
247 |
+
<div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
|
248 |
+
</div>
|
249 |
+
<div class="progress">
|
250 |
+
<div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</div>
|
251 |
+
</div>
|
252 |
+
</div>
|
253 |
+
<div class="card-footer">
|
254 |
+
<small class="text-muted">model by @haywoodsloan / more info</small>
|
255 |
+
</div>
|
256 |
+
</div>
|
257 |
+
<div class="card">
|
258 |
+
<div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
|
259 |
+
<span class="text-center font-weight-bolder">{results[0][-1]}</span>
|
260 |
+
</div>
|
261 |
+
<div class="card-body">
|
262 |
+
<h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
|
263 |
+
|
264 |
+
<div class="progress">
|
265 |
+
<div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
|
266 |
+
</div>
|
267 |
+
<div class="progress">
|
268 |
+
<div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</div>
|
269 |
+
</div>
|
270 |
+
</div>
|
271 |
+
<div class="card-footer">
|
272 |
+
<small class="text-muted">model by @haywoodsloan / more info</small>
|
273 |
+
</div>
|
274 |
+
</div>
|
275 |
+
<div class="card">
|
276 |
+
<div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
|
277 |
+
<span class="text-center font-weight-bolder">{results[0][-1]}</span>
|
278 |
+
</div>
|
279 |
<div class="card-body">
|
280 |
+
<h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
|
281 |
+
|
282 |
+
<div class="progress">
|
283 |
+
<div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
|
284 |
+
</div>
|
285 |
+
<div class="progress">
|
286 |
+
<div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</div>
|
287 |
+
</div>
|
288 |
</div>
|
289 |
<div class="card-footer">
|
290 |
+
<small class="text-muted">model by @haywoodsloan / more info</small>
|
291 |
</div>
|
292 |
</div>
|
293 |
<div class="card">
|
294 |
+
<div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
|
295 |
+
<span class="text-center font-weight-bolder">{results[0][-1]}</span>
|
296 |
+
</div>
|
297 |
<div class="card-body">
|
298 |
+
<h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
|
299 |
+
|
300 |
+
<div class="progress">
|
301 |
+
<div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
|
302 |
+
</div>
|
303 |
+
<div class="progress">
|
304 |
+
<div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</div>
|
305 |
+
</div>
|
306 |
</div>
|
307 |
<div class="card-footer">
|
308 |
+
<small class="text-muted">model by @haywoodsloan / more info</small>
|
309 |
</div>
|
310 |
</div>
|
311 |
<div class="card">
|
312 |
+
<div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
|
313 |
+
<span class="text-center font-weight-bolder">{results[0][-1]}</span>
|
314 |
+
</div>
|
315 |
<div class="card-body">
|
316 |
+
<h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
|
317 |
+
|
318 |
+
<div class="progress">
|
319 |
+
<div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
|
320 |
+
</div>
|
321 |
+
<div class="progress">
|
322 |
+
<div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</div>
|
323 |
+
</div>
|
324 |
</div>
|
325 |
<div class="card-footer">
|
326 |
+
<small class="text-muted">model by @haywoodsloan / more info</small>
|
327 |
</div>
|
328 |
</div>
|
329 |
</div>
|