metadata
title: Stroke Lesion Viewer
emoji: 🧠
colorFrom: blue
colorTo: purple
sdk: static
app_file: dist/index.html
app_build_command: npm run build
nodejs_version: '20'
pinned: false
Stroke Lesion Segmentation Viewer
Interactive 3D viewer for stroke lesion segmentation results using NiiVue.
Built with React, TypeScript, Tailwind CSS, and Vite.
Features
- NiiVue WebGL2 Viewer: Pan, zoom, and navigate through NIfTI volumes
- Real-time Segmentation: Run DeepISLES inference on ISLES24 dataset cases
- Metrics Display: Dice score, volume (mL), processing time
Architecture
This is the frontend Static Space of a two-Space deployment:
┌─────────────────────────────────────┐
│ HuggingFace Static Space │ ← You are here
│ stroke-viewer-frontend │
│ │
│ React 19 + TypeScript + Tailwind │
│ @niivue/niivue for 3D viewing │
└──────────────┬──────────────────────┘
│ HTTPS API calls
▼
┌─────────────────────────────────────┐
│ HuggingFace Docker Space │
│ stroke-viewer-api │
│ │
│ FastAPI + DeepISLES + PyTorch │
└─────────────────────────────────────┘
Local Development
npm install
npm run dev # Start dev server at http://localhost:5173
npm test # Run unit tests
npm run test:e2e # Run E2E tests
npm run build # Production build
Environment Variables
Set VITE_API_URL to point to your backend:
# Local development (default)
VITE_API_URL=http://localhost:7860 npm run dev
# Production is configured in .env.production
# Points to: https://vibecodermcswaggins-stroke-deepisles-demo.hf.space
Deployment
This frontend deploys as a HuggingFace Static Space. The backend API runs on a separate Docker Space with GPU.
# Build for production (uses .env.production)
npm run build
# The dist/ folder is deployed to HF Static Space