Подключение Луч ИИ

npm i @luchai/viewer

# The WASM core is bundled inline (nothing to host). Mount it CLIENT-SIDE:
# createLuchaiApp touches the DOM/WebGPU, so import it dynamically
# (Next.js: a 'use client' component + await import).
#
# Webpack / Next.js only: the inline core has a dead Node branch that
# references node builtins. It never runs in the browser; stub them so
# the bundle resolves:
#   // next.config.mjs
#   webpack: (config) => {
#     config.resolve.fallback = { ...config.resolve.fallback,
#       module: false, fs: false, path: false, url: false, crypto: false, os: false };
#     return config;
#   }
# (Vite / esbuild need no config.)
#
# Then mount the viewer and pass your license token — see Quickstart
# (createLuchaiApp's licenseKey) or React (the licenseKey prop).
# We issue the token bound to your domain.

import { createLuchaiApp } from '@luchai/viewer';

const viewer = createLuchaiApp(
  document.getElementById('viewer'),
  {
    locale: 'ru',
    theme: 'auto',                 // 'dark' | 'light' | 'auto' (follows the OS)
    brand: { accent: '#2F80FF' },  // your brand colour → recolours the viewer
    onExit: () => history.back(),
    // The left Studies panel collapses (chevron) and drag-resizes from its right
    // edge; the width + collapsed state persist in localStorage. Set storageKey
    // to namespace those prefs when you embed more than one viewer on a page.
    storageKey: 'report',
    // License token, verified on-device. Optional in dev: localhost is
    // always free. On your production domain an absent/invalid token
    // gates the viewer (degraded image + "license not active" panel).
    licenseKey: 'eyJ2IjoxLC...<token>',
    // (optional) licenseServer / telemetry — see the License section.
  },
);

// The returned handle drives the running viewer:
await viewer.loadStudy(fileInput.files);   // load / replace the study
const off = viewer.on('studyLoaded', (s) => console.log(s.modality));
viewer.reset();    // clear back to the empty state
off();             // unsubscribe
viewer.destroy();  // tear down when no longer needed

// How to license, in 3 steps:
//   1. We issue you a token (a string), bound to YOUR production domain(s) + an expiry.
//   2. Put it in the config: createLuchaiApp(el, { licenseKey }) — or the <LuchaiViewer licenseKey=…> prop.
//   3. Deploy. On your domain the viewer is licensed; localhost / *.local are always free in dev.
// The token is safe to ship in your frontend bundle (it only works on your domain), like a
// Mapbox / Stripe PUBLISHABLE key. Nothing else to wire — the rest below is optional.

createLuchaiApp(el, {
  // The license token we issue you, bound to YOUR domain(s) + an expiry.
  // Keep it in your runtime config (like a Mapbox / Stripe publishable key).
  // localhost / *.local need no key (free for development).
  licenseKey: 'eyJ2IjoxLC...<your token>',

  // (optional) Online validation endpoint. On a production domain the token
  // is exchanged here for a short-lived signed grant (required to unlock the
  // image); the grant is refreshed in the background and a cached grant keeps
  // working offline for up to 30 days, so a transient outage never interrupts
  // the viewer. Defaults to our hosted control plane (api.луч-ии.рф) — reachable
  // from Russia and abroad, so you don't need to set this. Override only for an
  // on-prem deployment. Patient images never leave the browser. For a fully
  // air-gapped install we instead issue an OFFLINE token that needs no server.
  // licenseServer: 'https://api.xn----ptbaj4bya.xn--p1ai',

  // Serving to a Russian audience? The SDK's license check (small request to
  // api.луч-ии.рф) works inside Russia. But YOUR site's own hosting must be
  // reachable too: avoid *.pages.dev / *.workers.dev (blocked), and if you host
  // on Cloudflare, disable ECH on your zone or serve from RU-reachable infra —
  // otherwise browsers in Russia stall on the TLS handshake. The WASM core is
  // inlined in the bundle (no extra fetch), so it loads straight from your host.

  // (optional) Anonymous, PHI-free telemetry (import/error counters +
  // format / SDK version / browser context — never snapshots or patient
  // data). On by default; set false to opt out.
  // telemetry: false,
});

import { useRef } from 'react';
import { LuchaiViewer, type LuchaiViewerHandle } from '@luchai/viewer/react';

