Upload 4 files

Dockerfile

@@ -11,7 +11,7 @@ WORKDIR /app
 
 # Install system dependencies for OpenCV and other tools
 RUN apt-get update && apt-get install -y \
-    libgl1-mesa-glx \
+    libgl1 \
     libglib2.0-0 \
     && rm -rf /var/lib/apt/lists/*
 
@@ -31,4 +31,4 @@ RUN mkdir -p uploads results encoder && chmod -R 777 uploads results encoder
 EXPOSE 7860
 
 # Run the application with Gunicorn
-CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--timeout", "600", "app:app"]
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "app:app"]

static/css/style.css

@@ -190,7 +190,7 @@ input[type="file"]:hover::file-selector-button {
 /* Metrics Dashboard */
 .metrics-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 1.5rem;
     margin: 2.5rem 0;
 }
@@ -202,6 +202,9 @@ input[type="file"]:hover::file-selector-button {
     padding: 2rem;
     transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
     box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
 }
 
 .metric-item:hover {
@@ -211,12 +214,13 @@ input[type="file"]:hover::file-selector-button {
 }
 
 .metric-value {
-    font-size: clamp(2.2rem, 5vw, 3.5rem);
-    font-weight: 800;
+    font-size: clamp(2.5rem, 6vw, 4.5rem);
+    font-weight: 900;
     letter-spacing: -0.05em;
     display: block;
     color: white;
     margin-bottom: 0.5rem;
+    line-height: 1;
 }
 
 .metric-label {

templates/report.html

@@ -34,34 +34,29 @@
             <p class="label-mini">Performance Summary</p>
             <div class="metrics-grid">
                 <div class="metric-item">
-                    <span class="metric-value" style="font-size: 4rem; font-weight: 900;">{{ (metrics.accuracy *
-                        100)|round(2) }}%</span>
-                    <span class="metric-label" style="font-size: 14px; font-weight: 800; opacity: 1;">ACCURACY</span>
+                    <span class="metric-value">{{ (metrics.accuracy * 100)|round(2) }}%</span>
+                    <span class="metric-label">ACCURACY</span>
                     <p class="metric-note">Percentage of correct predictions out of total samples.</p>
                 </div>
                 <div class="metric-item">
-                    <span class="metric-value" style="font-size: 4rem; font-weight: 900;">{{ metrics.f1|round(4)
-                        }}</span>
-                    <span class="metric-label" style="font-size: 14px; font-weight: 800; opacity: 1;">WEIGHTED F1</span>
+                    <span class="metric-value">{{ metrics.f1|round(4) }}</span>
+                    <span class="metric-label">WEIGHTED F1</span>
                     <p class="metric-note">Harmonic mean of precision and recall, weighted by class frequency.</p>
                 </div>
                 <div class="metric-item">
-                    <span class="metric-value" style="font-size: 4rem; font-weight: 900;">{{ metrics.macro_f1|round(4)
-                        }}</span>
-                    <span class="metric-label" style="font-size: 14px; font-weight: 800; opacity: 1;">MACRO F1</span>
+                    <span class="metric-value">{{ metrics.macro_f1|round(4) }}</span>
+                    <span class="metric-label">MACRO F1</span>
                     <p class="metric-note">Unweighted mean of F1 scores across all classes (highlights imbalance
                         issues).</p>
                 </div>
                 <div class="metric-item">
-                    <span class="metric-value" style="font-size: 4rem; font-weight: 900;">{{ metrics.precision|round(4)
-                        }}</span>
-                    <span class="metric-label" style="font-size: 14px; font-weight: 800; opacity: 1;">PRECISION</span>
+                    <span class="metric-value">{{ metrics.precision|round(4) }}</span>
+                    <span class="metric-label">PRECISION</span>
                     <p class="metric-note">Ability of the classifier not to label a negative sample as positive.</p>
                 </div>
                 <div class="metric-item">
-                    <span class="metric-value" style="font-size: 4rem; font-weight: 900;">{{ metrics.recall|round(4)
-                        }}</span>
-                    <span class="metric-label" style="font-size: 14px; font-weight: 800; opacity: 1;">RECALL</span>
+                    <span class="metric-value">{{ metrics.recall|round(4) }}</span>
+                    <span class="metric-label">RECALL</span>
                     <p class="metric-note">Ability of the classifier to find all positive samples.</p>
                 </div>
             </div>