VibecoderMcSwaggins's picture
feat(deploy): HuggingFace Static Space for frontend (#34)
fe12d1c
---
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
```