Update app.py

app.py

@@ -5,6 +5,7 @@ import json
 import asyncio
 import aiohttp
 from typing import Optional
+from fpdf import FPDF
 
 # Update this to your new optimized Modal URL
 MODAL_URL = "https://devsam2898--personal-investment-strategist-optimized-web.modal.run/strategy"
@@ -199,259 +200,25 @@ def test_service():
         return result
     except Exception as e:
         return f"❌ **Test Error**: {str(e)}"
+    
+def generate_pdf(strategy):
+    pdf = FPDF()
+    pdf.add_page()
+    pdf.set_font("Arial", size=12)
+
+    # Add strategy content to PDF
+    for line in strategy.split('\n'):
+        pdf.cell(0, 10, txt=line, ln=True)
+
+    pdf_output = "investment_strategy.pdf"
+    pdf.output(pdf_output)
+    return pdf_output
+
+def download_strategy(strategy):
+    pdf_path = generate_pdf(strategy)
+    return pdf_path
 
 # Fixed CSS - Removed problematic dropdown overrides
-# 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 - only for textboxes and numbers, NOT dropdowns */
-# input[type="text"], input[type="number"], textarea {
-#     border-radius: 12px !important;
-#     border: 2px solid #e5e7eb !important;
-#     transition: all 0.3s ease !important;
-#     font-size: 1rem !important;
-#     padding: 0.75rem 1rem !important;
-# }
-
-# input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
-#     border-color: #667eea !important;
-#     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
-#     outline: none !important;
-# }
-
-# /* Minimal dropdown styling - let Gradio handle the functionality */
-# .gradio-dropdown {
-#     margin-bottom: 1rem !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;
-#     }
-    
-#     .form-section {
-#         padding: 1.5rem !important;
-#     }
-    
-#     .main-content {
-#         margin: 1rem !important;
-#         padding: 1.5rem !important;
-#     }
-# }
-
-# /* 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);
-# }
-# """
 custom_css = """
 /* Global container styling */
 .gradio-container {
@@ -540,7 +307,7 @@ custom_css = """
 }
 
 .form-section h3 {
-    color: #1e3c72 !important;
+    color: #ffffff !important;
     font-weight: 700 !important;
     font-size: 1.5rem !important;
     margin-bottom: 1.5rem !important;
@@ -564,24 +331,11 @@ input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
     outline: none !important;
 }
 
-/* Corrected dropdown styling for visibility and clickability */
-/* Ensure dropdown options appear on top and are clickable */
+/* Minimal dropdown styling - let Gradio handle the functionality */
 .gradio-dropdown {
     margin-bottom: 1rem !important;
-    /* Add z-index to ensure dropdown options appear above other content */
-    z-index: 1000 !important;
-    position: relative !important; /* Ensure z-index takes effect */
-}
-
-/* Target the dropdown options list specifically if needed (common Gradio class for overlay) */
-.gr-box.gr-options { /* This might be the actual class for the dropdown menu */
-    z-index: 1001 !important; /* Higher than the dropdown container itself */
-    position: relative !important;
-    /* You might also need to ensure no parent has overflow: hidden that clips it */
-    overflow: visible !important;
 }
 
-
 /* Button styling */
 .primary-btn {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
@@ -616,7 +370,7 @@ input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
 
 .secondary-btn:hover {
     transform: translateY(-2px) !important;
-    box_shadow: 0 12px 32px rgba(100, 116, 139, 0.4) !important;
+    box-shadow: 0 12px 32px rgba(100, 116, 139, 0.4) !important;
 }
 
 /* Output area styling */
@@ -640,7 +394,7 @@ input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
 }
 
 .tips-section h4 {
-    color: #1e3c72 !important;
+    color: #ffffff !important;
     font-weight: 700 !important;
     margin-bottom: 1rem !important;
 }
@@ -688,11 +442,11 @@ input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
     .finance-header h1 {
         font-size: 2rem !important;
     }
-
+    
     .form-section {
         padding: 1.5rem !important;
     }
-
+    
     .main-content {
         margin: 1rem !important;
         padding: 1.5rem !important;
@@ -717,11 +471,10 @@ input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
 }
 """
 
-
 # Create the enhanced interface
 with gr.Blocks(
     theme=gr.themes.Soft(primary_hue="blue", secondary_hue="slate"),
-    title="💼 AI Investment Strategist Pro",
+    title="💼 Vittaśāstra - AI Strategist",
     css=custom_css
 ) as interface:
     
@@ -730,7 +483,7 @@ with gr.Blocks(
         gr.HTML("""
             <div style="text-align: center; position: relative; z-index: 1;">
                 <div class="finance-icon">💼</div>
-                <h1>AI Investment Strategist Pro</h1>
+                <h1>Vittaśāstra - AI Strategist</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
@@ -744,28 +497,24 @@ with gr.Blocks(
             # 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+"], 
+                    age_group = gr.Textbox(
                         label="📅 Age Group",
                         value="30s",
                         info="Your current life stage affects investment timeline",
                         interactive=True,
                         show_label=True
                     )
-                    
-                    country = gr.Dropdown(
-                        choices=[
-                            "United States", "Canada", "United Kingdom", 
-                            "Germany", "France", "Italy", "Japan", "India"
-                        ],
+
+                    country = gr.Textbox(
                         label="🌍 Country of Residence",
                         value="United States",
                         info="Tax jurisdiction for investment recommendations",
                         interactive=True,
                         show_label=True
                     )
+
             
             # Financial Information Section
             with gr.Group(elem_classes="form-section"):
@@ -874,24 +623,44 @@ with gr.Blocks(
                 """)
             
             # Output Section
+            # with gr.Group(elem_classes="output-area"):
+            #     output = gr.Markdown(
+            #         value="""
+            #         ## 🎯 Ready to Get Started?
+                    
+            #         Fill out your each and every 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**  
+            #         💳 **Debt Management Guidance**  
+                    
+            #         *Your data is processed securely and never stored permanently.*
+            #         """,
+            #         elem_id="strategy-output"
+            #     )
             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**  
-                    💳 **Debt Management Guidance**  
-                    
+
+                    Fill out your each and every 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**
+                    💳 **Debt Management Guidance**
+
                     *Your data is processed securely and never stored permanently.*
                     """,
                     elem_id="strategy-output"
                 )
+                download_btn = gr.Button("📥 Download Strategy as PDF", variant="secondary", elem_classes="secondary-btn")
+
     
     # Event handlers
     submit_btn.click(
@@ -907,6 +676,12 @@ with gr.Blocks(
         show_progress=True
     )
 
+    download_btn.click(
+    fn=download_strategy,
+    inputs=output,
+    outputs=gr.File(label="Download PDF")
+    )
+
 if __name__ == "__main__":
     interface.launch(
         server_name="0.0.0.0",