Health Digital Twin - 3D Health Data Visualization

A Flask web application that provides a 3D digital twin visualization of health data using Three.js. The app displays real-time health metrics with color-coded body zones representing different health indicators.

Features

• 3D Humanoid Body Visualization built with Three.js
• Real-time health data fetched from the Health API
• Color-coded zones:
  • Heart area: Green (normal), Red (high), Blue (low)
  • Legs: Opacity based on daily steps/energy level
  • Head: Glow effect based on sleep quality
• Side panel dashboard showing all current metrics
• Auto-refresh every 30 seconds
• Responsive design with dark theme

Technology Stack

• Backend: Python Flask
• Frontend: Three.js (CDN)
• Data Source: Health API at https://health-api-production-f082.up.railway.app

Project Structure

health-digital-twin/
├── app.py                    # Flask application
├── requirements.txt          # Python dependencies
├── Dockerfile               # Docker configuration
├── railway.json             # Railway deployment config
├── README.md                # This file
├── static/                  # Static files (if needed)
└── templates/
    └── index.html          # Main HTML template with Three.js

Local Setup

Prerequisites

• Python 3.11+
• pip
• Health API token (set as environment variable)

Installation

1. Clone the repository:

   git clone <repository-url>
   cd health-digital-twin

2. Create and activate virtual environment (recommended):

   python -m venv venv
   # On Windows:
   # venv\Scripts\activate
   # On macOS/Linux:
   source venv/bin/activate

3. Install dependencies:

   pip install -r requirements.txt

4. Set environment variable:

   # On macOS/Linux:
   export HEALTH_API_TOKEN="your_api_token_here"
   # On Windows (PowerShell):
   $env:HEALTH_API_TOKEN="your_api_token_here"

5. Run the application:

   python app.py

6. Open browser: Navigate to http://localhost:5000

Deployment

GitHub Deployment

1. Create a new repository on GitHub
2. Push the code:

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin <your-repo-url>
   git push -u origin main

Railway Deployment

1. Sign up at railway.app
2. Connect your GitHub repository
3. Set environment variables in Railway dashboard:
   • HEALTH_API_TOKEN: Your Health API token
4. Deploy:
   • Railway will automatically detect the Dockerfile and deploy
   • The app will be available at your Railway domain

Railway Configuration

The railway.json file configures:

• Build process using Nixpacks
• Python 3.11 environment
• Gunicorn server with 2 workers
• Health check endpoint

Environment Variables

Variable	Description	Required
HEALTH_API_TOKEN	Your Health API authentication token	Yes
PORT	Port to run the application (default: 5000)	No

API Endpoints

Endpoint	Description
GET /	Main page with 3D visualization
GET /api/health	Current health data (JSON)
GET /api/health/today	Today's health data (alias)

Health Data Format

The API returns JSON with the following fields:

{
  "heartRate": 72,
  "steps": 5000,
  "sleepHours": 7.5,
  "waterMl": 1500,
  "activeCalories": 300,
  "weightKg": 75.0,
  "timestamp": "2026-04-08T08:45:00"
}

Visualization Logic

Heart Rate (Color Coding)

• Green (#4ecdc4): Normal (60-100 BPM)
• Red (#ff6b6b): High (> 100 BPM)
• Blue (#3498db): Low (< 60 BPM)

Steps (Leg Opacity)

• Opacity increases with more steps
• Range: 30% (low activity) to 100% (high activity)

Sleep Quality (Head Glow)

• Purple glow intensity based on sleep hours
• ≥ 8 hours: Strong glow
• 6-7.9 hours: Moderate glow
• < 6 hours: Dim glow

Troubleshooting

Common Issues

1. No health data showing:

   • Check that HEALTH_API_TOKEN is set correctly
   • Verify the API is accessible from your network

2. Three.js errors:

   • Ensure browser supports WebGL
   • Check browser console for specific errors

3. Port already in use:

   • Change the port: PORT=8080 python app.py

Development

Running in Development Mode

export FLASK_ENV=development
export HEALTH_API_TOKEN="your_token"
python app.py

Testing the API

curl http://localhost:5000/api/health

License

MIT License - feel free to use and modify.

Support

For issues or questions, please open an issue on the repository.