File size: 3,435 Bytes
66404dc c0bb818 66404dc 31ba5f9 66404dc e4daa3b 66404dc e4daa3b 66404dc e4daa3b 66404dc e4daa3b 66404dc e4daa3b 66404dc e4daa3b 31ba5f9 66404dc e4daa3b 66404dc e4daa3b 66404dc e4daa3b 66404dc e4daa3b 66404dc e4daa3b 66404dc e4daa3b 66404dc e4daa3b 66404dc c0bb818 66404dc c0bb818 e4daa3b 31ba5f9 ba32591 31ba5f9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
---
title: Stroke Lesion Viewer
emoji: 🧠
colorFrom: blue
colorTo: purple
sdk: static
app_file: dist/index.html
app_build_command: npm run build
# CRITICAL: Vite 7 requires Node.js >= 20. HF Spaces defaults to Node 18.
nodejs_version: "20"
pinned: false
custom_headers:
cross-origin-embedder-policy: require-corp
cross-origin-opener-policy: same-origin
cross-origin-resource-policy: cross-origin
---
# 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
## Browser Requirements
- **WebGL2 Required**: This viewer uses NiiVue which requires WebGL2 support.
- Supported browsers: Chrome 56+, Firefox 51+, Safari 15+, Edge 79+
- Test your browser: https://get.webgl.org/webgl2/
- Mobile devices may have limited support
## 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
```bash
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:
```bash
# 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.
```bash
# Build for production (uses .env.production)
npm run build
# The dist/ folder is deployed to HF Static Space
```
## Fork Deployment
If you fork this repository, update these files before deploying:
1. **Frontend API URL** (`frontend/.env.production`):
```
VITE_API_URL=https://{YOUR_HF_USERNAME}-stroke-deepisles-demo.hf.space
```
2. **Backend CORS** (`src/stroke_deepisles_demo/core/config.py`):
Set `STROKE_DEMO_FRONTEND_ORIGINS` env var (JSON list) on the backend Space:
```bash
STROKE_DEMO_FRONTEND_ORIGINS='["https://{YOUR_HF_USERNAME}-stroke-viewer-frontend.hf.space"]'
```
3. **Rebuild frontend**:
```bash
cd frontend && npm run build
```
|