AI Demo Walkthrough
Relevant source files
The following files were used as context for generating this wiki page:
The AI Demo Walkthrough is an interactive feature within the "AI for Thai EMS" application that simulates a real-time emergency dispatch call. Its purpose is to showcase how an AI model can analyze a conversation transcript, extract critical information, and provide structured analysis to assist dispatchers. The component, <AiDemo>, is a central part of the application's main page, demonstrating the practical application of AI in improving emergency response processes.
This system is self-contained within the frontend and uses a pre-defined script for the conversation. It makes live calls to the Google Gemini API to perform the analysis, providing a dynamic demonstration of the AI's capabilities.
Sources: components/AiDemo.tsx, App.tsx:29
System Architecture
The AI Demo system is composed of a main UI component (AiDemo), a service for API communication (geminiService), and a set of type definitions. The AiDemo component manages the simulation's state and renders the user interface, while the geminiService encapsulates the logic for interacting with the Google Gemini API.
Component and Service Interaction
The following diagram illustrates the relationship between the key components involved in the AI Demo feature.
This diagram shows that App.tsx renders the AiDemo component. AiDemo then calls the geminiService to perform analysis, which communicates with the external Gemini API. Both the component and the service rely on the AiAnalysisResult type defined in types.ts.
Sources: App.tsx:29, components/AiDemo.tsx:55, services/geminiService.ts:9, types.ts:11-19
State Management and Simulation Flow
The simulation is controlled by a state machine within the AiDemo component. The state determines the UI and the flow of the demonstration.
Simulation States
The component manages its lifecycle through the simulationState variable, which can be one of three values:
| State | Description |
|---|---|
idle | The initial state. The simulation has not started. The "Start Simulation" button is visible. |
running | The simulation is in progress. Transcript lines are added incrementally, and AI analysis is triggered. |
finished | The simulation has completed the full transcript or an error occurred. The "Reset" button is visible. |
Sources: components/AiDemo.tsx:40
State Transition Diagram
The user's interaction with the "Start" and "Reset" buttons drives the transitions between these states.
This diagram shows the flow from idle to running upon starting the simulation. While running, it loops through adding transcript lines and triggers analysis. The simulation moves to the finished state when the transcript is complete or an error occurs, and can be returned to idle by the user.
Sources: components/AiDemo.tsx:73-87, components/AiDemo.tsx:94-103
AI Analysis Process
The core of the demo is the runAnalysis function, which orchestrates the call to the Gemini API and updates the UI with the results.
Sequence of Analysis
The analysis is triggered whenever a new line from the 'Caller' is added to the transcript. This simulates a real-world scenario where the AI provides updated analysis as more information becomes available.
This sequence shows the user starting the simulation, followed by a loop that adds transcript lines. When the caller speaks, AiDemo.tsx calls analyzeEmergencyCallWithGemini in geminiService.ts, which constructs a prompt and sends it to the Gemini API. The returned JSON is parsed and used to update the AiDemo component's state, refreshing the analysis dashboard.
Sources: components/AiDemo.tsx:53-71, components/AiDemo.tsx:73-87, services/geminiService.ts:9-48
Gemini API Interaction
The analyzeEmergencyCallWithGemini function in geminiService.ts is responsible for communicating with the AI model.
- Model:
gemini-2.5-flash - Prompt: A template that includes the current transcript and instructs the model to extract key information.
- Response Format: The service configures the API to return a JSON object that conforms to a specific schema. This ensures a structured and predictable response.
The schema is defined to enforce the structure of the AiAnalysisResult type.
Sources: services/geminiService.ts:30-35
Data Structures
The primary data structure for this feature is AiAnalysisResult, which standardizes the output from the AI model.
AiAnalysisResult Interface
This interface defines the shape of the data expected from the Gemini API and used to populate the analysis dashboard.
| Field | Type | Description |
|---|---|---|
incidentType | string | null | The classification of the incident (e.g., "Cardiac Emergency"). |
location | string | null | The full address of the incident. |
severity | 'Critical' | 'Urgent' | 'Non-Urgent' | null | The assessed severity level of the call. |
recommendedAction | string | null | The suggested next step (e.g., "Dispatch ALS Ambulance"). |
extractedData | object | An object containing structured patient details. |
extractedData.name | string | The patient's name. |
extractedData.age | string | The patient's age. |
extractedData.condition | string | A summary of the patient's reported condition. |
Sources: types.ts:11-19, services/geminiService.ts:11-28
UI Components
The AiDemo component is divided into two main panels: the conversation transcript and the AI analysis dashboard.
- Transcript Panel: Displays the conversation from a hardcoded script (
fullTranscript). It visually distinguishes between the 'Dispatcher' and 'Caller'. A "Typing..." indicator is shown while waiting for the next line. - AI Analysis Dashboard: Renders the data from the
analysisstate object. It uses severalAnalysisItemsub-components, each with a distinct icon, to display fields like Incident Type, Location, and Recommended Action. The severity is highlighted with a color-coded banner. Loading indicators are shown whileisAnalyzingis true.
The icons used in the dashboard are defined as separate React components.
Sources: components/AiDemo.tsx:129-204, components/Icons.tsx
Summary
The AI Demo Walkthrough is a key feature that effectively demonstrates the project's goal of applying AI to EMS. It simulates a real-time analysis of an emergency call by managing a scripted conversation, making live API calls to the Google Gemini model, and displaying the structured output in a clear and informative dashboard. The system's architecture cleanly separates UI logic (AiDemo.tsx) from API communication (geminiService.ts), creating a modular and understandable implementation.