Spaces:
Sleeping
Sleeping
File size: 3,709 Bytes
f0a40ab | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | {% extends 'admins/adminbase.html' %}
{% load static %}
{% block contents %}
<div class="container-fluid fade-in">
<div class="row g-4">
<!-- Metrics Table -->
<div class="col-lg-12">
<div class="glass-panel p-4 h-100">
<div
class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom border-secondary border-opacity-25">
<h4 class="text-white fw-bold m-0"><i class="fas fa-flask text-primary me-2"></i> Model Performance
</h4>
<span class="text-muted small">Comparative Analysis</span>
</div>
{% if error %}
<div class="alert alert-danger bg-transparent border-danger text-danger">
<i class="fas fa-exclamation-circle me-2"></i> {{ error }}
</div>
{% endif %}
<div class="table-responsive">
<table class="table text-white align-middle" style="border-color: rgba(255,255,255,0.05);">
<!-- The 'results' context variable typically renders raw HTML table rows/headers,
so we wrap it in a cleaner container style. If 'results' contains <table> tags,
this wrapper might need adjustment in the backend, but assuming it renders content: -->
{{ results|safe }}
</table>
</div>
<style>
/* Result Table Overrides for dark theme compatibility */
.dataframe {
width: 100%;
border: none;
}
.dataframe thead th {
background: rgba(59, 130, 246, 0.2);
color: white;
border: none;
padding: 12px;
}
.dataframe tbody td {
padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
color: #cbd5e1;
}
.dataframe tbody tr:hover {
background: rgba(255, 255, 255, 0.02);
}
</style>
</div>
</div>
<!-- Metric Visualization -->
<div class="col-lg-12">
<div class="glass-panel p-4 h-100">
<div
class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom border-secondary border-opacity-25">
<h4 class="text-white fw-bold m-0"><i class="fas fa-chart-bar text-secondary me-2"></i>
Visualization</h4>
<span class="text-muted small">Accuracy Comparison Graph</span>
</div>
{% if graph_url %}
<div class="text-center p-3" style="background: rgba(0,0,0,0.2); border-radius: 12px;">
<img src="{{ graph_url }}" alt="Metrics Graph"
class="img-fluid rounded border border-secondary border-opacity-25 shadow-lg">
</div>
{% else %}
<div class="text-center py-5 text-muted opacity-50">
<i class="fas fa-chart-area fs-1 mb-3"></i>
<p>No visualization generated. Please initiate model training.</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %} |