FieldReady

FieldReady is an interactive EMT training platform designed to help trainees build real-world skills through realistic simulations, geographic learning tools, study aids, and communication practice. The system blends AI-powered patient interactions, dynamic map training, and customizable study modules into one cohesive training environment.

---

Inspiration

EMTs must be prepared not only to assess and treat patients, but also to navigate their response areas quickly and accurately. Learning street names, building numbers, and dispatch communication is just as important as clinical skills. FieldReady was created to provide a comprehensive, hands-on environment that helps trainees practice all of these competencies, before ever stepping into the field.

---

What It Does

FieldReady includes four core training modules:

1. Patient Simulation

• Generates random EMT scenarios with realistic patient vitals.

• Trainees interact with AI-powered patients through voice or text.

• Ask assessment questions and receive natural, context-aware responses.

• AI dispatcher provides:

  • Feedback on assessment technique
  • Guidance through protocols (ABCDE, SAMPLE, vitals gathering, and more)

• Vital signs are dynamically generated based on the scenario.

• Voice synthesis provides lifelike dispatcher and patient dialogue.

Design Architecture for Patient Situation

---

2. Response Area Quiz

• Interactive map-based learning tool using Leaflet.js.
• Helps trainees memorize building locations, street names, and address layouts.
• Users identify buildings or locations on a map to reinforce response-area knowledge.

---

3. Flashcards

• A customizable study system for:

  • EMT protocols
  • Medications and dosages
  • Contraindications
  • Vital sign ranges

• Trainees can build custom decks or review preloaded materials.

---

4. Radio Simulation (in development)

• Provides practice with radio communication and dispatch procedures.
• Helps trainees learn the cadence, terminology, and clarity expectations of field dispatch.

---

How We Built It

FieldReady is built using a modern, scalable, and modular stack:

Frontend

• React + TypeScript
• Tailwind CSS for fast, responsive UI design
• Interactive mapping using Leaflet.js
• Real-time patient interaction UI with dynamic scenario rendering

Backend

• Express.js API for scenario management, scoring, and module logic

AI & Voice Integration

• Google Gemini API for:

  • Scenario generation
  • Line-by-line patient dialogue
  • Intelligent dispatcher feedback

• ElevenLabs for high-quality, adaptive patient and dispatcher voice synthesis

Mapping

• Leaflet-based system that uses real building data
• Supports quizzes that reinforce geographic familiarity with response areas

Getting Started

1. Get Your API Keys

Gemini (text/AI):

1. Go to Google AI Studio
2. Sign in and create/copy an API key

ElevenLabs (voices):

1. Go to ElevenLabs
2. Create/copy your API key

Supabase (database):

1. Create a Supabase project
2. Copy your Project URL and the anon public key

2. Configure Environment Variables (Vite)

All frontend secrets live in frontend/.env and use the VITE_ prefix so Vite exposes them to the client.

1. Copy the example env file:

   cd frontend
   cp .env.example .env

2. Fill real values in frontend/.env:

   VITE_SUPABASE_URL=https://YOUR_PROJECT_ID.supabase.co
   VITE_SUPABASE_ANON_KEY=YOUR_ANON_KEY
   VITE_GEMINI_API_KEY=YOUR_GEMINI_API_KEY
   VITE_ELEVENLABS_API_KEY=YOUR_ELEVENLABS_API_KEY

3. In code, read them via import.meta.env (examples):

   // frontend/src/supabase-client.ts
   const url = import.meta.env.VITE_SUPABASE_URL;
   const anon = import.meta.env.VITE_SUPABASE_ANON_KEY;
   
   // frontend/src/config.ts
   export const CONFIG = {
     GEMINI_API_KEY: import.meta.env.VITE_GEMINI_API_KEY ?? "",
     ELEVENLABS_API_KEY: import.meta.env.VITE_ELEVENLABS_API_KEY ?? "",
   };

⚠️ Note: Do not commit .env. Commit only frontend/.env.example.

3. Run the Application (Legacy demo)

1. Start a local server:

   python3 -m http.server 8000

2. Open your browser and navigate to:

   http://localhost:8000
   

3. Start chatting! Type a message and press Enter or click the send button.

How It Works

• The chat interface maintains conversation history for context-aware responses
• Messages are sent to the Gemini Pro API via REST API
• The conversation history is limited to the last 20 messages to manage token usage
• Error handling provides helpful messages if the API key is missing or if there are API errors

Customization

Styling

Modify styles.css to customize colors, fonts, and layout to match your brand.

API Model

To use a different Gemini model, modify the GEMINI_API_URL in script.js:

// Example: Use gemini-pro-vision for image support
const GEMINI_API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro-vision:generateContent?key=${GEMINI_API_KEY}`;

Browser Support

Works on all modern browsers (Chrome, Firefox, Safari, Edge).

Security Note

⚠️ Important: Never commit your API key to version control. Consider using environment variables or a backend proxy for production applications.