Update my_pages/home.py

my_pages/home.py

@@ -1,89 +1,63 @@
 import streamlit as st
+from streamlit_extras.stylable_container import stylable_container
 from utils import go_to
-import streamlit.components.v1 as components
 
 def render():
-    # Initialize session state for clicked page
-    if "clicked_page" not in st.session_state:
-        st.session_state.clicked_page = None
-
-    
-    # CSS for paragraph styling
     st.markdown(
         """
         <style>
-        .clickable-text {
-            text-align: justify;
-            font-size: 20px;
-            font-weight: bold;
-            color: green;
+        button[kind="primary"] {
+            background: none!important;
+            border: none;
+            padding: 0!important;
+            margin: 0!important;
+            text-decoration: none;
+            text-align: justify!important;
             cursor: pointer;
-            margin-right: 10px;
+            border: none !important;
+            display: inline!important;
+            font-size: 50px;
+            font-weight: bold;
         }
-        .clickable-text:hover {
-            color: #3366cc;
+        button[kind="primary"]:hover {
             text-decoration: underline;
+            color: #3366cc !important;
+        }
+        button[kind="primary"]:focus {
+            outline: none !important;
+            box-shadow: none !important;
+            color: #3366cc !important;
+        }
+        button[kind="primary"] span {
+            font-size: 50px !important;
+            font-weight: bold !important;
         }
         </style>
         """,
-        unsafe_allow_html=True
+        unsafe_allow_html=True,
     )
 
-    # Paragraph with clickable spans
-    html_code = """
-    <p>
-        <span class='clickable-text' onclick="window.parent.postMessage({isStreamlitMessage: true, type: 'customEvent', page: 'information_loss'}, '*')">
-            Translating real world into concrete data to train AI models leads to inherent loss in information.
-        </span>
-        <span class='clickable-text' onclick="window.parent.postMessage({isStreamlitMessage: true, type: 'customEvent', page: 'rashomon_effect'}, '*')">
-            This loss in information leaves room for multiple interpretations of the data, known as the Rashomon effect.
-            This can lead to conflicting predictions across various interpretations for individuals, known as Multiplicity.
-        </span>
-        <span class='clickable-text' onclick="window.parent.postMessage({isStreamlitMessage: true, type: 'customEvent', page: 'developer_decisions'}, '*')">
-            Model developers play an important role steering the model across multiple interpretations, leading to a particular choice.
-        </span>
-        <span class='clickable-text' onclick="window.parent.postMessage({isStreamlitMessage: true, type: 'customEvent', page: 'ica'}, '*')">
-            ICA Framework Sent4.
-        </span>
-        <span class='clickable-text' onclick="window.parent.postMessage({isStreamlitMessage: true, type: 'customEvent', page: 'multiverse'}, '*')">
-            Multiverse Sent5.
-        </span>
-    </p>
-    """
-    
-    # sentences = [
-    #     ("Translating real world into concrete data to train AI models leads to inherent loss in information.", "information_loss"),
-    #     ("This loss in information leaves room for multiple interpretations of the data, known as the Rashomon effect. \
-    #     This can lead to conflicting predictions across various interpretations for individuals, known as Multiplicity.", "rashomon_effect"),
-    #     ("Model developers play an important role steering the model across multiple interpretations, leading to a particular choice.", "developer_decisions"),
-    #     ("ICA Framework.", "ica"),
-    #     ("Multiverse", "multiverse"),
-    # ]
-    # color_dict = {"information_loss": "#FF6B6B", "rashomon_effect": "#FFD93D", "developer_decisions": "#6BCB77", "ica": "#FF9F1C", "multiverse": "#9D4EDD"}
-
-    components.html(html_code, height=100)
-
-    # Listen for JS messages
-    clicked = st.query_params.get("clicked_page", [None])[0]
-    if clicked:
-        st.session_state.clicked_page = clicked
-
-    # Trigger navigation
-    if st.session_state.clicked_page:
-        go_to(st.session_state.clicked_page)
-
-    
-    # button_clicked_dict = {k[1]: False for k in sentences}
-    # for text, page in sentences:
-    #     with stylable_container(
-    #         page,
-    #         css_styles=f"""
-    #         button {{
-    #             color: {color_dict[page]};            
-    #         }}""",
-    #     ):
-    #         button_clicked_dict[page] = st.button(text, type="primary")
-
-    # for page in button_clicked_dict:
-    #     if button_clicked_dict[page]:
-    #         go_to(page)
+    sentences = [
+        ("Translating real world into concrete data to train AI models leads to inherent loss in information.", "information_loss"),
+        ("This loss in information leaves room for multiple interpretations of the data, known as the Rashomon effect. \
+        This can lead to conflicting predictions across various interpretations for individuals, known as Multiplicity.", "rashomon_effect"),
+        ("Model developers play an important role steering the model across multiple interpretations, leading to a particular choice.", "developer_decisions"),
+        ("ICA Framework.", "ica"),
+        ("Multiverse", "multiverse"),
+    ]
+    color_dict = {"information_loss": "#FF6B6B", "rashomon_effect": "#FFD93D", "developer_decisions": "#6BCB77", "ica": "#FF9F1C", "multiverse": "#9D4EDD"}
+
+    button_clicked_dict = {k[1]: False for k in sentences}
+    for text, page in sentences:
+        with stylable_container(
+            page,
+            css_styles=f"""
+            button {{
+                color: {color_dict[page]};            
+            }}""",
+        ):
+            button_clicked_dict[page] = st.button(text, type="primary")
+
+    for page in button_clicked_dict:
+        if button_clicked_dict[page]:
+            go_to(page)