Upload 12 files

README.md

@@ -1,12 +1,17 @@
 ---
-title: Magistral Geogussr Challenge
-emoji: 📈
-colorFrom: gray
-colorTo: yellow
+title: Geogussr LLM
+emoji: 📚
+colorFrom: pink
+colorTo: pink
 sdk: gradio
-sdk_version: 5.48.0
+sdk_version: 5.46.0
 app_file: app.py
 pinned: false
+hf_oauth: true
+hf_oauth_expiration_minutes: 1440
+hf_oauth_scopes:
+  - read-repos
+  - write-repos
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,941 @@
+import os
+import random
+import json
+import uuid
+import time
+from datetime import datetime, timedelta, timezone
+from typing import Dict, Any, List, Optional
+import spaces
+
+import requests
+from dotenv import load_dotenv
+import gradio as gr
+from gradio.components import LoginButton
+
+import data_manager
+
+from huggingface_hub import HfApi, hf_hub_download, whoami
+ 
+from transformers import Mistral3ForConditionalGeneration, AutoTokenizer, TextIteratorStreamer
+import threading
+import torch
+
+load_dotenv()
+
+APP_SECRET = os.urandom(24)
+
+ZONES_FILE = 'zones.json'
+zones = {
+    "easy": [],
+    "medium": [],
+    "hard": []
+}
+
+user_sessions: Dict[str, Dict[str, Any]] = {}
+DEFAULT_USERNAME = "player"
+
+def save_zones_to_file():
+    with open(ZONES_FILE, 'w') as f:
+        json.dump(zones, f, indent=4)
+
+def load_zones_from_file():
+    global zones
+    if os.path.exists(ZONES_FILE):
+        try:
+            with open(ZONES_FILE, 'r') as f:
+                loaded_zones = json.load(f)
+            if not (isinstance(loaded_zones, dict) and all(k in loaded_zones for k in ["easy", "medium", "hard"])):
+                raise ValueError("Invalid format")
+            migrated = False
+            for difficulty in loaded_zones:
+                for zone in loaded_zones[difficulty]:
+                    if 'id' not in zone:
+                        zone['id'] = uuid.uuid4().hex
+                        migrated = True
+            zones = loaded_zones
+            print(zones)
+            if migrated:
+                print("Info: Migrated old zone data by adding unique IDs.")
+                save_zones_to_file()
+        except (json.JSONDecodeError, IOError, ValueError):
+            print(f"Warning: '{ZONES_FILE}' is corrupted or invalid. Recreating with empty zones.")
+            save_zones_to_file()
+    else:
+        save_zones_to_file()
+
+LOCATIONS = [
+    {'lat': 48.85824, 'lng': 2.2945},
+    {'lat': 40.748440, 'lng': -73.985664},
+    {'lat': 35.689487, 'lng': 139.691711},
+    {'lat': -33.856784, 'lng': 151.215297}
+]
+
+def generate_id():
+    return ''.join(random.choices('abcdefghijklmnopqrstuvwxyz0123456789', k=10))
+
+HF_DATASET_REPO = 'jofthomas/geoguessr_game_of_the_day'
+
+GOOGLE_MAPS_API_KEY = os.getenv('GOOGLE_MAPS_API_KEY')
+SERVER_HF_TOKEN = os.getenv('HF_TOKEN', '')
+
+model_id = "mistralai/Magistral-Small-2509"
+tokenizer = AutoTokenizer.from_pretrained(model_id, tokenizer_type="mistral", use_fast=False)
+model = Mistral3ForConditionalGeneration.from_pretrained(
+        model_id, torch_dtype=torch.bfloat16, device_map="auto"
+    ).eval()
+
+
+SYSTEM_PROMPT_TEXT = (
+    "You are a world-class geolocation expert. Given a street-view style image, "
+    "think step by step about visual clues and infer approximate coordinates. "
+    "When you conclude, output your answer inside [ANSWER]lat,lng[/ANSWER]."
+)
+@spaces.GPU(duration=120)
+def llm_decode_image_return_text(image_bytes: bytes) -> str:
+    print(f"[llm] decode start. image_bytes={len(image_bytes)} bytes")
+    import base64, mimetypes
+    try:
+        encoded_image = base64.b64encode(image_bytes).decode('utf-8')
+        mime_type = 'image/jpeg'
+        data_url = f"data:{mime_type};base64,{encoded_image}"
+        messages = [
+            {"role": "system", "content": [{"type": "text", "text": SYSTEM_PROMPT_TEXT}]},
+            {"role": "user", "content": [
+                {"type": "text", "text": "Please analyze this image and provide coordinates."},
+                {"type": "image_url", "image_url": {"url": data_url}},
+            ]},
+        ]
+        print(f"[llm] messages prepared. system+user with image_url length={len(data_url)}")
+        tokenized = tokenizer.apply_chat_template(messages, return_dict=True)
+        print(f"[llm] tokenized keys={list(tokenized.keys())}")
+        import torch
+        input_ids = torch.tensor(tokenized.input_ids).unsqueeze(0)
+        attention_mask = torch.tensor(tokenized.attention_mask).unsqueeze(0)
+        print(f"[llm] input_ids shape={tuple(input_ids.shape)} attn_mask shape={tuple(attention_mask.shape)} device={model.device}")
+        kwargs = {
+            'input_ids': input_ids.to(model.device),
+            'attention_mask': attention_mask.to(model.device),
+        }
+        if 'pixel_values' in tokenized and len(tokenized.pixel_values) > 0:
+            pixel_values = torch.tensor(tokenized.pixel_values[0], dtype=model.dtype).unsqueeze(0).to(model.device)
+            image_sizes = torch.tensor(pixel_values.shape[-2:]).unsqueeze(0).to(model.device)
+            kwargs.update({'pixel_values': pixel_values, 'image_sizes': image_sizes})
+            print(f"[llm] pixel_values shape={tuple(pixel_values.shape)} image_sizes={tuple(image_sizes.shape)}")
+        output = model.generate(**kwargs)[0]
+        print(f"[llm] generate done. output length={len(output)}")
+        decoded = tokenizer.decode(output[len(tokenized.input_ids): ( -1 if output[-1] == tokenizer.eos_token_id else len(output) )])
+        print(f"[llm] decode done. text length={len(decoded)}")
+        return decoded
+    except Exception as e:
+        print(f"[llm] decode failed: {e}")
+        return f"[Error] {e}"
+
+@spaces.GPU(duration=120)
+def llm_stream_image_text(image_bytes: bytes):
+    print(f"[llm-stream] start. image_bytes={len(image_bytes)} bytes")
+    import base64
+    try:
+        encoded_image = base64.b64encode(image_bytes).decode('utf-8')
+        data_url = f"data:image/jpeg;base64,{encoded_image}"
+        messages = [
+            {"role": "system", "content": [{"type": "text", "text": SYSTEM_PROMPT_TEXT}]},
+            {"role": "user", "content": [
+                {"type": "text", "text": "Please analyze this image and provide coordinates."},
+                {"type": "image_url", "image_url": {"url": data_url}},
+            ]},
+        ]
+        tokenized = tokenizer.apply_chat_template(messages, return_dict=True)
+        input_ids = torch.tensor(tokenized.input_ids).unsqueeze(0)
+        attention_mask = torch.tensor(tokenized.attention_mask).unsqueeze(0)
+        kwargs = {
+            'input_ids': input_ids.to(model.device),
+            'attention_mask': attention_mask.to(model.device),
+            'max_new_tokens': 512,
+        }
+        if 'pixel_values' in tokenized and len(tokenized.pixel_values) > 0:
+            pixel_values = torch.tensor(tokenized.pixel_values[0], dtype=model.dtype).unsqueeze(0).to(model.device)
+            image_sizes = torch.tensor(pixel_values.shape[-2:]).unsqueeze(0).to(model.device)
+            kwargs.update({'pixel_values': pixel_values, 'image_sizes': image_sizes})
+        streamer = TextIteratorStreamer(tokenizer, skip_prompt=True, skip_special_tokens=False)
+        kwargs['streamer'] = streamer
+        thread = threading.Thread(target=model.generate, kwargs=kwargs)
+        thread.start()
+        acc = ""
+        for new_text in streamer:
+            acc += new_text
+            yield acc
+    except Exception as e:
+        yield f"[Error] {e}"
+
+
+def zones_get() -> dict:
+    return zones
+
+
+def seconds_until_midnight_utc() -> int:
+    now = datetime.now(timezone.utc)
+    tomorrow = (now + timedelta(days=1)).date()
+    midnight = datetime.combine(tomorrow, datetime.min.time(), tzinfo=timezone.utc)
+    return max(0, int((midnight - now).total_seconds()))
+
+
+ 
+def pick_random_location(difficulty: str) -> Dict[str, float]:
+    candidates = zones.get(difficulty, [])
+    if candidates:
+        selected_zone = random.choice(candidates)
+        if selected_zone.get('type') == 'rectangle':
+            b = selected_zone['bounds']
+            north, south, east, west = b['north'], b['south'], b['east'], b['west']
+            if west > east:
+                east += 360
+            lng = random.uniform(west, east)
+            if lng > 180:
+                lng -= 360
+            lat = random.uniform(south, north)
+            ensured = _ensure_street_view_location(lat, lng)
+            if ensured:
+                return ensured
+    fallback = random.choice(LOCATIONS)
+    ensured_fallback = _ensure_street_view_location(fallback['lat'], fallback['lng'])
+    return ensured_fallback or fallback
+
+
+def street_view_image_url(lat: float, lng: float) -> str:
+    if not GOOGLE_MAPS_API_KEY:
+        # Fallback placeholder to avoid blank image when key is missing
+        return "https://picsum.photos/960/540"
+    return (
+        f"https://maps.googleapis.com/maps/api/streetview?size=960x540&location={lat},{lng}&fov=90&pitch=0&key={GOOGLE_MAPS_API_KEY}"
+    )
+
+
+def _has_street_view(lat: float, lng: float) -> bool:
+    if not GOOGLE_MAPS_API_KEY:
+        return True
+    try:
+        resp = requests.get(
+            "https://maps.googleapis.com/maps/api/streetview/metadata",
+            params={"location": f"{lat},{lng}", "key": GOOGLE_MAPS_API_KEY},
+            timeout=5,
+        )
+        resp.raise_for_status()
+        data = resp.json()
+        return data.get("status") == "OK"
+    except Exception:
+        return False
+
+
+def _snap_to_nearest_road(lat: float, lng: float) -> Optional[Dict[str, float]]:
+    if not GOOGLE_MAPS_API_KEY:
+        return None
+    try:
+        resp = requests.get(
+            "https://roads.googleapis.com/v1/nearestRoads",
+            params={"points": f"{lat},{lng}", "key": GOOGLE_MAPS_API_KEY},
+            timeout=5,
+        )
+        resp.raise_for_status()
+        data = resp.json()
+        points = data.get("snappedPoints") or []
+        if not points:
+            return None
+        loc = points[0].get("location") or {}
+        if "latitude" in loc and "longitude" in loc:
+            return {"lat": float(loc["latitude"]), "lng": float(loc["longitude"])}
+    except Exception:
+        pass
+    return None
+
+
+def _ensure_street_view_location(lat: float, lng: float) -> Optional[Dict[str, float]]:
+    """Return a coordinate with confirmed Street View coverage, snapped near a road when possible."""
+    if not GOOGLE_MAPS_API_KEY:
+        return {"lat": lat, "lng": lng}
+
+    checked: set[tuple] = set()
+    snapped = _snap_to_nearest_road(lat, lng)
+    candidates: List[Dict[str, float]] = []
+    if snapped:
+        candidates.append(snapped)
+    candidates.append({"lat": lat, "lng": lng})
+
+    # Explore a few jittered points if needed
+    if not snapped:
+        increments = [0.0005, -0.0005, 0.001, -0.001]
+        for d_lat in increments:
+            for d_lng in increments:
+                if d_lat == 0 and d_lng == 0:
+                    continue
+                candidates.append({"lat": lat + d_lat, "lng": lng + d_lng})
+
+    for candidate in candidates:
+        key = (round(candidate["lat"], 6), round(candidate["lng"], 6))
+        if key in checked:
+            continue
+        checked.add(key)
+        if _has_street_view(candidate["lat"], candidate["lng"]):
+            return candidate
+
+    return None
+
+
+def haversine_km(lat1: float, lon1: float, lat2: float, lon2: float) -> float:
+    from math import radians, cos, sin, asin, sqrt
+    lon1, lat1, lon2, lat2 = map(radians, [lon1, lat1, lon2, lat2])
+    dlon = lon2 - lon1
+    dlat = lat2 - lat1
+    a = sin(dlat/2)**2 + cos(lat1) * cos(lat2) * sin(dlon/2)**2
+    c = 2 * asin(sqrt(a))
+    r = 6371
+    return c * r
+
+
+def score_from_distance_km(distance_km: float) -> float:
+    max_score = 5000.0
+    return max(0.0, max_score - distance_km)
+
+
+def build_street_html(image_url: str) -> str:
+    base = """
+    <div id="image-container" style="position:relative;max-width:960px;margin:0 auto;">
+      <img id="street-image" src="__IMG_URL__" style="width:100%;height:auto;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,0.1)" />
+      <div id="mini-map-wrap" style="transition:all 0.3s ease;position:absolute;right:10px;bottom:10px;border:2px solid #fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.2);background:#fff;">
+        <div id="mini-map" style="width:100%;height:100%;cursor:pointer"></div>
+        <div id="map-controls" style="position:absolute;right:8px;top:8px;display:flex;gap:6px;z-index:5;">
+          <button id="map-size-minus" class="map-ctrl" style="width:34px;height:28px;border-radius:6px;border:1px solid rgba(0,0,0,0.2);background:#f97316;color:#fff;">−</button>
+          <button id="map-size-plus" class="map-ctrl" style="width:34px;height:28px;border-radius:6px;border:1px solid rgba(0,0,0,0.2);background:#f97316;color:#fff;">+</button>
+        </div>
+      </div>
+    </div>
+    """
+    return base.replace('__IMG_URL__', image_url)
+
+
+def gr_start_game(difficulty: str, username: str, request: gr.Request):
+    rounds: List[Dict[str, Any]] = []
+    date_str = datetime.now(timezone.utc).date().isoformat()
+    for _ in range(3):
+        loc = pick_random_location(difficulty)
+        round_id = generate_id()
+        rounds.append({
+            'id': round_id,
+            'lat': loc['lat'],
+            'lng': loc['lng'],
+            'image_url': street_view_image_url(loc['lat'], loc['lng']),
+            'human_guess': None,
+            'ai_guess': None,
+            'human_score': 0.0,
+            'ai_score': 0.0,
+        })
+
+    user_sessions[username] = {
+        'difficulty': difficulty,
+        'rounds': rounds,
+        'total_score': 0.0,
+        'completed': False,
+        'date': date_str,
+    }
+    r0 = rounds[0]
+    street_html = build_street_html(r0['image_url'])
+    return rounds, 0, r0['id'], street_html, "", ""
+
+
+def get_round(username: str, round_id: str) -> Optional[Dict[str, Any]]:
+    session_data = user_sessions.get(username)
+    if not session_data:
+        return None
+    for r in session_data['rounds']:
+        if r['id'] == round_id:
+            return r
+    return None
+
+
+def gr_submit_guess(round_id: str, lat: float, lng: float, username: str, request: gr.Request):
+    rnd = get_round(username, round_id)
+    if not rnd:
+        return "", "Round not found", gr.update(), gr.update(), gr.update()
+    distance_km = haversine_km(rnd['lat'], rnd['lng'], float(lat), float(lng))
+    score = score_from_distance_km(distance_km)
+    rnd['human_guess'] = {'lat': float(lat), 'lng': float(lng)}
+    rnd['human_score'] = score
+    rnd['human_distance_km'] = float(distance_km)
+    result_text = f"Your guess was {distance_km:.2f} km away. You scored {score:.0f} points."
+    scoreboard_html = (
+        f"<div style='margin:8px 0;padding:26px;background:#040b1a;border-radius:18px;color:#f9fafb;border:1px solid rgba(148,163,184,0.4);box-shadow:0 26px 60px rgba(4,7,15,0.6);'>"
+        f"<div style='font-weight:700;font-size:1.25rem;margin-bottom:14px;text-shadow:0 0 12px rgba(4,7,15,0.75);'>Human Guess Recorded</div>"
+        f"<div style='margin-bottom:20px;color:#f8fafc;font-size:1.02rem;line-height:1.6;text-shadow:0 0 10px rgba(4,7,15,0.65);'>{result_text}</div>"
+        f"<div style='display:flex;gap:24px;font-size:0.96rem;margin-bottom:18px;flex-wrap:wrap;color:#f8fafc;'>"
+        f"  <span><strong>Distance:</strong> {distance_km:.2f} km</span>"
+        f"  <span><strong>Score:</strong> {score:.0f} pts</span>"
+        f"</div>"
+        f"<div style='font-size:0.92rem;color:#e2e8f0;'>AI analysis will be added once the model finishes.</div>"
+        f"</div>"
+    )
+    popup_html = """
+    <div id=\"popup-overlay\" style=\"position:fixed;inset:0;background:rgba(8,11,20,0.78);display:flex;align-items:center;justify-content:center;z-index:1000;\">
+      <div id=\"popup-card\" style=\"background:#04070f;padding:26px;border-radius:18px;width:92%;max-width:960px;color:#f9fafb;position:relative;box-shadow:0 28px 80px rgba(4,7,15,0.75);border:1px solid rgba(148,163,184,0.35);\" onclick=\"event.stopPropagation();\">
+        <button id=\"popup-close-next\" style=\"position:absolute;top:16px;right:18px;padding:10px 18px;border-radius:999px;border:1px solid rgba(96,165,250,0.4);background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#f8fafc;font-weight:600;cursor:pointer;box-shadow:0 8px 18px rgba(37,99,235,0.45);\">Close & Next</button>
+        <h3 style=\"margin:0 0 20px;color:#f8fafc;text-shadow:0 0 14px rgba(37,99,235,0.35);\">Round Results</h3>
+        __SCOREBOARD__
+        <div id=\"popup-map\" data-rnd-lat=\"__RND_LAT__\" data-rnd-lng=\"__RND_LNG__\" data-h-lat=\"__H_LAT__\" data-h-lng=\"__H_LNG__\" data-ai-lat=\"\" data-ai-lng=\"\" style=\"width:100%;height:440px;border-radius:16px;overflow:hidden;border:1px solid rgba(148,163,184,0.35);box-shadow:0 16px 40px rgba(4,7,15,0.72);\"></div>
+        <div style=\"display:flex;justify-content:space-between;align-items:center;margin-top:24px;font-size:0.98rem;color:#e2e8f0;flex-wrap:wrap;gap:14px;\">
+          <div style=\"display:flex;gap:16px;align-items:center;flex-wrap:wrap;\">
+            <span style=\"display:flex;align-items:center;gap:8px;\"><span style=\"display:inline-flex;width:13px;height:13px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,0.6);\"></span>G = Ground Truth</span>
+            <span style=\"display:flex;align-items:center;gap:8px;\"><span style=\"display:inline-flex;width:13px;height:13px;border-radius:50%;background:#f97316;box-shadow:0 0 8px rgba(249,115,22,0.55);\"></span>H = Human</span>
+            <span style=\"display:flex;align-items:center;gap:8px;\"><span style=\"display:inline-flex;width:13px;height:13px;border-radius:50%;background:#2563EB;box-shadow:0 0 8px rgba(37,99,235,0.6);\"></span>A = AI</span>
+          </div>
+          <button id=\"popup-close-next-footer\" style=\"padding:12px 22px;border-radius:12px;border:1px solid rgba(96,165,250,0.4);background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#f8fafc;font-weight:600;cursor:pointer;box-shadow:0 10px 22px rgba(37,99,235,0.48);\">Next Round</button>
+        </div>
+      </div>
+    </div>
+    <script>
+    (function() {
+      function boot() {
+        if (window.__initPopupIfPresent) {
+          window.__initPopupIfPresent();
+        }
+      }
+      if (document.readyState === 'complete' || document.readyState === 'interactive') {
+        setTimeout(boot, 0);
+      } else {
+        document.addEventListener('DOMContentLoaded', boot, { once: true });
+      }
+    })();
+    </script>
+    """.replace('__SCOREBOARD__', scoreboard_html)\
+       .replace('__RND_LAT__', str(rnd['lat']))\
+       .replace('__RND_LNG__', str(rnd['lng']))\
+       .replace('__H_LAT__', str(float(lat)))\
+       .replace('__H_LNG__', str(float(lng)))\
+       .replace('__GMAPS_KEY__', GOOGLE_MAPS_API_KEY or '')
+    return popup_html, result_text, rnd['lat'], rnd['lng'], score
+
+def extract_coords_from_text(text: str) -> Optional[Dict[str, float]]:
+    import re
+    m = re.search(r"\[ANSWER\]\s*([+-]?\d+(?:\.\d+)?)\s*,\s*([+-]?\d+(?:\.\d+)?)\s*\[/ANSWER\]", text, re.IGNORECASE)
+    if not m:
+        return None
+    try:
+        lat = float(m.group(1))
+        lng = float(m.group(2))
+        return {'lat': lat, 'lng': lng}
+    except Exception:
+        return None
+
+
+def geocode_text_to_coords(query: str) -> Optional[Dict[str, float]]:
+    if not GOOGLE_MAPS_API_KEY:
+        return None
+    resp = requests.get('https://maps.googleapis.com/maps/api/geocode/json', params={'address': query, 'key': GOOGLE_MAPS_API_KEY})
+    try:
+        j = resp.json()
+        if j.get('results'):
+            loc = j['results'][0]['geometry']['location']
+            return {'lat': loc['lat'], 'lng': loc['lng']}
+    except Exception:
+        return None
+    return None
+
+
+def gr_ai_analyze(round_id: str, request: gr.Request):
+    username = DEFAULT_USERNAME
+    rnd = get_round(username, round_id)
+    if not rnd:
+        return "Round not found", gr.update()
+    try:
+        img_resp = requests.get(rnd['image_url'])
+        img_resp.raise_for_status()
+        full_text = llm_decode_image_return_text(img_resp.content)
+    except Exception as e:
+        return f"[Error] {e}", gr.update()
+    ai_coords = extract_coords_from_text(full_text) or geocode_text_to_coords(full_text[-256:])
+    ai_marker = None
+    if ai_coords:
+        rnd['ai_guess'] = ai_coords
+        distance_km = haversine_km(rnd['lat'], rnd['lng'], ai_coords['lat'], ai_coords['lng'])
+        rnd['ai_score'] = score_from_distance_km(distance_km)
+        ai_marker = ai_coords
+    return full_text, ai_marker
+
+
+def gr_session_summary(username: str, request: gr.Request):
+    sess = user_sessions.get(username)
+    if not sess:
+        return "No active session"
+    total = sum(float(r.get('human_score', 0.0)) for r in sess['rounds'])
+    return f"Your total score: {total:.0f} / 15000"
+
+load_zones_from_file()
+
+def _read_text(path: str) -> str:
+    try:
+        with open(path, 'r') as f:
+            return f.read()
+    except Exception:
+        return ""
+
+APP_CSS = _read_text('static/style.css') + "\n#lat_box, #lng_box { display:none; }\n" + """
+#lobby_group, #game_group{max-width:1024px;margin:24px auto;padding:16px;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.08)}
+#start_btn{height:48px;font-weight:700}
+.gradio-container{background:var(--light-color,#FFFBEB)}
+body, .gradio-container, .gradio-container *{color:#111 !important}
+/* force markdown text to be dark */
+.gradio-container .prose, .gradio-container .prose *{color:#111 !important}
+/* override: LLM output textbox uses white font on dark background */
+#ai_chat, #ai_chat *{color:#fff !important}
+#ai_chat textarea{background:#111 !important;color:#fff !important}
+#ai_chat label{color:#fff !important}
+/* difficulty dropdown white text */
+#difficulty_select, #difficulty_select *{color:#fff !important}
+/* keep dropdown menu items readable */
+.svelte-3lgy39 .wrap-inner, .wrap-inner{ color: inherit; }
+#popup-overlay, #popup-overlay * {color:#f9fafb !important}
+#popup-overlay #ai-analysis-box, #popup-overlay #ai-analysis-box * { color: #1e293b !important; }
+"""
+
+# Client boot JS to initialize the mini-map reliably in Gradio (scripts in HTML are sanitized)
+APP_BOOT_JS = """
+() => {
+  const GMAPS_KEY = "__GMAPS_KEY__";
+  const log = (...a) => { try { console.log('[boot]', ...a); } catch(_) {} };
+  function ensureMapsLoaded(cb) {
+    if (window.google && google.maps) return cb();
+    if (!GMAPS_KEY) { log('No GOOGLE_MAPS_API_KEY; mini-map disabled'); return; }
+    window.__gmapsQueue = window.__gmapsQueue || [];
+    window.__gmapsQueue.push(cb);
+    if (window.__gmapsLoading) return;
+    window.__gmapsLoading = true;
+    window.__mini_cb__ = () => {
+      log('Google Maps ready');
+      const q = window.__gmapsQueue || [];
+      q.forEach(fn => { try { fn(); } catch(_) {} });
+      window.__gmapsQueue = [];
+    };
+    const s = document.createElement('script');
+    s.async = true; s.defer = true; s.dataset.gmapsLoader = '1';
+    s.src = 'https://maps.googleapis.com/maps/api/js?key=' + GMAPS_KEY + '&callback=__mini_cb__';
+    s.onerror = () => log('Failed to load Google Maps script');
+    document.head.appendChild(s);
+  }
+  function initMiniMapIfPresent() {
+    const el = document.getElementById('mini-map');
+    if (!el || el.dataset.initialized === '1') return;
+    ensureMapsLoaded(() => {
+      try {
+        const map = new google.maps.Map(el, { center: { lat: 0, lng: 0 }, zoom: 1, streetViewControl: false, mapTypeControl: false, fullscreenControl: false });
+        window._miniMapInstance = map;
+        el.dataset.initialized = '1';
+        let marker=null;
+        map.addListener('click',(e)=>{
+          if(marker) marker.setMap(null);
+          marker=new google.maps.Marker({position:e.latLng, map});
+          const latBox=document.querySelector('#lat_box input, #lat_box textarea, #lat_box input[type=number]');
+          const lngBox=document.querySelector('#lng_box input, #lng_box textarea, #lng_box input[type=number]');
+          if(latBox){ latBox.value=e.latLng.lat(); latBox.dispatchEvent(new Event('input',{bubbles:true})); }
+          if(lngBox){ lngBox.value=e.latLng.lng(); lngBox.dispatchEvent(new Event('input',{bubbles:true})); }
+        });
+        setTimeout(() => { try { google.maps.event.trigger(map, 'resize'); map.setCenter({ lat: 0, lng: 0 }); } catch(_) {} }, 150);
+        log('Mini-map initialized');
+      } catch (e) { log('Mini-map init error', e); }
+    });
+  }
+  function initPopupIfPresent() {
+    log('initPopupIfPresent called');
+    const el = document.getElementById('popup-map');
+    if (!el || el.dataset.initialized === '1') return;
+    log("Raw AI dataset values:", { lat: el.dataset.aiLat, lng: el.dataset.aiLng });
+    const rnd = { lat: parseFloat(el.dataset.rndLat), lng: parseFloat(el.dataset.rndLng) };
+    const human = { lat: parseFloat(el.dataset.hLat), lng: parseFloat(el.dataset.hLng) };
+    const ai = { lat: parseFloat(el.dataset.aiLat), lng: parseFloat(el.dataset.aiLng) };
+    log("Parsed AI coords:", ai);
+    ensureMapsLoaded(() => {
+      try {
+        log('Popup map element found, ensuring maps loaded...');
+        const mapOpts={zoom:6,center:rnd,mapTypeControl:false,streetViewControl:false,fullscreenControl:false};
+        const m = new google.maps.Map(el, mapOpts);
+        el.dataset.initialized = '1';
+        const bounds = new google.maps.LatLngBounds();
+        const markerIcon = (fill, stroke) => ({ path: google.maps.SymbolPath.CIRCLE, scale: 9.5, fillColor: fill, fillOpacity: 1, strokeColor: stroke, strokeWeight: 2 });
+        const markerLabel = (text) => ({ text, color: '#ffffff', fontWeight: '700', fontSize: '12px' });
+        log("Marker label style:", markerLabel("A"));
+        const gMk = new google.maps.Marker({ position: rnd, map: m, label: markerLabel('G'), icon: markerIcon('#22c55e', '#166534') });
+        bounds.extend(gMk.getPosition());
+        if (Number.isFinite(ai.lat) && Number.isFinite(ai.lng)) {
+            log("AI coordinates are valid, creating marker.");
+            const aMk = new google.maps.Marker({ position: ai, map: m, label: markerLabel('A'), icon: markerIcon('#2563EB', '#1e3a8a') });
+            bounds.extend(aMk.getPosition());
+            new google.maps.Polyline({ path: [rnd, ai], geodesic: true, strokeColor: '#2563EB', strokeOpacity: 1.0, strokeWeight: 2, map: m });
+        } else {
+            log("AI coordinates are NOT valid, skipping marker creation.");
+        }
+        if (Number.isFinite(human.lat) && Number.isFinite(human.lng)) {
+            const hMk = new google.maps.Marker({ position: human, map: m, label: markerLabel('H'), icon: markerIcon('#f97316', '#c2410c') });
+            bounds.extend(hMk.getPosition());
+            new google.maps.Polyline({ path: [rnd, human], geodesic: true, strokeColor: '#f97316', strokeOpacity: 1.0, strokeWeight: 2, map: m });
+        }
+        const ne = bounds.getNorthEast();
+        const sw = bounds.getSouthWest();
+        if (ne && sw && ne.equals(sw)) {
+            m.setCenter(ne);
+            log("Setting zoom to 18");
+            m.setZoom(18);
+        } else {
+            log("Fitting map to bounds");
+            m.fitBounds(bounds);
+        }
+        setTimeout(() => {
+            try {
+                google.maps.event.trigger(m, 'resize');
+                const ne2 = bounds.getNorthEast();
+                const sw2 = bounds.getSouthWest();
+                if (ne2 && sw2 && ne2.equals(sw2)) {
+                    m.setCenter(ne2);
+                    log("Setting zoom to 18 after resize");
+                    m.setZoom(18);
+                } else {
+                    log("Fitting map to bounds after resize");
+                    m.fitBounds(bounds);
+                }
+            } catch (e) { log('Resize error', e); }
+        }, 120);
+        const closeButtons = [document.getElementById('popup-close-next'), document.getElementById('popup-close-next-footer')];
+        closeButtons.forEach((btn) => {
+          if (!btn) return;
+          if (!btn.dataset.bound) {
+            btn.addEventListener('click', () => {
+              const ov = document.getElementById('popup-overlay');
+              if (ov) ov.remove();
+              const nxt = document.getElementById('next_btn');
+              if (nxt) nxt.click();
+            });
+            btn.dataset.bound = '1';
+          }
+        });
+        window.addEventListener('keydown', (ev) => { if (ev.key === 'Escape') { const ov = document.getElementById('popup-overlay'); if (ov) ov.remove(); const nxt = document.getElementById('next_btn'); if (nxt) nxt.click(); } }, { once: true });
+        log('Popup map initialized');
+      } catch (e) { log('Popup map init error', e); }
+    });
+  }
+  function initMapControlsIfPresent() {
+    const plusBtn = document.getElementById('map-size-plus');
+    const minusBtn = document.getElementById('map-size-minus');
+    const mapWrap = document.getElementById('mini-map-wrap');
+    if (!plusBtn || !minusBtn || !mapWrap || mapWrap.dataset.controlsInitialized) return;
+    const sizes = [{w: 200, h: 130}, {w: 280, h: 180}, {w: 400, h: 260}, {w: 550, h: 360}];
+    let currentSizeIndex = 1;
+    const updateSize = () => {
+      const newSize = sizes[currentSizeIndex];
+      mapWrap.style.width = newSize.w + 'px';
+      mapWrap.style.height = newSize.h + 'px';
+      if (window._miniMapInstance) {
+        setTimeout(() => {
+          google.maps.event.trigger(window._miniMapInstance, 'resize');
+        }, 300);
+      }
+      log('Map size changed to', newSize);
+    };
+    plusBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (currentSizeIndex < sizes.length - 1) {
+        currentSizeIndex++;
+        updateSize();
+      }
+    });
+    minusBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (currentSizeIndex > 0) {
+        currentSizeIndex--;
+        updateSize();
+      }
+    });
+    mapWrap.dataset.controlsInitialized = '1';
+    updateSize();
+    log('Map controls initialized');
+  }
+  const obs = new MutationObserver(() => { initMiniMapIfPresent(); initPopupIfPresent(); initMapControlsIfPresent(); });
+  obs.observe(document.documentElement, { childList: true, subtree: true });
+  initMiniMapIfPresent();
+  initPopupIfPresent();
+  initMapControlsIfPresent();
+}
+""".replace("__GMAPS_KEY__", GOOGLE_MAPS_API_KEY or '')
+
+with gr.Blocks(css=APP_CSS, title="LLM GeoGuessr") as demo:
+    user_profile = gr.State()
+
+    with gr.Row():
+        gr.Markdown("## LLM GeoGuessr", elem_id="title_md")
+        gr.Markdown("""
+        ### How to Play
+        1. **Select a difficulty** and click "Start Game".
+        2. You'll be shown a random Street View image for 3 rounds.
+        3. Place a marker on the mini-map to guess the location.
+        4. Submit your guess and see how your score compares to the AI's!
+        """)
+    
+    login_prompt_md = gr.Markdown("### Please log in with your Hugging Face account to play.", visible=True)
+    login_button = LoginButton(visible=True)
+    
+    logged_in_md = gr.Markdown(visible=False)
+
+    with gr.Group(visible=False, elem_id="lobby_group") as lobby_group:
+        with gr.Row():
+            difficulty = gr.Dropdown(choices=["easy", "medium", "hard"], value="easy", label="Difficulty", elem_id="difficulty_select")
+            start_btn = gr.Button("Start Game", variant="primary", elem_id="start_btn")
+        limit_msg = gr.Markdown(visible=False)
+
+    with gr.Group(visible=False, elem_id="game_group") as game_group:
+        rounds_state = gr.State([])
+        idx_state = gr.State(0)
+        round_id_box = gr.Textbox(visible=False)
+        lat_box = gr.Number(visible=True, elem_id="lat_box", label="lat")
+        lng_box = gr.Number(visible=True, elem_id="lng_box", label="lng")
+        street_html = gr.HTML(visible=True)
+        map_html = gr.HTML(visible=False)
+        validate_btn = gr.Button("Validate Guess", visible=True)
+        result_md = gr.Markdown()
+        popup_html = gr.HTML()
+        ai_chat = gr.Textbox(label="AI Analysis", interactive=False, elem_id="ai_chat")
+        next_btn = gr.Button("Next", visible=True, elem_id="next_btn")
+        final_md = gr.Markdown(visible=True)
+
+    def on_login(token: gr.OAuthToken | None):
+        if not token:
+            return (
+                None,
+                gr.update(visible=True),
+                gr.update(visible=True),
+                gr.update(visible=False),
+                gr.update(visible=False),
+                gr.update(),
+                gr.update(visible=False),
+            )
+
+        try:
+            profile = whoami(token=token.token)
+            username = profile["name"]
+            todays_games = data_manager.get_todays_games(token=token.token)
+            has_played = data_manager.has_user_played_today(username, todays_games)
+        except Exception as e:
+            gr.Warning(f"Could not check your game status. Please try again. Error: {e}")
+            return (
+                None,
+                gr.update(visible=True),
+                gr.update(visible=True),
+                gr.update(visible=False),
+                gr.update(visible=False),
+                gr.update(),
+                gr.update(visible=False),
+            )
+
+        welcome_message = f"Welcome, **{profile.get('fullname', username)}**! You are logged in as **{username}**."
+        
+        updates = [
+            profile,
+            gr.update(visible=False),
+            gr.update(visible=False),
+            gr.update(visible=True, value=welcome_message),
+            gr.update(visible=True),
+        ]
+
+        if has_played:
+            limit_message = "You have already played today. Please come back tomorrow for a new challenge!"
+            updates.extend([
+                gr.update(interactive=False),
+                gr.update(visible=True, value=limit_message),
+            ])
+        else:
+            updates.extend([
+                gr.update(interactive=True),
+                gr.update(visible=False),
+            ])
+        
+        return tuple(updates)
+
+    # Use demo.load to set the initial UI state when the app loads with an existing token.
+    # This is the key fix for the UI flickering issue.
+    demo.load(
+        on_login,
+        outputs=[
+            user_profile,
+            login_prompt_md,
+            login_button,
+            logged_in_md,
+            lobby_group,
+            start_btn,
+            limit_msg,
+        ],
+    )
+
+    # The click handler is still needed to initiate the login flow if the user is not logged in.
+    login_button.click(
+        on_login,
+        outputs=[
+            user_profile,
+            login_prompt_md,
+            login_button,
+            logged_in_md,
+            lobby_group,
+            start_btn,
+            limit_msg,
+        ],
+    )
+
+    def start_click(difficulty: str, profile: dict, request: gr.Request):
+        if not profile:
+            gr.Warning("Please log in before starting the game.")
+            # Return no-ops for all outputs to prevent errors
+            return None, 0, "", "", "", "", gr.update(), gr.update(), gr.update()
+            
+        r, idx, rid, s_html, m_html, err = gr_start_game(difficulty, profile["name"], request)
+        return (
+            r,
+            idx,
+            rid,
+            s_html,
+            m_html,
+            gr.update(value=""),
+            gr.update(visible=True),
+            gr.update(visible=False),
+            gr.update(value="")
+        )
+
+    start_btn.click(
+        start_click,
+        inputs=[difficulty, user_profile],
+        outputs=[rounds_state, idx_state, round_id_box, street_html, map_html, result_md, game_group, lobby_group, limit_msg]
+    )
+
+    def on_validate(rid, lat, lng, profile: dict, request: gr.Request):
+        if not profile: return
+        username = profile["name"]
+        _popup, txt, a_lat, a_lng, _score = gr_submit_guess(rid, lat, lng, username, request)
+        yield "", txt + "\n\n[AI] Analyzing image..."
+
+        rnd = get_round(username, rid)
+        if not rnd:
+            yield "", txt + "\n\n[Error] Round not found"
+            return
+        try:
+            img_resp = requests.get(rnd['image_url'])
+            img_resp.raise_for_status()
+            last_text = ""
+            for partial_text in llm_stream_image_text(img_resp.content):
+                last_text = partial_text
+                yield "", txt + "\n\n" + partial_text
+            # After stream completes, compute AI guess and score
+            ai_coords = extract_coords_from_text(last_text) or geocode_text_to_coords(last_text[-256:])
+            if ai_coords:
+                rnd['ai_guess'] = ai_coords
+                ai_dist_km = haversine_km(rnd['lat'], rnd['lng'], ai_coords['lat'], ai_coords['lng'])
+                rnd['ai_distance_km'] = float(ai_dist_km)
+                rnd['ai_score'] = score_from_distance_km(ai_dist_km)
+        except Exception as e:
+            yield "", txt + f"\n\n[Error] {e}"
+            return
+
+        # 3) Show popup with both guesses and update scoreboard
+        sess = user_sessions.get(username, {})
+        total_human = sum(float(r.get('human_score', 0.0)) for r in sess.get('rounds', []))
+        total_ai = sum(float(r.get('ai_score', 0.0)) for r in sess.get('rounds', []))
+        round_idx = next((i for i, rr in enumerate(sess.get('rounds', [])) if rr['id'] == rid), 0) + 1
+        # Escape AI analysis to display safely inside HTML
+        import html as _html
+        ai_text_safe = _html.escape(last_text or "")
+        summary_safe = _html.escape(txt)
+        scoreboard_html = (
+            f"<div style='margin:8px 0;padding:24px;background:#09101f;border-radius:18px;color:#f9fafb;border:1px solid rgba(148,163,184,0.35);box-shadow:0 22px 60px rgba(8,12,24,0.6);'>"
+            f"<div style='font-weight:700;font-size:1.25rem;margin-bottom:12px;text-shadow:0 0 12px rgba(8,12,24,0.8);'>Round {round_idx}</div>"
+            f"<div style='margin-bottom:18px;color:#f8fafc;font-size:1rem;line-height:1.55;text-shadow:0 0 10px rgba(8,12,24,0.75);'>{summary_safe}</div>"
+            f"<div style='display:flex;gap:26px;font-size:0.98rem;margin-bottom:18px;flex-wrap:wrap;'>"
+            f"  <span><strong>Human:</strong> {rnd.get('human_score',0):.0f} pts <span style='color:#dbeafe;'>({rnd.get('human_distance_km',0.0):.1f} km)</span></span>"
+            f"  <span><strong>AI:</strong> {rnd.get('ai_score',0):.0f} pts <span style='color:#dbeafe;'>({rnd.get('ai_distance_km',0.0):.1f} km)</span></span>"
+            f"</div>"
+            f"<div style='margin-bottom:16px;font-weight:600;font-size:1rem;color:#e2e8f0;text-shadow:0 0 10px rgba(8,12,24,0.65);'>Totals — Human {total_human:.0f} / AI {total_ai:.0f}</div>"
+            f"<div id='ai-analysis-box' style='background:#f1f5f9; border-radius:14px;border:1px solid rgba(148,163,184,0.45);padding:16px;max-height:280px;overflow:auto;'>"
+            f"  <div style='margin-bottom:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;'>AI Analysis</div>"
+            f"  <pre style='margin:0;background:transparent;color:inherit;font-size:1rem;white-space:pre-wrap;line-height:1.6;font-family:\"SFMono-Regular\",Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;'>" + ai_text_safe + "</pre>"
+            f"</div>"
+            f"</div>"
+        )
+
+        ai = rnd.get('ai_guess')
+        ai_lat_str = ""
+        ai_lng_str = ""
+        if ai:
+            ai_lat = float(ai.get('lat', 0.0))
+            ai_lng = float(ai.get('lng', 0.0))
+            ai_lat_str = str(ai_lat)
+            ai_lng_str = str(ai_lng)
+
+        popup_html = """
+        <div id="popup-overlay" style="position:fixed;inset:0;background:rgba(8,11,20,0.78);display:flex;align-items:center;justify-content:center;z-index:1000;">
+          <div id="popup-card" style="background:#04070f;padding:26px;border-radius:18px;width:92%;max-width:960px;color:#f9fafb;position:relative;box-shadow:0 28px 80px rgba(4,7,15,0.75);border:1px solid rgba(148,163,184,0.35);" onclick="event.stopPropagation();">
+            <button id="popup-close-next" style="position:absolute;top:16px;right:18px;padding:10px 18px;border-radius:999px;border:1px solid rgba(96,165,250,0.4);background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#f8fafc;font-weight:600;cursor:pointer;box-shadow:0 8px 18px rgba(37,99,235,0.45);">Close & Next</button>
+            <h3 style="margin:0 0 20px;color:#f8fafc;text-shadow:0 0 14px rgba(37,99,235,0.35);">Round Results</h3>
+            __SCOREBOARD__
+            <div id="popup-map" data-rnd-lat="__RND_LAT__" data-rnd-lng="__RND_LNG__" data-h-lat="__H_LAT__" data-h-lng="__H_LNG__" data-ai-lat="__AI_LAT__" data-ai-lng="__AI_LNG__" style="width:100%;height:440px;border-radius:16px;overflow:hidden;border:1px solid rgba(148,163,184,0.35);box-shadow:0 16px 40px rgba(4,7,15,0.72);"></div>
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-top:24px;font-size:0.98rem;color:#e2e8f0;flex-wrap:wrap;gap:14px;">
+              <div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
+                <span style="display:flex;align-items:center;gap:8px;"><span style="display:inline-flex;width:13px;height:13px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,0.6);"></span>G = Ground Truth</span>
+                <span style="display:flex;align-items:center;gap:8px;"><span style="display:inline-flex;width:13px;height:13px;border-radius:50%;background:#f97316;box-shadow:0 0 8px rgba(249,115,22,0.55);"></span>H = Human</span>
+                <span style="display:flex;align-items:center;gap:8px;"><span style="display:inline-flex;width:13px;height:13px;border-radius:50%;background:#2563EB;box-shadow:0 0 8px rgba(37,99,235,0.6);"></span>A = AI</span>
+              </div>
+              <button id="popup-close-next-footer" style="padding:12px 22px;border-radius:12px;border:1px solid rgba(96,165,250,0.4);background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#f8fafc;font-weight:600;cursor:pointer;box-shadow:0 10px 22px rgba(37,99,235,0.48);">Next Round</button>
+            </div>
+          </div>
+        </div>
+        """
+        popup_html = popup_html.replace('__SCOREBOARD__', scoreboard_html) \
+            .replace('__RND_LAT__', str(rnd['lat'])) \
+            .replace('__RND_LNG__', str(rnd['lng'])) \
+            .replace('__H_LAT__', str(float(lat))) \
+            .replace('__H_LNG__', str(float(lng))) \
+            .replace('__AI_LAT__', ai_lat_str) \
+            .replace('__AI_LNG__', ai_lng_str) \
+            .replace('__GMAPS_KEY__', GOOGLE_MAPS_API_KEY or '')
+
+        yield popup_html, (txt + ("\n\n" + (last_text or "")))
+
+    validate_btn.click(on_validate, inputs=[round_id_box, lat_box, lng_box, user_profile], outputs=[popup_html, ai_chat])
+
+    def on_next(r_state: list, idx: int, profile: dict, request: gr.Request):
+        if not profile: return
+        username = profile["name"]
+        idx += 1
+        sess = user_sessions.get(username)
+        if not sess or idx >= len(sess['rounds']):
+            total_human = sum(float(r.get('human_score', 0.0)) for r in sess.get('rounds', []))
+            total_ai = sum(float(r.get('ai_score', 0.0)) for r in sess.get('rounds', []))
+            
+            data_manager.record_game(username, total_human)
+
+            winner_message = "It's a tie!"
+            if total_human > total_ai:
+                winner_message = "Congratulations, you won!"
+            elif total_ai > total_human:
+                winner_message = "The AI won this time."
+
+            summary_html = f"""
+            <div style='text-align:center; padding: 40px; font-size: 1.2em;'>
+                <h2>Game Over!</h2>
+                <p>Here are the final scores:</p>
+                <p><strong>Your Score:</strong> {total_human:.0f}</p>
+                <p><strong>AI's Score:</strong> {total_ai:.0f}</p>
+                <h3>{winner_message}</h3>
+            </div>
+            """
+            return idx, gr.update(value=summary_html), gr.update(value=""), gr.update(value="")
+        r = sess['rounds'][idx]
+        s_html = build_street_html(r['image_url'])
+        return idx, gr.update(value=s_html), gr.update(value=r['id']), gr.update(value="")
+
+    next_btn.click(on_next, inputs=[rounds_state, idx_state, user_profile], outputs=[idx_state, street_html, round_id_box, popup_html])
+
+    # Inject boot JS using load(js=callable) compatible format
+    demo.load(fn=lambda: None, inputs=None, outputs=None, js=APP_BOOT_JS)
+
+
+if __name__ == "__main__":
+    demo.queue().launch(server_name="0.0.0.0", server_port=7860)

