Move image resizing to frontend

app.py

@@ -66,20 +66,6 @@ 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):
@@ -91,10 +77,35 @@ 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__()
+    
+    def get_game_over_message(self):
+        if self.user_score > self.model_score:
+            return """
+            <div style='text-align: center; margin-top: 20px; font-size: 1.2em;'>
+                🎉 Congratulations! You won! 🎉<br>
+                You've outperformed SuSy in detecting AI-generated images.<br>
+                Click 'Start New Game' to play again.
+            </div>
+            """
+        elif self.user_score < self.model_score:
+            return """
+            <div style='text-align: center; margin-top: 20px; font-size: 1.2em;'>
+                Better luck next time! SuSy won this round.<br>
+                Keep practicing to improve your detection skills.<br>
+                Click 'Start New Game' to try again.
+            </div>
+            """
+        else:
+            return """
+            <div style='text-align: center; margin-top: 20px; font-size: 1.2em;'>
+                It's a tie! You matched SuSy's performance!<br>
+                You're getting good at this.<br>
+                Click 'Start New Game' to play again.
+            </div>
+            """
 
 game_state = GameState()
 
@@ -146,29 +157,26 @@ def start_game():
     game_state.game_images = load_images()
     game_state.is_game_active = True
     game_state.waiting_for_input = True
-    
-    # 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)
+    current_image = Image.open(game_state.game_images[0])
     
     return (
-        gr.update(value=display_image, visible=True),  # Show resized image
-        gr.update(visible=False),  # Hide start button
-        gr.update(visible=True, interactive=True),  # Show Real button
-        gr.update(visible=True, interactive=True),  # Show Fake button
+        gr.update(value=current_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)  # Hide feedback
+        gr.update(visible=False)
     )
 
 def submit_guess(user_guess):
     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
+    # Compute Model Guess
+    current_image = Image.open(game_state.game_images[game_state.current_round])
+    model_prediction = process_image(current_image)
     model_guess = "Real" if model_prediction['Authentic'] > PROB_THRESHOLD else "Fake"
+    correct_answer = "Real" if "real_images" in game_state.game_images[game_state.current_round] else "Fake"
     
     # Update scores
     if user_guess == correct_answer:
@@ -195,15 +203,13 @@ def submit_guess(user_guess):
             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>")
+            gr.update(visible=True, value=game_state.get_game_over_message())
         )
-
-    # Continue to next round
-    game_state.original_image = Image.open(game_state.game_images[game_state.current_round])
-    display_image = resize_image(game_state.original_image)
+    
+    next_image = Image.open(game_state.game_images[game_state.current_round])
     
     return (
-        gr.update(value=display_image, visible=True),
+        gr.update(value=next_image, visible=True),
         gr.update(visible=False),
         gr.update(visible=True, interactive=True),
         gr.update(visible=True, interactive=True),
@@ -231,6 +237,11 @@ custom_css = """
 .guess-button {
     min-width: 120px;
 }
+.image-container img {
+    max-height: 768px !important;
+    width: auto !important;
+    object-fit: contain !important;
+}
 """
 
 # Define Gradio interface
@@ -262,7 +273,8 @@ with gr.Blocks(css=custom_css) as iface:
                     type="pil",
                     label="Current Image",
                     interactive=False,
-                    visible=False
+                    visible=False,
+                    elem_classes=["image-container"]
                 )
                 with gr.Row(elem_id="guess-buttons"):
                     real_button = gr.Button(