initial commit

.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

README.md

@@ -0,0 +1,12 @@
+---
+title: SpotTheDifferenceGame
+emoji: 🦀
+colorFrom: red
+colorTo: green
+sdk: gradio
+sdk_version: 5.6.0
+app_file: app.py
+pinned: false
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,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='https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/CeX_Logo.webp/320px-CeX_Logo.webp.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()

requirements.txt

@@ -0,0 +1,2 @@
+opencv-python
+numpy