earthy-application

Utkarsh

Build a professional, voice-first React web application called 'MedBrief.' The app is a clinical-grade patient advocate designed to translate patient symptoms into a structured medical brief for doctors. Visual Language: Use a 'Clean Clinic' aesthetic. Background: #F8FAFC, Primary Blue: #3182CE, Typography: Inter. The UI must be high-contrast and accessible for all ages. Key Functionality & Screens:1. Onboarding & Disclaimer:Simple landing page with a 'Prepare for Appointment' button. Mandatory footer: 'This is a productivity tool for patient-doctor communication, not a medical device. No diagnosis is provided'. 2. The Intelligent Interview (Voice Screen):Use the browser's MediaRecorder API to capture audio. Core Feature: Instead of a one-way recording, the UI should show a 'Guided Scribe' mode.Integrate the Groq API (Llama 3) to analyze the transcript in real-time.The AI must ask 3 follow-up questions focused on clinical data: 'Where exactly is the pain?', 'When does it stop?', and 'Are there any other symptoms?'. Include a pulsing voice waveform to show active listening. 3. The Clinical Brief (Output Screen):AI Processing: Use an Edge Function to send the final transcript to Groq. The system prompt must instruct the AI to:Act as a Senior Medical Scribe. Translate patient-speak (e.g., 'fluttering in chest') into clinical terms (e.g., 'reports palpitations'). Organize the output into: Chief Complaint, History of Present Illness (HPI), and Patient Goals for the Visit. Output Features:Doctor Mode: A toggle to increase font size to 24px and hide app navigation. Export: A button to generate and download a clean, professional A4 PDF locally. Burn: A red 'Wipe Data' button that clears all session states for privacy. Technical Instruction: Implement the Groq integration securely using Lovable's secret management for the API key. Ensure the PDF generation uses a local library to keep the process $0 cost and private." Why this version is better:For the Patient: It guides them through the story so they don't have to figure out what to say. For the Doctor: It gives them a document in the language they were trained to read (HPI/Chief Complaint), which makes them more likely to actually use it. For You: It uses Groq for the high-speed intelligence and Lovable for the frontend, keeping your development costs at $0.

Comments (0)

No comments yet. Be the first!

Page 1 of 4

Earthy-Application System Requirements Document

1. Introduction

The Earthy-Application is designed to provide a seamless and intuitive experience for users, focusing on translating patient symptoms into structured medical briefs for doctors. This document outlines the system requirements for the application, ensuring it meets the needs of both patients and healthcare providers.

2. System Overview

The Earthy-Application is a professional, voice-first React web application aimed at enhancing patient-doctor communication. It leverages advanced AI capabilities to convert patient-reported symptoms into a structured format that is easily interpretable by medical professionals. The application is designed with a focus on accessibility, high contrast, and a clean aesthetic to cater to users of all ages.

3. Functional Requirements

As a User, I should be able to access a simple landing page with a 'Prepare for Appointment' button.
As a User, I should be able to interact with the application using audio cues in the "Guided Scribe" mode.
As a User, I should be able to see a pulsing voice waveform to indicate active listening.
As a User, I should be able to receive follow-up questions through audio cues.
As a User, I should be able to view the AI-generated clinical brief organized into Chief Complaint, History of Present Illness (HPI), and Patient Goals for the Visit.
As a User, I should be able to toggle "Doctor Mode" to increase font size and hide app navigation.
As a User, I should be able to export the clinical brief as a PDF.
As a User, I should be able to securely wipe all session data with a 'Wipe Data' button.

Page 2 of 4

4. User Personas

Patient: Individuals seeking to prepare for medical appointments by providing structured symptom information.
Doctor: Medical professionals who receive structured briefs to facilitate patient diagnosis and treatment.

5. Visuals Colors and Theme

primary: #3182CE (Primary Blue)
primary_light: #63A4FF (Light Blue)
secondary: #FF6F61 (Coral)
accent: #FFD700 (Gold)
highlight: #FFA500 (Orange)
bg: #F8FAFC (Background)
surface: rgba(248, 250, 252, 0.8)
text: #2D3748 (Dark Slate)
text_muted: #718096 (Gray)
border: rgba(203, 213, 224, 0.2)

6. Signature Design Concept

The homepage of the Earthy-Application will feature an interactive "Living Watercolor" background that subtly morphs colors based on the time of day, creating a dynamic and calming user experience. Users will interact with a central floating microphone icon that pulses in sync with audio cues, inviting them to begin their voice interaction. As they speak, the watercolor background will gently ripple, providing visual feedback to the audio input. This concept will be implemented using framer-motion for smooth animations and gsap for scroll-triggered transitions, ensuring a seamless and engaging user experience.

Page 3 of 4

7. Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, creating a layered depth effect as users scroll. Decorative watercolor layers will translate at different speeds, while real content scrolls naturally. This approach is ideal for creating a visually rich first impression that aligns with the application's clean and calming aesthetic.

Internal pages, such as the dashboard and settings, will adopt a "static" interaction model to prioritize layout clarity and reading speed, ensuring users can efficiently access and manage their information.

8. Non-Functional Requirements

The application must be accessible and usable by individuals of all ages.
The UI should maintain high contrast for readability.
Audio processing and AI integration should occur in real-time to provide immediate feedback.
Data privacy and security must be prioritized, with encrypted storage and session timeouts.

9. Tech Stack

Frontend: React for Web
Backend: Python, FastAPI
Database: MySQL or MariaDB, with alembic for migrations
AI Models: Groq API (Llama 3) for real-time processing
AI Tools: Lovable for secret management
Local Orchestration: Docker, docker-compose

Page 4 of 4

10. Assumptions and Constraints

The application will be developed and deployed in a region where data privacy regulations are strictly adhered to.
Users will have access to devices capable of running modern web applications with audio input capabilities.
The application will be optimized for performance to handle real-time audio processing and AI integration.

11. Glossary

HPI: History of Present Illness
AI: Artificial Intelligence
PDF: Portable Document Format
CTA: Call to Action

This document outlines the comprehensive requirements for the Earthy-Application, ensuring it meets the needs of both patients and healthcare providers while maintaining a focus on accessibility, security, and user engagement.