Feature: Version Leaderboard
Relevant source files
The following files were used as context for generating this wiki page:The Version Leaderboard is a feature that serves as a "Hall of Fame for Ollama versions by exposure count." It ranks different versions of Ollama software based on how many publicly exposed servers are running them. The feature is designed with an educational and "slightly sarcastic" tone to raise security awareness about running outdated and insecure software. It passively monitors servers and presents the aggregated data in a gamified, leaderboard format.
The leaderboard is presented on its own dedicated page, accessible via the application's routing. It aims to help developers understand the prevalence of outdated versions and encourages them to secure their own infrastructure.
Sources: frontend/src/components/VersionLeaderboard.tsx:210-213, frontend/src/pages/About.tsx:45-48, frontend/src/pages/Leaderboard.tsx
Architecture and Component Structure
The feature is primarily composed of two React components: a page component and a display component.
Leaderboard.tsx: This is the main page component that renders the overall page layout, including theHeader,WarningBanner,Footer, and theVersionLeaderboardcomponent itself.VersionLeaderboard.tsx: This is the core component responsible for fetching, processing, and displaying the leaderboard data.
The following diagram illustrates the simple component hierarchy.
This diagram shows the structure of the Leaderboard page, which wraps the VersionLeaderboard component with standard layout elements.
Sources: frontend/src/pages/Leaderboard.tsx:5-13
Data Flow and Processing
The VersionLeaderboard component is responsible for the entire data lifecycle, from fetching to rendering. On component mount, it initiates an asynchronous data fetching and processing sequence.
Data Fetching and Processing Sequence
The following sequence diagram shows how the component fetches and processes the server data.
This diagram illustrates the interaction between the component and the data source to render the leaderboard.
Sources: frontend/src/components/VersionLeaderboard.tsx:48-61
Data Processing Logic
The core logic resides within the fetchAndGroupData function. It performs the following steps:
- Fetch Data: Retrieves server information from the static file
/data/live_servers.json. - Parse JSON: Converts the JSON response into an array of
ServerDataobjects. - Group by Version: Iterates through each server and groups them by their major and minor version number (e.g., "0.5.10" becomes "0.5"). This is handled by the
parseVersionutility function. - Aggregate Statistics: For each version group, it calculates the total number of servers, the number of 'live' servers, the total number of local models, and the total size of all models.
- Sort: The resulting groups are sorted in ascending order by version number, meaning older versions appear first.
- Update State: The final array of
VersionGroupobjects is stored in the component's state, triggering a re-render to display the leaderboard.
The following flowchart visualizes this internal processing logic.
This flowchart details the step-by-step logic for processing server data into ranked version groups.
Sources: frontend/src/components/VersionLeaderboard.tsx:46-146
Data Structures
The feature relies on two primary data interfaces to structure the server and leaderboard data.
ServerData Interface
This interface represents the raw data for a single monitored server, as fetched from live_servers.json.
| Field | Type | Description |
|---|---|---|
ip | string | The IP address of the server. |
port | number | The port number the Ollama service is on. |
version | string | The full version string of the Ollama instance. |
city | string | The city where the server is located. |
country | string | The two-letter country code. |
country_name | string | The full country name. |
region | string | The region or state. |
latitude | string | The geographical latitude. |
longitude | string | The geographical longitude. |
local | ServerModel[] | An array of AI models available on the server. |
running | ServerModel[] | An array of AI models currently running. |
first_seen_online | string | ISO timestamp of when the server was first seen. |
age | string | A human-readable string of the server's age. |
status | string | The current status (e.g., 'live'). |
last_observed | string | ISO timestamp of the last observation. |
last_updated | string | ISO timestamp of the last data update. |
Sources: frontend/src/components/VersionLeaderboard.tsx:13-30, frontend/src/components/ServerStats.tsx:12-29, frontend/src/components/LocationInfo.tsx:11-28
VersionGroup Interface
This interface represents the aggregated data for a specific major.minor version, used to render each entry in the leaderboard.
| Field | Type | Description |
|---|---|---|
version | string | The major.minor version string (e.g., "0.5"). |
serverCount | number | Total number of servers running this version. |
totalModels | number | Sum of all models found across all servers in this group. |
totalModelSize | number | Sum of the size of all models in this group (in bytes). |
liveServers | number | Number of servers in this group with a 'live' status. |
Sources: frontend/src/components/VersionLeaderboard.tsx:32-38
Data Model Relationship
The VersionGroup is derived from multiple ServerData objects.
This diagram shows that a VersionGroup is an aggregation of one or more ServerData instances, and each ServerData can have multiple ServerModels.
Sources: frontend/src/components/VersionLeaderboard.tsx:8-38
UI and Presentation
The leaderboard displays the top 10 oldest versions found. Each entry is styled distinctly based on its rank.
Ranking and Styling
- Top 3 Ranks: The top three entries receive special icons and titles:
- Rank 1: 🥇 Gold - Legacy Champion (
Trophyicon) - Rank 2: 🥈 Silver - Vintage Runner-up (
Medalicon) - Rank 3: 🥉 Bronze - Classic Third (
Awardicon)
- Rank 1: 🥇 Gold - Legacy Champion (
- Other Ranks: Ranks 4 through 10 are displayed with a number (e.g., "#4 Version").
- Colors: Each rank has a corresponding color scheme applied via CSS classes, with gold, silver, and bronze tones for the top three.
Sources: frontend/src/components/VersionLeaderboard.tsx:148-189
Displayed Statistics
For each version group, the following statistics are displayed using the AnimatedCounter component for a dynamic effect:
- Servers: Total count of servers for that version.
- Live: Number of servers with a 'live' status.
- Models: Total number of models hosted by servers of that version.
- Total Size: The total disk size of all models, formatted into human-readable units (e.g., GB, TB).
A progress bar is also included for each entry, visually representing its server count relative to the version with the most servers.
Sources: frontend/src/components/VersionLeaderboard.tsx:252-296
Loading and Error States
The component provides clear user feedback during its lifecycle:
- Loading State: While data is being fetched, a skeleton UI with pulsing animations is displayed to indicate activity.
- Error State: If the data fetch fails, a message "Failed to load leaderboard" is shown along with the specific error message.
Sources: frontend/src/components/VersionLeaderboard.tsx:191-230
Conclusion
The Version Leaderboard is a key educational feature that uses real-world data to highlight the security risks of running outdated software. By fetching data on exposed Ollama servers, processing it to group by version, and presenting it in a ranked, visually engaging format, it effectively communicates the scale of the problem. The component is self-contained, handling its own data fetching, processing, and state management, and provides a robust user experience with clear loading and error states.