Update app.py

app.py

@@ -145,79 +145,88 @@ def analisis_gaji_final(judul, lokasi, model_choice):
 import gradio as gr
 # Pastikan Anda memiliki variabel loaded_models dan fungsi analisis_gaji_final yang terdefinisi
 
-# ------------------------------
-# DASHBOARD UI 
-# ------------------------------
+# -------------------------------------------
+# ENHANCED DEFAULT GRADIO UI (CLEAN & MODERN)
+# -------------------------------------------
 
 custom_css = """
 <style>
-/* GLOBAL */
+
+/* Maintain original Gradio feel */
 .gradio-container { 
-    max-width: 1250px !important; 
+    max-width: 1150px !important; 
     margin: auto; 
+    padding-top: 20px;
     font-family: 'Inter', sans-serif;
 }
 
-/* CARD CONTAINER */
+/* Subtle card styling */
 .dashboard-box {
-    background: #ffffff;
-    padding: 22px;
-    border-radius: 14px;
-    box-shadow: 0 4px 18px rgba(0,0,0,0.05);
-    border: 1px solid #f1f1f1;
+    background: white;
+    padding: 18px 20px;
+    border-radius: 12px;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0px 1px 4px rgba(0,0,0,0.05);
 }
 
-/* HEADERS */
+/* Header */
 h1 {
     font-weight: 700;
-    letter-spacing: -0.5px;
+    margin-bottom: 6px;
+    font-size: 32px;
 }
 h3 {
-    margin-bottom: 10px;
     font-weight: 600;
+    margin-bottom: 12px;
 }
 
-/* INPUT ELEMENTS */
-.gradio-input, .gradio-dropdown, .gradio-textbox {
+/* Buttons — keep default look but nicer */
+button.primary {
+    background: #3b82f6 !important; /* Gradio blue, enhanced */
+    color: white !important;
+    border-radius: 8px !important;
+    padding: 10px 14px !important;
     font-size: 15px !important;
 }
 
-/* BUTTON */
-button.primary {
-    background: linear-gradient(135deg, #005bea, #00c6fb) !important;
-    color: white !important;
+/* Inputs enhance */
+input, textarea, select, .gr-text-input {
     border-radius: 8px !important;
-    padding: 12px !important;
-    font-size: 16px !important;
 }
 
-/* Dashboard Grid Adjust */
-@media (min-width: 1000px) {
-    .gr-row {
-        gap: 20px;
-    }
+/* Row spacing */
+.gr-row {
+    gap: 16px !important;
+}
+
+/* Responsiveness */
+@media (max-width: 768px) {
+    .gradio-container {max-width: 95% !important;}
+    h1 {font-size: 26px;}
 }
 </style>
 """
 
-with gr.Blocks(title="Salary AI", theme=gr.themes.Soft()) as demo:
+with gr.Blocks(title="Salary AI") as demo:
 
+    # -------------------------------------------
     # Inject CSS
+    # -------------------------------------------
     gr.HTML(custom_css)
 
-    # HEADER
+    # Header
     gr.Markdown("""
-    <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.
+    <h1 style='text-align:center;'>💼 Salary AI Dashboard</h1>
+    <p style='text-align:center; color:#555; font-size:15px;'>
+        Prediksi gaji dengan tampilan simple & elegan ala Gradio.
     </p>
     """)
 
     with gr.Row():
 
-        # LEFT PANEL — INPUT FORM
-        with gr.Column(scale=1, min_width=380):
-            gr.HTML("<div class='dashboard-box'><h3>📥 Input Data</h3>")
+        # LEFT — Input Form
+        with gr.Column(scale=1, min_width=360):
+            gr.HTML("<div class='dashboard-box'><h3>📥 Input</h3>")
             t1 = gr.Textbox(label="Posisi Pekerjaan", placeholder="cth: Data Analyst")
             t2 = gr.Textbox(label="Kabupaten/Kota", placeholder="cth: Bandung")
             model = gr.Dropdown(
@@ -228,14 +237,14 @@ with gr.Blocks(title="Salary AI", theme=gr.themes.Soft()) as demo:
             btn = gr.Button("🔍 Analisis Gaji", variant="primary")
             gr.HTML("</div>")
 
-        # RIGHT PANEL — OUTPUT
+        # RIGHT — Output
         with gr.Column(scale=2):
-            gr.HTML("<div class='dashboard-box'><h3>📊 Hasil Analisis</h3>")
+            gr.HTML("<div class='dashboard-box'><h3>📊 Hasil</h3>")
             out_html = gr.HTML()
             out_plot = gr.Plot()
             gr.HTML("</div>")
 
-    # RUN CALLBACK
+    # Button Function
     btn.click(
         analisis_gaji_final,
         inputs=[t1, t2, model],
@@ -243,5 +252,4 @@ with gr.Blocks(title="Salary AI", theme=gr.themes.Soft()) as demo:
     )
 
 if __name__ == "__main__":
-    print("App running...")
-    demo.launch(share=True, debug=True)
+    demo.launch(share=True)