Update pages/4_🖼_text_to_Image_Search.py

pages/4_🖼_text_to_Image_Search.py

@@ -4,8 +4,58 @@ from PIL import Image
 from io import BytesIO
 import os
 
-# Set up the page
+# Set up the page with custom CSS to preserve background
 st.set_page_config(page_title="Pexels Image Search", layout="wide")
+
+# Custom CSS to maintain background
+st.markdown("""
+<style>
+    /* Main container styling */
+    .main .block-container {
+        background-color: transparent !important;
+        padding-top: 2rem;
+    }
+    
+    /* Image styling */
+    .stImage>img {
+        border-radius: 8px;
+        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s;
+        cursor: pointer;
+    }
+    .stImage>img:hover {
+        transform: scale(1.02);
+    }
+    
+    /* Expander styling */
+    [data-testid="stExpander"] {
+        background-color: rgba(248, 249, 250, 0.9);
+        border-radius: 8px;
+        padding: 10px;
+        margin-top: 5px;
+    }
+    
+    /* Sidebar styling - make it blend with background */
+    [data-testid="stSidebar"] {
+        background-color: rgba(248, 249, 250, 0.9) !important;
+        padding: 20px;
+        border-radius: 10px;
+        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+    }
+    
+    /* Title styling */
+    h1, h2, h3 {
+        color: inherit !important;
+    }
+    
+    /* Button styling */
+    .stButton>button {
+        width: 100%;
+        border: 1px solid #ddd !important;
+    }
+</style>
+""", unsafe_allow_html=True)
+
 st.title("📷 Pexels Image Search with Attribution")
 st.write("Search for images and properly credit the photographers")
 
@@ -27,16 +77,14 @@ def search_pexels(query, per_page=9, page=1):
         st.error(f"Error searching Pexels: {str(e)}")
         return None
 
+# Search interface
+search_query = st.text_input("🔍 Search for images", placeholder="Enter search term...")
+
 # Initialize session state
 if 'page' not in st.session_state:
     st.session_state.page = 1
 if 'selected_image' not in st.session_state:
     st.session_state.selected_image = None
-if 'show_modal' not in st.session_state:
-    st.session_state.show_modal = False
-
-# Search interface
-search_query = st.text_input("🔍 Search for images", placeholder="Enter search term...", key="search_input")
 
 if search_query:
     with st.spinner("Searching Pexels..."):
@@ -54,18 +102,26 @@ if search_query:
                     response = requests.get(img_url, timeout=10)
                     img = Image.open(BytesIO(response.content))
                     
