Update commit

src/ui/app.py

@@ -70,23 +70,25 @@ def create_app() -> gr.Blocks:
 
         /* Ensure proper text and background contrast */
         body,
-        .gradio-container,
+        .gradio-container {
+            color: #f8fafc !important;
+        }
+
         .dark .gradio-container,
         .light .gradio-container {
-            color: #1f2937 !important;
-            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
+            color: #f8fafc !important;
         }
 
         /* Header section - enhanced styling */
         .header-container {
             text-align: center;
             padding: 2.5rem 1rem;
-            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
-            color: #1f2937 !important;
+            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
+            color: #f8fafc !important;
             border-radius: 12px;
             margin-bottom: 2.5rem;
-            border: 1px solid #e2e8f0;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+            border: 1px solid #334155;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
             position: relative;
             overflow: hidden;
         }
@@ -113,24 +115,23 @@ def create_app() -> gr.Blocks:
             margin: 0 0 0.5rem 0;
             font-size: 2.25rem;
             font-weight: 700;
-            color: #1e293b !important;
-            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+            color: #ffffff !important;
+            background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
-            text-fill-color: transparent;
         }
 
         .header-container p {
             margin: 0.25rem 0;
             font-size: 1.1rem;
-            color: #475569 !important;
+            color: #cbd5e1 !important;
             font-weight: 400;
         }
 
         .header-subtitle {
             font-size: 1rem;
-            color: #64748b !important;
+            color: #cbd5e1 !important;
             margin-top: 0.75rem;
         }
 
@@ -142,17 +143,17 @@ def create_app() -> gr.Blocks:
         /* Tool section */
         .tool-section {
             padding: 2rem;
-            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
+            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
             border-radius: 12px;
-            border: 1px solid #e2e8f0;
+            border: 1px solid #334155;
             margin-bottom: 1.5rem;
             transition: all 0.3s ease;
-            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
+            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
         }
 
         .tool-section:hover {
-            border-color: #c7d2fe;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
+            border-color: #3b82f6;
+            box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
             transform: translateY(-2px);
         }
 
@@ -160,11 +161,11 @@ def create_app() -> gr.Blocks:
             margin: 0 0 0.75rem 0;
             font-size: 1.375rem;
             font-weight: 600;
-            color: #1e293b !important;
+            color: #ffffff !important;
         }
 
         .tool-description {
-            color: #475569 !important;
+            color: #cbd5e1 !important;
             font-size: 1rem;
             margin-bottom: 1.25rem;
             line-height: 1.6;
@@ -172,46 +173,47 @@ def create_app() -> gr.Blocks:
 
         /* Output box */
         .output-box {
-            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
+            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
             padding: 1.5rem;
             border-radius: 8px;
-            border-left: 4px solid #c7d2fe;
-            border: 1px solid #e2e8f0;
+            border-left: 4px solid #3b82f6;
+            border: 1px solid #334155;
             margin-top: 1.25rem;
             line-height: 1.7;
-            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.03);
+            color: #e2e8f0 !important;
+            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
         }
 
         .output-box h1,
         .output-box h2,
         .output-box h3 {
-            color: #1e293b !important;
+            color: #ffffff !important;
             margin-top: 1.25rem;
             margin-bottom: 0.75rem;
         }
 
         .output-box h1 {
-            border-bottom: 1px solid #e2e8f0;
+            border-bottom: 1px solid #334155;
             padding-bottom: 0.75rem;
         }
 
         /* Success and error states */
         .success {
-            color: #059669 !important;
+            color: #10b981 !important;
         }
 
         .error {
-            color: #dc2626 !important;
+            color: #ef4444 !important;
         }
 
         .warning {
-            color: #d97706 !important;
+            color: #f59e0b !important;
         }
 
         /* Input labels */
         .input-label {
             font-weight: 500;
-            color: #334155 !important;
+            color: #e2e8f0 !important;
             margin-bottom: 0.5rem;
             font-size: 1rem;
         }
@@ -243,11 +245,12 @@ def create_app() -> gr.Blocks:
 
         /* Examples section */
         .examples-section {
-            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
             border-radius: 8px;
             padding: 1rem;
             margin-top: 1.25rem;
-            border: 1px solid #cbd5e1;
+            border: 1px solid #334155;
+            color: #cbd5e1 !important;
         }
 
         /* About section */
