Frontend Architecture

Relevant source files

The following files were used as context for generating this wiki page:

• App.tsx
• index.tsx
• components/AiDemo.tsx
• components/Chatbot.tsx
• services/geminiService.ts
• types.ts
• constants.ts
• vite.config.ts
• index.html
• package.json

The frontend for "AI for Thai EMS" is a modern web application built with React and TypeScript. Its primary purpose is to serve as a demonstrative platform showcasing the framework for applying Artificial Intelligence (AI) to enhance Emergency Medical Service (EMS) processes in Thailand. The application presents informational content about the research project and provides interactive demonstrations of AI capabilities, including a simulated emergency call analysis and a general-purpose AI assistant chatbot.

The architecture is centered around a modular, component-based structure that promotes reusability and separation of concerns. It directly integrates with the Google Gemini API for its AI-powered features. The application is bundled using Vite, ensuring a fast development experience and optimized production builds.

Sources: README.md, metadata.json, App.tsx, package.json

Technology Stack and Setup

The project utilizes a modern frontend stack designed for building interactive and data-driven user interfaces.

Technology	Role	Configuration / Source Files
React	The core UI library for building the component-based interface.	package.json:13-14, index.tsx:2, App.tsx:1
TypeScript	Provides static typing for the entire codebase, enhancing code quality and maintainability.	tsconfig.json, *.tsx, *.ts
Vite	The build tool and development server. It provides fast module replacement and optimized builds.	vite.config.ts, package.json:7-9
Tailwind CSS	A utility-first CSS framework used for styling the application, configured via a CDN script.	index.html:7-26
@google/genai	The official Google GenAI client library for interacting with the Gemini API.	package.json:12, services/geminiService.ts:1

The application entry point is index.tsx, which renders the main App component into the div#root element in index.html. Vite is configured in vite.config.ts to define environment variables (like GEMINI_API_KEY) and set up path aliases.

Sources: index.tsx:4-13, index.html:28, vite.config.ts:5-19, package.json:7-17

Component Architecture

The application UI is a composition of several functional React components. The main App component serves as the central layout container, orchestrating the display of various sections and interactive elements.

This diagram illustrates the high-level component hierarchy.

Key Components

Component	Description	Source File
App	The root component that assembles the entire page layout, including the header, main content sections, and the floating chatbot. It imports data from constants.ts to populate content.	App.tsx
Header	A sticky header component displaying the NIEM logo and project title.	components/Header.tsx
Section	A reusable component for creating titled content sections with a consistent style.	components/Section.tsx
AiDemo	An interactive simulation of an AI-assisted emergency dispatch call. It manages the state of a simulated conversation and calls the Gemini API to get real-time analysis.	components/AiDemo.tsx
Chatbot	A floating chatbot widget that allows users to interact with a Gemini model. It supports text and audio input, streaming responses, and configurable tools like Google Search and Maps.	components/Chatbot.tsx
Timeline	Displays a vertical timeline of project events, populated by data from constants.ts.	components/Timeline.tsx
Card	A reusable card component for displaying content, used for project objectives.	components/Card.tsx
Icons	A collection of SVG icon components used throughout the application.	components/Icons.tsx

Data Models and Types

The application uses TypeScript interfaces to define the shape of its core data structures, ensuring type safety between components and services.

Sources: types.ts

This diagram shows the main data structures used in the application.

• AiAnalysisResult: Defines the structure for the JSON object returned by the Gemini API in the AiDemo component.
• Researcher: Defines the structure for members of the research team.
• TimelineEvent: Defines the structure for events in the project timeline.

Sources: types.ts:1-20, constants.ts:1, 21, 40

AI Service Integration (geminiService)

All interactions with the Google Gemini API are encapsulated within the services/geminiService.ts file. This service provides abstracted functions for the UI components to use, separating API logic from the view layer.

Sources: services/geminiService.ts

Service Functions

Function	Description
analyzeEmergencyCallWithGemini	Takes a transcript string, sends it to the gemini-2.5-flash model, and expects a structured JSON response conforming to the AiAnalysisResult type. It defines a response schema for the API call.
sendMessageToChatStream	Manages a chat session with the Gemini API for the Chatbot. It selects the model (gemini-2.5-pro or gemini-2.5-flash) and configures tools (Google Search, Google Maps) based on user settings.

Sources: services/geminiService.ts:8-85

Feature: AI Emergency Dispatch Simulation (AiDemo)

The AiDemo component simulates a real-time analysis of an emergency call. It uses React state hooks (useState, useEffect, useCallback) to manage the simulation's progress.

Data Flow:

1. User clicks "Start Simulation".
2. The simulationState is set to 'running'.
3. An useEffect hook with a setInterval progressively adds lines from a hardcoded fullTranscript to the transcript state.
4. When a line from the 'Caller' is added, the runAnalysis function is triggered.
5. runAnalysis calls analyzeEmergencyCallWithGemini from geminiService.ts with the current transcript.
6. The service sends the transcript to the Gemini API, which returns a structured JSON object.
7. The component updates the analysis state with the results, and the UI re-renders to display the incident type, severity, location, and other extracted data.

The following sequence diagram illustrates this process.

Feature: EMS AI Assistant (Chatbot)

The Chatbot component provides a persistent, interactive chat interface. It handles user input (text and audio), manages conversation history, and displays streaming responses from the AI.

Data Flow:

1. The user types a message and clicks "Send" or finishes an audio recording.
2. handleSendMessage is called, adding the user's message to the messages state.
3. The component calls sendMessageToChatStream from geminiService.ts, passing the chat history and current message.
4. The service initiates a streaming request to the Gemini API.
5. The component iterates through the returned stream. For each chunk of text received, it appends it to the last message in the messages state, creating a "typing" effect.
6. If the response includes grounding metadata (sources from Google Search or Maps), it is also added to the message object and displayed.

This sequence diagram shows the chatbot's message flow.

The chatbot also includes an audio transcription feature that uses the browser's MediaRecorder API and the @google/genai library's live connection capabilities to transcribe user speech into the input field.

Sources: components/Chatbot.tsx:102-168