MRI Viewer

A web-based medical imaging viewer built with FastAPI (Backend) and Vanilla JS / Vite (Frontend). It supports DICOM file uploads, study/series navigation, and advanced visualization tools.

Features

• DICOM Viewing: Load and view MRI/CT/XR studies.
• Tools:
  • Window/Level: Adjust brightness and contrast (presets available).
  • Pan/Zoom/Rotate: Manipulate images.
  • Measurements:
    • Ruler: Measure distance (mm/px).
    • Angle: Measure 3-point angles (Cobb angle style).
    • Pixel Probe: Inspect HU/Signal values at specific coordinates.
• Synchronization: Link scrolling across multiple viewports properly.
• Layouts: Switch between 1x1 and 2x2 grid views.
• Cine Loop: Play through image stacks.

Prerequisites

• Python 3.8+
• Node.js 16+

Setup & Running

1. Backend (FastAPI)

Navigate to the backend directory:

cd backend

Create a virtual environment (recommended):

python -m venv venv
# Windows
venv\Scripts\activate
# Linux/Mac
source venv/bin/activate

Install dependencies:

pip install -r requirements.txt

Run the server:

uvicorn main:app --reload --port 8000

The backend API will be available at http://localhost:8000. Docs are available at http://localhost:8000/docs.

2. Frontend (Vite)

Open a new terminal and navigate to the frontend directory:

cd frontend

Install dependencies:

npm install

Start the development server:

npm run dev

The application will be accessible at http://localhost:5173 (or proper port shown in terminal).

Usage

1. Open the web application (http://localhost:5173).
2. Upload DICOMs: Drag and drop files onto the viewport or use the "Scan Folder" / "Upload Files" buttons in the Import modal.
3. Select Study: Choose a study from the study list.
4. Tools: Use the toolbar on the left to measure (Ruler, Angle, Probe), adjust windowing, or change layout.
5. Sync: Click the "Link" icon to enable synchronized scrolling for side-by-side comparison.

Project Structure

• backend/: FastAPI application, database (SQLite), DICOM storage.
  • routers/: API endpoints (studies, series, instances, upload, probe).
  • dicom_parser.py: Core DICOM processing logic.
• frontend/: Vite + Vanilla JS application.
  • src/components/: Reusable UI components (Viewport, Toolbar, etc.).
  • src/services/api.js: API client.
  • src/main.js: Main application entry point.