import gradio as gr
import random

# Image filenames
wordcloud_images = ["wordcloud_intro.png", "wordcloud_body.png", "wordcloud_conclusion.png"]
scrambled_images = ["image1.png", "image2.png", "image3.png", "image4.png", "image5.png", "image6.png"]
correct_order = ["image5.png", "image1.png", "image6.png", "image2.png", "image4.png", "image3.png"]

# Randomly shuffle the scrambled images
random.shuffle(scrambled_images)

# Function to check the order of images
attempts = 3
def check_sequence(*images):
    global attempts
    if list(images) == correct_order:
        attempts = 3
        return "Wow! Good job! :)"
    else:
        attempts -= 1
        if attempts > 0:
            return f"Oops! Would you try again? You have {attempts} attempts left."
        else:
            attempts = 3
            return "Oops! No more attempts left. Please look at the WordCloud images carefully and try again."

# Gradio interface
with gr.Blocks() as demo:
    gr.Markdown("## Pre-reading Activity: Image Sequencing")
    
    gr.Markdown("### Look below at the Wordcloud images of the story-intro, body, and conclusion:")
    with gr.Row():
        for img in wordcloud_images:
            gr.Image(img, label=img.split('.')[0])
    
    gr.Markdown("### Here are the six scrambled images of the story:")
    with gr.Row():
        for img in scrambled_images:
            gr.Image(img, label=img.split('/')[-1])
    
    gr.Markdown("### Now, can you select the images in the correct order?")
    image_inputs = [gr.Dropdown(choices=scrambled_images, label=f"Image {i+1}") for i in range(6)]
    
    result = gr.Textbox(label="Feedback", interactive=False)
    
    check_button = gr.Button("Check Order")
    check_button.click(check_sequence, inputs=image_inputs, outputs=result)

demo.launch()