Update app.py

app.py

@@ -1,6 +1,7 @@
 """
 Agent Ken — PM + Social Impact Copilot
-Hugging Face Space (Gradio) → Azure AI Foundry Agent Service
+Data-Informed Product Manager powered by Azure AI Foundry + Microsoft Fabric
+Hugging Face Space (Gradio)
 """
 
 import os
@@ -9,14 +10,14 @@ from azure.ai.projects import AIProjectClient
 from azure.identity import ClientSecretCredential
 from azure.ai.agents.models import ListSortOrder
 
-# ── Azure config (from HF Space secrets) ──────────────────────────
+# ── Azure config ──────────────────────────────────────────────────
 PROJECT_ENDPOINT = os.environ["PROJECT_ENDPOINT"]
 AGENT_ID = os.environ["AGENT_ID"]
 AZURE_TENANT_ID = os.environ["AZURE_TENANT_ID"]
 AZURE_CLIENT_ID = os.environ["AZURE_CLIENT_ID"]
 AZURE_CLIENT_SECRET = os.environ["AZURE_CLIENT_SECRET"]
 
-# ── Azure client (singleton) ──────────────────────────────────────
+# ── Azure client ──────────────────────────────────────────────────
 credential = ClientSecretCredential(
     tenant_id=AZURE_TENANT_ID,
     client_id=AZURE_CLIENT_ID,
@@ -24,7 +25,6 @@ credential = ClientSecretCredential(
 )
 project = AIProjectClient(credential=credential, endpoint=PROJECT_ENDPOINT)
 
-# ── Lazy agent fetch ──────────────────────────────────────────────
 _agent = None
 
 def get_agent():
@@ -91,140 +91,264 @@ def new_conversation():
 
 # ── CSS ───────────────────────────────────────────────────────────
 CSS = """
-/* Force clean sans-serif font */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 * {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
 }
 
 .gradio-container {
-    max-width: 860px !important;
+    max-width: 880px !important;
     margin: 0 auto !important;
 }
 
 footer { display: none !important; }
 
 /* Header */
-.header-section {
+.header-main {
     text-align: center;
-    padding: 24px 16px 12px 16px;
+    padding: 28px 16px 6px 16px;
 }
-.header-section h1 {
-    font-size: 1.6rem;
+.header-main h1 {
+    font-size: 1.7rem;
     font-weight: 700;
-    margin-bottom: 2px;
-    color: #2D3748;
+    color: #1A202C;
+    margin: 0 0 4px 0;
 }
-.header-section .subtitle {
-    font-size: 0.85rem;
+.header-main .tagline {
+    font-size: 0.88rem;
     color: #718096;
     margin: 0;
 }
 
-/* Welcome card — shows in empty chat state */
+/* Architecture badge */
+.arch-badge {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin: 14px auto 6px auto;
+    max-width: 640px;
+}
+.arch-badge .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 5px 13px;
+    border-radius: 8px;
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+}
+.chip-foundry {
+    background: #EBF4FF;
+    color: #2B6CB0;
+    border: 1px solid #BEE3F8;
+}
+.chip-fabric {
+    background: #F0FFF4;
+    color: #276749;
+    border: 1px solid #C6F6D5;
+}
+.chip-ml {
+    background: #FAF5FF;
+    color: #6B46C1;
+    border: 1px solid #E9D8FD;
+}
+.chip-model {
+    background: #FFFAF0;
+    color: #C05621;
+    border: 1px solid #FEEBC8;
+}
+
+/* Welcome card */
 .welcome-card {
-    background: linear-gradient(135deg, #EBF4FF 0%, #F0F7FF 50%, #F5F0FF 100%);
+    background: linear-gradient(135deg, #EBF4FF 0%, #F7FAFC 40%, #F0FFF4 100%);
     border: 1px solid #D6E4F0;
     border-radius: 16px;
-    padding: 28px 32px;
-    margin: 8px 0 16px 0;
+    padding: 24px 28px 20px 28px;
+    margin: 10px 0 14px 0;
     text-align: center;
 }
 .welcome-card .wave {
-    font-size: 2.2rem;
+    font-size: 2rem;
     display: block;
-    margin-bottom: 8px;
+    margin-bottom: 6px;
 }
 .welcome-card h2 {
-    font-size: 1.15rem;
+    font-size: 1.1rem;
     font-weight: 600;
     color: #2D3748;
-    margin: 0 0 8px 0;
+    margin: 0 0 6px 0;
 }
 .welcome-card p {
-    font-size: 0.88rem;
+    font-size: 0.84rem;
     color: #4A5568;
-    margin: 0 0 16px 0;
-    line-height: 1.5;
+    margin: 0 0 14px 0;
+    line-height: 1.55;
 }
 .welcome-tags {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: 6px;
     justify-content: center;
 }
 .welcome-tags span {
     background: white;
     border: 1px solid #E2E8F0;
     border-radius: 20px;
-    padding: 6px 14px;
-    font-size: 0.78rem;
+    padding: 5px 13px;
+    font-size: 0.74rem;
     color: #4A5568;
+    font-weight: 500;
 }
 
-/* Input row */
-.input-row { padding-top: 8px; }
+/* Data section */
+.data-section {
+    background: #F7FAFC;
+    border: 1px solid #E2E8F0;
+    border-radius: 12px;
+    padding: 14px 20px;
+    margin: 0 0 14px 0;
+}
+.data-section h3 {
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: #2D3748;
+    margin: 0 0 8px 0;
+}
+.data-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 8px;
+}
+.data-card {
+    background: white;
+    border: 1px solid #E2E8F0;
+    border-radius: 10px;
+    padding: 10px 12px;
+    text-align: center;
+}
+.data-card .number {
+    font-size: 1.15rem;
+    font-weight: 700;
+    color: #2B6CB0;
+    display: block;
+}
+.data-card .label {
+    font-size: 0.68rem;
+    color: #718096;
+    margin-top: 2px;
+    display: block;
+}
 
 /* Footer */
 .footer-info {
     text-align: center;
     padding: 10px 0;
-    font-size: 0.72rem;
+    font-size: 0.7rem;
     color: #A0AEC0;
+    line-height: 1.6;
 }
 """
 
 # ── Examples ──────────────────────────────────────────────────────
 EXAMPLES = [
-    ["Help me write a PRD for a mobile mental health check-in feature"],
-    ["Score these 3 features using RICE: onboarding revamp, dark mode, referral program"],
-    ["Design an A/B test for our new checkout flow"],
-    ["What metrics should I track for a community-driven marketplace?"],
-    ["Help me draft a stakeholder memo about delaying our launch by 2 weeks"],
+    ["What's our D7 retention rate?"],
+    ["Which acquisition channel has the highest LTV?"],
+    ["How did our checkout experiment perform?"],
+    ["Which user segments are at highest churn risk?"],
+    ["Help me write a PRD for a referral program feature"],
+    ["Score these features using RICE: push notifications, dark mode, onboarding revamp"],
+    ["Design an A/B test for our new premium pricing"],
+    ["Were there any anomalies in our metrics recently?"],
 ]
 
-# ── Gradio UI ─────────────────────────────────────────────────────
-with gr.Blocks(title="Agent Ken — PM Copilot") as demo:
+# ── UI ────────────────────────────────────────────────────────────
+with gr.Blocks(title="Agent Ken — Data-Informed PM Copilot") as demo:
 
     # Header
     gr.HTML("""
-        <div class="header-section">
+        <div class="header-main">
             <h1>🤖 Agent Ken</h1>
-            <p class="subtitle">PM + Social Impact Copilot · Built on Azure AI Foundry</p>
+            <p class="tagline">Data-Informed PM + Social Impact Copilot</p>
+        </div>
+    """)
+
+    # Architecture chips
+    gr.HTML("""
+        <div class="arch-badge">
+            <span class="chip chip-foundry">☁️ Azure AI Foundry</span>
+            <span class="chip chip-fabric">🏭 Microsoft Fabric</span>
+            <span class="chip chip-ml">🧠 3 ML Models</span>
+            <span class="chip chip-model">⚡ GPT-5</span>
         </div>
     """)
 
-    # Welcome card — visual intro instead of broken placeholder
+    # Welcome card
     gr.HTML("""
         <div class="welcome-card">
             <span class="wave">👋</span>
-            <h2>Hi, I'm Agent Ken — your Product Manager Copilot</h2>
-            <p>I combine rigorous product thinking with a social worker's empathy.<br>
-            Ask me anything about product management, strategy, or inclusive design.</p>
+            <h2>Hi, I'm Agent Ken — your Data-Informed Product Manager Copilot</h2>
+            <p>I combine rigorous product thinking with a social worker's empathy — powered by
+            real product analytics from Microsoft Fabric and ML models for churn, LTV, and anomaly detection.</p>
             <div class="welcome-tags">
-                <span>🔍 Discovery & JTBD</span>
-                <span>📊 RICE Prioritization</span>
-                <span>📝 PRDs & User Stories</span>
-                <span>🧪 A/B Test Design</span>
-                <span>📈 Metrics & OKRs</span>
-                <span>🤝 Stakeholder Comms</span>
+                <span>📊 Live Product Data</span>
+                <span>🔮 Churn Prediction</span>
+                <span>💰 LTV Analysis</span>
+                <span>⚠️ Anomaly Detection</span>
+                <span>🧪 A/B Test Results</span>
+                <span>📝 PRDs & Strategy</span>
                 <span>♿ Inclusive Design</span>
             </div>
         </div>
     """)
 
-    # Chat — clean, no placeholder
+    # Data overview cards
+    gr.HTML("""
+        <div class="data-section">
+            <h3>📊 Connected Product Data (Fabric → Foundry)</h3>
+            <div class="data-grid">
+                <div class="data-card">
+                    <span class="number">5,000</span>
+                    <span class="label">Users Tracked</span>
+                </div>
+                <div class="data-card">
+                    <span class="number">204K</span>
+                    <span class="label">Events Analyzed</span>
+                </div>
+                <div class="data-card">
+                    <span class="number">90 Days</span>
+                    <span class="label">Data Window</span>
+                </div>
+                <div class="data-card">
+                    <span class="number">25.6%</span>
+                    <span class="label">D7 Retention</span>
+                </div>
+                <div class="data-card">
+                    <span class="number">$19.87</span>
+                    <span class="label">Avg LTV</span>
+                </div>
+                <div class="data-card">
+                    <span class="number">5</span>
+                    <span class="label">A/B Tests Run</span>
+                </div>
+            </div>
+        </div>
+    """)
+
+    # Chat
     chatbot = gr.Chatbot(
         label="Agent Ken",
-        height=450,
+        height=440,
     )
 
-    # Thread state (invisible)
     thread_state = gr.State(value=None)
 
-    # Input row
-    with gr.Row(elem_classes="input-row"):
+    # Input
+    with gr.Row():
         msg_input = gr.Textbox(
-            placeholder="Ask Agent Ken anything...",
+            placeholder="Ask about metrics, churn, LTV, experiments, or any PM question...",
             label="",
             show_label=False,
             scale=5,
@@ -234,11 +358,9 @@ with gr.Blocks(title="Agent Ken — PM Copilot") as demo:
         )
         send_btn = gr.Button("Send 🚀", variant="primary", scale=1, min_width=100)
 
-    # Actions
     with gr.Row():
         clear_btn = gr.Button("🗑️ New Conversation", variant="secondary", size="sm")
 
-    # Examples
     with gr.Accordion("💡 Try an example", open=False):
         gr.Examples(
             examples=EXAMPLES,
@@ -249,7 +371,9 @@ with gr.Blocks(title="Agent Ken — PM Copilot") as demo:
     # Footer
     gr.HTML("""
         <div class="footer-info">
-            Created by Kendrick Filbert · Powered by Azure AI Foundry
+            Built by <strong>Kendrick Filbert</strong><br>
+            Azure AI Foundry (GPT-5) · Microsoft Fabric (OneLake + MLflow) · 3 ML Models (Churn · LTV · Anomaly)<br>
+            Data: 5K users · 204K events · 90 days · 5 experiments
         </div>
     """)
 
@@ -271,6 +395,5 @@ with gr.Blocks(title="Agent Ken — PM Copilot") as demo:
         outputs=[chatbot, thread_state],
     )
 
-# ── Launch ────────────────────────────────────────────────────────
 if __name__ == "__main__":
     demo.launch(server_name="0.0.0.0", server_port=7860, css=CSS, theme=gr.themes.Soft())