Spaces:
Sleeping
Sleeping
| 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='/images/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() |