File size: 2,454 Bytes
1493232
 
 
 
 
 
 
 
fe12d1c
1493232
 
 
fbf73ff
1493232
fbf73ff
1493232
fbf73ff
1493232
fbf73ff
1493232
fbf73ff
1493232
 
 
fbf73ff
1493232
fbf73ff
1493232
fbf73ff
1493232
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fbf73ff
1493232
fbf73ff
1493232
 
 
 
 
 
fbf73ff
 
1493232
fbf73ff
1493232
fbf73ff
1493232
fe12d1c
1493232
fe12d1c
 
 
 
 
 
 
 
 
 
 
 
 
 
fbf73ff
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
```