function Report({ studyZipUrl }: { studyZipUrl: string }) {
  const ref = useRef<LuchaiViewerHandle>(null);
  return (
    <div style={{ height: 600 }}>
      <button onClick={() => ref.current?.reset()}>Clear</button>
      <LuchaiViewer
        ref={ref}
        licenseKey="eyJ2IjoxLC...<your token>"  {/* the token we issue you (bound to your domain). localhost is free. See License. */}
        locale="ru"
        theme="auto"
        brand={{ accent: '#2F80FF' }}
        study={studyZipUrl}                 {/* controlled: changing this loads it */}
        onStudyLoaded={(s) => console.log(s.modality)}
        onError={(e) => console.error(e)}
      />
    </div>
  );
}

// Rebrand the turnkey viewer entirely via config — no fork.
const viewer = createLuchaiApp(document.getElementById('viewer'), {
  theme: 'dark',                     // 'dark' | 'light' | 'auto'
  brand: {
    name: 'РадиоПро',                // wordmark in the header (default «Луч ИИ»)
    accent: '#0A84FF',               // brand colour → recolours the whole viewer
    logoLight: '/logo-light.svg',    // logo per theme (optional; falls back to the name)
    logoDark:  '/logo-dark.svg',
    backLabel: 'К списку',           // text on the back button (default: icon-only chevron)
    backIcon:  '/icons/back.svg',    // optional custom back glyph (URL)
  },
  features: {                        // hide the surfaces you drive yourself
    import: false,                   //   e.g. your own study list opens studies →
    library: false,                  //   no built-in Import button / Studies sidebar
  },
  onExit: () => closeFullscreen(),   // setting onExit shows the back button → your handler
});

// Open studies from YOUR list into this ONE instance (no remount per click). Fullscreen is just
// your container going fullscreen (CSS / Fullscreen API) — the viewer fills whatever box it's in.
async function openStudy(study) {
  document.getElementById('viewer').requestFullscreen?.();
  await viewer.loadStudy(study.zipUrl);   // a .zip URL — or File[]/Blob/DICOMweb (see "Loading data")
}

// Load studies straight from a PACS / DICOMweb server (QIDO-RS query +
// WADO-RS retrieve) — not only drag-dropped files. Point the viewer at your
// server with config.dataSource; `headers` inject auth into every request
// (Authorization: Bearer … or a custom-auth PACS token). qidoRoot / wadoRoot
// are usually the same base (…/dicomweb). The retrieved .dcm instances run
// through the SAME import pipeline — no extra parsing on your side.
const viewer = createLuchaiApp(el, {
  locale: 'ru',
  dataSource: {
    type: 'dicomweb',
    qidoRoot: 'https://pacs.example.ru/dicomweb',
    wadoRoot: 'https://pacs.example.ru/dicomweb',
    headers: { Authorization: 'Bearer <token>' }, // optional
  },
});

// List studies (QIDO-RS). Filters are standard QIDO query params.
const studies = await viewer.listStudies({ PatientName: 'Иванов*', StudyDate: '20240101-20241231' });
// → [{ studyInstanceUID, patientName, patientID, studyDate, studyDescription,
//      accessionNumber, modalities, numberOfSeries, numberOfInstances }]

// Open one by its StudyInstanceUID — retrieved over WADO-RS, then rendered.
await viewer.loadFromDicomweb(studies[0].studyInstanceUID);

// A built-in "PACS" button + study browser also appears automatically when dataSource
// is set: it lists studies, then drills study → SERIES so the user can open just ONE
// series (browses with QIDO, retrieves that series with WADO-RS) — ~15× less to fetch
// than the whole study. The programmatic listStudies / loadFromDicomweb above is the
// integrator path. Errors (network / 401-403 auth / 404) surface via 'error' / onError.

// CORS note: the browser fetches QIDO + WADO cross-origin, so the PACS must send
// Access-Control-Allow-Origin and allow the Accept / Authorization request headers.
// Works against real PACS (dcm4chee / Orthanc / Google Healthcare) AND static DICOMweb
// servers (static-wado / the OHIF demo): if a whole-instance WADO-RS retrieve is refused,
// the viewer falls back to the server's per-series metadata-JSON + per-frame pixels and
// reassembles each instance client-side (incl. JPEG-LS / JPEG 2000 / JPEG-baseline /
// JPEG-lossless / RLE compressed frames). Multi-frame instances fetch ALL frames.

