frontend/gradio_app.py

# gradio_app.py
import gradio as gr
from frontend.input_handlers import InputHandlers
# from backend.supportingfiles.image_processor import ImageProcessor
from config import Config

# List of reference images (file paths in the Space)
reference_images = [
    "reference_images/35556691.jpg",
    "reference_images/35556692.jpg",
    "reference_images/35556705.jpg",
    "reference_images/35556710.jpg",
    "reference_images/35556713.jpg",
    "reference_images/35556714.jpg",
    "reference_images/35556760.jpg",
]

def create_gradio_interface():
    """Create and configure the Gradio web interface.
    
    Returns:
        gradio.Blocks: The configured Gradio interface
    """
    with gr.Blocks(title="Jewelry Recommender") as demo:
        gr.Markdown("# Jewelry Recommendation System")
        gr.Markdown("Upload JEWELERY💍🤳📸 image below ⬇ ")
        
        with gr.Tab("Upload Image"):
            with gr.Row():
                image_input = gr.Image(type="pil", label="Upload Jewelry Image",width=300 , height=300 )
                num_recs_slider = gr.Slider(
                    minimum=1, 
                    maximum=Config.MAX_RECOMMENDATIONS, 
                    value=Config.DEFAULT_NUM_RECOMMENDATIONS, 
                    step=1, 
                    label="Number of Recommendations"
                )
            skip_exact = gr.Checkbox(value=True, label="Skip Exact Match")
            submit_btn = gr.Button("Get Recommendations")
            output_html = gr.HTML(label="Recommendations")
            submit_btn.click(
                InputHandlers.process_image, 
                inputs=[image_input, num_recs_slider, skip_exact], 
                outputs=output_html
            )
            

    
        with gr.Tab("Reference Images"):
            gr.Markdown("### Select a reference image to test:")
            gallery = gr.Gallery(value=reference_images, label="Reference Images",height=150,width=150).style(grid=[3], container=True, item_style="border-radius: 10px; transition: transform 0.2s;")  # Display 3 images per row
            gallery_output = gr.HTML(label="Recommendations")
            gallery.select(InputHandlers.process_image, inputs=[gallery, num_recs_slider, skip_exact], outputs=gallery_output)

        
        with gr.Tab("Image URL"):
            with gr.Row():
                url_input = gr.Textbox(label="Enter Image URL")
                url_num_recs = gr.Slider(
                    minimum=1, 
                    maximum=Config.MAX_RECOMMENDATIONS, 
                    value=Config.DEFAULT_NUM_RECOMMENDATIONS, 
                    step=1, 
                    label="Number of Recommendations"
                )
            url_skip_exact = gr.Checkbox(value=True, label="Skip Exact Match")
            url_btn = gr.Button("Get Recommendations from URL")
            url_output = gr.HTML(label="Recommendations")
            url_btn.click(
                InputHandlers.process_url, 
                inputs=[url_input, url_num_recs, url_skip_exact], 
                outputs=url_output
            )
        
        # with gr.Tab("Base64 Image"):
        #     with gr.Row():
        #         base64_input = gr.Textbox(label="Enter Base64 Image String")
        #         base64_num_recs = gr.Slider(
        #             minimum=1, 
        #             maximum=Config.MAX_RECOMMENDATIONS, 
        #             value=Config.DEFAULT_NUM_RECOMMENDATIONS, 
        #             step=1, 
        #             label="Number of Recommendations"
        #         )
        #     base64_skip_exact = gr.Checkbox(value=True, label="Skip Exact Match")
        #     base64_btn = gr.Button("Get Recommendations from Base64")
        #     base64_output = gr.HTML(label="Recommendations")
        #     base64_btn.click(
        #         InputHandlers.process_base64, 
        #         inputs=[base64_input, base64_num_recs, base64_skip_exact], 
        #         outputs=base64_output
        #     )



        # with gr.Tab("Reference Images"):
        #     gr.Markdown("### Select a reference image to test:")
        #     reference_dropdown = gr.Dropdown(choices=reference_images, label="Reference Images")
        #     reference_output = gr.HTML(label="Recommendations")
        #     reference_dropdown.change(InputHandlers.process_image, inputs=[reference_dropdown, num_recs_slider, skip_exact], outputs=reference_output)

            
        gr.Markdown("## How to Use")
        gr.Markdown("""
        1. Upload an image of jewelry, provide an image URL, or paste a base64-encoded image
        2. Adjust the number of recommendations you want to see
        3. Check "Skip Exact Match" to exclude the identical or closest match from results
        4. Click the 'Get Recommendations' button
        5. View similar jewelry items based on visual similarity
        """)
        
    return demo