Update app.py

app.py

@@ -3,7 +3,7 @@ import streamlit as st
 st.set_page_config(layout="wide")
 
 # --------------------------------------------------
-# Custom Styling
+# Styling
 # --------------------------------------------------
 
 st.markdown("""
@@ -11,47 +11,36 @@ st.markdown("""
 
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
 
-html, body, [class*="css"]  {
+html, body, [class*="css"] {
     font-family: 'Inter', sans-serif;
 }
 
-/* title */
+/* title styling */
 .title {
-    font-size:40px;
+    font-size:42px;
     font-weight:600;
-    margin-bottom:25px;
+    margin-bottom:20px;
 }
 
-/* card containers */
-.card-box {
+/* boxes */
+.available-box {
+    background:#f6f7fb;
     padding:10px;
-    border-radius:12px;
-    margin-bottom:10px;
+    border-radius:10px;
+    border:1px solid #e1e4ef;
 }
 
-/* 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;
+.selected-box {
+    background:#e9f7ef;
+    padding:10px;
+    border-radius:10px;
+    border:1px solid #a7e0b8;
 }
 
-.metric-card {
-    background:#f9fafc;
-    border-radius:12px;
-    padding:20px;
-    text-align:center;
+.small-label {
+    font-size:14px;
+    color:#666;
+    margin-bottom:4px;
 }
 
 </style>
@@ -95,17 +84,17 @@ if "auditor_selected" not in st.session_state:
 # Toggle Functions
 # --------------------------------------------------
 
-def toggle_owner(a):
-    if a in st.session_state.owner_selected:
-        st.session_state.owner_selected.remove(a)
+def toggle_owner(action):
+    if action in st.session_state.owner_selected:
+        st.session_state.owner_selected.remove(action)
     else:
-        st.session_state.owner_selected.append(a)
+        st.session_state.owner_selected.append(action)
 
-def toggle_auditor(a):
-    if a in st.session_state.auditor_selected:
-        st.session_state.auditor_selected.remove(a)
+def toggle_auditor(action):
+    if action in st.session_state.auditor_selected:
+        st.session_state.auditor_selected.remove(action)
     else:
-        st.session_state.auditor_selected.append(a)
+        st.session_state.auditor_selected.append(action)
 
 # --------------------------------------------------
 # Layout
@@ -114,79 +103,91 @@ def toggle_auditor(a):
 left, right = st.columns(2)
 
 # --------------------------------------------------
-# MODEL OWNER
+# MODEL OWNER SIDE
 # --------------------------------------------------
 
 with left:
 
     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.markdown('<div class="small-label">Chosen</div>', unsafe_allow_html=True)
+
+    selected_box = st.container(border=False)
+    with selected_box:
+        st.markdown('<div class="selected-box">', unsafe_allow_html=True)
+
+        for action in st.session_state.owner_selected:
             st.button(
-                "choose",
-                key=f"owner_av_{action}",
+                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)
+
+        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
+                )
+
+        st.markdown('</div>', unsafe_allow_html=True)
+
 # --------------------------------------------------
-# AUDITOR
+# AUDITOR SIDE
 # --------------------------------------------------
 
 with right:
 
     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.markdown('<div class="small-label">Chosen</div>', unsafe_allow_html=True)
+
+    selected_box = st.container(border=False)
+    with selected_box:
+        st.markdown('<div class="selected-box">', unsafe_allow_html=True)
+
+        for action in st.session_state.auditor_selected:
             st.button(
-                "choose",
-                key=f"aud_av_{action}",
+                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)
+
+        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
+                )
+
+        st.markdown('</div>', unsafe_allow_html=True)
+
 # --------------------------------------------------
 # Score Calculation
 # --------------------------------------------------
@@ -195,15 +196,15 @@ cheating = 50
 cost = 0
 open_req = 0
 
-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.owner_selected:
+    cheating += model_owner_actions[action]["cheating"]
+    cost += model_owner_actions[action]["cost"]
+    open_req += model_owner_actions[action]["open"]
 
-for a in st.session_state.auditor_selected:
-    cheating += auditor_actions[a]["cheating"]
-    cost += auditor_actions[a]["cost"]
-    open_req += auditor_actions[a]["open"]
+for action in st.session_state.auditor_selected:
+    cheating += auditor_actions[action]["cheating"]
+    cost += auditor_actions[action]["cost"]
+    open_req += auditor_actions[action]["open"]
 
 cheating = max(0, min(100, cheating))
 open_req = max(0, open_req)
@@ -216,13 +217,8 @@ st.divider()
 
 c1, c2, c3 = st.columns(3)
 
-with c1:
-    st.metric("Cheating Chance", f"{cheating}%")
-
-with c2:
-    st.metric("Audit Cost", cost)
-
-with c3:
-    st.metric("Openness Required", open_req)
+c1.metric("Cheating Chance", f"{cheating}%")
+c2.metric("Audit Cost", cost)
+c3.metric("Openness Required", open_req)
 
 st.progress(cheating / 100)