File size: 2,454 Bytes
66404dc
 
 
 
 
 
 
 
c0bb818
66404dc
 
 
e4daa3b
66404dc
e4daa3b
66404dc
e4daa3b
66404dc
e4daa3b
66404dc
e4daa3b
66404dc
 
 
e4daa3b
66404dc
e4daa3b
66404dc
e4daa3b
66404dc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e4daa3b
66404dc
e4daa3b
66404dc
 
 
 
 
 
e4daa3b
 
66404dc
e4daa3b
66404dc
e4daa3b
66404dc
c0bb818
66404dc
c0bb818
 
 
 
 
 
 
 
 
 
 
 
 
 
e4daa3b
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
---
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
---

# 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

```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
```