Limit image size & Modify Interface

app.py

@@ -7,8 +7,8 @@ from skimage.feature import graycomatrix, graycoprops
 from torchvision import transforms
 import os
 
-NUM_ROUNDS = 10  # Adjust the number of game rounds here
-PROB_THRESHOLD = 0.3  # Adjust the probability threshold for model prediction here
+NUM_ROUNDS = 10
+PROB_THRESHOLD = 0.3
 
 # Load the model
 model = torch.jit.load("SuSy.pt")
@@ -34,7 +34,7 @@ def process_image(image):
             patch = image.crop((x, y, x + patch_size, y + patch_size))
             patches[i * num_patches_y + j] = np.array(patch)
 
-    # Compute the most relevant patches (optional)
+    # Compute the most relevant patches
     dissimilarity_scores = []
     for patch in patches:
         transform_patch = transforms.Compose([transforms.PILToTensor(), transforms.Grayscale()])
@@ -66,6 +66,20 @@ def process_image(image):
 
     return sorted_probs
 
+def resize_image(image, max_size=512):
+    """Resize image to have a maximum dimension of max_size while preserving aspect ratio"""
+    width, height = image.size
+    if width > height:
+        if width > max_size:
+            new_width = max_size
+            new_height = int(height * (max_size / width))
+    else:
+        if height > max_size:
+            new_height = max_size
+            new_width = int(width * (max_size / height))
+        else:
+            return image
+    return image.resize((new_width, new_height), Image.Resampling.LANCZOS)
 
 class GameState:
     def __init__(self):
@@ -77,6 +91,7 @@ class GameState:
         self.is_game_active = False
         self.last_results = None
         self.waiting_for_input = True
+        self.original_image = None
 
     def reset(self):
         self.__init__()
@@ -131,23 +146,25 @@ def start_game():
     game_state.game_images = load_images()
     game_state.is_game_active = True
     game_state.waiting_for_input = True
-    current_image = Image.open(game_state.game_images[0])
+    
+    # Store original image and create resized version for display
+    game_state.original_image = Image.open(game_state.game_images[0])
+    display_image = resize_image(game_state.original_image)
     
     return (
-        gr.update(value=current_image, visible=True),  # Show image
+        gr.update(value=display_image, visible=True),  # Show resized image
         gr.update(visible=False),  # Hide start button
-        gr.update(interactive=True, visible=True, value=None),  # Show radio buttons
-        gr.update(visible=True, interactive=True),  # Show submit button
+        gr.update(visible=True, interactive=True),  # Show Real button
+        gr.update(visible=True, interactive=True),  # Show Fake button
         create_score_html(),
         gr.update(visible=False)  # Hide feedback
     )
 
 def submit_guess(user_guess):
-    if not game_state.is_game_active or not game_state.waiting_for_input or user_guess is None:
-        return [gr.update()] * 6  # Return no updates if invalid state
-    
-    current_image = Image.open(game_state.game_images[game_state.current_round])
-    model_prediction = process_image(current_image)
+    if not game_state.is_game_active or not game_state.waiting_for_input:
+        return [gr.update()] * 6
+
+    model_prediction = process_image(game_state.original_image)
     correct_answer = "Real" if "real_images" in game_state.game_images[game_state.current_round] else "Fake"
     
     # Determine model's guess based on probabilities
@@ -173,23 +190,25 @@ def submit_guess(user_guess):
     if game_state.current_round >= game_state.total_rounds:
         game_state.is_game_active = False
         return (
-            gr.update(value=None, visible=False),  # Hide image
-            gr.update(visible=True),  # Show start button
-            gr.update(interactive=False, visible=False, value=None),  # Hide radio
-            gr.update(visible=False),  # Hide submit button
+            gr.update(value=None, visible=False),
+            gr.update(visible=True),
+            gr.update(visible=False),
+            gr.update(visible=False),
             create_score_html(),
             gr.update(visible=True, value="<div style='text-align: center; margin-top: 20px; font-size: 1.2em;'>Game Over! Click 'Start New Game' to play again.</div>")
         )
-    
+
     # Continue to next round
-    next_image = Image.open(game_state.game_images[game_state.current_round])
+    game_state.original_image = Image.open(game_state.game_images[game_state.current_round])
+    display_image = resize_image(game_state.original_image)
+    
     return (
-        gr.update(value=next_image, visible=True),  # Show next image
-        gr.update(visible=False),  # Keep start button hidden
-        gr.update(interactive=True, visible=True, value=None),  # Reset radio
-        gr.update(visible=True, interactive=True),  # Show submit button
+        gr.update(value=display_image, visible=True),
+        gr.update(visible=False),
+        gr.update(visible=True, interactive=True),
+        gr.update(visible=True, interactive=True),
         create_score_html(),
-        gr.update(visible=False)  # Keep feedback hidden
+        gr.update(visible=False)
     )
 
 # Custom CSS
@@ -203,6 +222,15 @@ custom_css = """
     max-width: 200px;
     margin: 0 auto;
 }
+#guess-buttons {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+    margin-top: 20px;
+}
+.guess-button {
+    min-width: 120px;
+}
 """
 
 # Define Gradio interface
@@ -236,21 +264,23 @@ with gr.Blocks(css=custom_css) as iface:
                     interactive=False,
                     visible=False
                 )
-                guess_input = gr.Radio(
-                    choices=["Real", "Fake"],
-                    label="Your Guess",
-                    interactive=False,
-                    visible=False
-                )
-                submit_button = gr.Button(
-                    "Submit Guess",
-                    visible=False,
-                    variant="primary"
-                )
             
             with gr.Column(scale=1):
                 score_display = gr.HTML()
-                
+                with gr.Row(elem_id="guess-buttons"):
+                    real_button = gr.Button(
+                        "Real",
+                        visible=False,
+                        variant="primary",
+                        elem_classes=["guess-button"]
+                    )
+                    fake_button = gr.Button(
+                        "Fake",
+                        visible=False,
+                        variant="secondary",
+                        elem_classes=["guess-button"]
+                    )
+        
         with gr.Row():
             with gr.Column(elem_id="start-button"):
                 start_button = gr.Button("Start New Game", variant="primary", size="sm")
@@ -263,21 +293,32 @@ with gr.Blocks(css=custom_css) as iface:
             outputs=[
                 image_display,
                 start_button,
-                guess_input,
-                submit_button,
+                real_button,
+                fake_button,
+                score_display,
+                feedback_display
+            ]
+        )
+        
+        real_button.click(
+            fn=lambda: submit_guess("Real"),
+            outputs=[
+                image_display,
+                start_button,
+                real_button,
+                fake_button,
                 score_display,
                 feedback_display
             ]
         )
         
-        submit_button.click(
-            fn=submit_guess,
-            inputs=[guess_input],
+        fake_button.click(
+            fn=lambda: submit_guess("Fake"),
             outputs=[
                 image_display,
                 start_button,
-                guess_input,
-                submit_button,
+                real_button,
+                fake_button,
                 score_display,
                 feedback_display
             ]