import gradio as gr
import os
from PIL import Image

# Paths to the images folder
RAW_PATH = os.path.join("images", "raw")
EMBEDDINGS_PATH = os.path.join("images", "embeddings")

# Function to load and display images based on user selection
def display_images(percentage, complexity):
    # Generate the paths to the images
    raw_image_path = os.path.join(RAW_PATH, f"percentage_{percentage}_complexity_{complexity}.png")
    embeddings_image_path = os.path.join(EMBEDDINGS_PATH, f"percentage_{percentage}_complexity_{complexity}.png")
    
    # Load images using PIL
    raw_image = Image.open(raw_image_path)
    embeddings_image = Image.open(embeddings_image_path)
    
    # Return the loaded images
    return raw_image, embeddings_image

# Define the Gradio interface
# Use sliders to make the user interaction smoother
data_percentage_range = (10, 100)  # Allow percentages between 10 and 100
task_complexity_range = (16, 32)   # Allow complexity between 16 and 32

# Define the layout and appearance of the UI
with gr.Blocks() as demo:
    gr.Markdown("# Raw vs. Embeddings Inference Results")
    gr.Markdown("Select a data percentage and task complexity to view the corresponding inference result for raw channels and embeddings.")
    
    # Inputs (using sliders for smoother tuning)
    with gr.Column():
        percentage_slider = gr.Slider(minimum=10, maximum=100, step=10, label="Percentage of Data for Training", value=10)
        complexity_slider = gr.Slider(minimum=16, maximum=32, step=4, label="Task Complexity", value=16)
    
    # Outputs (display the images side by side and set a smaller size for the images)
    with gr.Row():
        raw_img = gr.Image(label="Raw Channels", type="pil", width=300, height=300, interactive=False)  # Smaller image size
        embeddings_img = gr.Image(label="Embeddings", type="pil", width=300, height=300, interactive=False)  # Smaller image size
    
    # Trigger image updates when inputs change
    percentage_slider.change(fn=display_images, inputs=[percentage_slider, complexity_slider], outputs=[raw_img, embeddings_img])
    complexity_slider.change(fn=display_images, inputs=[percentage_slider, complexity_slider], outputs=[raw_img, embeddings_img])

# Launch the app
if __name__ == "__main__":
    demo.launch()