import gradio as gr
import cv2
import numpy as np

# Function to compare two images and highlight differences
def compare_images(mockup, ui_screenshot, check_text, check_color, check_spacing):
    # Convert images to numpy arrays
    mockup_array = np.array(mockup)
    ui_screenshot_array = np.array(ui_screenshot)

    # Resize images to the same dimensions
    if mockup_array.shape != ui_screenshot_array.shape:
        height, width = max(mockup_array.shape[0], ui_screenshot_array.shape[0]), max(mockup_array.shape[1], ui_screenshot_array.shape[1])
        mockup_array = cv2.resize(mockup_array, (width, height))
        ui_screenshot_array = cv2.resize(ui_screenshot_array, (width, height))

    # Convert images to RGB
    mockup_rgb = cv2.cvtColor(mockup_array, cv2.COLOR_RGB2BGR)
    ui_screenshot_rgb = cv2.cvtColor(ui_screenshot_array, cv2.COLOR_RGB2BGR)

    # Compute the absolute difference between the two images
    difference = cv2.absdiff(mockup_rgb, ui_screenshot_rgb)

    # Threshold the difference image to get a binary image
    _, thresh = cv2.threshold(cv2.cvtColor(difference, cv2.COLOR_BGR2GRAY), 30, 255, cv2.THRESH_BINARY)

    # Find contours of the differences
    contours, _ = cv2.findContours(thresh, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)

    # Create a copy of the original image to draw the differences
    highlighted_image = mockup_array.copy()

    # Define colors for different checks
    colors = {
        "text": (255, 0, 0),  # Blue for text
        "color": (0, 255, 0),  # Green for color
        "spacing": (0, 0, 255)  # Red for spacing
    }

    # Draw contours on the highlighted image with different colors based on the checks
    for contour in contours:
        if check_text:
            cv2.drawContours(highlighted_image, [contour], -1, colors["text"], 2)
        if check_color:
            cv2.drawContours(highlighted_image, [contour], -1, colors["color"], 2)
        if check_spacing:
            cv2.drawContours(highlighted_image, [contour], -1, colors["spacing"], 2)

    return highlighted_image

# Create Gradio interface
with gr.Blocks() as demo:
    # Load Google Fonts for Roboto and Press Start 2P
    gr.Markdown("""
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Press+Start+2P&display=swap" rel="stylesheet">
    """)
    
    # Display logo and title side by side
    gr.Markdown("""
    <div style='display: flex; align-items: center; justify-content: center;'>
        <img src='/image/CeX_Logo.png' width='100' style='margin-right: 10px;'/>
        <h1 style='font-family: "Press Start 2P", cursive; margin: 0;'>Spot The Difference Game</h1>
    </div>
    """)
    
    with gr.Row():
        mockup_input = gr.Image(label="Mockup Image")
        ui_screenshot_input = gr.Image(label="UI Screenshot")
    with gr.Row():
        check_text = gr.Checkbox(label="Check Text")
        check_color = gr.Checkbox(label="Check Color", value=True)  # Default to True to spot minor color variations
        check_spacing = gr.Checkbox(label="Check Spacing")
    with gr.Row():
        compare_button = gr.Button("Compare Images")
        output_image = gr.Image(label="Highlighted Differences")

    # Set up the button click event
    compare_button.click(compare_images, inputs=[mockup_input, ui_screenshot_input, check_text, check_color, check_spacing], outputs=output_image)

# Launch the Gradio app
demo.launch()