Spaces:
Sleeping
Sleeping
File size: 3,570 Bytes
2e66235 6aeafd2 2e66235 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
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() |