UI changes

app.py

@@ -76,6 +76,7 @@ def generate_id():
 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"
@@ -177,18 +178,6 @@ def llm_stream_image_text(image_bytes: bytes):
         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:
@@ -387,7 +376,7 @@ def gr_submit_guess(round_id: str, lat: float, lng: float, username: str, reques
         <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 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>
@@ -417,6 +406,8 @@ def gr_submit_guess(round_id: str, lat: float, lng: float, username: str, reques
        .replace('__RND_LNG__', str(rnd['lng']))\
        .replace('__H_LAT__', str(float(lat)))\
        .replace('__H_LNG__', str(float(lng)))\
+       .replace('__AI_LAT__', str(float(lat)))\
+       .replace('__AI_LNG__', str(float(lng)))\
        .replace('__GMAPS_KEY__', GOOGLE_MAPS_API_KEY or '')
     return popup_html, result_text, rnd['lat'], rnd['lng'], score
 
@@ -446,34 +437,6 @@ def geocode_text_to_coords(query: str) -> Optional[Dict[str, float]]:
     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)
-    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:
@@ -571,16 +534,16 @@ APP_BOOT_JS = """
         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') });
+            const aMk = new google.maps.Marker({ position: ai, map: m, label: markerLabel('M'), icon: markerIcon('#f97316', '#c2410c') });
             bounds.extend(aMk.getPosition());
-            new google.maps.Polyline({ path: [rnd, ai], geodesic: true, strokeColor: '#2563EB', strokeOpacity: 1.0, strokeWeight: 2, map: m });
+            new google.maps.Polyline({ path: [rnd, ai], geodesic: true, strokeColor: '#f97316', 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') });
+            const hMk = new google.maps.Marker({ position: human, map: m, label: markerLabel('H'), icon: markerIcon('#2563EB', '#1e3a8a') });
             bounds.extend(hMk.getPosition());
-            new google.maps.Polyline({ path: [rnd, human], geodesic: true, strokeColor: '#f97316', strokeOpacity: 1.0, strokeWeight: 2, map: m });
+            new google.maps.Polyline({ path: [rnd, human], geodesic: true, strokeColor: '#2563EB', strokeOpacity: 1.0, strokeWeight: 2, map: m });
         }
         const ne = bounds.getNorthEast();
         const sw = bounds.getSouthWest();
@@ -688,9 +651,7 @@ with gr.Blocks(css=APP_CSS, title="LLM GeoGuessr") as demo:
     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")
+        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:
@@ -704,8 +665,8 @@ with gr.Blocks(css=APP_CSS, title="LLM GeoGuessr") as demo:
         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")
+        ai_chat = gr.Textbox(label="AI Analysis", interactive=False, elem_id="ai_chat", lines=15)
+        next_btn = gr.Button("Next", visible=False, elem_id="next_btn")
         final_md = gr.Markdown(visible=True)
 
     def on_login(token: gr.OAuthToken | None):
@@ -790,13 +751,13 @@ with gr.Blocks(css=APP_CSS, title="LLM GeoGuessr") as demo:
         ],
     )
 
-    def start_click(difficulty: str, profile: dict, request: gr.Request):
+    def start_click(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)
+        r, idx, rid, s_html, m_html, err = gr_start_game("easy", profile["name"], request)
         return (
             r,
             idx,
@@ -811,7 +772,7 @@ with gr.Blocks(css=APP_CSS, title="LLM GeoGuessr") as demo:
 
     start_btn.click(
         start_click,
-        inputs=[difficulty, user_profile],
+        inputs=[user_profile],
         outputs=[rounds_state, idx_state, round_id_box, street_html, map_html, result_md, game_group, lobby_group, limit_msg]
     )
 
@@ -887,8 +848,8 @@ with gr.Blocks(css=APP_CSS, title="LLM GeoGuessr") as demo:
             <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>
+                <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>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:#f97316;box-shadow:0 0 8px rgba(249,115,22,0.55);"></span>M = Magistral</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>