Technical Documentation
Pain Doctor AI Architecture & Workflow
Comprehensive system architecture and end-to-end workflow documentation for the AI Pain Doctor platform.
The AI Pain Doctor Platform
An innovative health technology solution combining AI-driven analysis, 3D anatomical visualization, and interactive educational content for accessible pain assessment and management guidance. Supports multilingual operation with Arabic and English language capabilities for global accessibility.
System Architecture Overview
Complete System Architecture
graph TB
subgraph "Client Layer (Browser)"
UI[React Components
TypeScript + Tailwind] ThreeJS[Three.js 3D Engine
WebGL Renderer] State[State Management
React Hooks + LocalStorage] end subgraph "Application Layer (Astro)" Pages[Astro Pages
SSR/SSG Framework] Components[Component Library
Pain Analysis UI] Layouts[Layout System
Responsive Design] end subgraph "Integration Layer (Appwrite)" Auth[Authentication
User Management] Database[(NoSQL Database
Document Storage)] Storage[(File Storage
Image Assets)] Functions[Serverless Functions
Python Runtime] end subgraph "AI/ML Layer (Cloud)" Gemini[Google Gemini 2.5
Multimodal Analysis] OpenAI[OpenAI GPT-4.1
Conversational AI] Vision[Computer Vision
Image Processing] end subgraph "External Services" PostHog[PostHog Analytics
User Behavior Tracking] Payment[DodoPayments
Monetization Gateway] end UI --> Pages ThreeJS --> Components State --> Components Pages --> Auth Components --> Functions Functions --> Database Functions --> Storage Functions --> Gemini Functions --> OpenAI Functions --> Vision Auth --> Database Components --> PostHog Components --> Payment style UI fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style ThreeJS fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style State fill:#10b9811a,stroke:#10b981,stroke-width:2px style Pages fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Components fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Layouts fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Auth fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style Database fill:#10b9811a,stroke:#10b981,stroke-width:2px style Storage fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Functions fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Gemini fill:#ec48991a,stroke:#ec4899,stroke-width:2px style OpenAI fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style Vision fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style PostHog fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Payment fill:#10b9811a,stroke:#10b981,stroke-width:2px
TypeScript + Tailwind] ThreeJS[Three.js 3D Engine
WebGL Renderer] State[State Management
React Hooks + LocalStorage] end subgraph "Application Layer (Astro)" Pages[Astro Pages
SSR/SSG Framework] Components[Component Library
Pain Analysis UI] Layouts[Layout System
Responsive Design] end subgraph "Integration Layer (Appwrite)" Auth[Authentication
User Management] Database[(NoSQL Database
Document Storage)] Storage[(File Storage
Image Assets)] Functions[Serverless Functions
Python Runtime] end subgraph "AI/ML Layer (Cloud)" Gemini[Google Gemini 2.5
Multimodal Analysis] OpenAI[OpenAI GPT-4.1
Conversational AI] Vision[Computer Vision
Image Processing] end subgraph "External Services" PostHog[PostHog Analytics
User Behavior Tracking] Payment[DodoPayments
Monetization Gateway] end UI --> Pages ThreeJS --> Components State --> Components Pages --> Auth Components --> Functions Functions --> Database Functions --> Storage Functions --> Gemini Functions --> OpenAI Functions --> Vision Auth --> Database Components --> PostHog Components --> Payment style UI fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style ThreeJS fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style State fill:#10b9811a,stroke:#10b981,stroke-width:2px style Pages fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Components fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Layouts fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Auth fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style Database fill:#10b9811a,stroke:#10b981,stroke-width:2px style Storage fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Functions fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Gemini fill:#ec48991a,stroke:#ec4899,stroke-width:2px style OpenAI fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style Vision fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style PostHog fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Payment fill:#10b9811a,stroke:#10b981,stroke-width:2px
Architecture Components
- Client Layer: Modern React-based frontend with Three.js for 3D anatomical visualization and interactive pain point selection
- Application Layer: Astro framework providing SSR/SSG capabilities with component-based architecture
- Integration Layer: Appwrite backend-as-a-service handling authentication, database, storage, and serverless functions
- AI/ML Layer: Dual AI system utilizing Google's Gemini for multimodal analysis and OpenAI's GPT for conversational interfaces
- External Services: Analytics and payment processing for business intelligence and monetization
End-to-End User Workflow
Complete User Journey
flowchart TD
A[User Access Application
Landing Page] --> B[3D Model Loading
Human Anatomy Visualization] B --> C[Pain Point Selection
Interactive 3D Interface] C --> D[Demographic Data Collection
Gender, Age, Depth Assessment] D --> E[Pain Characterization
Type, Intensity, Symptoms] E --> F[AI Image Analysis
Gemini Vision Processing] F --> G[Initial Pain Assessment
Location & Symptom Identification] G --> H[User Confirmation
Location & Symptom Validation] H --> I[Advanced AI Processing
Personalized Explanation Generation] I --> J[Interactive Video Results
Conversational Pain Education] J --> K[Therapeutic Recommendations
Product/Service Suggestions] K --> L[Feedback Collection
User Experience Optimization] L --> M[Report Generation
Comprehensive Analysis Document] subgraph "Frontend Processing" A B C D E H J end subgraph "Backend Processing" F G I K M end subgraph "AI/ML Pipeline" F I end subgraph "Data Persistence" G M end style A fill:#10b9811a,stroke:#10b981,stroke-width:2px style B fill:#10b9811a,stroke:#10b981,stroke-width:2px style C fill:#10b9811a,stroke:#10b981,stroke-width:2px style D fill:#10b9811a,stroke:#10b981,stroke-width:2px style E fill:#10b9811a,stroke:#10b981,stroke-width:2px style H fill:#10b9811a,stroke:#10b981,stroke-width:2px style J fill:#10b9811a,stroke:#10b981,stroke-width:2px style F fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style G fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style I fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style K fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style M fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style F fill:#ec48991a,stroke:#ec4899,stroke-width:2px style I fill:#ec48991a,stroke:#ec4899,stroke-width:2px style G fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style M fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px
Landing Page] --> B[3D Model Loading
Human Anatomy Visualization] B --> C[Pain Point Selection
Interactive 3D Interface] C --> D[Demographic Data Collection
Gender, Age, Depth Assessment] D --> E[Pain Characterization
Type, Intensity, Symptoms] E --> F[AI Image Analysis
Gemini Vision Processing] F --> G[Initial Pain Assessment
Location & Symptom Identification] G --> H[User Confirmation
Location & Symptom Validation] H --> I[Advanced AI Processing
Personalized Explanation Generation] I --> J[Interactive Video Results
Conversational Pain Education] J --> K[Therapeutic Recommendations
Product/Service Suggestions] K --> L[Feedback Collection
User Experience Optimization] L --> M[Report Generation
Comprehensive Analysis Document] subgraph "Frontend Processing" A B C D E H J end subgraph "Backend Processing" F G I K M end subgraph "AI/ML Pipeline" F I end subgraph "Data Persistence" G M end style A fill:#10b9811a,stroke:#10b981,stroke-width:2px style B fill:#10b9811a,stroke:#10b981,stroke-width:2px style C fill:#10b9811a,stroke:#10b981,stroke-width:2px style D fill:#10b9811a,stroke:#10b981,stroke-width:2px style E fill:#10b9811a,stroke:#10b981,stroke-width:2px style H fill:#10b9811a,stroke:#10b981,stroke-width:2px style J fill:#10b9811a,stroke:#10b981,stroke-width:2px style F fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style G fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style I fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style K fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style M fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style F fill:#ec48991a,stroke:#ec4899,stroke-width:2px style I fill:#ec48991a,stroke:#ec4899,stroke-width:2px style G fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style M fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px
Workflow Phases
Phase 1: User Interaction & Data Collection
Multi-modal data acquisition through 3D anatomical interface and structured questionnaires for comprehensive pain profiling.
Phase 2: AI-Powered Analysis
Advanced multimodal AI processing combining computer vision for anatomical localization with generative AI for personalized therapeutic insights.
Phase 3: Interactive Education
Conversational interface delivering evidence-based pain education through personalized video content and interactive dialogue trees.
Phase 4: Therapeutic Intervention
Personalized treatment recommendations integrating mitochondrial activation therapies, physical therapy protocols, and targeted supplementation strategies.
AI/ML Processing Pipeline
Intelligent Processing Architecture
graph LR
subgraph "Input Processing"
IMG[3D Model Screenshot
Base64 Encoded] META[User Metadata
Demographics + Symptoms] COORDS[Anatomical Coordinates
3D Position Data] end subgraph "Primary Analysis" CV[Computer Vision
Image Segmentation] NLP[Natural Language
Symptom Processing] FUSION[Multimodal Fusion
Feature Integration] end subgraph "AI Inference" GEMINI[Gemini 2.5 Flash
Pain Localization
Multilingual Support] GPT4[GPT-4.1
Therapeutic Reasoning
Arabic/English Generation] CONVERSATION[Conversation Generation
Interactive Dialogue
Language-Specific] end subgraph "Knowledge Base" ANATOMY[Anatomical Database
Pain Pathways] THERAPEUTICS[Therapeutic Protocols
Evidence-Based Treatments] CLINICAL[Clinical Correlations
Medical Literature] end subgraph "Output Generation" DIAGNOSIS[Diagnostic Assessment
Structured Report] EDUCATION[Patient Education
Conversational Content] RECOMMENDATIONS[Therapeutic Recommendations
Personalized Protocol] end IMG --> CV META --> NLP COORDS --> CV CV --> FUSION NLP --> FUSION FUSION --> GEMINI FUSION --> GPT4 GEMINI --> DIAGNOSIS GPT4 --> CONVERSATION ANATOMY --> GEMINI THERAPEUTICS --> GPT4 CLINICAL --> GPT4 DIAGNOSIS --> EDUCATION CONVERSATION --> EDUCATION EDUCATION --> RECOMMENDATIONS style IMG fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style META fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style COORDS fill:#10b9811a,stroke:#10b981,stroke-width:2px style CV fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style NLP fill:#ec48991a,stroke:#ec4899,stroke-width:2px style FUSION fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style GEMINI fill:#ec48991a,stroke:#ec4899,stroke-width:2px style GPT4 fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style CONVERSATION fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style ANATOMY fill:#10b9811a,stroke:#10b981,stroke-width:2px style THERAPEUTICS fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style CLINICAL fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style DIAGNOSIS fill:#ec48991a,stroke:#ec4899,stroke-width:2px style EDUCATION fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style RECOMMENDATIONS fill:#10b9811a,stroke:#10b981,stroke-width:2px
Base64 Encoded] META[User Metadata
Demographics + Symptoms] COORDS[Anatomical Coordinates
3D Position Data] end subgraph "Primary Analysis" CV[Computer Vision
Image Segmentation] NLP[Natural Language
Symptom Processing] FUSION[Multimodal Fusion
Feature Integration] end subgraph "AI Inference" GEMINI[Gemini 2.5 Flash
Pain Localization
Multilingual Support] GPT4[GPT-4.1
Therapeutic Reasoning
Arabic/English Generation] CONVERSATION[Conversation Generation
Interactive Dialogue
Language-Specific] end subgraph "Knowledge Base" ANATOMY[Anatomical Database
Pain Pathways] THERAPEUTICS[Therapeutic Protocols
Evidence-Based Treatments] CLINICAL[Clinical Correlations
Medical Literature] end subgraph "Output Generation" DIAGNOSIS[Diagnostic Assessment
Structured Report] EDUCATION[Patient Education
Conversational Content] RECOMMENDATIONS[Therapeutic Recommendations
Personalized Protocol] end IMG --> CV META --> NLP COORDS --> CV CV --> FUSION NLP --> FUSION FUSION --> GEMINI FUSION --> GPT4 GEMINI --> DIAGNOSIS GPT4 --> CONVERSATION ANATOMY --> GEMINI THERAPEUTICS --> GPT4 CLINICAL --> GPT4 DIAGNOSIS --> EDUCATION CONVERSATION --> EDUCATION EDUCATION --> RECOMMENDATIONS style IMG fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style META fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style COORDS fill:#10b9811a,stroke:#10b981,stroke-width:2px style CV fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style NLP fill:#ec48991a,stroke:#ec4899,stroke-width:2px style FUSION fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style GEMINI fill:#ec48991a,stroke:#ec4899,stroke-width:2px style GPT4 fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style CONVERSATION fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style ANATOMY fill:#10b9811a,stroke:#10b981,stroke-width:2px style THERAPEUTICS fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style CLINICAL fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style DIAGNOSIS fill:#ec48991a,stroke:#ec4899,stroke-width:2px style EDUCATION fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style RECOMMENDATIONS fill:#10b9811a,stroke:#10b981,stroke-width:2px
AI Processing Capabilities
- Multimodal Analysis: Integration of visual, textual, and spatial data for comprehensive pain assessment
- Image Processing: Computer vision analysis for anatomical region identification and pain point localization
- AI-Powered Recommendations: Intelligent analysis providing personalized therapeutic insights and educational content
- Interactive Education: Conversational interface delivering accessible pain management information
- Knowledge Base: Curated medical information and therapeutic guidance for user education
- Multilingual Generation: AI-driven content creation in both Arabic and English with language-specific conversation flows
- Cultural Adaptation: Localized therapeutic recommendations and educational content tailored to user language preferences
Multilingual Support & Localization
Global Accessibility Features
Arabic Language Support
- UI Localization: Complete Arabic translations for all user interface elements including pain assessment forms, navigation, buttons, and feedback dialogs
- RTL Support: Right-to-left text rendering for Arabic content with proper text direction handling
- AI Content Generation: Dual-language AI processing pipeline supporting both English and Arabic content generation
- Language Selection: User preference-based language switching with persistent settings
Translation Architecture
- Translation Files: Structured translation files (ar.ts/en.ts) containing key-value pairs for all UI strings
- Dynamic Translation: Runtime translation loading with fallback to English for missing keys
- Parameter Interpolation: Support for dynamic content insertion in translated strings
- AI Language Parameter: Language preference passed to AI models for content generation in selected language
Arabic AI Content Generation
- Gemini Integration: Multimodal AI processing with Arabic language parameter support for anatomical analysis
- GPT-4.1 Arabic: Conversational AI content generation in Arabic for personalized explanations
- Interactive Conversations: Arabic dialogue flows for pain education and therapeutic recommendations
- Report Generation: Structured pain analysis reports generated in Arabic language
Component Architecture
Modular Component System
graph TD
subgraph "Core Components"
PainPoint[ PainPointComponent.tsx
Main Analysis Interface ] InteractiveVideo[ InteractiveVideoResults.tsx
Conversational UI ] Feedback[ FeedbackDialog.tsx
User Experience ] Success[ Success.tsx
Completion Interface ] end subgraph "Utility Components" UI_Components[ UI Component Library
Radix UI + Tailwind ] ThreeJS_Components[ 3D Visualization
Three.js Integration ] Form_Components[ Form Management
Validation + State ] end subgraph "Service Layer" Appwrite_Client[ Appwrite SDK
Backend Integration ] AI_Functions[ AI Processing Functions
exact-location, generate-report ] Storage_Service[ File Management
Image Processing ] end subgraph "State Management" LocalStorage[ Browser Storage
Analysis Persistence ] React_State[ React Hooks
UI State Management ] Context_API[ Context Providers
Global State ] end subgraph "External Integrations" PostHog[ Analytics Service
User Behavior Tracking ] Payment_Processor[ DodoPayments
Monetization Platform ] Video_Content[ Video Assets
Educational Content ] end PainPoint --> UI_Components PainPoint --> ThreeJS_Components PainPoint --> Form_Components PainPoint --> Appwrite_Client InteractiveVideo --> AI_Functions Feedback --> PostHog Success --> Payment_Processor UI_Components --> React_State ThreeJS_Components --> LocalStorage Appwrite_Client --> Storage_Service React_State --> Context_API style PainPoint fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style InteractiveVideo fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Feedback fill:#10b9811a,stroke:#10b981,stroke-width:2px style Success fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style UI_Components fill:#ec48991a,stroke:#ec4899,stroke-width:2px style ThreeJS_Components fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style Form_Components fill:#10b9811a,stroke:#10b981,stroke-width:2px style Appwrite_Client fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style AI_Functions fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Storage_Service fill:#ec48991a,stroke:#ec4899,stroke-width:2px style LocalStorage fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style React_State fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style Context_API fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style PostHog fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Payment_Processor fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Video_Content fill:#10b9811a,stroke:#10b981,stroke-width:2px
Main Analysis Interface ] InteractiveVideo[ InteractiveVideoResults.tsx
Conversational UI ] Feedback[ FeedbackDialog.tsx
User Experience ] Success[ Success.tsx
Completion Interface ] end subgraph "Utility Components" UI_Components[ UI Component Library
Radix UI + Tailwind ] ThreeJS_Components[ 3D Visualization
Three.js Integration ] Form_Components[ Form Management
Validation + State ] end subgraph "Service Layer" Appwrite_Client[ Appwrite SDK
Backend Integration ] AI_Functions[ AI Processing Functions
exact-location, generate-report ] Storage_Service[ File Management
Image Processing ] end subgraph "State Management" LocalStorage[ Browser Storage
Analysis Persistence ] React_State[ React Hooks
UI State Management ] Context_API[ Context Providers
Global State ] end subgraph "External Integrations" PostHog[ Analytics Service
User Behavior Tracking ] Payment_Processor[ DodoPayments
Monetization Platform ] Video_Content[ Video Assets
Educational Content ] end PainPoint --> UI_Components PainPoint --> ThreeJS_Components PainPoint --> Form_Components PainPoint --> Appwrite_Client InteractiveVideo --> AI_Functions Feedback --> PostHog Success --> Payment_Processor UI_Components --> React_State ThreeJS_Components --> LocalStorage Appwrite_Client --> Storage_Service React_State --> Context_API style PainPoint fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style InteractiveVideo fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Feedback fill:#10b9811a,stroke:#10b981,stroke-width:2px style Success fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style UI_Components fill:#ec48991a,stroke:#ec4899,stroke-width:2px style ThreeJS_Components fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style Form_Components fill:#10b9811a,stroke:#10b981,stroke-width:2px style Appwrite_Client fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style AI_Functions fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Storage_Service fill:#ec48991a,stroke:#ec4899,stroke-width:2px style LocalStorage fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style React_State fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style Context_API fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style PostHog fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Payment_Processor fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Video_Content fill:#10b9811a,stroke:#10b981,stroke-width:2px
Component Hierarchy
- Core Components: Primary user interface elements handling the main application workflow
- Utility Components: Reusable UI primitives and specialized functionality modules
- Service Layer: Abstraction layer for backend services and external API integrations
- State Management: Distributed state management across client-side storage and React context
- External Integrations: Third-party services for analytics, payments, and content delivery
Data Flow & Storage Architecture
Data Management & Security
graph TD
subgraph "User Input"
Demographics[Demographic Data
Gender, Age, Location] Symptoms[Symptom Assessment
Pain Characteristics] ModelState[3D Model State
Camera Position, Rotation] ImageData[Visual Data
Screenshot + Coordinates] end subgraph "Processing Pipeline" Validation[Input Validation
Data Sanitization] Serialization[Data Serialization
JSON Transformation] Encryption[Data Encryption
Secure Transmission] AI_Processing[AI Analysis
Multimodal Processing] end subgraph "Storage Layer" Appwrite_DB[(Appwrite Database
Document Collection)] Appwrite_Storage[(Appwrite Storage
File Buckets)] LocalStorage[(Browser Storage
Session Persistence)] end subgraph "Data Structures" Analysis_Record[Analysis Document
User ID, Timestamp, Status] Image_Record[Image Metadata
File ID, Format, Size] Results_Record[Results Document
AI Analysis, Recommendations] Corrections_Record[User Corrections
Feedback Integration] end Demographics --> Validation Symptoms --> Validation ModelState --> Validation ImageData --> Validation Validation --> Serialization Serialization --> Encryption Encryption --> AI_Processing AI_Processing --> Appwrite_DB AI_Processing --> Appwrite_Storage Validation --> LocalStorage Appwrite_DB --> Analysis_Record Appwrite_DB --> Results_Record Appwrite_DB --> Corrections_Record Appwrite_Storage --> Image_Record style Demographics fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style Symptoms fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style ModelState fill:#10b9811a,stroke:#10b981,stroke-width:2px style ImageData fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Validation fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Serialization fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style Encryption fill:#10b9811a,stroke:#10b981,stroke-width:2px style AI_Processing fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Appwrite_DB fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Appwrite_Storage fill:#ec48991a,stroke:#ec4899,stroke-width:2px style LocalStorage fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Analysis_Record fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style Image_Record fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Results_Record fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Corrections_Record fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px
Gender, Age, Location] Symptoms[Symptom Assessment
Pain Characteristics] ModelState[3D Model State
Camera Position, Rotation] ImageData[Visual Data
Screenshot + Coordinates] end subgraph "Processing Pipeline" Validation[Input Validation
Data Sanitization] Serialization[Data Serialization
JSON Transformation] Encryption[Data Encryption
Secure Transmission] AI_Processing[AI Analysis
Multimodal Processing] end subgraph "Storage Layer" Appwrite_DB[(Appwrite Database
Document Collection)] Appwrite_Storage[(Appwrite Storage
File Buckets)] LocalStorage[(Browser Storage
Session Persistence)] end subgraph "Data Structures" Analysis_Record[Analysis Document
User ID, Timestamp, Status] Image_Record[Image Metadata
File ID, Format, Size] Results_Record[Results Document
AI Analysis, Recommendations] Corrections_Record[User Corrections
Feedback Integration] end Demographics --> Validation Symptoms --> Validation ModelState --> Validation ImageData --> Validation Validation --> Serialization Serialization --> Encryption Encryption --> AI_Processing AI_Processing --> Appwrite_DB AI_Processing --> Appwrite_Storage Validation --> LocalStorage Appwrite_DB --> Analysis_Record Appwrite_DB --> Results_Record Appwrite_DB --> Corrections_Record Appwrite_Storage --> Image_Record style Demographics fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style Symptoms fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style ModelState fill:#10b9811a,stroke:#10b981,stroke-width:2px style ImageData fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Validation fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Serialization fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style Encryption fill:#10b9811a,stroke:#10b981,stroke-width:2px style AI_Processing fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Appwrite_DB fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Appwrite_Storage fill:#ec48991a,stroke:#ec4899,stroke-width:2px style LocalStorage fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Analysis_Record fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style Image_Record fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Results_Record fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Corrections_Record fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px
Data Architecture Features
- Multi-Modal Data Collection: Comprehensive data acquisition across visual, textual, and spatial dimensions
- Real-time Processing: Streaming data validation and immediate AI inference for responsive user experience
- Distributed Storage: Hybrid storage strategy utilizing cloud database, file storage, and local persistence
- Data Integrity: End-to-end encryption and validation ensuring data security and consistency
- Version Control: Temporal data management with user corrections and feedback integration
Security & Performance Architecture
Enterprise-Grade Quality Assurance
graph LR
subgraph "Security Layers"
Client_Security[Client-Side Security
Input Validation, XSS Prevention] Transport_Security[Transport Security
HTTPS/TLS Encryption] API_Security[API Security
Authentication, Authorization] Data_Security[Data Security
Encryption at Rest] end subgraph "Performance Optimization" CDN[Content Delivery Network
Asset Optimization] Caching[Multi-Level Caching
Browser + Server + CDN] Compression[Data Compression
Gzip + Image Optimization] Lazy_Loading[Lazy Loading
Component + Image Loading] end subgraph "Monitoring & Analytics" Error_Tracking[Error Tracking
Exception Monitoring] Performance_Monitoring[Performance Metrics
Core Web Vitals] User_Analytics[User Behavior
PostHog Integration] AI_Metrics[AI Performance
Model Accuracy Tracking] end subgraph "Scalability Features" Horizontal_Scaling[Horizontal Scaling
Serverless Functions] Auto_Scaling[Auto Scaling
Appwrite Resource Management] Global_Distribution[Global Distribution
CDN Edge Caching] Microservices[Modular Architecture
Function-Based Design] end Client_Security --> Transport_Security Transport_Security --> API_Security API_Security --> Data_Security CDN --> Caching Caching --> Compression Compression --> Lazy_Loading Error_Tracking --> Performance_Monitoring Performance_Monitoring --> User_Analytics User_Analytics --> AI_Metrics Horizontal_Scaling --> Auto_Scaling Auto_Scaling --> Global_Distribution Global_Distribution --> Microservices style Client_Security fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style Transport_Security fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style API_Security fill:#10b9811a,stroke:#10b981,stroke-width:2px style Data_Security fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style CDN fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Caching fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style Compression fill:#10b9811a,stroke:#10b981,stroke-width:2px style Lazy_Loading fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Error_Tracking fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Performance_Monitoring fill:#ec48991a,stroke:#ec4899,stroke-width:2px style User_Analytics fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style AI_Metrics fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style Horizontal_Scaling fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Auto_Scaling fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Global_Distribution fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Microservices fill:#10b9811a,stroke:#10b981,stroke-width:2px
Input Validation, XSS Prevention] Transport_Security[Transport Security
HTTPS/TLS Encryption] API_Security[API Security
Authentication, Authorization] Data_Security[Data Security
Encryption at Rest] end subgraph "Performance Optimization" CDN[Content Delivery Network
Asset Optimization] Caching[Multi-Level Caching
Browser + Server + CDN] Compression[Data Compression
Gzip + Image Optimization] Lazy_Loading[Lazy Loading
Component + Image Loading] end subgraph "Monitoring & Analytics" Error_Tracking[Error Tracking
Exception Monitoring] Performance_Monitoring[Performance Metrics
Core Web Vitals] User_Analytics[User Behavior
PostHog Integration] AI_Metrics[AI Performance
Model Accuracy Tracking] end subgraph "Scalability Features" Horizontal_Scaling[Horizontal Scaling
Serverless Functions] Auto_Scaling[Auto Scaling
Appwrite Resource Management] Global_Distribution[Global Distribution
CDN Edge Caching] Microservices[Modular Architecture
Function-Based Design] end Client_Security --> Transport_Security Transport_Security --> API_Security API_Security --> Data_Security CDN --> Caching Caching --> Compression Compression --> Lazy_Loading Error_Tracking --> Performance_Monitoring Performance_Monitoring --> User_Analytics User_Analytics --> AI_Metrics Horizontal_Scaling --> Auto_Scaling Auto_Scaling --> Global_Distribution Global_Distribution --> Microservices style Client_Security fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style Transport_Security fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style API_Security fill:#10b9811a,stroke:#10b981,stroke-width:2px style Data_Security fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style CDN fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Caching fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style Compression fill:#10b9811a,stroke:#10b981,stroke-width:2px style Lazy_Loading fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Error_Tracking fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Performance_Monitoring fill:#ec48991a,stroke:#ec4899,stroke-width:2px style User_Analytics fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style AI_Metrics fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style Horizontal_Scaling fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Auto_Scaling fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Global_Distribution fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Microservices fill:#10b9811a,stroke:#10b981,stroke-width:2px
System Quality Attributes
- Security Architecture: Defense-in-depth approach with client-side validation, transport encryption, and data protection
- Performance Engineering: Multi-layered optimization including CDN delivery, intelligent caching, and progressive loading
- Observability: Comprehensive monitoring stack tracking user experience, system performance, and AI model efficacy
- Scalability Design: Serverless architecture with automatic scaling and CDN optimization for efficient resource utilization
Deployment & DevOps Architecture
CI/CD & Infrastructure Management
graph TD
subgraph "Development Environment"
Local_Dev[Local Development
Astro Dev Server + Hot Reload] Git_Repo[Git Repository
Version Control + CI/CD] Testing[Test Suite
Unit + Integration Tests] end subgraph "Build Pipeline" Astro_Build[Astro Build Process
Static Generation + Optimization] Asset_Optimization[Asset Optimization
Image Compression + Code Splitting] Bundle_Analysis[Bundle Analysis
Performance Auditing] end subgraph "Deployment Infrastructure" Appwrite_Cloud[Appwrite Cloud
Backend-as-a-Service Platform] Static_Hosting[Static Site Hosting
CDN Distribution] Function_Deployment[Function Deployment
Serverless Runtime] end subgraph "Production Environment" Load_Balancer[Load Balancing
Traffic Distribution] CDN_Network[CDN Network
Global Edge Locations] Monitoring[Production Monitoring
Health Checks + Alerting] end subgraph "DevOps Tools" Version_Control[Git + GitHub
Source Code Management] CI_CD[GitHub Actions
Automated Pipelines] Monitoring_Tools[Monitoring Stack
Performance + Error Tracking] end Local_Dev --> Git_Repo Git_Repo --> Testing Testing --> Astro_Build Astro_Build --> Asset_Optimization Asset_Optimization --> Bundle_Analysis Bundle_Analysis --> Appwrite_Cloud Bundle_Analysis --> Static_Hosting Bundle_Analysis --> Function_Deployment Appwrite_Cloud --> Load_Balancer Static_Hosting --> CDN_Network Function_Deployment --> Load_Balancer Load_Balancer --> Monitoring CDN_Network --> Monitoring Version_Control --> CI_CD CI_CD --> Monitoring_Tools Monitoring_Tools --> Monitoring style Local_Dev fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style Git_Repo fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Testing fill:#10b9811a,stroke:#10b981,stroke-width:2px style Astro_Build fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Asset_Optimization fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Bundle_Analysis fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style Appwrite_Cloud fill:#10b9811a,stroke:#10b981,stroke-width:2px style Static_Hosting fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Function_Deployment fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Load_Balancer fill:#ec48991a,stroke:#ec4899,stroke-width:2px style CDN_Network fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Monitoring fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style Version_Control fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style CI_CD fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Monitoring_Tools fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px
Astro Dev Server + Hot Reload] Git_Repo[Git Repository
Version Control + CI/CD] Testing[Test Suite
Unit + Integration Tests] end subgraph "Build Pipeline" Astro_Build[Astro Build Process
Static Generation + Optimization] Asset_Optimization[Asset Optimization
Image Compression + Code Splitting] Bundle_Analysis[Bundle Analysis
Performance Auditing] end subgraph "Deployment Infrastructure" Appwrite_Cloud[Appwrite Cloud
Backend-as-a-Service Platform] Static_Hosting[Static Site Hosting
CDN Distribution] Function_Deployment[Function Deployment
Serverless Runtime] end subgraph "Production Environment" Load_Balancer[Load Balancing
Traffic Distribution] CDN_Network[CDN Network
Global Edge Locations] Monitoring[Production Monitoring
Health Checks + Alerting] end subgraph "DevOps Tools" Version_Control[Git + GitHub
Source Code Management] CI_CD[GitHub Actions
Automated Pipelines] Monitoring_Tools[Monitoring Stack
Performance + Error Tracking] end Local_Dev --> Git_Repo Git_Repo --> Testing Testing --> Astro_Build Astro_Build --> Asset_Optimization Asset_Optimization --> Bundle_Analysis Bundle_Analysis --> Appwrite_Cloud Bundle_Analysis --> Static_Hosting Bundle_Analysis --> Function_Deployment Appwrite_Cloud --> Load_Balancer Static_Hosting --> CDN_Network Function_Deployment --> Load_Balancer Load_Balancer --> Monitoring CDN_Network --> Monitoring Version_Control --> CI_CD CI_CD --> Monitoring_Tools Monitoring_Tools --> Monitoring style Local_Dev fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style Git_Repo fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Testing fill:#10b9811a,stroke:#10b981,stroke-width:2px style Astro_Build fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Asset_Optimization fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Bundle_Analysis fill:#06b6d41a,stroke:#06b6d4,stroke-width:2px style Appwrite_Cloud fill:#10b9811a,stroke:#10b981,stroke-width:2px style Static_Hosting fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style Function_Deployment fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Load_Balancer fill:#ec48991a,stroke:#ec4899,stroke-width:2px style CDN_Network fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px style Monitoring fill:#3b82f61a,stroke:#3b82f6,stroke-width:2px style Version_Control fill:#f59e0b1a,stroke:#f59e0b,stroke-width:2px style CI_CD fill:#ec48991a,stroke:#ec4899,stroke-width:2px style Monitoring_Tools fill:#8b5cf61a,stroke:#8b5cf6,stroke-width:2px
DevOps Capabilities
- Development Workflow: Modern development environment with hot reloading and comprehensive testing suite
- Build Optimization: Advanced build pipeline with asset optimization and performance analysis
- Cloud Infrastructure: Serverless deployment architecture with global CDN distribution
- Production Operations: Automated deployment pipelines with continuous monitoring and alerting
- Quality Assurance: Integrated testing and monitoring ensuring system reliability and performance
AI Model Cards
Model Specifications & Performance
Gemini 2.5 Flash Model Card
- Model Type: Multimodal large language model with vision capabilities
- Primary Use: Anatomical image analysis and pain point localization
- Training Data: Pre-trained on diverse web sources including medical and health content from reputable online sources
- Knowledge Cutoff: January 2025
- Performance Metrics: 65-75% anatomical localization accuracy on test datasets (continuously improving)
- Limitations: Requires clear anatomical context; performance may vary with unusual presentations
- Safety Considerations: Educational tool only - not a substitute for professional medical diagnosis
GPT-4.1 Model Card
- Model Type: Large language model optimized for conversational AI
- Primary Use: Therapeutic recommendation generation and patient education
- Training Data: Pre-trained on extensive web corpora including healthcare information from established medical websites
- Knowledge Cutoff: Jun 2024
- Performance Metrics: High-quality conversational responses with 65%+ coherence scores on healthcare topics
- Limitations: General medical knowledge base; recommendations should be validated by healthcare professionals
- Safety Considerations: Educational content only - consult healthcare professionals for medical advice
Model Training & Data Sources
- Pre-training Approach: Both models utilize large-scale pre-training on web-scale datasets including healthcare content
- Data Sources: Training corpora include publicly available web content from established health information sources
- Training Data Timeline: Models trained on data up to their respective knowledge cutoff dates (December 2024 for Gemini, October 2024 for GPT-4.1)
- Data Privacy: All model training respects data privacy regulations and uses publicly available information
Technical Specifications & KPIs
System Metrics & Performance Indicators
System Performance Metrics
- AI Processing Latency: 3-8 seconds for initial analysis, 5-15 seconds for detailed explanations (depending on server load)
- 3D Model Loading: 2-5 seconds initial load, <1 second interaction response
- Core Web Vitals: LCP <3.5s, FID <150ms, CLS <0.1 (mobile-optimized)
- AI Model Accuracy: 65-75% anatomical localization accuracy (continuously improving with user feedback)
- System Availability: 99.5% uptime with automated monitoring and recovery
Platform Usage Statistics
- Patients Served: 39,739+ patients assessed for comprehensive pain analysis
- Pain Analyses Completed: 41,920+ detailed pain assessments processed
- Unique Pain Points Uncovered: 43,803+ individual pain locations identified and mapped
- Analysis Success Rate: High completion rate with over 6 minutes average session duration demonstrating effective user experience and clinical utility
Technology Stack Details
- Frontend Framework: Astro 5.16.1 with React 19.2.0 for component-based architecture
- Type Safety: TypeScript 5.9.3 with strict mode and comprehensive type definitions
- 3D Graphics: Three.js 0.181.2 with WebGL 2.0 for hardware-accelerated rendering
- AI Integration: Dual AI architecture with Gemini 2.5 Flash and GPT-4.1
- Backend Services: Appwrite 21.4.0 providing NoSQL database and serverless functions
- UI Components: Radix UI primitives with Tailwind CSS for accessible, responsive design
- State Management: React Context API with localStorage persistence for offline capability
- Analytics: PostHog integration for comprehensive user behavior tracking
- Payment Processing: DodoPayments integration for secure monetization
Architecture Patterns
- Microservices Design: Modular function architecture enabling independent scaling and deployment
- Event-Driven Processing: Asynchronous AI processing with real-time user feedback
- Progressive Web App: Service worker implementation for offline capability and native app experience
- Responsive Architecture: Mobile-first design with adaptive 3D rendering optimization
- API-First Development: RESTful API design with comprehensive OpenAPI specification