data_manager.py

@@ -0,0 +1,92 @@
+import os
+import json
+import tempfile
+from datetime import datetime, timezone
+from huggingface_hub import hf_hub_download, upload_file
+from huggingface_hub.utils import HfHubHTTPError
+
+# Constant for the dataset repository, configurable via environment variable
+DATASET_REPO = os.getenv("HF_DATASET_REPO", "jofthomas/geoguessr_game_of_the_day")
+
+def get_todays_records_path() -> str:
+    """Gets the path for today's game records file, e.g., 'records/2025-10-03.json'."""
+    date_str = datetime.now(timezone.utc).strftime('%Y-%m-%d')
+    return f"records/{date_str}.json"
+
+def get_todays_games(token: str) -> list:
+    """
+    Downloads and reads the game records for the current day from the HF Hub.
+    Returns an empty list if the file for today doesn't exist yet.
+    """
+    filepath = get_todays_records_path()
+    try:
+        # Use the provided token for read access
+        local_path = hf_hub_download(
+            repo_id=DATASET_REPO,
+            filename=filepath,
+            repo_type="dataset",
+            token=token,
+        )
+        with open(local_path, "r", encoding="utf-8") as f:
+            return json.load(f)
+    except HfHubHTTPError as e:
+        if e.response.status_code == 404:
+            return []  # No games played today yet, which is normal.
+        else:
+            print(f"Error downloading daily records: {e}")
+            raise  # Re-raise other HTTP errors
+    except Exception as e:
+        print(f"An unexpected error occurred while getting today's games: {e}")
+        return []
+
+def has_user_played_today(username: str, todays_games: list) -> bool:
+    """Checks if a user's record already exists in today's games."""
+    return any(game.get("username") == username for game in todays_games)
+
+def record_game(username: str, score: float):
+    """
+    Records a completed game to the daily records file on the HF Hub.
+    This function reads the existing file, appends the new record, and uploads it back.
+    It uses the server's write token from environment variables.
+    """
+    write_token = os.getenv("HF_TOKEN", "")
+    if not write_token:
+        print("Warning: Server HF_TOKEN not set. Cannot record game score.")
+        return
+
+    try:
+        # Fetch the latest records using the write token to ensure we have the most recent data
+        todays_games = get_todays_games(token=write_token)
+
+        # Final check to prevent duplicate entries in case of concurrent games
+        if has_user_played_today(username, todays_games):
+            print(f"User {username} has already played today. Skipping record.")
+            return
+
+        todays_games.append({
+            "username": username,
+            "score": score,
+            "timestamp": datetime.now(timezone.utc).isoformat()
+        })
+
+        filepath_in_repo = get_todays_records_path()
+
+        with tempfile.NamedTemporaryFile(mode="w+", delete=False, suffix=".json", encoding="utf-8") as tmp_file:
+            json.dump(todays_games, tmp_file, indent=2)
+            tmp_file_path = tmp_file.name
+
+        upload_file(
+            path_or_fileobj=tmp_file_path,
+            path_in_repo=filepath_in_repo,
+            repo_id=DATASET_REPO,
+            repo_type="dataset",
+            token=write_token,
+            commit_message=f"Game result for {username}"
+        )
+        print(f"Successfully recorded game for {username} with score {score}")
+
+    except Exception as e:
+        print(f"Error recording game for {username}: {e}")
+    finally:
+        if 'tmp_file_path' in locals() and os.path.exists(tmp_file_path):
+            os.remove(tmp_file_path)

