Architecture Overview
Relevant source files
The following files were used as context for generating this wiki page:This document provides a technical overview of the "AI for Thai EMS" application architecture. The project is a single-page web application designed to showcase a framework for applying Artificial Intelligence (AI) to enhance Emergency Medical Service (EMS) processes in Thailand. It is built using modern web technologies and integrates with Google's Gemini AI to provide its core functionality.
The application's architecture is entirely client-side, running in the user's browser. It consists of a main presentation layer that explains the project's goals and two interactive features: an emergency dispatch simulation and an AI assistant chatbot. All AI processing is handled by making API calls to the external Google Gemini service.
Sources: metadata.json, App.tsx, README.md
Technology Stack
The application is built with a modern, lightweight frontend stack. The core technologies are managed via npm and built using Vite.
| Technology | Description | Source File |
|---|---|---|
| React | A JavaScript library for building user interfaces. The application is component-based, with App.tsx as the root component. | package.json:13 |
| TypeScript | A typed superset of JavaScript that compiles to plain JavaScript, used for type safety across the application. | package.json:18 |
| Vite | A modern frontend build tool that provides a fast development server and bundles the application for production. | package.json:19 |
| Tailwind CSS | A utility-first CSS framework used for styling the application. It is loaded via a CDN. | index.html:6 |
| @google/genai | The official Google AI SDK for JavaScript, used to interact with the Gemini API. | package.json:12 |
Sources: package.json:11-19, index.html:6, vite.config.ts
Application Structure
The application follows a standard component-based architecture. The main App.tsx file serves as the entry point, composing various smaller, reusable components to build the UI.
Sources: App.tsx:2-10, index.tsx:3-14
Component Hierarchy
The diagram below illustrates the primary component structure of the application, starting from the main App component.
This diagram shows how App.tsx orchestrates the layout by importing and rendering various UI components like Header, Section, AiDemo, and Chatbot. The interactive components AiDemo and Chatbot both rely on geminiService.ts to communicate with the AI backend.
Sources: App.tsx:2-10, components/AiDemo.tsx:3-4, components/Chatbot.tsx:4-5
AI Integration (Gemini Service)
All AI capabilities are provided by the Google Gemini API, accessed through a dedicated service module. This service abstracts the API calls and defines the communication contract with the AI model.
Sources: services/geminiService.ts
Service Functions
The geminiService.ts file exports two key asynchronous functions for interacting with the Gemini API:
analyzeEmergencyCallWithGemini(transcript: string): This function takes a string transcript of an emergency call, sends it to thegemini-2.5-flashmodel, and requests a structured JSON response.sendMessageToChatStream(history, message, isThinkingMode, useSearch, useMaps): This function handles the chatbot's conversational logic. It sends the current chat history and a new message to the Gemini API and returns a response stream. It can dynamically select the model (gemini-2.5-proorgemini-2.5-flash) and enable tools like Google Search and Maps.
Sources: services/geminiService.ts:9-49, 68-93
Core Features
The application showcases two primary AI-driven features.
1. Emergency Dispatch Simulation
The AiDemo component simulates a real-time emergency call. As the conversation between a dispatcher and a caller unfolds, the transcript is sent for analysis.
Sources: components/AiDemo.tsx
State Management
The simulation is controlled by a simple state machine within the AiDemo component.
The component transitions from idle to running when the user starts the simulation. It moves to finished when the pre-defined transcript is complete or an API error occurs.
Sources: components/AiDemo.tsx:21, 80-84, 90-95
Data Flow
The following sequence diagram illustrates the data flow when the AiDemo component runs an analysis.
This flow shows the component sending the transcript to the geminiService, which then calls the Gemini API. The structured JSON response is used to update the "AI Analysis Dashboard" in the UI.
Sources: components/AiDemo.tsx:57-71, services/geminiService.ts:9-49
AI Response Schema
The analyzeEmergencyCallWithGemini function enforces a strict JSON schema for the AI's response to ensure predictable, structured data.
| Field | Type | Description |
|---|---|---|
incidentType | string | The type of emergency (e.g., Cardiac Emergency, Trauma). |
location | string | The full address of the incident. |
severity | string | The assessed severity. Must be one of: "Critical", "Urgent", "Non-Urgent". |
recommendedAction | string | The suggested next step (e.g., Dispatch ALS Ambulance). |
extractedData | object | An object containing structured patient information. |
extractedData.name | string | Patient's name. |
extractedData.age | string | Patient's age. |
extractedData.condition | string | A summary of the patient's condition. |
Sources: services/geminiService.ts:11-28, types.ts:13-21
2. EMS AI Assistant Chatbot
The Chatbot component provides a conversational interface powered by Gemini. It supports text and audio input, streaming responses, and configurable AI capabilities.
Sources: components/Chatbot.tsx
Chat Data Flow
The sequence diagram below shows the process of sending a message and receiving a streamed response.
This interaction uses streaming to provide a more responsive user experience, where the AI's response appears token by token. The component also handles audio input by using the browser's MediaRecorder API and sending the audio data for transcription.
Sources: components/Chatbot.tsx:64-94, services/geminiService.ts:68-93
Data Models
The application uses TypeScript interfaces to define the shape of its core data structures, ensuring type safety and clarity.
Sources: types.ts
This diagram shows the main data types used for the AI analysis result, as well as for static content like the research team and project timeline.
Sources: types.ts:1-21
Configuration and Deployment
The application requires a Google Gemini API key to function. This is managed through environment variables.
The vite.config.ts file is configured to expose the GEMINI_API_KEY from a .env file to the application code under process.env.API_KEY. This prevents the key from being hardcoded in the source.
Sources: vite.config.ts:8, 13-14, README.md:12