Update pages/4_🖼_text_to_Image_Search.py

pages/4_🖼_text_to_Image_Search.py

@@ -27,14 +27,16 @@ 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 for pagination and selected image
+# 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..."):
@@ -47,32 +49,23 @@ if search_query:
         cols = st.columns(3)
         for idx, photo in enumerate(results['photos']):
             with cols[idx % 3]:
-                # Display the image
                 try:
                     img_url = photo['src']['medium']
                     response = requests.get(img_url, timeout=10)
                     img = Image.open(BytesIO(response.content))
                     
                     # Make image clickable
-                    if st.image(
+                    clicked = st.image(
                         img,
                         caption=f"{photo['photographer']} - {photo['alt'][:50]}...",
                         use_container_width=True
-                    ):
-                        pass
-                    
-                    # Download button
-                    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
+                    )
                     
+                    if clicked:
+                        st.session_state.selected_image = photo
+                        st.session_state.show_modal = True
+                        st.rerun()
+                        
                 except Exception as e:
                     st.error(f"Error loading image: {str(e)}")
         
@@ -94,46 +87,97 @@ if search_query:
     elif results:
         st.warning("No results found")
 
-# Sidebar for selected image details
-if st.session_state.selected_image:
+# Modal for image details
+if st.session_state.show_modal and st.session_state.selected_image:
     photo = st.session_state.selected_image
-    with st.sidebar:
-        st.title("Image Details")
-        
-        # Display original image
-        try:
-            img_url = photo['src']['original']
-            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 original image: {str(e)}")
-        
-        # Attribution details
-        st.subheader("Attribution Information")
-        st.markdown(f"""
-        **Photographer:** [{photo['photographer']}]({photo['photographer_url']})  
-        **Pexels Profile:** [View Profile]({photo['photographer_url']})  
-        **Original Photo:** [View on Pexels]({photo['url']})  
-        **Image ID:** {photo['id']}  
-        **Dimensions:** {photo['width']} × {photo['height']}  
-        **License:** [Free to use](https://www.pexels.com/license/)  
-        """)
-        
-        # Download original in sidebar
-        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", use_container_width=True):
-            st.session_state.selected_image = None
-            st.rerun()
+    
+    # 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
+# Add some CSS styling for the main content
 st.markdown("""
 <style>
     .stImage>img {
@@ -157,9 +201,5 @@ st.markdown("""
     .stButton>button {
         width: 100%;
     }
-    [data-testid="stSidebar"] {
-        background-color: #f8f9fa;
-        padding: 20px;
-    }
 </style>
 """, unsafe_allow_html=True)