reference.py

@@ -0,0 +1,102 @@
+import gradio as gr
+import spaces
+import torch
+from huggingface_hub import hf_hub_download
+from transformers import Mistral3ForConditionalGeneration, AutoTokenizer
+from typing import Any, List, Dict
+import base64
+import mimetypes
+from pathlib import Path
+
+def load_system_prompt(repo_id: str, filename: str) -> dict[str, Any]:
+    file_path = hf_hub_download(repo_id=repo_id, filename=filename)
+    with open(file_path, "r") as file:
+        system_prompt = file.read()
+
+    index_begin_think = system_prompt.find("[THINK]")
+    index_end_think = system_prompt.find("[/THINK]")
+
+    return {
+        "role": "system",
+        "content": [
+            {"type": "text", "text": system_prompt[:index_begin_think]},
+            {
+                "type": "text",
+                "text": system_prompt[index_end_think + len("[/THINK]") :],
+            },
+        ],
+    }
+
+model_id = "mistralai/Magistral-Small-2509"
+tokenizer = AutoTokenizer.from_pretrained(model_id, tokenizer_type="mistral")
+model = Mistral3ForConditionalGeneration.from_pretrained(
+    model_id, torch_dtype=torch.bfloat16, device_map="auto"
+).eval()
+
+
+SYSTEM_PROMPT = load_system_prompt(model_id, "SYSTEM_PROMPT.txt")
+
+@spaces.GPU(duration=120)
+def predict(message: dict, history: list) -> str:
+    # Build messages for the model from history
+    messages = [SYSTEM_PROMPT]
+    for user_msg, assistant_msg in history:
+        messages.append({"role": "user", "content": [{"type": "text", "text": user_msg}]})
+        if assistant_msg:
+             messages.append({"role": "assistant", "content": [{"type": "text", "text": assistant_msg}]})
+
+    # Process current user message (with potential image)
+    user_content = [{"type": "text", "text": message['text']}]
+    if message['files']:
+        # Assuming one image file from multimodal textbox
+        image_path = Path(message['files'][0])
+        image_bytes = image_path.read_bytes()
+        encoded_image = base64.b64encode(image_bytes).decode("utf-8")
+        mime_type, _ = mimetypes.guess_type(image_path)
+        if mime_type is None:
+            mime_type = "image/png"
+        data_url = f"data:{mime_type};base64,{encoded_image}"
+        user_content.append({"type": "image_url", "image_url": {"url": data_url}})
+
+    messages.append({"role": "user", "content": user_content})
+
+    tokenized = tokenizer.apply_chat_template(messages, return_dict=True)
+
+    input_ids = torch.tensor(tokenized.input_ids, device="cuda").unsqueeze(0)
+    attention_mask = torch.tensor(tokenized.attention_mask, device="cuda").unsqueeze(0)
+
+    if 'pixel_values' in tokenized and len(tokenized.pixel_values) > 0:
+        pixel_values = torch.tensor(
+            tokenized.pixel_values[0], dtype=torch.bfloat16, device="cuda"
+        ).unsqueeze(0)
+        image_sizes = torch.tensor(pixel_values.shape[-2:], device="cuda").unsqueeze(0)
+        output = model.generate(
+            input_ids=input_ids,
+            attention_mask=attention_mask,
+            pixel_values=pixel_values,
+            image_sizes=image_sizes,
+        )[0]
+    else:
+        output = model.generate(
+            input_ids=input_ids,
+            attention_mask=attention_mask,
+        )[0]
+
+    decoded_output = tokenizer.decode(
+        output[
+            len(tokenized.input_ids) : (
+                -1 if output[-1] == tokenizer.eos_token_id else len(output)
+            )
+        ]
+    )
+    return decoded_output
+
+demo = gr.ChatInterface(
+    fn=predict,
+    multimodal=True,
+    title="Magistral Chat App",
+    description='Chat with Magistral AI. Upload an image if relevant to your question.<br>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>',
+)
+
+if __name__ == "__main__":
+    demo.launch()

