Update app.py

app.py

@@ -597,8 +597,6 @@ def side():
             ("Bucket_COMPETENCE.png", "Competence"),
         ]
         
-        # 
-        
         # CSS for layout and hover effect
         st.markdown(
             """
@@ -637,11 +635,33 @@ def side():
             unsafe_allow_html=True,
         )
         
-        # Render images with hover text
+        # Create HTML structure for images and hover text
         image_html = '<div class="image-container">'
-        st.markdown(image_html, unsafe_allow_html=True)
+        for img_path, label in image_files:
+            # Load the image (you can use your local path or Hugging Face URL)
+            image = Image.open(img_path)
         
+            # Convert image to base64 for inline display in HTML
+            img_base64 = image_to_base64(image)  # Function to convert image to base64
+        
+            image_html += f"""
+                <div class="image-wrapper">
+                    <img src="data:image/png;base64,{img_base64}" alt="{label}">
+                    <div class="hover-text">{label}</div>
+                </div>
+            """
+        image_html += '</div>'
         
+        # Display images in the Streamlit app
+        st.markdown(image_html, unsafe_allow_html=True)
+        
+        # Function to convert an image to base64
+        def image_to_base64(img):
+            from io import BytesIO
+            buffer = BytesIO()
+            img.save(buffer, format="PNG")
+            return buffer.getvalue().encode("base64").decode()
+