MedBrief

Introduction

The MedBrief project aims to create a React-based, voice-first web application called 'MedBrief.' This app functions as a Senior Medical Scribe, conducting guided interviews and translating patient narratives into structured medical briefs. The primary users are patients and caregivers, with doctors interacting passively with the app's output.

System Overview

The MedBrief system is designed to streamline the process of capturing patient symptoms and translating them into a structured History of Present Illness (HPI) brief. The app will feature a three-screen architecture: Entry, Guided Scribe, and Clinical Output. It will utilize the Groq API for AI processing and provide features such as 'Doctor Mode' for easy reading, local PDF export, and session wipe capabilities.

Functional Requirements

• As a Patient, I should be able to use the voice interface to organize my thoughts before an appointment.
• As a Caregiver, I should be able to record symptoms for someone else using the app.
• As a User, I should see a minimalist landing with a 'Prepare for My Visit' button.
• As a User, I should see a privacy badge indicating local processing and data clearance after each session.
• As a User, I should see a footer disclaimer stating the app is a productivity tool, not a medical device.
• As a User, I should be able to capture voice input using the MediaRecorder API.
• As a User, I should see a reactive waveform animation during voice capture.
• As a User, I should receive AI-generated clinical follow-up questions based on PQRST.
• As a User, I should see AI translations of patient-speak into clinical terminology.
• As a User, I should be able to view sections for Chief Complaint, HPI, and Patient Goals.
• As a User, I should be able to toggle 'Doctor Mode' for increased text size and simplified UI.
• As a User, I should be able to export a PDF of the brief locally.
• As a User, I should be able to wipe the session and return to the home screen.

User Personas

• Patient (Self-Use): An individual like "Anxious Anil" who uses the app to prepare for medical appointments.
• Caregiver (Proxy-Use): An individual like "Caregiver Clara" who records symptoms for someone else.
• Doctor (Passive Consumer): A medical professional who reads the clinical summary provided by the app.

Visuals Colors and Theme

• primary: #3182CE (Primary Blue)
• primary_light: #63A4FF
• secondary: #FF6F61 (Coral)
• accent: #FFD700 (Gold)
• highlight: #FFA500 (Orange)
• bg: #F8FAFC (Calm Tech Background)
• surface: rgba(248, 250, 252, 0.8)
• text: #1A202C (Slate)
• text_muted: #718096
• border: rgba(26, 32, 44, 0.2)

Signature Design Concept

Interactive Medical Journey with Animated Stethoscope

The MedBrief homepage will feature an interactive journey map that visualizes the patient's path from symptom onset to clinical summary. Using @react-three/fiber and @react-three/drei, the map will display a 3D path with nodes representing each stage of the process. Users can click on nodes to expand details, drag to navigate the journey, and hover to see connections between stages. The map will dynamically adjust based on user input, providing a personalized experience. An animated stethoscope icon will be present at both the top and bottom of the page, adding a cohesive and engaging element to the design. This engaging, interactive design will make the app both informative and visually captivating.

Interaction Model & Motion Direction

• Landing/Home Page: Parallax interaction model with layered depth via scroll. Decorative elements will translate at different speeds, while content scrolls naturally. This approach will create a visually rich first impression.
• Internal Pages: Static interaction model for clarity and minimal motion, focusing on efficient data entry and reading.

Non-Functional Requirements

• Accessibility: Minimum font size of 18px using the Inter font for high legibility.
• Privacy: Ensure all data processing is local, with data cleared after each session.
• Performance: Optimize for fast load times and smooth interactions.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MongoDB
• AI Models: Groq API (Llama 3)
• AI Tools: Litellm for LLM Routing
• Local Orchestration: Docker, docker-compose

Assumptions and Constraints

• The app will primarily serve patients and caregivers, with doctors interacting passively.
• All AI processing will be handled via the Groq API, using environment variables for secure key management.
• PDF generation will be performed locally to maintain privacy and zero-cost.

Glossary

• HPI: History of Present Illness
• PQRST: Provocation, Quality, Region, Severity, Timing
• Groq API: An AI service used for processing patient narratives into clinical terms.