requirements.txt

@@ -0,0 +1,12 @@
+Flask
+python-dotenv 
+requests
+mcp[cli]
+huggingface_hub
+transformers[mistral-common]
+gradio
+torch
+sentencepiece
+spaces
+accelerate
+tokenizers

static/admin.js

@@ -0,0 +1,143 @@
+let map;
+let drawingManager;
+let lastDrawnShape = null;
+let displayedShapes = [];
+
+const difficultyColors = {
+    easy: '#34A853',   // Green
+    medium: '#F9AB00', // Yellow
+    hard: '#EA4335'    // Red
+};
+
+function initAdminMap() {
+    map = new google.maps.Map(document.getElementById('map'), {
+        center: { lat: 20, lng: 0 },
+        zoom: 2,
+    });
+
+    drawingManager = new google.maps.drawing.DrawingManager({
+        drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
+        drawingControl: true,
+        drawingControlOptions: {
+            position: google.maps.ControlPosition.TOP_CENTER,
+            drawingModes: [google.maps.drawing.OverlayType.RECTANGLE],
+        },
+        rectangleOptions: {
+            fillColor: '#F97316',
+            fillOpacity: 0.3,
+            strokeWeight: 1,
+            clickable: true,
+            editable: true,
+            zIndex: 1,
+        },
+    });
+
+    drawingManager.setMap(map);
+
+    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
+        if (lastDrawnShape) {
+            lastDrawnShape.setMap(null);
+        }
+        lastDrawnShape = event.overlay;
+        drawingManager.setDrawingMode(null); // Exit drawing mode
+        document.getElementById('save-zone').disabled = false;
+    });
+
+    document.getElementById('save-zone').addEventListener('click', saveLastZone);
+    document.getElementById('new-zone-btn').addEventListener('click', () => {
+        drawingManager.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE);
+        document.getElementById('save-zone').disabled = true;
+    });
+
+    loadExistingZones();
+}
+
+function saveLastZone() {
+    if (!lastDrawnShape) {
+        alert('Please draw a zone first.');
+        return;
+    }
+
+    const difficulty = document.getElementById('difficulty-select').value;
+    const bounds = lastDrawnShape.getBounds().toJSON();
+
+    const zoneData = {
+        type: 'rectangle',
+        bounds: bounds,
+    };
+
+    fetch('/api/zones', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ difficulty: difficulty, zone: zoneData }),
+    })
+    .then(response => response.json())
+    .then(data => {
+        const statusMsg = document.getElementById('status-message');
+        statusMsg.textContent = data.message || `Error: ${data.error}`;
+        setTimeout(() => statusMsg.textContent = '', 3000);
+        
+        // Clean up the drawn shape and reload all zones to get the new one with its listener
+        if (lastDrawnShape) {
+            lastDrawnShape.setMap(null);
+            lastDrawnShape = null;
+        }
+        document.getElementById('save-zone').disabled = true;
+        loadExistingZones();
+    });
+}
+
+function loadExistingZones() {
+    // Clear existing shapes from the map
+    displayedShapes.forEach(shape => shape.setMap(null));
+    displayedShapes = [];
+
+    fetch('/api/zones')
+        .then(response => response.json())
+        .then(zones => {
+            for (const difficulty in zones) {
+                zones[difficulty].forEach(zone => {
+                    if (zone.type === 'rectangle') {
+                        const rectangle = new google.maps.Rectangle({
+                            bounds: zone.bounds,
+                            map: map,
+                            fillColor: difficultyColors[difficulty],
+                            fillOpacity: 0.35,
+                            strokeColor: difficultyColors[difficulty],
+                            strokeWeight: 2,
+                            editable: false,
+                            clickable: true,
+                        });
+
+                        rectangle.zoneId = zone.id;
+                        
+                        google.maps.event.addListener(rectangle, 'click', function() {
+                            if (confirm('Are you sure you want to delete this zone?')) {
+                                deleteZone(this.zoneId, this);
+                            }
+                        });
+
+                        displayedShapes.push(rectangle);
+                    }
+                });
+            }
+        });
+}
+
+function deleteZone(zoneId, shape) {
+    fetch('/api/zones', {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ zone_id: zoneId })
+    })
+    .then(response => response.json())
+    .then(data => {
+        const statusMsg = document.getElementById('status-message');
+        statusMsg.textContent = data.message || `Error: ${data.error}`;
+        setTimeout(() => statusMsg.textContent = '', 3000);
+
+        if (data.message) {
+            shape.setMap(null);
+        }
+    });
+} 

