Update pages/03_Talk_to_the_Greats.py

pages/03_Talk_to_the_Greats.py

@@ -1,55 +1,50 @@
 import streamlit as st
 from PIL import Image
-import base64
-
-# Helper function to encode image to base64
-def image_to_base64(image_path):
-    with open(image_path, "rb") as img_file:
-        return base64.b64encode(img_file.read()).decode()
 
 # Page Title
 st.title("Talk with the Great Physicist")
 
-# 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"),
-    ("Feynman", "images/image03.png", "https://chatgpt.com/g/g-stfxVmJcu-feynman-learn-physics"),
-    ("Maxwell", "images/image04.png", "https://chatgpt.com/g/g-cxxsVKyoj-maxwell-learn-electromagnetism"),
-    ("Newton", "images/image05.png", "https://chatgpt.com/g/g-yIo2Tvujk-newton-learn-classical-mechanics"),
-    ("Chat with All", "images/image06.png", "https://chatgpt.com/g/g-5jFCsQ6x4-dialog-with-the-great-physicists")
+# Load Images
+image1 = Image.open("images/image01.png")  # Einstein
+image2 = Image.open("images/image02.png")  # Dirac
+image3 = Image.open("images/image03.png")  # Feynman
+image4 = Image.open("images/image04.png")  # Maxwell
+image5 = Image.open("images/image05.png")  # Newton
+image6 = Image.open("images/image06.png")  # Chat with All
+
+# Define image links and names
+image_links = [
+    ("Einstein", "https://chatgpt.com/g/g-ocQnGKXGx-einstein-learn-relativity", image1),
+    ("Dirac", "https://chatgpt.com/g/g-JjKhIfBft-dirac-learn-quantum-mechanics", image2),
+    ("Feynman", "https://chatgpt.com/g/g-stfxVmJcu-feynman-learn-physics", image3),
+    ("Maxwell", "https://chatgpt.com/g/g-cxxsVKyoj-maxwell-learn-electromagnetism", image4),
+    ("Newton", "https://chatgpt.com/g/g-yIo2Tvujk-newton-learn-classical-mechanics", image5),
+    ("Chat with All", "https://chatgpt.com/g/g-5jFCsQ6x4-dialog-with-the-great-physicists", image6),
 ]
 
-# Function to create clickable images with hover effect
-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"""
-    <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
+    st.image(image1)
+    st.markdown(f"[Einstein](https://chatgpt.com/g/g-ocQnGKXGx-einstein-learn-relativity)")
+    
+    st.image(image4)
+    st.markdown(f"[Maxwell](https://chatgpt.com/g/g-cxxsVKyoj-maxwell-learn-electromagnetism)")
 
 # Second column (Dirac and Newton)
 with col2:
-    clickable_image(*images[1])  # Dirac
-    clickable_image(*images[4])  # Newton
+    st.image(image2)
+    st.markdown(f"[Dirac](https://chatgpt.com/g/g-JjKhIfBft-dirac-learn-quantum-mechanics)")
+    
+    st.image(image5)
+    st.markdown(f"[Newton](https://chatgpt.com/g/g-yIo2Tvujk-newton-learn-classical-mechanics)")
 
 # Third column (Feynman and Chat with All)
 with col3:
-    clickable_image(*images[2])  # Feynman
-    clickable_image(*images[5])  # Chat with All
+    st.image(image3)
+    st.markdown(f"[Feynman](https://chatgpt.com/g/g-stfxVmJcu-feynman-learn-physics)")
+    
+    st.image(image6)
+    st.markdown(f"[Chat with All](https://chatgpt.com/g/g-5jFCsQ6x4-dialog-with-the-great-physicists)")