@@ -255,10 +258,11 @@ def create_app() -> gr.Blocks:
             max-width: 900px;
             margin: 0 auto;
             padding: 2rem;
+            color: #e2e8f0 !important;
         }
 
         .about-container h2 {
-            color: #1e293b !important;
+            color: #ffffff !important;
             margin-top: 1.5rem;
             margin-bottom: 1rem;
             font-weight: 700;
@@ -273,30 +277,30 @@ def create_app() -> gr.Blocks:
         }
 
         .feature-card {
-            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
+            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
             padding: 1.5rem;
             border-radius: 10px;
-            border: 1px solid #e2e8f0;
+            border: 1px solid #334155;
             transition: all 0.3s ease;
-            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
         }
 
         .feature-card:hover {
-            border-color: #c7d2fe;
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
+            border-color: #3b82f6;
+            box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
             transform: translateY(-3px);
         }
 
         .feature-card h3 {
             margin: 0 0 0.75rem 0;
-            color: #1e293b !important;
+            color: #ffffff !important;
             font-size: 1.125rem;
             font-weight: 600;
         }
 
         .feature-card p {
             margin: 0;
-            color: #475569 !important;
+            color: #cbd5e1 !important;
             font-size: 0.9rem;
             line-height: 1.5;
         }
@@ -314,31 +318,31 @@ def create_app() -> gr.Blocks:
         /* Markdown improvements */
         .gr-markdown {
             line-height: 1.7;
-            color: #1e293b !important;
+            color: #e2e8f0 !important;
         }
 
         .gr-markdown strong {
             font-weight: 600;
-            color: #1e293b !important;
+            color: #ffffff !important;
         }
 
         .gr-markdown code {
-            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
             padding: 0.2rem 0.4rem;
             border-radius: 4px;
             font-family: 'Courier New', monospace;
             font-size: 0.9rem;
-            color: #475569 !important;
-            border: 1px solid #cbd5e1;
+            color: #60a5fa !important;
+            border: 1px solid #334155;
         }
 
         .gr-markdown pre code {
-            background: #1e293b !important;
-            color: #f8fafc !important;
+            background: #0f172a !important;
+            color: #e2e8f0 !important;
             padding: 1rem;
             border-radius: 6px;
             overflow-x: auto;
-            border: none;
+            border: 1px solid #334155;
         }
 
         /* Form spacing */
@@ -349,9 +353,9 @@ def create_app() -> gr.Blocks:
         /* Input and textbox styles */
         .gr-input,
         .gr-textbox {
-            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
-            color: #1e293b !important;
-            border: 1px solid #cbd5e1 !important;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
+            color: #e2e8f0 !important;
+            border: 1px solid #334155 !important;
             border-radius: 8px;
             padding: 0.625rem !important;
             transition: all 0.2s ease;
@@ -359,8 +363,8 @@ def create_app() -> gr.Blocks:
 
         .gr-input:focus,
         .gr-textbox:focus {
-            border-color: #93c5fd !important;
-            box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.2) !important;
+            border-color: #3b82f6 !important;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
         }
 
         /* Responsive adjustments */

src/ui/components.py

@@ -96,6 +96,9 @@ class ToolCallHandler:
         Returns:
             Formatted markdown string for UI display
         """
+        # Ensure category has a value to avoid "referenced before assignment" errors
+        category = category or "general"
+        
         # Validate input
         if not product_name or not isinstance(product_name, str):
             return "**Error: Product name is required and must be text**"
@@ -307,6 +310,9 @@ class ToolCallHandler:
         Returns:
             Formatted markdown string with pricing strategy
         """
+        # Ensure category has a value to avoid "referenced before assignment" errors
+        category = category or "general"
+        
         # Validate inputs
         if not product_name or not isinstance(product_name, str):
             return "**Error: Product name is required and must be text**"
@@ -400,6 +406,9 @@ class ToolCallHandler:
         Returns:
             Formatted markdown string with competitive analysis
         """
+        # Ensure category has a value to avoid "referenced before assignment" errors
+        category = category or "general"
+        
         # Validate product name
         if not product_name or not isinstance(product_name, str):
             return "**Error: Product name is required and must be text**"