Upload 6 files

Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY . /app/
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+EXPOSE 7860
+
+CMD ["python", "app.py"] 

app.py

@@ -0,0 +1,1015 @@
+import os
+import json
+import random
+from flask import Flask, render_template, request, jsonify, send_from_directory
+
+app = Flask(__name__, static_folder='static', template_folder='templates')
+
+# Dictionary to track which puzzles have been shown for each CAPTCHA type
+seen_puzzles = {}
+# List to track recently used CAPTCHA types to avoid repetition
+recent_types = []
+# How many types to remember before allowing repetition
+MAX_RECENT_TYPES = 5
+
+PUZZLE_TYPE_SEQUENCE = [
+    'Dice_Count',
+    'Geometry_Click',
+    'Rotation_Match',
+    'Slide_Puzzle',
+    'Unusual_Detection',
+    'Image_Recognition',
+    'Bingo',
+    'Image_Matching',
+    'Patch_Select',
+    'Dart_Count',
+    'Object_Match',
+    'Select_Animal',
+    'Coordinates',
+    'Path_Finder',
+    'Place_Dot',
+    'Connect_icon',
+    'Click_Order',
+    'Hold_Button',
+    'Misleading_Click',
+    'Pick_Area'
+]
+sequential_index = 0
+
+# Load ground truth data for a specific type
+def load_ground_truth(captcha_type):
+    path = os.path.join('captcha_data', captcha_type, 'ground_truth.json')
+    try:
+        with open(path, 'r') as f:
+            return json.load(f)
+    except (FileNotFoundError, json.JSONDecodeError):
+        return {}
+
+# Get available CAPTCHA types
+def get_captcha_types():
+    base_dir = 'captcha_data'
+    if not os.path.exists(base_dir):
+        return []
+    return [d for d in os.listdir(base_dir) 
+            if os.path.isdir(os.path.join(base_dir, d))]
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/captcha_data/<captcha_type>/<filename>')
+def serve_captcha(captcha_type, filename):
+    return send_from_directory(os.path.join('captcha_data', captcha_type), filename)
+
+@app.route('/captcha_data/<captcha_type>/<subdir>/<filename>')
+def serve_captcha_subdir(captcha_type, subdir, filename):
+    return send_from_directory(os.path.join('captcha_data', captcha_type, subdir), filename)
+
+@app.route('/api/get_puzzle', methods=['GET'])
+def get_puzzle():
+    global recent_types
+    
+    # Check if we should return a random puzzle from any type
+    is_random = request.args.get('random', 'false').lower() == 'true'
+    
+    # Get all available CAPTCHA types
+    captcha_types = get_captcha_types()
+    if not captcha_types:
+        return jsonify({'error': 'No CAPTCHA types found'}), 404
+    
+    # Check if we're in debug mode for a specific type
+    debug_type = request.args.get('debug_type')
+
+    mode = request.args.get('mode', '').lower()
+
+    if debug_type and debug_type in captcha_types:
+        puzzle_type = debug_type
+    elif not is_random and mode == 'sequential':
+        global sequential_index
+        puzzle_type = PUZZLE_TYPE_SEQUENCE[sequential_index % len(PUZZLE_TYPE_SEQUENCE)]
+        sequential_index += 1
+    elif is_random:
+        # Select a random CAPTCHA type, avoiding recently used types if possible
+        available_types = [t for t in captcha_types if t not in recent_types]
+        
+        # If all types have been used recently, reset the tracking
+        if not available_types:
+            recent_types = []
+            available_types = captcha_types
+        
+        puzzle_type = random.choice(available_types)
+        
+        # Add to recent types and maintain maximum length
+        recent_types.append(puzzle_type)
+        if len(recent_types) > MAX_RECENT_TYPES:
+            recent_types.pop(0)
+    else:
+        # Get puzzle type from query parameter
+        puzzle_type = request.args.get('type', 'Dice_Count')
+        # Check if puzzle type exists
+        if puzzle_type not in captcha_types:
+            return jsonify({'error': f'Invalid puzzle type: {puzzle_type}'}), 400
+    
+    # Load ground truth for the selected type
+    ground_truth = load_ground_truth(puzzle_type)
+    if not ground_truth:
+        return jsonify({'error': f'No puzzles found for type: {puzzle_type}'}), 404
+    
+    puzzle_files = list(ground_truth.keys())
+    
+    # Select a random puzzle, avoiding repetition if possible
+    if puzzle_type not in seen_puzzles:
+        seen_puzzles[puzzle_type] = set()
+    
+    # Get unseen puzzles
+    unseen_puzzles = [p for p in puzzle_files if p not in seen_puzzles[puzzle_type]]
+    
+    # If all puzzles have been seen, reset the tracking
+    if not unseen_puzzles:
+        seen_puzzles[puzzle_type] = set()
+        unseen_puzzles = puzzle_files
+    
+    # Select a random puzzle from unseen ones
+    selected_puzzle = random.choice(unseen_puzzles)
+    
+    # Mark this puzzle as seen
+    seen_puzzles[puzzle_type].add(selected_puzzle)
+    
+    # Get the appropriate question prompt based on puzzle type
+    if puzzle_type == "Dice_Count":
+        prompt = ground_truth[selected_puzzle].get('prompt', "Sum up the numbers on all the dice")
+    elif puzzle_type == "Geometry_Click":
+        prompt = ground_truth[selected_puzzle].get("question", "Click on the geometric shape")
+    elif puzzle_type == "Rotation_Match":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Use the arrows to rotate the object to match the reference direction")
+    elif puzzle_type == "Slide_Puzzle":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Drag the slider component to the correct position")
+    elif puzzle_type == "Unusual_Detection":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Select the unusual items in the image")
+    elif puzzle_type == "Image_Recognition":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Select all images matching the description")
+    elif puzzle_type == "Bingo":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Please click two images to exchange their position to line up the same images to a line")
+    elif puzzle_type == "Image_Matching":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Using the arrows, match the animal in the left and right image.")
+    elif puzzle_type == "Patch_Select":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Select all squares with the specified objects")
+    elif puzzle_type == "Dart_Count":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Use the arrows to pick the image where all the darts add up to the number in the left image.")
+    elif puzzle_type == "Object_Match":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Use the arrows to change the number of objects until it matches the left image.")
+    elif puzzle_type == "Select_Animal":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Pick a fox")
+    elif puzzle_type == "Coordinates":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Using the arrows, move Jerry to the indicated seat")
+    elif puzzle_type == "Path_Finder":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Use the arrows to move the duck to the spot indicated by the cross")
+    elif puzzle_type == "Place_Dot":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Click to place a Dot at the end of the car's path")
+    elif puzzle_type == "Connect_icon":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Using the arrows, connect the same two icons with the dotted line as shown on the left.")
+    elif puzzle_type == "Click_Order":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Click the icons in order as shown in the reference image.")
+    elif puzzle_type == "Hold_Button":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Hold the button until it finishes loading.")
+    elif puzzle_type == "Misleading_Click":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Click the image to continue.")
+    elif puzzle_type == "Pick_Area":
+        prompt = ground_truth[selected_puzzle].get("prompt", "Click on the largest area outlined by the dotted line")
+    else:
+        prompt = ground_truth[selected_puzzle].get("prompt", "Solve the CAPTCHA puzzle")
+    
+    # Add input_type to tell the frontend what kind of input to show
+    input_type = "text"
+    if puzzle_type == "Dice_Count":
+        input_type = "number"
+    elif puzzle_type == "Geometry_Click":
+        input_type = "click"
+    elif puzzle_type == "Rotation_Match":
+        input_type = "rotation"
+    elif puzzle_type == "Slide_Puzzle":
+        input_type = "slide"
+    elif puzzle_type == "Unusual_Detection":
+        input_type = "multiselect"
+    elif puzzle_type == "Image_Recognition":
+        input_type = "image_grid"
+    elif puzzle_type == "Bingo":
+        input_type = "bingo_swap"
+    elif puzzle_type == "Image_Matching":
+        input_type = "image_matching"
+    elif puzzle_type == "Patch_Select":
+        input_type = "patch_select"
+    elif puzzle_type == "Dart_Count":
+        input_type = "dart_count"
+    elif puzzle_type == "Object_Match":
+        input_type = "object_match"
+    elif puzzle_type == "Select_Animal":
+        input_type = "select_animal"
+    elif puzzle_type == "Coordinates":
+        input_type = "image_matching"
+    elif puzzle_type == "Path_Finder":
+        input_type = "image_matching"
+    elif puzzle_type == "Place_Dot":
+        input_type = "place_dot"
+    elif puzzle_type == "Connect_icon":
+        input_type = "connect_icon"
+    elif puzzle_type == "Click_Order":
+        input_type = "click_order"
+    elif puzzle_type == "Hold_Button":
+        input_type = "hold_button"
+    elif puzzle_type == "Misleading_Click":
+        input_type = "click"
+    elif puzzle_type == "Pick_Area":
+        input_type = "click"
+    
+    # For Rotation_Match, include additional data needed for the interface
+    additional_data = {}
+    if puzzle_type == "Rotation_Match":
+        # Get reference image and object base name
+        reference_image = ground_truth[selected_puzzle].get("reference_image")
+        object_base_image = ground_truth[selected_puzzle].get("object_base_image")
+        
+        if not reference_image or not object_base_image:
+            # If missing required fields, try another puzzle or fall back
+            return jsonify({'error': f'Invalid rotation puzzle data: {selected_puzzle}'}), 500
+        
+        # Format paths for these images
+        ref_path = f'/captcha_data/{puzzle_type}/{reference_image}'
+        
+        # Get object base name without extension to construct rotated image paths
+        object_base = os.path.splitext(object_base_image)[0]
+        
+        # Construct the initial object image path (0 degrees rotation)
+        object_path = f'/captcha_data/{puzzle_type}/{object_base}_0.png'
+        
+        additional_data = {
+            "reference_image": ref_path,
+            "object_image": object_path,
+            "object_base": object_base,
+            "current_angle": 0
+        }
+    # For Slide_Puzzle, include the component image path and target position data
+    elif puzzle_type == "Slide_Puzzle":
+        # Get component image name
+        component_image = ground_truth[selected_puzzle].get("component_image")
+        
+        if not component_image:
+            # If missing required fields, try another puzzle or fall back
+            return jsonify({'error': f'Invalid slide puzzle data: {selected_puzzle}'}), 500
+        
+        # Format path for the component image
+        component_path = f'/captcha_data/{puzzle_type}/{component_image}'
+        
+        additional_data = {
+            "component_image": component_path,
+            "background_image": f'/captcha_data/{puzzle_type}/{selected_puzzle}'
+        }
+    # For Unusual_Detection, include the grid size
+    elif puzzle_type == "Unusual_Detection":
+        # Get grid size from ground truth
+        grid_size = ground_truth[selected_puzzle].get("grid_size", [2, 3])  # Default to 2x3 grid if not specified
+        
+        additional_data = {
+            "grid_size": grid_size
+        }
+    # For Image_Recognition, include the grid images
+    elif puzzle_type == "Image_Recognition":
+        # Get images array from ground truth
+        images = ground_truth[selected_puzzle].get("images", [])
+        grid_size = [3, 3]  # Default grid size for image recognition (3x3)
+        
+        # Get the subfolder name from the puzzle_id or use a specific subfolder field
+        subfolder = ground_truth[selected_puzzle].get("subfolder", selected_puzzle)
+        
+        # Include image paths in response - dynamically use the subfolder
+        image_paths = [f'/captcha_data/{puzzle_type}/{subfolder}/{img}' for img in images]
+        
+        additional_data = {
+            "images": image_paths,
+            "grid_size": grid_size,
+            "question": ground_truth[selected_puzzle].get("question", "Select matching images")
+        }
+    # For Bingo, include the grid size
+    elif puzzle_type == "Bingo":
+        # Get grid size from ground truth
+        grid_size = ground_truth[selected_puzzle].get("grid_size", [3, 3])  # Default to 3x3 grid if not specified
+        
+        additional_data = {
+            "grid_size": grid_size,
+            "solution_line": ground_truth[selected_puzzle].get("solution_line", {}),
+            "answer": ground_truth[selected_puzzle].get("answer", [])
+        }
+    # For Image_Matching, include the reference image and options
+    elif puzzle_type == "Image_Matching":
+        # Get the reference image and option images
+        reference_image = ground_truth[selected_puzzle].get("reference_image")
+        option_images = ground_truth[selected_puzzle].get("option_images", [])
+        correct_option_index = ground_truth[selected_puzzle].get("correct_option_index", 0)
+        
+        if not reference_image or not option_images:
+            return jsonify({'error': f'Invalid image matching data: {selected_puzzle}'}), 500
+        
+        # Format paths for these images
+        ref_path = f'/captcha_data/{puzzle_type}/{reference_image}'
+        option_paths = [f'/captcha_data/{puzzle_type}/{img}' for img in option_images]
+        
+        additional_data = {
+            "reference_image": ref_path,
+            "option_images": option_paths,
+            "current_option_index": 0,
+            "correct_option_index": correct_option_index
+        }
+    # For Patch_Select, include the grid size and target object
+    elif puzzle_type == "Patch_Select":
+        # Get grid size from ground truth, default to 6x6 grid
+        grid_size = ground_truth[selected_puzzle].get("grid_size", [5, 5])
+        target_object = ground_truth[selected_puzzle].get("target_object", "moon")
+        correct_patches = ground_truth[selected_puzzle].get("correct_patches", [])
+        
+        additional_data = {
+            "grid_size": grid_size,
+            "target_object": target_object,
+            "correct_patches": correct_patches
+        }
+    # For Dart_Count, include the reference image and options
+    elif puzzle_type == "Dart_Count":
+        # Get the reference image and option images
+        reference_image = ground_truth[selected_puzzle].get("reference_image")
+        option_images = ground_truth[selected_puzzle].get("option_images", [])
+        correct_option_index = ground_truth[selected_puzzle].get("correct_option_index", 0)
+        reference_number = ground_truth[selected_puzzle].get("reference_number", 0)
+        
+        if not reference_image or not option_images:
+            return jsonify({'error': f'Invalid dart count data: {selected_puzzle}'}), 500
+        
+        # Format paths for these images
+        ref_path = f'/captcha_data/{puzzle_type}/{reference_image}'
+        option_paths = [f'/captcha_data/{puzzle_type}/{img}' for img in option_images]
+        
+        additional_data = {
+            "reference_image": ref_path,
+            "option_images": option_paths,
+            "current_option_index": 0,
+            "correct_option_index": correct_option_index,
+            "reference_number": reference_number
+        }
+    # For Object_Match, include the reference image and options
+    elif puzzle_type == "Object_Match":
+        # Get the reference image and option images
+        reference_image = ground_truth[selected_puzzle].get("reference_image")
+        option_images = ground_truth[selected_puzzle].get("option_images", [])
+        correct_option_index = ground_truth[selected_puzzle].get("correct_option_index", 0)
+        
+        if not reference_image or not option_images:
+            return jsonify({'error': f'Invalid object match data: {selected_puzzle}'}), 500
+        
+        # Format paths for these images
+        ref_path = f'/captcha_data/{puzzle_type}/{reference_image}'
+        option_paths = [f'/captcha_data/{puzzle_type}/{img}' for img in option_images]
+        
+        additional_data = {
+            "reference_image": ref_path,
+            "option_images": option_paths,
+            "current_option_index": 0,
+            "correct_option_index": correct_option_index
+        }
+    # For Select_Animal, include the grid size and target object
+    elif puzzle_type == "Select_Animal":
+        # Get grid size from ground truth, default to 2x3 grid
+        grid_size = ground_truth[selected_puzzle].get("grid_size", [2, 3])
+        target_object = ground_truth[selected_puzzle].get("target_object", "fox")
+        correct_patches = ground_truth[selected_puzzle].get("correct_patches", [])
+        
+        additional_data = {
+            "grid_size": grid_size,
+            "target_object": target_object,
+            "correct_patches": correct_patches
+        }
+    # For Coordinates, include the reference image and options
+    elif puzzle_type == "Coordinates":
+        # Get the reference image and option images
+        reference_image = ground_truth[selected_puzzle].get("reference_image")
+        option_images = ground_truth[selected_puzzle].get("option_images", [])
+        correct_option_index = ground_truth[selected_puzzle].get("correct_option_index", 0)
+        
+        if not reference_image or not option_images:
+            return jsonify({'error': f'Invalid coordinates data: {selected_puzzle}'}), 500
+        
+        # Format paths for these images
+        ref_path = f'/captcha_data/{puzzle_type}/{reference_image}'
+        option_paths = [f'/captcha_data/{puzzle_type}/{img}' for img in option_images]
+        
+        additional_data = {
+            "reference_image": ref_path,
+            "option_images": option_paths,
+            "current_option_index": 0,
+            "correct_option_index": correct_option_index
+        }
+    # For Path_Finder, include the reference image and options
+    elif puzzle_type == "Path_Finder":
+        # Get the reference image and option images
+        reference_image = ground_truth[selected_puzzle].get("reference_image")
+        options = ground_truth[selected_puzzle].get("options", [])
+        correct_option = ground_truth[selected_puzzle].get("correct_option", 0)
+        
+        if not reference_image or not options:
+            return jsonify({'error': f'Invalid path finder data: {selected_puzzle}'}), 500
+        
+        # Format paths for these images
+        ref_path = f'/captcha_data/{puzzle_type}/{reference_image}'
+        option_paths = [f'/captcha_data/{puzzle_type}/{img}' for img in options]
+        
+        additional_data = {
+            "reference_image": ref_path,
+            "option_images": option_paths,
+            "current_option_index": 0,
+            "correct_option_index": correct_option
+        }
+    # For Connect_icon, include the reference image and options
+    elif puzzle_type == "Connect_icon":
+        # Get the reference image and option images
+        reference_image = ground_truth[selected_puzzle].get("reference_image")
+        options = ground_truth[selected_puzzle].get("options", [])
+        correct_option = ground_truth[selected_puzzle].get("correct_option", 0)
+        
+        if not reference_image or not options:
+            return jsonify({'error': f'Invalid connect icons data: {selected_puzzle}'}), 500
+        
+        # Format paths for these images
+        ref_path = f'/captcha_data/{puzzle_type}/{reference_image}'
+        option_paths = [f'/captcha_data/{puzzle_type}/{img}' for img in options]
+        
+        additional_data = {
+            "reference_image": ref_path,
+            "option_images": option_paths,
+            "current_option_index": 0,
+            "correct_option_index": correct_option
+        }
+    # For Click_Order, include the order image path
+    elif puzzle_type == "Click_Order":
+        # Get the order image from ground truth
+        order_image = ground_truth[selected_puzzle].get("order_image")
+        
+        if not order_image:
+            return jsonify({'error': f'Invalid click order data: {selected_puzzle}'}), 500
+        
+        # Format path for the order image
+        order_path = f'/captcha_data/{puzzle_type}/{order_image}'
+        
+        additional_data = {
+            "order_image": order_path,
+            "tolerance": ground_truth[selected_puzzle].get("tolerance", 20)
+        }
+    # For Hold_Button, include the hold time
+    elif puzzle_type == "Hold_Button":
+        # Get the required hold time from ground truth
+        hold_time = ground_truth[selected_puzzle].get("hold_time", 3)  # Default to 3 seconds if not specified
+        
+        additional_data = {
+            "hold_time": hold_time
+        }
+    # For Misleading_Click, include the area to avoid
+    elif puzzle_type == "Misleading_Click":
+        # Get the area to avoid from ground truth
+        avoid_area = ground_truth[selected_puzzle].get("avoid_area", {"x": 0, "y": 0, "width": 0, "height": 0})
+        
+        additional_data = {
+            "avoid_area": avoid_area
+        }
+    else:
+        prompt = ground_truth[selected_puzzle].get("prompt", "Solve the CAPTCHA puzzle")
+    
+    response_data = {
+        'puzzle_type': puzzle_type,
+        'image_path': f'/captcha_data/{puzzle_type}/{selected_puzzle}' if puzzle_type != "Rotation_Match" else None,
+        'puzzle_id': selected_puzzle,
+        'prompt': prompt,
+        'input_type': input_type,
+        'debug_info': f"Type: {puzzle_type}, Input: {input_type}, Puzzle: {selected_puzzle}"
+    }
+    
+    # Add any additional data for specific puzzle types
+    if additional_data:
+        response_data.update(additional_data)
+    
+    return jsonify(response_data)
+
+@app.route('/api/get_ground_truth', methods=['POST'])
+def get_ground_truth():
+    """Return ground truth data for debugging purposes"""
+    data = request.json
+    puzzle_type = data.get('puzzle_type')
+    puzzle_id = data.get('puzzle_id')
+    
+    if not puzzle_type or not puzzle_id:
+        return jsonify({'error': 'Missing puzzle_type or puzzle_id'}), 400
+    
+    ground_truth = load_ground_truth(puzzle_type)
+    
+    if puzzle_id not in ground_truth:
+        return jsonify({'error': 'Invalid puzzle ID'}), 400
+    
+    # Return the ground truth for the specified puzzle
+    puzzle_data = ground_truth[puzzle_id]
+    
+    # For Place_Dot puzzles, include the target_position and tolerance in the answer
+    if puzzle_type == 'Place_Dot':
+        return jsonify({
+            'answer': {
+                'target_position': puzzle_data.get('target_position'),
+                'tolerance': puzzle_data.get('tolerance', 15)
+            },
+            'question': puzzle_data.get('question'),
+            'description': puzzle_data.get('description')
+        })
+    # For Misleading_Click puzzles, ensure avoid_area is included in the answer
+    elif puzzle_type == 'Misleading_Click':
+        return jsonify({
+            'answer': {
+                'avoid_area': puzzle_data.get('avoid_area', {"x": 0, "y": 0, "width": 0, "height": 0})
+            },
+            'prompt': puzzle_data.get('prompt'),
+            'description': puzzle_data.get('description')
+        })
+    
+    return jsonify({
+        'answer': puzzle_data.get('answer'),
+        'question': puzzle_data.get('question'),
+        'description': puzzle_data.get('description')
+    })
+
+@app.route('/api/check_answer', methods=['POST'])
+def check_answer():
+    data = request.json
+    puzzle_type = data.get('puzzle_type', 'Dice_Count')
+    puzzle_id = data.get('puzzle_id')
+    user_answer = data.get('answer')
+    elapsed_time = float(data.get('elapsed_time', 0))
+
+    
+    # Validate input
+    if not puzzle_id or user_answer is None:
+        return jsonify({'error': 'Missing puzzle_id or answer'}), 400
+    
+    ground_truth = load_ground_truth(puzzle_type)
+    
+    if puzzle_id not in ground_truth:
+        return jsonify({'error': 'Invalid puzzle ID'}), 400
+    
+    # Get correct answer based on puzzle type
+    is_correct = False
+    
+    if puzzle_type == 'Dice_Count':
+        # For dice count, ensure we're comparing numbers
+        try:
+            correct_answer = ground_truth[puzzle_id].get('sum')
+            is_correct = int(user_answer) == int(correct_answer)
+        except ValueError:
+            return jsonify({'error': 'Invalid answer format'}), 400
+            
+    elif puzzle_type == 'Geometry_Click':
+        # For geometry click, check if click is within the correct area
+        try:
+            # Get the area boundaries from ground truth
+            correct_answer = ground_truth[puzzle_id].get('answer')
+            
+            # Extract coordinates
+            user_x, user_y = user_answer
+            
+            # Check if the new format is used (with area)
+            if isinstance(correct_answer, dict) and 'area' in correct_answer:
+                # Get area coordinates (top-left and bottom-right corners)
+                top_left, bottom_right = correct_answer['area']
+                min_x, min_y = top_left
+                max_x, max_y = bottom_right
+                
+                # Check if click is within the defined area
+                is_correct = (min_x <= user_x <= max_x) and (min_y <= user_y <= max_y)
+                
+                # Return the shape type as part of the correct answer
+                shape_type = correct_answer.get('type', 'shape')
+                correct_answer_info = {
+                    'type': shape_type,
+                    'area': correct_answer['area']
+                }
+            else:
+                # Fall back to the old format with distance calculation
+                correct_x, correct_y = correct_answer
+                
+                # Calculate distance and check if within tolerance (25 pixels)
+                tolerance = 25
+                distance = ((user_x - correct_x) ** 2 + (user_y - correct_y) ** 2) ** 0.5
+                is_correct = distance <= tolerance
+                correct_answer_info = correct_answer
+        except (ValueError, TypeError, KeyError):
+            return jsonify({'error': 'Invalid answer format for Geometry_Click'}), 400
+    
+    elif puzzle_type == 'Rotation_Match':
+        # For rotation match, check if the angle matches the correct answer
+        try:
+            # Get the correct angle from ground truth
+            correct_angle = ground_truth[puzzle_id].get('correct_angle')
+            
+            # User answer should be the current rotation angle
+            user_angle = int(user_answer)
+            
+            # Check if angles match (using modulo to handle full rotations)
+            is_correct = user_angle % 360 == correct_angle % 360
+            correct_answer_info = correct_angle
+        except (ValueError, TypeError):
+            return jsonify({'error': 'Invalid answer format for Rotation_Match'}), 400
+    
+    elif puzzle_type == 'Slide_Puzzle':
+        # For slide puzzle, check if the component is positioned correctly
+        try:
+            # Get the target position from ground truth
+            target_position = ground_truth[puzzle_id].get('target_position')
+            tolerance = ground_truth[puzzle_id].get('tolerance', 10)
+            
+            # User answer should be the final position coordinates [x, y]
+            user_x, user_y = user_answer
+            target_x, target_y = target_position
+            
+            # Calculate distance from target position
+            distance = ((user_x - target_x) ** 2 + (user_y - target_y) ** 2) ** 0.5
+            
+            # Check if within tolerance
+            is_correct = distance <= tolerance
+            correct_answer_info = target_position
+        except (ValueError, TypeError):
+            return jsonify({'error': 'Invalid answer format for Slide_Puzzle'}), 400
+    
+    elif puzzle_type == 'Unusual_Detection':
+        # For unusual detection, check if the selected grid cells match the unusual ones
+        try:
+            # Get the expected unusual cells from ground truth
+            correct_cells = ground_truth[puzzle_id].get('answer', [])
+            
+            # User answer should be a list of selected grid cell indices
+            user_cells = user_answer
+            
+            # Check if the selected cells match exactly
+            is_correct = set(user_cells) == set(correct_cells)
+            correct_answer_info = correct_cells
+        except (ValueError, TypeError):
+            return jsonify({'error': 'Invalid answer format for Unusual_Detection'}), 400
+    
+    elif puzzle_type == 'Image_Recognition':
+        # For image recognition, check if the selected images match the expected ones
+        try:
+            # Get the expected correct image indices from ground truth
+            correct_selections = ground_truth[puzzle_id].get('correct_selections', [])
+            
+            # User answer should be a list of selected image indices
+            user_selections = user_answer
+            
+            # Check if the selected images match exactly
+            is_correct = set(user_selections) == set(correct_selections)
+            correct_answer_info = correct_selections
+        except (ValueError, TypeError):
+            return jsonify({'error': 'Invalid answer format for Image_Recognition'}), 400
+    
+    elif puzzle_type == 'Bingo':
+        # For Bingo, check if the swapped positions would create a line of matching images
+        try:
+            # Get the expected correct swap options from ground truth
+            correct_swaps = ground_truth[puzzle_id].get('answer', [])
+            
+            # User answer should be a list of two indices to swap
+            user_swaps = user_answer
+            
+            # Check if the swaps match any of the possible correct swaps
+            # For this puzzle, there can be multiple correct solutions
+            is_correct = False
+            
+            # Go through each possible solution
+            for correct_swap in correct_swaps:
+                # Check if user's swap matches this solution (order doesn't matter)
+                if (set(user_swaps) == set(correct_swap) or 
+                    (set(user_swaps) == set(correct_swap[::-1]) if len(correct_swap) == 2 else False)):
+                    is_correct = True
+                    break
+                    
+            correct_answer_info = correct_swaps
+        except (ValueError, TypeError):
+            return jsonify({'error': 'Invalid answer format for Bingo'}), 400
+    
+    elif puzzle_type == 'Image_Matching':
+        # For Image Matching, check if the selected option index matches the correct one
+        try:
+            # Get the correct option index from ground truth
+            correct_index = ground_truth[puzzle_id].get('correct_option_index')
+            
+            # User answer should be the selected option index
+            user_index = int(user_answer)
+            
+            # Check if indices match
+            is_correct = user_index == correct_index
+            correct_answer_info = correct_index
+        except (ValueError, TypeError):
+            return jsonify({'error': 'Invalid answer format for Image_Matching'}), 400
+    
+    elif puzzle_type == 'Patch_Select':
+        # For Patch_Select, check if the selected patches match the correct ones
+        try:
+            # Get the correct patches from ground truth
+            correct_patches = ground_truth[puzzle_id].get('correct_patches', [])
+            
+            # User answer should be a list of selected patch indices
+            user_patches = user_answer
+            
+            # Check if the selected patches match exactly
+            is_correct = set(user_patches) == set(correct_patches)
+            correct_answer_info = correct_patches
+        except (ValueError, TypeError):
+            return jsonify({'error': 'Invalid answer format for Patch_Select'}), 400
+    
+    elif puzzle_type == 'Dart_Count':
+        # For Dart_Count, check if the selected option index matches the correct one
+        try:
+            # Get the correct option index from ground truth
+            correct_index = ground_truth[puzzle_id].get('correct_option_index')
+            
+            # User answer should be the selected option index
+            user_index = int(user_answer)
+            
+            # Check if indices match
+            is_correct = user_index == correct_index
+            correct_answer_info = correct_index
+        except (ValueError, TypeError):
+            return jsonify({'error': 'Invalid answer format for Dart_Count'}), 400
+    
+    elif puzzle_type == 'Place_Dot':
+        # For Place_Dot, check if the dot is placed at the end of the car's path
+        try:
+            # Get the target position from ground truth
+            target_position = ground_truth[puzzle_id].get('target_position')
+            tolerance = ground_truth[puzzle_id].get('tolerance', 15)  # Default tolerance of 15 pixels
+            
+            # Extract coordinates from user's answer (click position)
+            user_x, user_y = user_answer
+            target_x, target_y = target_position
+            
+            # Calculate distance from target position
+            distance = ((user_x - target_x) ** 2 + (user_y - target_y) ** 2) ** 0.5
+            
+            # Check if within tolerance
+            is_correct = distance <= tolerance
+            correct_answer_info = target_position
+        except (ValueError, TypeError, KeyError):
+            return jsonify({'error': 'Invalid answer format for Place_Dot'}), 400
+    
+    elif puzzle_type == 'Object_Match':
+        # For Object_Match, check if the selected option index matches the correct one
+        try:
+            # Get the correct option index from ground truth
+            correct_index = ground_truth[puzzle_id].get('correct_option_index')
+            
+            # User answer should be the selected option index
+            user_index = int(user_answer)
+            
+            # Check if indices match
+            is_correct = user_index == correct_index
+            correct_answer_info = correct_index
+        except (ValueError, TypeError):
+            return jsonify({'error': 'Invalid answer format for Object_Match'}), 400
+    
+    elif puzzle_type == 'Select_Animal':
+        # For Select_Animal, check if the selected patches match the correct ones
+        try:
+            # Get the correct patches from ground truth
+            correct_patches = ground_truth[puzzle_id].get('correct_patches', [])
+            
+            # User answer should be a list of selected patch indices
+            user_patches = user_answer
+            
+            # Check if the selected patches match exactly
+            is_correct = set(user_patches) == set(correct_patches)
+            correct_answer_info = correct_patches
+        except (ValueError, TypeError):
+            return jsonify({'error': 'Invalid answer format for Select_Animal'}), 400
+    
+    elif puzzle_type == 'Coordinates':
+        # For Coordinates, check if the selected option index matches the correct one
+        try:
+            # Get the correct option index from ground truth
+            correct_index = ground_truth[puzzle_id].get('correct_option_index')
+            
+            # User answer should be the selected option index
+            user_index = int(user_answer)
+            
+            # Check if indices match
+            is_correct = user_index == correct_index
+            correct_answer_info = correct_index
+        except (ValueError, TypeError):
+            return jsonify({'error': 'Invalid answer format for Coordinates'}), 400
+    
+    elif puzzle_type == 'Path_Finder':
+        # For Path_Finder, check if the selected option index matches the correct one
+        try:
+            # Get the correct option index from ground truth
+            correct_index = ground_truth[puzzle_id].get('correct_option')
+            
+            # User answer should be the selected option index
+            user_index = int(user_answer)
+            
+            # Check if indices match
+            is_correct = user_index == correct_index
+            correct_answer_info = correct_index
+        except (ValueError, TypeError):
+            return jsonify({'error': 'Invalid answer format for Path_Finder'}), 400
+    
+    elif puzzle_type == 'Connect_icon':
+        # For Connect_icon, check if the selected option index matches the correct one
+        try:
+            # Get the correct option index from ground truth
+            correct_index = ground_truth[puzzle_id].get('correct_option')
+            
+            # User answer should be the selected option index
+            user_index = int(user_answer)
+            
+            # Check if indices match
+            is_correct = user_index == correct_index
+            correct_answer_info = correct_index
+        except (ValueError, TypeError):
+            return jsonify({'error': 'Invalid answer format for Connect_icon'}), 400
+    
+    elif puzzle_type == 'Click_Order':
+        # For Click_Order, check if the clicked positions match the expected order
+        try:
+            # Get the correct coordinates and tolerance from ground truth
+            correct_positions = ground_truth[puzzle_id].get('answer', [])
+            tolerance = ground_truth[puzzle_id].get('tolerance', 20)  # Default tolerance of 20 pixels
+            
+            # User answer should be a list of clicked positions in order
+            user_positions = user_answer
+            
+            # Check if the number of clicks matches
+            if len(user_positions) != len(correct_positions):
+                is_correct = False
+            else:
+                # Check each position with tolerance
+                is_correct = True
+                for i, (user_pos, correct_pos) in enumerate(zip(user_positions, correct_positions)):
+                    user_x, user_y = user_pos
+                    correct_x, correct_y = correct_pos
+                    
+                    # Calculate distance
+                    distance = ((user_x - correct_x) ** 2 + (user_y - correct_y) ** 2) ** 0.5
+                    
+                    # If any position is outside tolerance, the answer is incorrect
+                    if distance > tolerance:
+                        is_correct = False
+                        break
+            
+            correct_answer_info = correct_positions
+        except (ValueError, TypeError, KeyError):
+            return jsonify({'error': 'Invalid answer format for Click_Order'}), 400
+    
+    elif puzzle_type == 'Hold_Button':
+        # For Hold_Button, check if the hold time is within the allowed range
+        try:
+            # Get the required hold time from ground truth
+            hold_time = ground_truth[puzzle_id].get("hold_time", 3)  # Default to 3 seconds if not specified
+            
+            # User answer should be a number representing the hold time in seconds
+            user_hold_time = float(user_answer)
+            
+            if elapsed_time > 8 and user_hold_time < hold_time:
+                is_correct = False
+                correct_answer_info = f"Timeout ({elapsed_time:.2f}s)"
+            else:
+                is_correct = hold_time >= user_hold_time >= 0
+                correct_answer_info = hold_time
+
+        except (ValueError, TypeError):
+            return jsonify({'error': 'Invalid answer format for Hold_Button'}), 400
+    
+    elif puzzle_type == 'Misleading_Click':
+        # For Misleading_Click, check if the click is NOT within the area to avoid
+        try:
+            # Get the area to avoid from ground truth
+            avoid_area = ground_truth[puzzle_id].get("avoid_area", {"x": 0, "y": 0, "width": 0, "height": 0})
+            
+            # Extract coordinates from user's answer (click position)
+            user_x, user_y = user_answer
+            
+            # Check if click is outside the area to avoid
+            area_x = avoid_area["x"]
+            area_y = avoid_area["y"]
+            area_width = avoid_area["width"]
+            area_height = avoid_area["height"]
+            
+            # Click should be outside the avoid area to be correct
+            is_inside_avoid_area = (
+                area_x <= user_x <= area_x + area_width and 
+                area_y <= user_y <= area_y + area_height
+            )
+            
+            # User is correct if they clicked outside the avoid area
+            is_correct = not is_inside_avoid_area
+            correct_answer_info = "Click outside the red bear area"
+        except (ValueError, TypeError, KeyError):
+            return jsonify({'error': 'Invalid answer format for Misleading_Click'}), 400
+    
+    elif puzzle_type == 'Pick_Area':
+        # For Pick_Area, check if click is within the correct area
+        try:
+            # Get the area boundaries from ground truth
+            correct_answer = ground_truth[puzzle_id].get('answer')
+            
+            # Extract coordinates
+            user_x, user_y = user_answer
+            
+            # Check if the correct area is defined
+            if isinstance(correct_answer, dict) and 'area' in correct_answer:
+                # Get area coordinates (top-left and bottom-right corners)
+                top_left, bottom_right = correct_answer['area']
+                min_x, min_y = top_left
+                max_x, max_y = bottom_right
+                
+                # Check if click is within the defined area
+                is_correct = (min_x <= user_x <= max_x) and (min_y <= user_y <= max_y)
+                
+                # Return the area type as part of the correct answer
+                area_type = correct_answer.get('type', 'largest region')
+                correct_answer_info = {
+                    'type': area_type,
+                    'area': correct_answer['area']
+                }
+            else:
+                # Fall back if area is not properly defined
+                is_correct = False
+                correct_answer_info = correct_answer
+        except (ValueError, TypeError, KeyError):
+            return jsonify({'error': 'Invalid answer format for Pick_Area'}), 400
+    
+    else:
+        # For other types, compare as strings (case insensitive)
+        correct_answer = ground_truth[puzzle_id].get('answer')
+        is_correct = str(user_answer).lower() == str(correct_answer).lower()
+        correct_answer_info = correct_answer
+    
+    # Get the appropriate answer field based on puzzle type
+    if puzzle_type == 'Dice_Count':
+        answer_key = 'sum'
+    elif puzzle_type == 'Patch_Select':
+        answer_key = 'correct_patches'
+    elif puzzle_type == 'Select_Animal':
+        answer_key = 'correct_patches'
+    elif puzzle_type == 'Coordinates':
+        answer_key = 'correct_option_index'
+    elif puzzle_type == 'Path_Finder':
+        answer_key = 'correct_option'
+    elif puzzle_type == 'Connect_icon':
+        answer_key = 'correct_option'
+    elif puzzle_type == 'Click_Order':
+        answer_key = 'answer'
+    elif puzzle_type == 'Hold_Button':
+        answer_key = 'hold_time'
+    elif puzzle_type == 'Misleading_Click':
+        answer_key = 'answer'
+    elif puzzle_type == 'Pick_Area':
+        answer_key = 'answer'
+    else:
+        answer_key = 'answer'
+    
+    return jsonify({
+        'correct': is_correct,
+        'user_answer': user_answer,
+        'correct_answer': ground_truth[puzzle_id].get(answer_key)
+    })
+
+@app.route('/api/benchmark_results', methods=['POST'])
+def record_benchmark():
+    data = request.json
+    
+    # Add timestamp if not provided
+    if 'timestamp' not in data:
+        from datetime import datetime
+        data['timestamp'] = datetime.now().isoformat()
+    
+    # In a real system, you would save this data to a database
+    # For this example, we'll just print it to the console
+    print(f"Benchmark results: {data}")
+    
+    # You could store this in a log file as well
+    with open('benchmark_results.json', 'a') as f:
+        f.write(json.dumps(data) + '\n')
+    
+    return jsonify({'status': 'success'})
+
+@app.route('/api/types', methods=['GET'])
+def get_types():
+    """Get available CAPTCHA types"""
+    return jsonify({
+        'types': get_captcha_types()
+    })
+
+if __name__ == '__main__':
+    # For local development
+    if os.environ.get('DEVELOPMENT'):
+        app.run(debug=True)
+    else:
+        # For production on Hugging Face Spaces
+        app.run(host='0.0.0.0', port=7860) 

