Update app.py

app.py

@@ -41,6 +41,7 @@ import io
 from firebase_admin import credentials, firestore
 import base64
 from pdfminer.high_level import extract_text  # Import for PDF text extraction
+from PIL import Image
 
 st.set_page_config(layout="wide")
 import logging
@@ -504,6 +505,8 @@ def side():
     with st.sidebar:
 
         with st.sidebar.expander("TrustLogic®", expanded=False):
+                st.image("Trust Logic_Wheel_RGB_Standard.png")
+
                 st.markdown(
                     "Our minds assess trust through Six Buckets of Trust® and determine their importance and order in a given situation. We then evaluate why we can or can’t trust someone in these Buckets. Trustifier.ai®, trained on 20 years of TrustLogic® application, helps you identify reasons why your audience can trust you in each Bucket and create trust-optimised solutions. It’s copy AI with substance."
                 )
@@ -538,10 +541,11 @@ def side():
                     """, unsafe_allow_html=True
                 )
                 st.markdown("For detailed descriptions, visit [Academy](https://www.trustifier.ai/account/academy)")
-                st.image("Trust Logic_Wheel_RGB_Standard.png")
-                st.sidebar.markdown('<hr style="border: 2px solid rgb(255, 153, 0); width: 80%; margin: 20px auto;">', unsafe_allow_html=True)
+        st.image("Trust Logic_Wheel_RGB_Standard.png")
+        
+        st.sidebar.markdown('<hr style="border: 2px solid rgb(255, 153, 0); width: 80%; margin: 20px auto;">', unsafe_allow_html=True)
                 
-                with st.sidebar.expander("Trust Buckets® and Trust Builders®", expanded=False):
+        with st.sidebar.expander("Trust Buckets® and Trust Builders®", expanded=False):
                         st.markdown(
                             "Our minds assess trust through Six Buckets of Trust® and determine their importance and order in a given situation. We then evaluate why we can or can’t trust someone in these Buckets. Trustifier.ai®, trained on 20 years of TrustLogic® application, helps you identify reasons why your audience can trust you in each Bucket and create trust-optimised solutions. It’s copy AI with substance."
                         )
@@ -576,101 +580,92 @@ def side():
                             """, unsafe_allow_html=True
                         )
                         st.markdown("For detailed descriptions, visit [Academy](https://www.trustifier.ai/account/academy)")
-                image_files = [
-                                ("Bucket_STABILITY.png", "Stability"),
-                                ("Bucket_DEVELOPMENT.png", "Development"),
-                                ("Bucket_RELATIONSHIP.png", "Relationship"),
-                                ("Bucket_BENEFIT.png", "Benefit"),
-                                ("Bucket_VISION.png", "Vision"),
-                                ("Bucket_COMPETENCE.png", "Competence"),]
-                st.markdown(
-                        """
-                        <style>
-                            :root {
-                                --bg-color-light: white;
-                                --bg-color-dark: black;
-                            }
-                    
-                            .image-container {
-                                display: flex;
-                                justify-content: center;
-                                align-items: flex-start;
-                                gap: 20px;
-                                margin-top: 20px;
-                            }
-                    
-                            .image-wrapper {
-                                position: relative;
-                                text-align: center;
-                            }
-                    
-                            .image-wrapper img {
-                                width: 100px;
-                                height: auto;
-                                background-color: var(--bg-color-light); /* Default light mode */
-                                padding: 10px;
-                                border-radius: 8px;
-                                transition: transform 0.3s ease, background-color 0.3s ease;
-                            }
-                    
-                            [data-theme="dark"] .image-wrapper img {
-                                background-color: var(--bg-color-dark); /* Adapt to dark mode */
-                            }
-                    
-                            .image-wrapper img:hover {
-                                transform: scale(1.1); /* Zoom effect on hover */
-                                cursor: pointer;
-                            }
-                    
-                            .hover-text {
-                                position: absolute;
-                                top: 50%;
-                                left: 50%;
-                                transform: translate(-50%, -50%);
-                                color: rgba(0, 0, 0, 0); /* Invisible by default */
-                                font-weight: bold;
-                                font-size: 14px;
-                                transition: color 0.3s ease;
-                            }
-                    
-                            [data-theme="dark"] .hover-text {
-                                color: rgba(255, 255, 255, 0); /* Invisible in dark mode by default */
-                            }
-                    
-                            .image-wrapper:hover .hover-text {
-                                color: rgba(0, 0, 0, 1); /* Visible on hover */
-                            }
-                    
-                            [data-theme="dark"] .image-wrapper:hover .hover-text {
-                                color: rgba(255, 255, 255, 1); /* Visible in dark mode on hover */
-                            }
-                        </style>
-                        """,
-                        unsafe_allow_html=True,
-                    )
-                    
-                # Dynamically generate the HTML for images and hover text
-                image_html = '<div class="image-container">'
-                for image_path, label in image_files:
-                    image_html += f"""
-                        <div class="image-wrapper">
-                            <img src="data:image/png;base64,{open(image_path, 'rb').read().hex()}" alt="{label}">
-                            <div class="hover-text">{label}</div>
-                        </div>
-                    """
-                image_html += '</div>'
                 
