import gradio as gr
import time

# Function to demonstrate a for loop
def demonstrate_for_loop(n):
    progress = 0
    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
        yield (for_output, progress)

# Function to demonstrate a while loop
def demonstrate_while_loop(n):
    progress = 0
    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
        yield (while_output, progress)
        i += 1

# Define the interface
def loop_interface(n, loop_type):
    if loop_type == "For Loop":
        return demonstrate_for_loop(n)
    else:
        return demonstrate_while_loop(n)

# Gradio Interface
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()
    progress_bar = gr.ProgressBar()
    
    def run_loop(n, loop_type):
        if loop_type == "For Loop":
            generator = demonstrate_for_loop(n)
        else:
            generator = demonstrate_while_loop(n)
        
        for output, progress in generator:
            result_box.update(output)
            progress_bar.update(progress)
            time.sleep(0.5)

    gr.Button("Run Loop").click(run_loop, inputs=[n_input, loop_type_input], outputs=[result_box, progress_bar])

# Launch the Gradio app
demo.launch()