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 and URLs
+# Image paths
 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,12 +21,35 @@ images = [
 ]
 
 # Function to create clickable images with hover effect
-def clickable_image_with_name(image_name, image_path, link):
+def clickable_image(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'''
-    <div style="text-align:center;">
-        <a href="{link}" target="_blank">
-            <img src="data:image/png;base64,{img_base64}" alt
+    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