UI

app.py

@@ -1,3 +1,4 @@
+# Version: 3.1 - Dark theme UI with white text
 import logging
 from typing import Optional, Tuple
 
@@ -180,76 +181,138 @@ def generate_predictions(
                 ).mean() ** 0.5
                 total_actual = courses_with_actual["actual_enrollment"].sum()
                 total_predicted = courses_with_actual["predicted_enrollment"].sum()
+                accuracy_pct = (
+                    1 - abs(total_predicted - total_actual) / total_actual
+                ) * 100
 
-                summary = f"""## {year} Semester {semester_name} - Validation Against Actual Data
-
-### Historical Validation
-- **Status:** Comparing predictions against actual enrollment data
-- **Courses Validated:** {len(courses_with_actual)} courses
-
-### Prediction Accuracy
-| Metric | Value |
-|--------|-------|
-| Prediction MAE | {comparison_mae:.2f} students |
-| Prediction RMSE | {comparison_rmse:.2f} students |
-| Overall Accuracy | {(1 - abs(total_predicted - total_actual) / total_actual) * 100:.1f}% |
-
-### Enrollment Summary
-| Category | Actual | Predicted | Difference |
-|----------|--------|-----------|------------|
-| Total Students | {int(total_actual)} | {int(total_predicted)} | {int(total_predicted - total_actual):+d} |
-| Courses Analyzed | {len(courses_with_actual)} | {len(courses_with_actual)} | - |
-
-### Model Baseline (Cross-Validation)
-| Metric | Value |
-|--------|-------|
-| Backtest MAE | {metrics["mae"]:.2f} students |
-| Backtest RMSE | {metrics["rmse"]:.2f} students |
-
-### Recommendation Summary
-| Item | Value |
-|------|-------|
-| Courses Recommended to Open | {total_to_open} |
-| Total Quota Needed | {total_seats} seats |
+                diff_color = (
+                    "#4ade80" if total_predicted - total_actual >= 0 else "#f87171"
+                )
+
+                summary = f"""
+<div style="padding: 24px;">
+    <div style="margin-bottom: 24px;">
+        <h2 style="margin: 0 0 8px 0; color: #fff; font-size: 24px; font-weight: 600;">{year} Semester {semester_name}</h2>
+        <p style="color: #9ca3af; margin: 0; font-size: 14px;">Validasi prediksi terhadap data aktual</p>
+    </div>
+
+    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;">
+        <div style="background: #1e293b; padding: 20px; border-radius: 12px; border-left: 4px solid #4ade80;">
+            <div style="font-size: 12px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Akurasi</div>
+            <div style="font-size: 28px; font-weight: 700; color: #4ade80;">{accuracy_pct:.1f}%</div>
+        </div>
+        <div style="background: #1e293b; padding: 20px; border-radius: 12px; border-left: 4px solid #60a5fa;">
+            <div style="font-size: 12px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">MAE</div>
+            <div style="font-size: 28px; font-weight: 700; color: #60a5fa;">{comparison_mae:.2f}</div>
+        </div>
+        <div style="background: #1e293b; padding: 20px; border-radius: 12px; border-left: 4px solid #a78bfa;">
+            <div style="font-size: 12px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">RMSE</div>
+            <div style="font-size: 28px; font-weight: 700; color: #a78bfa;">{comparison_rmse:.2f}</div>
+        </div>
+        <div style="background: #1e293b; padding: 20px; border-radius: 12px; border-left: 4px solid #fb923c;">
+            <div style="font-size: 12px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">MK Divalidasi</div>
+            <div style="font-size: 28px; font-weight: 700; color: #fb923c;">{len(courses_with_actual)}</div>
+        </div>
+    </div>
+
+    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;">
+        <div style="background: #1e293b; padding: 20px; border-radius: 12px;">
+            <h4 style="margin: 0 0 16px 0; color: #fff; font-size: 14px; font-weight: 600;">Ringkasan Enrollment</h4>
+            <div style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #334155;">
+                <span style="color: #9ca3af;">Total Aktual</span>
+                <span style="font-weight: 600; color: #fff;">{int(total_actual)}</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #334155;">
+                <span style="color: #9ca3af;">Total Prediksi</span>
+                <span style="font-weight: 600; color: #fff;">{int(total_predicted)}</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; padding: 12px 0;">
+                <span style="color: #9ca3af;">Selisih</span>
+                <span style="font-weight: 600; color: {diff_color};">{int(total_predicted - total_actual):+d}</span>
+            </div>
+        </div>
+
+        <div style="background: #1e293b; padding: 20px; border-radius: 12px;">
+            <h4 style="margin: 0 0 16px 0; color: #fff; font-size: 14px; font-weight: 600;">Rekomendasi</h4>
+            <div style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #334155;">
+                <span style="color: #9ca3af;">MK Dibuka</span>
+                <span style="font-weight: 600; color: #fff;">{total_to_open}</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #334155;">
+                <span style="color: #9ca3af;">Total Kuota</span>
+                <span style="font-weight: 600; color: #fff;">{total_seats}</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; padding: 12px 0;">
+                <span style="color: #9ca3af;">Backtest MAE</span>
+                <span style="font-weight: 600; color: #fff;">{metrics["mae"]:.2f}</span>
+            </div>
+        </div>
+    </div>
+</div>
 """
             else:
-                summary = f"""## {year} Semester {semester_name}
-
-### Limited Validation Data
-Data semester ada, tetapi tidak ditemukan mata kuliah pilihan yang cocok untuk perbandingan.
-
-### Model Performance (Backtest)
-| Metric | Value |
-|--------|-------|
-| MAE | {metrics["mae"]:.2f} students |
-| RMSE | {metrics["rmse"]:.2f} students |
-
-### Recommendations
-| Item | Value |
-|------|-------|
-| Courses to Open | {total_to_open} |
-| Total Seats | {total_seats} |
-| Estimated Total Students | {int(predictions["predicted_enrollment"].sum())} |
+                summary = f"""
+<div style="padding: 24px;">
+    <div style="margin-bottom: 24px;">
+        <h2 style="margin: 0 0 8px 0; color: #fff; font-size: 24px; font-weight: 600;">{year} Semester {semester_name}</h2>
+        <p style="color: #9ca3af; margin: 0; font-size: 14px;">Data semester ada, tetapi tidak ditemukan MK pilihan yang cocok</p>
+    </div>
+
+    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;">
+        <div style="background: #1e293b; padding: 20px; border-radius: 12px; border-left: 4px solid #60a5fa;">
+            <div style="font-size: 12px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">MAE (Backtest)</div>
+            <div style="font-size: 28px; font-weight: 700; color: #60a5fa;">{metrics["mae"]:.2f}</div>
+        </div>
+        <div style="background: #1e293b; padding: 20px; border-radius: 12px; border-left: 4px solid #a78bfa;">
+            <div style="font-size: 12px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">RMSE (Backtest)</div>
+            <div style="font-size: 28px; font-weight: 700; color: #a78bfa;">{metrics["rmse"]:.2f}</div>
+        </div>
+        <div style="background: #1e293b; padding: 20px; border-radius: 12px; border-left: 4px solid #4ade80;">
+            <div style="font-size: 12px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">MK Dibuka</div>
+            <div style="font-size: 28px; font-weight: 700; color: #4ade80;">{total_to_open}</div>
+        </div>
+        <div style="background: #1e293b; padding: 20px; border-radius: 12px; border-left: 4px solid #fb923c;">
+            <div style="font-size: 12px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Total Kuota</div>
+            <div style="font-size: 28px; font-weight: 700; color: #fb923c;">{total_seats}</div>
+        </div>
+    </div>
+</div>
 """
         else:
