Initialize project with main application and configuration files

.gitignore

@@ -0,0 +1,51 @@
+# Data directory
+data/
+*.json
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Virtual environments
+venv/
+ENV/
+env/
+.env
+.venv
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+
+# Images (except reference)
+*.png
+*.jpg
+*.jpeg
+!reference_sticker.png

README.md

@@ -1,14 +1,91 @@
 ---
-title: Tchoupinoux Inviders
-emoji: 🔥
-colorFrom: yellow
-colorTo: indigo
+title: Tchoupinoux Inviders - Sticker Hunt
+emoji: 🎯
+colorFrom: black
+colorTo: green
 sdk: gradio
 sdk_version: 5.47.2
 app_file: app.py
 pinned: false
-license: mit
-short_description: 🎯 Gradio app déployée sur Hugging Face pour chasser des sti
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Tchoupinoux Inviders - Sticker Hunt
+
+A gamified sticker collection application where users hunt for B15 Tchoupinoux stickers around office locations.
+
+## Features
+
+- **User Authentication**: Register and login to track your personal collection
+- **Camera Integration**: Capture stickers directly from your device
+- **Location-Based Tracking**: Select from predefined locations
+- **Points System**:
+  - 50 points for stickers in Tour Franklin
+  - 100 points for stickers elsewhere
+- **Collection Gallery**: View all your found stickers
+- **Leaderboard**: Compete with other collectors
+
+## How to Use
+
+1. **Register/Login**: Create an account or login with existing credentials
+2. **Hunt**: Use your camera to capture stickers you find
+3. **Select Location**: Choose where you found the sticker
+4. **Submit**: The app will verify the sticker and add it to your collection
+5. **Collect**: Track your progress in the Collection tab
+
+## Tech Stack
+
+- **Framework**: Gradio
+- **Storage**: JSON-based file system
+- **Authentication**: SHA-256 password hashing
+- **Image Processing**: PIL + NumPy
+
+## Deployment
+
+This app is designed to run on Hugging Face Spaces.
+
+### Setup Instructions
+
+1. Create a new Space on Hugging Face
+2. Choose "Gradio" as the SDK
+3. Upload `app.py` and `requirements.txt`
+4. The app will automatically start
+
+### File Structure
+
+```
+.
+├── app.py                  # Main application
+├── requirements.txt        # Python dependencies
+└── data/                   # Auto-created data directory
+    ├── users.json          # User accounts
+    ├── collections.json    # User collections
+    ├── stickers.json       # Sticker configurations
+    └── images/             # Captured sticker images
+```
+
+## Configuration
+
+Edit the stickers configuration in the code to add new locations:
+
+```python
+stickers = {
+    "Location Name": {
+        "count": 2,              # Number of stickers at this location
+        "points": 50,            # Points per sticker
+        "found_indices": []
+    }
+}
+```
+
+## Note on Sticker Verification
+
+The current implementation uses a basic image verification system. For production use, consider implementing:
+
+- CLIP-based similarity matching
+- Custom trained computer vision model
+- Template matching algorithms
+- OCR for text detection
+
+## License
+
+MIT License

app.py

