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")

# Specific values for percentage and complexity
percentage_values = [10, 30, 50, 70, 100]
complexity_values = [16, 32]

# Function to load and display images based on user selection
def display_images(percentage_idx, complexity_idx):
    # Map the slider index to the actual value
    percentage = percentage_values[percentage_idx]
    complexity = complexity_values[complexity_idx]
    
    # 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 beam prediction function (template based)
def beam_prediction(input_data, percentage_idx, complexity_idx):
    # Add your beam prediction logic here (this is placeholder code)
    raw_img, embeddings_img = display_images(percentage_idx, complexity_idx)
    return raw_img, embeddings_img

# Define the LoS/NLoS classification function (template based)
def los_nlos_classification(input_data, percentage_idx, complexity_idx):
    # Add your LoS/NLoS classification logic here (this is placeholder code)
    raw_img, embeddings_img = display_images(percentage_idx, complexity_idx)
    return raw_img, embeddings_img

# Define the Gradio interface
with gr.Blocks(css="""
    .vertical-slider input[type=range] {
        writing-mode: bt-lr; /* IE */
        -webkit-appearance: slider-vertical; /* WebKit */
        width: 8px;
        height: 200px;
    }
    .slider-container {
        display: inline-block;
        margin-right: 50px;
        text-align: center;
    }
""") as demo:
    
    # Contact Section
    gr.Markdown(
        """
        ## Contact
        <div style="display: flex; align-items: center;">
            <a target="_blank" href="mailto:info@wirelessmodel.com"><img src="https://img.shields.io/badge/email-info@wirelessmodel.com-blue.svg?logo=gmail " alt="Email"></a>&nbsp;&nbsp;
            <a target="_blank" href="https://telegram.me/wirelessmodel"><img src="https://img.shields.io/badge/telegram-@wirelessmodel-blue.svg?logo=telegram " alt="Telegram"></a>&nbsp;&nbsp;
        </div>
        """
    )
    
    # Tabs for Beam Prediction and LoS/NLoS Classification
    with gr.Tab("Beam Prediction Task"):
        gr.Markdown("### Beam Prediction Task")
        beam_input = gr.Textbox(label="Enter Input Data for Beam Prediction", placeholder="Enter data here...")
        
        # Sliders for percentage and complexity
        with gr.Row():
            with gr.Column(elem_id="slider-container"):
                gr.Markdown("Percentage of Data for Training")
                percentage_slider_bp = gr.Slider(minimum=0, maximum=4, step=1, value=0, interactive=True, elem_id="vertical-slider")
            with gr.Column(elem_id="slider-container"):
                gr.Markdown("Task Complexity")
                complexity_slider_bp = gr.Slider(minimum=0, maximum=1, step=1, value=0, interactive=True, elem_id="vertical-slider")

        # Image outputs (display the images side by side and set a smaller size for the images)
        with gr.Row():
            raw_img_bp = gr.Image(label="Raw Channels", type="pil", width=300, height=300, interactive=False)
            embeddings_img_bp = gr.Image(label="Embeddings", type="pil", width=300, height=300, interactive=False)

        # Button to trigger beam prediction
        beam_button = gr.Button("Predict Beam")
        beam_button.click(beam_prediction, inputs=[beam_input, percentage_slider_bp, complexity_slider_bp], outputs=[raw_img_bp, embeddings_img_bp])

    with gr.Tab("LoS/NLoS Classification Task"):
        gr.Markdown("### LoS/NLoS Classification Task")
        los_input = gr.Textbox(label="Enter Input Data for LoS/NLoS Classification", placeholder="Enter data here...")

        # Sliders for percentage and complexity
        with gr.Row():
            with gr.Column(elem_id="slider-container"):
                gr.Markdown("Percentage of Data for Training")
                percentage_slider_los = gr.Slider(minimum=0, maximum=4, step=1, value=0, interactive=True, elem_id="vertical-slider")
            with gr.Column(elem_id="slider-container"):
                gr.Markdown("Task Complexity")
                complexity_slider_los = gr.Slider(minimum=0, maximum=1, step=1, value=0, interactive=True, elem_id="vertical-slider")

        # Image outputs (display the images side by side and set a smaller size for the images)
        with gr.Row():
            raw_img_los = gr.Image(label="Raw Channels", type="pil", width=300, height=300, interactive=False)
            embeddings_img_los = gr.Image(label="Embeddings", type="pil", width=300, height=300, interactive=False)

        # Button to trigger classification
        los_button = gr.Button("Classify")
        los_button.click(los_nlos_classification, inputs=[los_input, percentage_slider_los, complexity_slider_los], outputs=[raw_img_los, embeddings_img_los])

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