Update my_pages/home.py

my_pages/home.py

@@ -1,63 +1,89 @@
 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>
-        button[kind="primary"] {
-            background: none!important;
-            border: none;
-            padding: 0!important;
-            margin: 0!important;
-            text-decoration: none;
-            text-align: justify!important;
-            cursor: pointer;
-            border: none !important;
-            display: inline!important;
-            font-size: 50px;
+        .clickable-text {
+            text-align: justify;
+            font-size: 20px;
             font-weight: bold;
+            color: green;
+            cursor: pointer;
+            margin-right: 10px;
         }
-        button[kind="primary"]:hover {
+        .clickable-text:hover {
+            color: #3366cc;
             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
     )
 
-    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)
+    # 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.experimental_get_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)