Update my_pages/ica.py

my_pages/ica.py

@@ -1,7 +1,7 @@
 import streamlit as st
 import matplotlib.pyplot as plt
 import numpy as np
-from utils import add_navigation, add_instruction_text
+from utils import add_navigation, add_instruction_text, add_red_text
 
 plt.style.use('dark_background')
 
@@ -10,7 +10,8 @@ def render():
 
     add_instruction_text(
         """
-        Explore the intention-convention-arbitrariness (ICA) framework by uncovering various examples.
+        Explore the intention-convention-arbitrariness (ICA) framework.<br>
+        Use different sliders to uncover examples in the ICA triangle.
         """
     )
 
@@ -25,7 +26,8 @@ def render():
     control_choice = st.radio(
         "Select dimension to adjust",
         ["Intentional", "Conventional", "Arbitrary"],
-        horizontal=True
+        horizontal=True,
+        label_visibility="collapsed"
     )
 
     # Current values
@@ -33,7 +35,7 @@ def render():
     current_value = w[control_choice]
 
     # Slider for selected one
-    new_value = st.slider(control_choice, 0.0, 1.0, current_value, 0.01)
+    new_value = st.slider(control_choice, 0.0, 1.0, current_value, 0.01, label_visibility="collapsed")
 
     # Adjust others proportionally
     diff = new_value - current_value
@@ -98,7 +100,11 @@ def render():
 
     torch_radius = 0.177  # how far the "torch" illuminates
 
-    text_to_show = "Explanations<br>"
+    col1, col2, col3 = st.columns([0.5, 1, 0.5])
+    with col2:
+        st.pyplot(fig)
+    
+    text_to_show = ""
     # Illuminate nearby points
     for (x, y, label, labeltext, ha, va) in locations:
         dist = np.linalg.norm([x - point[0], y - point[1]])
@@ -108,11 +114,6 @@ def render():
             text_to_show += label + ": " + labeltext + "<br>"
         else:
             ax.scatter(x, y, c="red", s=50, zorder=6, alpha=0.3)
-    
-    st.pyplot(fig)
 
     if len(text_to_show) > 0:
-        st.markdown(
-            f"<div style='text-align:center; color:#c0392b; font-size:20px; font-weight:bold; margin:14px 0;'>{text_to_show}</div>",
-            unsafe_allow_html=True,
-        )
+        add_red_text(text_to_show)