Update app.py

app.py

@@ -18,14 +18,36 @@ GEMMA_MODEL = "google/gemma-3-4b-it:free"
 st.set_page_config(page_title="EZOFIS Document Validation Agent", layout="wide")
 st.markdown("""
     <style>
-    .step-num {background: #A020F0; color: #fff; border-radius: 999px;
-        padding: 6px 13px; font-weight: 700; margin-right: 14px; font-size: 20px;
+    .step-num {
+        background: #A020F0; color: #fff; border-radius: 999px;
+        padding: 6px 16px; font-weight: 700; margin-right: 14px; font-size: 18px;
         display: inline-block; vertical-align: middle;}
     .stButton>button {
         background: #A020F0 !important; color: white !important; border-radius: 12px !important;
         padding: 10px 32px !important; font-weight: 700; border: none !important; font-size: 18px !important;
         margin-top: 12px !important;
     }
+    /* Style result table headers */
+    .styled-table th {
+        background: #f3ecff !important;
+        color: #42318d !important;
+        font-weight: bold !important;
+        font-size: 16px !important;
+        padding: 10px 6px !important;
+        border-bottom: 2px solid #A020F0 !important;
+    }
+    .styled-table td {
+        font-size: 15px !important;
+        padding: 8px 4px !important;
+        word-break: break-word;
+        max-width: 220px;
+    }
+    .accepted-row {
+        background: #e7ffe7 !important;
+    }
+    .rejected-row {
+        background: #fff1f0 !important;
+    }
     </style>
 """, unsafe_allow_html=True)
 
@@ -33,16 +55,51 @@ st.markdown(
     "<h1 style='font-weight:800; margin-bottom:8px;'>EZOFIS Document Validation Agent</h1>",
     unsafe_allow_html=True
 )
-st.markdown(
-    "<div style='font-size:20px; margin-bottom:28px; color:#24345C;'>AI-driven, agentic document acceptance for mortgage and finance workflows.</div>",
-    unsafe_allow_html=True
-)
-
-# ========== UI ==========
 
-# --- Step 0: Agent Instructions ---
-st.markdown("<span class='step-num'>0</span> <b>Instruct Agent</b>", unsafe_allow_html=True)
-sample_instruction = """You are a careful, expert document validation agent for mortgage and finance workflows.
+# ====== SIDE-BY-SIDE LAYOUT ======
+col_left, col_right = st.columns([1.35, 1.05])
+
+with col_left:
+    # Step 1: Checklist
+    st.markdown("<span class='step-num'>1</span> <b>Paste Mortgage Checklist (JSON)</b>", unsafe_allow_html=True)
+    sample_checklist = '''{
+      "required_documents": [
+        {"type": "Driver's License", "description": "Government-issued photo ID"},
+        {"type": "Passport", "description": "Valid passport"},
+        {"type": "SIN Card", "description": "Social Insurance Number document"},
+        {"type": "Bank Statement", "description": "Last 3 months bank statement"},
+        {"type": "Employment Letter", "description": "Signed letter from employer"},
+        {"type": "Pay Stub", "description": "Most recent pay stub"},
+        {"type": "Proof of Address", "description": "Utility bill or lease"},
+        {"type": "Ontario Health Card", "description": "Provincial health insurance card"}
+      ]
+    }'''
+    checklist_text = st.text_area(
+        "Paste or edit your mortgage checklist JSON below:",
+        value=sample_checklist,
+        height=220,
+        key="doc_checklist_json"
+    )
+    try:
+        checklist = json.loads(checklist_text)
+        required_types = [doc["type"] for doc in checklist["required_documents"]]
+    except Exception as e:
+        st.error("Invalid checklist JSON.")
+        st.stop()
+
+    # Step 2: Document upload
+    st.markdown("<span class='step-num'>2</span> <b>Upload Document(s) to Validate</b>", unsafe_allow_html=True)
+    uploaded_files = st.file_uploader(
+        "Upload PDF, DOCX, XLSX, PNG, JPG, TIFF, etc.",
+        type=["pdf", "docx", "xlsx", "xls", "png", "jpg", "jpeg", "tiff"],
+        key="mortgage_files",
+        accept_multiple_files=True
+    )
+
+with col_right:
+    # Step 3: Agent instructions
+    st.markdown("<span class='step-num'>3</span> <b>Instruct Agent</b>", unsafe_allow_html=True)
+    sample_instruction = """You are a careful, expert document validation agent for mortgage and finance workflows.
 
 Before you answer, do this: Carefully scan the document for ANY evidence of regional/provincial or country-specific card types (such as "Ontario Health Card", "Medicare Card", "Insurance Card", "SIN", "Driver's License", "Passport", etc.)—be as specific as possible using visible card titles, authority names, or issuer logos.
 