-            summary = f"""## {year} Semester {semester_name} - Future Prediction
-
-### Forward-Looking Forecast
-- **Status:** No actual enrollment data available
-- **Type:** Predictive forecast based on historical trends
-
-### Model Performance (Historical Backtest)
-| Metric | Value |
-|--------|-------|
-| MAE | {metrics["mae"]:.2f} students |
-| RMSE | {metrics["rmse"]:.2f} students |
-
-### Forecast Summary
-| Category | Value |
-|----------|-------|
-| Courses to Open | {total_to_open} |
-| Total Seats | {total_seats} |
-| Estimated Total Students | {int(predictions["predicted_enrollment"].sum())} |
+            summary = f"""
+<div style="padding: 24px;">
+    <div style="margin-bottom: 24px;">
+        <h2 style="margin: 0 0 8px 0; color: #fff; font-size: 24px; font-weight: 600;">{year} Semester {semester_name}</h2>
+        <p style="color: #9ca3af; margin: 0; font-size: 14px;">Prediksi masa depan berdasarkan tren historis</p>
+    </div>
+
+    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;">
+        <div style="background: #1e293b; padding: 20px; border-radius: 12px; border-left: 4px solid #60a5fa;">
+            <div style="font-size: 12px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">MAE (Backtest)</div>
+            <div style="font-size: 28px; font-weight: 700; color: #60a5fa;">{metrics["mae"]:.2f}</div>
+        </div>
+        <div style="background: #1e293b; padding: 20px; border-radius: 12px; border-left: 4px solid #a78bfa;">
+            <div style="font-size: 12px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">RMSE (Backtest)</div>
+            <div style="font-size: 28px; font-weight: 700; color: #a78bfa;">{metrics["rmse"]:.2f}</div>
+        </div>
+        <div style="background: #1e293b; padding: 20px; border-radius: 12px; border-left: 4px solid #4ade80;">
+            <div style="font-size: 12px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">MK Dibuka</div>
+            <div style="font-size: 28px; font-weight: 700; color: #4ade80;">{total_to_open}</div>
+        </div>
+        <div style="background: #1e293b; padding: 20px; border-radius: 12px; border-left: 4px solid #fb923c;">
+            <div style="font-size: 12px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Total Kuota</div>
+            <div style="font-size: 28px; font-weight: 700; color: #fb923c;">{total_seats}</div>
+        </div>
+    </div>
+
+    <div style="background: #1e293b; padding: 20px; border-radius: 12px; max-width: 300px;">
+        <h4 style="margin: 0 0 16px 0; color: #fff; font-size: 14px; font-weight: 600;">Estimasi Total</h4>
+        <div style="display: flex; justify-content: space-between; padding: 12px 0;">
+            <span style="color: #9ca3af;">Total Mahasiswa</span>
+            <span style="font-weight: 600; color: #fff;">{int(predictions["predicted_enrollment"].sum())}</span>
+        </div>
+    </div>
+</div>
 """
 
         # Prepare all predictions display
@@ -265,26 +328,26 @@ Data semester ada, tetapi tidak ditemukan mata kuliah pilihan yang cocok untuk p
             ]
         ].copy()
         all_predictions_display.columns = [
-            "Course Code",
-            "Course Name",
-            "Predicted",
-            "Quota",
+            "Kode MK",
+            "Nama MK",
+            "Prediksi",
+            "Kuota",
             "Status",
             "Confidence",
             "Strategy",
         ]
-        all_predictions_display["Predicted"] = all_predictions_display[
-            "Predicted"
-        ].round(1)
-        all_predictions_display["Quota"] = all_predictions_display["Quota"].astype(int)
+        all_predictions_display["Prediksi"] = all_predictions_display["Prediksi"].round(
+            1
+        )
+        all_predictions_display["Kuota"] = all_predictions_display["Kuota"].astype(int)
 
         # Map status to plain text
         all_predictions_display["Status"] = all_predictions_display["Status"].map(
-            {"BUKA": "OPEN", "TUTUP": "CLOSE"}
+            {"BUKA": "BUKA", "TUTUP": "TUTUP"}
         )
 
         all_predictions_display = all_predictions_display.sort_values(
-            "Predicted", ascending=False
+            "Prediksi", ascending=False
         )
 
         # Prepare comparison table if actual data exists
@@ -339,27 +402,25 @@ Data semester ada, tetapi tidak ditemukan mata kuliah pilihan yang cocok untuk p
                 ].copy()
 
                 comparison_display.columns = [
-                    "Course Code",
-                    "Course Name",
-                    "Actual",
-                    "Predicted",
+                    "Kode MK",
+                    "Nama MK",
+                    "Aktual",
+                    "Prediksi",
                     "Error",
                     "Abs Error",
-                    "Accuracy %",
+                    "Akurasi %",
                     "Strategy",
                 ]
 
-                comparison_display["Actual"] = comparison_display["Actual"].astype(int)
-                comparison_display["Predicted"] = comparison_display["Predicted"].round(
-                    1
-                )
+                comparison_display["Aktual"] = comparison_display["Aktual"].astype(int)
+                comparison_display["Prediksi"] = comparison_display["Prediksi"].round(1)
                 comparison_display["Error"] = comparison_display["Error"].round(1)
                 comparison_display["Abs Error"] = comparison_display["Abs Error"].round(
                     1
                 )
-                comparison_display["Accuracy %"] = comparison_display[
-                    "Accuracy %"
-                ].round(1)
+                comparison_display["Akurasi %"] = comparison_display["Akurasi %"].round(
+                    1
+                )
 
                 comparison_display = comparison_display.sort_values(
                     "Abs Error", ascending=False
@@ -404,25 +465,26 @@ def get_data_info() -> str:
         elective_courses = courses[courses["kategori_mk"] == "P"]
 
         info = f"""
