import random
import gradio as gr
from PIL import Image

# 섞인 이미지를 저장할 리스트
shuffled_images = []
original_images = []

# 이미지 업로드 및 섞기 함수
def upload_and_shuffle(image1, image2, image3, image4):
    global shuffled_images, original_images
    images = [image1, image2, image3, image4]
    original_images = images.copy()
    random.shuffle(images)
    shuffled_images = images
    return images

# 순서 확인 함수
def check_order(slot1, slot2, slot3, slot4):
    user_order = [slot1 - 1, slot2 - 1, slot3 - 1, slot4 - 1]  # Adjust for 1-based index
    correct_order = [shuffled_images.index(img) for img in original_images]  # Correct order based on original images
    correct = user_order == correct_order
    return (
        "정답입니다!" if correct else "틀렸습니다. 올바른 순서는:",
        original_images[0], original_images[1],
        original_images[2], original_images[3]
    )

# Gradio 인터페이스 생성
def create_interface():
    with gr.Blocks() as demo:
        with gr.Row():
            image1 = gr.Image(label="이미지 1 업로드", type="pil", width=150, height=150)
            image2 = gr.Image(label="이미지 2 업로드", type="pil", width=150, height=150)
            image3 = gr.Image(label="이미지 3 업로드", type="pil", width=150, height=150)
            image4 = gr.Image(label="이미지 4 업로드", type="pil", width=150, height=150)

        upload_button = gr.Button("Upload and Shuffle Images")
        output_image1 = gr.Image(label="섞인 이미지 1", width=150, height=150)
        output_image2 = gr.Image(label="섞인 이미지 2", width=150, height=150)
        output_image3 = gr.Image(label="섞인 이미지 3", width=150, height=150)
        output_image4 = gr.Image(label="섞인 이미지 4", width=150, height=150)

        with gr.Row():
            slot1 = gr.Dropdown(choices=[1, 2, 3, 4], label="Slot 1")
            slot2 = gr.Dropdown(choices=[1, 2, 3, 4], label="Slot 2")
            slot3 = gr.Dropdown(choices=[1, 2, 3, 4], label="Slot 3")
            slot4 = gr.Dropdown(choices=[1, 2, 3, 4], label="Slot 4")

        submit_button = gr.Button("Submit")
        result = gr.Label()
        correct_order_image1 = gr.Image(label="정답 순서 이미지 1", width=150, height=150)
        correct_order_image2 = gr.Image(label="정답 순서 이미지 2", width=150, height=150)
        correct_order_image3 = gr.Image(label="정답 순서 이미지 3", width=150, height=150)
        correct_order_image4 = gr.Image(label="정답 순서 이미지 4", width=150, height=150)

        upload_button.click(upload_and_shuffle, inputs=[image1, image2, image3, image4], outputs=[output_image1, output_image2, output_image3, output_image4])
        submit_button.click(check_order, inputs=[slot1, slot2, slot3, slot4], outputs=[result, correct_order_image1, correct_order_image2, correct_order_image3, correct_order_image4])

    return demo

# Gradio 인터페이스 실행
demo = create_interface()
demo.launch()