@@ -50,63 +107,29 @@ Checklist for precision:
 - Prefer the **most specific** document type (e.g. "Ontario Health Card" over just "Identification Card" or "Provincial ID").
 - If there is any ambiguity, include relevant keywords from the card (like "Health", "Medicare", "OHIP", "SIN", "Social Insurance", "Driver", etc.) in the output type.
 - If still not sure, show your best guess but include all possible hints from the document text."""
-agent_instruction = st.text_area(
-    "Instructions for the Document Validation Agent (edit as needed):",
-    value=sample_instruction,
-    height=240,
-    key="agent_instruction"
-)
-
-# --- Step 0b: Current Date for Expiry ---
-st.markdown("<span class='step-num'>0b</span> <b>Set Current Date for Expiry Validation</b>", unsafe_allow_html=True)
-current_date = st.date_input(
-    "Current date to be used by the agent for expiry checking",
-    value=datetime.now().date(),
-    key="current_date"
-)
-date_str = str(current_date)
-
-# --- Step 1: Checklist JSON input ---
-sample_checklist = '''{
-  "required_documents": [
-    {"type": "Driver's License", "description": "Government-issued photo ID"},
-    {"type": "Passport", "description": "Valid passport"},
-    {"type": "SIN Card", "description": "Social Insurance Number document"},
-    {"type": "Bank Statement", "description": "Last 3 months bank statement"},
-    {"type": "Employment Letter", "description": "Signed letter from employer"},
-    {"type": "Pay Stub", "description": "Most recent pay stub"},
-    {"type": "Proof of Address", "description": "Utility bill or lease"},
-    {"type": "Ontario Health Card", "description": "Provincial health insurance card"}
-  ]
-}'''
-
-st.markdown("<span class='step-num'>1</span> <b>Paste Mortgage Checklist (JSON)</b>", unsafe_allow_html=True)
-checklist_text = st.text_area(
-    "Paste or edit your mortgage checklist JSON below:",
-    value=sample_checklist,
-    height=200,
-    key="doc_checklist_json"
-)
-try:
-    checklist = json.loads(checklist_text)
-    required_types = [doc["type"] for doc in checklist["required_documents"]]
-except Exception as e:
-    st.error("Invalid checklist JSON.")
-    st.stop()
-
-# --- Step 2: Document upload ---
-st.markdown("<span class='step-num'>2</span> <b>Upload Document(s) to Validate</b>", unsafe_allow_html=True)
-uploaded_files = st.file_uploader(
-    "Upload PDF, DOCX, XLSX, PNG, JPG, TIFF, etc.",
-    type=["pdf", "docx", "xlsx", "xls", "png", "jpg", "jpeg", "tiff"],
-    key="mortgage_files",
-    accept_multiple_files=True
-)
-
-# --- Step 3: Thresholds ---
-st.markdown("<span class='step-num'>3</span> <b>Configure Acceptance Thresholds</b>", unsafe_allow_html=True)
-min_match_score = st.slider("Minimum Type Match Score (0-100)", 50, 100, 70, 1)
-min_confidence = st.slider("Minimum LLM Confidence (0-100)", 50, 100, 70, 1)
+    agent_instruction = st.text_area(
+        "Instructions for the Document Validation Agent (edit as needed):",
+        value=sample_instruction,
+        height=240,
+        key="agent_instruction"
+    )
+
+    # Step 4: Current date
+    st.markdown("<span class='step-num'>4</span> <b>Set Current Date for Expiry Validation</b>", unsafe_allow_html=True)
+    current_date = st.date_input(
+        "Current date to be used by the agent for expiry checking",
+        value=datetime.now().date(),
+        key="current_date"
+    )
+    date_str = str(current_date)
+
+    # Step 5: Thresholds
+    st.markdown("<span class='step-num'>5</span> <b>Configure Acceptance Thresholds</b>", unsafe_allow_html=True)
+    min_match_score = st.slider("Minimum Type Match Score (0-100)", 50, 100, 70, 1)
+    min_confidence = st.slider("Minimum LLM Confidence (0-100)", 50, 100, 70, 1)
+
+    # Step 6: Run button
+    run_btn = st.button("Run Document Validation", type="primary")
 
 # ========== FUNCTIONS ==========
 
@@ -280,8 +303,19 @@ def fuzzy_match_type(detected_type, checklist_types):
             best_score = score
     return best_type, best_score
 
+def color_row(row):
+    if row["Accepted"] == "Yes":
+        return ['background-color: #e7ffe7'] * len(row)
+    elif row["Accepted"] == "No":
+        return ['background-color: #fff1f0'] * len(row)
+    else:
+        return [''] * len(row)
+
 # ========== PROCESSING ==========
-if st.button("Run Document Validation", type="primary") and uploaded_files:
+if 'run_btn' not in locals():
+    run_btn = False
+
+if run_btn and uploaded_files:
     results = []
     debug_data = []
 
@@ -375,9 +409,23 @@ if st.button("Run Document Validation", type="primary") and uploaded_files:
         debug_data.append({uploaded_file.name: debug})
         status_box.success("Validation complete. See result below.")
 
+    # ==== Results table with custom styling ====
     if results:
         st.success("All validations complete.")
-        st.dataframe(pd.DataFrame(results), use_container_width=True)
+        df = pd.DataFrame(results)
+        # Convert to HTML with classes for styling
+        def style_row(row):
+            color = "#e7ffe7" if row["Accepted"] == "Yes" else "#fff1f0"
+            return [f"background-color: {color}"]*len(row)
+        styled_df = df.style.apply(style_row, axis=1)\
+            .set_table_attributes('class="styled-table"')\
+            .set_properties(**{
+                'font-size': '15px',
+                'word-break': 'break-word',
+                'border': '1px solid #ddd'
+            })
+        st.markdown('<h4 style="margin-top:28px;">Validation Results</h4>', unsafe_allow_html=True)
+        st.write(styled_df.to_html(escape=False), unsafe_allow_html=True)
     else:
         st.warning("No valid results.")