Update app.py

app.py

@@ -1,13 +1,13 @@
 import gradio as gr
 import pandas as pd
 
-# Preamble brand colors from the brand guide
+# Corrected Preamble brand colors
 BRAND_COLORS = {
-    'light_gray': '#081423',
-    'yellow': '#1F2C6D',
-    'blue': '#4556E4',
-    'navy': '#FFC700',
-    'dark_gray': '#ECF0F6'
+    'dark_navy': '#081423',  # Dark background
+    'navy': '#1F2C6D',      # Section backgrounds
+    'light_blue': '#4556E4', # Interactive elements
+    'yellow': '#FFC700',    # Highlights and CTAs
+    'light_gray': '#ECF0F6' # Text and borders
 }
 
 # Default compliance data
@@ -30,51 +30,114 @@ CUSTOM_CSS = """
     margin: auto !important;
     padding: 2rem !important;
     background-color: #081423 !important;
+}
+
+/* Product selector styling */
+.product-selector {
+    background-color: #1F2C6D !important;
+    border-radius: 16px !important;
+    padding: 2rem !important;
+    margin-bottom: 2rem !important;
+}
+
+.product-selector h2 {
     color: #ECF0F6 !important;
+    font-size: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+    font-weight: 600 !important;
 }
 
-.header {
-    background-color: #4556E4;
-    padding: 1.5rem;
-    border-radius: 12px;
-    margin-bottom: 2rem;
+/* Radio button styling */
+.radio-group label {
+    background-color: #081423 !important;
+    border-radius: 8px !important;
+    padding: 0.75rem 1.25rem !important;
+    margin-right: 0.5rem !important;
+    color: #ECF0F6 !important;
+    transition: all 0.2s !important;
 }
 
-.product-selector {
-    background: #1F2C6D;
-    border-radius: 12px;
-    padding: 1.5rem;
-    margin-bottom: 2rem;
+.radio-group label.selected {
+    background-color: #4556E4 !important;
+    color: white !important;
 }
 
-.results-container {
-    background: #4556E4;
-    border-radius: 12px;
-    padding: 1.5rem;
-    margin-bottom: 2rem;
+/* Input field styling */
+.input-field {
+    background-color: #081423 !important;
+    border-radius: 8px !important;
+    padding: 1rem !important;
+    margin-bottom: 1rem !important;
+}
+
+.input-field label {
+    color: #4556E4 !important;
+    font-weight: 500 !important;
+    margin-bottom: 0.5rem !important;
 }
 
-.primary-button {
+/* Recommendation panel */
+.recommendation-panel {
     background-color: #FFC700 !important;
+    border-radius: 12px !important;
+    padding: 1.5rem !important;
+    margin-top: 1.5rem !important;
+}
+
+.recommendation-panel h3 {
     color: #081423 !important;
-    font-weight: bold !important;
+    font-size: 1.25rem !important;
+    font-weight: 600 !important;
+    margin-bottom: 1rem !important;
+}
+
+.recommendation-panel ul {
+    color: #081423 !important;
+    list-style-type: none !important;
+    padding-left: 0 !important;
+}
+
+.recommendation-panel li {
+    margin-bottom: 0.5rem !important;
+}
+
+/* Results section */
+.results-container {
+    background-color: #4556E4 !important;
+    border-radius: 16px !important;
+    padding: 2rem !important;
+    margin-top: 2rem !important;
 }
 
 .result-card {
-    background-color: #ECF0F6;
-    color: #081423;
-    border-radius: 8px;
-    padding: 1rem;
-    margin: 0.5rem;
+    background-color: #ECF0F6 !important;
+    border-radius: 12px !important;
+    padding: 1.5rem !important;
+    color: #081423 !important;
 }
 
-.recommendation-panel {
-    background-color: #FFC700;
-    color: #081423;
-    border-radius: 8px;
-    padding: 1rem;
-    margin-top: 1rem;
-    font-weight: bold;
+/* Tab styling */
+.tab-nav {
+    background-color: #1F2C6D !important;
+    border-radius: 8px 8px 0 0 !important;
+    padding: 0.5rem !important;
+}
+
+.tab-nav button {
+    color: #ECF0F6 !important;
+    padding: 0.75rem 1.25rem !important;
+    border-radius: 6px !important;
+}
+
+.tab-nav button.selected {
+    background-color: #4556E4 !important;
+}
+
+/* Input label styling */
+.input-label {
+    color: #4556E4 !important;
+    font-weight: 500 !important;
+    margin-bottom: 0.25rem !important;
 }
 """
 
