Changes UI of the app.

app.py

@@ -1,5 +1,3 @@
-#Gradio app
-# app.py
 # app.py - Optimized with better timeout handling
 import gradio as gr
 import requests
@@ -194,7 +192,6 @@ def test_service():
     except Exception as e:
         return f"❌ **Test Error**: {str(e)}"
 
-# Create the interface with better UX
 with gr.Blocks(
     theme=gr.themes.Soft(primary_hue="blue", secondary_hue="slate"), 
     title="📈 Personal Finance Strategist",
@@ -207,105 +204,99 @@ with gr.Blocks(
         border-radius: 8px;
         margin: 10px 0;
     }
+    .sticky-btn {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        background: white;
+        padding: 5px;
+    }
     """
 ) as interface:
     
     gr.Markdown(
         """
-        # 📈 Personal Finance Strategist
+        # 📈 Personal Finance Strategist  
         **AI-Powered Investment Strategy Generator**
-        
-        Get personalized investment recommendations based on your financial profile and goals.
-        
-        ---
         """
     )
+
+    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"
+                )
+
+            with gr.Column():
+                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?"
+                )
+                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():
-        with gr.Column(scale=1):
-            gr.Markdown("### 👤 Personal Information")
-            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"
-            )
-            
-            gr.Markdown("### 💰 Financial Information")
-            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"
-            )
-            
-        with gr.Column(scale=1):
-            gr.Markdown("### 🎯 Investment Preferences")
-            risk_profile = gr.Radio(
-                choices=["Conservative", "Moderate", "Aggressive"], 
-                label="Risk Tolerance",
-                value="Moderate",
-                info="How comfortable are you with investment risk?"
-            )
-            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?"
-            )
-            timeframe = gr.Textbox(
-                label="Investment Timeframe", 
-                placeholder="e.g., 5 years, 10 years, until retirement",
-                info="How long do you plan to invest?"
-            )
-    
-    gr.Markdown("---")
-    
-    with gr.Row():
-        submit_btn = gr.Button(
-            "🚀 Generate Investment Strategy", 
-            variant="primary",
-            size="lg"
-        )
-        test_btn = gr.Button(
-            "🔍 Test Service", 
-            variant="secondary",
-            size="lg"
-        )
-    
-    with gr.Row():
-        gr.Markdown(
-            """
-            **💡 Tips for best results:**
-            - Be specific about your financial goal
-            - Include realistic timeframes  
-            - Consider your actual risk tolerance
-            - Make sure your income > expenses for meaningful investing
-            - Country selection affects tax-advantaged account recommendations
-            """
+        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!",
         )
-    
-    output = gr.Markdown(
-        label="Investment Strategy",
-        value="Click 'Generate Investment Strategy' to get your personalized recommendations!"
-    )
-    
-    # Event handlers
+
+    # 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
     submit_btn.click(
         fn=get_investment_strategy,
         inputs=[age_group, income, expenses, risk_profile, goal, timeframe, country],
@@ -326,4 +317,4 @@ if __name__ == "__main__":
         share=False,
         show_error=True,
         debug=True
-    )
+    )