Update my_pages/pre_information_loss.py

my_pages/pre_information_loss.py

@@ -1,56 +1,16 @@
 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
-#     )
+from utils import add_bottom_navigation, add_fadein_text
 
 def render():
     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'. "
+        ("Welcome to the Multiplicity Interactive Demo.", 2),
+        ("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.", 2),
+        ("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."
+        "and returning as you wish, or follow the guided tutorial which will go through all pieces in order.", 2)
     ]
 
-    # 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_fadein_text(paragraphs)
     
     add_bottom_navigation("landing", "information_loss")