static/script.js

@@ -0,0 +1,217 @@
+let miniMap, guessMarker, currentRounds = [], currentRoundIdx = 0, aiEventSource = null;
+
+function initIndexApp() {
+    hydrateAuth();
+    document.getElementById('start-btn').addEventListener('click', async () => {
+        const difficulty = document.getElementById('difficulty-select-lobby').value;
+        const url = new URL(window.location.origin + '/game');
+        url.searchParams.set('difficulty', difficulty);
+        window.location.href = url.toString();
+    });
+}
+
+async function initGameApp() {
+    const params = new URLSearchParams(window.location.search);
+    const difficulty = params.get('difficulty') || 'easy';
+    const res = await fetch('/api/start', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ difficulty })
+    });
+    const data = await res.json();
+    if (!res.ok) { alert(data.error || 'Failed to start game'); window.location.href = '/'; return; }
+    currentRounds = data.rounds;
+    currentRoundIdx = 0;
+    document.getElementById('game-container').style.display = 'block';
+    document.getElementById('chat-container').style.display = 'none';
+    document.getElementById('validate-btn').addEventListener('click', validateGuess);
+    document.getElementById('next-round-btn').addEventListener('click', nextRound);
+    const wrapEl = document.getElementById('mini-map-wrap');
+    document.getElementById('map-size-plus').addEventListener('click', (e) => { e.stopPropagation(); resizeMiniMap(wrapEl, 1); });
+    document.getElementById('map-size-minus').addEventListener('click', (e) => { e.stopPropagation(); resizeMiniMap(wrapEl, -1); });
+    showRound();
+}
+
+async function hydrateAuth() {
+    const res = await fetch('/api/me');
+    const me = await res.json();
+    const signedin = document.getElementById('signedin');
+    const signinBtn = document.getElementById('signin-btn');
+    const startBtn = document.getElementById('start-btn');
+    const limitMsg = document.getElementById('limit-msg');
+    if (me.authenticated) {
+        signinBtn.style.display = 'none';
+        signedin.style.display = 'block';
+        document.getElementById('username').textContent = me.username;
+        if (me.can_play_today) {
+            startBtn.disabled = false;
+            limitMsg.style.display = 'none';
+        } else {
+            startBtn.disabled = true;
+            limitMsg.style.display = 'block';
+            limitMsg.textContent = `You already played today. Try again in ${formatCountdown(me.seconds_until_midnight)}.`;
+            startCountdown(limitMsg, me.seconds_until_midnight);
+        }
+    } else {
+        signinBtn.style.display = 'inline-block';
+        signedin.style.display = 'none';
+        startBtn.disabled = true;
+    }
+}
+
+function formatCountdown(seconds) {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = seconds % 60;
+    return `${pad(h)}:${pad(m)}:${pad(s)}`;
+}
+
+function pad(n) { return n.toString().padStart(2, '0'); }
+
+function startCountdown(el, seconds) {
+    let remaining = seconds;
+    const id = setInterval(() => {
+        remaining -= 1;
+        if (remaining <= 0) { clearInterval(id); location.reload(); return; }
+        el.textContent = `You already played today. Try again in ${formatCountdown(remaining)}.`;
+    }, 1000);
+}
+
+async function startGame() {
+    const difficulty = document.getElementById('difficulty-select-lobby').value;
+    const res = await fetch('/api/start', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ difficulty })
+    });
+    const data = await res.json();
+    if (!res.ok) {
+        alert(data.error || 'Failed to start game');
+        return;
+    }
+    currentRounds = data.rounds;
+    currentRoundIdx = 0;
+    document.getElementById('game-container').style.display = 'block';
+    document.getElementById('chat-container').style.display = 'none';
+    showRound();
+}
+
+function showRound() {
+    const round = currentRounds[currentRoundIdx];
+    const img = document.getElementById('street-image');
+    img.src = round.image_url;
+    document.getElementById('validate-btn').style.display = 'none';
+    initMiniMap();
+}
+
+function initMiniMap() {
+    const miniEl = document.getElementById('mini-map');
+    miniMap = new google.maps.Map(miniEl, {
+        center: { lat: 0, lng: 0 },
+        zoom: 1,
+        streetViewControl: false,
+        mapTypeControl: false,
+        fullscreenControl: false,
+    });
+    miniMap.addListener('click', (e) => {
+        if (miniMap._locked) return;
+        placeGuessMarker(e.latLng);
+        document.getElementById('validate-btn').style.display = 'inline-block';
+    });
+}
+
+function resizeMiniMap(el, delta) {
+    const sizes = ['size-small', 'size-medium', 'size-large'];
+    let idx = sizes.findIndex(c => el.classList.contains(c));
+    if (idx === -1) idx = 1;
+    idx = Math.min(2, Math.max(0, idx + (delta > 0 ? 1 : -1)));
+    sizes.forEach(c => el.classList.remove(c));
+    el.classList.add(sizes[idx]);
+    if (miniMap) {
+        const miniEl = document.getElementById('mini-map');
+        google.maps.event.trigger(miniMap, 'resize');
+        const center = miniMap.getCenter();
+        miniMap.setCenter(center);
+    }
+}
+
+function placeGuessMarker(latLng) {
+    if (guessMarker) guessMarker.setMap(null);
+    guessMarker = new google.maps.Marker({ position: latLng, map: miniMap });
+    miniMap.setCenter(latLng);
+}
+
+async function validateGuess() {
+    if (!guessMarker) { alert('Click on the mini-map to pick your guess.'); return; }
+    const round = currentRounds[currentRoundIdx];
+    const pos = guessMarker.getPosition();
+    const payload = { round_id: round.id, lat: pos.lat(), lng: pos.lng() };
+    const res = await fetch('/api/guess', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
+    const result = await res.json();
+    if (!res.ok) { alert(result.error || 'Guess failed'); return; }
+    miniMap._locked = true;
+    document.getElementById('validate-btn').style.display = 'none';
+    document.getElementById('chat-container').style.display = 'block';
+    const chat = document.getElementById('chat-log');
+    chat.textContent = '';
+    chat.textContent += 'Analyzing image...\n';
+    const aiRes = await fetch('/api/ai_analyze', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ round_id: round.id }) });
+    const aiData = await aiRes.json();
+    if (!aiRes.ok) {
+        chat.textContent += `[Error] ${aiData.error || 'AI failed'}\n`;
+        document.getElementById('next-round-btn').disabled = false;
+        openResultsPopup({ actual: result.actual_location, human: result.guess_location });
+        return;
+    }
+    chat.textContent += (aiData.text || '') + '\n';
+    openResultsPopup({ actual: result.actual_location, human: result.guess_location });
+    if (aiData.ai_guess) renderAIGuessOnPopup(aiData.ai_guess);
+    document.getElementById('next-round-btn').disabled = false;
+}
+
+function openResultsPopup(points) {
+    const overlay = document.getElementById('popup-overlay');
+    overlay.style.display = 'flex';
+    const popupMap = new google.maps.Map(document.getElementById('popup-map'), { zoom: 3, center: points.actual });
+    new google.maps.Marker({ position: points.actual, map: popupMap, label: 'A' });
+    new google.maps.Marker({ position: points.human, map: popupMap, label: 'H' });
+    new google.maps.Polyline({ path: [points.actual, points.human], geodesic: true, strokeColor: '#F97316', strokeOpacity: 1.0, strokeWeight: 2, map: popupMap });
+    document.getElementById('next-round-btn').disabled = true;
+}
+
+function appendChatToken(t) {
+    const el = document.getElementById('chat-log');
+    const span = document.createElement('span');
+    span.textContent = t;
+    el.appendChild(span);
+    el.scrollTop = el.scrollHeight;
+}
+
+function renderAIGuessOnPopup(ai) {
+    const mapEl = document.getElementById('popup-map');
+    const popupMap = mapEl._map || new google.maps.Map(mapEl, { zoom: 3, center: ai });
+    mapEl._map = popupMap;
+    new google.maps.Marker({ position: ai, map: popupMap, label: 'AI' });
+}
+
+async function nextRound() {
+    if (aiEventSource) { try { aiEventSource.close(); } catch (e) {} }
+    currentRoundIdx += 1;
+    if (currentRoundIdx >= currentRounds.length) {
+        await showFinalResults();
+        return;
+    }
+    document.getElementById('popup-overlay').style.display = 'none';
+    showRound();
+}
+
+async function showFinalResults() {
+    const res = await fetch('/api/session_summary');
+    const data = await res.json();
+    document.getElementById('popup-overlay').style.display = 'none';
+    document.getElementById('game-container').style.display = 'none';
+    const fin = document.getElementById('final-results');
+    fin.style.display = 'block';
+    const total = data.total_score?.toFixed ? data.total_score.toFixed(0) : data.total_score;
+    document.getElementById('final-summary').textContent = `Your total score: ${total} / 15000`;
+}
+
+function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }

