Update pages/03_Talk_to_the_Greats.py

pages/03_Talk_to_the_Greats.py

@@ -10,7 +10,7 @@ def image_to_base64(image_path):
 # Page Title
 st.title("Talk with the Great Physicist")
 
-# Image paths
+# Image paths and URLs
 images = [
     ("Einstein", "images/image01.png", "https://chatgpt.com/g/g-ocQnGKXGx-einstein-learn-relativity"),
     ("Dirac", "images/image02.png", "https://chatgpt.com/g/g-JjKhIfBft-dirac-learn-quantum-mechanics"),
@@ -21,35 +21,12 @@ images = [
 ]
 
 # Function to create clickable images with hover effect
-def clickable_image(image_name, image_path, link):
+def clickable_image_with_name(image_name, image_path, link):
     # Convert image to base64 for embedding
     img_base64 = image_to_base64(image_path)
     
     # HTML with hover effect and link
     html_code = f'''
-    <a href="{link}" target="_blank">
-        <img src="data:image/png;base64,{img_base64}" alt="{image_name}" 
-        style="border: 2px solid transparent; border-radius: 10px; width: 100%;"
-        onmouseover="this.style.borderColor='#007BFF';" 
-        onmouseout="this.style.borderColor='transparent';">
-    </a>
-    '''
-    st.markdown(html_code, unsafe_allow_html=True)
-
-# Create three columns for the images
-col1, col2, col3 = st.columns(3)
-
-# First column (Einstein and Maxwell)
-with col1:
-    clickable_image(*images[0])  # Einstein
-    clickable_image(*images[3])  # Maxwell
-
-# Second column (Dirac and Newton)
-with col2:
-    clickable_image(*images[1])  # Dirac
-    clickable_image(*images[4])  # Newton
-
-# Third column (Feynman and Chat with All)
-with col3:
-    clickable_image(*images[2])  # Feynman
-    clickable_image(*images[5])  # Chat with All
+    <div style="text-align:center;">
+        <a href="{link}" target="_blank">
+            <img src="data:image/png;base64,{img_base64}" alt