Data Flow
Relevant source files
The following files were used as context for generating this wiki page:The data flow in the LLaMa Leaks application is designed around a simple, decoupled architecture. A backend process is responsible for identifying publicly exposed Ollama servers and generating a static JSON file. The frontend application then consumes this static file to display the server information in various UI components, such as the hero section and the main dashboard.
This approach separates the data collection logic from the data presentation layer, allowing the frontend to be a fast, static site that fetches pre-processed data. The primary data artifact that connects the backend and frontend is /data/live_servers.json.
Overall Architecture
The system consists of two main parts: a backend data producer (inferred to be live_server_identifier.py) and a frontend data consumer (the React application). The backend's role is to populate the live_servers.json file, which acts as the single source of truth for the frontend.
The following diagram illustrates the high-level data flow from data generation to frontend presentation.
This diagram shows the backend script creating a JSON file, which is then fetched and displayed by various components in the frontend application.
Sources: frontend/src/components/Hero.tsx:50-53, frontend/src/components/LocationInfo.tsx:44-47
Frontend Data Fetching
The frontend application retrieves server data by making an HTTP GET request to the static file /data/live_servers.json. This is implemented in several components.
Direct Fetch in Components
Components like Hero and LocationInfo use the native fetch API directly within a useEffect hook to get the server data. Upon a successful fetch, a random server is selected from the returned list and stored in the component's state to be rendered.
Sources: frontend/src/components/Hero.tsx:48-66, frontend/src/components/LocationInfo.tsx:42-60
The sequence diagram below shows this process for the Hero component.
Custom Hook: useModelData
For more complex views like the ModelExecutionDashboard, data fetching is abstracted into a custom hook: useModelData. This hook encapsulates the logic for fetching, managing loading/error states, and processing the server data into a more structured format (ModelExecution[]). This promotes reusability and separation of concerns.
Sources: frontend/src/components/ModelExecutionDashboard.tsx:16, frontend/src/hooks/useModelData.ts
Data Models
The structure of the data fetched from live_servers.json is defined by several TypeScript interfaces within the frontend codebase. The primary interfaces are ServerData and ServerModel.
Entity Relationship Diagram
The ServerData entity has a one-to-many relationship with the ServerModel entity, as a single server can have multiple local and running models.
This diagram shows that each ServerData record can be associated with many ServerModel records, categorized as either "local" or "running".
Sources: frontend/src/components/Hero.tsx:16-33, frontend/src/components/LocationInfo.tsx:11-29, frontend/src/types/ModelExecution.ts
ServerData Interface
This interface represents a single exposed Ollama server.
| Field | Type | Description | Source File |
|---|---|---|---|
ip | string | The masked IP address of the server. | Hero.tsx:19 |
port | number | The port number the server is running on. | Hero.tsx:20 |
version | string | The Ollama version string. | Hero.tsx:21 |
city | string | The city where the server is located. | Hero.tsx:22 |
country | string | The two-letter country code. | Hero.tsx:23 |
country_name | string | The full country name. | Hero.tsx:24 |
region | string | The region or state. | Hero.tsx:25 |
latitude | string | The geographical latitude. | Hero.tsx:26 |
longitude | string | The geographical longitude. | Hero.tsx:27 |
local | ServerModel[] | An array of models available locally on the server. | Hero.tsx:28 |
running | ServerModel[] | An array of models currently running on the server. | Hero.tsx:29 |
first_seen_online | string | Timestamp of when the server was first observed. | Hero.tsx:30 |
last_observed | string | Timestamp of when the server was last observed (Hero component). | Hero.tsx:31 |
age | string | A human-readable string representing how long the server has been seen. | Hero.tsx:32 |
status | string | The current status of the server (e.g., 'live'). | Hero.tsx:33 |
ServerModel Interface
This interface represents an AI model found on an exposed server.
| Field | Type | Description | Source File |
|---|---|---|---|
name | string | The name of the model (e.g., 'llama3:latest'). | Hero.tsx:13 |
model | string | The base model identifier. | Hero.tsx:14 |
size | number | The size of the model in bytes. | Hero.tsx:15 |
ModelExecution Type
The ModelExecutionDashboard uses a transformed data type, ModelExecution, which appears to be a flattened or aggregated representation derived from the ServerData.
Sources: frontend/src/types/ModelExecution.ts, frontend/src/components/ModelExecutionDashboard.tsx:16
Data Consumption and Display
Once fetched, the server data is rendered by various React components.
-
Hero.tsx&LocationInfo.tsx: These components select a single random server from the fetched data and display its details, including location on a map, IP/port, version, and a list of its models. They provide a "Random Server" button to re-trigger the fetch and selection process.
Sources: frontend/src/components/Hero.tsx:205-325, frontend/src/components/LocationInfo.tsx:204-300 -
ModelExecutionDashboard.tsx: This component provides a comprehensive view of all models from all servers. It uses theuseModelDatahook to fetch the data and theuseModelFiltershook to handle client-side searching, filtering, and sorting of the model list. The results are paginated for better user experience.
Sources: frontend/src/components/ModelExecutionDashboard.tsx:8-30
The flow within the dashboard is more complex, involving multiple custom hooks to manage state.
This diagram shows how data flows through hooks to be filtered and finally displayed in the ModelList component within the dashboard.
Sources: frontend/src/components/ModelExecutionDashboard.tsx:8-44