Spaces:
Running
Running
Commit
·
3b90ae7
0
Parent(s):
Initial commit: Add app files and metadata (excluding audio files)
Browse files- .gitignore +4 -0
- README.md +29 -0
- app.py +1050 -0
- data/dataset.csv +0 -0
- player_runs.csv +26 -0
- requirements.txt +8 -0
.gitignore
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
venv/
|
| 2 |
+
__pycache__/
|
| 3 |
+
game_app2.py
|
| 4 |
+
game_app3.py
|
README.md
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
---
|
| 2 |
+
title: Audio Geo-Localization Game
|
| 3 |
+
emoji: 🎵🌍
|
| 4 |
+
colorFrom: blue
|
| 5 |
+
colorTo: green
|
| 6 |
+
sdk: gradio
|
| 7 |
+
sdk_version: "5.49.1"
|
| 8 |
+
app_file: app.py
|
| 9 |
+
pinned: false
|
| 10 |
+
---
|
| 11 |
+
|
| 12 |
+
# Audio Geo-Localization Game
|
| 13 |
+
|
| 14 |
+
An interactive game where players listen to audio clips and guess their geographic location on a world map.
|
| 15 |
+
|
| 16 |
+
## How to Play
|
| 17 |
+
|
| 18 |
+
1. Listen to the audio clip
|
| 19 |
+
2. Click on the interactive map to set your guess coordinates
|
| 20 |
+
3. Submit your answer
|
| 21 |
+
4. View the correct answer and your error distance
|
| 22 |
+
|
| 23 |
+
## Features
|
| 24 |
+
|
| 25 |
+
- Interactive world map with zoom and pan
|
| 26 |
+
- Audio playback for location clues
|
| 27 |
+
- Real-time coordinate input
|
| 28 |
+
- Previous round answer display with OpenStreetMap links
|
| 29 |
+
|
app.py
ADDED
|
@@ -0,0 +1,1050 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
from __future__ import annotations
|
| 2 |
+
|
| 3 |
+
import csv
|
| 4 |
+
import datetime as dt
|
| 5 |
+
import math
|
| 6 |
+
import random
|
| 7 |
+
from dataclasses import dataclass
|
| 8 |
+
from pathlib import Path
|
| 9 |
+
from typing import Dict, List, Optional, Tuple
|
| 10 |
+
|
| 11 |
+
import numpy as np
|
| 12 |
+
|
| 13 |
+
if not hasattr(np, "bool"): # pandas<2 compatibility on numpy>=2
|
| 14 |
+
np.bool = bool # type: ignore[attr-defined]
|
| 15 |
+
|
| 16 |
+
EXAMPLE_PROMPT = "## Input-Output Example. When you submit an answer, the following lines will display the last input and the corresponding correct answer."
|
| 17 |
+
LAST_PROMPT = "## The input and the correct output of the last question."
|
| 18 |
+
import pandas as pd
|
| 19 |
+
from PIL import Image, ImageDraw
|
| 20 |
+
import plotly.graph_objects as go
|
| 21 |
+
def _create_plotly_map(marker_lat: Optional[float] = None, marker_lon: Optional[float] = None):
|
| 22 |
+
"""Create a Plotly map figure (OpenStreetMap) with optional visible marker.
|
| 23 |
+
Also adds a dense transparent grid of points so plotly_click 能在任意位置触发。
|
| 24 |
+
"""
|
| 25 |
+
# Dense transparent grid points to capture clicks anywhere on the map
|
| 26 |
+
grid_lats: List[float] = []
|
| 27 |
+
grid_lons: List[float] = []
|
| 28 |
+
# 1° 网格,尽量保证任意点击都能命中到一个数据点
|
| 29 |
+
for lat in range(-90, 91, 1):
|
| 30 |
+
for lon in range(-180, 181, 1):
|
| 31 |
+
grid_lats.append(float(lat))
|
| 32 |
+
grid_lons.append(float(lon))
|
| 33 |
+
|
| 34 |
+
fig = go.Figure()
|
| 35 |
+
fig.add_trace(
|
| 36 |
+
go.Scattermap(
|
| 37 |
+
lat=grid_lats,
|
| 38 |
+
lon=grid_lons,
|
| 39 |
+
mode="markers",
|
| 40 |
+
marker=go.scattermap.Marker(size=40, color="#000"),
|
| 41 |
+
opacity=0.01, # 透明但可点中
|
| 42 |
+
hoverinfo="skip",
|
| 43 |
+
name="grid",
|
| 44 |
+
)
|
| 45 |
+
)
|
| 46 |
+
|
| 47 |
+
if marker_lat is not None and marker_lon is not None:
|
| 48 |
+
fig.add_trace(
|
| 49 |
+
go.Scattermap(
|
| 50 |
+
lat=[marker_lat],
|
| 51 |
+
lon=[marker_lon],
|
| 52 |
+
mode="markers",
|
| 53 |
+
marker=go.scattermap.Marker(size=16, color="red"),
|
| 54 |
+
hoverinfo="text",
|
| 55 |
+
text=["Your guess"],
|
| 56 |
+
name="marker",
|
| 57 |
+
)
|
| 58 |
+
)
|
| 59 |
+
|
| 60 |
+
fig.update_layout(
|
| 61 |
+
map=dict(style="open-street-map", center=dict(lat=20, lon=0), zoom=2),
|
| 62 |
+
margin=dict(l=0, r=0, t=0, b=0),
|
| 63 |
+
height=600,
|
| 64 |
+
clickmode="event+select", # 明确开启点击事件
|
| 65 |
+
dragmode="pan",
|
| 66 |
+
)
|
| 67 |
+
return fig
|
| 68 |
+
import gradio as gr
|
| 69 |
+
|
| 70 |
+
|
| 71 |
+
|
| 72 |
+
BASE_DIR = Path(__file__).resolve().parent
|
| 73 |
+
DATASET_PATH = BASE_DIR / "data" / "dataset.csv"
|
| 74 |
+
AUDIO_BASE_DIR = BASE_DIR / "data" / "audios"
|
| 75 |
+
LOG_PATH = BASE_DIR / "player_runs.csv"
|
| 76 |
+
RECENT_COLUMNS = ["timestamp", "player_id", "question_id", "distance_km"]
|
| 77 |
+
|
| 78 |
+
|
| 79 |
+
@dataclass
|
| 80 |
+
class Sample:
|
| 81 |
+
question_id: str
|
| 82 |
+
audio_path: Path
|
| 83 |
+
longitude: float
|
| 84 |
+
latitude: float
|
| 85 |
+
city: str
|
| 86 |
+
country: str
|
| 87 |
+
continent: str
|
| 88 |
+
description: str
|
| 89 |
+
title: str
|
| 90 |
+
|
| 91 |
+
|
| 92 |
+
def _load_samples() -> List[Sample]:
|
| 93 |
+
if not DATASET_PATH.exists():
|
| 94 |
+
raise FileNotFoundError(f"Dataset not found at {DATASET_PATH}")
|
| 95 |
+
|
| 96 |
+
df = pd.read_csv(DATASET_PATH)
|
| 97 |
+
start_idx = int(len(df) * 0.9)
|
| 98 |
+
test_df = df.iloc[start_idx:].reset_index(drop=True)
|
| 99 |
+
|
| 100 |
+
samples: List[Sample] = []
|
| 101 |
+
missing_audio = 0
|
| 102 |
+
missing_coords = 0
|
| 103 |
+
|
| 104 |
+
for row in test_df.itertuples():
|
| 105 |
+
audio_path = AUDIO_BASE_DIR / getattr(row, "mp3name")
|
| 106 |
+
longitude = getattr(row, "longitude")
|
| 107 |
+
latitude = getattr(row, "latitude")
|
| 108 |
+
|
| 109 |
+
if math.isnan(longitude) or math.isnan(latitude):
|
| 110 |
+
missing_coords += 1
|
| 111 |
+
continue
|
| 112 |
+
|
| 113 |
+
if not audio_path.exists():
|
| 114 |
+
missing_audio += 1
|
| 115 |
+
continue
|
| 116 |
+
|
| 117 |
+
samples.append(
|
| 118 |
+
Sample(
|
| 119 |
+
question_id=str(getattr(row, "key")),
|
| 120 |
+
audio_path=audio_path,
|
| 121 |
+
longitude=float(longitude),
|
| 122 |
+
latitude=float(latitude),
|
| 123 |
+
city=str(getattr(row, "city", "") or ""),
|
| 124 |
+
country=str(getattr(row, "country", "") or ""),
|
| 125 |
+
continent=str(getattr(row, "continent", "") or ""),
|
| 126 |
+
description=str(getattr(row, "description", "") or ""),
|
| 127 |
+
title=str(getattr(row, "title", "") or ""),
|
| 128 |
+
)
|
| 129 |
+
)
|
| 130 |
+
|
| 131 |
+
if not samples:
|
| 132 |
+
raise RuntimeError("No playable samples were found in the test split.")
|
| 133 |
+
|
| 134 |
+
if missing_audio:
|
| 135 |
+
print(f"[game_app] Skipped {missing_audio} samples because audio files are missing.")
|
| 136 |
+
if missing_coords:
|
| 137 |
+
print(f"[game_app] Skipped {missing_coords} samples because coordinates are missing.")
|
| 138 |
+
|
| 139 |
+
return samples
|
| 140 |
+
|
| 141 |
+
|
| 142 |
+
def _get_example_sample() -> Optional[Sample]:
|
| 143 |
+
"""Get the example sample (aporee_45102_51242) for the first round."""
|
| 144 |
+
if not DATASET_PATH.exists():
|
| 145 |
+
return None
|
| 146 |
+
|
| 147 |
+
df = pd.read_csv(DATASET_PATH)
|
| 148 |
+
example_row = df[df["key"] == "aporee_45102_51242"]
|
| 149 |
+
|
| 150 |
+
if example_row.empty:
|
| 151 |
+
return None
|
| 152 |
+
|
| 153 |
+
row = example_row.iloc[0]
|
| 154 |
+
audio_path = AUDIO_BASE_DIR / row["mp3name"]
|
| 155 |
+
|
| 156 |
+
if not audio_path.exists():
|
| 157 |
+
return None
|
| 158 |
+
|
| 159 |
+
return Sample(
|
| 160 |
+
question_id=str(row["key"]),
|
| 161 |
+
audio_path=audio_path,
|
| 162 |
+
longitude=float(row["longitude"]),
|
| 163 |
+
latitude=float(row["latitude"]),
|
| 164 |
+
city=str(row.get("city", "") or ""),
|
| 165 |
+
country=str(row.get("country", "") or ""),
|
| 166 |
+
continent=str(row.get("continent", "") or ""),
|
| 167 |
+
description=str(row.get("description", "") or ""),
|
| 168 |
+
title=str(row.get("title", "") or ""),
|
| 169 |
+
)
|
| 170 |
+
|
| 171 |
+
|
| 172 |
+
SAMPLES: List[Sample] = _load_samples()
|
| 173 |
+
|
| 174 |
+
|
| 175 |
+
def _random_queue() -> List[int]:
|
| 176 |
+
queue = list(range(len(SAMPLES)))
|
| 177 |
+
random.shuffle(queue)
|
| 178 |
+
return queue
|
| 179 |
+
|
| 180 |
+
|
| 181 |
+
|
| 182 |
+
def _latlon_to_text(lat: float, lon: float) -> str:
|
| 183 |
+
return f"Selected latitude {lat:.3f}°, longitude {lon:.3f}°"
|
| 184 |
+
|
| 185 |
+
|
| 186 |
+
def _haversine(lat1: float, lon1: float, lat2: float, lon2: float) -> float:
|
| 187 |
+
r = 6371.0
|
| 188 |
+
phi1, phi2 = math.radians(lat1), math.radians(lat2)
|
| 189 |
+
d_phi = math.radians(lat2 - lat1)
|
| 190 |
+
d_lambda = math.radians(lon2 - lon1)
|
| 191 |
+
|
| 192 |
+
a = math.sin(d_phi / 2.0) ** 2 + math.cos(phi1) * math.cos(phi2) * math.sin(d_lambda / 2.0) ** 2
|
| 193 |
+
c = 2.0 * math.atan2(math.sqrt(a), math.sqrt(1.0 - a))
|
| 194 |
+
return r * c
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
def _base_map_array() -> np.ndarray:
|
| 198 |
+
return np.array(BASE_MAP_IMAGE)
|
| 199 |
+
|
| 200 |
+
|
| 201 |
+
|
| 202 |
+
|
| 203 |
+
def _on_coords_change(lon_text: str, lat_text: str) -> None:
|
| 204 |
+
"""Log coordinate changes to backend terminal for debugging."""
|
| 205 |
+
try:
|
| 206 |
+
lon = float(lon_text) if lon_text else None
|
| 207 |
+
lat = float(lat_text) if lat_text else None
|
| 208 |
+
print(f"[PLOT CLICK] lon={lon} lat={lat}")
|
| 209 |
+
except Exception as e:
|
| 210 |
+
print(f"[PLOT CLICK] parse error: {e} | lon_text={lon_text} lat_text={lat_text}")
|
| 211 |
+
|
| 212 |
+
|
| 213 |
+
def _prepare_clip_info(sample: Sample, round_idx: int) -> str:
|
| 214 |
+
intro_lines = [
|
| 215 |
+
f"## Question ID: {sample.question_id}. Now it's your turn to play."
|
| 216 |
+
]
|
| 217 |
+
return "\n\n".join(intro_lines)
|
| 218 |
+
|
| 219 |
+
|
| 220 |
+
def _append_log(entry: Dict[str, object]) -> None:
|
| 221 |
+
write_header = not LOG_PATH.exists()
|
| 222 |
+
with LOG_PATH.open("a", newline="", encoding="utf-8") as f:
|
| 223 |
+
writer = csv.DictWriter(f, fieldnames=list(entry.keys()))
|
| 224 |
+
if write_header:
|
| 225 |
+
writer.writeheader()
|
| 226 |
+
writer.writerow(entry)
|
| 227 |
+
|
| 228 |
+
|
| 229 |
+
def _load_recent_runs(limit: int = 5) -> List[Dict[str, object]]:
|
| 230 |
+
if not LOG_PATH.exists():
|
| 231 |
+
return []
|
| 232 |
+
|
| 233 |
+
rows = []
|
| 234 |
+
with LOG_PATH.open("r", encoding="utf-8") as f:
|
| 235 |
+
reader = csv.DictReader(f)
|
| 236 |
+
for row in reader:
|
| 237 |
+
rows.append(row)
|
| 238 |
+
return rows[-limit:]
|
| 239 |
+
|
| 240 |
+
|
| 241 |
+
def _format_recent_rows(rows: List[Dict[str, object]]) -> List[List[object]]:
|
| 242 |
+
formatted: List[List[object]] = []
|
| 243 |
+
for row in rows:
|
| 244 |
+
timestamp_str = row.get("timestamp", "")
|
| 245 |
+
if timestamp_str:
|
| 246 |
+
try:
|
| 247 |
+
# Parse ISO format timestamp and format as readable string
|
| 248 |
+
dt_obj = dt.datetime.fromisoformat(str(timestamp_str).replace('Z', '+00:00'))
|
| 249 |
+
formatted_timestamp = dt_obj.strftime("%Y-%m-%d %H:%M:%S")
|
| 250 |
+
except (ValueError, AttributeError):
|
| 251 |
+
formatted_timestamp = str(timestamp_str)
|
| 252 |
+
else:
|
| 253 |
+
formatted_timestamp = ""
|
| 254 |
+
|
| 255 |
+
formatted_row = [formatted_timestamp]
|
| 256 |
+
formatted_row.extend([row.get(col, "") for col in RECENT_COLUMNS[1:]])
|
| 257 |
+
formatted.append(formatted_row)
|
| 258 |
+
return formatted
|
| 259 |
+
|
| 260 |
+
|
| 261 |
+
def _format_previous_answer(sample: Optional[Sample], is_example: bool = False, distance_km: Optional[float] = None, guess_lat: Optional[float] = None, guess_lon: Optional[float] = None) -> str:
|
| 262 |
+
"""Format the previous answer display with location info and OpenStreetMap link."""
|
| 263 |
+
if sample is None:
|
| 264 |
+
return ""
|
| 265 |
+
|
| 266 |
+
lat = sample.latitude
|
| 267 |
+
lon = sample.longitude
|
| 268 |
+
city = sample.city or "Unknown city"
|
| 269 |
+
country = sample.country or "Unknown country"
|
| 270 |
+
continent = sample.continent or "Unknown continent"
|
| 271 |
+
|
| 272 |
+
# Create OpenStreetMap link
|
| 273 |
+
osm_link = f"https://www.openstreetmap.org/?mlat={lat}&mlon={lon}&zoom=15"
|
| 274 |
+
|
| 275 |
+
lines = [
|
| 276 |
+
f"**Location:** {city}, {country}, {continent}",
|
| 277 |
+
f"**Coordinates:** {lat:.6f}°, {lon:.6f}°",
|
| 278 |
+
]
|
| 279 |
+
|
| 280 |
+
# Add player's prediction for non-example cases
|
| 281 |
+
if not is_example and guess_lat is not None and guess_lon is not None:
|
| 282 |
+
lines.append(f"**Your Prediction:** {guess_lat:.6f}°, {guess_lon:.6f}°")
|
| 283 |
+
|
| 284 |
+
# Add error distance for non-example cases
|
| 285 |
+
if not is_example and distance_km is not None:
|
| 286 |
+
lines.append(f"**Error distance:** {distance_km:.1f} km")
|
| 287 |
+
|
| 288 |
+
lines.append(f"**OpenStreetMap:** [View on map]({osm_link})")
|
| 289 |
+
|
| 290 |
+
# Add example explanation if it's the example sample
|
| 291 |
+
if is_example and sample.question_id == "aporee_45102_51242":
|
| 292 |
+
lines.append("")
|
| 293 |
+
lines.append("**Explanation:** I can clearly identify the rolling of polyurethane wheels on concrete, the sharp 'pop' of a skateboard's tail hitting the ground to initiate a trick. This firmly places the recording at a skatepark. The background ambiance is that of a bustling city, characterized by the constant, though somewhat distant, hum of traffic. Furthermore, there are several instances of spoken English. The speakers have a clear North American English accent. The combination points to a major city in the United States with a prominent skate culture. New York City is one of the most iconic locations for street skateboarding globally.")
|
| 294 |
+
|
| 295 |
+
return "\n\n".join(lines)
|
| 296 |
+
|
| 297 |
+
|
| 298 |
+
def initialize_round() -> Tuple[Dict[str, object], Dict[str, Optional[float]], str, str, str, str, List[List[object]], str, str, str, str, str]:
|
| 299 |
+
queue = _random_queue()
|
| 300 |
+
current_index = queue.pop()
|
| 301 |
+
|
| 302 |
+
state = {
|
| 303 |
+
"queue": queue,
|
| 304 |
+
"current_index": current_index,
|
| 305 |
+
"round": 1,
|
| 306 |
+
"previous_sample": None, # No previous sample for first round
|
| 307 |
+
"is_example": True, # First round shows example
|
| 308 |
+
}
|
| 309 |
+
|
| 310 |
+
current_sample = SAMPLES[current_index]
|
| 311 |
+
audio_value = str(current_sample.audio_path)
|
| 312 |
+
clip_md = _prepare_clip_info(current_sample, state["round"])
|
| 313 |
+
prompt_text = "Click once on the map to pick your guess. The marker will update to your last selection."
|
| 314 |
+
guess_state = {"lat": None, "lon": None, "pixel": None}
|
| 315 |
+
recent_runs = _format_recent_rows(_load_recent_runs())
|
| 316 |
+
|
| 317 |
+
# For first round, show example sample
|
| 318 |
+
example_sample = _get_example_sample()
|
| 319 |
+
previous_audio = str(example_sample.audio_path) if example_sample else None
|
| 320 |
+
previous_answer = _format_previous_answer(example_sample, is_example=True) if example_sample else ""
|
| 321 |
+
previous_title = EXAMPLE_PROMPT if example_sample else ""
|
| 322 |
+
|
| 323 |
+
return state, guess_state, audio_value, clip_md, _create_plotly_map(), prompt_text, recent_runs, "", "", previous_audio or "", previous_answer, previous_title
|
| 324 |
+
|
| 325 |
+
|
| 326 |
+
def _next_sample(state: Dict[str, object]) -> Sample:
|
| 327 |
+
queue: List[int] = state["queue"]
|
| 328 |
+
if not queue:
|
| 329 |
+
queue.extend(_random_queue())
|
| 330 |
+
|
| 331 |
+
next_index = queue.pop()
|
| 332 |
+
state["current_index"] = next_index
|
| 333 |
+
state["round"] = state.get("round", 1) + 1
|
| 334 |
+
return SAMPLES[next_index]
|
| 335 |
+
|
| 336 |
+
|
| 337 |
+
def _ensure_guess_state(state: Optional[Dict[str, Optional[float]]]) -> Dict[str, Optional[float]]:
|
| 338 |
+
if not isinstance(state, dict):
|
| 339 |
+
return {"lat": None, "lon": None, "pixel": None}
|
| 340 |
+
return {
|
| 341 |
+
"lat": state.get("lat"),
|
| 342 |
+
"lon": state.get("lon"),
|
| 343 |
+
"pixel": state.get("pixel"),
|
| 344 |
+
}
|
| 345 |
+
|
| 346 |
+
|
| 347 |
+
|
| 348 |
+
def submit_guess(
|
| 349 |
+
player_id: str,
|
| 350 |
+
game_state: Optional[Dict[str, object]],
|
| 351 |
+
guess_state: Optional[Dict[str, Optional[float]]],
|
| 352 |
+
longitude: str,
|
| 353 |
+
latitude: str,
|
| 354 |
+
) -> Tuple[
|
| 355 |
+
Dict[str, object],
|
| 356 |
+
Dict[str, Optional[float]],
|
| 357 |
+
str,
|
| 358 |
+
str,
|
| 359 |
+
str,
|
| 360 |
+
str,
|
| 361 |
+
List[List[object]],
|
| 362 |
+
str,
|
| 363 |
+
str,
|
| 364 |
+
str,
|
| 365 |
+
str,
|
| 366 |
+
str,
|
| 367 |
+
]:
|
| 368 |
+
if game_state is None:
|
| 369 |
+
# Re-initialize if state is lost
|
| 370 |
+
return initialize_round()
|
| 371 |
+
|
| 372 |
+
guess_state = _ensure_guess_state(guess_state)
|
| 373 |
+
player_id = (player_id or "").strip()
|
| 374 |
+
if not player_id:
|
| 375 |
+
message = "Please enter your player ID before submitting."
|
| 376 |
+
current_sample = SAMPLES[game_state["current_index"]]
|
| 377 |
+
clip_md = _prepare_clip_info(current_sample, game_state.get("round", 1))
|
| 378 |
+
prompt_text = message
|
| 379 |
+
previous_sample = game_state.get("previous_sample")
|
| 380 |
+
previous_audio = str(previous_sample.audio_path) if previous_sample else ""
|
| 381 |
+
previous_distance = game_state.get("previous_distance_km")
|
| 382 |
+
previous_guess_lat = game_state.get("previous_guess_lat")
|
| 383 |
+
previous_guess_lon = game_state.get("previous_guess_lon")
|
| 384 |
+
previous_answer = _format_previous_answer(previous_sample, distance_km=previous_distance, guess_lat=previous_guess_lat, guess_lon=previous_guess_lon) if previous_sample else ""
|
| 385 |
+
is_example = game_state.get("is_example", False)
|
| 386 |
+
previous_title = EXAMPLE_PROMPT if is_example else ""
|
| 387 |
+
return (
|
| 388 |
+
game_state,
|
| 389 |
+
guess_state,
|
| 390 |
+
str(current_sample.audio_path),
|
| 391 |
+
clip_md,
|
| 392 |
+
_create_plotly_map(),
|
| 393 |
+
prompt_text,
|
| 394 |
+
_format_recent_rows(_load_recent_runs()),
|
| 395 |
+
longitude,
|
| 396 |
+
latitude,
|
| 397 |
+
previous_audio,
|
| 398 |
+
previous_answer,
|
| 399 |
+
previous_title,
|
| 400 |
+
)
|
| 401 |
+
|
| 402 |
+
# Parse longitude and latitude from text inputs
|
| 403 |
+
try:
|
| 404 |
+
longitude = longitude.strip() if longitude else ""
|
| 405 |
+
latitude = latitude.strip() if latitude else ""
|
| 406 |
+
|
| 407 |
+
if not longitude or not latitude:
|
| 408 |
+
message = "Please enter both longitude and latitude, or click on the map to select a location."
|
| 409 |
+
current_sample = SAMPLES[game_state["current_index"]]
|
| 410 |
+
clip_md = _prepare_clip_info(current_sample, game_state.get("round", 1))
|
| 411 |
+
prompt_text = message
|
| 412 |
+
previous_sample = game_state.get("previous_sample")
|
| 413 |
+
previous_audio = str(previous_sample.audio_path) if previous_sample else ""
|
| 414 |
+
previous_distance = game_state.get("previous_distance_km")
|
| 415 |
+
previous_answer = _format_previous_answer(previous_sample, distance_km=previous_distance) if previous_sample else ""
|
| 416 |
+
is_example = game_state.get("is_example", False)
|
| 417 |
+
previous_title = EXAMPLE_PROMPT if is_example else ""
|
| 418 |
+
return (
|
| 419 |
+
game_state,
|
| 420 |
+
guess_state,
|
| 421 |
+
str(current_sample.audio_path),
|
| 422 |
+
clip_md,
|
| 423 |
+
gr.update(),
|
| 424 |
+
prompt_text,
|
| 425 |
+
_format_recent_rows(_load_recent_runs()),
|
| 426 |
+
longitude,
|
| 427 |
+
latitude,
|
| 428 |
+
previous_audio,
|
| 429 |
+
previous_answer,
|
| 430 |
+
previous_title,
|
| 431 |
+
)
|
| 432 |
+
|
| 433 |
+
guess_lon = float(longitude)
|
| 434 |
+
guess_lat = float(latitude)
|
| 435 |
+
|
| 436 |
+
# Validate ranges
|
| 437 |
+
if not (-180 <= guess_lon <= 180):
|
| 438 |
+
message = "Longitude must be between -180 and 180."
|
| 439 |
+
current_sample = SAMPLES[game_state["current_index"]]
|
| 440 |
+
clip_md = _prepare_clip_info(current_sample, game_state.get("round", 1))
|
| 441 |
+
prompt_text = message
|
| 442 |
+
previous_sample = game_state.get("previous_sample")
|
| 443 |
+
previous_audio = str(previous_sample.audio_path) if previous_sample else ""
|
| 444 |
+
previous_distance = game_state.get("previous_distance_km")
|
| 445 |
+
previous_answer = _format_previous_answer(previous_sample, distance_km=previous_distance) if previous_sample else ""
|
| 446 |
+
is_example = game_state.get("is_example", False)
|
| 447 |
+
previous_title = EXAMPLE_PROMPT if is_example else ""
|
| 448 |
+
return (
|
| 449 |
+
game_state,
|
| 450 |
+
guess_state,
|
| 451 |
+
str(current_sample.audio_path),
|
| 452 |
+
clip_md,
|
| 453 |
+
gr.update(),
|
| 454 |
+
prompt_text,
|
| 455 |
+
_format_recent_rows(_load_recent_runs()),
|
| 456 |
+
longitude,
|
| 457 |
+
latitude,
|
| 458 |
+
previous_audio,
|
| 459 |
+
previous_answer,
|
| 460 |
+
previous_title,
|
| 461 |
+
)
|
| 462 |
+
|
| 463 |
+
if not (-90 <= guess_lat <= 90):
|
| 464 |
+
message = "Latitude must be between -90 and 90."
|
| 465 |
+
current_sample = SAMPLES[game_state["current_index"]]
|
| 466 |
+
clip_md = _prepare_clip_info(current_sample, game_state.get("round", 1))
|
| 467 |
+
prompt_text = message
|
| 468 |
+
previous_sample = game_state.get("previous_sample")
|
| 469 |
+
previous_audio = str(previous_sample.audio_path) if previous_sample else ""
|
| 470 |
+
previous_distance = game_state.get("previous_distance_km")
|
| 471 |
+
previous_guess_lat = game_state.get("previous_guess_lat")
|
| 472 |
+
previous_guess_lon = game_state.get("previous_guess_lon")
|
| 473 |
+
previous_answer = _format_previous_answer(previous_sample, distance_km=previous_distance, guess_lat=previous_guess_lat, guess_lon=previous_guess_lon) if previous_sample else ""
|
| 474 |
+
is_example = game_state.get("is_example", False)
|
| 475 |
+
previous_title = EXAMPLE_PROMPT if is_example else LAST_PROMPT
|
| 476 |
+
return (
|
| 477 |
+
game_state,
|
| 478 |
+
guess_state,
|
| 479 |
+
str(current_sample.audio_path),
|
| 480 |
+
clip_md,
|
| 481 |
+
gr.update(),
|
| 482 |
+
prompt_text,
|
| 483 |
+
_format_recent_rows(_load_recent_runs()),
|
| 484 |
+
longitude,
|
| 485 |
+
latitude,
|
| 486 |
+
previous_audio,
|
| 487 |
+
previous_answer,
|
| 488 |
+
previous_title,
|
| 489 |
+
)
|
| 490 |
+
except ValueError:
|
| 491 |
+
message = "Invalid coordinates. Please enter valid numbers."
|
| 492 |
+
current_sample = SAMPLES[game_state["current_index"]]
|
| 493 |
+
clip_md = _prepare_clip_info(current_sample, game_state.get("round", 1))
|
| 494 |
+
prompt_text = message
|
| 495 |
+
previous_sample = game_state.get("previous_sample")
|
| 496 |
+
previous_audio = str(previous_sample.audio_path) if previous_sample else ""
|
| 497 |
+
previous_distance = game_state.get("previous_distance_km")
|
| 498 |
+
previous_guess_lat = game_state.get("previous_guess_lat")
|
| 499 |
+
previous_guess_lon = game_state.get("previous_guess_lon")
|
| 500 |
+
previous_answer = _format_previous_answer(previous_sample, distance_km=previous_distance, guess_lat=previous_guess_lat, guess_lon=previous_guess_lon) if previous_sample else ""
|
| 501 |
+
is_example = game_state.get("is_example", False)
|
| 502 |
+
previous_title = EXAMPLE_PROMPT if is_example else LAST_PROMPT
|
| 503 |
+
return (
|
| 504 |
+
game_state,
|
| 505 |
+
guess_state,
|
| 506 |
+
str(current_sample.audio_path),
|
| 507 |
+
clip_md,
|
| 508 |
+
_create_plotly_map(),
|
| 509 |
+
prompt_text,
|
| 510 |
+
_format_recent_rows(_load_recent_runs()),
|
| 511 |
+
longitude,
|
| 512 |
+
latitude,
|
| 513 |
+
previous_audio,
|
| 514 |
+
previous_answer,
|
| 515 |
+
previous_title,
|
| 516 |
+
)
|
| 517 |
+
|
| 518 |
+
current_sample = SAMPLES[game_state["current_index"]]
|
| 519 |
+
true_lat = current_sample.latitude
|
| 520 |
+
true_lon = current_sample.longitude
|
| 521 |
+
|
| 522 |
+
distance_km = _haversine(true_lat, true_lon, guess_lat, guess_lon)
|
| 523 |
+
reveal_lines = [
|
| 524 |
+
f"Real location: {current_sample.city or 'Unknown city'}, {current_sample.country or 'Unknown country'} ({true_lat:.3f}°, {true_lon:.3f}°)",
|
| 525 |
+
f"Your guess: ({guess_lat:.3f}°, {guess_lon:.3f}°)",
|
| 526 |
+
f"Error distance: {distance_km:.1f} km",
|
| 527 |
+
]
|
| 528 |
+
|
| 529 |
+
log_entry = {
|
| 530 |
+
"timestamp": dt.datetime.utcnow().isoformat(),
|
| 531 |
+
"player_id": player_id,
|
| 532 |
+
"question_id": current_sample.question_id,
|
| 533 |
+
"audio_path": str(current_sample.audio_path),
|
| 534 |
+
"guess_latitude": guess_lat,
|
| 535 |
+
"guess_longitude": guess_lon,
|
| 536 |
+
"true_latitude": true_lat,
|
| 537 |
+
"true_longitude": true_lon,
|
| 538 |
+
"distance_km": round(distance_km, 3),
|
| 539 |
+
"city": current_sample.city,
|
| 540 |
+
"country": current_sample.country,
|
| 541 |
+
"continent": current_sample.continent,
|
| 542 |
+
"title": current_sample.title,
|
| 543 |
+
"description": current_sample.description,
|
| 544 |
+
}
|
| 545 |
+
_append_log(log_entry)
|
| 546 |
+
|
| 547 |
+
# Save current sample and distance as previous for next round
|
| 548 |
+
game_state["previous_sample"] = current_sample
|
| 549 |
+
game_state["previous_distance_km"] = distance_km
|
| 550 |
+
game_state["previous_guess_lat"] = guess_lat
|
| 551 |
+
game_state["previous_guess_lon"] = guess_lon
|
| 552 |
+
game_state["is_example"] = False # After first round, it's no longer example
|
| 553 |
+
|
| 554 |
+
next_sample = _next_sample(game_state)
|
| 555 |
+
audio_value = str(next_sample.audio_path)
|
| 556 |
+
clip_md = _prepare_clip_info(next_sample, game_state["round"])
|
| 557 |
+
|
| 558 |
+
new_guess_state = {"lat": None, "lon": None, "pixel": None}
|
| 559 |
+
prompt_text = "Click once on the map to pick your guess. The marker will update to your last selection."
|
| 560 |
+
recent_runs = _format_recent_rows(_load_recent_runs())
|
| 561 |
+
|
| 562 |
+
# Format previous answer (current sample becomes previous for next round)
|
| 563 |
+
previous_audio = str(current_sample.audio_path)
|
| 564 |
+
previous_distance = game_state.get("previous_distance_km")
|
| 565 |
+
previous_guess_lat = game_state.get("previous_guess_lat")
|
| 566 |
+
previous_guess_lon = game_state.get("previous_guess_lon")
|
| 567 |
+
previous_answer = _format_previous_answer(current_sample, is_example=False, distance_km=previous_distance, guess_lat=previous_guess_lat, guess_lon=previous_guess_lon)
|
| 568 |
+
previous_title = LAST_PROMPT
|
| 569 |
+
|
| 570 |
+
return (
|
| 571 |
+
game_state,
|
| 572 |
+
new_guess_state,
|
| 573 |
+
audio_value,
|
| 574 |
+
clip_md,
|
| 575 |
+
gr.update(),
|
| 576 |
+
prompt_text,
|
| 577 |
+
recent_runs,
|
| 578 |
+
"", # Reset longitude input
|
| 579 |
+
"", # Reset latitude input
|
| 580 |
+
previous_audio,
|
| 581 |
+
previous_answer,
|
| 582 |
+
previous_title,
|
| 583 |
+
)
|
| 584 |
+
|
| 585 |
+
|
| 586 |
+
custom_css = """
|
| 587 |
+
h1 {
|
| 588 |
+
font-size: 2.5rem !important;
|
| 589 |
+
font-weight: 700 !important;
|
| 590 |
+
margin-bottom: 1rem !important;
|
| 591 |
+
text-align: center !important;
|
| 592 |
+
}
|
| 593 |
+
.intro-text {
|
| 594 |
+
font-size: 1.1rem !important;
|
| 595 |
+
line-height: 1.6 !important;
|
| 596 |
+
margin-bottom: 1.5rem !important;
|
| 597 |
+
color: #555 !important;
|
| 598 |
+
text-align: center !important;
|
| 599 |
+
}
|
| 600 |
+
/* Apply size restrictions to regular (non-fullscreen) image */
|
| 601 |
+
.gradio-image:not([class*="fullscreen"]) {
|
| 602 |
+
max-width: 100% !important;
|
| 603 |
+
max-height: none !important;
|
| 604 |
+
height: auto !important;
|
| 605 |
+
margin: 0 auto !important;
|
| 606 |
+
display: block !important;
|
| 607 |
+
}
|
| 608 |
+
.gradio-image:not([class*="fullscreen"]) > div {
|
| 609 |
+
max-width: 100% !important;
|
| 610 |
+
max-height: none !important;
|
| 611 |
+
height: auto !important;
|
| 612 |
+
margin: 0 auto !important;
|
| 613 |
+
display: block !important;
|
| 614 |
+
}
|
| 615 |
+
.gradio-image:not([class*="fullscreen"]) iframe,
|
| 616 |
+
.gradio-image:not([class*="fullscreen"]) div[id^="map-"] {
|
| 617 |
+
max-width: 100% !important;
|
| 618 |
+
max-height: none !important;
|
| 619 |
+
height: 800px !important;
|
| 620 |
+
min-height: 800px !important;
|
| 621 |
+
width: 100% !important;
|
| 622 |
+
margin: 0 auto !important;
|
| 623 |
+
display: block !important;
|
| 624 |
+
}
|
| 625 |
+
.gradio-image:not([class*="fullscreen"]) img {
|
| 626 |
+
max-width: 100% !important;
|
| 627 |
+
max-height: 600px !important;
|
| 628 |
+
width: auto !important;
|
| 629 |
+
height: auto !important;
|
| 630 |
+
object-fit: contain !important;
|
| 631 |
+
margin: 0 auto !important;
|
| 632 |
+
}
|
| 633 |
+
/* Ensure map plot has consistent height */
|
| 634 |
+
.gradio-plot {
|
| 635 |
+
min-height: 500px !important;
|
| 636 |
+
height: 500px !important;
|
| 637 |
+
}
|
| 638 |
+
/* Make sure the map column aligns properly */
|
| 639 |
+
.gradio-row > .gradio-column:first-child {
|
| 640 |
+
display: flex !important;
|
| 641 |
+
flex-direction: column !important;
|
| 642 |
+
}
|
| 643 |
+
.gradio-row > .gradio-column:first-child > * {
|
| 644 |
+
flex-shrink: 0 !important;
|
| 645 |
+
}
|
| 646 |
+
/* Allow fullscreen modal to override size restrictions - higher specificity */
|
| 647 |
+
/* Target common Gradio fullscreen containers */
|
| 648 |
+
div[class*="modal"] .gradio-image,
|
| 649 |
+
div[class*="modal"] .gradio-image > div,
|
| 650 |
+
div[class*="modal"] .gradio-image img,
|
| 651 |
+
div[class*="fullscreen"] .gradio-image,
|
| 652 |
+
div[class*="fullscreen"] .gradio-image > div,
|
| 653 |
+
div[class*="fullscreen"] .gradio-image img,
|
| 654 |
+
div[id*="lightbox"] .gradio-image,
|
| 655 |
+
div[id*="lightbox"] .gradio-image img,
|
| 656 |
+
.gradio-image[class*="fullscreen"],
|
| 657 |
+
.gradio-image[class*="fullscreen"] > div,
|
| 658 |
+
.gradio-image[class*="fullscreen"] img {
|
| 659 |
+
max-width: none !important;
|
| 660 |
+
max-height: none !important;
|
| 661 |
+
width: 100% !important;
|
| 662 |
+
height: 100% !important;
|
| 663 |
+
}
|
| 664 |
+
.selection-text {
|
| 665 |
+
font-size: 1.15rem !important;
|
| 666 |
+
text-align: left !important;
|
| 667 |
+
color: #666 !important;
|
| 668 |
+
margin: 0.5rem 0 !important;
|
| 669 |
+
}
|
| 670 |
+
.selection-text * {
|
| 671 |
+
font-size: 1.15rem !important;
|
| 672 |
+
}
|
| 673 |
+
.feedback-box {
|
| 674 |
+
font-size: 1.15rem !important;
|
| 675 |
+
line-height: 1.6 !important;
|
| 676 |
+
}
|
| 677 |
+
.feedback-box p,
|
| 678 |
+
.feedback-box div,
|
| 679 |
+
.feedback-box span {
|
| 680 |
+
font-size: 1.15rem !important;
|
| 681 |
+
line-height: 1.6 !important;
|
| 682 |
+
}
|
| 683 |
+
.clip-info {
|
| 684 |
+
font-size: 1.1rem !important;
|
| 685 |
+
}
|
| 686 |
+
.clip-info p,
|
| 687 |
+
.clip-info div,
|
| 688 |
+
.clip-info span {
|
| 689 |
+
font-size: 1.1rem !important;
|
| 690 |
+
}
|
| 691 |
+
.clip-info label {
|
| 692 |
+
font-size: 1.1rem !important;
|
| 693 |
+
font-weight: 600 !important;
|
| 694 |
+
}
|
| 695 |
+
label {
|
| 696 |
+
font-size: 1rem !important;
|
| 697 |
+
font-weight: 500 !important;
|
| 698 |
+
}
|
| 699 |
+
.form-text input {
|
| 700 |
+
font-size: 0.95rem !important;
|
| 701 |
+
}
|
| 702 |
+
/* Table label styling - only target the label, not table content */
|
| 703 |
+
.gradio-dataframe label,
|
| 704 |
+
[data-testid="dataframe"] label,
|
| 705 |
+
label[for*="recent"],
|
| 706 |
+
.form-group label {
|
| 707 |
+
font-size: 1.15rem !important;
|
| 708 |
+
font-weight: 600 !important;
|
| 709 |
+
}
|
| 710 |
+
"""
|
| 711 |
+
|
| 712 |
+
with gr.Blocks(title="Audio Geo-Localization Game", theme=gr.themes.Soft(), css=custom_css) as demo:
|
| 713 |
+
gr.Markdown("# Audio Geo-Localization Game")
|
| 714 |
+
gr.HTML('<p class="intro-text">Welcome to the Audio Geo-Localization Game. Listen to an ambient audio clip, then guess where it was recorded by clicking on the world map. Submit to see the true location and how close you came.</p>')
|
| 715 |
+
|
| 716 |
+
game_state = gr.State()
|
| 717 |
+
guess_state = gr.State()
|
| 718 |
+
|
| 719 |
+
|
| 720 |
+
# New row for previous question audio and answer with title
|
| 721 |
+
previous_title_display = gr.Markdown(value="", elem_classes=["clip-info"])
|
| 722 |
+
with gr.Row():
|
| 723 |
+
with gr.Column(scale=1):
|
| 724 |
+
previous_audio_player = gr.Audio(
|
| 725 |
+
label="Previous audio clip",
|
| 726 |
+
autoplay=False,
|
| 727 |
+
interactive=False,
|
| 728 |
+
streaming=False,
|
| 729 |
+
visible=True
|
| 730 |
+
)
|
| 731 |
+
with gr.Column(scale=1):
|
| 732 |
+
previous_answer_display = gr.Markdown(
|
| 733 |
+
label="Previous answer",
|
| 734 |
+
value="",
|
| 735 |
+
elem_classes=["clip-info"]
|
| 736 |
+
)
|
| 737 |
+
|
| 738 |
+
# Add separator/divider between previous and current round
|
| 739 |
+
gr.Markdown("---")
|
| 740 |
+
|
| 741 |
+
|
| 742 |
+
|
| 743 |
+
clip_info = gr.Markdown(label="Clip details", elem_classes=["clip-info"])
|
| 744 |
+
|
| 745 |
+
|
| 746 |
+
with gr.Row():
|
| 747 |
+
with gr.Column(scale=2):
|
| 748 |
+
map_component = gr.Plot(
|
| 749 |
+
value=_create_plotly_map(),
|
| 750 |
+
label="World map (click to set your guess)",
|
| 751 |
+
elem_classes=["gradio-image"]
|
| 752 |
+
)
|
| 753 |
+
|
| 754 |
+
with gr.Column(scale=1):
|
| 755 |
+
player_id = gr.Textbox(label="Player ID", placeholder="Enter an identifier so scores can be tracked", elem_classes=["form-text"])
|
| 756 |
+
|
| 757 |
+
audio_player = gr.Audio(label="Mystery audio clip", autoplay=False, interactive=False, streaming=False)
|
| 758 |
+
|
| 759 |
+
selection_text = gr.Markdown("Click once on the map to pick your guess. The marker will update to your last selection.", elem_classes=["selection-text"])
|
| 760 |
+
|
| 761 |
+
with gr.Row():
|
| 762 |
+
longitude_input = gr.Textbox(
|
| 763 |
+
label="Longitude",
|
| 764 |
+
placeholder="Enter longitude or click map",
|
| 765 |
+
elem_classes=["form-text"],
|
| 766 |
+
elem_id="lon_input"
|
| 767 |
+
)
|
| 768 |
+
latitude_input = gr.Textbox(
|
| 769 |
+
label="Latitude",
|
| 770 |
+
placeholder="Enter latitude or click map",
|
| 771 |
+
elem_classes=["form-text"],
|
| 772 |
+
elem_id="lat_input"
|
| 773 |
+
)
|
| 774 |
+
|
| 775 |
+
submit_button = gr.Button("Submit Guess", variant="primary")
|
| 776 |
+
recent_table = gr.Dataframe(
|
| 777 |
+
headers=[
|
| 778 |
+
"timestamp",
|
| 779 |
+
"player_id",
|
| 780 |
+
"question_id",
|
| 781 |
+
"distance_km",
|
| 782 |
+
],
|
| 783 |
+
datatype=["str", "str", "str", "number"],
|
| 784 |
+
value=[],
|
| 785 |
+
interactive=False,
|
| 786 |
+
label="Recent submissions (latest last)",
|
| 787 |
+
wrap=True,
|
| 788 |
+
)
|
| 789 |
+
|
| 790 |
+
demo.load(
|
| 791 |
+
initialize_round,
|
| 792 |
+
inputs=None,
|
| 793 |
+
outputs=[game_state, guess_state, audio_player, clip_info, map_component, selection_text, recent_table, longitude_input, latitude_input, previous_audio_player, previous_answer_display, previous_title_display]
|
| 794 |
+
)
|
| 795 |
+
|
| 796 |
+
# 后端监听文本框变化,在终端打印坐标(便于你观察点击数据是否到达后端)
|
| 797 |
+
longitude_input.change(_on_coords_change, inputs=[longitude_input, latitude_input], outputs=[])
|
| 798 |
+
latitude_input.change(_on_coords_change, inputs=[longitude_input, latitude_input], outputs=[])
|
| 799 |
+
|
| 800 |
+
# Attach plotly_click to update the lon/lat textboxes (no Python roundtrip)
|
| 801 |
+
plotly_click_js = r"""
|
| 802 |
+
() => {
|
| 803 |
+
console.log('[PLOTLY SETUP] Starting plotly click handler setup...');
|
| 804 |
+
|
| 805 |
+
const updateInputs = (lat, lon) => {
|
| 806 |
+
console.log('[PLOTLY CLICK] Received coordinates:', {lat, lon});
|
| 807 |
+
|
| 808 |
+
// Method 1: Try Gradio component API
|
| 809 |
+
if (window.gradio_app) {
|
| 810 |
+
try {
|
| 811 |
+
const components = window.gradio_app.__components || {};
|
| 812 |
+
Object.keys(components).forEach(key => {
|
| 813 |
+
const comp = components[key];
|
| 814 |
+
if (comp && comp.props && comp.props.elem_id) {
|
| 815 |
+
if (comp.props.elem_id === 'lon_input' && comp.component) {
|
| 816 |
+
comp.component.value = Number(lon).toFixed(6);
|
| 817 |
+
comp.component.dispatch('change');
|
| 818 |
+
console.log('[PLOTLY CLICK] Updated longitude via Gradio API');
|
| 819 |
+
}
|
| 820 |
+
if (comp.props.elem_id === 'lat_input' && comp.component) {
|
| 821 |
+
comp.component.value = Number(lat).toFixed(6);
|
| 822 |
+
comp.component.dispatch('change');
|
| 823 |
+
console.log('[PLOTLY CLICK] Updated latitude via Gradio API');
|
| 824 |
+
}
|
| 825 |
+
}
|
| 826 |
+
});
|
| 827 |
+
} catch (e) {
|
| 828 |
+
console.log('[PLOTLY CLICK] Gradio API method failed:', e);
|
| 829 |
+
}
|
| 830 |
+
}
|
| 831 |
+
|
| 832 |
+
// Method 2: Find by label text, then find input nearby
|
| 833 |
+
const allLabels = Array.from(document.querySelectorAll('label'));
|
| 834 |
+
allLabels.forEach(label => {
|
| 835 |
+
const labelText = label.textContent.toLowerCase();
|
| 836 |
+
if (labelText.includes('longitude')) {
|
| 837 |
+
const container = label.closest('div, form, .gr-box');
|
| 838 |
+
if (container) {
|
| 839 |
+
const input = container.querySelector('input, textarea');
|
| 840 |
+
if (input) {
|
| 841 |
+
input.value = Number(lon).toFixed(6);
|
| 842 |
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
| 843 |
+
input.dispatchEvent(new Event('change', { bubbles: true }));
|
| 844 |
+
console.log('[PLOTLY CLICK] Updated longitude via label:', input.value);
|
| 845 |
+
}
|
| 846 |
+
}
|
| 847 |
+
}
|
| 848 |
+
if (labelText.includes('latitude')) {
|
| 849 |
+
const container = label.closest('div, form, .gr-box');
|
| 850 |
+
if (container) {
|
| 851 |
+
const input = container.querySelector('input, textarea');
|
| 852 |
+
if (input) {
|
| 853 |
+
input.value = Number(lat).toFixed(6);
|
| 854 |
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
| 855 |
+
input.dispatchEvent(new Event('change', { bubbles: true }));
|
| 856 |
+
console.log('[PLOTLY CLICK] Updated latitude via label:', input.value);
|
| 857 |
+
}
|
| 858 |
+
}
|
| 859 |
+
}
|
| 860 |
+
});
|
| 861 |
+
|
| 862 |
+
// Method 3: Try finding by placeholder in all possible elements
|
| 863 |
+
const allElements = document.querySelectorAll('input, textarea, [contenteditable="true"]');
|
| 864 |
+
allElements.forEach(el => {
|
| 865 |
+
const ph = (el.placeholder || el.getAttribute('placeholder') || '').toLowerCase();
|
| 866 |
+
if (ph.includes('longitude') && !ph.includes('latitude')) {
|
| 867 |
+
if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
|
| 868 |
+
el.value = Number(lon).toFixed(6);
|
| 869 |
+
el.dispatchEvent(new Event('input', { bubbles: true }));
|
| 870 |
+
el.dispatchEvent(new Event('change', { bubbles: true }));
|
| 871 |
+
console.log('[PLOTLY CLICK] Updated longitude via placeholder:', el.value);
|
| 872 |
+
}
|
| 873 |
+
}
|
| 874 |
+
if (ph.includes('latitude') && !ph.includes('longitude')) {
|
| 875 |
+
if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
|
| 876 |
+
el.value = Number(lat).toFixed(6);
|
| 877 |
+
el.dispatchEvent(new Event('input', { bubbles: true }));
|
| 878 |
+
el.dispatchEvent(new Event('change', { bubbles: true }));
|
| 879 |
+
console.log('[PLOTLY CLICK] Updated latitude via placeholder:', el.value);
|
| 880 |
+
}
|
| 881 |
+
}
|
| 882 |
+
});
|
| 883 |
+
|
| 884 |
+
console.log('[PLOTLY CLICK] Update attempts completed');
|
| 885 |
+
};
|
| 886 |
+
|
| 887 |
+
const wirePlotly = () => {
|
| 888 |
+
const plots = document.querySelectorAll('.js-plotly-plot');
|
| 889 |
+
console.log('[PLOTLY SETUP] Found', plots.length, 'plotly plots');
|
| 890 |
+
|
| 891 |
+
plots.forEach((plotDiv, idx) => {
|
| 892 |
+
if (plotDiv.dataset._wired === '1') {
|
| 893 |
+
console.log('[PLOTLY SETUP] Plot', idx, 'already wired');
|
| 894 |
+
return;
|
| 895 |
+
}
|
| 896 |
+
|
| 897 |
+
console.log('[PLOTLY SETUP] Wiring plot', idx);
|
| 898 |
+
plotDiv.dataset._wired = '1';
|
| 899 |
+
|
| 900 |
+
// Listen for plotly_click DOM event (Plotly fires this as a custom event)
|
| 901 |
+
plotDiv.addEventListener('plotly_click', (e) => {
|
| 902 |
+
console.log('[PLOTLY CLICK] Event received:', e);
|
| 903 |
+
console.log('[PLOTLY CLICK] e.points:', e.points);
|
| 904 |
+
|
| 905 |
+
// Plotly click event data is directly on the event object
|
| 906 |
+
let points = e.points;
|
| 907 |
+
if (!points && e.detail) {
|
| 908 |
+
points = e.detail.points;
|
| 909 |
+
}
|
| 910 |
+
|
| 911 |
+
if (points && points.length > 0) {
|
| 912 |
+
const pt = points[0];
|
| 913 |
+
console.log('[PLOTLY CLICK] Point data:', pt);
|
| 914 |
+
const lat = pt.lat;
|
| 915 |
+
const lon = pt.lon;
|
| 916 |
+
console.log('[PLOTLY CLICK] Extracted lat:', lat, 'lon:', lon);
|
| 917 |
+
if (lat !== undefined && lon !== undefined && !isNaN(lat) && !isNaN(lon)) {
|
| 918 |
+
updateInputs(lat, lon);
|
| 919 |
+
} else {
|
| 920 |
+
console.error('[PLOTLY CLICK] Invalid coordinates:', {lat, lon, point: pt});
|
| 921 |
+
}
|
| 922 |
+
} else {
|
| 923 |
+
console.error('[PLOTLY CLICK] No points found in event');
|
| 924 |
+
}
|
| 925 |
+
});
|
| 926 |
+
|
| 927 |
+
// Fallback: Listen for raw click events and calculate coordinates from map config
|
| 928 |
+
plotDiv.addEventListener('click', (e) => {
|
| 929 |
+
console.log('[PLOTLY CLICK] Raw click event:', e);
|
| 930 |
+
|
| 931 |
+
try {
|
| 932 |
+
if (!plotDiv._fullLayout || !plotDiv._fullLayout.map) {
|
| 933 |
+
console.error('[PLOTLY CLICK] map layout not available');
|
| 934 |
+
return;
|
| 935 |
+
}
|
| 936 |
+
|
| 937 |
+
const mapConfig = plotDiv._fullLayout.map;
|
| 938 |
+
const center = mapConfig.center || {lat: 0, lon: 0};
|
| 939 |
+
const zoom = mapConfig.zoom || 2;
|
| 940 |
+
|
| 941 |
+
console.log('[PLOTLY CLICK] Map config:', {center, zoom});
|
| 942 |
+
|
| 943 |
+
// Get click position relative to plot div
|
| 944 |
+
const rect = plotDiv.getBoundingClientRect();
|
| 945 |
+
const width = rect.width;
|
| 946 |
+
const height = rect.height;
|
| 947 |
+
const x = e.clientX - rect.left;
|
| 948 |
+
const y = e.clientY - rect.top;
|
| 949 |
+
|
| 950 |
+
console.log('[PLOTLY CLICK] Click position:', {x, y, width, height});
|
| 951 |
+
|
| 952 |
+
// Convert pixel coordinates to lat/lon using Web Mercator projection
|
| 953 |
+
// Simplified calculation based on map center and zoom
|
| 954 |
+
const normalizedX = (x / width) - 0.5; // -0.5 to 0.5
|
| 955 |
+
const normalizedY = 0.5 - (y / height); // 0.5 to -0.5 (flipped Y)
|
| 956 |
+
|
| 957 |
+
// Calculate pixel-to-degree conversion at current zoom
|
| 958 |
+
// At zoom level z, one tile = 256 pixels, world = 2^z tiles wide
|
| 959 |
+
const tilesAtZoom = Math.pow(2, zoom);
|
| 960 |
+
const pixelsPerTile = 256;
|
| 961 |
+
const worldWidthPixels = tilesAtZoom * pixelsPerTile;
|
| 962 |
+
const worldWidthDegrees = 360;
|
| 963 |
+
const degreesPerPixel = worldWidthDegrees / worldWidthPixels;
|
| 964 |
+
|
| 965 |
+
// Longitude: linear mapping
|
| 966 |
+
const lon = center.lon + (normalizedX * width * degreesPerPixel);
|
| 967 |
+
|
| 968 |
+
// Latitude: Web Mercator inverse
|
| 969 |
+
// Mercator Y at center: y_center = ln(tan(π/4 + center_lat/2))
|
| 970 |
+
// Click Y offset in pixels: dy = normalizedY * height
|
| 971 |
+
// Convert to Mercator units and then to latitude
|
| 972 |
+
const mercatorYCenter = Math.log(Math.tan(Math.PI / 4 + (center.lat * Math.PI / 180) / 2));
|
| 973 |
+
const dyMercator = normalizedY * height * degreesPerPixel / (180 / Math.PI);
|
| 974 |
+
const mercatorYClick = mercatorYCenter + dyMercator;
|
| 975 |
+
const latRad = 2 * Math.atan(Math.exp(mercatorYClick)) - Math.PI / 2;
|
| 976 |
+
const lat = latRad * 180 / Math.PI;
|
| 977 |
+
|
| 978 |
+
console.log('[PLOTLY CLICK] Calculated coordinates - lat:', lat, 'lon:', lon);
|
| 979 |
+
|
| 980 |
+
if (!isNaN(lat) && !isNaN(lon) && lat >= -90 && lat <= 90 && lon >= -180 && lon <= 180) {
|
| 981 |
+
updateInputs(lat, lon);
|
| 982 |
+
} else {
|
| 983 |
+
console.error('[PLOTLY CLICK] Invalid calculated coordinates:', {lat, lon});
|
| 984 |
+
}
|
| 985 |
+
} catch (err) {
|
| 986 |
+
console.error('[PLOTLY CLICK] Error in click handler:', err);
|
| 987 |
+
console.error('[PLOTLY CLICK] Error stack:', err.stack);
|
| 988 |
+
}
|
| 989 |
+
});
|
| 990 |
+
|
| 991 |
+
});
|
| 992 |
+
};
|
| 993 |
+
|
| 994 |
+
// Initial wire with retry logic
|
| 995 |
+
let retryCount = 0;
|
| 996 |
+
const maxRetries = 10;
|
| 997 |
+
const tryWire = () => {
|
| 998 |
+
const plots = document.querySelectorAll('.js-plotly-plot');
|
| 999 |
+
if (plots.length === 0 && retryCount < maxRetries) {
|
| 1000 |
+
retryCount++;
|
| 1001 |
+
console.log('[PLOTLY SETUP] No plots found, retry', retryCount, '/', maxRetries);
|
| 1002 |
+
setTimeout(tryWire, 500);
|
| 1003 |
+
return;
|
| 1004 |
+
}
|
| 1005 |
+
wirePlotly();
|
| 1006 |
+
console.log('[PLOTLY SETUP] Initial wire complete, found', plots.length, 'plots');
|
| 1007 |
+
};
|
| 1008 |
+
|
| 1009 |
+
// Wait for Plotly library to load
|
| 1010 |
+
if (window.Plotly) {
|
| 1011 |
+
console.log('[PLOTLY SETUP] Plotly library found immediately');
|
| 1012 |
+
setTimeout(tryWire, 1500);
|
| 1013 |
+
} else {
|
| 1014 |
+
console.warn('[PLOTLY SETUP] Plotly library not found, waiting...');
|
| 1015 |
+
let plotlyWaitCount = 0;
|
| 1016 |
+
const waitForPlotly = () => {
|
| 1017 |
+
if (window.Plotly) {
|
| 1018 |
+
console.log('[PLOTLY SETUP] Plotly library loaded after', plotlyWaitCount * 200, 'ms');
|
| 1019 |
+
setTimeout(tryWire, 1000);
|
| 1020 |
+
} else if (plotlyWaitCount < 20) {
|
| 1021 |
+
plotlyWaitCount++;
|
| 1022 |
+
setTimeout(waitForPlotly, 200);
|
| 1023 |
+
} else {
|
| 1024 |
+
console.error('[PLOTLY SETUP] Plotly library not found after 4 seconds, proceeding anyway');
|
| 1025 |
+
setTimeout(tryWire, 1000);
|
| 1026 |
+
}
|
| 1027 |
+
};
|
| 1028 |
+
waitForPlotly();
|
| 1029 |
+
}
|
| 1030 |
+
|
| 1031 |
+
// Watch for new plots
|
| 1032 |
+
const obs = new MutationObserver(() => {
|
| 1033 |
+
setTimeout(wirePlotly, 500);
|
| 1034 |
+
});
|
| 1035 |
+
obs.observe(document.body, { childList: true, subtree: true });
|
| 1036 |
+
}
|
| 1037 |
+
"""
|
| 1038 |
+
|
| 1039 |
+
demo.load(None, js=plotly_click_js)
|
| 1040 |
+
|
| 1041 |
+
submit_button.click(
|
| 1042 |
+
submit_guess,
|
| 1043 |
+
inputs=[player_id, game_state, guess_state, longitude_input, latitude_input],
|
| 1044 |
+
outputs=[game_state, guess_state, audio_player, clip_info, map_component, selection_text, recent_table, longitude_input, latitude_input, previous_audio_player, previous_answer_display, previous_title_display],
|
| 1045 |
+
)
|
| 1046 |
+
|
| 1047 |
+
|
| 1048 |
+
if __name__ == "__main__":
|
| 1049 |
+
# Allow Gradio to serve audio files that live outside the CWD by whitelisting the project dir
|
| 1050 |
+
demo.launch()
|
data/dataset.csv
ADDED
|
The diff for this file is too large to render.
See raw diff
|
|
|
player_runs.csv
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
timestamp,player_id,question_id,audio_path,guess_latitude,guess_longitude,true_latitude,true_longitude,distance_km,city,country,continent,title,description
|
| 2 |
+
2025-11-04T17:13:12.639892,233,aporee_2086_3020,/home/zhangrx/SoundingEarth/data/audios/heiligenhausflugfeld.mp3,40.147059,100.332193,51.3011765169163,6.95689380168915,6853.735,Heiligenhaus,Germany,Europe,"heiligenhaus, wiel, gang durch feld","gang durch durchfrostetes feld , morgens,<br />nahe flugfeld<br /><br /><br /><br />project: :resonanzen - neanderland - soundmap nrw: social ambiences/ listen to the people - in & outdoor nearfield recordings, listen to the people"
|
| 3 |
+
2025-11-05T15:48:08.753807,2333,aporee_8931_10771,/home/zhangrx/SoundingEarth/data/audios/potiltu.mp3,28.823529,14.509038,55.5165748413,25.6533551216,3098.156,Utena,Lithuania,Europe,"Lithuania, Utena, under the bridge",sitting under the bridge as cars go above
|
| 4 |
+
2025-11-05T15:48:15.147956,2333,aporee_18759_21770,/home/zhangrx/SoundingEarth/data/audios/SoundMap2012032912.mp3,-5.294118,50.913532,22.76054838793,120.30957341194,8150.178,Fengshan,"Taiwan, Province of China",Asia,"Ciaotou,Kaohsiung - Corner","Traffic Noise,Sony ECM-MS907,Sony Hi-MD MZ-RH1 (SoundMap20120329-12), recorded by Wu,Tsancheng"
|
| 5 |
+
2025-11-05T15:48:44.673310,2333,aporee_6623_8181,/home/zhangrx/SoundingEarth/data/audios/waterbubbles44.mp3,-15.441176,32.623351,54.1275688685071,-6.00030541419983,8558.199,Kilkeel,United Kingdom,Europe,Silent Valley tunnel recording 2,Liz Greene and Rui Chaves recording
|
| 6 |
+
2025-11-05T15:55:29.468345,2333,aporee_7014_8710,/home/zhangrx/SoundingEarth/data/audios/orchestrion37.mp3,-11.617647,-26.995603,45.8132359846,15.9762561321,7694.498,Zagreb - Centar,Croatia,Europe,Trg Bana Josipa Jelacica,"street organ [orchestrion], with the sound of the church bells. EBU workshop"
|
| 7 |
+
2025-11-05T15:55:41.977995,2333,aporee_41776_47627,/home/zhangrx/SoundingEarth/data/audios/pitcher.mp3,-0.294118,-11.167562,35.69359789993,139.70536802721,15059.477,Tokyo,Japan,Asia,"5 Chome-17-3 Shinjuku, 新宿区 Tokyo 160-0022, Japonia - rain colector",recorder held in a massive metal pitcher used for collecting rain water. it resonates beautifully when rain drops hit the surface of the water. (roland r-07)
|
| 8 |
+
2025-11-05T16:06:48.987419,2333,aporee_17575_20453,/home/zhangrx/SoundingEarth/data/audios/avignonbellG.mp3,-1.470588,-64.982902,43.951734380678,4.8068779706955,8523.639,Avignon,France,Europe,"Avignon, France - Avignon Bell","Bell from the Cathedral.<br />Stereo mic, cassette recorder<br />a sound from Raw Materials project - http://aporee.org/maps/projects/rawmaterials"
|
| 9 |
+
2025-11-05T16:06:53.948731,2333,aporee_10545_12538,/home/zhangrx/SoundingEarth/data/audios/R090004preslova.mp3,4.558824,-75.007328,49.1964916699,16.5780258179,9738.971,Brno,Czechia,Europe,"Awake at Preslova, Brno","awake of the city. this is a general soundscape of every awake, no surprise: birds."
|
| 10 |
+
2025-11-05T16:07:00.555047,23345,aporee_9802_11738,/home/zhangrx/SoundingEarth/data/audios/conduit.mp3,5.147059,-102.9702,59.4394091209,24.7352698445,11502.248,Tallinn,Estonia,Europe,"Tallinn, Baltijaam platiform electrical conduit - Tallinn, Baltijaam platiform electrical conduit (recorded w/ kessu karu)","hidden sounds, plastic scraps blowing against an electrical conduit on a platform pole at Tallinns main train station."
|
| 11 |
+
2025-11-05T16:08:23.088089,sdsdsds,aporee_19250_22366,/home/zhangrx/SoundingEarth/data/audios/berlinMauerwegWohlgemuthstrBagger170813.mp3,18.529412,-127.767465,52.463416953564,13.478784263134,11280.679,Baumschulenweg,Germany,Europe,"Mauerweg, Wohlgemuthstr., Berlin - demolition of buildings","Saturday, noon, Mauerweg (former Berlin wall area), Wohlgemuthstr., demolition of garages, reflections and drone of excavator<br />(SD702, Audio Technica BP4025)"
|
| 12 |
+
2025-11-05T18:03:57.068732,hello,aporee_30969_35607,/home/zhangrx/SoundingEarth/gradioFrontend/data/audios/BruceHillsScorpionCricket.mp3,42.058824,15.212506,42.809569805154,-83.054065704346,7545.338,Romeo,United States,North America,"Bruce Township, MI, USA - Scorpion Cricket in Rural Michigan","Recorded in Summer of 2014, this is what I believe to be some type of large cricket, but hopefully somebody can identify the sound for me? It was captured on a dark, desolate dirt road outside of Romeo, MI, at around 10:30 pm with calm conditions. I used a Tascam dr-07 and a tripod, leaving the mic aimed right at the creature, just past the ditch on the side of the road.<br /><br />Many more field recordings, sound collages, and mixtapes available on soundcloud:<br />https://soundcloud.com/rjsfoundsounds"
|
| 13 |
+
2025-11-05T18:04:11.487793,hello,aporee_2104_12272,/home/zhangrx/SoundingEarth/gradioFrontend/data/audios/buerknerBackyardRain310511.mp3,-0.294118,48.099658,52.4934062608,13.4243441373,6696.422,Berlin Treptow,Germany,Europe,"Berlin Bürknerstr., backyard window - spring day, it starts to rain",it starts to rain after a warm early summer day.
|
| 14 |
+
2025-11-05T18:04:13.320117,hello,aporee_6139_7665,/home/zhangrx/SoundingEarth/gradioFrontend/data/audios/staircase20100202.mp3,31.617647,38.075232,52.5224000252555,13.4084218740463,3059.458,Berlin,Germany,Europe,Alexanderplatz - Staircase,Staircase near Berlin Alexanderplatz. Quite windy. Aporee Workshop CTM.
|
| 15 |
+
2025-11-05T19:04:42.399259,2333,aporee_14027_16349,/home/zhangrx/SoundingEarth/data/audios/FlavienGillie12070704PlacedelaVictoire6pm.mp3,41.394495,127.704674,43.448353939919,3.6573189114464,9049.48,Bouzigues,France,Europe,"Bouzigues, France, Place de la Victoire - War Memorial 6pm","Swallows, Seagulls and cars.<br />PCM-M10 Internal Microphones."
|
| 16 |
+
2025-11-05T19:04:52.316950,hekki,aporee_3647_4958,/home/zhangrx/SoundingEarth/data/audios/feuerwehr222.mp3,40.996154,122.391337,52.5023660044745,13.4246197342873,7585.083,Bezirk Kreuzberg,Germany,Europe,Feuerwehrdenkmal,sent by wannseeFORUM at 13.05.2009 21:05
|
| 17 |
+
2025-11-05T19:07:04.118291,hekki,aporee_22137_25704,/home/zhangrx/SoundingEarth/data/audios/oxfordWoodinsWayBridge140312.mp3,39.737401,117.440902,51.750410237139,-1.2635879963636,8243.377,Oxford,United Kingdom,Europe,"Woodin's Way, Oxford - on bridge over Castle Mill Stream",sound of water and city ambience heard on bridge over Castle Mill Stream<br />(Sony PCM D50)
|
| 18 |
+
2025-11-05T19:07:06.291597,hekki,aporee_42331_48275,/home/zhangrx/SoundingEarth/data/audios/190104152720nimmermeinefreundin20190105000218.mp3,39.893575,117.559826,47.269730795987,11.391281483893,7890.937,Innsbruck,Austria,Europe,"Innstraße 21, 6020 Innsbruck, Österreich - girls talk",girl playing with friendship
|
| 19 |
+
2025-11-05T19:07:07.756012,hekki,aporee_33154_38104,/home/zhangrx/SoundingEarth/data/audios/1608060553summerrain.mp3,39.775741,117.203053,52.474707169672,13.423805683851,7414.23,Tempelhof Bezirk,Germany,Europe,"Schillerkiez, Berlin, Germany - summer rain",summer rain recorded from in between the old double windows
|
| 20 |
+
2025-11-05T19:18:37.169326,hekki,aporee_9261_11137,/home/zhangrx/SoundingEarth/data/audios/04temporale.mp3,40.035529,116.564321,45.5534230384,8.95841985941,8085.955,Parabiago,Italy,Europe,"via Oidio, Parabiago, Temporale estivo",Un temporale estivo rinfresca un caldo pomeriggio di agosto
|
| 21 |
+
2025-11-06T16:53:32.981561,232323,aporee_7387_9112,/home/zhangrx/SoundingEarth/data/audios/10071805.mp3,66.587537,105.261608,41.8814299789,-87.6853635907,7903.304,Chicago,United States,North America,Walgreens on World Listening Day - shopping and recording in Walgreens,"walking through Walgreens store, guitar toys display, refrigerator drones, moozak, shoppers, cashiers, World Listening Day, WLD"
|
| 22 |
+
2025-11-06T16:54:02.290489,232323,aporee_12215_14310,/home/zhangrx/SoundingEarth/data/audios/primadellospettacolo.mp3,32.046695,171.327748,45.4709716191,9.19473588467,11209.031,Milano,Italy,Europe,Teatro Manzoni - prima dello spettacolo,crowded indoor teathre
|
| 23 |
+
2025-11-06T16:59:03.170077,23333,aporee_14899_17370,/home/zhangrx/SoundingEarth/data/audios/conveyerbelt.mp3,57.581051,127.410046,50.430385130568,13.318594859,6588.151,Krasna Lipa,Czechia,Europe,"Málkov, Czech Republic - Nástup mine - Conveyer belt",The sound at the start of the coal's long (sometimes kilometers) conveyer belt journey to the grinding plant. Here the lumps are crushed to a uniform 6cm size appropriate for burning in power stations
|
| 24 |
+
2025-11-06T17:05:00.255666,sdsad,aporee_8087_9860,/home/zhangrx/SoundingEarth/data/audios/Firemen.mp3,69.700179,51.64993,48.8537809597,2.34422922134,3472.493,Paris,France,Europe,"Quai des Grands Augustins, Paris - Firemen stuck in traffic","Firemen stuck in traffic, Pont St. Michel, Paris. After de car finaly passes you can hear a child singing the sirene melody."
|
| 25 |
+
2025-11-06T17:15:59.301123,sfsd,aporee_10756_12758,/home/zhangrx/SoundingEarth/data/audios/WolfburgParkhotelAufzug02.mp3,39.367256,116.267287,52.4146381687,10.8051931858,7545.315,Wolfsburg,Germany,Europe,"wolfsburg, hotel, elevator",a second recording of the same elevator - now driving downwards<br /><br />soundmap d - social ambiences and topographic field recordings
|
| 26 |
+
2025-11-06T17:24:50.714426,hello,aporee_2378_3344,/home/zhangrx/SoundingEarth/data/audios/SemforoemfrentedosCorreios.mp3,33.904939,91.493599,40.2115957956073,-8.42737331986427,8391.574,Coimbra,Portugal,Europe,Coimbra: next to main post office - Pedestrian Crossing Song 1,"crossing the road, accompanied by androidlike chirps & burps"
|
requirements.txt
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
typing-inspection==0.4.2
|
| 2 |
+
typing_extensions==4.15.0
|
| 3 |
+
numpy==2.2.6
|
| 4 |
+
pandas==2.3.3
|
| 5 |
+
pillow==11.3.0
|
| 6 |
+
plotly==6.3.1
|
| 7 |
+
gradio==5.49.1
|
| 8 |
+
gradio_client==1.13.3
|