/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [imageIds, setImageIds] = useState([]); const [currentImageIndex, setCurrentImageIndex] = useState(0); const [files, setFiles] = useState([]); const imageRef = useRef(null); const [cornerstoneLoaded, setCornerstoneLoaded] = useState(false); useEffect(() => { let cornerstone, cornerstoneWADOImageLoader, dicomParser; async function loadLibraries() { cornerstone = (await import("https://esm.sh/cornerstone-core")).default; cornerstoneWADOImageLoader = (await import("https://esm.sh/cornerstone-wado-image-loader")).default; dicomParser = (await import("https://esm.sh/dicom-parser")).default; cornerstoneWADOImageLoader.external.cornerstone = cornerstone; cornerstoneWADOImageLoader.external.dicomParser = dicomParser; cornerstoneWADOImageLoader.configure({ useWebWorkers: false, }); setCornerstoneLoaded(true); } loadLibraries(); }, []); useEffect(() => { if (cornerstoneLoaded && imageIds.length > 0 && imageRef.current) { import("https://esm.sh/cornerstone-core").then((cornerstone) => { cornerstone.default.enable(imageRef.current); cornerstone.default.loadImage(imageIds[currentImageIndex]).then(image => { cornerstone.default.displayImage(imageRef.current, image); }); }); } }, [imageIds, currentImageIndex, cornerstoneLoaded]); const isValidDICOM = async (file) => { const dicomParser = (await import("https://esm.sh/dicom-parser")).default; return new Promise((resolve) => { const reader = new FileReader(); reader.onload = (e) => { try { const byteArray = new Uint8Array(e.target.result); dicomParser.parseDicom(byteArray); resolve(true); } catch (error) { resolve(false); } }; reader.readAsArrayBuffer(file); }); }; const handleFileChange = async (event) => { const selectedFiles = Array.from(event.target.files); const validDicomFiles = []; const validImageIds = []; for (const file of selectedFiles) { if (await isValidDICOM(file)) { validDicomFiles.push(file); const cornerstoneWADOImageLoader = (await import("https://esm.sh/cornerstone-wado-image-loader")).default; const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file); validImageIds.push(imageId); } } setFiles(validDicomFiles); setImageIds(validImageIds); setCurrentImageIndex(0); }; const handleDownload = () => { if (files.length > 0) { const zip = new JSZip(); files.forEach((file, index) => { zip.file(`dicom_${index + 1}.dcm`, file); }); zip.generateAsync({ type: "blob" }).then((content) => { const url = URL.createObjectURL(content); const a = document.createElement('a'); a.href = url; a.download = 'dicom_files.zip'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }); } }; const handlePrevious = () => { setCurrentImageIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : prevIndex)); }; const handleNext = () => { setCurrentImageIndex((prevIndex) => (prevIndex < imageIds.length - 1 ? prevIndex + 1 : prevIndex)); }; return (

DICOM Viewer

{currentImageIndex + 1} / {imageIds.length}

{files.length > 0 && ( )}

View source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` DICOM Viewer

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { margin: 0; font-family: system-ui, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; } .container { background-color: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text-align: center; } h1 { margin-bottom: 1rem; } input[type="file"] { margin-bottom: 1rem; } .cornerstone-viewport { width: 512px; height: 512px; border: 1px solid #ccc; margin: 0 auto 1rem; } .navigation { display: flex; justify-content: center; align-items: center; margin-bottom: 1rem; } .navigation button { margin: 0 0.5rem; } .download-button { background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 4px; transition: background-color 0.3s; } .download-button:hover { background-color: #45a049; } `;

diacomDemo