-                    # Make image clickable
-                    clicked = st.image(
+                    # Display clickable image
+                    st.image(
                         img,
                         caption=f"{photo['photographer']} - {photo['alt'][:50]}...",
                         use_container_width=True
                     )
                     
-                    if clicked:
-                        st.session_state.selected_image = photo
-                        st.session_state.show_modal = True
-                        st.rerun()
-                        
+                    # Options expander
+                    with st.expander("⚙️ Options"):
+                        st.download_button(
+                            label="Download Original",
+                            data=requests.get(photo['src']['original']).content,
+                            file_name=f"pexels-{photo['id']}.jpg",
+                            mime="image/jpeg",
+                            key=f"dl_{photo['id']}"
+                        )
+                        if st.button("View Details", key=f"view_{photo['id']}"):
+                            st.session_state.selected_image = photo
+                            st.rerun()
+                    
                 except Exception as e:
                     st.error(f"Error loading image: {str(e)}")
         
@@ -87,119 +143,39 @@ if search_query:
     elif results:
         st.warning("No results found")
 
-# Modal for image details
-if st.session_state.show_modal and st.session_state.selected_image:
+# Image details sidebar (now more transparent)
+if st.session_state.selected_image:
     photo = st.session_state.selected_image
-    
-    # Custom CSS for the modal
-    st.markdown("""
-    <style>
-        .modal {
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 80%;
-            max-width: 800px;
-            background: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
-            z-index: 1000;
-        }
-        .modal-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0,0,0,0.5);
-            z-index: 999;
-        }
-        .close-btn {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: #ff4b4b;
-            color: white;
-            border: none;
-            border-radius: 50%;
-            width: 30px;
-            height: 30px;
-            font-size: 16px;
-            cursor: pointer;
-        }
-        .download-btn {
-            background: #4CAF50;
-            color: white;
-            padding: 10px 20px;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 16px;
-            margin-top: 10px;
-        }
-    </style>
-    """, unsafe_allow_html=True)
-    
-    # Modal content
-    st.markdown(f"""
-    <div class="modal-overlay" onclick="document.querySelector('div.modal-overlay').style.display = 'none'"></div>
-    <div class="modal">
-        <button class="close-btn" onclick="document.querySelector('div.modal-overlay').style.display = 'none'">×</button>
-        <h2>{photo['alt']}</h2>
-        <div style="display: flex; gap: 20px;">
-            <div style="flex: 2;">
-                <img src="{photo['src']['large']}" style="width: 100%; border-radius: 8px;"/>
-            </div>
-            <div style="flex: 1;">
-                <h3>Photographer</h3>
-                <p><a href="{photo['photographer_url']}" target="_blank">{photo['photographer']}</a></p>
-                
-                <h3>Image Details</h3>
-                <p>Size: {photo['width']} × {photo['height']}</p>
-                <p>ID: {photo['id']}</p>
-                
-                <a href="{photo['src']['original']}" download="pexels-{photo['id']}.jpg" class="download-btn">
-                    Download Original
-                </a>
-                
-                <p style="margin-top: 20px;"><small>
-                    <a href="https://www.pexels.com/license/" target="_blank">License Information</a>
-                </small></p>
-            </div>
-        </div>
-    </div>
-    """, unsafe_allow_html=True)
-    
-    # Handle modal close
-    if st.button("Close Modal", key="close_modal"):
-        st.session_state.show_modal = False
-        st.rerun()
-
-# Add some CSS styling for the main content
-st.markdown("""
-<style>
-    .stImage>img {
-        border-radius: 8px;
-        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
-        transition: transform 0.3s;
-        cursor: pointer;
-    }
-    .stImage>img:hover {
-        transform: scale(1.02);
-    }
-    [data-testid="stExpander"] {
-        background-color: #f8f9fa;
-        border-radius: 8px;
-        padding: 10px;
-        margin-top: 5px;
-    }
-    .st-emotion-cache-16txtl3 {
-        padding: 2rem 1rem;
-    }
-    .stButton>button {
-        width: 100%;
-    }
-</style>
-""", unsafe_allow_html=True)
+    with st.sidebar:
+        st.title("Image Details")
+        
+        try:
+            img_url = photo['src']['large']  # Using large instead of original for faster loading
+            response = requests.get(img_url, timeout=10)
+            img = Image.open(BytesIO(response.content))
+            st.image(img, use_container_width=True)
+        except Exception as e:
+            st.error(f"Error loading image: {str(e)}")
+        
+        # Attribution details
+        st.subheader("Attribution")
+        st.markdown(f"""
+        **Photographer:** [{photo['photographer']}]({photo['photographer_url']})  
+        **Profile:** [View on Pexels]({photo['photographer_url']})  
+        **Photo:** [View Original]({photo['url']})  
+        **Size:** {photo['width']} × {photo['height']}  
+        **License:** [Free to use](https://www.pexels.com/license/)  
+        """)
+        
+        # Download button
+        st.download_button(
+            label="Download Original Quality",
+            data=requests.get(photo['src']['original']).content,
+            file_name=f"pexels-{photo['id']}-original.jpg",
+            mime="image/jpeg",
+            use_container_width=True
+        )
+        
+        if st.button("Close Details", use_container_width=True):
+            st.session_state.selected_image = None
+            st.rerun()