Update app.py

app.py

@@ -2,29 +2,88 @@ import streamlit as st
 
 st.set_page_config(layout="wide")
 
-st.title("AI Model Fairness Auditing")
+# --------------------------------------------------
+# Custom Styling
+# --------------------------------------------------
 
-# -------------------------
+st.markdown("""
+<style>
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
+
+html, body, [class*="css"]  {
+    font-family: 'Inter', sans-serif;
+}
+
+/* title */
+.title {
+    font-size:40px;
+    font-weight:600;
+    margin-bottom:25px;
+}
+
+/* card containers */
+.card-box {
+    padding:10px;
+    border-radius:12px;
+    margin-bottom:10px;
+}
+
+/* available actions */
+.available {
+    background:#f4f6fb;
+    border:1px solid #d8dbea;
+}
+
+/* selected actions */
+.selected {
+    background:#e8f7ee;
+    border:1px solid #8bd6a3;
+}
+
+/* card text */
+.card-text {
+    font-size:16px;
+    padding:8px;
+}
+
+.metric-card {
+    background:#f9fafc;
+    border-radius:12px;
+    padding:20px;
+    text-align:center;
+}
+
+</style>
+""", unsafe_allow_html=True)
+
+# --------------------------------------------------
+# Title
+# --------------------------------------------------
+
+st.markdown('<div class="title">AI Model Fairness Auditing</div>', unsafe_allow_html=True)
+
+# --------------------------------------------------
 # Strategy Definitions
-# -------------------------
+# --------------------------------------------------
 
 model_owner_actions = {
-    "Fine-tuning / overfitting on auditing test": {"cheating": 25, "cost": 0, "openness": -5},
-    "Fine-tuning on auditing-like data distribution": {"cheating": 20, "cost": 0, "openness": -3},
-    "Training a special audit-behavior mode": {"cheating": 30, "cost": 5, "openness": -10},
-    "Withholding training details": {"cheating": 15, "cost": 0, "openness": -15}
+    "Fine-tuning / overfitting on auditing test": {"cheating": 25, "cost": 0, "open": -5},
+    "Fine-tuning on auditing-like distribution": {"cheating": 20, "cost": 0, "open": -3},
+    "Training special audit behaviour": {"cheating": 30, "cost": 5, "open": -10},
+    "Withholding training details": {"cheating": 15, "cost": 0, "open": -15},
 }
 
 auditor_actions = {
-    "Audit on one dataset": {"cheating": 20, "cost": 10, "openness": 5},
-    "Audit on multiple datasets": {"cheating": -15, "cost": 25, "openness": 10},
-    "Request internal model access": {"cheating": -25, "cost": 30, "openness": 30},
-    "Request training data documentation": {"cheating": -10, "cost": 5, "openness": 20}
+    "Audit on one dataset": {"cheating": 20, "cost": 10, "open": 5},
+    "Audit on multiple datasets": {"cheating": -15, "cost": 25, "open": 10},
+    "Request internal model access": {"cheating": -25, "cost": 30, "open": 30},
+    "Request training documentation": {"cheating": -10, "cost": 5, "open": 20},
 }
 
-# -------------------------
+# --------------------------------------------------
 # Session State
-# -------------------------
+# --------------------------------------------------
 
 if "owner_selected" not in st.session_state:
     st.session_state.owner_selected = []
@@ -32,133 +91,138 @@ if "owner_selected" not in st.session_state:
 if "auditor_selected" not in st.session_state:
     st.session_state.auditor_selected = []
 
-# -------------------------
-# Toggle functions
-# -------------------------
+# --------------------------------------------------
+# Toggle Functions
+# --------------------------------------------------
 
-def toggle_owner(action):
-    if action in st.session_state.owner_selected:
-        st.session_state.owner_selected.remove(action)
+def toggle_owner(a):
+    if a in st.session_state.owner_selected:
+        st.session_state.owner_selected.remove(a)
     else:
-        st.session_state.owner_selected.append(action)
+        st.session_state.owner_selected.append(a)
 
-def toggle_auditor(action):
-    if action in st.session_state.auditor_selected:
-        st.session_state.auditor_selected.remove(action)
+def toggle_auditor(a):
+    if a in st.session_state.auditor_selected:
+        st.session_state.auditor_selected.remove(a)
     else:
-        st.session_state.auditor_selected.append(action)
+        st.session_state.auditor_selected.append(a)
 
-# -------------------------
+# --------------------------------------------------
 # Layout
-# -------------------------
+# --------------------------------------------------
 
 left, right = st.columns(2)
 
-# -------------------------
-# Model Owner Panel
-# -------------------------
+# --------------------------------------------------
+# MODEL OWNER
+# --------------------------------------------------
 
 with left:
-    st.header("Model Owner")
-
-    st.subheader("Selected Actions")
 
