Update app.py

app.py

@@ -1,22 +1,66 @@
 import gradio as gr
 import pandas as pd
 
-# Constants and styling
 CUSTOM_CSS = """
 .gradio-container {
     max-width: 1200px !important;
-    margin: auto;
+    margin: auto !important;
+    padding: 2rem !important;
 }
-.section-header {
-    margin-top: 1rem !important;
-    margin-bottom: 1rem !important;
-    font-size: 1.2em !important;
+
+/* Dark theme styles */
+.dark {
+    background-color: #1a1a1a;
+    color: #ffffff;
 }
+
+/* Results styling */
 .results-container {
-    background-color: #f8fafc;
-    padding: 1rem;
+    background: linear-gradient(145deg, #2d2d2d, #363636);
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.result-card {
+    background-color: #2d2d2d;
     border-radius: 8px;
-    margin: 1rem 0;
+    padding: 1rem;
+    margin: 0.5rem;
+}
+
+/* Tab styling */
+.tabs {
+    margin-top: 1rem;
+}
+
+.tab-selected {
+    border-bottom: 2px solid #f4511e !important;
+}
+
+/* Button styling */
+.primary-button {
+    background-color: #f4511e !important;
+    color: white !important;
+    padding: 1rem 2rem !important;
+    border-radius: 8px !important;
+    font-weight: 600 !important;
+    transition: all 0.2s !important;
+}
+
+.primary-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(244, 81, 30, 0.3);
+}
+
+/* Slider customization */
+.slider-track {
+    background-color: #404040;
+}
+
+.slider-track-fill {
+    background-color: #f4511e;
 }
 """
 
@@ -29,11 +73,11 @@ default_compliance_df = pd.DataFrame({
 })
 
 def calculate_roi(num_employees, hours_saved_per_week, hourly_wage,
-                  initial_platform_cost, num_ai_hires, avg_salary,
-                  ai_maintenance_cost, ai_security_cost,
-                  revenue_increase,
-                  preamble_cost_per_user, preamble_deployment, estimated_api_calls,
-                  compliance_data):
+                 initial_platform_cost, num_ai_hires, avg_salary,
+                 ai_maintenance_cost, ai_security_cost,
+                 revenue_increase,
+                 preamble_cost_per_user, preamble_deployment, estimated_api_calls,
+                 compliance_data):
     # Annual labor savings
     total_hours_saved = num_employees * hours_saved_per_week * 52
     labor_cost_savings = total_hours_saved * hourly_wage
@@ -78,67 +122,85 @@ def calculate_roi(num_employees, hours_saved_per_week, hourly_wage,
     return roi_build, roi_preamble, total_benefits, total_costs_build, total_costs_preamble
 
 def create_app():
-    with gr.Blocks(css=CUSTOM_CSS) as roi_app:
-        gr.Markdown("# 📊 Generative AI ROI Calculator", elem_classes="section-header")
+    with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Soft(primary_hue="orange")) as roi_app:
+        # Header
+        gr.Markdown("# 📊 Generative AI ROI Calculator")
         
         # Results section
         with gr.Row(elem_classes="results-container"):
             with gr.Column():
-                build_roi_box = gr.Markdown("**ROI (Building In-House):** 0%")
-                total_costs_build_box = gr.Markdown("**Total Costs:** $0")
+                build_roi_box = gr.Markdown(
+                    value="### 🏗️ Building In-House\n**ROI:** 0%\n**Total Costs:** $0",
+                    elem_classes="result-card"
+                )
             with gr.Column():
-                preamble_roi_box = gr.Markdown("**ROI (Using Preamble):** 0%")
-                total_costs_preamble_box = gr.Markdown("**Total Costs:** $0")
-        
-        # Input sections using tabs for better organization
-        with gr.Tabs():
-            # Organization Details tab
-            with gr.Tab("📊 Organization Details"):
-                with gr.Row():
+                preamble_roi_box = gr.Markdown(
+                    value="### 🚀 Using Preamble\n**ROI:** 0%\n**Total Costs:** $0",
+                    elem_classes="result-card"
+                )
+
+        # Main content tabs
+        with gr.Tabs(elem_classes="tabs"):
+            # Organization Details
+            with gr.Tab("🏢 Organization Details", elem_classes="tab"):
+                with gr.Group():
                     num_employees = gr.Slider(
                         label="Number of Employees Impacted",
-                        minimum=1, maximum=1000, value=50,
+                        minimum=1,
+                        maximum=1000,
+                        value=215,
+                        step=1,
                         info="How many employees will use the AI solution?"
                     )
                     hours_saved_per_week = gr.Slider(
                         label="Hours Saved per Week per Employee",
-                        minimum=0, maximum=40, value=5,
+                        minimum=0,
+                        maximum=40,
+                        value=6.3,
+                        step=0.1,
                         info="Estimated time savings per employee"
                     )
                     hourly_wage = gr.Slider(
                         label="Average Hourly Wage ($)",
-                        minimum=10, maximum=200, value=50,
+                        minimum=10,
+                        maximum=200,
+                        value=62,
+                        step=1,
                         info="Average employee hourly compensation"
                     )
 
