v0.0.1

.gitignore

@@ -0,0 +1,23 @@
+# Python
+__pycache__/
+*.py[cod]
+*.egg-info/
+dist/
+build/
+
+# Virtual environment
+.venv/
+venv/
+
+# Environment variables — contains API keys
+.env
+
+# Jupyter / IDE artifacts
+.ipynb_checkpoints/
+
+# Font files (proprietary — use Google Fonts CDN instead)
+static/*.ttf
+
+# OS junk
+.DS_Store
+Thumbs.db

.streamlit/config.toml

@@ -0,0 +1,22 @@
+[server]
+enableStaticServing = true
+port = 12345
+
+[theme]
+# ⚡ CYBORG PALETTE — Jet black and electric blue ⚡
+primaryColor = "#2a9fd6"
+backgroundColor = "#060606"
+secondaryBackgroundColor = "#111111"
+textColor = "#dee2e6"
+linkColor = "#2a9fd6"
+borderColor = "#222222"
+showWidgetBorder = true
+baseRadius = "0.375rem"
+font = "sans-serif"
+codeFont = "sans-serif"
+codeBackgroundColor = "#1a1a1a"
+showSidebarBorder = true
+
+[theme.sidebar]
+backgroundColor = "#111111"
+secondaryBackgroundColor = "#1a1a1a"

README.md

@@ -12,9 +12,71 @@ short_description: AI Travel Planner
 license: mit
 ---
 
-# Welcome to Streamlit!
+# Roamify
 
-Edit `/src/streamlit_app.py` to customize this app to your heart's desire. :heart:
+AI-powered travel planner. Pick a city, choose a category, get personalized
+recommendations with photos, a map, and optional translations.
 
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
+Built with Streamlit, powered by Hermes Agent.
+
+## Quick Start
+
+```bash
+# 1. Clone and enter the project
+git clone <repo-url> roamify
+cd roamify
+
+# 2. Create a .env file with your API keys
+echo 'OPENAI_API_KEY=your-key-here
+OPENAI_BASE_URL=https://api.openai.com/v1
+LLM_MODEL=gpt-4o-mini
+UNSPLASH_ACCESS_KEY=your-key-here' > .env
+
+# 3. Install dependencies
+pip install -r requirements.txt
+
+# 4. Run the app
+streamlit run src/streamlit_app.py --server.port 12345
+```
+
+## What You Need
+
+- Python 3.11+
+- An OpenAI-compatible API endpoint (OpenAI, Ollama, OpenRouter, etc.)
+- (Optional) An Unsplash API key for image search — images still load from
+  Wikipedia/Wikimedia without it
+
+## Features
+
+- 7 travel categories: Landmark, Culture, Nature, Gems, Photo, Food, Shopping
+- AI-generated recommendations with descriptions and tips
+- Real coordinates from Nominatim (LLM coordinates are never trusted)
+- 5-tier image fallback: Wikipedia → Wikidata → Commons → Local names → Unsplash
+- Leaflet map with spider markers and card↔map hover sync
+- Multi-language translation (Traditional Chinese, Japanese, Korean, French,
+  Spanish, German)
+- In-memory caching — repeat searches are fast
+- Dark Cyborg theme with large fonts
+
+## Project Structure
+
+```
+roamify/
+├── src/
+│   ├── streamlit_app.py         # Main Streamlit app
+│   ├── services/
+│   │   └── recommender.py       # LLM calls, geocoding, images, caching
+│   ├── styles/
+│   │   └── dark_theme.py        # Dark CSS + JS (hover sync, flex panels)
+│   └── utils/
+│       └── prompts.py           # Category-specific AI prompt templates
+├── .streamlit/
+│   └── config.toml              # Streamlit server and theme config
+├── Dockerfile                   # HF Spaces deployment
+├── requirements.txt
+└── README.md
+```
+
+## License
+
+MIT

requirements.txt

@@ -1,3 +1,5 @@
-altair
-pandas
-streamlit
+streamlit>=1.38
+openai>=1.0
+folium>=0.16
+streamlit-folium>=0.18
+python-dotenv>=1.0

src/services/recommender.py

@@ -0,0 +1,1048 @@
+"""LLM-based recommender service for travel planning."""
+
+import concurrent.futures
+import hashlib
+import json
+import logging
+import os
+import re
+import time
+import urllib.request
+import urllib.parse
+import urllib.error
+
+from openai import OpenAI
+
+from utils.prompts import PROMPT_MAP, CATEGORY_GUIDANCE
+
+# Module-level cache for Nominatim geocoding results
+_GEOCODE_CACHE: dict[str, dict | None] = {}
+
+# Module-level cache for image enrichment results — keyed by (name, city, country) -> image URL
+# Never cleared, survives "Clear" clicks. Image URLs are stable per attraction.
+_IMAGE_CACHE: dict[tuple[str, str, str], str] = {}
+
+# Module-level cache for LLM-generated recommendations — keyed by (city, num, cat_hash) -> items
+# Cleared on explicit user "Clear" click only.
+_LLM_CACHE: dict[tuple[str, int, str], list[dict] | None] = {}
+
+# Module-level cache for translations — keyed by (items_hash, second_language) -> translated items
+# Cleared on explicit user "Clear" click only.
+_TRANSLATION_CACHE: dict[tuple[str, str, str], list[dict]] = {}
+
+# Stop words used across multiple relevance checks
+_STOP_WORDS = {"the", "a", "an", "of", "in", "on", "at", "and", "or", "de", "la", "le", "el", "di", "del"}
+
+# Common attraction type suffixes used in name deduplication
+_ATTRACTION_SUFFIXES = (
+    " temple", " shrine", " castle", " palace", " park", " museum",
+    " garden", " bridge", " tower", " square", " market", " street",
+    " station", " hall", " church", " basilica", " monastery",
+    " gallery", " theater", " theatre", " library",
+)
+
+logger = logging.getLogger("roamify")
+
+
+def _http_get_json(url: str, timeout: int = 5, retries: int = 2) -> dict | None:
+    """GET a JSON URL with retry on rate-limit and transient errors."""
+    for attempt in range(retries + 1):
+        try:
+            req = urllib.request.Request(url, headers={"User-Agent": "TravelPlanner/1.0"})
+            with urllib.request.urlopen(req, timeout=timeout) as resp:
+                return json.loads(resp.read().decode())
+        except urllib.error.HTTPError as e:
+            if e.code in (429, 502, 503) and attempt < retries:
+                time.sleep(1.0 * (attempt + 1))  # backoff: 1s, 2s
+                continue
+            return None
+        except (TimeoutError, OSError, ConnectionError):
+            if attempt < retries:
+                time.sleep(0.5 * (attempt + 1))
+                continue
+            return None
+        except Exception:
+            return None
+    return None
+
+
+def _resolve_wiki_title(name: str) -> str:
+    """Resolve an attraction name to the correct Wikipedia article title using search."""
+    search_url = "https://en.wikipedia.org/w/api.php?" + urllib.parse.urlencode({
+        "action": "query",
+        "list": "search",
+        "srsearch": name,
+        "format": "json",
+        "srlimit": 1,
+    })
+    data = _http_get_json(search_url)
+    if data:
+        results = data.get("query", {}).get("search", [])
+        if results:
+            return results[0]["title"]
+    return ""
+
+
+def _fetch_wiki_image(name: str) -> str:
+    """Tier 1: Resolve article title via search, then fetch thumbnail from Wikipedia.
+    Tries REST summary API first, then falls back to action=query pageimages API.
+    Prioritizes stripped name over original (parenthetical suffixes confuse search).
+    Skips results where the article title doesn't match the attraction name.
+    """
+    # Build candidate titles: stripped first (more reliable), then original, then resolved from search
+    stripped = re.sub(r"\s*\(.+\)\s*$", "", name).strip()
+    candidates = []
+    if stripped and stripped != name:
+        candidates.append(stripped)
+    candidates.append(name)
+    # Resolve via search — deduplicate to avoid redundant API calls
+    search_names = [stripped] if stripped else []
+    if name and (not stripped or name != stripped):
+        search_names.append(name)
+    for search_name in search_names:
+        if search_name:
+            resolved = _resolve_wiki_title(search_name)
+            if resolved and resolved not in candidates:
+                candidates.append(resolved)
+
+    # Core words from the attraction name for relevance checking
+    name_core = set(re.sub(r"[()\-_,]", " ", stripped or name).lower().split())
+    name_core = name_core - _STOP_WORDS
+
+    for title in candidates:
+        if not title:
+            continue
+        # Relevance check: the article title should share at least one significant word with the attraction name
+        title_core = set(re.sub(r"[()\-_,]", " ", title).lower().split()) - _STOP_WORDS
+        if name_core and title_core and not (name_core & title_core):
+            # No exact word overlap — try shared substring of 4+ chars (e.g. "mura" in "Amemura" ↔ "Amerikamura")
+            any_shared_substr = any(
+                any(w[i:i+4] in tw for i in range(len(w) - 3) if len(w) >= 4)
+                for w in name_core
+                for tw in title_core
+            )
+            if not any_shared_substr:
+                continue  # Article title has no word overlap with attraction name — skip
+        # Try REST summary API first
+        search_url = f"https://en.wikipedia.org/api/rest_v1/page/summary/{urllib.parse.quote(title)}"
+        data = _http_get_json(search_url)
+        if data:
+            source = data.get("thumbnail", {}).get("source", "")
+            if source:
+                return source
+            # Article exists but has no thumbnail — try pageimages API instead
+            img_url = f"https://en.wikipedia.org/w/api.php?{urllib.parse.urlencode({'action': 'query', 'titles': title, 'prop': 'pageimages', 'pithumbsize': 400, 'format': 'json'})}"
+            img_data = _http_get_json(img_url)
+            if img_data:
+                pages = img_data.get("query", {}).get("pages", {})
+                for page in pages.values():
+                    thumb = page.get("thumbnail", {}).get("source", "")
+                    if thumb:
+                        return thumb
+    return ""
+
+
+# Tourism-related keywords to disambiguate Wikidata results
+_TOURISM_KEYWORDS = {
+    "church", "cathedral", "basilica", "monument", "museum", "palace",
+    "castle", "tower", "bridge", "park", "garden", "square", "plaza",
+    "temple", "shrine", "mosque", "synagogue", "abbey", "fort", "fortress",
+    "arena", "stadium", "theater", "theatre", "gallery", "library",
+    "cemetery", "aqueduct", "fountain", "arch", "gate", "wall",
+    "district", "neighborhood", "quarter", "area", "market", "island",
+    "building", "skyscraper",
+}
+
+
+def _fetch_wikidata_image(name: str, city: str = "", country: str = "") -> str:
+    """Tier 2: Get image from Wikidata P18 claim → construct full Commons URL.
+    Disambiguates by preferring entities whose description contains tourism keywords.
+    Tries stripped name, then with city/country context.
+    """
+    # Build search queries: original → stripped → with city → with country
+    clean = re.sub(r"\s*\(.*?\)\s*$", "", name).strip()
+    queries = [name]
+    if clean and clean != name:
+        queries.append(clean)
+    if city and clean:
+        queries.append(f"{clean}, {city}")
+    if country and clean and country != city:
+        queries.append(f"{clean}, {country}")
+
+    for query in queries:
+        search_url = "https://www.wikidata.org/w/api.php?" + urllib.parse.urlencode({
+            "action": "wbsearchentities",
+            "search": query,
+            "language": "en",
+            "format": "json",
+            "limit": 5,
+        })
+        data = _http_get_json(search_url)
+        if not data:
+            continue
+        results = data.get("search", [])
+        if not results:
+            continue
+
+        # Pick the best candidate: prefer ones with tourism-related descriptions
+        best = None
+        for r in results[:5]:
+            desc = (r.get("description") or "").lower()
+            if any(kw in desc for kw in _TOURISM_KEYWORDS):
+                best = r
+                break
+        # If no tourism keyword match, try first result whose label matches stripped name
+        if not best:
+            for r in results[:5]:
+                label = (r.get("label") or "").lower()
+                if clean.lower() in label or label in clean.lower():
+                    best = r
+                    break
+        if not best:
+            best = results[0]
+
+        qid = best["id"]
+
+        # Fetch P18 (image) claim
+        entity_url = "https://www.wikidata.org/w/api.php?" + urllib.parse.urlencode({
+            "action": "wbgetclaims",
+            "entity": qid,
+            "property": "P18",
+            "format": "json",
+        })
+        claims_data = _http_get_json(entity_url)
+        if not claims_data:
+            continue
+        p18 = claims_data.get("claims", {}).get("P18", [])
+        if not p18:
+            continue
+
+        # Construct Commons URL from filename using MD5 hash path
+        filename = p18[0]["mainsnak"]["datavalue"]["value"]
+        safe = filename.replace(" ", "_")
+        md5 = hashlib.md5(safe.encode()).hexdigest()
+        url = f"https://upload.wikimedia.org/wikipedia/commons/{md5[0]}/{md5[:2]}/{safe}"
+        return url
+    return ""
+
+
+def _fetch_commons_image(name: str, city: str = "", country: str = "") -> str:
+    """Tier 3: Search Wikimedia Commons for an image file name, return direct URL.
+    Tries name, then name+city, then name+country for better disambiguation.
+    Skips results whose filename has no word overlap with the attraction name.
+    """
+    # Core words from the attraction name for relevance checking
+    clean = re.sub(r"\s*\(.*?\)\s*$", "", name).strip()
+    name_core = set(re.sub(r"[()\-_,]", " ", clean or name).lower().split()) - _STOP_WORDS
+
+    queries = [name]
+    if clean and clean != name:
+        queries.append(clean)
+    if city and clean:
+        queries.append(f"{clean}, {city}")
+    if country and clean and country != city:
+        queries.append(f"{clean}, {country}")
+    # Add simplified name variants that used to be in Tier 4
+    for suffix in (" Market", " Garden", " Beach", " Park", " Museum", " Square", " Tower", " Bridge", " Temple", " Shrine", " Castle", " Palace", " Street", " Station"):
+        if clean.endswith(suffix):
+            base = clean[:-len(suffix)].strip()
+            if base and base not in queries and base != clean:
+                queries.append(base)
+    # Try shortened name (first word or two)
+    words = clean.split()
+    if len(words) > 2:
+        two_word = " ".join(words[:2])
+        if two_word not in queries:
+            queries.append(two_word)
+
+    for query in queries:
+        search_url = "https://commons.wikimedia.org/w/api.php?" + urllib.parse.urlencode({
+            "action": "query",
+            "list": "search",
+            "srsearch": query,
+            "srnamespace": "6",  # File namespace
+            "format": "json",
+            "srlimit": 5,
+        })
+        data = _http_get_json(search_url, timeout=10, retries=1)
+        if not data:
+            continue
+        results = data.get("query", {}).get("search", [])
+        # Find an image file (jpg/png/jpeg/webp) with relevance check
+        for r in results:
+            title = r.get("title", "")
+            lower = title.lower()
+            if any(lower.endswith(ext) for ext in (".jpg", ".jpeg", ".png", ".webp")):
+                # Relevance check: filename should share at least one word with attraction name
+                if name_core:
+                    file_core = set(re.sub(r"[()\-_,.]", " ", lower.replace("file:", "")).split()) - _STOP_WORDS
+                    if not (name_core & file_core):
+                        # No exact word overlap — try shared substring of 4+ chars
+                        any_shared_substr = any(
+                            any(w[i:i+4] in tw for i in range(len(w) - 3) if len(w) >= 4)
+                            for w in name_core
+                            for tw in file_core
+                        )
+                        if not any_shared_substr:
+                            continue  # No word overlap — skip irrelevant result
+                # Strip "File:" prefix and construct URL
+                filename = title.replace("File:", "").strip()
+                safe = filename.replace(" ", "_")
+                md5 = hashlib.md5(safe.encode()).hexdigest()
+                return f"https://upload.wikimedia.org/wikipedia/commons/thumb/{md5[0]}/{md5[:2]}/{safe}/400px-{safe}"
+    return ""
+
+
+def _fetch_local_name_image(name: str, city: str = "", country: str = "") -> str:
+    """Tier 5: Try parenthetical local name from the attraction.
+    E.g. 'Awaji Island (Koko-shima)' tries 'Koko-shima' on Commons and Wikidata.
+    Also tries '{local_name}, {city}' and '{local_name} {city}'.
+    """
+    m = re.search(r"\((.+?)\)", name)
+    if not m:
+        return ""
+    local = m.group(1).strip()
+    if not local:
+        return ""
+
+    # Try Commons with local name variants
+    queries = [local]
+    if city:
+        queries.append(f"{local}, {city}")
+    if country and country != city:
+        queries.append(f"{local}, {country}")
+
+    for query in queries:
+        url = _fetch_commons_image(query)
+        if url:
+            return url
+
+    # Try Wikidata with local name
+    for query in queries:
+        url = _fetch_wikidata_image(query, city=city, country=country)
+        if url:
+            return url
+
+    return ""
+
+
+def _fetch_unsplash_api_image(name: str, city: str = "", country: str = "") -> str:
+    """Tier 6: Search Unsplash for a high-quality landscape photo.
+    Only called when all Wikimedia sources fail. Uses orientation=landscape
+    to avoid tall/portrait photos. Respects 50 req/hr demo rate limit.
+    """
+    unsplash_key = os.environ.get("UNSPLASH_ACCESS_KEY", "")
+    if not unsplash_key:
+        return ""
+
+    # Build search query: name + city for better relevance
+    clean = re.sub(r"\s*\(.*?\)\s*$", "", name).strip()
+    query = clean
+    if city:
+        query = f"{clean} {city}"
+    elif country:
+        query = f"{clean} {country}"
+
+    search_url = "https://api.unsplash.com/search/photos?" + urllib.parse.urlencode({
+        "query": query,
+        "per_page": 3,
+        "orientation": "landscape",
+    })
+    try:
+        req = urllib.request.Request(search_url, headers={
+            "Authorization": f"Client-ID {unsplash_key}",
+            "Accept-Version": "v1",
+        })
+        with urllib.request.urlopen(req, timeout=8) as resp:
+            data = json.loads(resp.read().decode())
+        results = data.get("results", [])
+        if results:
+            # Use small size (400px wide) — perfect for cards
+            return results[0]["urls"]["small"]
+    except Exception:
+        pass
+    return ""
+
+
+def _enrich_one_item(item: dict, city: str = "", country: str = "") -> None:
+    """Look up image for a single item using 5-tier fallback:
+    1. Wikipedia REST/pageimages API
+    2. Wikidata P18 image claim (with city/country context)
+    3. Wikimedia Commons search (with simplified name variants embedded)
+    4. Local name from parentheses (e.g. Koko-shima from Awaji Island)
+    5. Unsplash search (landscape orientation, last resort)
+
+    Results are cached in _IMAGE_CACHE to avoid repeat API calls across searches.
+    """
+    if item.get("image_url"):
+        return
+    name = item.get("name", "")
+    if not name:
+        item["image_url"] = ""
+        return
+
+    # Check image cache first
+    cache_key = (name, city or "", country or "")
+    cached_url = _IMAGE_CACHE.get(cache_key)
+    if cached_url is not None:
+        item["image_url"] = cached_url
+        return
+
+    # Tier 1: Wikipedia
+    url = _fetch_wiki_image(name)
+    if url:
+        _IMAGE_CACHE[cache_key] = url
+        item["image_url"] = url
+        return
+    # Tier 2: Wikidata (with city/country for disambiguation)
+    url = _fetch_wikidata_image(name, city=city, country=country)
+    if url:
+        _IMAGE_CACHE[cache_key] = url
+        item["image_url"] = url
+        return
+    # Tier 3: Wikimedia Commons (includes simplified/variant names)
+    url = _fetch_commons_image(name, city=city, country=country)
+    if url:
+        _IMAGE_CACHE[cache_key] = url
+        item["image_url"] = url
+        return
+    # Tier 4: Local name from parentheses
+    url = _fetch_local_name_image(name, city=city, country=country)
+    if url:
+        _IMAGE_CACHE[cache_key] = url
+        item["image_url"] = url
+        return
+    # Tier 5: Unsplash (landscape only, last resort)
+    url = _fetch_unsplash_api_image(name, city=city, country=country)
+    _IMAGE_CACHE[cache_key] = url
+    item["image_url"] = url
+
+
+def _enrich_with_images(items: list[dict], city: str = "", country: str = "") -> list[dict]:
+    """Add image_url to each item using a 5-tier fallback:
+    1. Wikipedia REST API — English page/summary
+    2. Wikidata P18 image claim → full Commons URL (MD5 hash path)
+    3. Wikimedia Commons search (with simplified/variant names embedded)
+    4. Local name from parentheses (e.g. Koko-shima from Awaji Island)
+    5. Unsplash search (landscape orientation, last resort)
+    All lookups run concurrently via ThreadPoolExecutor (max 6 workers).
+    """
+    with concurrent.futures.ThreadPoolExecutor(max_workers=6) as pool:
+        futures = [pool.submit(_enrich_one_item, item, city=city, country=country) for item in items]
+        concurrent.futures.wait(futures)
+    return items
+
+
+def _haversine_km(lat1, lon1, lat2, lon2):
+    """Return distance in km between two lat/lon pairs."""
+    import math
+    R = 6371.0
+    dlat = math.radians(lat2 - lat1)
+    dlon = math.radians(lon2 - lon1)
+    a = math.sin(dlat / 2) ** 2 + math.cos(math.radians(lat1)) * math.cos(math.radians(lat2)) * math.sin(dlon / 2) ** 2
+    return R * 2 * math.asin(math.sqrt(a))
+
+
+def _nominatim_search_cached(query: str, timeout: int = 10) -> tuple[dict | None, bool]:
+    """Search Nominatim with caching. Returns (result, was_cached).
+    Handles Nominatim's 1-req/s rate limit internally — only sleeps on actual API calls."""
+    if query in _GEOCODE_CACHE:
+        return _GEOCODE_CACHE[query], True
+    url = "https://nominatim.openstreetmap.org/search?" + urllib.parse.urlencode({
+        "q": query, "format": "json", "limit": 1, "accept-language": "en",
+    })
+    data = _http_get_json(url, timeout=timeout, retries=2)
+    time.sleep(1.01)  # Nominatim rate limit: 1 req/s (only on actual API calls)
+    if data and isinstance(data, list) and data:
+        _GEOCODE_CACHE[query] = data[0]
+        return data[0], False
+    _GEOCODE_CACHE[query] = None
+    return None, False
+
+
+def _geocode_city(city: str) -> tuple[float, float, list[float]] | None:
+    """Geocode a city center via Nominatim (cached). Returns (lat, lon, boundingbox) or None."""
+    result, _ = _nominatim_search_cached(city)
+    if not result:
+        return None
+    try:
+        lat = float(result["lat"])
+        lon = float(result["lon"])
+        bb = [float(v) for v in result.get("boundingbox", [])]
+        if len(bb) == 4:
+            return lat, lon, bb
+        return lat, lon, []
+    except (KeyError, ValueError, IndexError):
+        return None
+
+
+
+def _verify_coordinates(items: list[dict], city: str) -> list[dict]:
+    """Verify attraction coordinates by forward-geocoding every item via Nominatim.
+    The LLM frequently fabricates coordinates — it may put Kiyomizu-dera (Kyoto)
+    at fake Tokyo coords, or include Himeji Castle with fake local coords.
+    
+    Strategy: geocode each attraction name + city via Nominatim, then verify the
+    result's display_name actually mentions the target city. If not found with
+    the city qualifier, try without it — if the real location is in a different
+    city, drop the item.
+    """
+    # Geocode city center (cached — sleep handled internally)
+    city_result = _geocode_city(city)
+    if city_result:
+        city_center = (city_result[0], city_result[1])
+    else:
+        city_center = None
+
+    MAX_CITY_DIST_KM = 15
+    verified = []
+
+    for item in items:
+        name = item.get("name", "")
+        # Strip parenthetical like "Kiyomizu-dera Temple (Kyoto)" -> "Kiyomizu-dera Temple"
+        clean_name = re.sub(r"\s*\(.*?\)\s*$", "", name).strip()
+        if not clean_name:
+            verified.append(item)
+            continue
+
+        # Step 1: Try geocode with city qualifier (cached — sleep handled internally)
+        query = f"{clean_name}, {city}"
+        result1, _ = _nominatim_search_cached(query)
+
+        n_lat, n_lon, display_name = None, None, ""
+
+        if result1:
+            try:
+                n_lat = float(result1["lat"])
+                n_lon = float(result1["lon"])
+                display_name = (result1.get("display_name", "") or "").lower()
+            except (KeyError, ValueError, IndexError):
+                pass
+
+        if n_lat is not None:
+            # Check display_name mentions the target city AND the attraction name
+            city_lower = city.lower()
+            city_words = set(city_lower.split())
+            mentions_city = any(w in display_name for w in city_words)
+            
+            # Check display_name actually refers to the attraction, not a shop/restaurant
+            clean_lower = clean_name.lower()
+            attraction_words = set(re.sub(r"[()\-_,]", " ", clean_lower).split())
+            name_in_display = any(w in display_name for w in attraction_words if len(w) > 3)
+            
+            if city_center:
+                dist = _haversine_km(city_center[0], city_center[1], n_lat, n_lon)
+                if dist <= MAX_CITY_DIST_KM and mentions_city and name_in_display:
+                    item["latitude"] = n_lat
+                    item["longitude"] = n_lon
+                    verified.append(item)
+                    continue
+                elif dist <= MAX_CITY_DIST_KM and not (mentions_city and name_in_display):
+                    pass  # Fall through to unqualified search
+                else:
+                    continue
+            else:
+                continue
+        # else: not found with qualifier — fall through
+
+        # Step 2: Try geocode WITHOUT city qualifier (cached — sleep handled internally)
+        clean_name_no_paren = re.sub(r"\s*\(.*?\)\s*$", "", name).strip()
+        query2 = clean_name_no_paren
+        result2, _ = _nominatim_search_cached(query2)
+
+        n_lat2, n_lon2, display_name2 = None, None, ""
+        if result2:
+            try:
+                n_lat2 = float(result2["lat"])
+                n_lon2 = float(result2["lon"])
+                display_name2 = (result2.get("display_name", "") or "").lower()
+            except (KeyError, ValueError, IndexError):
+                pass
+
+        if n_lat2 is not None and city_center:
+            # Check if the unqualified result is in the target city
+            city_lower = city.lower()
+            city_words = set(city_lower.split())
+            mentions_city = any(w in display_name2 for w in city_words)
+            
+            # Also verify the name is in the display
+            clean_lower = clean_name.lower()
+            attraction_words = set(re.sub(r"[()\-_,]", " ", clean_lower).split())
+            name_in_display = any(w in display_name2 for w in attraction_words if len(w) > 3)
+            
+            dist = _haversine_km(city_center[0], city_center[1], n_lat2, n_lon2)
+            
+            if dist <= MAX_CITY_DIST_KM and mentions_city and name_in_display:
+                # The attraction is actually in the target city
+                item["latitude"] = n_lat2
+                item["longitude"] = n_lon2
+                verified.append(item)
+                continue
+            else:
+                # The attraction is in a different city — drop it
+                continue
+        else:
+            # No geocoding result at all — keep item with LLM coords as fallback
+            try:
+                lat = float(item.get("latitude", 0))
+                lon = float(item.get("longitude", 0))
+            except (ValueError, TypeError):
+                lat, lon = 0, 0
+            if lat == 0 and lon == 0 or not city_center:
+                verified.append(item)
+            else:
+                dist = _haversine_km(city_center[0], city_center[1], lat, lon)
+                if dist <= MAX_CITY_DIST_KM:
+                    verified.append(item)
+
+    return verified
+
+
+def _get_client() -> OpenAI:
+    """Create an OpenAI client using environment variables."""
+    base_url = os.environ.get("OPENAI_BASE_URL", os.environ.get("OPENAI_API_BASE", None))
+    api_key = os.environ.get("OPENAI_API_KEY", "sk-dummy")
+    default_headers = None
+    if "ollama.com" in (base_url or ""):
+        default_headers = {"Authorization": f"Bearer {api_key}"}
+        api_key = "ollama"
+    return OpenAI(api_key=api_key, base_url=base_url, default_headers=default_headers)
+
+
+def _get_models() -> list[str]:
+    """Return the ordered list of models to try — primary first, then fallbacks."""
+    primary = os.environ.get("LLM_MODEL", os.environ.get("OPENAI_MODEL", "gpt-4o-mini"))
+    fallback_str = os.environ.get("LLM_FALLBACK_MODELS", "")
+    fallbacks = [m.strip() for m in fallback_str.split(",") if m.strip()]
+    return [primary] + fallbacks
+
+
+def _parse_json_response(raw: str) -> list[dict] | None:
+    """Robustly extract JSON array from LLM output.
+    Returns None if parsing fails entirely (caller should show st.error)."""
+    text = raw.strip()
+    text = re.sub(r"^```(?:json)?\s*\n?", "", text)
+    text = re.sub(r"\n?```\s*$", "", text)
+    text = text.strip()
+
+    try:
+        parsed = json.loads(text)
+        if isinstance(parsed, list):
+            return parsed
+        if isinstance(parsed, dict):
+            return [parsed]
+    except json.JSONDecodeError:
+        pass
+
+    start = text.find("[")
+    end = text.rfind("]")
+    if start != -1 and end > start:
+        candidate = text[start:end + 1]
+        try:
+            parsed = json.loads(candidate)
+            if isinstance(parsed, list):
+                return parsed
+        except json.JSONDecodeError:
+            pass
+        # Truncated JSON: try closing the last open object + array
+        truncated = text[start:]
+        # Remove trailing incomplete value (partial string after last colon)
+        truncated = re.sub(r'[,\s]*"[^"]*":\s*"[^"]*$', '', truncated)
+        for closing in ['}]}', '}]', '}', ']']:
+            attempt = truncated + closing
+            try:
+                parsed = json.loads(attempt)
+                if isinstance(parsed, list) and len(parsed) > 0:
+                    return parsed
+            except json.JSONDecodeError:
+                continue
+
+    pattern = re.compile(r"\[[\s\S]*\](?=\s*$|\s*```)", re.MULTILINE)
+    matches = pattern.findall(text)
+    for match in reversed(matches):
+        try:
+            parsed = json.loads(match)
+            if isinstance(parsed, list):
+                return parsed
+        except json.JSONDecodeError:
+            continue
+
+    return None
+
+
+
+def _verify_with_model(items: list[dict], city: str, models: list[str]) -> list[dict]:
+    """Use a fallback model to verify which attractions are actually in the target city.
+    The LLM sometimes lists attractions from other cities. Nominatim can catch
+    most of these, but this adds a second verification layer.
+    Returns only items confirmed to be in the target city."""
+    if not items or len(models) < 2:
+        return items
+
+    client = _get_client()
+    # Use the third model (not primary or first fallback) for verification
+    if len(models) >= 3:
+        verifier_model = models[2]
+    elif len(models) >= 2:
+        verifier_model = models[1]
+    else:
+        return items
+
+    names = [item.get("name", "") for item in items]
+    names_str = "\n".join(f"{i+1}. {name}" for i, name in enumerate(names))
+
+    prompt = f"""You are a city geography expert. Determine which of these attractions are actually located IN the city of {city}.
+
+For each attraction, answer ONLY "YES" (it is located in {city}) or "NO" (it is in a different city, or is a well-known landmark from elsewhere).
+
+Return ONLY a JSON array of indices (1-based) that are YES, like [1, 3, 4]. No other text.
+
+Attractions:
+{names_str}"""
+
+    try:
+        response = client.chat.completions.create(
+            model=verifier_model,
+            messages=[{"role": "user", "content": prompt}],
+            temperature=0,
+            max_tokens=512,
+        )
+        raw = response.choices[0].message.content
+        if raw and raw.strip():
+            # Parse JSON array of indices
+            text = re.sub(r"^```(?:json)?\s*\n?", "", raw.strip())
+            text = re.sub(r"\n?```\s*$", "", text)
+            text = text.strip()
+            start = text.find("[")
+            end = text.rfind("]")
+            if start != -1 and end > start:
+                indices = json.loads(text[start:end+1])
+                if isinstance(indices, list):
+                    verified = [items[i-1] for i in indices if 1 <= i <= len(items)]
+                    if verified:
+                        return verified
+    except Exception:
+        pass
+    return items
+
+
+def _call_model(client, model: str, prompt: str, temperature: float = 0.1) -> list[dict] | None:
+    """Call a single model, parse JSON response, return items or None. Uses generous timeout."""
+    for attempt in range(3):  # 3 attempts instead of 2
+        try:
+            response = client.chat.completions.create(
+                model=model,
+                messages=[{"role": "user", "content": prompt}],
+                temperature=temperature,
+                max_tokens=3072,
+                timeout=60,
+            )
+            raw = response.choices[0].message.content
+            if raw and raw.strip():
+                items = _parse_json_response(raw.strip())
+                if items is not None:
+                    return items
+            if attempt < 1:
+                time.sleep(1)
+                continue
+        except Exception:
+            if attempt < 1:
+                time.sleep(1)
+                continue
+        break
+    return None
+
+
+def get_recommendations(
+    tab: str,
+    city: str,
+    num_attractions: int = 10,
+    categories: dict | None = None,
+) -> list[dict] | None:
+    """Call the LLM to get top-N recommendations.
+    
+    Strategy:
+    1. Primary model generates request_count + 2 items
+    2. Fallback model generates independently (parallel-ish)
+    3. Cross-reference: keep items confirmed by BOTH models (matching by name)
+    4. If still short of num_attractions, use a third model as verifier
+    5. Always geocode via Nominatim to drop wrong-city entries
+    """
+    prompt_template = PROMPT_MAP[tab]
+
+    # Build category prompt from toggle selections
+    category_prompt = ""
+    if categories:
+        enabled = [cat for cat, on in categories.items() if on]
+        if enabled:
+            lines = [CATEGORY_GUIDANCE[cat].format(city=city) for cat in enabled if cat in CATEGORY_GUIDANCE]
+            if lines:
+                category_prompt = lines[0]
+
+    # Ask for n+4 to have enough spares after geocoding filtering (Kyoto is compact, many get dropped)
+    request_count = num_attractions + 4
+    prompt = prompt_template.format(
+        category_prompt=category_prompt,
+        num_attractions=request_count,
+    )
+    # Add instruction to avoid controversial places
+    prompt += "\n\nIMPORTANT: Do NOT include any politically controversial attractions, war museums, or memorials that might be offensive to some visitors. Focus on universally enjoyed tourist attractions."
+
+    client = _get_client()
+    models = _get_models()
+
+    # Step 1: Try primary model
+    primary_items = _call_model(client, models[0], prompt)
+    if primary_items:
+        primary_items = _enrich_with_images(primary_items, city=city)
+        primary_items = _verify_coordinates(primary_items, city)
+    else:
+        primary_items = []
+
+    # Step 2: Try fallback models if primary gave nothing
+    fallback_items = []
+    for fb_model in models[1:]:
+        if len(fallback_items) > 0:
+            break
+        fb_items = _call_model(client, fb_model, prompt)
+        if fb_items:
+            fb_items = _enrich_with_images(fb_items, city=city)
+            fb_items = _verify_coordinates(fb_items, city)
+            if fb_items:
+                fallback_items = fb_items
+
+    # If still nothing, try all models one more time
+    combined = (primary_items or []) + (fallback_items or [])
+    if not combined:
+        for model in models:
+            items = _call_model(client, model, prompt)
+            if items:
+                combined = _enrich_with_images(items, city=city)
+                combined = _verify_coordinates(combined, city)
+                if combined:
+                    break
+        if not combined:
+            return None
+        # Assign retry results to primary_items so dedup works
+        primary_items = combined
+        fallback_items = []
+
+    # Step 3: Cross-reference — keep items confirmed by Nominatim in BOTH lists
+    def name_key(item):
+        """Normalize name for matching — strips suffixes to catch 'Kiyomizu-dera' vs 'Kiyomizu-dera Temple'."""
+        name = item.get("name", "").lower()
+        name = re.sub(r"\s*\(.*?\)\s*$", "", name)
+        # Strip common suffixes that cause duplicates
+        for suffix in _ATTRACTION_SUFFIXES:
+            if name.endswith(suffix) and len(name) > len(suffix) + 2:
+                name = name[:-len(suffix)].strip()
+        name = re.sub(r"[^a-z0-9\s]", "", name)
+        return name.strip()
+
+    # Build a unified list: items in primary, then items in fallback not already in primary
+    seen_names = set()
+    merged = []
+
+    for item in primary_items:
+        key = name_key(item)
+        if key not in seen_names:
+            seen_names.add(key)
+            merged.append(item)
+
+    for item in fallback_items:
+        key = name_key(item)
+        if key not in seen_names:
+            seen_names.add(key)
+            merged.append(item)
+
+    # Step 4: Use third model as verifier if merged list > num_attractions
+    if len(merged) > request_count and len(models) > 2:
+        merged = _verify_with_model(merged, city, models)
+
+    # Step 5: Filter out controversial places and combined names
+    _CONTROVERSIAL_PLACES = {
+        "yasukuni",
+        "yasukuni shrine",
+    }
+    merged = [
+        item for item in merged
+        if not any(
+            bad in item.get("name", "").lower()
+            for bad in _CONTROVERSIAL_PLACES
+        )
+    ]
+
+    # Also split any combined names with &, /, or " and " — keep only first place
+    for item in merged:
+        name = item.get("name", "")
+        # Split on common combiners and take the first
+        for sep in (" & ", " and ", " / ", "/", " &"):
+            if sep in name:
+                parts = name.split(sep, 1)
+                item["name"] = parts[0].strip()
+                break
+
+    # Strip parenthetical suffixes and trailing qualifiers for the shortest purest name
+    for item in merged:
+        name = item.get("name", "")
+        original = name
+        # Remove parenthetical suffixes like "(Mitaka)", "(Asakusa)", "(Kyoto, day-trip)"
+        name = re.sub(r"\s*\(.*?\)\s*$", "", name).strip()
+        # Remove trailing qualifiers after comma like "Senso-ji, Tokyo" -> "Senso-ji"
+        name = re.sub(r",\s*[A-Za-z].*$", "", name).strip()
+        # Remove redundant "Temple" from names that already have it (e.g. "Senso-ji, Tokyo (Asakusa)" -> all cleaned)
+        # Trim whitespace
+        name = name.strip()
+        if name:
+            item["name"] = name
+
+    # Step 6: If short by a few items and user wanted 9 or fewer, request extras
+    shortfall = num_attractions - len(merged)
+    if shortfall > 0 and num_attractions <= 9:
+        # Request extra buffer to account for further filtering
+        extras_prompt = prompt_template.format(
+            category_prompt=category_prompt,
+            num_attractions=shortfall + 3,
+        )
+        # Add same instructions as main prompt
+        extras_prompt += "\n\nIMPORTANT: Do NOT include any politically controversial attractions, war museums, or memorials that might be offensive to some visitors. Focus on universally enjoyed tourist attractions."
+        # Add instruction to avoid duplicates
+        existing_names = {name_key(item) for item in merged}
+        extras_prompt += f"\n\nIMPORTANT: Do NOT include any of these already-listed attractions:\n{chr(10).join(f'- {n}' for n in list(existing_names)[:20])}"
+        extras_prompt += "\n\nOnly return attractions NOT listed above."
+
+        # Try the other model for the extras (not the one that generated the main list)
+        extras_model = models[2] if len(models) > 2 else (models[1] if len(models) > 1 else models[0])
+        extras_items = _call_model(client, extras_model, extras_prompt)
+        
+        # If that failed, try primary model
+        if not extras_items and len(models) > 1:
+            extras_items = _call_model(client, models[0], extras_prompt)
+        
+        if extras_items:
+            extras_items = _enrich_with_images(extras_items, city=city)
+            extras_items = _verify_coordinates(extras_items, city)
+            for item in extras_items:
+                key = name_key(item)
+                if key not in seen_names and key:
+                    seen_names.add(key)
+                    merged.append(item)
+
+    # Step 7: Trim to requested count
+    items = merged[:num_attractions]
+    return items
+
+
+def translate_items(items: list[dict], second_language: str, tab: str) -> list[dict]:
+    """Call the LLM to translate recommendation items into a second language."""
+    if not second_language or not items:
+        return items
+
+    client = _get_client()
+    models = _get_models()
+
+    # Strip image URLs before translating — they're not needed and bloat the prompt
+    items_for_llm = [
+        {k: v for k, v in item.items() if k != "image_url"}
+        for item in items
+    ]
+    items_json = json.dumps(items_for_llm, ensure_ascii=False, indent=2)
+
+    sample = items[0] if items else {}
+    fields = [k for k in ("name", "short_description", "description", "tip") if k in sample]
+    translation_keys = ", ".join(f'"{f}_local": translate the value of "{f}" into {second_language}' for f in fields)
+
+    prompt = f"""You are a professional translator. Translate the following JSON array of travel recommendations into {second_language}.
+
+CRITICAL: If the target language is Traditional Chinese, you MUST use Traditional Chinese characters (繁體字), NOT Simplified Chinese (简体字). Use characters like 的, 們, 國, 會, 後, 發, 時 instead of 的, 们, 国, 会, 后, 发, 时.
+
+For each object, add these new keys:
+{translation_keys}
+
+Keep all original English keys and values unchanged. Only add the "_local" keys with the {second_language} translations.
+
+Input:
+{items_json}
+
+Return ONLY the complete JSON array with both English and {second_language} fields. No markdown fences, no extra text."""
+
+    last_error = None
+    for model in models:
+        for attempt in range(2):
+            try:
+                response = client.chat.completions.create(
+                    model=model,
+                    messages=[{"role": "user", "content": prompt}],
+                    temperature=0,
+                    max_tokens=2048,
+                )
+                raw = response.choices[0].message.content
+                if raw and raw.strip():
+                    translated = _parse_json_response(raw.strip())
+                    if isinstance(translated, list):
+                        if len(translated) != len(items):
+                            # Length mismatch — skip this model's output
+                            break
+                        merged = []
+                        for orig, trans in zip(items, translated):
+                            item = dict(orig)
+                            for k, v in trans.items():
+                                if k.endswith("_local"):
+                                    item[k] = v
+                            merged.append(item)
+                        return merged
+                    # Parsing failed — retry once
+                    if attempt < 1:
+                        time.sleep(1)
+                        continue
+                # Empty or failed — try next model
+                break
+            except Exception as e:
+                last_error = e
+                if attempt < 1:
+                    time.sleep(1)
+                    continue
+                break
+
+    return items
+
+
+# ── Module-level cached wrappers (survive st.cache_data.clear) ──
+
+def clear_llm_caches() -> None:
+    """Clear LLM result and translation caches only.
+    Does NOT clear image or geocode caches (those are stable per attraction).
+    Call this when the user clicks Clear in the UI.
+    """
+    _LLM_CACHE.clear()
+    _TRANSLATION_CACHE.clear()
+
+
+def get_recommendations_cached(
+    city: str,
+    num_attractions: int = 10,
+    categories: dict | None = None,
+) -> list[dict] | None:
+    """Cached version of get_recommendations — avoids repeat LLM calls.
+    Cache key is (city, num_attractions, cat_hash).
+    """
+    cat_hash = json.dumps(categories or {}, sort_keys=True)
+    key = (city, num_attractions, cat_hash)
+    if key in _LLM_CACHE:
+        return _LLM_CACHE[key]
+    result = get_recommendations(tab="attractions", city=city, num_attractions=num_attractions, categories=categories)
+    _LLM_CACHE[key] = result
+    return result
+
+
+def translate_items_cached(items: list[dict], items_json: str, second_language: str) -> list[dict]:
+    """Cached version of translate_items — avoids repeat LLM calls.
+    Cache key uses hash of items_json + language.
+    """
+    items_hash = hashlib.md5(items_json.encode()).hexdigest()
+    key = (items_hash, second_language)
+    if key in _TRANSLATION_CACHE:
+        return _TRANSLATION_CACHE[key]
+    result = translate_items(items, second_language, "attractions")
+    _TRANSLATION_CACHE[key] = result
+    return result

src/streamlit_app.py

@@ -1,40 +1,514 @@
-import altair as alt
-import numpy as np
-import pandas as pd
+"""Roam Service — Streamlit App with dark theme and big fonts."""
+
+from dotenv import load_dotenv
+load_dotenv()  # Load .env file
+
 import streamlit as st
+import json
+import folium
+from streamlit_folium import st_folium
+
+from styles.dark_theme import apply_dark_theme, EMOJI_MAP
+from services.recommender import get_recommendations_cached, translate_items_cached, clear_llm_caches
+
+# ── Popular city suggestions ──
+CITY_SUGGESTIONS = [
+    "Abu Dhabi", "Amsterdam", "Antalya", "Athens", "Auckland", "Bali",
+    "Bangkok", "Barcelona", "Beijing", "Berlin", "Bogota", "Bordeaux",
+    "Boston", "Brisbane", "Bruges", "Brussels", "Budapest", "Buenos Aires",
+    "Cairo", "Cancun", "Cape Town", "Cartagena", "Chiang Mai", "Chicago",
+    "Copenhagen", "Cusco", "Delhi", "Denver", "Doha", "Dubai", "Dublin",
+    "Dubrovnik", "Edinburgh", "Florence", "Fukuoka", "Geneva", "Glasgow",
+    "Granada", "Hamburg", "Hanoi", "Helsinki", "Ho Chi Minh City", "Hong Kong",
+    "Honolulu", "Hvar", "Innsbruck", "Istanbul", "Jaipur", "Jakarta",
+    "Jerusalem", "Johannesburg", "Kathmandu", "Kolkata", "Krakow", "Kuala Lumpur",
+    "Kyoto", "Las Vegas", "Lima", "Lisbon", "Liverpool", "London",
+    "Los Angeles", "Luxembourg", "Lyon", "Madrid", "Male", "Manchester",
+    "Manila", "Marrakech", "Marseille", "Melbourne", "Mexico City", "Miami",
+    "Milan", "Monte Carlo", "Montreal", "Moscow", "Munich", "Mumbai",
+    "Nairobi", "Naples", "Nashville", "New Delhi", "New Orleans", "New York",
+    "Nice", "Osaka", "Oslo", "Paris", "Perth", "Philadelphia", "Phnom Penh",
+    "Porto", "Prague", "Queenstown", "Quito", "Reykjavik", "Riga",
+    "Rio de Janeiro", "Rome", "Salzburg", "San Diego", "San Francisco",
+    "San Sebastian", "Santiago", "Santorini", "Seattle", "Seoul", "Seville",
+    "Shanghai", "Siem Reap", "Singapore", "Split", "Stockholm", "Sydney",
+    "Taipei", "Tallinn", "Tbilisi", "Tel Aviv", "Tokyo", "Toronto",
+    "Ubud", "Valencia", "Vancouver", "Venice", "Vienna", "Vilnius",
+    "Warsaw", "Washington", "Zanzibar", "Zurich",
+]
+
+
+# ── Page config ──
+st.set_page_config(
+    page_title="Roamify",
+    page_icon="✈️",
+    layout="wide",
+    initial_sidebar_state="collapsed",
+)
+
+# ── Apply dark theme ──
+apply_dark_theme()
+
+# ── Title ──
+st.title("✈️ Roamify")
+st.markdown(
+    '<div style="font-size:15px; color:#888; margin-top:-10px; margin-bottom:18px;">Designed by Joe, powered by Hermes Agent · 2026</div>',
+    unsafe_allow_html=True,
+)
+
+# ── Category filter (single-select) ──
+CATEGORIES = [
+    ("Landmark", "🗼"),
+    ("Culture", "🏛️"),
+    ("Nature", "🌿"),
+    ("Gems", "💎"),
+    ("Photo", "📸"),
+    ("Food", "🍽️"),
+    ("Shopping", "🛍️"),
+]
+CATEGORY_LABELS = [f"{emoji} {name}" for name, emoji in CATEGORIES]
+
+LANG_OPTIONS = {
+    "None (English only)": None,
+    "繁體中文 (Traditional Chinese)": "Traditional Chinese",
+    "简体中文 (Simplified Chinese)": "Simplified Chinese",
+    "日本語 (Japanese)": "Japanese",
+    "한국어 (Korean)": "Korean",
+    "Français (French)": "French",
+    "Español (Spanish)": "Spanish",
+    "Deutsch (German)": "German",
+}
+
+# ── Search form — single row ──
+with st.form("search_form"):
+    col_city, col_cat, col_num, col_lang, col_search, col_clear = st.columns([1.5, 3.5, 0.7, 1.0, 0.65, 0.65], gap="medium")
+
+    with col_city:
+        city = st.selectbox("City", CITY_SUGGESTIONS, index=CITY_SUGGESTIONS.index("London"))
+        st.markdown(
+            '<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">'
+            '<span style="font-size:26px;color:#888;line-height:1;display:inline-block;">⬆</span>'
+            '<span style="font-size:16px;color:#888;">First, pick a city.</span>'
+            '</div>',
+            unsafe_allow_html=True,
+        )
+
+    with col_cat:
+        selected_category = st.radio(
+            "Category",
+            options=range(len(CATEGORIES)),
+            format_func=lambda i: CATEGORY_LABELS[i],
+            horizontal=True,
+            index=0,
+        )
+        st.markdown(
+            '<div style="display:flex;align-items:center;gap:8px;margin-top:0px;margin-bottom:14px;">'
+            '<span style="font-size:26px;color:#888;line-height:1;display:inline-block;">⬆</span>'
+            '<span style="font-size:16px;color:#888;">Next, choose a category.</span>'
+            '</div>',
+            unsafe_allow_html=True,
+        )
+
+    with col_num:
+        num_attractions = st.selectbox("Recommendations", [3, 6, 9, 12, 15], index=1)
+
+    with col_lang:
+        selected_lang = st.selectbox("Translation", list(LANG_OPTIONS.keys()), index=0)
+        second_language = LANG_OPTIONS[selected_lang]
+
+    with col_search:
+        st.markdown('<div style="font-size:18px;color:#dee2e6;margin-bottom:6px;font-weight:400;">Ready?</div>', unsafe_allow_html=True)
+        search = st.form_submit_button("����  Search", use_container_width=True)
+        st.markdown(
+            '<div style="display:flex;align-items:center;gap:8px;margin-top:0px;margin-bottom:14px;">'
+            '<span style="font-size:26px;color:#888;line-height:1;display:inline-block;">⬆</span>'
+            '<span style="font-size:16px;color:#888;">Let\'s go!</span>'
+            '</div>',
+            unsafe_allow_html=True,
+        )
+
+    with col_clear:
+        st.markdown('<div style="font-size:18px;color:#dee2e6;margin-bottom:6px;font-weight:400;">Cache</div>', unsafe_allow_html=True)
+        clear = st.form_submit_button("🗑️  Clear", use_container_width=True)
+
+# ── Track whether Clear was just clicked ──
+if "skip_cache" not in st.session_state:
+    st.session_state.skip_cache = False
+
+if clear:
+    clear_llm_caches()  # Only clears LLM + translation caches; keeps image + geocode caches
+    # Save last results before cache is gone
+    if "last_attractions" not in st.session_state:
+        st.session_state["last_attractions"] = None
+    st.session_state.skip_cache = True
+    st.toast("LLM cache cleared (images & map data kept)", icon="🗑️")
+
+# ── Validation ──
+if search:
+    # Build categories dict from single-select radio
+    categories = {name: (i == selected_category) for i, (name, _) in enumerate(CATEGORIES)}
+    if not city.strip():
+        st.error("Please enter a city!")
+    else:
+        st.session_state["do_search"] = True
+        st.session_state["search_params"] = {
+            "city": city.strip(),
+            "num_attractions": num_attractions,
+            "second_language": second_language,
+            "categories": categories,
+        }
+        st.session_state.skip_cache = False
+
+
+def _short_name(text: str, max_len: int = 22) -> str:
+    """Truncate name to fit one line in the card summary."""
+    if len(text) <= max_len:
+        return text
+    return text[:max_len].rstrip() + "…"
+
+
+def _render_cards(items: list[dict], translated: bool = False) -> None:
+    """Render items as a 3-column grid of expandable cards with uniform heights per row."""
+    COLS = 3
+
+    # Build rows of items
+    rows_data = []
+    for row_start in range(0, len(items), COLS):
+        rows_data.append(items[row_start:row_start + COLS])
+
+    # For each row, compute max lines needed for descriptions
+    CHARS_PER_LINE = 30  # estimated chars per line at 16px in 3-col layout
+
+    for row_idx, row_items in enumerate(rows_data):
+        # Find max description length in this row
+        descs = []
+        for item in row_items:
+            d = item.get("description_local" if translated and item.get("description_local") else "description", "")
+            descs.append(d)
+
+        max_desc_lines = max((len(d) + CHARS_PER_LINE - 1) // CHARS_PER_LINE for d in descs) if descs else 1
+
+        # Render this row
+        cols = st.columns(COLS, gap="small")
+        for col_idx, item in enumerate(row_items):
+            i = row_idx * COLS + col_idx + 1
+            name = item.get("name", "Unknown")
+            description = item.get("description", "")
+            name_local = item.get("name_local", "")
+            description_local = item.get("description_local", "")
+
+            label = f"**{i}. {_short_name(name)}**"
+            if translated and name_local:
+                label += f"  **— {_short_name(name_local)}**"
+
+            # Compute padding for this card's description
+            actual_desc = description_local if translated and description_local else description
+            desc_lines = (len(actual_desc) + CHARS_PER_LINE - 1) // CHARS_PER_LINE
+            desc_padding = "<br>" * (max_desc_lines - desc_lines)
+
+            with cols[col_idx]:
+                expand_by_default = (len(items) <= 6) or (i <= 3)
+                # Hidden marker for card↔map hover sync
+                st.markdown(f'<div class="card-pin" data-card-idx="{i}" style="display:none;"></div>', unsafe_allow_html=True)
+                with st.expander(label, expanded=expand_by_default):
+                    image_url = item.get("image_url", "")
+                    if image_url:
+                        st.markdown(
+                            f'<div style="width:100%;aspect-ratio:16/9;overflow:hidden;'
+                            f'border-radius:8px;background:#1c2333;margin-bottom:12px;">'
+                            f'<img src="{image_url}" style="width:100%;height:100%;'
+                            f'object-fit:cover;object-position:center;display:block;" '
+                            f'loading="lazy" alt="{name}" class="card-img"/>'
+                            f'</div>',
+                            unsafe_allow_html=True,
+                        )
+                    else:
+                        st.markdown(
+                            '<div style="display:flex;align-items:center;justify-content:center;'
+                            'width:100%;aspect-ratio:16/9;background:#111;border-radius:8px;font-size:48px;'
+                            'margin-bottom:12px;">'
+                            '🏛️</div>',
+                            unsafe_allow_html=True,
+                        )
+                    # Description only (tips moved to map popups)
+                    st.markdown(f'<div class="card-desc">{actual_desc}{desc_padding}</div>', unsafe_allow_html=True)
+
+
+def _build_map(items: list[dict]) -> folium.Map:
+    """Build a folium map with true spider legs: overlapping numbered circles
+    fan out radially from their cluster centroid with straight leader lines
+    connecting back to small dots at the true locations."""
+
+    valid_coords = [
+        (float(item["latitude"]), float(item["longitude"]))
+        for item in items
+        if item.get("latitude") is not None and item.get("longitude") is not None
+        and str(item.get("latitude", "")).strip() != ""
+        and str(item.get("longitude", "")).strip() != ""
+    ]
+    if valid_coords:
+        center_lat = sum(c[0] for c in valid_coords) / len(valid_coords)
+        center_lon = sum(c[1] for c in valid_coords) / len(valid_coords)
+    else:
+        center_lat, center_lon = 48.8566, 2.3522
+
+    m = folium.Map(
+        location=[center_lat, center_lon],
+        tiles="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+        attr="&copy; <a href='https://carto.com/'>CARTO</a>",
+        name="CartoDB dark",
+        zoom_control=False,
+    )
+
+    # Remove Leaflet attribution control entirely
+    m.get_root().html.add_child(folium.Element(
+        '<style>.leaflet-control-attribution{display:none!important}</style>'
+    ))
+
+    marker_coords = []
+
+    for i, item in enumerate(items, 1):
+        try:
+            lat = float(item.get("latitude", 0))
+            lon = float(item.get("longitude", 0))
+        except (ValueError, TypeError):
+            continue
+        if lat == 0 and lon == 0:
+            continue
+
+        name = item.get("name", "Unknown")
+        name_local = item.get("name_local", "")
+        tip = item.get("tip_local", "") or item.get("tip", "")
+
+        # Build popup with Name and Tip — block layout for spacing
+        lines = [f"<div style='color:#2a9fd6; font-size:16px; font-weight:bold'>{i}. {name}</div>"]
+        if name_local:
+            lines.append(f"<div style='color:#aaa; font-size:13px'>{name_local}</div>")
+        if tip:
+            lines.append(f"<div style='font-size:15px; margin-top:6px'>💡 {tip}</div>")
+        popup_html = "".join(lines)
+
+        marker_coords.append([lat, lon])
+
+        # Small anchor dot at true position
+        folium.CircleMarker(
+            location=[lat, lon],
+            radius=4,
+            color="#2a9fd6",
+            fill=True,
+            fill_color="#2a9fd6",
+            fill_opacity=0.9,
+            weight=1,
+        ).add_to(m)
+
+        # Numbered circle marker (position updated by JS)
+        folium.Marker(
+            location=[lat, lon],
+            popup=folium.Popup(popup_html, max_width=260, offset=(0, -25)),
+            icon=folium.DivIcon(
+                html=(
+                    f'<div class="spider-marker" data-idx="{i}" data-lat="{lat}" data-lng="{lon}" style="'
+                    f'display:flex;align-items:center;justify-content:center;'
+                    f'width:36px;height:36px;border-radius:50%;'
+                    f'background:#2a9fd6;color:#fff;font-size:18px;font-weight:700;'
+                    f'box-shadow:0 2px 6px rgba(0,0,0,0.5);'
+                    f'cursor:pointer;">'
+                    f'{i}</div>'
+                ),
+                icon_size=(36, 36),
+                icon_anchor=(18, 18),
+            ),
+        ).add_to(m)
+
+    # Fit map bounds to show all markers with slight padding
+    if marker_coords:
+        m.fit_bounds(marker_coords, padding=(30, 30))
+
+    # Spider legs: cluster detection → radial fan-out → leader lines
+    spider_js = """<script>
+(function(){
+  var MIN_DIST=48, LEG_LENGTH=44, svgEl=null;
+  function findMap(){for(var k in window){try{if(window[k] instanceof L.Map)return window[k]}catch(e){}}return null}
+  function ensureSvg(m){
+    if(svgEl)return svgEl;
+    var c=m.getContainer();
+    svgEl=document.createElementNS('http://www.w3.org/2000/svg','svg');
+    svgEl.style.cssText='position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:450;';
+    c.appendChild(svgEl);return svgEl;
+  }
+  function run(){
+    var map=findMap();if(!map)return;
+    var svg=ensureSvg(map);
+    var els=document.querySelectorAll('.spider-marker');
+    if(!els.length)return;
+    var pts=[];
+    els.forEach(function(el){
+      var lat=parseFloat(el.getAttribute('data-lat')),lng=parseFloat(el.getAttribute('data-lng'));
+      var cp=map.latLngToContainerPoint([lat,lng]);
+      pts.push({el:el,x:cp.x,y:cp.y,ox:cp.x,oy:cp.y,idx:parseInt(el.getAttribute('data-idx'))});
+    });
+
+    // Reset all positions
+    pts.forEach(function(p){p.x=p.ox;p.y=p.oy;p.el.style.transform=''});
+
+    // Find clusters (groups of markers within MIN_DIST of each other)
+    var clusters=[], assigned={};
+    for(var i=0;i<pts.length;i++){
+      if(assigned[i])continue;
+      var cluster=[i]; assigned[i]=true;
+      for(var j=i+1;j<pts.length;j++){
+        if(assigned[j])continue;
+        for(var k=0;k<cluster.length;k++){
+          var ci=cluster[k];
+          var dx=pts[j].x-pts[ci].x, dy=pts[j].y-pts[ci].y;
+          if(Math.sqrt(dx*dx+dy*dy)<MIN_DIST){cluster.push(j);assigned[j]=true;break;}
+        }
+      }
+      if(cluster.length>1)clusters.push(cluster);
+    }
+
+    // Clear old lines
+    svg.querySelectorAll('line').forEach(function(l){l.remove()});
+
+    // For each cluster: compute centroid, fan out radially
+    clusters.forEach(function(cidxs){
+      var cx=0,cy=0;
+      cidxs.forEach(function(i){cx+=pts[i].ox;cy+=pts[i].oy;});
+      cx/=cidxs.length;cy/=cidxs.length;
+
+      var n=cidxs.length;
+      var startAngle=0;
+
+      cidxs.forEach(function(i,k){
+        var angle=startAngle+(k*2*Math.PI/n);
+        var tx=cx+Math.cos(angle)*LEG_LENGTH;
+        var ty=cy+Math.sin(angle)*LEG_LENGTH;
+
+        var ox=tx-pts[i].ox, oy=ty-pts[i].oy;
+        pts[i].x=tx;pts[i].y=ty;
+        pts[i].el.style.transform='translate('+ox+'px,'+oy+'px)';
+
+        var line=document.createElementNS('http://www.w3.org/2000/svg','line');
+        line.setAttribute('x1',pts[i].ox);line.setAttribute('y1',pts[i].oy);
+        line.setAttribute('x2',tx);line.setAttribute('y2',ty);
+        line.setAttribute('stroke','#2a9fd6');
+        line.setAttribute('stroke-width','1.5');
+        line.setAttribute('stroke-opacity','0.7');
+        svg.appendChild(line);
+      });
+    });
+  }
+  function init(){
+    var m=findMap();if(!m){setTimeout(init,200);return}
+    m.on('moveend',run);m.on('zoomend',run);setTimeout(run,300);
+  }
+  if(document.readyState==='complete')init();else window.addEventListener('load',init);
+})();
+</script>"""
+    m.get_root().html.add_child(folium.Element(spider_js))
+
+    return m
+
+
+# ── Results ──
+if st.session_state.get("do_search") and not st.session_state.skip_cache:
+    params = st.session_state["search_params"]
+    sec_lang = params.get("second_language")
+
+    try:
+        with st.spinner(f"Finding recommendations in {params['city']}..."):
+            attractions = get_recommendations_cached(
+                city=params["city"],
+                num_attractions=params["num_attractions"],
+                categories=params.get("categories"),
+            )
+
+        if attractions is None:
+            st.error("Failed to get recommendations. The AI response couldn't be parsed. Please try again.")
+            st.stop()
+
+        # Store in session state for survival across Clear clicks
+        st.session_state["last_attractions"] = attractions
+
+        if sec_lang:
+            with st.spinner(f"Translating into {sec_lang}..."):
+                attractions = translate_items_cached(
+                    items=attractions,
+                    items_json=json.dumps(attractions, ensure_ascii=False, sort_keys=True),
+                    second_language=sec_lang,
+                )
+                st.session_state["last_attractions"] = attractions
+
+    except RuntimeError as e:
+        st.error(f"⚠️ {e}")
+        st.stop()
+    except Exception as e:
+        st.error(f"Something went wrong: {e}")
+        st.stop()
+
+    # ── Two-column layout: cards (left) | map (right) ──
+    left_col, right_col = st.columns([1, 1])
+
+    with left_col:
+        st.subheader(f"{EMOJI_MAP['attractions']} Recommendations")
+        with st.container(height=800, border=False):
+            _render_cards(attractions, translated=bool(sec_lang))
+
+    with right_col:
+        st.subheader("🗺️ Map")
+        st.markdown('<div style="margin-bottom:10px;"></div>', unsafe_allow_html=True)
+        m = _build_map(attractions)
+        st_folium(m, width="100%", height=800, returned_objects=[])
+
+elif st.session_state.get("last_attractions"):
+    # After Clear: show cached session state results without re-calling LLM
+    attractions = st.session_state["last_attractions"]
+    left_col, right_col = st.columns([1, 1])
+
+    with left_col:
+        st.subheader(f"{EMOJI_MAP['attractions']} Recommendations")
+        with st.container(height=800, border=False):
+            _render_cards(attractions, translated=False)
+
+    with right_col:
+        st.subheader("🗺️ Map")
+        st.markdown('<div style="margin-bottom:10px;"></div>', unsafe_allow_html=True)
+        m = _build_map(attractions)
+        st_folium(m, width="100%", height=800, returned_objects=[])
 
-"""
-# Welcome to Streamlit!
-
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))
+else:
+    # ── Onboarding: hero card panel ──
+    import re
+    hero_html = """<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;
+                min-height:600px;padding:80px 20px 40px;text-align:center;">
+        <div style="font-size:120px;margin-bottom:16px;line-height:1;">🧳</div>
+        <div style="font-size:42px;font-weight:700;color:#dee2e6;margin-bottom:8px;">
+            Where to next?
+        </div>
+        <div style="font-size:20px;color:#888;max-width:520px;margin-bottom:32px;line-height:1.6;">
+            Choose a city, tell us what you love, and get tailored recommendations.
+        </div>
+        <div style="display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-bottom:40px;">
+            <div style="background:#1c2333;border-radius:12px;padding:20px 24px;width:160px;border:1px solid #2a2f3a;">
+                <div style="font-size:40px;margin-bottom:8px;">🗼</div>
+                <div style="font-weight:600;color:#dee2e6;font-size:14px;">Landmarks</div>
+                <div style="font-size:12px;color:#666;margin-top:4px;">Colosseum, Taj Mahal, Big Ben</div>
+            </div>
+            <div style="background:#1c2333;border-radius:12px;padding:20px 24px;width:160px;border:1px solid #2a2f3a;">
+                <div style="font-size:40px;margin-bottom:8px;">🏛️</div>
+                <div style="font-weight:600;color:#dee2e6;font-size:14px;">Culture</div>
+                <div style="font-size:12px;color:#666;margin-top:4px;">Louvre, British Museum, Uffizi</div>
+            </div>
+            <div style="background:#1c2333;border-radius:12px;padding:20px 24px;width:160px;border:1px solid #2a2f3a;">
+                <div style="font-size:40px;margin-bottom:8px;">🍽️</div>
+                <div style="font-weight:600;color:#dee2e6;font-size:14px;">Food</div>
+                <div style="font-size:12px;color:#666;margin-top:4px;">Pizza, Ramen, In-N-Out Burgers</div>
+            </div>
+            <div style="background:#1c2333;border-radius:12px;padding:20px 24px;width:160px;border:1px solid #2a2f3a;">
+                <div style="font-size:40px;margin-bottom:8px;">🛍️</div>
+                <div style="font-weight:600;color:#dee2e6;font-size:14px;">Shopping</div>
+                <div style="font-size:12px;color:#666;margin-top:4px;">Harrods, Grand Bazaar, Ginza</div>
+            </div>
+        </div>
+    </div>"""
+    st.markdown(re.sub(r"\n\s+", "\n", hero_html), unsafe_allow_html=True)

src/styles/dark_theme.py

@@ -0,0 +1,638 @@
+"""Dark theme based on Bootswatch Cyborg ('Jet black and electric blue')."""
+
+DARK_THEME_CSS = """
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
+
+    /* ── Cyborg palette ── */
+    :root {
+        --bg-primary: #060606;
+        --bg-card: #111111;
+        --bg-card-open: #1a1a1a;
+        --accent: #2a9fd6;
+        --accent-hover: #1a7099;
+        --text-primary: #dee2e6;
+        --text-muted: #adafae;
+        --heading: #ffffff;
+        --border: #222222;
+    }
+
+    /* ── Global ── */
+    html, body, [class*="css"] {
+        font-family: 'Inter', 'IBMPlexMono', sans-serif;
+        font-size: 20px !important;
+    }
+
+    /* ── Main background ── */
+    .stApp {
+        background-color: var(--bg-primary) !important;
+        color: var(--text-primary) !important;
+    }
+
+    /* ── Hide the top header bar ── */
+    header[data-testid="stHeader"] {
+        display: none !important;
+    }
+    [data-testid="stToolbar"] {
+        display: none !important;
+    }
+    [data-testid="stAppDeployButton"] {
+        display: none !important;
+    }
+    /* Hide heading anchor links that appear on hover */
+    h1 a, h2 a, h3 a, h1 a:link, h2 a:link, h3 a:link,
+    h1 a:visited, h2 a:visited, h3 a:visited {
+        display: none !important;
+    }
+    .headerlink {
+        display: none !important;
+    }
+
+    /* ── Headings ── */
+    h1, h2, h3 {
+        color: var(--accent) !important;
+        font-weight: 700 !important;
+    }
+    h1 { font-size: 2.4rem !important; }
+    h2 { font-size: 1.8rem !important; }
+    h3 { font-size: 1.4rem !important; }
+
+    /* ── Expander cards ── */
+    .stExpander {
+        background-color: var(--bg-card) !important;
+        border: 1px solid var(--border) !important;
+        border-radius: 10px !important;
+        margin-bottom: 8px !important;
+    }
+    .stExpander details:not([open]) {
+        min-height: 82px !important;
+    }
+    .stExpander:hover {
+        border-color: var(--accent) !important;
+    }
+    .stExpander:hover details[open] {
+        border-color: var(--accent) !important;
+    }
+    .stExpander details[open] {
+        background-color: var(--bg-card-open) !important;
+        border-color: var(--border) !important;
+    }
+    .stExpander summary {
+        font-size: 20px !important;
+        color: var(--accent) !important;
+        font-weight: 700 !important;
+        line-height: 1.5 !important;
+    }
+    .stExpander summary strong {
+        color: var(--accent) !important;
+        font-weight: 700 !important;
+        font-size: 22px !important;
+        display: block !important;
+        white-space: nowrap !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+    }
+    .stExpander summary p {
+        font-size: 16px !important;
+        color: var(--text-muted) !important;
+    }
+    .stExpander summary:hover {
+        color: var(--accent-hover) !important;
+    }
+    /* ── Expanded card content ── */
+    .stExpander div[data-testid="stExpanderDetails"] {
+        border-top-color: var(--border) !important;
+    }
+    .stExpander div[data-testid="stExpanderDetails"] p,
+    .stExpander div[data-testid="stExpanderDetails"] span {
+        font-size: 16px !important;
+        line-height: 1.5 !important;
+    }
+    .stExpander div[data-testid="stExpanderDetails"] em {
+        font-size: 15px !important;
+    }
+    /* ── Uniform card heights via fixed desc area ── */
+    .card-desc {
+        font-size: 16px !important;
+        line-height: 1.5 !important;
+        min-height: 100px !important;
+        display: block !important;
+        margin-bottom: 4px !important;
+    }
+
+    /* ── Input widgets ── */
+    .stTextInput > div > div > input,
+    .stDateInput input,
+    .stNumberInput input,
+    .stSelectbox div > div > input {
+        font-size: 18px !important;
+        background-color: var(--bg-primary) !important;
+        color: var(--text-primary) !important;
+        border-color: var(--border) !important;
+    }
+
+    /* ── Button ── */
+    .stButton > button,
+    button[type="submit"],
+    button[kind="secondaryFormSubmit"],
+    button[kind="formSubmit"] {
+        font-size: 13px !important;
+        padding: 10px 16px !important;
+        background-color: var(--accent) !important;
+        color: #ffffff !important;
+        border: none !important;
+        border-radius: 8px !important;
+        white-space: nowrap !important;
+    }
+    .stButton > button:hover,
+    button[type="submit"]:hover,
+    button[kind="secondaryFormSubmit"]:hover,
+    button[kind="formSubmit"]:hover {
+        background-color: var(--accent-hover) !important;
+    }
+
+    /* ── Spinner ── */
+    .stSpinner > div {
+        font-size: 18px !important;
+        color: var(--accent) !important;
+    }
+
+    /* ── Map: fill full width ── */
+    .stFolium {
+        width: 100% !important;
+    }
+    .stFolium > div {
+        width: 100% !important;
+    }
+    .stFolium iframe {
+        width: 100% !important;
+    }
+    /* Push map container down to align with cards */
+    .stCustomComponentV1 {
+        display: block !important;
+    }
+    iframe[title="streamlit_folium.st_folium"] {
+        display: block !important;
+    }
+    /* Hide Leaflet attribution label */
+    .leaflet-control-attribution {
+        display: none !important;
+    }
+    /* Hide Leaflet zoom controls (+ and -) */
+    .leaflet-control-zoom {
+        display: none !important;
+    }
+
+    /* ── Reduce top padding ── */
+    .block-container {
+        padding-top: 0 !important;
+    }
+    /* Squeeze title closer to top */
+    .main > div:first-child {
+        margin-top: -8px !important;
+    }
+    h1 {
+        margin-top: 0 !important;
+        padding-top: 0 !important;
+    }
+
+    /* ── Hide JS-tool iframes ── */
+    iframe[title="st.iframe"] {
+        display: none !important;
+    }
+
+    /* ── Hide scrollbars on all panels (keep scroll functionality) ── */
+    ::-webkit-scrollbar {
+        display: none !important;
+        width: 0 !important;
+        height: 0 !important;
+    }
+    * {
+        scrollbar-width: none !important;
+        -ms-overflow-style: none !important;
+    }
+
+    /* ── Hide sidebar completely ── */
+    section[data-testid="stSidebar"] {
+        display: none !important;
+    }
+    section[data-testid="stSidebar"] + div {
+        margin-left: 0 !important;
+    }
+
+
+
+    /* ── Flexible panel heights: dynamically set by JS ── */
+    /* Fallback height (JS overrides with !important) */
+    .stVerticalBlock[data-testid="stVerticalBlock"] > [data-testid="stLayoutWrapper"] > .stVerticalBlock {
+        max-height: 800px;
+    }
+    .stCustomComponentV1 {
+        height: 800px;
+    }
+
+    /* ── Category filter: horizontal radio pills ── */
+    .stRadio label[data-baseweb="label"] {
+        font-size: 12px !important;
+        color: var(--text-muted) !important;
+        margin-bottom: 0 !important;
+    }
+    .stRadio > div[role="radiogroup"] {
+        flex-direction: row !important;
+        gap: 4px !important;
+        flex-wrap: nowrap !important;
+    }
+    .stRadio > div[role="radiogroup"] > label {
+        background-color: var(--bg-card) !important;
+        border: 1px solid var(--border) !important;
+        border-radius: 20px !important;
+        padding: 6px 10px !important;
+        min-height: 34px !important;
+        line-height: 22px !important;
+        color: var(--text-muted) !important;
+        font-size: 13px !important;
+        font-weight: 500 !important;
+        cursor: pointer !important;
+        transition: all 0.15s ease !important;
+        display: inline-flex !important;
+        align-items: center !important;
+        white-space: nowrap !important;
+    }
+    .stRadio > div[role="radiogroup"] > label:hover {
+        border-color: var(--accent) !important;
+        color: var(--text-primary) !important;
+    }
+    .stRadio > div[role="radiogroup"] > label[data-baseweb="radio"] {
+        justify-content: center !important;
+    }
+    /* Selected / checked pill */
+    .stRadio > div[role="radiogroup"] > label:has(input:checked),
+    .stRadio > div[role="radiogroup"] > label[aria-checked="true"] {
+        background-color: var(--accent) !important;
+        border-color: var(--accent) !important;
+        color: #ffffff !important;
+        font-weight: 700 !important;
+    }
+    /* Hide the native radio circle */
+    .stRadio > div[role="radiogroup"] > label > div:first-child {
+        display: none !important;
+    }
+    .stRadio > div[role="radiogroup"] > label > div:last-child {
+        margin-left: 0 !important;
+        padding-left: 0 !important;
+    }
+
+    /* ── Compact single-row form ── */
+    form[data-testid="stForm"] {
+        padding: 0.75rem 1rem !important;
+    }
+    form[data-testid="stForm"] > div {
+        align-items: flex-end !important;
+    }
+    /* Set explicit height for all form elements to align bottoms */
+    form[data-testid="stForm"] [data-testid="stColumn"] {
+        height: 70px !important;
+    }
+    form[data-testid="stForm"] [data-testid="stColumn"] > div {
+        display: flex !important;
+        flex-direction: column !important;
+        justify-content: flex-end !important;
+        height: 100% !important;
+    }
+    /* Make all form inputs fill their column width */
+    form[data-testid="stForm"] .stTextInput,
+    form[data-testid="stForm"] .stSelectbox,
+    form[data-testid="stForm"] .stRadio,
+    form[data-testid="stForm"] .stButton {
+        width: 100% !important;
+    }
+    form[data-testid="stForm"] .stTextInput > div,
+    form[data-testid="stForm"] .stSelectbox > div,
+    form[data-testid="stForm"] .stSelectbox > div > div {
+        width: 100% !important;
+    }
+    /* Compact selectbox — shrink to single-line height */
+    form[data-testid="stForm"] .stSelectbox {
+        padding-top: 0 !important;
+        margin-top: 0 !important;
+    }
+    form[data-testid="stForm"] .stSelectbox > div > div:first-child {
+        padding: 0 8px !important;
+        min-height: 38px !important;
+    }
+    form[data-testid="stForm"] .stSelectbox div[data-baseweb="select"] {
+        height: 38px !important;
+    }
+    form[data-testid="stForm"] .stSelectbox div[data-baseweb="select"] > div {
+        min-height: 38px !important;
+        padding: 0 8px !important;
+        font-size: 18px !important;
+    }
+    form[data-testid="stForm"] .stSelectbox label {
+        font-size: 13px !important;
+        margin-bottom: 4px !important;
+    }
+    /* Compact text input to match */
+    form[data-testid="stForm"] .stTextInput > div > div > input {
+        min-height: 38px !important;
+        padding: 0 8px !important;
+    }
+    form[data-testid="stForm"] .stTextInput label {
+        font-size: 13px !important;
+        margin-bottom: 4px !important;
+    }
+</style>
+"""
+
+CARD_EQUALIZER_JS = """
+<script>
+(function() {
+    // st.components renders in an iframe — reach out to the parent document
+    const doc = window.parent.document;
+
+    function equalizeCardDescriptions() {
+        const expanders = doc.querySelectorAll('.stExpander details[open]');
+        if (!expanders.length) {
+            // Cards not yet rendered — retry
+            setTimeout(equalizeCardDescriptions, 300);
+            return;
+        }
+
+        const rows = {};
+        expanders.forEach(details => {
+            const rect = details.getBoundingClientRect();
+            const rowKey = Math.round(rect.top / 20) * 20;
+            if (!rows[rowKey]) rows[rowKey] = [];
+            rows[rowKey].push(details);
+        });
+
+        Object.values(rows).forEach(rowItems => {
+            // Reset all description heights in the row
+            rowItems.forEach(details => {
+                const pTags = details.querySelectorAll('.stMarkdown p');
+                for (const p of pTags) {
+                    if (!p.textContent.startsWith('💡') && !p.closest('.stMarkdown').querySelector('img')) {
+                        p.closest('.stMarkdown').style.minHeight = '';
+                    }
+                }
+            });
+
+            // Measure tallest description
+            let maxH = 0;
+            const descs = [];
+            rowItems.forEach(details => {
+                const pTags = details.querySelectorAll('.stMarkdown p');
+                for (const p of pTags) {
+                    const parent = p.closest('.stMarkdown');
+                    if (parent && !p.textContent.startsWith('💡') && !parent.querySelector('img')) {
+                        const h = parent.getBoundingClientRect().height;
+                        if (h > maxH) maxH = h;
+                        descs.push(parent);
+                        break;
+                    }
+                }
+            });
+
+            // Set all to tallest
+            descs.forEach(desc => { desc.style.minHeight = maxH + 'px'; });
+        });
+    }
+
+    // Start with a delay to let Streamlit render cards
+    setTimeout(equalizeCardDescriptions, 500);
+
+    // Watch for DOM changes in the parent
+    new MutationObserver(() => {
+        clearTimeout(window._cardEqTimer);
+        window._cardEqTimer = setTimeout(equalizeCardDescriptions, 200);
+    }).observe(doc.body, { childList: true, subtree: true });
+})();
+</script>
+"""
+
+EMOJI_MAP = {
+    "attractions": "✨",
+}
+
+FLEX_PANELS_JS = """<!DOCTYPE html>
+<html>
+<body>
+<script>
+(function() {
+    // We run inside a Streamlit component iframe — target the parent document
+    const doc = window.parent.document;
+
+    function resizePanels() {
+        const vh = window.parent.innerHeight;
+        if (!vh) return;
+
+        // Strategy: find the scrollable card container and map iframe,
+        // then set their height so they fill the remaining viewport.
+        // Use getBoundingClientRect for accurate positioning.
+
+        const cardContainer = Array.from(
+            doc.querySelectorAll('[data-testid="stVerticalBlock"]')
+        ).find(el => doc.defaultView.getComputedStyle(el).overflowY === 'auto');
+
+        if (cardContainer) {
+            const rect = cardContainer.getBoundingClientRect();
+            const panelHeight = Math.max(300, vh - rect.top - 24);
+
+            cardContainer.style.setProperty('height', panelHeight + 'px', 'important');
+            cardContainer.style.setProperty('max-height', panelHeight + 'px', 'important');
+
+            // Also resize parent LayoutWrapper
+            if (cardContainer.parentElement?.getAttribute('data-testid') === 'stLayoutWrapper') {
+                cardContainer.parentElement.style.setProperty('height', panelHeight + 'px', 'important');
+            }
+        }
+
+        // Find the folium iframe container and set its height similarly
+        const foliumContainer = doc.querySelector('.stCustomComponentV1');
+        if (foliumContainer) {
+            const rect = foliumContainer.getBoundingClientRect();
+            const mapHeight = Math.max(300, vh - rect.top - 24);
+            foliumContainer.style.setProperty('height', mapHeight + 'px', 'important');
+        }
+        doc.querySelectorAll('.stCustomComponentV1 iframe').forEach(iframe => {
+            const rect = iframe.getBoundingClientRect();
+            const mapHeight = Math.max(300, vh - rect.top - 24);
+            iframe.style.setProperty('height', mapHeight + 'px', 'important');
+        });
+    }
+
+    // Run on load (delayed to let Streamlit render)
+    setTimeout(resizePanels, 200);
+
+    // Run on resize
+    window.parent.addEventListener('resize', () => {
+        clearTimeout(window._panelResizeTimer);
+        window._panelResizeTimer = setTimeout(resizePanels, 100);
+    });
+
+    // Watch for DOM changes in parent (Streamlit re-renders)
+    new MutationObserver(() => {
+        clearTimeout(window._panelResizeTimer);
+        window._panelResizeTimer = setTimeout(resizePanels, 300);
+    }).observe(doc.body, { childList: true, subtree: true });
+})();
+</script>
+</body>
+</html>
+"""
+
+CARD_HOVER_JS = """<!DOCTYPE html>
+<html>
+<body>
+<script>
+(function() {
+    const doc = window.parent.document;
+
+    function getFoliumWin() {
+        var iframe = doc.querySelector('.stFolium iframe, iframe[title="streamlit_folium.st_folium"]');
+        return iframe ? iframe.contentWindow || iframe.contentWindow : null;
+    }
+
+    function getFoliumDoc() {
+        var iframe = doc.querySelector('.stFolium iframe, iframe[title="streamlit_folium.st_folium"]');
+        return iframe ? iframe.contentDocument || iframe.contentWindow.document : null;
+    }
+
+    function findLeafletMap() {
+        var win = getFoliumWin();
+        if (!win) return null;
+        // Leaflet map instances are stored as global variables; find one
+        for (var k in win) {
+            try {
+                if (win[k] && win[k]._container && win[k]._layers) return win[k];
+            } catch(e) {}
+        }
+        return null;
+    }
+
+    function highlightMarker(idx) {
+        var fdoc = getFoliumDoc();
+        if (!fdoc) return;
+        var el = fdoc.querySelector('.spider-marker[data-idx="'+idx+'"]');
+        if (!el) return;
+        el.style.background = '#f59e0b';
+        el.style.transform = 'scale(1.35)';
+        el.style.boxShadow = '0 0 14px rgba(245,158,11,0.6)';
+        el.style.zIndex = '1000';
+        // Open popup
+        var map = findLeafletMap();
+        if (map) {
+            map.eachLayer(function(layer) {
+                if (layer._icon === el.parentElement && layer._map) {
+                    layer.openPopup();
+                }
+            });
+        }
+    }
+
+    function unhighlightMarker(idx) {
+        var fdoc = getFoliumDoc();
+        if (!fdoc) return;
+        var el = fdoc.querySelector('.spider-marker[data-idx="'+idx+'"]');
+        if (!el) return;
+        el.style.background = '#2a9fd6';
+        el.style.transform = '';
+        el.style.boxShadow = '0 2px 6px rgba(0,0,0,0.5)';
+        el.style.zIndex = '';
+        // Close popup
+        var map = findLeafletMap();
+        if (map) {
+            map.eachLayer(function(layer) {
+                if (layer._icon === el.parentElement && layer._map) {
+                    layer.closePopup();
+                }
+            });
+        }
+    }
+
+    function setupCardHover() {
+        var pins = doc.querySelectorAll('.card-pin[data-card-idx]');
+        if (!pins.length) { setTimeout(setupCardHover, 300); return; }
+
+        pins.forEach(function(pin) {
+            if (pin._hoverSetup) return;
+            pin._hoverSetup = true;
+
+            var idx = parseInt(pin.getAttribute('data-card-idx'));
+            var column = pin.closest('[data-testid="stColumn"]') || pin.parentElement;
+            var expander = column ? column.querySelector('.stExpander') : null;
+            if (!expander) return;
+
+            expander.addEventListener('mouseenter', function() {
+                highlightMarker(idx);
+            });
+            expander.addEventListener('mouseleave', function() {
+                unhighlightMarker(idx);
+            });
+        });
+    }
+
+    setTimeout(setupCardHover, 500);
+    new MutationObserver(function() {
+        clearTimeout(window._hoverObTimer);
+        window._hoverObTimer = setTimeout(setupCardHover, 300);
+    }).observe(doc.body, { childList: true, subtree: true });
+})();
+</script>
+</body>
+</html>
+"""
+
+SMART_IMAGE_POSITION_JS = """<!DOCTYPE html>
+<html>
+<body>
+<script>
+(function() {
+    var doc = window.parent.document;
+
+    function repositionPortraitImages() {
+        var imgs = doc.querySelectorAll('.card-img');
+        var found = 0;
+        imgs.forEach(function(img) {
+            // If natural dimensions are available, check immediately
+            if (img.naturalHeight > 0 && img.naturalWidth > 0) {
+                found++;
+                if (img.naturalHeight > img.naturalWidth) {
+                    // Portrait: show upper third to capture the attraction, not the ground
+                    img.style.objectPosition = '50% 25%';
+                } else {
+                    img.style.objectPosition = '50% 50%';
+                }
+            }
+        });
+        // Retry if no images have loaded yet
+        if (found === 0 && imgs.length > 0) {
+            setTimeout(repositionPortraitImages, 300);
+        }
+    }
+
+    // Also handle lazy-loaded images — they'll fire 'load' after becoming visible
+    doc.addEventListener('load', function(e) {
+        if (e.target && e.target.classList && e.target.classList.contains('card-img')) {
+            if (e.target.naturalHeight > e.target.naturalWidth) {
+                e.target.style.objectPosition = '50% 25%';
+            }
+        }
+    }, true);
+
+    // Initial run after DOM settles
+    setTimeout(repositionPortraitImages, 500);
+})();
+</script>
+</body>
+</html>
+"""
+
+def apply_dark_theme():
+    """Inject dark-theme CSS, flexible panel JS, card↔map hover JS, and smart image positioning JS."""
+    import streamlit as st
+    st.markdown(DARK_THEME_CSS, unsafe_allow_html=True)
+    # Use st.iframe to execute JS (st.markdown strips <script> tags)
+    st.iframe(FLEX_PANELS_JS, height=1)
+    st.iframe(CARD_HOVER_JS, height=1)
+    st.iframe(SMART_IMAGE_POSITION_JS, height=1)

src/utils/prompts.py

@@ -0,0 +1,30 @@
+"""Prompt template for the attractions tab."""
+
+ATTRACTIONS_PROMPT = """You are a travel expert. List the top {num_attractions} {category_prompt}
+
+CRITICAL: Each entry must be ONE SINGLE attraction or place. Do NOT combine multiple places with "&", "and", "/", or commas in the name field. For example, "Meiji Shrine" not "Meiji Shrine & Yoyogi Park".
+
+For each entry, provide:
+1. **Name** — the single place name only
+2. **Description** — a short description of why it's worth visiting (between 120 and 125 characters)
+3. **Short description** — a one-liner summary (max 25 characters)
+4. **Tip** — one practical tip for visitors (max 60 characters, e.g., best time to visit, ticket info, how to skip lines)
+5. **Latitude** — the latitude as a number (e.g. 48.8584)
+6. **Longitude** — the longitude as a number (e.g. 2.2945)
+Return the result as a JSON array with {num_attractions} objects, each having keys: "name", "description", "short_description", "tip", "latitude", "longitude".
+Only return valid JSON, no markdown fences or extra text."""
+
+PROMPT_MAP = {
+    "attractions": ATTRACTIONS_PROMPT,
+}
+
+# Maps category toggle names to prompt insertion text
+CATEGORY_GUIDANCE = {
+    "Landmark": "famous landmarks in {city} recommended by major travel guides. Focus on iconic buildings, monuments, towers, bridges, castles, palaces, cathedrals, statues, and other man-made structures. Do NOT include parks, gardens, heaths, open spaces, or natural areas.",
+    "Culture": "cultural things to do in {city} recommended by major travel guides.",
+    "Food": "food and drink areas, restaurants and bars in {city} recommended by major travel guides.",
+    "Nature": "nature spots and parks in {city} recommended by major travel guides.",
+    "Photo": "scenic photo spots and instagrammable places in {city} recommended by major travel guides.",
+    "Shopping": "shopping districts, malls and street markets in {city} recommended by major travel guides.",
+    "Gems": "hidden gem neighborhoods and lesser-known spots in {city} recommended by major travel guides.",
+}