Upload app.py

app.py

@@ -60,10 +60,115 @@ CSS = """
         radial-gradient(circle at top right, rgba(16,185,129,0.08), transparent 22%),
         linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%);
 }
+.gradio-container .main {
+    max-width: 1320px;
+}
 #ask_btn {
     background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%) !important;
     color: white !important;
     border: none !important;
+    min-height: 64px !important;
+    font-weight: 700 !important;
+    font-size: 18px !important;
+}
+#demo_header {
+    margin-bottom: 10px;
+}
+#demo_header .hero-card {
+    background: linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(241,245,249,0.92) 100%);
+    border: 1px solid #dbe4f0;
+    border-radius: 24px;
+    padding: 28px 30px;
+    box-shadow: 0 16px 40px rgba(15,23,42,0.08);
+}
+#demo_header h1 {
+    margin: 0 0 8px 0;
+    font-size: 52px;
+    line-height: 1;
+    color: #0f172a;
+}
+#demo_header p {
+    margin: 0;
+    font-size: 22px;
+    line-height: 1.5;
+    color: #334155;
+}
+#demo_header .hero-kicker {
+    margin-bottom: 10px;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #2563eb;
+}
+#demo_header .hero-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 18px;
+}
+#demo_header .hero-chip {
+    padding: 8px 12px;
+    border-radius: 999px;
+    background: #eef4ff;
+    border: 1px solid #cfe0ff;
+    color: #1e3a8a;
+    font-size: 14px;
+    font-weight: 600;
+}
+#demo_note {
+    margin-top: 12px;
+}
+#demo_note .note-card {
+    background: rgba(255,255,255,0.9);
+    border: 1px solid #dbe4f0;
+    border-radius: 20px;
+    padding: 18px 22px;
+    color: #334155;
+    box-shadow: 0 10px 28px rgba(15,23,42,0.05);
+}
+#demo_note strong {
+    color: #0f172a;
+}
+#demo_note code {
+    background: #eef4ff;
+    border: 1px solid #dbe4f0;
+    border-radius: 8px;
+    padding: 2px 6px;
+}
+#question_box textarea {
+    font-size: 22px !important;
+    line-height: 1.5 !important;
+}
+#feedback_row {
+    margin-top: 8px;
+}
+#feedback_row button {
+    min-height: 54px !important;
+    font-weight: 700 !important;
+}
+#demo_footer {
+    margin-top: 10px;
+}
+#demo_footer .footer-card {
+    background: rgba(255,255,255,0.86);
+    border: 1px solid #dbe4f0;
+    border-radius: 18px;
+    padding: 14px 18px;
+    color: #475569;
+    font-size: 14px;
+    line-height: 1.6;
+}
+#demo_footer strong {
+    color: #0f172a;
+}
+@media (max-width: 900px) {
+    #demo_header h1 {
+        font-size: 38px;
+    }
+    #demo_header p {
+        font-size: 18px;
+    }
 }
 """
 
@@ -502,7 +607,7 @@ def result_card(title: str, body: str, tone: str = "normal") -> str:
 def initial_result_html() -> str:
     return result_card(
         "Ready",
-        "Ask a question about the preloaded Phase 2 project corpus to receive a grounded answer with page and line references.",
+        "Ask a specific question about approvals, dates, controls, migration results, traceability, or document ownership to receive a grounded answer with citation.",
     )
 
 
@@ -800,25 +905,6 @@ def render_result(
         tone="warn" if abstained else "success",
     )
 