static/style.css

@@ -0,0 +1,169 @@
+:root {
+    --primary-color: #F97316; /* Orange */
+    --secondary-color: #EA580C; /* Darker Orange */
+    --accent-color: #FB923C; /* Lighter Orange */
+    --dark-color: #202124;
+    --light-color: #FFFBEB; /* Creamy White */
+    --border-radius: 8px;
+}
+
+body {
+    font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: var(--light-color);
+    color: var(--dark-color);
+}
+
+h1 {
+    text-align: center;
+    margin: 20px 0;
+    color: var(--primary-color);
+    font-size: 2.5rem;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
+
+#game-container {
+    display: flex;
+    justify-content: space-around;
+    margin: 20px;
+    height: 80vh;
+    gap: 20px;
+    display: none; /* Hidden by default */
+}
+
+#streetview-container {
+    width: 50%;
+    height: 100%;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+#map-container {
+    width: 30%;
+    height: 100%;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+#chat-container {
+    width: 20%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--border-radius);
+    background-color: white;
+    padding: 15px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+#streetview, #map, #result-map {
+    height: 100%;
+    width: 100%;
+    border-radius: var(--border-radius);
+}
+
+#chat-log {
+    flex-grow: 1;
+    overflow-y: auto;
+    margin-bottom: 15px;
+    padding: 10px;
+    background-color: #f8f9fa;
+    border-radius: var(--border-radius);
+}
+
+#chat-log div {
+    margin-bottom: 10px;
+    padding: 8px 12px;
+    background-color: white;
+    border-radius: 18px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+}
+
+#chat-log div strong {
+    color: var(--primary-color);
+}
+
+#controls {
+    display: flex;
+    justify-content: center;
+}
+
+button {
+    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+button:hover {
+    background: linear-gradient(135deg, #D9500B, #E56A15); /* Slightly darker gradient on hover */
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+#result-screen {
+    margin: 20px auto;
+    max-width: 800px;
+    text-align: center;
+    background-color: white;
+    padding: 30px;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+#result-summary {
+    margin: 20px 0;
+    font-size: 1.2rem;
+}
+
+#result-summary p {
+    margin: 10px 0;
+}
+
+.marker-label {
+    color: white;
+    font-weight: bold;
+    text-align: center;
+    padding: 2px 6px;
+    border-radius: 50%;
+}
+
+#lobby-container {
+    max-width: 500px;
+    margin: 40px auto;
+    padding: 30px;
+    background-color: white;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    text-align: center;
+}
+
+#lobby-container h2 {
+    margin-top: 0;
+    margin-bottom: 20px;
+}
+
+#lobby-container hr {
+    margin: 20px 0;
+    border: 0;
+    border-top: 1px solid #eee;
+}
+
+#lobby-container input {
+    width: calc(100% - 22px);
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: var(--border-radius);
+}
+
+/* Hide the address text in Street View */
+.gm-iv-address {
+    display: none !important;
+}

