Update app.py

app.py

@@ -1,5 +1,27 @@
 import streamlit as st
 
+############# Style Setup ##############
+st.markdown(
+    """
+    <style>
+    .center-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+    .clickable-sentence {
+        color: #3366cc;
+        cursor: pointer;
+        text-decoration: underline;
+    }
+    </style>
+    """,
+    unsafe_allow_html=True
+)
+########################################
+
+
 # --- Configure the app ---
 st.set_page_config(page_title="Multiplicity Demo", layout="centered")
 
@@ -10,12 +32,13 @@ if "page" not in st.session_state:
 # --- Helper function to change page ---
 def go_to(page_name):
     st.session_state.page = page_name
-
+    st.rerun()
 
 # -----------------------------
 # Landing Page
 # -----------------------------
 if st.session_state.page == "landing":
+    st.markdown("<div class='center-container'>", unsafe_allow_html=True)
     st.markdown(
         """
         <div style='text-align: center; font-size:14px; color:gray;'>
@@ -31,28 +54,26 @@ if st.session_state.page == "landing":
     if st.button("Get Started"):
         go_to("main")
 
+    st.markdown("</div>", unsafe_allow_html=True)
+
 
 # -----------------------------
 # Main Page (Clickable Sentences)
 # -----------------------------
 elif st.session_state.page == "main":
-    st.markdown(
-        "<div style='font-size:24px; color:#3366cc; font-weight:bold;'>Explore the concepts:</div>",
-        unsafe_allow_html=True
-    )
-    st.write("")  # spacing
+    st.markdown("<div class='center-container'>", unsafe_allow_html=True)
 
-    sentences = [
-        "Multiplicity: Many models, same accuracy, different predictions.",
-        "ICA Framework: Intentional, Conventional, and Arbitrary decisions.",
-        "Arbitrariness: Why different models might treat individuals differently.",
-        "Homogenization: Why similar decisions happen across many developers."
-    ]
-
-    for i, sentence in enumerate(sentences):
-        if st.button(sentence, key=f"sentence_{i}"):
-            go_to(f"sentence_{i}")
+    paragraph_html = """
+    <p style='font-size:20px; line-height:1.6; max-width:800px;'>
+        <a class='clickable-sentence' href='?page=sentence_0'>Multiplicity: Many models, same accuracy, different predictions.</a>
+        <a class='clickable-sentence' href='?page=sentence_1'>ICA Framework: Intentional, Conventional, and Arbitrary decisions.</a>
+        <a class='clickable-sentence' href='?page=sentence_2'>Arbitrariness: Why different models might treat individuals differently.</a>
+        <a class='clickable-sentence' href='?page=sentence_3'>Homogenization: Why similar decisions happen across many developers.</a>
+    </p>
+    """
+    st.markdown(paragraph_html, unsafe_allow_html=True)
 
+    st.markdown("</div>", unsafe_allow_html=True)
 
 # -----------------------------
 # Empty Sentence Pages
@@ -61,6 +82,7 @@ else:
     # Extract sentence index
     sentence_index = int(st.session_state.page.split("_")[1])
 
+    st.markdown("<div class='center-container'>", unsafe_allow_html=True)
     st.markdown(
         f"<div style='font-size:20px; color:#cc3333; font-weight:bold;'>Page for Sentence {sentence_index + 1}</div>",
         unsafe_allow_html=True
@@ -70,3 +92,5 @@ else:
 
     if st.button("Back to Main Page"):
         go_to("main")
+
+    st.markdown("</div>", unsafe_allow_html=True)