-            # Preamble Options tab
+            # Preamble Options
             with gr.Tab("💼 Preamble Options"):
                 preamble_cost_per_user = gr.Slider(
-                    label="Preamble SaaS Cost per User per Month",
-                    minimum=10, maximum=200, value=50,
+                    label="Preamble SaaS Cost per User per Month ($)",
+                    minimum=10,
+                    maximum=200,
+                    value=50,
+                    step=10,
                     info="Monthly cost per user for SaaS deployment"
                 )
                 preamble_deployment = gr.Radio(
-                    ["SaaS", "On-Prem (Fixed $27K/mo)", "Guardrails ($0.005 per API call)"],
+                    choices=["SaaS", "On-Prem (Fixed $27K/mo)", "Guardrails ($0.005 per API call)"],
                     label="Deployment Model",
+                    value="SaaS",
                     info="Choose your preferred deployment option"
                 )
                 estimated_api_calls = gr.Number(
-                    label="Monthly API Calls (Guardrails)",
+                    label="Estimated Monthly API Calls (for Guardrails)",
                     value=10000,
-                    info="Estimated API calls per month if using Guardrails"
+                    info="Required only for Guardrails option"
                 )
 
-            # Compliance tab
+            # Compliance
             with gr.Tab("🛡️ Compliance"):
                 compliance_data = gr.Dataframe(
                     value=default_compliance_df,
                     headers=["Regulation", "Expected Violations", "Penalty", "Attorney Cost"],
                     datatype="pandas",
-                    label="Compliance Data"
+                    label="Compliance Prevention Savings"
                 )
 
-            # Build Costs tab
+            # Build Costs
             with gr.Tab("🔨 Build Costs"):
                 initial_platform_cost = gr.Number(
                     label="Initial Platform Development Cost ($)",
@@ -168,7 +230,7 @@ def create_app():
                         info="Annual security and compliance expenses"
                     )
 
-            # Additional Benefits tab
+            # Benefits
             with gr.Tab("📈 Benefits"):
                 revenue_increase = gr.Number(
                     label="Estimated Annual Revenue Increase ($)",
@@ -177,22 +239,49 @@ def create_app():
                 )
 
         # Calculate button
-        calculate_button = gr.Button("Calculate ROI", variant="primary")
+        calculate_button = gr.Button(
+            "Calculate ROI",
+            elem_classes="primary-button"
+        )
 
-        # Update UI function
-        def update_ui(*inputs):
-            roi_build, roi_preamble, benefits, costs_build, costs_preamble = calculate_roi(*inputs)
-            
-            build_text = f"**ROI (Building In-House):** {roi_build:,.2f}%"
-            preamble_text = f"**ROI (Using Preamble):** {roi_preamble:,.2f}%"
-            costs_build_text = f"**Total Costs:** ${costs_build:,.2f}"
-            costs_preamble_text = f"**Total Costs:** ${costs_preamble:,.2f}"
+        # State for employee count sync
+        employee_count_state = gr.State(value=215)
+
+        def update_results(num_employees, hours_saved_per_week, hourly_wage,
+                         initial_platform_cost, num_ai_hires, avg_salary,
+                         ai_maintenance_cost, ai_security_cost,
+                         revenue_increase,
+                         preamble_cost_per_user, preamble_deployment, estimated_api_calls,
+                         compliance_data):
             
-            return build_text, costs_build_text, preamble_text, costs_preamble_text
+            roi_build, roi_preamble, benefits, costs_build, costs_preamble = calculate_roi(
+                num_employees, hours_saved_per_week, hourly_wage,
+                initial_platform_cost, num_ai_hires, avg_salary,
+                ai_maintenance_cost, ai_security_cost,
+                revenue_increase,
+                preamble_cost_per_user, preamble_deployment, estimated_api_calls,
+                compliance_data
+            )
+
+            build_text = (
+                f"### 🏗️ Building In-House\n"
+                f"**ROI:** {roi_build:,.1f}%\n"
+                f"**Total Costs:** ${costs_build:,.2f}\n"
+                f"**Total Benefits:** ${benefits:,.2f}"
+            )
+
+            preamble_text = (
+                f"### 🚀 Using Preamble\n"
+                f"**ROI:** {roi_preamble:,.1f}%\n"
+                f"**Total Costs:** ${costs_preamble:,.2f}\n"
+                f"**Total Benefits:** ${benefits:,.2f}"
+            )
+
+            return build_text, preamble_text
 
         # Connect the calculate button
         calculate_button.click(
-            update_ui,
+            fn=update_results,
             inputs=[
                 num_employees, hours_saved_per_week, hourly_wage,
                 initial_platform_cost, num_ai_hires, avg_salary,
@@ -201,12 +290,17 @@ def create_app():
                 preamble_cost_per_user, preamble_deployment, estimated_api_calls,
                 compliance_data
             ],
-            outputs=[
-                build_roi_box,
-                total_costs_build_box,
-                preamble_roi_box,
-                total_costs_preamble_box
-            ]
+            outputs=[build_roi_box, preamble_roi_box]
+        )
+
+        # Sync employee count between tabs
+        def sync_employee_count(count):
+            return count
+
+        num_employees.change(
+            fn=sync_employee_count,
+            inputs=[num_employees],
+            outputs=[employee_count_state]
         )
 
     return roi_app