@@ -88,36 +151,48 @@ def recommend_preamble_solution(deployment_type, existing_ai, monthly_budget):
     - If has existing AI -> Recommend Guardrails first
     """
     if deployment_type == "On-Premises":
-        return ("Enterprise", """### 🏢 Enterprise License
-        **Perfect for organizations that need:**
-        - On-premises deployment
-        - Complete compliance controls
-        - Dedicated support team
-        - Custom integrations
-        Starting at $27,000/month""")
+        return (
+            "Enterprise",
+            """### 🏢 Enterprise License
+            **Perfect for organizations that need:**
+            - On-premises deployment
+            - Complete compliance controls
+            - Dedicated support team
+            - Custom integrations
+            Starting at $27,000/month"""
+        )
     
     if existing_ai == "No, we need a full platform":
         if monthly_budget > 5000:
-            return ("SaaS", """### 🚀 SaaS Platform
-            **Perfect for teams getting started with AI:**
-            - Full platform features
-            - Quick cloud deployment
-            - Regular updates
-            - $50 per user/month""")
+            return (
+                "SaaS",
+                """### 🚀 SaaS Platform
+                **Perfect for teams getting started with AI:**
+                - Full platform features
+                - Quick cloud deployment
+                - Regular updates
+                - $50 per user/month"""
+            )
         else:
-            return ("Guardrails", """### ⚡ Guardrails
-            **Start with our foundational offering:**
-            - Basic AI safety controls
-            - API-first implementation
-            - $0.005 per API call
-            - Usage-based pricing""")
+            return (
+                "Guardrails",
+                """### ⚡ Guardrails
+                **Start with our foundational offering:**
+                - Basic AI safety controls
+                - API-first implementation
+                - $0.005 per API call
+                - Usage-based pricing"""
+            )
     
-    return ("Guardrails", """### ⚡ Guardrails Recommended
-    **Perfect for existing AI applications:**
-    - Quick integration with your AI
-    - API-first implementation
-    - $0.005 per API call
-    - Usage-based pricing""")
+    return (
+        "Guardrails",
+        """### ⚡ Guardrails Recommended
+        **Perfect for existing AI applications:**
+        - Quick integration with your AI
+        - API-first implementation
+        - $0.005 per API call
+        - Usage-based pricing"""
+    )
 
 def calculate_roi(inputs):
     [num_employees, hours_saved_per_week, hourly_wage,
@@ -127,7 +202,7 @@ def calculate_roi(inputs):
      monthly_budget, deployment_type, existing_ai, estimated_api_calls,
      compliance_data] = inputs
 
-    # Calculate savings and costs
+    # Annual labor savings
     total_hours_saved = num_employees * hours_saved_per_week * 52
     labor_cost_savings = total_hours_saved * hourly_wage
 
@@ -142,13 +217,13 @@ def calculate_roi(inputs):
 
     # In-house costs
     total_costs_build = (
-        initial_platform_cost + 
-        (num_ai_hires * avg_salary) + 
-        ai_maintenance_cost + 
+        initial_platform_cost +
+        (num_ai_hires * avg_salary) +
+        ai_maintenance_cost +
         ai_security_cost
     )
 
-    # Preamble costs
+    # Preamble costs based on recommendation
     solution_type, _ = recommend_preamble_solution(deployment_type, existing_ai, monthly_budget)
     if solution_type == "Enterprise":
         total_costs_preamble = 27000 * 12
@@ -164,74 +239,105 @@ def calculate_roi(inputs):
     return roi_build, roi_preamble, total_benefits, total_costs_build, total_costs_preamble
 
 def create_app():
-    with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Soft(primary_hue="blue")) as roi_app:
-        # Header
-        with gr.Row(elem_classes="header"):
-            gr.Markdown(
-                "# 📊 Preamble AI ROI Calculator\n"
-                "[Visit Preamble.com](https://preamble.com) to learn more"
+    with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default()) as roi_app:
+        # Product Selection Section
+        with gr.Box(elem_classes="product-selector"):
+            gr.Markdown("# Find Your Ideal Preamble Solution")
+            
+            gr.Markdown("### Deployment Preference", elem_classes="input-label")
+            deployment_type = gr.Radio(
+                ["Cloud/SaaS", "On-Premises"],
+                label="",
+                value="Cloud/SaaS",
+                elem_classes="radio-group"
             )
-        
-        # Product Selection
-        with gr.Row(elem_classes="product-selector"):
-            with gr.Column():
-                gr.Markdown("## Find Your Ideal Preamble Solution")
-                deployment_type = gr.Radio(
-                    ["Cloud/SaaS", "On-Premises"],
-                    label="Deployment Preference",
-                    value="Cloud/SaaS"
-                )
-                existing_ai = gr.Radio(
-                    ["Yes, we have existing AI applications", "No, we need a full platform"],
-                    label="AI Implementation Status",
-                    value="No, we need a full platform"
-                )
-                monthly_budget = gr.Number(
-                    label="Monthly Budget ($)",
-                    value=5000
-                )
-                estimated_api_calls = gr.Number(
-                    label="Estimated Monthly API Calls",
-                    value=10000,
-                    visible=False
-                )
-                recommendation_box = gr.Markdown(elem_classes="recommendation-panel")
 
-        # Results section
-        with gr.Row(elem_classes="results-container"):
-            with gr.Column():
-                build_roi_box = gr.Markdown(
-                    "### Building In-House\n**ROI:** --%\n**Total Costs:** $0",
-                    elem_classes="result-card"
-                )
-            with gr.Column():
-                preamble_roi_box = gr.Markdown(
-                    "### Using Preamble\n**ROI:** --%\n**Total Costs:** $0",
-                    elem_classes="result-card"
-                )
+            gr.Markdown("### AI Implementation Status", elem_classes="input-label")
+            existing_ai = gr.Radio(
+                ["Yes, we have existing AI applications", "No, we need a full platform"],
+                label="",
+                value="Yes, we have existing AI applications",
+                elem_classes="radio-group"
+            )
+
+            with gr.Row():
+                with gr.Column():
+                    monthly_budget = gr.Number(
+                        label="Monthly Budget ($)",
+                        value=5000,
+                        elem_classes="input-field"
+                    )
+                with gr.Column():
+                    estimated_api_calls = gr.Number(
+                        label="Estimated Monthly API Calls",
+                        value=10000,
+                        elem_classes="input-field"
+                    )
+
+            recommendation_box = gr.Markdown(elem_classes="recommendation-panel")
 
-        # Calculator Inputs
+        # Results section
+        with gr.Box(elem_classes="results-container"):
+            with gr.Row():
+                with gr.Column():
+                    build_roi_box = gr.Markdown(
+                        "### 🏗️ Building In-House\n**ROI:** --%\n**Total Costs:** $0",
+                        elem_classes="result-card"
+                    )
+                with gr.Column():
+                    preamble_roi_box = gr.Markdown(
+                        "### 🚀 Using Preamble\n**ROI:** --%\n**Total Costs:** $0",
+                        elem_classes="result-card"
+                    )
+
+        # ROI Calculator tabs
         with gr.Tabs():
             with gr.Tab("Organization Details"):
                 num_employees = gr.Slider(
                     label="Number of Employees",
-                    minimum=1, maximum=1000, value=215
+                    minimum=1,
+                    maximum=1000,
+                    value=215,
+                    info="How many employees will use the solution?"
                 )
                 hours_saved_per_week = gr.Slider(
                     label="Hours Saved per Week per Employee",
-                    minimum=0, maximum=40, value=6.3
+                    minimum=0,
+                    maximum=40,
+                    value=6.3,
+                    info="Estimated time savings per employee"
                 )
                 hourly_wage = gr.Slider(
                     label="Average Hourly Wage ($)",
-                    minimum=10, maximum=200, value=62
+                    minimum=10,
+                    maximum=200,
+                    value=62,
+                    info="Average employee hourly compensation"
                 )
 
             with gr.Tab("Build Costs"):
-                initial_platform_cost = gr.Number(label="Initial Development Cost ($)", value=100000)
-                num_ai_hires = gr.Number(label="Number of AI Hires", value=1)
-                avg_salary = gr.Number(label="Average Annual Salary ($)", value=150000)
-                ai_maintenance_cost = gr.Number(label="Annual Maintenance ($)", value=20000)
-                ai_security_cost = gr.Number(label="Security & Compliance ($)", value=10000)
+                initial_platform_cost = gr.Number(
+                    label="Initial Development Cost ($)",
+                    value=100000
+                )
+                with gr.Row():
+                    num_ai_hires = gr.Number(
+                        label="Number of AI Personnel",
+                        value=1
+                    )
+                    avg_salary = gr.Number(
+                        label="Average Annual Salary ($)",
+                        value=150000
+                    )
+                with gr.Row():
+                    ai_maintenance_cost = gr.Number(
+                        label="Annual Maintenance ($)",
+                        value=20000
+                    )
+                    ai_security_cost = gr.Number(
+                        label="Security & Compliance ($)",
+                        value=10000
+                    )
 
             with gr.Tab("Compliance"):
                 compliance_data = gr.Dataframe(
@@ -243,10 +349,15 @@ def create_app():
             with gr.Tab("Benefits"):
                 revenue_increase = gr.Number(
                     label="Estimated Annual Revenue Increase ($)",
-                    value=50000
+                    value=50000,
+                    info="Projected revenue growth from AI implementation"
                 )
 
-        calculate_button = gr.Button("Calculate ROI", elem_classes="primary-button")
+        calculate_button = gr.Button(
+            "Calculate ROI",
+            variant="primary",
+            elem_classes="primary-button"
+        )
 
         def update_results(*inputs):
             roi_build, roi_preamble, benefits, costs_build, costs_preamble = calculate_roi(inputs)
@@ -268,15 +379,14 @@ def create_app():
             return build_text, preamble_text
 
         def update_api_calls_visibility(existing_ai, deployment_type):
-            # Show API calls input only for Guardrails candidates
             should_show = (
-                deployment_type != "On-Premises" and 
-                (existing_ai == "Yes, we have existing AI applications" or 
+                deployment_type != "On-Premises" and
+                (existing_ai == "Yes, we have existing AI applications" or
                  monthly_budget <= 5000)
             )
             return gr.update(visible=should_show)
 
-        # Update recommendation when inputs change
+        # Connect the recommendation update
         for input_elem in [deployment_type, existing_ai, monthly_budget]:
             input_elem.change(
                 fn=lambda d, e, b: recommend_preamble_solution(d, e, b)[1],
@@ -284,7 +394,6 @@ def create_app():
                 outputs=[recommendation_box]
             )
             
-            # Update API calls visibility
             if input_elem in [deployment_type, existing_ai]:
                 input_elem.change(
                     fn=update_api_calls_visibility,