Update app.py

app.py

@@ -688,12 +688,12 @@ def side():
 
         st.sidebar.header("TrustVault®")
         image_files = [
-            ("Stability", "Bucket_STABILITY.png"),
-            ("Development", "Bucket_DEVELOPMENT.png"),
-            ("Relationship", "Bucket_RELATIONSHIP.png"),
-            ("Benefit", "Bucket_BENEFIT.png"),
-            ("Vision", "Bucket_VISION.png"),
-            ("Competence", "Bucket_COMPETENCE.png"),
+            ("Stability", os.path.join(IMAGE_DIR, "Bucket_STABILITY.png")),
+            ("Development", os.path.join(IMAGE_DIR, "Bucket_DEVELOPMENT.png")),
+            ("Relationship", os.path.join(IMAGE_DIR, "Bucket_RELATIONSHIP.png")),
+            ("Benefit", os.path.join(IMAGE_DIR, "Bucket_BENEFIT.png")),
+            ("Vision", os.path.join(IMAGE_DIR, "Bucket_VISION.png")),
+            ("Competence", os.path.join(IMAGE_DIR, "Bucket_COMPETENCE.png")),
         ]
         
         # CSS for Layout and Hover Effect
@@ -703,21 +703,14 @@ def side():
                 .image-container {
                     display: flex;
                     justify-content: center;
-                    gap: 10px;
-                    margin-bottom: 10px;
+                    gap: 20px;
                 }
                 .image-wrapper {
                     text-align: center;
                 }
-                .image-wrapper button {
-                    background-color: transparent;
-                    border: none;
-                    padding: 0;
-                    margin: 0;
-                }
                 .image-wrapper img {
-                    width: 60px;
-                    height: 60px;
+                    width: 80px;
+                    height: 80px;
                     object-fit: contain;
                     cursor: pointer;
                     transition: transform 0.3s;
@@ -725,15 +718,6 @@ def side():
                 .image-wrapper img:hover {
                     transform: scale(1.1);
                 }
-                .small-button {
-                    font-size: 12px;
-                    padding: 5px 10px;
-                }
-                .show-button-container {
-                    display: flex;
-                    justify-content: flex-end;
-                    margin-top: -10px;
-                }
             </style>
             """,
             unsafe_allow_html=True,
@@ -817,13 +801,14 @@ def side():
                 st.write("No TrustBuilders found.")
         st.markdown("</div>", unsafe_allow_html=True)
         
-        st.write("Choose the Trust Bucket® by clicking on an image:")
-        st.markdown('<div class="image-container">', unsafe_allow_html=True)
-        for bucket, img_path in image_files:
-            try:
+      st.write("Choose the Trust Bucket® by clicking an image:")
+    st.markdown('<div class="image-container">', unsafe_allow_html=True)
+    for bucket, img_path in image_files:
+        try:
+            if os.path.exists(img_path):
                 # Display clickable image as a button
                 if st.button(label="", key=f"filter_{bucket}", help=f"Filter by {bucket}"):
-                    search_query = bucket
+                    st.write(f"You clicked on {bucket} bucket!")
                 st.markdown(
                     f"""
                     <div class="image-wrapper">
@@ -832,9 +817,11 @@ def side():
                     """,
                     unsafe_allow_html=True,
                 )
-            except FileNotFoundError:
+            else:
                 st.warning(f"Image not found: {img_path}")
-        st.markdown("</div>", unsafe_allow_html=True)
+        except Exception as e:
+            st.error(f"Error loading image {img_path}: {e}")
+    st.markdown("</div>", unsafe_allow_html=True)
         
         # Save TrustBuilders Section
         st.subheader("Save TrustBuilders®")