Relevant source files

The following files were used as context for generating this wiki page: - [gpt/gpt_chat.py](https://github.com/grapevinetravel/sophie-chatbot/blob/main/gpt/gpt_chat.py) - [V5.html](https://github.com/grapevinetravel/sophie-chatbot/blob/main/V5.html) - [homee.html](https://github.com/grapevinetravel/sophie-chatbot/blob/main/homee.html) - [home.html](https://github.com/grapevinetravel/sophie-chatbot/blob/main/home.html) - [gpt/short_circuits/display_full_hotel.py](httpshttps://github.com/grapevinetravel/sophie-chatbot/blob/main/gpt/short_circuits/display_full_hotel.py) - [indexx.html](https://github.com/grapevinetravel/sophie-chatbot/blob/main/indexx.html) - [V4.html](https://github.com/grapevinetravel/sophie-chatbot/blob/main/V4.html) - [V3.html](https://github.com/grapevinetravel/sophie-chatbot/blob/main/V3.html)

# Service: Mapbox Integration The Mapbox integration is a core feature of the Sophie Chatbot, providing geospatial capabilities that enhance the user experience. It allows the chatbot to understand location-based queries, display interactive maps for hotels, and calculate and visualize routes between points of interest. This service is primarily divided into two parts: a backend component that triggers location and direction lookups, and a frontend component that renders the maps using the Mapbox GL JS library. The integration is invoked by the GPT model when it detects user intent related to location or directions. The backend then returns structured data that the frontend uses to initialize and display the appropriate map view within the chat interface. This allows for a seamless transition from a text-based query to a rich, interactive map visualization. ## Architecture Overview The Mapbox integration follows a client-server architecture where the backend orchestrates the function calls and the frontend is responsible for rendering. The diagram below illustrates the high-level data flow for a Mapbox-related request. ```mermaid flowchart TD subgraph Frontend A[User Enters Query
"Show me directions to Big Ben"] --> B{Chat UI}; B --> C[Send Request to Backend]; J[Receive HTML/JS Reply] --> K{Map Rendering}; K -- Uses --> L[Mapbox GL JS Library]; L --> M[Display Interactive Map]; end subgraph Backend D[Chat Backend Receives Request]; D --> E{GPT-4o Model}; E -- Decides to call a tool --> F[Tool Call: `get_directions()`]; F --> G[Mapbox Service
(API Call)]; G -- Returns route data --> H[Process Result]; H --> I[Format Reply with Map Data]; end C --> D; I --> J; ``` *This diagram shows the end-to-end process from a user's query to the final map rendering in the chat UI.* Sources: [gpt/gpt_chat.py:111-120](), [V5.html:1278-1329]() ## Backend Integration The backend, specifically the main chat loop, is responsible for identifying when to use Mapbox functionalities. This is defined by rules in the system prompt for the GPT model. Sources: [gpt/gpt_chat.py]() ### Triggering Mapbox Functions The GPT model is instructed to call specific functions when it detects user intent related to locations or directions. - **`get_location`**: This function is called when the user asks to see a hotel's location. The model is prompted to use the hotel's address or coordinates if available. - **`get_directions`**: This function is called when the user asks for directions between two points, such as from a hotel to a landmark. It accepts an origin, a destination, and a travel mode. These rules are explicitly defined in the system prompt. *Sources: [gpt/gpt_chat.py:105-120]()* ### Function Definitions (as per GPT prompt) The following functions are made available to the GPT model for interacting with the Mapbox service. | Function | Description | Parameters - - - - - - - - - - - - - - - - - - - - - - - hustin - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -t- - - - - - - - - - - - - - - - - - - .. a) `gpt/gpt_chat.py`: This is the core logic for the chatbot. It contains the system prompt which defines the chatbot's behavior and workflow. Crucially, it defines when and how to call the `get_location` and `get_directions` functions. b) `V5.html`, `homee.html`, `home.html`, `indexx.html`, `V4.html`, `V3.html`: These HTML files contain the frontend user interface. They all include the Mapbox GL JS library and contain the JavaScript functions responsible for receiving data from the backend and rendering the maps. The logic is highly consistent across these files. c) `gpt/short_circuits/display_full_hotel.py`: This file generates the rich HTML display for hotel details, which includes a button that triggers the `showHotelLocation` JavaScript function, linking hotel information directly to the map visualization. The integration works by having the GPT model in the backend identify user requests for locations or directions. It then calls a corresponding tool (`get_location` or `get_directions`). The result of this tool call is then used to generate a response for the frontend. This response includes a `div` element for the map and a ` User->>User: Executes JS: initializeDirectionsMap() User->>MapboxAPI: GET /directions/v5/mapbox/walking/... (via Mapbox GL JS) MapboxAPI-->>User: Route geometry User->>User: Renders map with route and markers ``` *This diagram illustrates the full lifecycle of a directions request, from user input to the final map rendering, involving both backend and frontend components.* *Sources: [gpt/gpt_chat.py:111-120, 180-191](), [V5.html:1031-1072]()* ## Frontend Implementation The frontend is responsible for all map rendering. It uses the Mapbox GL JS library, which is included in all relevant HTML files. The access token is hardcoded in the JavaScript of these pages. *Sources: [V5.html:717-718, 813](), [homee.html:709-710, 805]()* ### Key JavaScript Functions Several JavaScript functions, present and consistent across the HTML files, manage the map's lifecycle. | Function | Description | Source Files - - - - - - - - - - - - - - - - - -/ - - - -g' - - - - - - - - - - - á - - - - - - - - - - - `initializeLocationMap(mapId, locationData)` | Initializes a map with a single marker for a specific location (e.g., a hotel). - - - - - - - - - - - - - - - .. -` | `V5.html`, `homee.html`, `home.html`, `indexx.html` | | `initializeDirectionsMap(mapId, routeData)` | Initializes a map to display a route between an origin and a destination. - - - - - - - - - - ... - - - - - - - - - - - - - - .. - - - - - - - - - - - ... - - - - - - - - - - - - - - - - - - - - - - - .. -t T- - - - - - - - - - - - - - - ... ... -