-## Dataset Information
-
-### Course Catalog
-| Item | Value |
-|------|-------|
-| Total Courses | {len(courses)} |
-| Elective Courses | {len(elective_courses)} |
-| Mandatory Courses | {len(courses) - len(elective_courses)} |
-
-### Student Population
-| Item | Value |
-|------|-------|
-| Years Available | {students["thn"].min()} - {students["thn"].max()} |
-| Total Records | {len(students)} |
-
-### Data Source
-| Item | Value |
-|------|-------|
-| File | {_config.data.FILE_PATH} |
+<div style="padding: 8px 0;">
+    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
+        <div style="background: #1e293b; padding: 16px; border-radius: 8px; text-align: center;">
+            <div style="font-size: 11px; color: #9ca3af; margin-bottom: 6px;">Total MK</div>
+            <div style="font-size: 20px; font-weight: 700; color: #fff;">{len(courses)}</div>
+        </div>
+        <div style="background: #1e293b; padding: 16px; border-radius: 8px; text-align: center;">
+            <div style="font-size: 11px; color: #9ca3af; margin-bottom: 6px;">MK Pilihan</div>
+            <div style="font-size: 20px; font-weight: 700; color: #4ade80;">{len(elective_courses)}</div>
+        </div>
+        <div style="background: #1e293b; padding: 16px; border-radius: 8px; text-align: center;">
+            <div style="font-size: 11px; color: #9ca3af; margin-bottom: 6px;">MK Wajib</div>
+            <div style="font-size: 20px; font-weight: 700; color: #fff;">{len(courses) - len(elective_courses)}</div>
+        </div>
+        <div style="background: #1e293b; padding: 16px; border-radius: 8px; text-align: center;">
+            <div style="font-size: 11px; color: #9ca3af; margin-bottom: 6px;">Tahun Data</div>
+            <div style="font-size: 20px; font-weight: 700; color: #60a5fa;">{students["thn"].min()}-{students["thn"].max()}</div>
+        </div>
+    </div>
+</div>
 """
         return info
 
@@ -439,16 +501,14 @@ if not init_success:
 
 # Create Gradio Interface
 with gr.Blocks(title="SKS Enrollment Predictor") as demo:
-    # Clean header
+    # Header
     gr.Markdown("# Course Enrollment Predictor")
 
-    with gr.Row(equal_height=True):
+    with gr.Row():
         # Left panel - Controls
-        with gr.Column(scale=1, min_width=280):
-            gr.Markdown("#### Semester Target")
-
+        with gr.Column(scale=1, min_width=300):
             year_input = gr.Number(
-                label="Year",
+                label="Tahun",
                 value=2025,
                 precision=0,
                 minimum=2020,
@@ -467,19 +527,28 @@ with gr.Blocks(title="SKS Enrollment Predictor") as demo:
                 size="lg",
             )
 
+            gr.Markdown("---")
+
             # Data info section
             with gr.Accordion("Dataset Info", open=False):
-                data_info_output = gr.Markdown()
+                data_info_output = gr.HTML()
                 demo.load(fn=get_data_info, inputs=[], outputs=data_info_output)
 
         # Right panel - Results
         with gr.Column(scale=3):
-            summary_output = gr.Markdown(
-                value="Pilih tahun dan semester, lalu klik Generate Predictions"
+            summary_output = gr.HTML(
+                value="""
+                <div style="padding: 60px 40px; text-align: center; background: #1e293b; border-radius: 12px;">
+                    <h3 style="color: #fff; margin: 0 0 8px 0; font-size: 18px; font-weight: 600;">Pilih tahun dan semester</h3>
+                    <p style="color: #9ca3af; margin: 0; font-size: 14px;">Klik Generate Predictions untuk melihat hasil</p>
+                </div>
+                """
             )
 
+    gr.Markdown("---")
+
     # Predictions table
-    gr.Markdown("#### Predictions")
+    gr.Markdown("### Daftar Prediksi Mata Kuliah")
     all_predictions_output = gr.Dataframe(
         label="",
         wrap=True,
@@ -487,9 +556,9 @@ with gr.Blocks(title="SKS Enrollment Predictor") as demo:
     )
 
     # Comparison section
-    with gr.Accordion("Validation Results", open=False) as comparison_accordion:
+    with gr.Accordion("Detail Validasi", open=False) as comparison_accordion:
         comparison_info = gr.Markdown(
-            value="Validation data appears when actual enrollment is available",
+            value="Data validasi muncul ketika data aktual tersedia",
         )
         comparison_output = gr.Dataframe(
             label="",
@@ -512,7 +581,7 @@ with gr.Blocks(title="SKS Enrollment Predictor") as demo:
                 all_predictions,
                 gr.update(open=True),
                 gr.update(
-                    value=f"Validated against {len(comparison)} courses",
+                    value=f"Validasi terhadap {len(comparison)} mata kuliah",
                 ),
                 gr.update(value=comparison),
             )
@@ -523,7 +592,7 @@ with gr.Blocks(title="SKS Enrollment Predictor") as demo:
                 all_predictions,
                 gr.update(open=False),
                 gr.update(
-                    value="No validation data available for future predictions",
+                    value="Tidak ada data validasi untuk prediksi masa depan",
                 ),
                 gr.update(value=None),
             )