Updated app.

app.py

@@ -1,4 +1,4 @@
-# app.py - Optimized with better timeout handling
+# app.py - Enhanced Professional UI
 import gradio as gr
 import requests
 import json
@@ -192,111 +192,411 @@ def test_service():
     except Exception as e:
         return f"❌ **Test Error**: {str(e)}"
 
-with gr.Blocks(
-    theme=gr.themes.Soft(primary_hue="blue", secondary_hue="slate"), 
-    title="📈 Personal Finance Strategist",
-    css="""
-    .gradio-container {
-        max-width: 1200px !important;
-    }
-    .status-box {
-        padding: 10px;
-        border-radius: 8px;
-        margin: 10px 0;
+# Enhanced professional CSS styling
+custom_css = """
+/* Global container styling */
+.gradio-container {
+    max-width: 1400px !important;
+    margin: 0 auto !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    min-height: 100vh;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+}
+
+/* Main content area */
+.main-content {
+    background: rgba(255, 255, 255, 0.95) !important;
+    backdrop-filter: blur(20px) !important;
+    border-radius: 20px !important;
+    padding: 2rem !important;
+    margin: 2rem !important;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+
+/* Header styling */
+.finance-header {
+    text-align: center;
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+    color: white;
+    padding: 3rem 2rem;
+    border-radius: 20px;
+    margin-bottom: 2rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.finance-header::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+    opacity: 0.1;
+}
+
+.finance-header h1 {
+    font-size: 3rem !important;
+    font-weight: 800 !important;
+    margin-bottom: 1rem !important;
+    background: linear-gradient(45deg, #ffffff, #e0e7ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    position: relative;
+    z-index: 1;
+}
+
+.finance-header p {
+    font-size: 1.25rem !important;
+    opacity: 0.9 !important;
+    margin-bottom: 0 !important;
+    position: relative;
+    z-index: 1;
+}
+
+/* Icon styling */
+.finance-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+    position: relative;
+    z-index: 1;
+}
+
+/* Form sections */
+.form-section {
+    background: white !important;
+    border-radius: 16px !important;
+    padding: 2rem !important;
+    margin-bottom: 1.5rem !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    transition: all 0.3s ease !important;
+}
+
+.form-section:hover {
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
+    transform: translateY(-2px) !important;
+}
+
+.form-section h3 {
+    color: #1e3c72 !important;
+    font-weight: 700 !important;
+    font-size: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.75rem !important;
+}
+
+/* Input styling */
+.gradio-textbox, .gradio-number, .gradio-dropdown {
+    border-radius: 12px !important;
+    border: 2px solid #e5e7eb !important;
+    transition: all 0.3s ease !important;
+    font-size: 1rem !important;
+    padding: 0.75rem 1rem !important;
+}
+
+.gradio-textbox:focus, .gradio-number:focus, .gradio-dropdown:focus {
+    border-color: #667eea !important;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+    outline: none !important;
+}
+
+/* Button styling */
+.primary-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    padding: 1rem 2rem !important;
+    font-size: 1.1rem !important;
+    font-weight: 600 !important;
+    color: white !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3) !important;
+    min-height: 56px !important;
+}
+
+.primary-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4) !important;
+}
+
+.secondary-btn {
+    background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    padding: 1rem 2rem !important;
+    font-size: 1.1rem !important;
+    font-weight: 600 !important;
+    color: white !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 8px 24px rgba(100, 116, 139, 0.3) !important;
+    min-height: 56px !important;
+}
+
+.secondary-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 12px 32px rgba(100, 116, 139, 0.4) !important;
+}
+
+/* Output area styling */
+.output-area {
+    background: white !important;
+    border-radius: 16px !important;
+    padding: 2rem !important;
+    margin-top: 2rem !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    min-height: 200px !important;
+}
+
+/* Tips section */
+.tips-section {
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
+    border-radius: 16px !important;
+    padding: 2rem !important;
+    margin: 2rem 0 !important;
+    border-left: 4px solid #667eea !important;
+}
+
+.tips-section h4 {
+    color: #1e3c72 !important;
+    font-weight: 700 !important;
+    margin-bottom: 1rem !important;
+}
+
+/* Radio button styling */
+.gradio-radio {
+    gap: 1rem !important;
+}
+
+.gradio-radio label {
+    background: white !important;
+    border: 2px solid #e5e7eb !important;
+    border-radius: 12px !important;
+    padding: 1rem !important;
+    transition: all 0.3s ease !important;
+    cursor: pointer !important;
+}
+
+.gradio-radio label:hover {
+    border-color: #667eea !important;
+    background: #f8fafc !important;
+}
+
+.gradio-radio input:checked + label {
+    border-color: #667eea !important;
+    background: linear-gradient(135deg, #667eea10, #764ba210) !important;
+    color: #1e3c72 !important;
+}
+
+/* Progress indicator */
+.loading-indicator {
+    background: linear-gradient(90deg, #667eea, #764ba2, #667eea) !important;
+    background-size: 200% 100% !important;
+    animation: gradient 2s ease infinite !important;
+}
+
+@keyframes gradient {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .finance-header h1 {
+        font-size: 2rem !important;
     }
-    .sticky-btn {
-        position: sticky;
-        top: 0;
-        z-index: 10;
-        background: white;
-        padding: 5px;
+    
+    .form-section {
+        padding: 1.5rem !important;
     }
-    """
-) as interface:
     
-    gr.Markdown(
-        """
-        # 📈 Personal Finance Strategist  
-        **AI-Powered Investment Strategy Generator**
-        """
-    )
+    .main-content {
+        margin: 1rem !important;
+        padding: 1.5rem !important;
+    }
+}
 
-    with gr.Accordion("👤 Personal + Financial Profile", open=True):
-        with gr.Row():
-            with gr.Column():
-                age_group = gr.Dropdown(
-                    choices=["20s", "30s", "40s", "50s+"], 
-                    label="Age Group",
-                    value="30s",
-                    info="Select your current age range"
-                )
-                country = gr.Dropdown(
-                    choices=[
-                        "United States", "Canada", "United Kingdom", 
-                        "Germany", "France", "Italy", "Japan", "India"
-                    ],
-                    label="Country of Residence",
-                    value="United States",
-                    info="Your tax residence country"
-                )
-                income = gr.Number(
-                    label="Monthly Income ($)", 
-                    value=6000,
-                    minimum=0,
-                    info="Your total monthly income before taxes"
-                )
-                expenses = gr.Number(
-                    label="Monthly Expenses ($)", 
-                    value=4000,
-                    minimum=0,
-                    info="Your total monthly expenses"
-                )
+/* Chart and finance icons */
+.finance-bg {
+    position: relative;
+    overflow: hidden;
+}
+
+.finance-bg::after {
+    content: "📈📊💰🏦💳📋";
+    position: absolute;
+    top: -20px;
+    right: -20px;
+    font-size: 6rem;
+    opacity: 0.05;
+    z-index: 0;
+    transform: rotate(12deg);
+}
+"""
 
-            with gr.Column():
+# Create the enhanced interface
+with gr.Blocks(
+    theme=gr.themes.Soft(primary_hue="blue", secondary_hue="slate"),
+    title="💼 AI Investment Strategist Pro",
+    css=custom_css
+) as interface:
+    
+    # Header Section
+    with gr.Row(elem_classes="finance-header finance-bg"):
+        gr.HTML("""
+            <div style="text-align: center; position: relative; z-index: 1;">
+                <div class="finance-icon">💼</div>
+                <h1>AI Investment Strategist Pro</h1>
+                <p>Professional-Grade Investment Strategy Generator</p>
+                <div style="margin-top: 1rem; font-size: 0.95rem; opacity: 0.8;">
+                    🤖 Powered by Advanced AI  •  🔒 Secure & Private  •  📊 Data-Driven Insights
+                </div>
+            </div>
+        """)
+    
+    with gr.Row(elem_classes="main-content"):
+        with gr.Column():
+            
+            # Personal Information Section
+            with gr.Group(elem_classes="form-section"):
+                gr.HTML("<h3>👤 Personal Profile</h3>")
+                
+                with gr.Row():
+                    age_group = gr.Dropdown(
+                        choices=["20s", "30s", "40s", "50s+"], 
+                        label="📅 Age Group",
+                        value="30s",
+                        info="Your current life stage affects investment timeline"
+                    )
+                    
+                    country = gr.Dropdown(
+                        choices=[
+                            "🇺🇸 United States", "🇨🇦 Canada", "🇬🇧 United Kingdom", 
+                            "🇩🇪 Germany", "🇫🇷 France", "🇮🇹 Italy", "🇯🇵 Japan", "🇮🇳 India"
+                        ],
+                        label="🌍 Country of Residence",
+                        value="🇺🇸 United States",
+                        info="Tax jurisdiction for investment recommendations"
+                    )
+            
+            # Financial Information Section
+            with gr.Group(elem_classes="form-section"):
+                gr.HTML("<h3>💰 Financial Overview</h3>")
+                
+                with gr.Row():
+                    income = gr.Number(
+                        label="💵 Monthly Income ($)", 
+                        value=6000,
+                        minimum=0,
+                        info="Total monthly income before taxes and deductions"
+                    )
+                    expenses = gr.Number(
+                        label="💸 Monthly Expenses ($)", 
+                        value=4000,
+                        minimum=0,
+                        info="Total monthly living expenses and obligations"
+                    )
+                
+                # Financial health indicator
+                gr.HTML("""
+                    <div style="background: linear-gradient(90deg, #10b981, #059669); color: white; 
+                               padding: 1rem; border-radius: 8px; margin-top: 1rem; font-size: 0.9rem;">
+                        💡 <strong>Quick Tip:</strong> A healthy savings rate is typically 20% or more of your income
+                    </div>
+                """)
+            
+            # Investment Preferences Section
+            with gr.Group(elem_classes="form-section"):
+                gr.HTML("<h3>🎯 Investment Strategy</h3>")
+                
                 risk_profile = gr.Radio(
-                    choices=["Conservative", "Moderate", "Aggressive"], 
-                    label="Risk Tolerance",
-                    value="Moderate",
-                    info="How comfortable are you with investment risk?",
-                    interactive=True
-                )
-                goal = gr.Textbox(
-                    label="Financial Goal", 
-                    placeholder="e.g., buy a house, retirement, emergency fund, child's education",
-                    info="What are you saving/investing for?"
+                    choices=["🛡️ Conservative", "⚖️ Moderate", "🚀 Aggressive"], 
+                    label="📊 Risk Tolerance",
+                    value="⚖️ Moderate",
+                    info="How comfortable are you with potential investment losses?"
                 )
-                timeframe = gr.Textbox(
-                    label="Investment Timeframe", 
-                    placeholder="e.g., 5 years, 10 years, until retirement",
-                    info="How long do you plan to invest?"
+                
+                with gr.Row():
+                    goal = gr.Textbox(
+                        label="🎯 Primary Financial Goal", 
+                        placeholder="e.g., Down payment for house, retirement planning, children's education, emergency fund",
+                        info="Be specific about what you're working towards",
+                        lines=2
+                    )
+                    timeframe = gr.Textbox(
+                        label="⏰ Investment Timeline", 
+                        placeholder="e.g., 3-5 years, 10+ years, until age 65",
+                        info="When do you need to access these funds?",
+                        lines=2
+                    )
+            
+            # Action Buttons
+            with gr.Row():
+                with gr.Column(scale=3):
+                    submit_btn = gr.Button(
+                        "🚀 Generate My Investment Strategy", 
+                        variant="primary",
+                        size="lg",
+                        elem_classes="primary-btn"
+                    )
+                with gr.Column(scale=1):
+                    test_btn = gr.Button(
+                        "🔍 Test Service", 
+                        variant="secondary",
+                        size="lg",
+                        elem_classes="secondary-btn"
+                    )
+            
+            # Tips Section
+            with gr.Group(elem_classes="tips-section"):
+                gr.HTML("""
+                    <h4>💡 Pro Tips for Better Results</h4>
+                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 1rem;">
+                        <div style="display: flex; align-items: start; gap: 0.5rem;">
+                            <span style="color: #10b981; font-size: 1.2rem;">✓</span>
+                            <span><strong>Be Specific:</strong> Detailed goals lead to better recommendations</span>
+                        </div>
+                        <div style="display: flex; align-items: start; gap: 0.5rem;">
+                            <span style="color: #10b981; font-size: 1.2rem;">✓</span>
+                            <span><strong>Realistic Timeline:</strong> Match your goals with appropriate timeframes</span>
+                        </div>
+                        <div style="display: flex; align-items: start; gap: 0.5rem;">
+                            <span style="color: #10b981; font-size: 1.2rem;">✓</span>
+                            <span><strong>Know Your Risk:</strong> Be honest about your comfort level</span>
+                        </div>
+                        <div style="display: flex; align-items: start; gap: 0.5rem;">
+                            <span style="color: #10b981; font-size: 1.2rem;">✓</span>
+                            <span><strong>Positive Cash Flow:</strong> Ensure income exceeds expenses</span>
+                        </div>
+                    </div>
+                """)
+            
+            # Output Section
+            with gr.Group(elem_classes="output-area"):
+                output = gr.Markdown(
+                    value="""
+                    ## 🎯 Ready to Get Started?
+                    
+                    Fill out your financial profile above and click **"Generate My Investment Strategy"** to receive:
+                    
+                    📋 **Personalized Investment Plan**  
+                    📊 **Asset Allocation Recommendations**  
+                    🏦 **Account Type Suggestions**  
+                    💡 **Tax Optimization Strategies**  
+                    📈 **Risk Management Advice**  
+                    
+                    *Your data is processed securely and never stored permanently.*
+                    """,
+                    elem_id="strategy-output"
                 )
     
-    with gr.Row():
-        submit_btn = gr.Button("🚀 Generate Investment Strategy", variant="primary", size="lg")
-        test_btn = gr.Button("🔍 Test Service", variant="secondary", size="lg")
-
-    gr.Markdown("### 💡 Tips for best results")
-    gr.HTML("""
-    <ul style="line-height: 1.6">
-        <li>✅ Be specific about your financial goal</li>
-        <li>⏳ Include realistic timeframes</li>
-        <li>📉 Consider your actual risk tolerance</li>
-        <li>💵 Ensure income is greater than expenses</li>
-        <li>🌍 Country selection affects tax-advantaged advice</li>
-    </ul>
-    """)
-
-    with gr.Box():
-        output = gr.Markdown(
-            label="📊 Investment Strategy",
-            value="🧠 Click 'Generate Investment Strategy' to get personalized recommendations!",
-        )
-
-    # Optional image upload panel (currently not used in logic)
-    with gr.Accordion("🖼️ Upload a financial-related image (optional - future feature)", open=False):
-        img = gr.Image(label="Upload Chart or Statement", type="filepath")
-
-    # Attach event handlers
+    # Event handlers
     submit_btn.click(
         fn=get_investment_strategy,
         inputs=[age_group, income, expenses, risk_profile, goal, timeframe, country],
@@ -317,4 +617,4 @@ if __name__ == "__main__":
         share=False,
         show_error=True,
         debug=True
-    )
+    )