app.py

import streamlit as st

############# Style Setup ##############
st.markdown(
    """
    <style>
    .center-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    </style>
    """,
    unsafe_allow_html=True
)
########################################


# --- Configure the app ---
st.set_page_config(page_title="Multiplicity Demo", layout="centered")

# --- Initialize session state ---
if "page" not in st.session_state:
    st.session_state.page = "landing"  # can be: landing, main, sentence_X

# --- 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;'>
        Welcome to the Multiplicity Interactive Demo.<br><br>
        In this demo, you will explore how developer decisions create a multiverse of possible models,
        and how these connect to concepts like arbitrariness, homogenization, and the ICA framework.<br><br>
        Follow the steps to see your decisions in context.
        </div>
        """,
        unsafe_allow_html=True
    )
    st.markdown("<br>", unsafe_allow_html=True)
    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 class='center-container'>", unsafe_allow_html=True)

    st.markdown(
        "<div style='font-size:24px; color:#3366cc; font-weight:bold;'>Explore the concepts:</div>",
        unsafe_allow_html=True
    )
    st.write("")

    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}")

    st.markdown("</div>", unsafe_allow_html=True)

# -----------------------------
# Empty Sentence Pages
# -----------------------------
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
    )

    st.write("This page is currently empty. You can add the content for this concept here.")

    if st.button("Back to Main Page"):
        go_to("main")

    st.markdown("</div>", unsafe_allow_html=True)