static/css/style.css

@@ -0,0 +1,1074 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f5f5f5;
+}
+
+.container {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 30px;
+    color: #2c3e50;
+}
+
+.benchmark-stats {
+    display: flex;
+    justify-content: center;
+    gap: 30px;
+    margin-bottom: 30px;
+    padding: 15px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.benchmark-stats span {
+    font-weight: 600;
+}
+
+.puzzle-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.puzzle-image-wrapper {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.puzzle-image-container {
+    text-align: center;
+    position: relative;
+    display: inline-block;
+    margin: 0 auto 15px auto;
+    max-width: 100%;
+}
+
+#puzzle-image {
+    max-width: 100%;
+    max-height: 500px;
+    border-radius: 4px;
+    display: block;
+}
+
+#puzzle-image.clickable {
+    cursor: pointer;
+    border: 2px solid #3498db;
+}
+
+.puzzle-question {
+    text-align: center;
+}
+
+.puzzle-question h3 {
+    margin-bottom: 15px;
+    color: #2c3e50;
+    font-size: 18px;
+}
+
+.input-group {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: 15px;
+}
+
+#user-answer {
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 16px;
+    width: 200px;
+}
+
+#submit-answer {
+    padding: 10px 20px;
+    background-color: #2ecc71;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s;
+}
+
+#submit-answer:hover {
+    background-color: #27ae60;
+}
+
+#submit-answer:disabled {
+    background-color: #95a5a6;
+    cursor: not-allowed;
+}
+
+.result-message {
+    font-weight: 600;
+    margin-top: 10px;
+    min-height: 24px;
+}
+
+.result-message.correct {
+    color: #2ecc71;
+}
+
+.result-message.incorrect {
+    color: #e74c3c;
+}
+
+.result-message.instruction {
+    color: #3498db;
+}
+
+/* Click marker styles */
+.click-marker {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: rgba(231, 76, 60, 0.7);
+    border: 2px solid #e74c3c;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    /* Add animation */
+    animation: pulse 1s infinite alternate;
+    z-index: 10;
+}
+
+@keyframes pulse {
+    from {
+        transform: translate(-50%, -50%) scale(1);
+        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4);
+    }
+    to {
+        transform: translate(-50%, -50%) scale(1.2);
+        box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
+    }
+}
+
+@media (max-width: 768px) {
+    .benchmark-stats {
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+    }
+}
+
+/* Rotation CAPTCHA styles */
+.rotation-layout {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 15px;
+}
+
+.reference-image-container,
+.object-image-container {
+    flex: 0 0 45%;
+    text-align: center;
+    position: relative;
+}
+
+.reference-image-container::before,
+.object-image-container::before {
+    content: attr(data-label);
+    display: block;
+    font-size: 0.8rem;
+    color: #666;
+    margin-bottom: 5px;
+}
+
+.reference-image-container::before {
+    content: "Reference";
+}
+
+.object-image-container::before {
+    content: "Rotate to match";
+}
+
+#reference-image,
+#object-image {
+    max-width: 100%;
+    max-height: 200px;
+    object-fit: contain;
+}
+
+/* Rotation controls */
+.rotation-controls {
+    display: flex;
+    justify-content: center;
+    margin-top: 15px;
+    gap: 20px;
+}
+
+.rotate-left,
+.rotate-right {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #2980b9;
+    color: white;
+    font-size: 20px;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+}
+
+.rotate-left:hover,
+.rotate-right:hover {
+    background-color: #3498db;
+}
+
+.rotate-left:active,
+.rotate-right:active {
+    background-color: #1c638d;
+}
+
+/* Submit button for rotation puzzles */
+.rotation-submit {
+    text-align: center;
+    margin-top: 15px;
+}
+
+.submit-rotation {
+    background-color: #27ae60;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 8px 16px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.submit-rotation:hover {
+    background-color: #2ecc71;
+}
+
+.submit-rotation:active {
+    background-color: #219653;
+}
+
+/* Ensure the puzzle container properly displays rotation puzzles */
+.puzzle-image-wrapper {
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .rotation-layout {
+        flex-direction: column;
+        gap: 20px;
+    }
+    
+    .reference-image-container,
+    .object-image-container {
+        flex: 0 0 100%;
+    }
+}
+
+/* Slider Puzzle Styles */
+.background-container {
+    position: relative;
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.slider-component {
+    position: absolute;
+    cursor: move;
+    user-select: none;
+    touch-action: none;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    transition: box-shadow 0.2s ease;
+}
+
+.slider-component:hover {
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
+}
+
+.slider-component:active {
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
+}
+
+.slider-submit {
+    margin-top: 15px;
+    text-align: center;
+}
+
+.submit-slider {
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    padding: 8px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.3s ease;
+}
+
+.submit-slider:hover {
+    background-color: #45a049;
+}
+
+.submit-slider:disabled {
+    background-color: #cccccc;
+    cursor: not-allowed;
+}
+
+/* Hover instructions for the slider */
+.background-container::before {
+    content: "Drag the puzzle piece to the correct position";
+    position: absolute;
+    top: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 5px 10px;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    border-radius: 4px;
+    font-size: 12px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+    white-space: nowrap;
+}
+
+.background-container:hover::before {
+    opacity: 1;
+}
+
+/* Add responsive styles for smaller screens */
+@media (max-width: 600px) {
+    .background-container {
+        max-width: 100%;
+    }
+    
+    .slider-component img {
+        max-width: 100%;
+    }
+}
+
+/* Target area marker for slider puzzle debug */
+.target-area {
+    position: absolute;
+    border-radius: 50%;
+    border: 2px dashed #00cc00;
+    background-color: rgba(0, 204, 0, 0.2);
+    pointer-events: none;
+    z-index: 5;
+    animation: pulse-green 1.5s infinite alternate;
+}
+
+@keyframes pulse-green {
+    from {
+        box-shadow: 0 0 0 0 rgba(0, 204, 0, 0.4);
+        background-color: rgba(0, 204, 0, 0.2);
+    }
+    to {
+        box-shadow: 0 0 0 10px rgba(0, 204, 0, 0);
+        background-color: rgba(0, 204, 0, 0.3);
+    }
+}
+
+/* Debugging coordinates label */
+.coords-label {
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 2px 5px;
+    font-size: 10px;
+    border-radius: 3px;
+    white-space: nowrap;
+    z-index: 20;
+}
+
+/* Unusual Detection Grid Styles */
+.unusual-detection-grid {
+    display: grid;
+    max-width: 600px;
+    margin: 0 auto;
+    background-color: #fff;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.grid-cell {
+    position: relative;
+    cursor: pointer;
+    border: 2px solid #333;
+    overflow: hidden;
+    transition: transform 0.2s ease;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 80px;
+}
+
+.grid-cell:hover {
+    transform: scale(0.98);
+}
+
+.cell-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.cell-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 120, 255, 0.5);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+    z-index: 2;
+}
+
+.checkmark {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-size: 32px;
+    font-weight: bold;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+    z-index: 3;
+    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
+}
+
+.submit-unusual {
+    margin-top: 15px;
+    padding: 10px 20px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.submit-unusual:hover {
+    background-color: #45a049;
+}
+
+.submit-unusual:disabled {
+    background-color: #cccccc;
+    cursor: not-allowed;
+}
+
+/* End Unusual Detection Styles */
+
+/* Image Matching Styles */
+.matching-layout {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 15px;
+}
+
+.option-image-container {
+    flex: 0 0 45%;
+    text-align: center;
+    position: relative;
+}
+
+.option-image-container::before {
+    content: "Match This";
+}
+
+#option-image {
+    max-width: 100%;
+    max-height: 200px;
+    object-fit: contain;
+}
+
+/* Navigation controls */
+.image-matching-controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 15px;
+    gap: 20px;
+}
+
+.navigate-left,
+.navigate-right {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #2980b9;
+    color: white;
+    font-size: 20px;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+}
+
+.navigate-left:hover,
+.navigate-right:hover {
+    background-color: #3498db;
+}
+
+.navigate-left:active,
+.navigate-right:active {
+    background-color: #1c638d;
+}
+
+/* Indicator dots */
+.indicator-dots {
+    display: flex;
+    gap: 5px;
+}
+
+.dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: #bdc3c7;
+    transition: background-color 0.2s;
+}
+
+.dot.active {
+    background-color: #2980b9;
+}
+
+/* Submit button for image matching */
+.image-matching-submit {
+    text-align: center;
+    margin-top: 15px;
+}
+
+.submit-image-matching {
+    background-color: #27ae60;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 8px 16px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.submit-image-matching:hover {
+    background-color: #2ecc71;
+}
+
+.submit-image-matching:active {
+    background-color: #219653;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .matching-layout {
+        flex-direction: column;
+        gap: 20px;
+    }
+    
+    .reference-image-container,
+    .option-image-container {
+        flex: 0 0 100%;
+    }
+}
+
+/* Add styles for Patch Select grid */
+.patch-select-grid {
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+    border: 2px solid #ccc;
+    overflow: hidden;
+    position: relative;
+    height: 450px; /* Set a fixed height */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.patch-select-image-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+}
+
+.patch-select-image-container img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+}
+
+.patch-select-cell {
+    position: relative;
+    z-index: 1;
+    min-height: 80px; /* Increase minimum height */
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 2px solid rgba(255, 255, 255, 0.5);
+}
+
+.patch-select-cell:hover {
+    background-color: rgba(0, 123, 255, 0.2);
+    border: 3px solid rgba(0, 123, 255, 0.7);
+}
+
+.patch-select-cell.selected {
+    background-color: rgba(0, 123, 255, 0.3);
+    border: 3px solid rgba(0, 123, 255, 0.8);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
+/* Object Match Styles */
+.object-match-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 20px;
+}
+
+.object-match-horizontal-layout {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 30px;
+    width: 100%;
+}
+
+.object-match-reference,
+.object-match-options {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    width: 300px;
+    position: relative;
+}
+
+.object-match-reference-img,
+.object-match-option-img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    max-height: 200px;
+    object-fit: contain;
+}
+
+.object-match-caption {
+    font-weight: bold;
+    font-size: 16px;
+    margin-top: 5px;
+}
+
+.object-match-controls {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 10px;
+}
+
+.object-match-arrow {
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    font-size: 18px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.object-match-arrow:hover {
+    background-color: #45a049;
+}
+
+.object-match-indicators {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 15px;
+}
+
+.object-match-dot {
+    width: 10px;
+    height: 10px;
+    background-color: #ddd;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.object-match-dot.active {
+    background-color: #4CAF50;
+}
+
+.object-match-submit {
+    padding: 10px 20px;
+    background-color: #4CAF50;
+    border: none;
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    margin-top: 15px;
+}
+
+.object-match-submit:hover {
+    background-color: #45a049;
+}
+
+/* Responsive adjustments for Object Match */
+@media (max-width: 768px) {
+    .object-match-horizontal-layout {
+        flex-direction: column;
+        gap: 20px;
+    }
+    
+    .object-match-reference,
+    .object-match-options {
+        width: 100%;
+    }
+}
+
+/* Dart Count Styles */
+.dart-count-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 20px;
+}
+
+.dart-count-horizontal-layout {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 30px;
+    width: 100%;
+}
+
+.dart-count-reference,
+.dart-count-options {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    width: 300px;
+    position: relative;
+}
+
+.dart-count-reference-img,
+.dart-count-option-img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    max-height: 200px;
+    object-fit: contain;
+}
+
+.dart-count-caption {
+    font-weight: bold;
+    font-size: 16px;
+    margin-top: 5px;
+}
+
+.dart-count-controls {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 10px;
+}
+
+.dart-count-arrow {
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    font-size: 18px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.dart-count-arrow:hover {
+    background-color: #45a049;
+}
+
+.dart-count-indicators {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 15px;
+}
+
+.dart-count-dot {
+    width: 10px;
+    height: 10px;
+    background-color: #ddd;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.dart-count-dot.active {
+    background-color: #4CAF50;
+}
+
+.dart-count-submit {
+    padding: 10px 20px;
+    background-color: #4CAF50;
+    border: none;
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    margin-top: 15px;
+}
+
+.dart-count-submit:hover {
+    background-color: #45a049;
+}
+
+/* Responsive adjustments for Dart Count */
+@media (max-width: 768px) {
+    .dart-count-horizontal-layout {
+        flex-direction: column;
+        gap: 20px;
+    }
+    
+    .dart-count-reference,
+    .dart-count-options {
+        width: 100%;
+    }
+}
+
+/* Difficulty stars styling */
+.difficulty-stars {
+    display: inline-block;
+    margin-left: 10px;
+    margin-bottom: 5px;
+}
+
+.difficulty-stars .star {
+    color: #FFD700; /* Yellow color for stars */
+    font-size: 24px; /* Increased size */
+    margin-right: 5px; /* Increased spacing */
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Added shadow for better visibility */
+}
+
+.puzzle-difficulty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 5px;
+    margin-bottom: 15px;
+    font-size: 16px; /* Increased text size */
+    font-weight: bold; /* Made text bold */
+    color: #333;
+    background-color: #f8f8f8; /* Light background */
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    max-width: 300px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.puzzle-difficulty span {
+    margin-right: 5px;
+}
+
+/* === Special Effects for Answer Results === */
+
+/* Fireworks container */
+.fireworks-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
+  overflow: hidden;
+}
+
+/* Individual firework particles */
+.firework {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  animation: explode 1.5s forwards;
+  opacity: 0;
+  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.7);
+}
+
+@keyframes explode {
+  0% {
+    transform: translateY(0) scale(0.1);
+    opacity: 0;
+  }
+  25% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(-250px) scale(1.2);
+    opacity: 0;
+  }
+}
+
+/* Happy face animation */
+.happy-face-container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  pointer-events: none;
+  font-size: 180px;
+  animation: happy-face-animation 2.5s forwards;
+  opacity: 0;
+  text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
+}
+
+@keyframes happy-face-animation {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.1) rotate(-20deg);
+  }
+  20% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1.3) rotate(10deg);
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.2) rotate(-5deg);
+  }
+  80% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1.3) rotate(0deg);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+}
+
+/* Sad face animation */
+.sad-face-container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  pointer-events: none;
+  font-size: 150px;
+  animation: sad-face-animation 2s forwards;
+  opacity: 0;
+}
+
+@keyframes sad-face-animation {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.1);
+  }
+  50% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1.2);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+}
+
+/* Bounce animation for correct message */
+.result-message.correct {
+  color: #2ecc71;
+  animation: bounce 0.5s;
+  font-size: 1.5em;
+  text-shadow: 0 0 5px rgba(46, 204, 113, 0.5);
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-20px);
+  }
+  60% {
+    transform: translateY(-10px);
+  }
+}
+
+/* Shake animation for incorrect message */
+.result-message.incorrect {
+  color: #e74c3c;
+  animation: shake 0.5s;
+  font-size: 1.5em;
+  text-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
+}
+
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-5px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(5px);
+  }
+}