// loadStudy / the `study` prop accept several shapes — all run through the
// same in-browser import path (URLs are fetched to bytes first):
viewer.loadStudy(fileInput.files);          // File[] / FileList (picker or folder)
viewer.loadStudy(zipBlob);                  // a Blob / ArrayBuffer (a .zip you hold)
viewer.loadStudy('https://pacs/scan.zip');  // a URL to a .zip archive
viewer.loadStudy([                          // a list of DICOM file URLs
  'https://pacs/img1.dcm',
  'https://pacs/img2.dcm',
]);

// One persistent viewer instance + a list of thumbnails: clicking a
// thumbnail loads that study into the SAME viewer (no remount).
const viewer = createLuchaiApp(document.getElementById('viewer'), { locale: 'ru' });

for (const study of studies) {
  thumb(study).addEventListener('click', () => {
    viewer.loadStudy(study.zipUrl);   // replaces the current study in place
  });
}

// The Control API below is the low-level viewport surface. The turnkey viewer already drives
// all of it from its own UI — reach for it only for PROGRAMMATIC control. No extra package: the
// handle returned by createLuchaiApp exposes it via getViewer() (returns null until mounted, so
// call it after the first 'studyLoaded', or guard with ?.).
import { createLuchaiApp } from '@luchai/viewer';
const app = createLuchaiApp(document.getElementById('viewer'), { /* config */ });
const viewer = app.getViewer();        // the low-level viewport (or null before it mounts)

// Actions
await viewer.loadStudy(input);         // load / replace the current study (see "Loading data")
viewer.reset();                        // clear back to the empty state, incl. measurements

// Window/level — set the grayscale window directly, or apply a clinical preset.
viewer.setWindowLevel(2000, 500);      // window width / window centre (HU for CT)
viewer.setPreset('bone');              // 'bone' | 'dental' | 'brain' | 'lung' | 'softTissue' | 'abdomen'

// Display colormap for monochrome 2D/MPR planes. NM SPECT / PET auto-render in a hot-iron palette
// (bright uptake on black — the nuclear-medicine convention) with the window floored at 0; CT/MR stay
// grayscale. Force any palette: gray, hot (hot-iron), pet (rainbow), jet. The demo shows a palette picker
// centred in each NM/PT panel header. Cross-reference lines / annotations are drawn on a display-resolution
// layer, so they stay crisp even on a low-res slice (e.g. a 128² NM frame).
viewer.setColormap('auto');            // 'auto' (hot for NM/PT, else gray — default) | 'gray' | 'hot' | 'pet' | 'jet'

// 3D volume rendering (DVR) uses vtk-style TRANSFER-FUNCTION presets — each bakes a per-tissue colour +
// opacity curve over HU (bone = ivory, soft tissue = flesh, lung, angio = vessel-red, MR = grayscale ramp),
// not a flat grayscale ramp. The 3D panel header has the preset picker; a depth (front-clip) slider peels
// the near part of the volume to look inside. (DVR needs a GPU/WebGPU; without one the 3D panel is disabled
// and 2D/MPR still work.)

// Measurement tools (ruler / angle / ROI) live on the top toolbar; you can also
// drive them from the host. Toggle a tool, then the user draws on the MPR panels;
// a length reads in mm, an angle in degrees, a rectangle/ellipse ROI in mm² with
// HU mean/SD/min-max (CT) or raw-intensity stats. Set 'crosshair' to return to navigation.
viewer.setMeasureTool('length');       // 'crosshair' | 'length' | 'angle' | 'rect' | 'ellipse'
viewer.getMeasureTool();               // the currently-armed tool
viewer.getMeasurements();              // [{ id, kind, axis, slice, points, label }] — persisted per slice
viewer.removeMeasurement(id);          // remove a SINGLE measurement by id
viewer.clearMeasurements();            // remove every overlay
const png = viewer.capturePanel(0);    // an MPR panel as a PNG data-URL (0 = axial); snapshot3D() for 3D

// Sidebar thumbnails — decode a slice to auto-windowed 8-bit grey on the viewer's licensed
// core (so previews don't spin up a second, unlicensed core). null if the core isn't ready.
const thumb = viewer.decodeThumb(bytes); // { width, height, gray } | null

