title	emoji	colorFrom	colorTo	sdk	sdk_version	app_file	pinned
wsi-annotation-demo	🔬	blue	red	docker	24.0.6	Dockerfile	false

wsi-annotation-demo

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.

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
File Size Check

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.