Update app.py

app.py

@@ -1,22 +1,132 @@
-import gradio as gr
+import streamlit as st
 import numpy as np
 import similarSearch
+import pandas as pd
+import cv2
 
+df = pd.read_csv('./gallery.csv')
+
+def read_image(image_file):
+    img = cv2.imread(
+        image_file, cv2.IMREAD_COLOR | cv2.IMREAD_IGNORE_ORIENTATION
+    )
+    img = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
+    if img is None:
+        raise ValueError('Failed to read {}'.format(image_file))
+    return img
+
+    
+# Function to display images from their paths
+def display_images(image_ids):
+    images = []
+    captions = []
+    for img_id in image_ids:
+        image_path = df.loc[df['seller_img_id'] == img_id, 'img_path'].values[0]
+        print(image_path)
+        image = read_image(image_path)
+        images.append(image)
+        captions.append(img_id)
+    return images, captions
+    
 # Function to find similar image IDs for a newly updated image
-def find_similar_images(new_image):
+def find_similar_images(image):
     # Placeholder for your code to find similar image IDs based on the new_image
-    similar_ids = similarSearch.predict(new_image)  # Replace with the actual logic for finding similar IDs
-    print(similar_ids)
-    return similar_ids
-
-# Define Gradio interface
-iface = gr.Interface(
-    fn=find_similar_images, 
-    inputs=gr.inputs.Image(label="Upload Image"), 
-    outputs=gr.outputs.Textbox(label="Similar Image IDs"),
-    title="Image Similarity Finder",
-    description="Upload an image to find similar image IDs in the database."
-)
-
-# Launch the Gradio interface
-iface.launch()
+    similar_ids = similarSearch.predict(image)  # Replace with the actual logic for finding similar IDs
+    images, captions = display_images(similar_ids)
+    length = images.length
+    return images,length
+    # return similar_ids
+
+def main():
+    st.set_page_config(
+    page_title='Similar Image',
+    page_icon=':mag:',
+    layout='wide',
+    initial_sidebar_state='expanded'
+    )
+    st.title('Similar Image')
+    st.markdown(
+    """
+    <style>
+    .stTitle {
+        text-align: center;
+        font-size: 36px;
+        margin-bottom: 30px;
+    }
+    .stRadio > div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .stImageContainer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 30px;
+    }
+    .stImage {
+        max-width: 100%;
+        height: auto;
+    }
+    </style>
+    """,
+    unsafe_allow_html=True
+    )
+
+    uploaded_image = st.file_uploader("Upload Image", type=['png', 'jpg', 'jpeg'])
+
+    # Check if the image is uploaded by the user
+    if uploaded_image is not None:
+        # Convert the uploaded image to an array using the read_image function
+        image = read_image(uploaded_image)
+    
+        # Display the uploaded image
+        st.image(image, caption='Uploaded Image', use_column_width=True)
+    
+        # Find similar images
+        similar_images, length = find_similar_images(image)
+
+    # Define the desired width and height for the resized images
+    image_width = 150
+    image_height = 150
+    
+    # Calculate the number of columns based on the available width
+    num_columns = 5
+    
+    # Calculate the number of rows required
+    images_per_page = 50
+    num_rows = (images_per_page + num_columns - 1) // num_columns
+
+    # Calculate the total number of pages required
+    total_pages = (length + images_per_page - 1) // images_per_page
+
+    # Create a row for the page selector and images
+    col1, col2 = st.columns([2, 3])
+
+    # Page selector
+    with col1:
+        tabs = st.radio(" ", range(1, total_pages + 1))
+
+    # Calculate the range of images to display for the selected page
+    start_index = (tabs - 1) * images_per_page
+    end_index = min(start_index + images_per_page, len(csv_data))
+
+   
+
+    # Loop through each row in the CSV data for the selected page
+    for index in range(start_index, end_index):
+        img_id = csv_data.loc[index, 'seller_img_id']
+        img_path = csv_data.loc[index, 'img_path']
+        product_id = csv_data.loc[index, 'product_id']
+                
+        # Construct the full path to the image
+        full_img_path = gallery_folder_path + img_path
+                
+        # Open and resize the image to the desired dimensions
+        image = Image.open(full_img_path)
+        resized_image = image.resize((image_width, image_height))
+                
+        # Determine the column to place the image in
+        col_index = index % num_columns
+        with image_columns[col_index]:
+            st.image(resized_image, caption=f'Product ID: {product_id}\nImage ID: {img_id}', width=image_width)