templates/admin.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Admin Panel - LLM GeoGuessr</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <style>
+        h1 {
+            color: var(--dark-color);
+            text-align: center;
+        }
+        #controls {
+            width: 90%;
+            max-width: 800px;
+            margin: 20px auto;
+            padding: 20px;
+            background-color: white;
+            border-radius: var(--border-radius);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            flex-wrap: wrap;
+        }
+        #controls h2 {
+            display: none; /* Title is obvious from context */
+        }
+        #controls .control-item {
+            margin: 5px 10px;
+        }
+        #controls .control-item p {
+            margin: 0;
+            font-size: 0.9rem;
+            color: #555;
+        }
+        #controls .control-item label {
+            margin-right: 5px;
+        }
+        #controls .control-item select,
+        #controls .control-item button {
+            width: 100%;
+            padding: 10px;
+            box-sizing: border-box; /* Ensures padding is included in the width */
+        }
+        #map {
+            height: 75vh;
+            margin: 0 auto;
+            width: calc(100% - 40px);
+            border-radius: var(--border-radius);
+        }
+    </style>
+</head>
+<body>
+    <h1>Admin Panel</h1>
+    <div id="controls">
+        <div class="control-item">
+            <p>Select "Draw" then use the rectangle tool on the map.</p>
+        </div>
+        <div class="control-item">
+            <button id="new-zone-btn">Draw New Zone</button>
+        </div>
+        <div class="control-item">
+            <label for="difficulty-select">Difficulty:</label>
+            <select id="difficulty-select">
+                <option value="easy">Easy</option>
+                <option value="medium">Medium</option>
+                <option value="hard">Hard</option>
+            </select>
+        </div>
+        <div class="control-item">
+            <button id="save-zone" disabled>Save Zone</button>
+        </div>
+    </div>
+    <div id="status-message-container" style="text-align: center; margin-bottom: 10px;">
+         <p id="status-message"></p>
+    </div>
+    <div id="map"></div>
+    <script src="{{ url_for('static', filename='admin.js') }}"></script>
+    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&libraries=drawing&callback=initAdminMap"></script>
+</body>
+</html> 

