Hugging Face's logo

Spaces:
andreped
/
wsi-annotation-demo
Sleeping

App Files Community
wsi-annotation-demo
File size: 2,516 Bytes 
49d8c3b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
eedfc49
49d8c3b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
---
title: wsi-annotation-demo
emoji: 🔬
colorFrom: blue
colorTo: red
sdk: docker
sdk_version: "24.0.6"
app_file: Dockerfile
pinned: false
---

# wsi-annotation-demo

[![license](https://img.shields.io/github/license/DAVFoundation/captain-n3m0.svg?style=flat-square)](https://github.com/andreped/wsi-annotation-demo/blob/main/LICENSE.md)
<a target="_blank" href="https://huggingface.co/spaces/andreped/wsi-annotation-demo"><img src="https://img.shields.io/badge/🤗%20Hugging%20Face-Spaces-yellow.svg"></a>

## Why?

This repository was developed to demonstrate how to do the following:
* Creating a simple web application for rendering a whole slide image in real time.
* Allow annotating a whole slide image in real-time.
* Containerizing and deploying a web app for deployment on Hugging Face Spaces.

To access the live demo, click on the `Hugging Face` badge above. Below is a snapshot of the current state of the demo app.

<img width="1400" alt="demo-hf-spaces" src="https://github.com/user-attachments/assets/00d0e476-7e2f-4173-9e9d-088732103bbd">

## Stack

For this demonstration, we have used the following:

| Component | Description |
| - | - |
| **OpenSeadragon** | The actual library for rendering the WSI |
| **Annotorious** | Library supporting annotation of large images |
| **Deep Zoom Image (DZI)** | Image file format compatible with OpenSeadragon |
| **npm** | Installation of frontend dependencies |
| **nginx** | HTTP web server |
| **Docker** | Containerization of the web app |
| **Hugging Face Spaces** | Deployment platform |

## Continuous integration

For this project, we continuously update the Hugging Face deployment for each commit to the main branch.

| Build Type | Status |
| - | - |
| **HF Space Deploy** | [![CI](https://github.com/andreped/wsi-annotation-demo/workflows/Deploy/badge.svg)](https://github.com/andreped/wsi-annotation-demo/actions) |
| **File Size Check** | [![CI](https://github.com/andreped/wsi-annotation-demo/workflows/Check%20file%20size/badge.svg)](https://github.com/andreped/wsi-annotation-demo/actions) |

## Local development

This example is for macOS development, so `brew` is required.

1. Install `node`:
```
brew install node
```

2. Install deps:
```
npm install
```

3. Open in browser:
```
open index.html
```

## Docker

1. Build image:
```
docker build -t wsi-annotation .
```

2. Run image:
```
docker run -p 7860:7860 wsi-annotation
```

3. Open in browser:
```
open http://localhost:7860
```

## License

This project has MIT License.