import gradio as gr
import time

# Function to demonstrate a for loop
def demonstrate_for_loop(n, progress):
    for_output = ""
    for i in range(1, n + 1):
        if i % 2 == 0:
            color = "teal"
        else:
            color = "orange"
        for_output += f'<span style="color:{color}; font-size:24px; font-weight:bold;">{i} </span>'
        progress(i / n)  # Update progress bar
        time.sleep(0.5)  # Simulate delay
    return for_output  # Return final output

# Function to demonstrate a while loop
def demonstrate_while_loop(n, progress):
    while_output = ""
    i = 1
    while i <= n:
        if i % 2 == 0:
            color = "teal"
        else:
            color = "orange"
        while_output += f'<span style="color:{color}; font-size:24px; font-weight:bold;">{i} </span>'
        progress(i / n)  # Update progress bar
        time.sleep(0.5)  # Simulate delay
        i += 1
    return while_output  # Return final output

# Gradio Interface
def run_loop(n, loop_type):
    if loop_type == "For Loop":
        return demonstrate_for_loop(n, gr.Progress())  # Pass progress callback
    else:
        return demonstrate_while_loop(n, gr.Progress())  # Pass progress callback

with gr.Blocks() as demo:
    gr.Markdown("# Loop Demonstrator App")
    
    n_input = gr.Number(label="Enter number:", value=1, precision=0)
    loop_type_input = gr.Dropdown(choices=["For Loop", "While Loop"], label="Loop Type", value="For Loop")
    
    result_box = gr.HTML()
    
    # Update the button to directly return the result
    gr.Button("Run Loop").click(run_loop, inputs=[n_input, loop_type_input], outputs=result_box)

# Launch the Gradio app
demo.launch()