Update my_pages/pre_information_loss.py

my_pages/pre_information_loss.py

@@ -1,19 +1,56 @@
 import streamlit as st
+import time
 from utils import add_bottom_navigation
 
+# def render():
+#     st.markdown(
+#         """
+#         <div style='text-align: left; font-size:24px; color:#A6C8FF;'>
+#         Welcome to the Multiplicity Interactive Demo.<br><br>
+#         In this demo, you will explore how developer choices create a multiverse of possible models,
+#         and how these choices connect to concerns of arbitrariness and homogenization in AI.<br><br>
+#         The takeaway for the demo will be presented when you click 'Get Started'.
+#         You may then navigate the demo by interacting with various concepts in the takeaway paragraph and returning as you wish,
+#         or follow the guided tutorial which will go through all pieces in order.<br><br>
+#         </div>
+#         """,
+#         unsafe_allow_html=True
+#     )
+
 def render():
-    st.markdown(
-        """
-        <div style='text-align: left; font-size:24px; color:#A6C8FF;'>
-        Welcome to the Multiplicity Interactive Demo.<br><br>
-        In this demo, you will explore how developer choices create a multiverse of possible models,
-        and how these choices connect to concerns of arbitrariness and homogenization in AI.<br><br>
-        The takeaway for the demo will be presented when you click 'Get Started'.
-        You may then navigate the demo by interacting with various concepts in the takeaway paragraph and returning as you wish,
-        or follow the guided tutorial which will go through all pieces in order.<br><br>
-        </div>
-        """,
-        unsafe_allow_html=True
-    )
+    paragraphs = [
+        "Welcome to the Multiplicity Interactive Demo.",
+        "In this demo, you will explore how developer choices create a multiverse of possible models, "
+        "and how these choices connect to concerns of arbitrariness and homogenization in AI.",
+        "The takeaway for the demo will be presented when you click 'Get Started'. "
+        "You may then navigate the demo by interacting with various concepts in the takeaway paragraph "
+        "and returning as you wish, or follow the guided tutorial which will go through all pieces in order."
+    ]
+
+    # Define CSS fade-in animation
+    st.markdown("""
+        <style>
+        @keyframes fadeIn {
+            from {opacity: 0;}
+            to {opacity: 1;}
+        }
+        .fade-in {
+            animation: fadeIn 1.5s ease-in forwards;
+            opacity: 0;
+            margin-bottom: 1em;
+            font-size: 24px;
+            color: #A6C8FF;
+            text-align: left;
+        }
+        </style>
+    """, unsafe_allow_html=True)
+
+    # Create one placeholder for each paragraph
+    placeholders = [st.empty() for _ in paragraphs]
 
+    # Reveal paragraphs sequentially
+    for i, p in enumerate(paragraphs):
+        placeholders[i].markdown(f"<div class='fade-in'>{p}</div>", unsafe_allow_html=True)
+        time.sleep(2)  # delay (seconds) before showing next one
+    
     add_bottom_navigation("landing", "information_loss")