Upload app.py

Updated to use blocks.
Added additonal CPA colors.

app.py

@@ -1,111 +1,288 @@
-import gradio as gr
-import requests
-import os
-from fastapi import FastAPI
-from fastapi.middleware.cors import CORSMiddleware
-from ping import add_ping_route
-
-
-# Configuration
-LANGFLOW_API_URL = os.environ.get("LANGFLOW_API_URL", "")
-LANGFLOW_API_KEY = os.environ.get("LANGFLOW_API_KEY", "") 
-HF_API_KEY = os.environ.get("HF_API_KEY", "") 
-
-if not LANGFLOW_API_URL:
-    print("FATAL: LANGFLOW_API_URL secret not found or is empty.")
-else:
-    print("SUCCESS: LANGFLOW_API_URL loaded securely.")
-
-if not LANGFLOW_API_KEY:
-    print("FATAL: LANGFLOW_API_KEY secret not found or is empty.")
-else:
-    print("SUCCESS: LANGFLOW_API_KEY loaded securely.")
-
-if not HF_API_KEY:
-    print("FATAL: HF_API_KEY secret not found or is empty.")
-else:
-    print("SUCCESS: HF_API_KEY loaded securely.")
-
-
-
-
-# Function that calls the LangFlow chat
-def call_langflow(message, history):
-    """
-    Call Langflow API and return the response
-    """
-    headers = {
-        "Content-Type": "application/json",
-    }
-    
-    # Add API keys
-    if HF_API_KEY:
-       headers["Authorization"] = f"Bearer {HF_API_KEY}"
-    if LANGFLOW_API_KEY: 
-        headers["x-api-key"] = f"{LANGFLOW_API_KEY}"
-       
-    
-    # Adjust this payload based on your Langflow API structure
-    payload = {
-        "input_value": message,
-        "output_type": "chat",
-        "input_type": "chat",
-        "tweaks": {}
-    }
-    
-    try:
-        response = requests.post(
-            LANGFLOW_API_URL,
-            json=payload,
-            headers=headers,
-            timeout=30
-        )
-        response.raise_for_status()
-        
-        # Parse response - adjust based on your API response structure
-        data = response.json()
-        
-        # Common Langflow response structures:
-        # Option 1: data["outputs"][0]["outputs"][0]["results"]["message"]["text"]
-        # Option 2: data["result"]["message"]
-        # Adjust the following line based on your actual response:
-        
-        bot_message = data["outputs"][0]["outputs"][0]["results"]["message"]["text"]
-        return bot_message
-        
-    except requests.exceptions.RequestException as e:
-        return f"Error connecting to Langflow: {str(e)}"
-    except (KeyError, IndexError) as e:
-        return f"Error parsing response: {str(e)}\nResponse: {data}"
-
-#Create FastAPI App for health check.
-fastapi_app = FastAPI(title="Chatbot with Ping API")
-# Optional CORS setup
-fastapi_app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["*"],
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
-# Add /ping route from ping.py 
-add_ping_route(fastapi_app, call_langflow)
-
-
-
-# Create Gradio Chat Interface
-chatui = gr.ChatInterface(
-    fn=call_langflow,
-    #title="CPA Chatbot POC",
-    description="You can use this chatbot to answer questions related to Crown Pointe Academy policies.",
-    examples=["Summarize the school's uniform policy", "Can a student wear earrings?"],
-    css="""
-    footer {display: none !important;}
-    .footer {display: none !important;}
-    #footer {display: none !important;}
-    .svelte-1p1dq6v {display: none !important;}
-    """
-)
-
-# Mount Gradio app to FastAPI at root path
+import gradio as gr
+import requests
+import os
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from ping import add_ping_route
+
+# ===== THEME COLOR VARIABLES =====
+PRIMARY_COLOR = "#13406B"      # CPA Dark Corporate Blue
+SECONDARY_COLOR = "#CD9D5B"    # CPA Muted Bronze/Tan
+BACKGROUND_COLOR = "#f8fafc"   # Light gray - page background
+TEXT_COLOR = "#1e293b"         # Dark slate - text color
+
+# Configuration
+LANGFLOW_API_URL = os.environ.get("LANGFLOW_API_URL", "")
+LANGFLOW_API_KEY = os.environ.get("LANGFLOW_API_KEY", "") 
+HF_API_KEY = os.environ.get("HF_API_KEY", "") 
+
+if not LANGFLOW_API_URL:
+    print("FATAL: LANGFLOW_API_URL secret not found or is empty.")
+else:
+    print("SUCCESS: LANGFLOW_API_URL loaded securely.")
+
+if not LANGFLOW_API_KEY:
+    print("FATAL: LANGFLOW_API_KEY secret not found or is empty.")
+else:
+    print("SUCCESS: LANGFLOW_API_KEY loaded securely.")
+
+if not HF_API_KEY:
+    print("FATAL: HF_API_KEY secret not found or is empty.")
+else:
+    print("SUCCESS: HF_API_KEY loaded securely.")
+
+
+# Function that calls the LangFlow chat
+def call_langflow_api(message):
+    """
+    Call Langflow API and return the response
+    """
+    headers = {
+        "Content-Type": "application/json",
+    }
+    
+    # Add API keys
+    if HF_API_KEY:
+       headers["Authorization"] = f"Bearer {HF_API_KEY}"
+    if LANGFLOW_API_KEY: 
+        headers["x-api-key"] = f"{LANGFLOW_API_KEY}"
+    
+    # Adjust this payload based on your Langflow API structure
+    payload = {
+        "input_value": message,
+        "output_type": "chat",
+        "input_type": "chat",
+        "tweaks": {}
+    }
+    
+    try:
+        response = requests.post(
+            LANGFLOW_API_URL,
+            json=payload,
+            headers=headers,
+            timeout=30
+        )
+        response.raise_for_status()
+        
+        # Parse response - adjust based on your API response structure
+        data = response.json()
+        
+        bot_message = data["outputs"][0]["outputs"][0]["results"]["message"]["text"]
+        return bot_message
+        
+    except requests.exceptions.RequestException as e:
+        return f"Error connecting to Langflow: {str(e)}"
+    except (KeyError, IndexError) as e:
+        return f"Error parsing response: {str(e)}\nResponse: {data}"
+
+
+#Create FastAPI App for health check.
+fastapi_app = FastAPI(title="Chatbot with Ping API")
+# Optional CORS setup
+fastapi_app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+# Add /ping route from ping.py 
+add_ping_route(fastapi_app, call_langflow_api)
+
+
+# Custom CSS using theme variables
+custom_css = f"""
+    /* Hide footer */
+    footer {{display: none !important;}}
+    .footer {{display: none !important;}}
+    #footer {{display: none !important;}}
+    .svelte-1p1dq6v {{display: none !important;}}
+    
+    /* Main container background */
+    .gradio-container {{
+        background-color: {BACKGROUND_COLOR} !important;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }}
+    
+    /* Chatbot container styling */
+    #chatbot-window {{
+        background-color: {BACKGROUND_COLOR} !important;
+        border-radius: 12px !important;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
+        border: 2px solid {PRIMARY_COLOR} !important;
+    }}
+    #chatbot-window .placeholder-content {{
+        background-color: {BACKGROUND_COLOR} !important;
+    }}
+    #chatbot-window .bubble-wrap {{
+        background-color: {BACKGROUND_COLOR} !important;
+    }}
+    
+    /* Description text */
+    .description {{
+        color: {TEXT_COLOR} !important;
+        font-size: 16px !important;
+        margin-bottom: 20px !important;
+    }}
+    
+    /* User messages */
+    #chatbot-window .message.user {{
+        background-color: {SECONDARY_COLOR}  !important;
+        color:  white !important;
+        border: none !important;
+    }}
+    #chatbot-window .flex-wrap {{
+        border: none !important;
+    }}
+    #chatbot-window .message.user p{{
+        color:  white !important;
+    }}
+    
+    
+    /* Bot messages */
+    #chatbot-window .message.bot {{
+        background-color: {PRIMARY_COLOR}  !important;
+        color:  white !important;
+        border: none !important;
+    }}
+     #chatbot-window .message.bot p{{
+        color:  white !important;
+    }}
+    
+    /* Input textbox */
+      #input-textbox {{
+        background-color: {BACKGROUND_COLOR} !important;
+    }}
+
+    #input-textbox textarea{{
+        border: 2px solid {SECONDARY_COLOR} !important;
+        border-radius: 8px !important;
+        font-size: 16px !important;
+        color: {TEXT_COLOR} !important;
+        background-color: {BACKGROUND_COLOR} !important;
+    }}
+    
+    #input-textbox textarea:focus {{
+        border-color: {PRIMARY_COLOR} !important;
+        box-shadow: 0 0 0 3px rgba(19, 64, 107, 0.1) !important;
+    }}
+    
+    /* Buttons */
+    button {{
+        border-radius: 8px !important;
+        font-weight: 600 !important;
+    }}
+    
+    
+    /* Primary buttons (Send) */
+    #send-button {{
+        background-color: {PRIMARY_COLOR} !important;
+        color: white !important;
+        border: none !important;
+    }}
+    
+    #send-button:hover {{
+        background-color: {SECONDARY_COLOR} !important;
+    }}
+    
+    /* Secondary buttons (Clear) */
+    button.secondary {{
+        background-color: white !important;
+        color: {PRIMARY_COLOR} !important;
+        border: 2px solid {SECONDARY_COLOR} !important;
+    }}
+    
+    button.secondary:hover {{
+        background-color: {BACKGROUND_COLOR} !important;
+    }}
+    
+    /* Example buttons */
+    #example-buttons button {{
+        background-color: {PRIMARY_COLOR} !important;
+        color: white !important;
+        border: 2px solid {SECONDARY_COLOR} !important;
+        border-radius: 8px !important;
+        font-weight: 500 !important;
+    }}
+    
+    #example-buttons button:hover {{
+        background-color: {SECONDARY_COLOR} !important;
+    }}
+
+    /* Example label text */
+    #example-buttons .label {{
+        color: {TEXT_COLOR} !important;
+        font-size: 16px !important;
+    }}
+"""
+
+
+# Create custom Gradio interface with Blocks
+with gr.Blocks(css=custom_css, analytics_enabled=False) as chatui:
+    
+    # Description
+    gr.Markdown(
+        "Ask Cosmo the cougar questions related to Crown Pointe Academy policies.",
+        elem_classes="description"
+    )
+    
+    # Chatbot component - MUST use type='messages'
+    chatbot = gr.Chatbot(
+        type='messages',
+        height=500,
+        elem_classes="chatbot",
+        elem_id="chatbot-window"
+    )
+    
+    # Input row
+    with gr.Row():
+        msg = gr.Textbox(
+            label="",
+            placeholder="Type your message here...",
+            scale=4,
+            show_label=False,
+            elem_id="input-textbox"
+        )
+        submit = gr.Button(
+            "Send",
+            scale=1,
+            variant="primary",
+            elem_id="send-button"
+        )
+    
+    # Example buttons
+    gr.Examples(
+        examples=[
+            "Summarize the school's uniform policy",
+            "Can a student wear earrings?"
+        ],
+        inputs=msg,
+        label="Try these examples:",
+        elem_id="example-buttons"
+    )
+    
+    # Clear button
+    clear = gr.Button("Clear Chat", variant="secondary")
+    
+    # Chat logic for messages format
+    def respond(message, chat_history):
+        if not message.strip():
+            return "", chat_history
+        
+        # Get bot response
+        bot_message = call_langflow_api(message)
+        
+        # Append messages in the new format
+        chat_history.append({"role": "user", "content": message})
+        chat_history.append({"role": "assistant", "content": bot_message})
+        
+        return "", chat_history
+    
+    # Event handlers - mark as non-API to avoid schema issues
+    msg.submit(respond, [msg, chatbot], [msg, chatbot], api_name=False)
+    submit.click(respond, [msg, chatbot], [msg, chatbot], api_name=False)
+    clear.click(lambda: [], None, chatbot, queue=False, api_name=False)
+
+
+# Mount Gradio app to FastAPI at root path
 app = gr.mount_gradio_app(fastapi_app, chatui, path="/")