Rename pages/text_to_Image_Search.py to pages/4_🖼_text_to_Image_Search.py

pages/{text_to_Image_Search.py → 4_🖼_text_to_Image_Search.py}

@@ -30,9 +30,15 @@ def search_pexels(query, per_page=9, page=1):
 # Search interface
 search_query = st.text_input("🔍 Search for images", placeholder="Enter search term...")
 
+# Initialize session state for pagination and selected image
+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 search_query:
     with st.spinner("Searching Pexels..."):
-        results = search_pexels(search_query)
+        results = search_pexels(search_query, page=st.session_state.page)
     
     if results and 'photos' in results:
         st.success(f"Found {results['total_results']} results")
@@ -46,20 +52,87 @@ if search_query:
                     img_url = photo['src']['medium']
                     response = requests.get(img_url, timeout=10)
                     img = Image.open(BytesIO(response.content))
-                    st.image(img, caption=photo['alt'], use_column_width=True)
                     
-                    # Display attribution
-                    with st.expander("ℹ️ Attribution"):
-                        st.markdown(f"""
-                        **Photographer:** [{photo['photographer']}]({photo['photographer_url']})  
-                        **Pexels Profile:** [{photo['photographer_url']}]({photo['photographer_url']})  
-                        **License:** [Free to use](https://www.pexels.com/license/)  
-                        """)
+                    # Make image clickable
+                    if 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
+                    
                 except Exception as e:
                     st.error(f"Error loading image: {str(e)}")
+        
+        # Pagination controls
+        col1, col2, col3 = st.columns([1, 2, 1])
+        with col1:
+            if st.session_state.page > 1:
+                if st.button("⬅️ Previous Page"):
+                    st.session_state.page -= 1
+                    st.rerun()
+        with col3:
+            if results['total_results'] > st.session_state.page * 9:
+                if st.button("Next Page ➡️"):
+                    st.session_state.page += 1
+                    st.rerun()
+        with col2:
+            st.write(f"Page {st.session_state.page} of {(results['total_results']//9)+1}")
+    
     elif results:
         st.warning("No results found")
 
+# Sidebar for selected image details
+if 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()
+
 # Add some CSS styling
 st.markdown("""
 <style>
@@ -67,6 +140,7 @@ st.markdown("""
         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);
@@ -75,6 +149,17 @@ st.markdown("""
         background-color: #f8f9fa;
         border-radius: 8px;
         padding: 10px;
+        margin-top: 5px;
+    }
+    .st-emotion-cache-16txtl3 {
+        padding: 2rem 1rem;
+    }
+    .stButton>button {
+        width: 100%;
+    }
+    [data-testid="stSidebar"] {
+        background-color: #f8f9fa;
+        padding: 20px;
     }
 </style>
 """, unsafe_allow_html=True)