Improve UI/UX - add custom CSS styling and better layout

app.py

@@ -220,33 +220,85 @@ def process_dataset(file, prompt):
         return f"❌ Error: {str(e)}", None, None, None, None, f"❌ Processing failed: {str(e)}"
 
 # Create Gradio interface
-with gr.Blocks(title="PromptPrepML", theme=gr.themes.Soft()) as demo:
+with gr.Blocks(title="PromptPrepML", theme=gr.themes.Base(), css="""
+    .gradio-container {
+        max-width: 1200px !important;
+        margin: auto !important;
+    }
+    .gr-button {
+        background: linear-gradient(45deg, #667eea 0%, #764ba2 100%) !important;
+        border: none !important;
+        color: white !important;
+        font-weight: bold !important;
+        padding: 12px 24px !important;
+        border-radius: 8px !important;
+        transition: all 0.3s ease !important;
+    }
+    .gr-button:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
+    }
+    .gr-file {
+        border: 2px dashed #667eea !important;
+        border-radius: 12px !important;
+        background: #f8f9ff !important;
+        transition: all 0.3s ease !important;
+    }
+    .gr-file:hover {
+        border-color: #764ba2 !important;
+        background: #f0f2ff !important;
+    }
+    .gr-textbox {
+        border-radius: 8px !important;
+        border: 1px solid #e1e5e9 !important;
+    }
+    .gr-textbox:focus {
+        border-color: #667eea !important;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+    }
+    .gr-markdown {
+        text-align: center !important;
+    }
+    .gr-dataframe {
+        border-radius: 8px !important;
+        overflow: hidden !important;
+    }
+""") as demo:
     gr.Markdown("# 🤖 PromptPrepML")
-    gr.Markdown("AI-Powered Machine Learning Data Preprocessing Assistant")
+    gr.Markdown("**AI-Powered Machine Learning Data Preprocessing Assistant**")
     gr.Markdown("Upload your dataset and get ML-ready results in seconds! 🚀")
     
     with gr.Row():
         with gr.Column(scale=1):
-            file_input = gr.File(label="📁 Upload CSV Dataset", file_types=[".csv"])
+            gr.Markdown("### 📁 Upload Dataset")
+            file_input = gr.File(label="Choose CSV file", file_types=[".csv"])
+            
+            gr.Markdown("### 💬 Processing Instructions")
             prompt_input = gr.Textbox(
-                label="💬 Processing Instructions",
+                label="Describe your needs",
                 value="Prepare this dataset for machine learning. Handle missing values, remove identifier columns, extract date features, encode categorical variables, and scale numeric features.",
-                lines=3
+                lines=4
             )
-            process_btn = gr.Button("🚀 Process Dataset", variant="primary")
+            process_btn = gr.Button("🚀 Process Dataset", variant="primary", size="lg")
         
         with gr.Column(scale=2):
-            output_summary = gr.Markdown(label="📊 Results Summary")
+            gr.Markdown("### 📊 Results")
+            output_summary = gr.Markdown(label="Processing Summary")
             status_output = gr.Textbox(label="🔔 Status", interactive=False)
     
-    gr.Markdown("## 📋 Preview of Processed Dataset")
-    preview_output = gr.Dataframe(label="👀 Dataset Preview")
+    gr.Markdown("---")
+    gr.Markdown("### 📋 Dataset Preview")
+    preview_output = gr.Dataframe(label="First 10 rows of processed dataset")
     
-    gr.Markdown("## 📥 Download Files")
+    gr.Markdown("---")
+    gr.Markdown("### 📥 Download Files")
     with gr.Row():
-        processed_download = gr.File(label="📊 Processed Dataset")
-        train_download = gr.File(label="🚂 Training Set")
-        test_download = gr.File(label="🧪 Test Set")
+        with gr.Column():
+            processed_download = gr.File(label="📊 Processed Dataset")
+        with gr.Column():
+            train_download = gr.File(label="🚂 Training Set")
+        with gr.Column():
+            test_download = gr.File(label="🧪 Test Set")
     
     # Event handlers
     process_btn.click(
@@ -255,24 +307,34 @@ with gr.Blocks(title="PromptPrepML", theme=gr.themes.Soft()) as demo:
         outputs=[output_summary, processed_download, train_download, test_download, preview_output, status_output]
     )
     
-    gr.Markdown("## 📚 Instructions")
-    gr.Markdown("""
-    1. 📁 **Upload your CSV dataset** (any size)
-    2. 💬 **Describe your preprocessing needs** (or use default)
-    3. 🚀 **Click "Process Dataset"**
-    4. 📥 **Download your ML-ready results**
-    5. 🎉 **Use for machine learning!**
+    gr.Markdown("---")
+    gr.Markdown("### 📚 How to Use")
+    with gr.Accordion("📖 Instructions", open=False):
+        gr.Markdown("""
+        1. **Upload your CSV dataset** (any size)
+        2. **Describe your preprocessing needs** (or use default)
+        3. **Click "Process Dataset"**
+        4. **Download your ML-ready results**
+        5. **Use for machine learning!**
+        
+        ### 🧠 **Intelligent Features**
+        - **Automatic identifier detection** and removal
+        - **Smart date feature extraction**
+        - **Text feature handling**
+        - **Categorical encoding** for low-cardinality features
+        - **High cardinality handling**
+        - **Missing value imputation**
+        - **Feature scaling**
+        - **Train/test splitting**
+        """)
     
-    ### 🧠 **Intelligent Features**
-    - **Automatic identifier detection** and removal
-    - **Smart date feature extraction**
-    - **Text feature handling**
-    - **Categorical encoding** for low-cardinality features
-    - **High cardinality handling**
-    - **Missing value imputation**
-    - **Feature scaling**
-    - **Train/test splitting**
-    """)
+    gr.Markdown("---")
+    gr.Markdown("""
+    <div style='text-align: center; color: #6b7280; margin-top: 2rem;'>
+        <p><strong>🤖 PromptPrepML</strong> - Automated ML Data Preprocessing</p>
+        <p><small>Convert natural language prompts into ML-ready datasets</small></p>
+    </div>
+    """, unsafe_allow_html=True)
 
 # Launch the app
 if __name__ == "__main__":