Update app.py

app.py

@@ -146,37 +146,77 @@ import gradio as gr
 # Pastikan Anda memiliki variabel loaded_models dan fungsi analisis_gaji_final yang terdefinisi
 
 # ------------------------------
-# CLEAN UI (DASHBOARD STYLE) - FIXED
+# DASHBOARD UI 
 # ------------------------------
 
 custom_css = """
 <style>
+/* GLOBAL */
+.gradio-container { 
+    max-width: 1250px !important; 
+    margin: auto; 
+    font-family: 'Inter', sans-serif;
+}
+
+/* CARD CONTAINER */
 .dashboard-box {
     background: #ffffff;
-    padding: 18px;
-    border-radius: 12px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
+    padding: 22px;
+    border-radius: 14px;
+    box-shadow: 0 4px 18px rgba(0,0,0,0.05);
+    border: 1px solid #f1f1f1;
+}
+
+/* HEADERS */
+h1 {
+    font-weight: 700;
+    letter-spacing: -0.5px;
+}
+h3 {
+    margin-bottom: 10px;
+    font-weight: 600;
+}
+
+/* INPUT ELEMENTS */
+.gradio-input, .gradio-dropdown, .gradio-textbox {
+    font-size: 15px !important;
+}
+
+/* BUTTON */
+button.primary {
+    background: linear-gradient(135deg, #005bea, #00c6fb) !important;
+    color: white !important;
+    border-radius: 8px !important;
+    padding: 12px !important;
+    font-size: 16px !important;
+}
+
+/* Dashboard Grid Adjust */
+@media (min-width: 1000px) {
+    .gr-row {
+        gap: 20px;
+    }
 }
-.gradio-container {max-width: 1100px !important; margin:auto;}
 </style>
 """
 
-with gr.Blocks(title="Salary AI") as demo:
+with gr.Blocks(title="Salary AI", theme=gr.themes.Soft()) as demo:
 
     # Inject CSS
     gr.HTML(custom_css)
 
+    # HEADER
     gr.Markdown("""
-    <h1 style='text-align:center;'>💼 Salary AI Dashboard</h1>
-    <p style='text-align:center; color:gray;'>
-        Prediksi gaji + Benchmark Nasional & Regional Indonesia.
+    <h1 style='text-align:center; margin-bottom:4px;'>💼 Salary AI Dashboard</h1>
+    <p style='text-align:center; color:#666; font-size:16px;'>
+        Prediksi gaji berdasarkan benchmark Nasional & Regional Indonesia.
     </p>
     """)
 
     with gr.Row():
 
         # LEFT PANEL — INPUT FORM
-        with gr.Column(scale=1):
+        with gr.Column(scale=1, min_width=380):
             gr.HTML("<div class='dashboard-box'><h3>📥 Input Data</h3>")
             t1 = gr.Textbox(label="Posisi Pekerjaan", placeholder="cth: Data Analyst")
             t2 = gr.Textbox(label="Kabupaten/Kota", placeholder="cth: Bandung")
@@ -195,6 +235,7 @@ with gr.Blocks(title="Salary AI") as demo:
             out_plot = gr.Plot()
             gr.HTML("</div>")
 
+    # RUN CALLBACK
     btn.click(
         analisis_gaji_final,
         inputs=[t1, t2, model],
@@ -203,4 +244,4 @@ with gr.Blocks(title="Salary AI") as demo:
 
 if __name__ == "__main__":
     print("App running...")
-    demo.launch(share=True, debug=True)
+    demo.launch(share=True, debug=True)