templates/game.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Play - LLM GeoGuessr</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <style>
+        #image-container { position: relative; max-width: 960px; margin: 0 auto; }
+        #street-image { width: 100%; height: auto; border-radius: var(--border-radius); box-shadow: 0 4px 6px rgba(0,0,0,0.1); user-select: none; }
+        #mini-map-wrap { position: absolute; right: 10px; bottom: 10px; border: 2px solid #fff; border-radius: var(--border-radius); box-shadow: 0 2px 8px rgba(0,0,0,0.2); background: #fff; }
+        #mini-map-wrap.size-small { width: 220px; height: 140px; }
+        #mini-map-wrap.size-medium { width: 280px; height: 180px; }
+        #mini-map-wrap.size-large { width: 420px; height: 270px; }
+        #mini-map { width: 100%; height: 100%; cursor: pointer; }
+        #map-controls { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: row; gap: 6px; z-index: 5; }
+        .map-ctrl { width: 34px; height: 28px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.2); background: #202124; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.25); cursor: pointer; font-weight: 600; line-height: 26px; }
+        .map-ctrl:hover { background: #3c4043; }
+        #validate-btn { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; display: none; }
+        #chat-container { position: absolute; left: 10px; bottom: 10px; width: 360px; max-height: 45%; background: rgba(255,255,255,0.95); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); padding: 12px; overflow: hidden; z-index: 20; }
+        #chat-log { overflow-y: auto; max-height: calc(45vh - 64px); white-space: pre-wrap; font-size: 0.95rem; line-height: 1.3; }
+        #popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 1000; }
+        #popup-card { background: white; padding: 20px; border-radius: var(--border-radius); width: 90%; max-width: 900px; }
+        #popup-map { width: 100%; height: 420px; border-radius: var(--border-radius); }
+    </style>
+</head>
+<body>
+    <h1>Play</h1>
+    <div id="game-container">
+        <div id="image-container">
+            <img id="street-image" alt="Street View" />
+            <div id="mini-map-wrap" class="size-medium" title="Click to place your guess">
+                <div id="mini-map"></div>
+                <div id="map-controls">
+                    <button id="map-size-minus" class="map-ctrl">−</button>
+                    <button id="map-size-plus" class="map-ctrl">+</button>
+                </div>
+            </div>
+            <button id="validate-btn">Validate Guess</button>
+        </div>
+        <div id="chat-container" style="display:none;">
+            <h3>AI Analysis</h3>
+            <div id="chat-log"></div>
+        </div>
+    </div>
+
+    <div id="popup-overlay">
+        <div id="popup-card">
+            <h3>Round Results</h3>
+            <div id="popup-map"></div>
+            <div style="display:flex; gap:10px; justify-content:flex-end; margin-top:12px;">
+                <button id="next-round-btn">Next</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="final-results" style="display:none;" class="muted">
+        <h2>Game Complete</h2>
+        <p id="final-summary"></p>
+        <a href="/"><button>Back to Home</button></a>
+    </div>
+
+    <script src="{{ url_for('static', filename='script.js') }}"> </script>
+    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&callback=initGameApp"></script>
+</body>
+</html>
+

templates/index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>LLM GeoGuessr</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <style>
+        #auth-card, #gate-card { max-width: 560px; margin: 20px auto; background: white; padding: 24px; border-radius: var(--border-radius); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+        .muted { color: #666; font-size: 0.95rem; }
+    </style>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="referrer" content="no-referrer" />
+    <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin" />
+    <meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp" />
+    <meta http-equiv="X-Content-Type-Options" content="nosniff" />
+    <meta http-equiv="X-Frame-Options" content="DENY" />
+    <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
+    <meta http-equiv="Cache-Control" content="no-store" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <meta name="google-maps-api-key" content="{{ google_maps_api_key }}" />
+    <meta name="description" content="Daily GeoGuessr-style challenge with LLM rival" />
+    <meta name="theme-color" content="#F97316" />
+    <link rel="preconnect" href="https://maps.googleapis.com" crossorigin>
+    <link rel="preconnect" href="https://maps.gstatic.com" crossorigin>
+    <link rel="dns-prefetch" href="https://maps.googleapis.com">
+    <link rel="dns-prefetch" href="https://maps.gstatic.com">
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>🗺️</text></svg>">
+    <meta name="robots" content="noindex, nofollow">
+</head>
+<body>
+    <h1>LLM GeoGuessr</h1>
+
+    <div id="auth-card">
+        <div id="auth-section">
+            <p class="muted">Sign in to play today’s single round set.</p>
+            <a id="signin-btn" href="/login"><button>Sign in with Hugging Face</button></a>
+            <div id="signedin" style="display:none;">
+                <p>Signed in as <strong id="username"></strong></p>
+                <a href="/logout"><button>Sign out</button></a>
+            </div>
+        </div>
+    </div>
+
+    <div id="gate-card">
+        <div id="play-gate">
+            <label for="difficulty-select-lobby">Choose a difficulty:</label>
+            <select id="difficulty-select-lobby">
+                <option value="easy">Easy</option>
+                <option value="medium">Medium</option>
+                <option value="hard">Hard</option>
+            </select>
+            <button id="start-btn" disabled>Start Today’s Game</button>
+            <p id="limit-msg" class="muted" style="display:none;"></p>
+        </div>
+    </div>
+
+    <script src="{{ url_for('static', filename='script.js') }}"></script>
+    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&callback=initIndexApp"></script>
+</body>
+</html> 

zones.json

@@ -0,0 +1,66 @@
+{
+    "easy": [
+        {
+            "type": "rectangle",
+            "bounds": {
+                "south": 48.8336736971006,
+                "west": 2.28515625,
+                "north": 48.87885155432368,
+                "east": 2.39776611328125
+            },
+            "id": "fc849008dae8481092eb79750ffb29b3"
+        },
+        {
+            "type": "rectangle",
+            "bounds": {
+                "south": 35.66847408359237,
+                "west": 139.62718704877395,
+                "north": 35.737615509324385,
+                "east": 139.8218510502388
+            },
+            "id": "898886b44cad43b9abfec296a553daea"
+        },
+        {
+            "type": "rectangle",
+            "bounds": {
+                "south": 37.536938882023136,
+                "west": 126.94755460738277,
+                "north": 37.557898527241505,
+                "east": 127.01244260787105
+            },
+            "id": "ba27424f2f584ed0b238795608503149"
+        },
+        {
+            "type": "rectangle",
+            "bounds": {
+                "south": 18.953448012353313,
+                "west": 72.81336899465802,
+                "north": 18.976825403712557,
+                "east": 72.83911820120099
+            },
+            "id": "71ec558ad7d7476297452801a170f10c"
+        },
+        {
+            "type": "rectangle",
+            "bounds": {
+                "south": 40.713060179679026,
+                "west": -74.00079248380419,
+                "north": 40.76040587151275,
+                "east": -73.97933481168505
+            },
+            "id": "c03e32aeb33a444f8eac20b24d946b34"
+        },
+        {
+            "type": "rectangle",
+            "bounds": {
+                "south": 37.77180843179515,
+                "west": -122.4442846812313,
+                "north": 37.80328200680126,
+                "east": -122.40857911482505
+            },
+            "id": "41ce7507e12a44b8b964d9c1d2755c42"
+        }
+    ],
+    "medium": [],
+    "hard": []
+}