@@ -0,0 +1,793 @@
+"""
+B15 Tchoupinoux Sticker Hunt Application
+A Gradio-based app for collecting stickers around office locations
+"""
+
+import gradio as gr
+import json
+import os
+from datetime import datetime
+from pathlib import Path
+import hashlib
+from PIL import Image
+import numpy as np
+
+# ============================================================================
+# CONFIGURATION
+# ============================================================================
+
+DATA_DIR = Path("data")
+DATA_DIR.mkdir(exist_ok=True)
+
+USERS_FILE = DATA_DIR / "users.json"
+COLLECTIONS_FILE = DATA_DIR / "collections.json"
+STICKERS_FILE = DATA_DIR / "stickers.json"
+
+# Color scheme
+PRIMARY_COLOR = "#000000"  # Black
+SECONDARY_COLOR = "#FFFFFF"  # White
+ACCENT_COLOR = "#7CFC00"  # Light green
+
+# Points system
+POINTS_FRANKLIN = 50
+POINTS_ELSEWHERE = 100
+
+
+# ============================================================================
+# DATA STRUCTURES
+# ============================================================================
+
+
+def init_data_files():
+    """Initialize data files if they don't exist"""
+
+    # Initialize users file
+    if not USERS_FILE.exists():
+        with open(USERS_FILE, "w") as f:
+            json.dump({}, f)
+
+    # Initialize stickers configuration
+    if not STICKERS_FILE.exists():
+        stickers = {
+            "Tour Franklin - 22e étage - B15": {
+                "count": 1,
+                "points": POINTS_FRANKLIN,
+                "found_indices": [],
+            },
+            "Tour Franklin - 18e étage - B15": {
+                "count": 1,
+                "points": POINTS_FRANKLIN,
+                "found_indices": [],
+            },
+            "Tour Franklin - 17e étage - B15": {
+                "count": 1,
+                "points": POINTS_FRANKLIN,
+                "found_indices": [],
+            },
+            "Tour Franklin - 16e étage - B15": {
+                "count": 2,
+                "points": POINTS_FRANKLIN,
+                "found_indices": [],
+            },
+            "Tour Franklin - 15e étage - B15": {
+                "count": 1,
+                "points": POINTS_FRANKLIN,
+                "found_indices": [],
+            },
+            "Tour Franklin - RDC - Entrée": {
+                "count": 1,
+                "points": POINTS_FRANKLIN,
+                "found_indices": [],
+            },
+            "Le Forum": {
+                "count": 1,
+                "points": POINTS_ELSEWHERE,
+                "found_indices": [],
+            },
+            "Le Philiosophe ": {
+                "count": 1,
+                "points": POINTS_ELSEWHERE,
+                "found_indices": [],
+            },
+            "Autre location": {
+                "count": 1,
+                "points": POINTS_ELSEWHERE,
+                "found_indices": [],
+            },
+        }
+        with open(STICKERS_FILE, "w") as f:
+            json.dump(stickers, f, indent=2)
+
+    # Initialize collections file
+    if not COLLECTIONS_FILE.exists():
+        with open(COLLECTIONS_FILE, "w") as f:
+            json.dump({}, f)
+
+
+def load_json(filepath):
+    """Load JSON data from file"""
+    with open(filepath, "r") as f:
+        return json.load(f)
+
+
+def save_json(filepath, data):
+    """Save JSON data to file"""
+    with open(filepath, "w") as f:
+        json.dump(data, f, indent=2)
+
+
+# ============================================================================
+# USER MANAGEMENT
+# ============================================================================
+
+
+def hash_password(password):
+    """Hash password using SHA-256"""
+    return hashlib.sha256(password.encode()).hexdigest()
+
+
+def register_user(username, password):
+    """Register a new user"""
+    if not username or not password:
+        return False, "Username and password are required"
+
+    users = load_json(USERS_FILE)
+
+    if username in users:
+        return False, "Username already exists"
+
+    users[username] = {
+        "password": hash_password(password),
+        "points": 0,
+        "created_at": datetime.now().isoformat(),
+    }
+
+    save_json(USERS_FILE, users)
+
+    # Initialize user collection
+    collections = load_json(COLLECTIONS_FILE)
+    collections[username] = []
+    save_json(COLLECTIONS_FILE, collections)
+
+    return True, "Registration successful"
+
+
+def authenticate_user(username, password):
+    """Authenticate user credentials"""
+    if not username or not password:
+        return False, "Username and password are required"
+
+    users = load_json(USERS_FILE)
+
+    if username not in users:
+        return False, "Invalid username or password"
+
+    if users[username]["password"] != hash_password(password):
+        return False, "Invalid username or password"
+
+    return True, f"Welcome back, {username}"
+
+
+def get_user_points(username):
+    """Get user's current points"""
+    users = load_json(USERS_FILE)
+    return users.get(username, {}).get("points", 0)
+
+
+def update_user_points(username, points_to_add):
+    """Update user's points"""
+    users = load_json(USERS_FILE)
+    if username in users:
+        users[username]["points"] += points_to_add
+        save_json(USERS_FILE, users)
+
+
+# ============================================================================
+# STICKER VERIFICATION
+# ============================================================================
+
+
+def verify_sticker_in_image(image):
+    """
+    Verify if the image contains a B15 Tchoupinoux sticker
+
+    This is a simplified version. In production, you would use:
+    - CLIP model for image similarity
+    - Custom trained model
+    - Template matching
+
+    For now, we'll use basic image properties as a placeholder
+    """
+    if image is None:
+        return False, 0.0
+
+    # Convert to numpy array if needed
+    if isinstance(image, Image.Image):
+        img_array = np.array(image)
+    else:
+        img_array = image
+
+    # Basic checks - in production, replace with actual ML model
+    # Check if image has sufficient contrast (black and white)
+    gray = np.mean(img_array, axis=2) if len(img_array.shape) == 3 else img_array
+    contrast = np.std(gray)
+
+    # Check if image has some dark areas (black from sticker)
+    dark_pixels = np.sum(gray < 100) / gray.size
+
+    # Simple heuristic - replace with actual model
+    confidence = min(1.0, (contrast / 100) * (dark_pixels * 5))
+
+    # Threshold for acceptance
+    is_valid = confidence > 0.3
+
+    return is_valid, confidence
+
+
+# ============================================================================
+# COLLECTION MANAGEMENT
+# ============================================================================
+
+
+def add_to_collection(username, location, image_path):
+    """Add a found sticker to user's collection"""
+    collections = load_json(COLLECTIONS_FILE)
+    stickers = load_json(STICKERS_FILE)
+
+    if username not in collections:
+        collections[username] = []
+
+    # Check if location is valid
+    if location not in stickers:
+        return False, "Invalid location", 0
+
+    # Check if user already found all stickers at this location
+    user_found_at_location = sum(
+        1 for item in collections[username] if item["location"] == location
+    )
+    if user_found_at_location >= stickers[location]["count"]:
+        return False, f"You already found all stickers at {location}", 0
+
+    # Add to collection
+    collection_item = {
+        "location": location,
+        "timestamp": datetime.now().isoformat(),
+        "image": image_path,
+    }
+
+    collections[username].append(collection_item)
+    save_json(COLLECTIONS_FILE, collections)
+
+    # Update points
+    points = stickers[location]["points"]
+    update_user_points(username, points)
+
+    return True, f"Sticker found! +{points} points", points
+
+
+def get_user_collection(username):
+    """Get user's collection"""
+    collections = load_json(COLLECTIONS_FILE)
+    return collections.get(username, [])
+
+
+def get_leaderboard():
+    """Get top users by points"""
+    users = load_json(USERS_FILE)
+    leaderboard = [(username, data["points"]) for username, data in users.items()]
+    leaderboard.sort(key=lambda x: x[1], reverse=True)
+    return leaderboard[:10]
+
+
+# ============================================================================
+# GRADIO INTERFACE
+# ============================================================================
+
+# Global state for current user
+current_user = {"username": None}
+
+
+def login_interface(username, password):
+    """Handle login"""
+    success, message = authenticate_user(username, password)
+    if success:
+        current_user["username"] = username
+        points = get_user_points(username)
+        user_html = f"""
+        <div style="background: {SECONDARY_COLOR}; 
+                    border: 3px solid {PRIMARY_COLOR}; 
+                    box-shadow: inset 0 0 0 1px {ACCENT_COLOR}, 0 0 20px rgba(124, 252, 0, 0.2);
+                    border-radius: 8px; 
+                    padding: 15px; text-align: center; margin-bottom: 20px;">
+            <h2 style="color: {PRIMARY_COLOR}; margin: 0; font-size: 1.5em;">
+                👤 {username} • <span style="color: {ACCENT_COLOR}; font-weight: bold;">⚡ {points} pts</span>
+            </h2>
+        </div>
+        """
+        return (
+            gr.update(visible=False),  # Hide login
+            gr.update(visible=True),  # Show main app
+            user_html,
+            message,
+        )
+    return (gr.update(visible=True), gr.update(visible=False), "", message)
+
+
+def register_interface(username, password):
+    """Handle registration"""
+    success, message = register_user(username, password)
+    return message
+
+
+def capture_sticker(image, location):
+    """Handle sticker capture and verification"""
+    if current_user["username"] is None:
+        return "Please login first", None, ""
+
+    if image is None:
+        return "Please take a photo first", None, ""
+
+    if not location:
+        return "Please select a location", None, ""
+
+    # Verify sticker in image
+    is_valid, confidence = verify_sticker_in_image(image)
+
+    if not is_valid:
+        return (
+            f"No valid sticker detected (confidence: {confidence:.2%}). Please try again.",
+            None,
+            "",
+        )
+
+    # Save image
+    img_dir = DATA_DIR / "images" / current_user["username"]
+    img_dir.mkdir(parents=True, exist_ok=True)
+    img_path = img_dir / f"{datetime.now().strftime('%Y%m%d_%H%M%S')}.png"
+    Image.fromarray(image).save(img_path)
+
+    # Add to collection
+    success, message, points = add_to_collection(
+        current_user["username"], location, str(img_path)
+    )
+
+    if success:
+        total_points = get_user_points(current_user["username"])
+        user_html = f"""
+        <div style="background: {SECONDARY_COLOR}; 
+                    border: 3px solid {PRIMARY_COLOR}; 
+                    box-shadow: inset 0 0 0 1px {ACCENT_COLOR}, 0 0 20px rgba(124, 252, 0, 0.2);
+                    border-radius: 8px; 
+                    padding: 15px; text-align: center; margin-bottom: 20px;">
+            <h2 style="color: {PRIMARY_COLOR}; margin: 0; font-size: 1.5em;">
+                👤 {current_user['username']} • <span style="color: {ACCENT_COLOR}; font-weight: bold;">⚡ {total_points} pts</span>
+            </h2>
+        </div>
+        """
+        return (message, image, user_html)
+    else:
+        user_html = f"""
+        <div style="background: {SECONDARY_COLOR}; 
+                    border: 3px solid {PRIMARY_COLOR}; 
+                    box-shadow: inset 0 0 0 1px {ACCENT_COLOR}, 0 0 20px rgba(124, 252, 0, 0.2);
+                    border-radius: 8px; 
+                    padding: 15px; text-align: center; margin-bottom: 20px;">
+            <h2 style="color: {PRIMARY_COLOR}; margin: 0; font-size: 1.5em;">
+                👤 {current_user['username']} • <span style="color: {ACCENT_COLOR}; font-weight: bold;">⚡ {get_user_points(current_user['username'])} pts</span>
+            </h2>
+        </div>
+        """
+        return message, None, user_html
+
+
+def load_collection():
+    """Load user's collection for display"""
+    if current_user["username"] is None:
+        return []
+
+    collection = get_user_collection(current_user["username"])
+
+    # Create gallery items
+    gallery_items = []
+    for item in collection:
+        if os.path.exists(item["image"]):
+            gallery_items.append(
+                (item["image"], f"{item['location']}\n{item['timestamp'][:10]}")
+            )
+
+    return gallery_items
+
+
+def load_leaderboard():
+    """Load leaderboard"""
+    leaderboard = get_leaderboard()
+
+    if not leaderboard:
+        return "<p style='text-align: center; color: #7CFC00; font-weight: bold;'>No users yet</p>"
+
+    output = ""
+    for idx, (username, points) in enumerate(leaderboard, 1):
+        medal = (
+            "🥇" if idx == 1 else "🥈" if idx == 2 else "🥉" if idx == 3 else f"#{idx}"
+        )
+
+        # Different styling for top 3
+        if idx <= 3:
+            bg_color = (
+                "rgba(124, 252, 0, 0.2)"
+                if idx == 1
+                else "rgba(124, 252, 0, 0.15)" if idx == 2 else "rgba(124, 252, 0, 0.1)"
+            )
+            border_color = (
+                "#7CFC00" if idx == 1 else "#6FE000" if idx == 2 else "#5DD000"
+            )
+            border_width = "4px" if idx == 1 else "3px"
+            output += f"""
+            <div style="background: {bg_color}; border: {border_width} solid {border_color}; 
+                        padding: 15px; margin: 10px 0; border-radius: 8px;
+                        box-shadow: 0 0 15px rgba(124, 252, 0, 0.3);">
+                <span style="font-size: 1.5em;">{medal}</span>
+                <strong style="color: #000; font-size: 1.2em; margin-left: 10px;">{username}</strong>
+                <span style="float: right; color: {border_color}; font-weight: bold; font-size: 1.2em;">⚡ {points} pts</span>
+            </div>
+            """
+        else:
+            output += f"""
+            <div style="background: #f5f5f5; border: 2px solid #333; 
+                        padding: 12px; margin: 8px 0; border-radius: 5px;">
+                <span style="color: #666;">{medal}</span>
+                <strong style="color: #000; margin-left: 10px;">{username}</strong>
+                <span style="float: right; color: #7CFC00; font-weight: bold;">{points} pts</span>
+            </div>
+            """
+
+    return output
+
+
+def logout():
+    """Handle logout"""
+    current_user["username"] = None
+    return (
+        gr.update(visible=True),  # Show login
+        gr.update(visible=False),  # Hide main app
+        "",
+        "Logged out successfully",
+    )
+
+
+# ============================================================================
+# BUILD INTERFACE
+# ============================================================================
+
+
+def build_app():
+    """Build the Gradio application"""
+    init_data_files()
+
+    # Get available locations
+    stickers = load_json(STICKERS_FILE)
+    locations = list(stickers.keys())
+
+    # Custom CSS
+    css = f"""
+    .gradio-container {{
+        font-family: 'Arial', sans-serif;
+        background-color: {SECONDARY_COLOR} !important;
+    }}
+    .primary-btn {{
+        background-color: {PRIMARY_COLOR} !important;
+        color: {SECONDARY_COLOR} !important;
+        border: 3px solid {ACCENT_COLOR} !important;
+        font-weight: bold !important;
+        text-transform: uppercase !important;
+        letter-spacing: 1px !important;
+        transition: all 0.3s ease !important;
+    }}
+    .primary-btn:hover {{
+        background-color: {ACCENT_COLOR} !important;
+        color: {PRIMARY_COLOR} !important;
+        transform: scale(1.05) !important;
+        box-shadow: 0 0 20px {ACCENT_COLOR} !important;
+    }}
+    .header-box {{
+        background-color: {PRIMARY_COLOR} !important;
+        padding: 20px !important;
+        border-radius: 8px !important;
+        border: 4px solid {ACCENT_COLOR} !important;
+        margin-bottom: 20px !important;
+        box-shadow: 0 0 30px rgba(124, 252, 0, 0.3) !important;
+    }}
+    .header-box h1, .header-box h3 {{
+        color: {SECONDARY_COLOR} !important;
+        margin: 0 !important;
+    }}
+    .tabs {{
+        border-bottom: 3px solid {ACCENT_COLOR} !important;
+    }}
+    .tab-nav button.selected {{
+        border-bottom: 4px solid {ACCENT_COLOR} !important;
+        color: {PRIMARY_COLOR} !important;
+        font-weight: bold !important;
+        background-color: rgba(124, 252, 0, 0.1) !important;
+    }}
+    .tab-nav button:hover {{
+        color: {ACCENT_COLOR} !important;
+        background-color: rgba(124, 252, 0, 0.05) !important;
+    }}
+    .gr-button-secondary {{
+        background-color: {SECONDARY_COLOR} !important;
+        border: 3px solid {PRIMARY_COLOR} !important;
+        color: {PRIMARY_COLOR} !important;
+        font-weight: bold !important;
+    }}
+    .gr-button-secondary:hover {{
+        background-color: {PRIMARY_COLOR} !important;
+        color: {SECONDARY_COLOR} !important;
+        border-color: {ACCENT_COLOR} !important;
+        box-shadow: 0 0 15px rgba(124, 252, 0, 0.3) !important;
+    }}
+    .gr-form {{
+        border: 2px solid {PRIMARY_COLOR} !important;
+        background-color: {SECONDARY_COLOR} !important;
+    }}
+    .gr-input, .gr-dropdown {{
+        border: 2px solid {PRIMARY_COLOR} !important;
+        background-color: {SECONDARY_COLOR} !important;
+        color: {PRIMARY_COLOR} !important;
+    }}
+    .gr-input:focus, .gr-dropdown:focus {{
+        border-color: {ACCENT_COLOR} !important;
+        box-shadow: 0 0 10px rgba(124, 252, 0, 0.3) !important;
+    }}
+    .user-info-box {{
+        background: {SECONDARY_COLOR} !important;
+        border: 3px solid {PRIMARY_COLOR} !important;
+        border-radius: 8px !important;
+        padding: 15px !important;
+        text-align: center !important;
+        box-shadow: 0 0 20px rgba(124, 252, 0, 0.2), inset 0 0 0 1px {ACCENT_COLOR} !important;
+    }}
+    .user-info-box h2 {{
+        color: {PRIMARY_COLOR} !important;
+        margin: 0 !important;
+        font-size: 1.5em !important;
+    }}
+    .status-success {{
+        color: {ACCENT_COLOR} !important;
+        font-weight: bold !important;
+    }}
+    .gallery-item {{
+        border: 2px solid {PRIMARY_COLOR} !important;
+        transition: all 0.3s ease !important;
+    }}
+    .gallery-item:hover {{
+        border-color: {ACCENT_COLOR} !important;
+        box-shadow: 0 0 15px rgba(124, 252, 0, 0.4) !important;
+        transform: scale(1.05) !important;
+    }}
+    .section-header {{
+        background: linear-gradient(90deg, transparent, rgba(124, 252, 0, 0.15), transparent) !important;
+        border-left: 4px solid {ACCENT_COLOR} !important;
+        border-right: 4px solid {ACCENT_COLOR} !important;
+        padding: 15px !important;
+        margin-bottom: 20px !important;
+    }}
+    """
+
+    with gr.Blocks(css=css, theme=gr.themes.Monochrome()) as app:
+
+        # Header
+        with gr.Group():
+            gr.HTML(
+                f"""
+                <div style="background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%); 
+                            padding: 40px; border-radius: 12px; 
+                            border: 4px solid {ACCENT_COLOR}; text-align: center; margin-bottom: 20px;
+                            box-shadow: 0 0 40px rgba(124, 252, 0, 0.4), inset 0 0 60px rgba(124, 252, 0, 0.1);">
+                    <h1 style="color: {SECONDARY_COLOR}; margin: 0; font-size: 3em; 
+                               text-shadow: 0 0 20px rgba(124, 252, 0, 0.6);">
+                        🦝 TCHOUPINOUX INVIDERS
+                    </h1>
+                    <h3 style="color: {ACCENT_COLOR}; margin: 15px 0 0 0; font-weight: bold; 
+                               letter-spacing: 3px; text-transform: uppercase;
+                               text-shadow: 0 0 10px rgba(124, 252, 0, 0.8);">
+                        ⚡ STICKER HUNT CHALLENGE ⚡
+                    </h3>
+                </div>
+                """
+            )
+
+        # ====================================================================
+        # LOGIN SCREEN
+        # ====================================================================
+        with gr.Column(visible=True) as login_screen:
+            gr.HTML(
+                f"""
+                <div style="text-align: center; padding: 20px; margin-bottom: 20px;
+                            background: linear-gradient(90deg, transparent, rgba(124, 252, 0, 0.15), transparent);
+                            border-top: 3px solid {ACCENT_COLOR}; border-bottom: 3px solid {ACCENT_COLOR};">
+                    <h2 style="color: {PRIMARY_COLOR}; margin: 0; text-transform: uppercase; 
+                               letter-spacing: 2px;">
+                        🔐 Login or Register
+                    </h2>
+                </div>
+                """
+            )
+
+            with gr.Tab("🔑 Login"):
+                login_username = gr.Textbox(
+                    label="Username", placeholder="Enter your username"
+                )
+                login_password = gr.Textbox(
+                    label="Password", type="password", placeholder="Enter your password"
+                )
+                login_btn = gr.Button("🚀 LOGIN", variant="primary")
+                login_message = gr.Textbox(
+                    label="", interactive=False, show_label=False
+                )
+
+            with gr.Tab("✨ Register"):
+                reg_username = gr.Textbox(
+                    label="Username", placeholder="Choose a username"
+                )
+                reg_password = gr.Textbox(
+                    label="Password", type="password", placeholder="Choose a password"
+                )
+                reg_btn = gr.Button("⚡ REGISTER", variant="primary")
+                reg_message = gr.Textbox(label="", interactive=False, show_label=False)
+
+        # ====================================================================
+        # MAIN APPLICATION
+        # ====================================================================
+        with gr.Column(visible=False) as main_app:
+
+            # User info header
+            user_info = gr.HTML(
+                f"""
+                <div style="background: {SECONDARY_COLOR}; 
+                            border: 3px solid {PRIMARY_COLOR}; 
+                            box-shadow: inset 0 0 0 1px {ACCENT_COLOR}, 0 0 20px rgba(124, 252, 0, 0.2);
+                            border-radius: 8px; 
+                            padding: 15px; text-align: center; margin-bottom: 20px;">
+                    <h2 style="color: {PRIMARY_COLOR}; margin: 0; font-size: 1.5em;">
+                        👤 User
+                    </h2>
+                </div>
+                """
+            )
+
+            with gr.Tabs():
+
+                # HUNT TAB
+                with gr.Tab("🎯 Hunt"):
+                    gr.HTML(
+                        f"""
+                        <div style="text-align: center; padding: 20px; 
+                                    background: linear-gradient(90deg, transparent, rgba(124, 252, 0, 0.15), transparent);
+                                    border-left: 4px solid {ACCENT_COLOR}; border-right: 4px solid {ACCENT_COLOR};
+                                    margin-bottom: 20px;">
+                            <h3 style="color: {PRIMARY_COLOR}; margin: 0; text-transform: uppercase; 
+                                       letter-spacing: 2px;">
+                                📸 Capture a Sticker
+                            </h3>
+                        </div>
+                        """
+                    )
+
+                    camera = gr.Image(
+                        type="numpy",
+                        label="Take a photo of the sticker",
+                        sources=["webcam"],
+                        webcam_options=gr.WebcamOptions(mirror=True),
+                    )
+
+                    location_dropdown = gr.Dropdown(
+                        choices=locations,
+                        label="Select location",
+                        info="Where did you find this sticker?",
+                    )
+
+                    capture_btn = gr.Button("🚀 SUBMIT", variant="primary", size="lg")
+
+                    capture_message = gr.Textbox(label="Status", interactive=False)
+                    capture_preview = gr.Image(label="Captured sticker", visible=True)
+
+                # COLLECTION TAB
+                with gr.Tab("🏆 Collection"):
+                    gr.HTML(
+                        f"""
+                        <div style="text-align: center; padding: 20px; 
+                                    background: linear-gradient(90deg, transparent, rgba(124, 252, 0, 0.15), transparent);
+                                    border-left: 4px solid {ACCENT_COLOR}; border-right: 4px solid {ACCENT_COLOR};
+                                    margin-bottom: 20px;">
+                            <h3 style="color: {PRIMARY_COLOR}; margin: 0; text-transform: uppercase; 
+                                       letter-spacing: 2px;">
+                                🎨 Your Collected Stickers
+                            </h3>
+                        </div>
+                        """
+                    )
+
+                    refresh_btn = gr.Button(
+                        "🔄 Refresh Collection", variant="secondary"
+                    )
+
+                    collection_gallery = gr.Gallery(
+                        label="Your stickers",
+                        show_label=False,
+                        columns=3,
+                        height="auto",
+                    )
+
+                # LEADERBOARD TAB
+                with gr.Tab("⚡ Leaderboard"):
+                    gr.HTML(
+                        f"""
+                        <div style="text-align: center; padding: 20px; 
+                                    background: linear-gradient(90deg, transparent, rgba(124, 252, 0, 0.15), transparent);
+                                    border-left: 4px solid {ACCENT_COLOR}; border-right: 4px solid {ACCENT_COLOR};
+                                    margin-bottom: 20px;">
+                            <h3 style="color: {PRIMARY_COLOR}; margin: 0; text-transform: uppercase; 
+                                       letter-spacing: 2px;">
+                                👑 Top Collectors
+                            </h3>
+                        </div>
+                        """
+                    )
+
+                    refresh_leaderboard_btn = gr.Button(
+                        "🔄 Refresh", variant="secondary"
+                    )
+
+                    leaderboard_display = gr.HTML()
+
+            logout_btn = gr.Button("🚪 Logout", variant="stop")
+
+        # ====================================================================
+        # EVENT HANDLERS
+        # ====================================================================
+
+        # Login
+        login_btn.click(
+            fn=login_interface,
+            inputs=[login_username, login_password],
+            outputs=[login_screen, main_app, user_info, login_message],
+        )
+
+        # Register
+        reg_btn.click(
+            fn=register_interface,
+            inputs=[reg_username, reg_password],
+            outputs=[reg_message],
+        )
+
+        # Capture sticker
+        capture_btn.click(
+            fn=capture_sticker,
+            inputs=[camera, location_dropdown],
+            outputs=[capture_message, capture_preview, user_info],
+        )
+
+        # Refresh collection
+        refresh_btn.click(fn=load_collection, outputs=[collection_gallery])
+
+        # Refresh leaderboard
+        refresh_leaderboard_btn.click(
+            fn=load_leaderboard, outputs=[leaderboard_display]
+        )
+
+        # Logout
+        logout_btn.click(
+            fn=logout, outputs=[login_screen, main_app, user_info, login_message]
+        )
+
+    return app
+
+
+# ============================================================================
+# MAIN
+# ============================================================================
+
+if __name__ == "__main__":
+    app = build_app()
+    app.launch()

requirements.txt

@@ -0,0 +1,3 @@
+gradio
+Pillow
+numpy