Update app.py

app.py

@@ -2,55 +2,7 @@ import streamlit as st
 
 st.set_page_config(layout="wide")
 
-# --------------------------------------------------
-# 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 styling */
-.title {
-    font-size:42px;
-    font-weight:600;
-    margin-bottom:20px;
-}
-
-/* boxes */
-.available-box {
-    background:#f6f7fb;
-    padding:10px;
-    border-radius:10px;
-    border:1px solid #e1e4ef;
-}
-
-.selected-box {
-    background:#e9f7ef;
-    padding:10px;
-    border-radius:10px;
-    border:1px solid #a7e0b8;
-}
-
-.small-label {
-    font-size:14px;
-    color:#666;
-    margin-bottom:4px;
-}
-
-</style>
-""", unsafe_allow_html=True)
-
-# --------------------------------------------------
-# Title
-# --------------------------------------------------
-
-st.markdown('<div class="title">AI Model Fairness Auditing</div>', unsafe_allow_html=True)
+st.title("AI Model Fairness Auditing")
 
 # --------------------------------------------------
 # Strategy Definitions
@@ -103,36 +55,31 @@ def toggle_auditor(action):
 left, right = st.columns(2)
 
 # --------------------------------------------------
-# MODEL OWNER SIDE
+# Model Owner
 # --------------------------------------------------
 
 with left:
 
-    st.markdown("### Model Owner")
+    st.subheader("Model Owner")
 
-    st.markdown('<div class="small-label">Chosen</div>', unsafe_allow_html=True)
+    st.caption("Chosen")
 
-    selected_box = st.container(border=False)
-    with selected_box:
-        st.markdown('<div class="selected-box">', unsafe_allow_html=True)
+    with st.container(border=True):
+        if not st.session_state.owner_selected:
+            st.write("None")
 
         for action in st.session_state.owner_selected:
             st.button(
-                action,
+                f"✓ {action}",
                 key=f"owner_selected_{action}",
                 on_click=toggle_owner,
                 args=(action,),
                 use_container_width=True
             )
 
-        st.markdown('</div>', unsafe_allow_html=True)
-
-    st.markdown('<div class="small-label">Available</div>', unsafe_allow_html=True)
-
-    available_box = st.container(border=False)
-    with available_box:
-        st.markdown('<div class="available-box">', unsafe_allow_html=True)
+    st.caption("Available")
 
+    with st.container(border=True):
         for action in model_owner_actions:
             if action not in st.session_state.owner_selected:
                 st.button(
@@ -143,39 +90,32 @@ with left:
                     use_container_width=True
                 )
 
-        st.markdown('</div>', unsafe_allow_html=True)
-
 # --------------------------------------------------
-# AUDITOR SIDE
+# Auditor
 # --------------------------------------------------
 
 with right:
 
-    st.markdown("### Auditor")
+    st.subheader("Auditor")
 
-    st.markdown('<div class="small-label">Chosen</div>', unsafe_allow_html=True)
+    st.caption("Chosen")
 
-    selected_box = st.container(border=False)
-    with selected_box:
-        st.markdown('<div class="selected-box">', unsafe_allow_html=True)
+    with st.container(border=True):
+        if not st.session_state.auditor_selected:
+            st.write("None")
 
         for action in st.session_state.auditor_selected:
             st.button(
-                action,
+                f"✓ {action}",
                 key=f"auditor_selected_{action}",
                 on_click=toggle_auditor,
                 args=(action,),
                 use_container_width=True
             )
 
-        st.markdown('</div>', unsafe_allow_html=True)
-
-    st.markdown('<div class="small-label">Available</div>', unsafe_allow_html=True)
-
-    available_box = st.container(border=False)
-    with available_box:
-        st.markdown('<div class="available-box">', unsafe_allow_html=True)
+    st.caption("Available")
 
+    with st.container(border=True):
         for action in auditor_actions:
             if action not in st.session_state.auditor_selected:
                 st.button(
@@ -186,8 +126,6 @@ with right:
                     use_container_width=True
                 )
 
-        st.markdown('</div>', unsafe_allow_html=True)
-
 # --------------------------------------------------
 # Score Calculation
 # --------------------------------------------------
@@ -217,7 +155,7 @@ st.divider()
 
 c1, c2, c3 = st.columns(3)
 
-c1.metric("Cheating Chance", f"{cheating}%")
+c1.metric("Chance of Cheating", f"{cheating}%")
 c2.metric("Audit Cost", cost)
 c3.metric("Openness Required", open_req)