Welcome to DICOMPress, a toolkit designed for professionals in healthcare, education, and research who want to create web-based protocols with embedded, interactive 3D medical images (CT/MRI). Whether for clinical studies, educational material, or research documentation, DICOMPress combines the power of VitePress and Niivue to deliver high-performance, modern web technology for medical imaging.
This project builds upon:
- VitePress: A Vite-powered static site generator with markdown support and Vue components integration.
- Niivue: A high-performance, WebGL-based DICOM viewer for rendering 3D medical images (CT/MRI) with advanced features like segmentation overlays.
- Interactive DICOM Viewer: Scroll through CT or MRI image stacks embedded in your Markdown pages.
- Overlay Segmented Structures: Highlight critical anatomical structures and seamlessly integrate them with 3D images to enhance the clarity of target concepts.
- Smooth Integration with VitePress: Utilize VitePress to create fast, responsive, and easy-to-navigate documentation sites.
- Powered by Niivue: Leverage Niivue’s powerful, WebGL-based medical image visualization for high-quality 3D rendering and smooth interactivity.
- Customizable and Extensible: Easily adapt and extend the viewer to suit your specific use cases with flexible configurations.
- Fully Configured for Easy Hosting: Comes with Nginx and Docker-Compose setup, making it easy to deploy and host on any server.
To get started with DICOMPress for development, follow these steps:
# Install dependencies
npm i
# Start VitePress in development mode
npm run docs:devThis will run the development server, allowing you to view and interact with the site locally at http://localhost:3001.
The Docker-Compose configuration not only runs the VitePress development server but also sets up a DICOM server using http-server to serve the DICOM files for viewing. It uses Nginx to proxy these services, making it easier to host on any server.
# Build and run the services, including the DICOM server and proxy
docker-compose up --buildThe Nginx configuration exposes:
- The VitePress server at the root URL (
/), proxied to port3001. - The DICOM server at
/http-server/, proxied to port4000.
- Clinical Protocols: Create interactive, image-rich protocols that enhance the communication of complex medical data.
- Educational Content: Develop web-based learning modules with live 3D visualizations to improve the understanding of medical imaging concepts.
- Research Documentation: Easily integrate and share imaging data and segmented structures with collaborators, directly within your Markdown-based research notes.
Customize the DICOM viewer to fit your needs by tweaking the available Vue components and Niivue settings. The configuration options allow for control over:
- Image Stack Controls: Adjust scroll speed, view range, and segmentation overlays.
- Interactive Annotations: Add notes or labels to key structures for educational purposes.
- Performance Optimization: Configure caching and image processing for high-performance visualization on various devices.
The images used in this repo are sourced from the Medical Decathlon Dataset. This dataset comes from the Memorial Sloan Kettering Cancer Center.
We welcome contributions! Feel free to fork this repository, submit pull requests, or open issues for any bugs or feature requests.