-    metric_boxes = "".join(
-        [
-            make_metric_badge("Latency", f"{metrics['latency_seconds']:.2f}s"),
-            make_metric_badge(
-                "Answer Relevance",
-                "N/A" if metrics.get("answer_relevance") is None else f"{metrics['answer_relevance']:.2f}",
-            ),
-            make_metric_badge(
-                "Context Precision",
-                "N/A" if metrics.get("context_precision") is None else f"{metrics['context_precision']:.2f}",
-            ),
-            make_metric_badge(
-                "Faithfulness",
-                "N/A" if metrics.get("faithfulness_proxy") is None else f"{metrics['faithfulness_proxy']:.2f}",
-            ),
-            make_metric_badge("Hallucination", f"{metrics.get('hallucination_rate', 0.0):.2f}"),
-        ]
-    )
-
     question_html = (
         "<div style='margin-bottom:14px;padding:14px 16px;border-radius:16px;"
         "background:linear-gradient(135deg,#eef4ff 0%,#f8fafc 100%);"
@@ -834,7 +920,6 @@ def render_result(
         f"{question_html}"
         "<div style='display:grid;grid-template-columns:1fr;gap:14px'>"
         f"{answer_card}{source_card}"
-        f"<div style='display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px'>{metric_boxes}</div>"
         "</div></div>"
     )
 
@@ -842,14 +927,13 @@ def render_result(
 def render_document_status(session: SessionData) -> str:
     doc_count = len({record.source_file for record in session.page_records})
     return result_card(
-        "Corpus Loaded",
+        "Knowledge Base",
         (
             f"<strong>{html.escape(session.file_name)}</strong><br>"
-            f"Documents indexed: {doc_count}<br>"
-            f"Pages indexed: {session.page_count}<br>"
-            f"Chunks indexed: {len(session.chunks)}<br>"
-            f"Extractor used: {html.escape(session.extractor)}<br>"
-            f"Knowledge base mode: preloaded project corpus"
+            f"{doc_count} project documents indexed • "
+            f"{session.page_count} pages • "
+            f"{len(session.chunks)} searchable chunks<br>"
+            f"Source mode: curated preloaded corpus • Extractor: {html.escape(session.extractor)}"
         ),
         tone="success",
     )
@@ -1324,24 +1408,34 @@ with gr.Blocks(css=CSS) as demo:
     session_state = gr.State(PRELOADED_SESSION.session_id if PRELOADED_SESSION else None)
     response_state = gr.State(None)
 
-    gr.Markdown(
+    gr.HTML(
         f"""
-        # {APP_NAME}
-        {APP_TAGLINE}
-
-        **Project corpus mode**
-        - Preloaded Phase 2 project documents
-        - Optimized for this fixed validation corpus
-        - Best for onboarding, project lookup, and validation Q&A
-        - Rate limit: **{MAX_QUESTIONS_PER_MINUTE} questions per minute**
+        <div id="demo_header">
+            <div class="hero-card">
+                <div class="hero-kicker">Grounded Project Q&A</div>
+                <h1>{html.escape(APP_NAME)}</h1>
+                <p>{html.escape(APP_TAGLINE)}</p>
+                <div class="hero-chips">
+                    <div class="hero-chip">Curated Phase 2 corpus</div>
+                    <div class="hero-chip">Cited answers</div>
+                    <div class="hero-chip">Validation-focused lookup</div>
+                    <div class="hero-chip">Best for onboarding and project review</div>
+                </div>
+            </div>
+        </div>
         """
     )
 
-    gr.Markdown(
-        f"""
-        <div style="padding:14px 16px;border-radius:14px;background:#fff8eb;border:1px solid #fed7aa;color:#9a3412">
-        <strong>Privacy notice</strong><br>
-        {html.escape(PRIVACY_NOTICE)}
+    gr.HTML(
+        """
+        <div id="demo_note">
+            <div class="note-card">
+                <strong>Try questions like:</strong>
+                <code>What is the approved go-live date?</code>
+                <code>Who is the author of the Risk Assessment document?</code>
+                <code>What is the minimum password length?</code><br><br>
+                Ask specific questions grounded in the Project Helix corpus. Unsupported or out-of-scope questions may be declined.
+            </div>
         </div>
         """
     )
@@ -1357,30 +1451,28 @@ with gr.Blocks(css=CSS) as demo:
             lines=2,
             placeholder="Ask a question about the preloaded project documents...",
             scale=5,
+            elem_id="question_box",
         )
         ask_btn = gr.Button("Ask", elem_id="ask_btn", scale=1)
 
     result_html_component = gr.HTML(initial_result_html())
 
-    with gr.Row():
+    with gr.Row(elem_id="feedback_row"):
         helpful_btn = gr.Button("Helpful")
         needs_work_btn = gr.Button("Needs Improvement")
 
-    feedback_status = gr.Textbox(
-        label="Feedback Status",
-        value="",
-        interactive=False,
-    )
+    feedback_status = gr.Textbox(value="", visible=False, container=False)
 
-    with gr.Accordion("Testing guardrails and privacy details", open=False):
-        gr.Markdown(
-            f"""
-            - **Knowledge base**: 15 preloaded Phase 2 project PDFs
-            - **Citation format**: page and extracted-text line range
-            - **Queueing**: concurrency limit {QUEUE_CONCURRENCY}, queue size {QUEUE_MAX_SIZE}
-            - **Logged for evaluation**: corpus question, answer, citation, latency, and proxy metrics
-            """
-        )
+    gr.HTML(
+        f"""
+        <div id="demo_footer">
+            <div class="footer-card">
+                <strong>Demo note:</strong> Responses are generated only from the preloaded project corpus and include page/line citations for review. 
+                The app is optimized for validation, governance, migration, configuration, and traceability questions across the Phase 2 document set.
+            </div>
+        </div>
+        """
+    )
 
     ask_btn.click(
         ask_question,