-                # Render the HTML in Streamlit
-                st.markdown(image_html, unsafe_allow_html=True)
-                st.sidebar.markdown('<hr style="border: 2px solid rgb(255, 153, 0); width: 80%; margin: 20px auto;">', unsafe_allow_html=True)
-
-
-             
-
+                st.image("Trust Logic_Wheel_RGB_Standard.png")
+              
+                
+        
+        
+        # Image paths and labels
+        image_files = [
+            ("Bucket_STABILITY.png", "Stability"),
+            ("Bucket_DEVELOPMENT.png", "Development"),
+            ("Bucket_RELATIONSHIP.png", "Relationship"),
+            ("Bucket_BENEFIT.png", "Benefit"),
+            ("Bucket_VISION.png", "Vision"),
+            ("Bucket_COMPETENCE.png", "Competence"),
+        ]
+        
+        # Compress images inline
+        compressed_dir = "compressed"
+        os.makedirs(compressed_dir, exist_ok=True)
+        compressed_images = []
+        for img_path, label in image_files:
+            compressed_path = os.path.join(compressed_dir, img_path)
+            if not os.path.exists(compressed_path):  # Compress if not already done
+                with Image.open(img_path) as img:
+                    img.save(compressed_path, optimize=True, quality=85)
+            compressed_images.append((compressed_path, label))
+        
+        # CSS for layout and hover effect
+        st.markdown(
+            """
+            <style>
+                .image-container {
+                    display: flex;
+                    justify-content: center;
+                    gap: 20px;
+                }
+                .image-wrapper {
+                    text-align: center;
+                    position: relative;
+                }
+                .image-wrapper img {
+                    width: 100px;
+                    transition: transform 0.3s;
+                }
+                .image-wrapper img:hover {
+                    transform: scale(1.1);
+                }
+                .hover-text {
+                    position: absolute;
+                    top: 110%;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    opacity: 0;
+                    transition: opacity 0.3s;
+                    font-size: 14px;
+                    font-weight: bold;
+                }
+                .image-wrapper:hover .hover-text {
+                    opacity: 1;
+                }
+            </style>
+            """,
+            unsafe_allow_html=True,
+        )
+        
+        # Render images with hover text
+        image_html = '<div class="image-container">'
+        for img_path, label in compressed_images:
+            with open(img_path, "rb") as f:
+                img_data = f.read()
+            img_base64 = img_data.hex()
+            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>"
+        st.markdown(image_html, unsafe_allow_html=True)
+        
+        
 
 
 
         
+        
         st.header("Upload Data source")
         
         with st.form(key="upload_form"):