templates/index.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CAPTCHA Puzzle Benchmark</title>
+    <link rel="stylesheet" href="/static/css/style.css">
+    <style>
+        /* Additional styling to ensure input field visibility */
+        .input-group {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 15px 0;
+            width: 100%;
+        }
+        #user-answer {
+            flex: 1;
+            padding: 10px;
+            border: 2px solid #ccc;
+            border-radius: 4px;
+            margin-right: 10px;
+            font-size: 16px;
+        }
+        #submit-answer {
+            padding: 10px 20px;
+            background-color: #4CAF50;
+            border: none;
+            color: white;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background-color 0.3s ease;
+        }
+        #submit-answer:hover {
+            background-color: #45a049;
+        }
+        #submit-answer:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Open CaptchaWorld</h1>
+        <div id="debug-indicator" style="color: #ff5722; margin-top: -15px; margin-bottom: 10px; font-weight: bold; display: none;">
+            Debugging Mode: <span id="debug-type-display"></span>
+        </div>
+        
+        <div class="benchmark-stats">
+            <span>Total: <span id="total-count">0</span></span>
+            <span>Correct: <span id="correct-count">0</span></span>
+            <span>Accuracy: <span id="accuracy">0%</span></span>
+        </div>
+        <div class="puzzle-difficulty" style="margin-bottom: 15px;">
+            <span>Reasoning Depth:</span>
+            <div class="difficulty-stars" id="difficulty-stars"></div>
+        </div>
+        <div class="puzzle-container" id="puzzle-container">
+            <div class="puzzle-image-wrapper">
+                <div class="puzzle-image-container">
+                    <img id="puzzle-image" src="" alt="CAPTCHA Puzzle">
+                </div>
+            </div>
+            <div class="puzzle-question">
+                <h3 id="puzzle-prompt">Loading puzzle...</h3>
+                <div class="input-group">
+                    <input type="text" id="user-answer" placeholder="Your answer">
+                    <button id="submit-answer">Submit</button>
+                </div>
+                <div id="result-message" class="result-message"></div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Inline script for immediate star display -->
+    <script>
+        // Display placeholder stars immediately before main script loads
+        window.onload = function() {
+            const starsContainer = document.getElementById('difficulty-stars');
+            if (starsContainer) {
+                starsContainer.innerHTML = '';
+                for (let i = 0; i < 5; i++) {
+                    const star = document.createElement('span');
+                    star.className = 'star';
+                    star.innerHTML = i < 3 ? '★' : '☆'; // Default to 3 stars
+                    starsContainer.appendChild(star);
+                }
+            }
+        };
+    </script>
+    
+    <script src="/static/js/script.js"></script>
+</body>
+</html>