Update app.py

app.py

@@ -1,13 +1,13 @@
 import gradio as gr
 import pandas as pd
 
-# Corrected Preamble brand colors
+# Preamble brand colors - exact hex codes
 BRAND_COLORS = {
-    '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
+    'dark_navy': '#081423',
+    'navy': '#1F2C6D',
+    'light_blue': '#4556E4',
+    'yellow': '#FFC700',
+    'light_gray': '#ECF0F6'
 }
 
 # Default compliance data
@@ -32,73 +32,88 @@ CUSTOM_CSS = """
     background-color: #081423 !important;
 }
 
-/* Product selector styling */
+/* Product selector top section */
 .product-selector {
     background-color: #1F2C6D !important;
     border-radius: 16px !important;
-    padding: 2rem !important;
+    padding: 2.5rem !important;
     margin-bottom: 2rem !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
 }
 
-.product-selector h2 {
+/* Title styling */
+.selector-title {
     color: #ECF0F6 !important;
-    font-size: 1.5rem !important;
-    margin-bottom: 1.5rem !important;
+    font-size: 1.75rem !important;
     font-weight: 600 !important;
+    margin-bottom: 2rem !important;
+    line-height: 1.2 !important;
+}
+
+/* Section headings */
+.section-label {
+    color: #ECF0F6 !important;
+    font-size: 1.1rem !important;
+    font-weight: 500 !important;
+    margin: 1.5rem 0 1rem !important;
+}
+
+/* Radio options styling */
+.radio-group {
+    margin-bottom: 1.5rem !important;
 }
 
-/* Radio button styling */
 .radio-group label {
     background-color: #081423 !important;
+    border: 1px solid #4556E4 !important;
     border-radius: 8px !important;
     padding: 0.75rem 1.25rem !important;
-    margin-right: 0.5rem !important;
+    margin: 0.5rem 0.75rem 0.5rem 0 !important;
     color: #ECF0F6 !important;
+    font-size: 1rem !important;
     transition: all 0.2s !important;
 }
 
 .radio-group label.selected {
     background-color: #4556E4 !important;
-    color: white !important;
+    border-color: #4556E4 !important;
+    color: #ECF0F6 !important;
 }
 
-/* Input field styling */
-.input-field {
+/* Input fields */
+.number-input {
     background-color: #081423 !important;
+    border: 1px solid #4556E4 !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;
+    color: #ECF0F6 !important;
+    padding: 0.75rem !important;
 }
 
 /* Recommendation panel */
 .recommendation-panel {
     background-color: #FFC700 !important;
     border-radius: 12px !important;
-    padding: 1.5rem !important;
-    margin-top: 1.5rem !important;
+    padding: 2rem !important;
+    margin-top: 2rem !important;
+    color: #081423 !important;
 }
 
 .recommendation-panel h3 {
-    color: #081423 !important;
-    font-size: 1.25rem !important;
+    font-size: 1.5rem !important;
     font-weight: 600 !important;
     margin-bottom: 1rem !important;
+    color: #081423 !important;
 }
 
 .recommendation-panel ul {
-    color: #081423 !important;
     list-style-type: none !important;
     padding-left: 0 !important;
+    margin: 1rem 0 !important;
 }
 
 .recommendation-panel li {
-    margin-bottom: 0.5rem !important;
+    margin-bottom: 0.75rem !important;
+    font-size: 1.1rem !important;
 }
 
 /* Results section */
@@ -114,47 +129,35 @@ CUSTOM_CSS = """
     border-radius: 12px !important;
     padding: 1.5rem !important;
     color: #081423 !important;
+    margin: 0.5rem !important;
 }
 
-/* Tab styling */
+/* Calculator tabs */
 .tab-nav {
     background-color: #1F2C6D !important;
     border-radius: 8px 8px 0 0 !important;
     padding: 0.5rem !important;
+    gap: 0.5rem !important;
 }
 
 .tab-nav button {
     color: #ECF0F6 !important;
     padding: 0.75rem 1.25rem !important;
     border-radius: 6px !important;
+    margin: 0 0.25rem !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;
-}
 """
 
 def recommend_preamble_solution(deployment_type, existing_ai, monthly_budget):
-    """
-    Logic for recommending Preamble solution:
-    - If on-prem is needed -> Enterprise
-    - If no existing AI:
-        - If budget > 5000 -> SaaS Platform
-        - If budget <= 5000 -> Guardrails
-    - If has existing AI -> Recommend Guardrails first
-    """
     if deployment_type == "On-Premises":
         return (
             "Enterprise",
             """### 🏢 Enterprise License
-            **Perfect for organizations that need:**
+            Perfect for organizations that need:
             - On-premises deployment
             - Complete compliance controls
             - Dedicated support team
@@ -167,7 +170,7 @@ def recommend_preamble_solution(deployment_type, existing_ai, monthly_budget):
             return (
                 "SaaS",
                 """### 🚀 SaaS Platform
-                **Perfect for teams getting started with AI:**
+                Perfect for teams getting started with AI:
                 - Full platform features
                 - Quick cloud deployment
                 - Regular updates
@@ -177,7 +180,7 @@ def recommend_preamble_solution(deployment_type, existing_ai, monthly_budget):
             return (
                 "Guardrails",
                 """### ⚡ Guardrails
-                **Start with our foundational offering:**
+                Start with our foundational offering:
                 - Basic AI safety controls
                 - API-first implementation
                 - $0.005 per API call
@@ -187,7 +190,7 @@ def recommend_preamble_solution(deployment_type, existing_ai, monthly_budget):
     return (
         "Guardrails",
         """### ⚡ Guardrails Recommended
-        **Perfect for existing AI applications:**
+        Perfect for existing AI applications:
         - Quick integration with your AI
         - API-first implementation
         - $0.005 per API call
@@ -242,39 +245,44 @@ def create_app():
     with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default()) as roi_app:
         # Product Selection Section
         with gr.Row(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"
-            )
-
-            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.Column():
+                gr.Markdown(
+                    "# Find Your Ideal Preamble Solution",
+                    elem_classes="selector-title"
+                )
+                
+                gr.Markdown("Deployment Preference", elem_classes="section-label")
+                deployment_type = gr.Radio(
+                    ["Cloud/SaaS", "On-Premises"],
+                    label="",
+                    value="Cloud/SaaS",
+                    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"
-                    )
+                gr.Markdown("AI Implementation Status", elem_classes="section-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"
+                )
 
-            recommendation_box = gr.Markdown(elem_classes="recommendation-panel")
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        monthly_budget = gr.Number(
+                            label="Monthly Budget ($)",
+                            value=50000,
+                            elem_classes="number-input"
+                        )
+                    with gr.Column(scale=1):
+                        estimated_api_calls = gr.Number(
+                            label="Estimated Monthly API Calls",
+                            value=10000,
+                            elem_classes="number-input",
+                            visible=False
+                        )
+
+                recommendation_box = gr.Markdown(elem_classes="recommendation-panel")
 
         # Results section
         with gr.Row(elem_classes="results-container"):
@@ -288,7 +296,7 @@ def create_app():
                     "### 🚀 Using Preamble\n**ROI:** --%\n**Total Costs:** $0",
                     elem_classes="result-card"
                 )
-                
+
         # ROI Calculator tabs
         with gr.Tabs():
             with gr.Tab("Organization Details"):
@@ -354,8 +362,7 @@ def create_app():
 
         calculate_button = gr.Button(
             "Calculate ROI",
-            variant="primary",
-            elem_classes="primary-button"
+            variant="primary"
         )
 
         def update_results(*inputs):