-    selected_box = st.container(border=True)
-
-    with selected_box:
-        for action in st.session_state.owner_selected:
+    st.markdown("### Model Owner")
+
+    st.markdown("**Chosen**")
+
+    for action in st.session_state.owner_selected:
+        st.markdown(
+            f'<div class="card-box selected"><div class="card-text">{action}</div></div>',
+            unsafe_allow_html=True,
+        )
+        st.button(
+            "toggle",
+            key=f"owner_sel_{action}",
+            on_click=toggle_owner,
+            args=(action,),
+        )
+
+    st.markdown("**Available**")
+
+    for action in model_owner_actions:
+        if action not in st.session_state.owner_selected:
+            st.markdown(
+                f'<div class="card-box available"><div class="card-text">{action}</div></div>',
+                unsafe_allow_html=True,
+            )
             st.button(
-                action,
-                key=f"owner_selected_{action}",
+                "choose",
+                key=f"owner_av_{action}",
                 on_click=toggle_owner,
                 args=(action,),
-                use_container_width=True
             )
 
-    st.subheader("Available Actions")
-
-    available_box = st.container(border=True)
-
-    with available_box:
-        for action in model_owner_actions:
-            if action not in st.session_state.owner_selected:
-                st.button(
-                    action,
-                    key=f"owner_available_{action}",
-                    on_click=toggle_owner,
-                    args=(action,),
-                    use_container_width=True
-                )
-
-# -------------------------
-# Auditor Panel
-# -------------------------
+# --------------------------------------------------
+# AUDITOR
+# --------------------------------------------------
 
 with right:
-    st.header("Auditor")
-
-    st.subheader("Selected Actions")
 
-    selected_box = st.container(border=True)
-
-    with selected_box:
-        for action in st.session_state.auditor_selected:
+    st.markdown("### Auditor")
+
+    st.markdown("**Chosen**")
+
+    for action in st.session_state.auditor_selected:
+        st.markdown(
+            f'<div class="card-box selected"><div class="card-text">{action}</div></div>',
+            unsafe_allow_html=True,
+        )
+        st.button(
+            "toggle",
+            key=f"aud_sel_{action}",
+            on_click=toggle_auditor,
+            args=(action,),
+        )
+
+    st.markdown("**Available**")
+
+    for action in auditor_actions:
+        if action not in st.session_state.auditor_selected:
+            st.markdown(
+                f'<div class="card-box available"><div class="card-text">{action}</div></div>',
+                unsafe_allow_html=True,
+            )
             st.button(
-                action,
-                key=f"auditor_selected_{action}",
+                "choose",
+                key=f"aud_av_{action}",
                 on_click=toggle_auditor,
                 args=(action,),
-                use_container_width=True
             )
 
-    st.subheader("Available Actions")
-
-    available_box = st.container(border=True)
-
-    with available_box:
-        for action in auditor_actions:
-            if action not in st.session_state.auditor_selected:
-                st.button(
-                    action,
-                    key=f"auditor_available_{action}",
-                    on_click=toggle_auditor,
-                    args=(action,),
-                    use_container_width=True
-                )
-
-# -------------------------
+# --------------------------------------------------
 # Score Calculation
-# -------------------------
+# --------------------------------------------------
 
-cheating_score = 50
-audit_cost = 0
-openness_required = 0
+cheating = 50
+cost = 0
+open_req = 0
 
-for action in st.session_state.owner_selected:
-    cheating_score += model_owner_actions[action]["cheating"]
-    audit_cost += model_owner_actions[action]["cost"]
-    openness_required += model_owner_actions[action]["openness"]
+for a in st.session_state.owner_selected:
+    cheating += model_owner_actions[a]["cheating"]
+    cost += model_owner_actions[a]["cost"]
+    open_req += model_owner_actions[a]["open"]
 
-for action in st.session_state.auditor_selected:
-    cheating_score += auditor_actions[action]["cheating"]
-    audit_cost += auditor_actions[action]["cost"]
-    openness_required += auditor_actions[action]["openness"]
+for a in st.session_state.auditor_selected:
+    cheating += auditor_actions[a]["cheating"]
+    cost += auditor_actions[a]["cost"]
+    open_req += auditor_actions[a]["open"]
 
-cheating_score = max(0, min(100, cheating_score))
-openness_required = max(0, openness_required)
+cheating = max(0, min(100, cheating))
+open_req = max(0, open_req)
 
-# -------------------------
+# --------------------------------------------------
 # Dashboard
-# -------------------------
+# --------------------------------------------------
 
 st.divider()
 
-st.subheader("Audit Outcome Dashboard")
+c1, c2, c3 = st.columns(3)
+
+with c1:
+    st.metric("Cheating Chance", f"{cheating}%")
 
-col1, col2, col3 = st.columns(3)
+with c2:
+    st.metric("Audit Cost", cost)
 
-col1.metric("Chance of Cheating", f"{cheating_score}%")
-col2.metric("Audit Cost", audit_cost)
-col3.metric("Openness Required", openness_required)
+with c3:
+    st.metric("Openness Required", open_req)
 
-st.progress(cheating_score / 100)
+st.progress(cheating / 100)