// Layout & MPR mode. A volumetric series opens in the NATIVE acquired plane (a 1×1 scroll over its
// real slices — fast, NO volume built). The "MPR" toolbar button builds the volume on demand and
// switches to MPR; the Layout switcher (⊞) picks a grid. The single-plane / 3D layouts also build the
// volume on demand. Reference lines are solid and coloured per 3D-Slicer convention (axial = red,
// sagittal = yellow, coronal = green); each MPR panel carries a matching corner colour chip.
viewer.setLayout('native');            // 'native' (acquired 1×1, no volume) — the default after open
viewer.setLayout('mpr-2x2');           // build volume → 2×2 (axial / sagittal / coronal / 3D)
viewer.setLayout('mpr-1x2');           // axial | sagittal side-by-side
viewer.setLayout('mpr-3up');           // one large axial + sagittal/coronal stacked
viewer.setLayout('axial');             // a single MPR plane: 'axial' | 'sagittal' | 'coronal' | '3d'
viewer.getLayout();                    // the current layout name
viewer.loadStudy({ files, forceVolume: true }); // skip native, build the MPR volume up front
viewer.on('study-loaded', (i) => {});  // i.native === true ⇒ opened in the native (deferred-build) view
viewer.on('build-start', () => {});    // a deferred volume build STARTED (native view → first MPR/3D, any
                                       // entry point inc. a panel double-tap) → show your loading overlay;
                                       // 'study-loaded' / 'error' clear it. 'progress' carries phase/value.

// Oblique MPR — rotate a reformat plane by dragging a reference-line ENDPOINT (a tilted cut).
// 'linked' rotates the other planes around the focus; 'single' rotates only the dragged plane.
viewer.setObliqueLinkage('linked');    // 'single' | 'linked'
viewer.setRotationSnap(15);            // 0 = off, 15 = snap to 15° on commit
viewer.setShowReferenceLines(true);    // show/hide the cross-reference lines + rotation handles
viewer.resetOblique();                 // clear all tilt → back to orthogonal planes
viewer.getObliqueSettings();           // { active, linkage, snapDeg, showRefLines }
viewer.on('oblique', (s) => {});       // fires when a plane is tilted/reset or a setting changes

// Multiframe cine — a single instance with NumberOfFrames > 1 (US / XA / NM / enhanced) is a
// TEMPORAL frame stack and plays as cine (colour US shows in correct colour). Controls appear
// automatically; you can also drive playback from the host. No-op for an ordinary single/volume series.
viewer.setCinePlayback(true);          // play / pause
viewer.setCineFrameRate(20);           // playback speed in frames/s (clamped 1..60; default = the
                                       // DICOM RecommendedDisplayFrameRate / CineRate, else ~15)
viewer.setCineLoop(true);              // loop at the end vs play once and stop
viewer.setCineFrame(0);                // scrub to a frame (0-based; pauses playback)
viewer.getCineState();                 // { available, playing, frame, frameCount, fps, loop }
viewer.on('cine', (s) => {});          // fires on play/pause, frame advance, fps/loop change

// Segmentation (SEG) overlay — render a DICOM Segmentation as a coloured wash over the image on
// ALL planes (axial / sagittal / coronal / oblique). The importer associates a SEG with the series
// it references and loads it automatically; you can also drive it from the host. The label volume is
// built in the engine, aligned to the source volume, and sampled on the same MPR planes as the image.
const ok = await viewer.loadSegmentation(segBytes); // Uint8Array of a SEG .dcm; false if it doesn't align
viewer.setSegOverlayEnabled(true);     // master on/off for the whole overlay
viewer.setSegOpacity(0.45);            // global wash strength, 0..1
viewer.setSegmentVisible(6, false);    // per-segment show/hide (by SegmentNumber)
viewer.clearSegmentation();            // drop the overlay
viewer.getSegOverlay();                // { available, enabled, opacity, segments:[{number,label,r,g,b,visible}] }
viewer.on('seg', (s) => {});           // fires when a segmentation loads / toggles / opacity changes

// PT/CT fusion — overlay a PET series on a CT series of the same study (same FrameOfReferenceUID).
// The engine resamples the PET into the CT voxel grid (patient-coordinate co-registration), so both
// sample the SAME MPR plane and the fusion follows on ALL planes (axial / sagittal / coronal / oblique).
// The importer pairs the CT with its PET partner and loads it automatically when you open the CT; you
// can also drive it from the host. PET is windowed + colour-mapped in the engine and blended over the CT.
const ok2 = await viewer.loadFusion(petBytesArray); // Uint8Array[] of the PET series; false if it doesn't overlap
viewer.setFusionEnabled(true);         // master on/off for the fusion overlay
viewer.setFusionOpacity(0.5);          // global blend strength, 0..1
viewer.setFusionColormap('hot');       // 'hot' (default) | 'pet' | 'jet' | 'gray'
viewer.setFusionWindow(0, 0);          // PET window/level (ww<=0 ⇒ the engine's auto PET W/L)
viewer.clearFusion();                  // drop the fusion overlay
viewer.getFusion();                    // { available, enabled, opacity, colormap, petWW, petWC }
viewer.on('fusion', (s) => {});        // fires when fusion loads / toggles / colormap / opacity changes

// RTSTRUCT (RT Structure Set) — overlay an RT plan's ROI contours as coloured outlines over the image
// on EVERY MPR plane (axial / sagittal / coronal / oblique). The engine keeps the contours in patient
// coordinates and projects them onto each reformat plane (so a contour stays aligned as you scroll /
// tilt). The importer loads an RTSTRUCT from the study automatically; you can also drive it from the host.
const ok3 = await viewer.loadRtstruct(rtBytes); // Uint8Array of an RTSTRUCT .dcm; false if it isn't one / no ROIs
viewer.setRtstructEnabled(true);       // master on/off for the contour overlay
viewer.setRoiVisible(2, false);        // per-ROI show/hide (by ROINumber)
viewer.clearRtstruct();                // drop the contour overlay
viewer.getRtstruct();                  // { available, enabled, rois:[{number,name,type,r,g,b,visible}] }
viewer.on('rtstruct', (s) => {});      // fires when an RT Structure Set loads / toggles / an ROI show/hides

// Structured Report (SR) & Encapsulated PDF — a "report" object in a study is now a FIRST-CLASS,
// openable series row (an «Отчёт»/SR badge next to the image series, same cell). Open it and the main
// area renders the report instead of the image canvas:
//   • a DICOM SR (.88.*) → its ContentSequence parsed into a formatted, localized content tree
//     (sections as headings, "Concept: Value" lines, measurements as "value units");
//   • an Encapsulated PDF (.104.1) → the embedded PDF, shown inline with a download button.
// No API call needed — the importer surfaces report series automatically and the viewer renders them.

// Plain images — a standalone X-ray exported as PNG/JPEG (or GIF/BMP/WebP) can be imported directly
// (drag-drop or the file picker), not just DICOM/zip. It opens as a flat 2D RGB image series (no
// window/level, MPR or mm — it carries no DICOM geometry). DICOM is still detected by content, so a
// DICOM file with no .dcm extension is never mis-routed as a plain image.

// Events — on() returns an unsubscribe. On the LuchaiViewer the load event is 'study-loaded'
// and carries { ok, width, height, depth, modality, ww, wc, native, ... }. (The turnkey
// createLuchaiApp handle instead exposes 'studyLoaded' — see Quickstart.)
const off = viewer.on('study-loaded', (s) => { /* { modality, width, height, depth, ww, wc, native } */ });
viewer.on('error',   (e) => { /* { message } */ });
viewer.on('license', (l) => { /* { ok, reason, customer } — gate your UI when !l.ok */ });
viewer.on('viewport', (v) => { /* { layout, ww, wc } — reflect the active layout + W/L */ });
off();

viewer.destroy();                      // tear down

// @luchai/viewer — release history. Full notes + per-version tags:
//   https://github.com/luchai-med/luchai-sdk/releases   ·   CHANGELOG.md in the repo.
// Pin a version in package.json; it never moves until you bump it.

0.9.4  Default license server → api.луч-ии.рф — reachable from Russia AND abroad (the legacy
       *.workers.dev endpoint is blocked inside Russia). Integrators get a working verify endpoint
       out of the box; no licenseServer override needed.
0.9.3  Bundler fix — neutralize the core glue's new URL("…wasm") reference (the core is inlined).
0.9.2  WASM core inlined as base64 — survives webpack/Next production re-minify; nothing to host.
0.9.1  Header dropdowns render above panels (z-index); toolbar wraps on narrow viewports.
0.9.0  First public npm release. 3D DVR rework (transfer-function presets, MIP/MinIP, depth clip),
       RTSTRUCT overlay, 2D drag tools (zoom / W-L / pan), mobile layout, getViewer() Control API,
       brand back-button. Baseline: license gate, DICOMweb/PACS, PT/CT fusion, SEG overlay,
       MPR/oblique, cine, measurements, SR/PDF, React <LuchaiViewer> adapter.