@webex/ladon-ts 5.4.4 → 5.4.5

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### 5.4.5 (2025-03-28)
+
+
+### Bug Fixes
+
+* use frame data buffer for array reuse ([#55](https://github.com/beyonddunbar/ladon-ts/issues/55)) ([254ffbe](https://github.com/beyonddunbar/ladon-ts/commit/254ffbefe2bd5b1f2630b6555ea3f41fe87cef10))
+
 ### 5.4.4 (2025-03-27)
 
 

package/build/module/lib/pipeline.d.ts

@@ -25,6 +25,7 @@ export declare class Pipeline implements IPipeline {
     private lastMaskResult?;
     private frameQueue;
     private maskQueue;
+    private frameDataBuffer?;
     constructor(inputCanvas: HTMLCanvasElement, outputCanvas: HTMLCanvasElement, config: PipelineConfig, videoElement?: HTMLVideoElement | undefined);
     /**
      * Processes a single frame and returns the inference result.

package/build/module/lib/pipeline.js

@@ -1,9 +1,9 @@
-import { WorkerGenerator as h, LocalGenerator as o } from "./generator.js";
+import { WorkerGenerator as n, LocalGenerator as h } from "./generator.js";
 import { BlurRenderer as u } from "./renderer/blur-renderer.js";
-import { PassthroughRenderer as d } from "./renderer/passthrough-renderer.js";
-import { ReplacementRenderer as m } from "./renderer/replacement-renderer.js";
-import { resizeImage as l } from "./util.js";
-class R {
+import { PassthroughRenderer as o } from "./renderer/passthrough-renderer.js";
+import { ReplacementRenderer as d } from "./renderer/replacement-renderer.js";
+import { resizeImage as m } from "./util.js";
+class w {
   constructor(e, t, s, r) {
     this.inputCanvas = e, this.outputCanvas = t, this.config = s, this.videoElement = r, this.loaded = !1, this.frameQueue = [], this.maskQueue = [];
     const a = this.inputCanvas.getContext("2d", {
@@ -25,10 +25,10 @@ class R {
   async onFrame(e, t = !0) {
     if (!this.generator || !this.renderer)
       throw new Error("[ladon-ts] - pipeline is not loaded.");
-    const s = this.getInputFrameData(t), r = s instanceof Uint8ClampedArray ? new Uint8ClampedArray(s) : s;
-    if (this.frameQueue.push({ timestamp: e, frameData: r }), t || !this.lastMaskResult) {
-      const a = s, n = this.getMaskImageData(a), i = await this.generator.getLadonOutput(n, e);
-      this.maskQueue.push({ timestamp: i.timestamp, maskResult: i }), this.lastMaskResult = i, await this.renderSyncedFrameAndMask(), await this.generator.postRender(n, e);
+    const s = this.getInputFrameData(t);
+    if (s instanceof Uint8ClampedArray ? ((!this.frameDataBuffer || this.frameDataBuffer.length !== s.length) && (this.frameDataBuffer = new Uint8ClampedArray(s.length)), this.frameDataBuffer.set(s), this.frameQueue.push({ timestamp: e, frameData: this.frameDataBuffer })) : this.frameQueue.push({ timestamp: e, frameData: s }), t || !this.lastMaskResult) {
+      const r = s, a = this.getMaskImageData(r), i = await this.generator.getLadonOutput(a, e);
+      this.maskQueue.push({ timestamp: i.timestamp, maskResult: i }), this.lastMaskResult = i, await this.renderSyncedFrameAndMask(), await this.generator.postRender(a, e);
     } else
       this.maskQueue.push({ timestamp: e, maskResult: this.lastMaskResult }), await this.renderSyncedFrameAndMask();
     return this.createInferenceResult(e, t);
@@ -65,7 +65,7 @@ class R {
    * @returns {Uint8ClampedArray} - The processed mask image data.
    */
   getMaskImageData(e) {
-    return this.config.mask.inputSize.width === this.config.input.width ? e : l(
+    return this.config.mask.inputSize.width === this.config.input.width ? e : m(
       e,
       this.config.input.width,
       this.config.input.height,
@@ -112,20 +112,20 @@ class R {
         this.renderer = new u(this.outputCanvas, this.config);
         break;
       case "passthrough":
-        this.renderer = new d(this.outputCanvas, this.config);
+        this.renderer = new o(this.outputCanvas, this.config);
         break;
       case "replacement":
-        this.renderer = new m(this.outputCanvas, this.config);
+        this.renderer = new d(this.outputCanvas, this.config);
         break;
       default:
         throw new Error("[ladon-ts] - renderer not implemented.");
     }
     switch (await this.renderer.load(), this.config.mask.generator) {
       case "local":
-        this.generator = new o(this.config);
+        this.generator = new h(this.config);
         break;
       case "worker":
-        this.generator = new h(this.config);
+        this.generator = new n(this.config);
         break;
       default:
         throw new Error("[ladon-ts] - generator not implemented.");
@@ -146,10 +146,10 @@ class R {
    */
   destroy() {
     var e, t;
-    this.reset(), (e = this.generator) == null || e.destroy(), (t = this.renderer) == null || t.destroy();
+    this.reset(), (e = this.generator) == null || e.destroy(), (t = this.renderer) == null || t.destroy(), this.frameDataBuffer = void 0;
   }
 }
 export {
-  R as Pipeline
+  w as Pipeline
 };
 //# sourceMappingURL=pipeline.js.map

package/build/module/lib/pipeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"pipeline.js","sources":["../../../src/lib/pipeline.ts"],"sourcesContent":["import { PipelineConfig } from './config-types';\nimport {\n    FacesAndLandmarks,\n    FrameData,\n    LadonOutput,\n    LocalGenerator,\n    MaskGenerator,\n    WorkerGenerator,\n} from './generator';\nimport { BlurRenderer, LadonRenderer, PassthroughRenderer, ReplacementRenderer } from './renderer';\nimport { resizeImage } from './util';\n\nexport interface IFrameInferenceResult {\n    facesAndLandmarks: FacesAndLandmarks;\n    gesture: Float32Array;\n    motion: number;\n    skipped: boolean;\n    timestamp: number;\n}\n\nexport interface IPipeline {\n    onFrame(timestamp: number, maskNeeded?: boolean): Promise<IFrameInferenceResult>;\n    isLoaded(): boolean;\n    load(): Promise<void>;\n    destroy(): void;\n}\n\nexport class Pipeline implements IPipeline {\n    private generator?: MaskGenerator;\n    private renderer?: LadonRenderer;\n    private loaded = false;\n\n    private inputCanvasCtx: CanvasRenderingContext2D;\n    private lastMaskResult?: LadonOutput;\n\n    private frameQueue: Array<{ timestamp: number; frameData: FrameData }> = [];\n    private maskQueue: Array<{ timestamp: number; maskResult: LadonOutput }> = [];\n\n    constructor(\n        private inputCanvas: HTMLCanvasElement,\n        private outputCanvas: HTMLCanvasElement,\n        public readonly config: PipelineConfig,\n        private readonly videoElement?: HTMLVideoElement\n    ) {\n        const inputCanvasCtx = this.inputCanvas.getContext('2d', {\n            alpha: false,\n            willReadFrequently: true,\n        });\n\n        if (!inputCanvasCtx) {\n            throw new Error('[ladon-ts] - error getting input context 2d');\n        }\n        this.inputCanvasCtx = inputCanvasCtx;\n    }\n\n    /**\n     * Processes a single frame and returns the inference result.\n     *\n     * @param timestamp - The timestamp of the frame.\n     * @param performInference - Flag to perform mask inference.\n     * @returns The result of the frame processing.\n     * @throws If the pipeline (generator or renderer) is not loaded.\n     */\n    public async onFrame(\n        timestamp: number,\n        performInference = true\n    ): Promise<IFrameInferenceResult> {\n        if (!this.generator || !this.renderer) {\n            throw new Error('[ladon-ts] - pipeline is not loaded.');\n        }\n\n        // Get the current frame (raw image data or video element)\n        const frameData = this.getInputFrameData(performInference);\n\n        // Create a copy of the frame data if it's an array\n        const frameDataCopy =\n            frameData instanceof Uint8ClampedArray ? new Uint8ClampedArray(frameData) : frameData;\n\n        // Add the frame to the queue with its timestamp\n        this.frameQueue.push({ timestamp, frameData: frameDataCopy });\n\n        if (performInference || !this.lastMaskResult) {\n            // Perform inference and add the new mask to the mask queue\n            const rawImageData = frameData as Uint8ClampedArray;\n            const maskImageData = this.getMaskImageData(rawImageData);\n            const maskResult = await this.generator.getLadonOutput(maskImageData, timestamp);\n            // Add the mask to the queue and use the mask timestamp to sync frames and masks.\n            this.maskQueue.push({ timestamp: maskResult.timestamp, maskResult });\n            this.lastMaskResult = maskResult;\n\n            // Sync frames and masks to render together\n            await this.renderSyncedFrameAndMask();\n\n            // Post-process the mask after rendering\n            await this.generator.postRender(maskImageData, timestamp);\n        } else {\n            // Skipping inference. Update the last mask result's timestamp to match the current frame.\n            this.maskQueue.push({ timestamp, maskResult: this.lastMaskResult });\n            // Sync frames and masks to render together\n            await this.renderSyncedFrameAndMask();\n        }\n\n        // Return the inference result\n        return this.createInferenceResult(timestamp, performInference);\n    }\n\n    /**\n     * Synchronizes frames and masks to ensure they are rendered together.\n     */\n    private async renderSyncedFrameAndMask(): Promise<void> {\n        while (this.frameQueue.length > 0 && this.maskQueue.length > 0) {\n            const frame = this.frameQueue[0];\n            const maskEntry = this.maskQueue[0];\n\n            if (frame.timestamp === maskEntry.timestamp) {\n                // Render the frame and mask together\n                await this.renderer?.render(frame.frameData, maskEntry.maskResult);\n                this.frameQueue.shift();\n                this.maskQueue.shift();\n            } else if (frame.timestamp < maskEntry.timestamp) {\n                // Discard the older frame\n                this.frameQueue.shift();\n            } else {\n                // Discard the older mask\n                this.maskQueue.shift();\n            }\n        }\n    }\n\n    /**\n     * Gets the raw image data from the input canvas context.\n     *\n     * @param needFreshImageData - Flag to indicate if fresh image data is needed.\n     *\n     * @returns The raw image data.\n     */\n    private getInputFrameData(needFreshImageData: boolean): FrameData {\n        if (needFreshImageData || !this.videoElement) {\n            return this.inputCanvasCtx.getImageData(\n                0,\n                0,\n                this.config.input.width,\n                this.config.input.height\n            ).data;\n        }\n\n        return this.videoElement;\n    }\n\n    /**\n     * Resizes the image data if the model expects a fixed size input.\n     *\n     * @param {Uint8ClampedArray} rawImageData - The raw image data.\n     * @returns {Uint8ClampedArray} - The processed mask image data.\n     */\n    private getMaskImageData(rawImageData: Uint8ClampedArray): Uint8ClampedArray {\n        // Check if resizing is needed based on configuration.\n        if (this.config.mask.inputSize.width === this.config.input.width) {\n            return rawImageData;\n        }\n\n        // Resize the image data.\n        return resizeImage(\n            rawImageData,\n            this.config.input.width,\n            this.config.input.height,\n            this.config.mask.inputSize.width,\n            this.config.mask.inputSize.height\n        );\n    }\n\n    /**\n     * Creates the inference result object.\n     *\n     * @param {number} timestamp - The timestamp of the frame.\n     * @param {boolean} performedInference - Indicates if the inference was performed.\n     * @returns {IFrameInferenceResult} - The result object containing inference details.\n     */\n    private createInferenceResult(\n        timestamp: number,\n        performedInference: boolean\n    ): IFrameInferenceResult {\n        if (!this.lastMaskResult) {\n            return {\n                facesAndLandmarks: { data: new Float32Array(0), dims: [] },\n                gesture: new Float32Array(0),\n                motion: 0,\n                skipped: true,\n                timestamp,\n            };\n        }\n\n        return {\n            facesAndLandmarks: this.lastMaskResult.facesAndLandmarks,\n            gesture: this.lastMaskResult.gesture,\n            motion: this.lastMaskResult.motion,\n            skipped: !performedInference,\n            timestamp,\n        };\n    }\n\n    /**\n     * Checks if the pipeline is loaded.\n     *\n     * @returns True if the pipeline is loaded, false otherwise.\n     */\n    public isLoaded(): boolean {\n        return this.loaded;\n    }\n\n    /**\n     * Loads the pipeline components such as the generator and renderer.\n     */\n    public async load(): Promise<void> {\n        switch (this.config.render.type) {\n            case 'blur':\n                this.renderer = new BlurRenderer(this.outputCanvas, this.config);\n                break;\n            case 'passthrough':\n                this.renderer = new PassthroughRenderer(this.outputCanvas, this.config);\n                break;\n            case 'replacement':\n                this.renderer = new ReplacementRenderer(this.outputCanvas, this.config);\n                break;\n            default:\n                throw new Error('[ladon-ts] - renderer not implemented.');\n        }\n\n        await this.renderer.load();\n\n        switch (this.config.mask.generator) {\n            case 'local':\n                this.generator = new LocalGenerator(this.config);\n                break;\n            case 'worker':\n                this.generator = new WorkerGenerator(this.config);\n                break;\n            default:\n                throw new Error('[ladon-ts] - generator not implemented.');\n        }\n\n        await this.generator.load();\n\n        this.loaded = true;\n    }\n\n    /**\n     * Resets the frame and mask queues.\n     */\n    private resetQueues(): void {\n        this.frameQueue = [];\n        this.maskQueue = [];\n    }\n\n    public reset(): void {\n        this.resetQueues();\n        this.lastMaskResult = undefined;\n    }\n\n    /**\n     * Destroys the pipeline and cleans up resources.\n     */\n    public destroy(): void {\n        this.reset();\n        this.generator?.destroy();\n        this.renderer?.destroy();\n    }\n}\n"],"names":["Pipeline","inputCanvas","outputCanvas","config","videoElement","inputCanvasCtx","timestamp","performInference","frameData","frameDataCopy","rawImageData","maskImageData","maskResult","frame","maskEntry","_a","needFreshImageData","resizeImage","performedInference","BlurRenderer","PassthroughRenderer","ReplacementRenderer","LocalGenerator","WorkerGenerator","_b"],"mappings":"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"}
+{"version":3,"file":"pipeline.js","sources":["../../../src/lib/pipeline.ts"],"sourcesContent":["import { PipelineConfig } from './config-types';\nimport {\n    FacesAndLandmarks,\n    FrameData,\n    LadonOutput,\n    LocalGenerator,\n    MaskGenerator,\n    WorkerGenerator,\n} from './generator';\nimport { BlurRenderer, LadonRenderer, PassthroughRenderer, ReplacementRenderer } from './renderer';\nimport { resizeImage } from './util';\n\nexport interface IFrameInferenceResult {\n    facesAndLandmarks: FacesAndLandmarks;\n    gesture: Float32Array;\n    motion: number;\n    skipped: boolean;\n    timestamp: number;\n}\n\nexport interface IPipeline {\n    onFrame(timestamp: number, maskNeeded?: boolean): Promise<IFrameInferenceResult>;\n    isLoaded(): boolean;\n    load(): Promise<void>;\n    destroy(): void;\n}\n\nexport class Pipeline implements IPipeline {\n    private generator?: MaskGenerator;\n    private renderer?: LadonRenderer;\n    private loaded = false;\n\n    private inputCanvasCtx: CanvasRenderingContext2D;\n    private lastMaskResult?: LadonOutput;\n\n    private frameQueue: Array<{ timestamp: number; frameData: FrameData }> = [];\n    private maskQueue: Array<{ timestamp: number; maskResult: LadonOutput }> = [];\n\n    private frameDataBuffer?: Uint8ClampedArray;\n\n    constructor(\n        private inputCanvas: HTMLCanvasElement,\n        private outputCanvas: HTMLCanvasElement,\n        public readonly config: PipelineConfig,\n        private readonly videoElement?: HTMLVideoElement\n    ) {\n        const inputCanvasCtx = this.inputCanvas.getContext('2d', {\n            alpha: false,\n            willReadFrequently: true,\n        });\n\n        if (!inputCanvasCtx) {\n            throw new Error('[ladon-ts] - error getting input context 2d');\n        }\n        this.inputCanvasCtx = inputCanvasCtx;\n    }\n\n    /**\n     * Processes a single frame and returns the inference result.\n     *\n     * @param timestamp - The timestamp of the frame.\n     * @param performInference - Flag to perform mask inference.\n     * @returns The result of the frame processing.\n     * @throws If the pipeline (generator or renderer) is not loaded.\n     */\n    public async onFrame(\n        timestamp: number,\n        performInference = true\n    ): Promise<IFrameInferenceResult> {\n        if (!this.generator || !this.renderer) {\n            throw new Error('[ladon-ts] - pipeline is not loaded.');\n        }\n\n        // Get the current frame (raw image data or video element)\n        const frameData = this.getInputFrameData(performInference);\n\n        // Reuse or create buffer for frame data copies, which is needed to ensure the data is not modified\n        // or garbage collected before the inference is done.\n        if (frameData instanceof Uint8ClampedArray) {\n            if (!this.frameDataBuffer || this.frameDataBuffer.length !== frameData.length) {\n                this.frameDataBuffer = new Uint8ClampedArray(frameData.length);\n            }\n            this.frameDataBuffer.set(frameData);\n            this.frameQueue.push({ timestamp, frameData: this.frameDataBuffer });\n        } else {\n            // For video elements, just pass the reference\n            this.frameQueue.push({ timestamp, frameData });\n        }\n\n        if (performInference || !this.lastMaskResult) {\n            // Perform inference and add the new mask to the mask queue\n            const rawImageData = frameData as Uint8ClampedArray;\n            const maskImageData = this.getMaskImageData(rawImageData);\n            const maskResult = await this.generator.getLadonOutput(maskImageData, timestamp);\n            // Add the mask to the queue and use the mask timestamp to sync frames and masks.\n            this.maskQueue.push({ timestamp: maskResult.timestamp, maskResult });\n            this.lastMaskResult = maskResult;\n\n            // Sync frames and masks to render together\n            await this.renderSyncedFrameAndMask();\n\n            // Post-process the mask after rendering\n            await this.generator.postRender(maskImageData, timestamp);\n        } else {\n            // Skipping inference. Update the last mask result's timestamp to match the current frame.\n            this.maskQueue.push({ timestamp, maskResult: this.lastMaskResult });\n            // Sync frames and masks to render together\n            await this.renderSyncedFrameAndMask();\n        }\n\n        // Return the inference result\n        return this.createInferenceResult(timestamp, performInference);\n    }\n\n    /**\n     * Synchronizes frames and masks to ensure they are rendered together.\n     */\n    private async renderSyncedFrameAndMask(): Promise<void> {\n        while (this.frameQueue.length > 0 && this.maskQueue.length > 0) {\n            const frame = this.frameQueue[0];\n            const maskEntry = this.maskQueue[0];\n\n            if (frame.timestamp === maskEntry.timestamp) {\n                // Render the frame and mask together\n                await this.renderer?.render(frame.frameData, maskEntry.maskResult);\n                this.frameQueue.shift();\n                this.maskQueue.shift();\n            } else if (frame.timestamp < maskEntry.timestamp) {\n                // Discard the older frame\n                this.frameQueue.shift();\n            } else {\n                // Discard the older mask\n                this.maskQueue.shift();\n            }\n        }\n    }\n\n    /**\n     * Gets the raw image data from the input canvas context.\n     *\n     * @param needFreshImageData - Flag to indicate if fresh image data is needed.\n     *\n     * @returns The raw image data.\n     */\n    private getInputFrameData(needFreshImageData: boolean): FrameData {\n        if (needFreshImageData || !this.videoElement) {\n            return this.inputCanvasCtx.getImageData(\n                0,\n                0,\n                this.config.input.width,\n                this.config.input.height\n            ).data;\n        }\n\n        return this.videoElement;\n    }\n\n    /**\n     * Resizes the image data if the model expects a fixed size input.\n     *\n     * @param {Uint8ClampedArray} rawImageData - The raw image data.\n     * @returns {Uint8ClampedArray} - The processed mask image data.\n     */\n    private getMaskImageData(rawImageData: Uint8ClampedArray): Uint8ClampedArray {\n        // Check if resizing is needed based on configuration.\n        if (this.config.mask.inputSize.width === this.config.input.width) {\n            return rawImageData;\n        }\n\n        // Resize the image data.\n        return resizeImage(\n            rawImageData,\n            this.config.input.width,\n            this.config.input.height,\n            this.config.mask.inputSize.width,\n            this.config.mask.inputSize.height\n        );\n    }\n\n    /**\n     * Creates the inference result object.\n     *\n     * @param {number} timestamp - The timestamp of the frame.\n     * @param {boolean} performedInference - Indicates if the inference was performed.\n     * @returns {IFrameInferenceResult} - The result object containing inference details.\n     */\n    private createInferenceResult(\n        timestamp: number,\n        performedInference: boolean\n    ): IFrameInferenceResult {\n        if (!this.lastMaskResult) {\n            return {\n                facesAndLandmarks: { data: new Float32Array(0), dims: [] },\n                gesture: new Float32Array(0),\n                motion: 0,\n                skipped: true,\n                timestamp,\n            };\n        }\n\n        return {\n            facesAndLandmarks: this.lastMaskResult.facesAndLandmarks,\n            gesture: this.lastMaskResult.gesture,\n            motion: this.lastMaskResult.motion,\n            skipped: !performedInference,\n            timestamp,\n        };\n    }\n\n    /**\n     * Checks if the pipeline is loaded.\n     *\n     * @returns True if the pipeline is loaded, false otherwise.\n     */\n    public isLoaded(): boolean {\n        return this.loaded;\n    }\n\n    /**\n     * Loads the pipeline components such as the generator and renderer.\n     */\n    public async load(): Promise<void> {\n        switch (this.config.render.type) {\n            case 'blur':\n                this.renderer = new BlurRenderer(this.outputCanvas, this.config);\n                break;\n            case 'passthrough':\n                this.renderer = new PassthroughRenderer(this.outputCanvas, this.config);\n                break;\n            case 'replacement':\n                this.renderer = new ReplacementRenderer(this.outputCanvas, this.config);\n                break;\n            default:\n                throw new Error('[ladon-ts] - renderer not implemented.');\n        }\n\n        await this.renderer.load();\n\n        switch (this.config.mask.generator) {\n            case 'local':\n                this.generator = new LocalGenerator(this.config);\n                break;\n            case 'worker':\n                this.generator = new WorkerGenerator(this.config);\n                break;\n            default:\n                throw new Error('[ladon-ts] - generator not implemented.');\n        }\n\n        await this.generator.load();\n\n        this.loaded = true;\n    }\n\n    /**\n     * Resets the frame and mask queues.\n     */\n    private resetQueues(): void {\n        this.frameQueue = [];\n        this.maskQueue = [];\n    }\n\n    public reset(): void {\n        this.resetQueues();\n        this.lastMaskResult = undefined;\n    }\n\n    /**\n     * Destroys the pipeline and cleans up resources.\n     */\n    public destroy(): void {\n        this.reset();\n        this.generator?.destroy();\n        this.renderer?.destroy();\n        this.frameDataBuffer = undefined;\n    }\n}\n"],"names":["Pipeline","inputCanvas","outputCanvas","config","videoElement","inputCanvasCtx","timestamp","performInference","frameData","rawImageData","maskImageData","maskResult","frame","maskEntry","_a","needFreshImageData","resizeImage","performedInference","BlurRenderer","PassthroughRenderer","ReplacementRenderer","LocalGenerator","WorkerGenerator","_b"],"mappings":"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"}

package/build/module/lib/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "5.4.4";
+export declare const LIB_VERSION = "5.4.5";

package/build/module/lib/version.js

@@ -1,4 +1,4 @@
-const o = "5.4.4";
+const o = "5.4.5";
 export {
   o as LIB_VERSION
 };

package/build/module/lib/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../../../src/lib/version.ts"],"sourcesContent":["export const LIB_VERSION = '5.4.4';\n"],"names":["LIB_VERSION"],"mappings":"AAAO,MAAMA,IAAc;"}
+{"version":3,"file":"version.js","sources":["../../../src/lib/version.ts"],"sourcesContent":["export const LIB_VERSION = '5.4.5';\n"],"names":["LIB_VERSION"],"mappings":"AAAO,MAAMA,IAAc;"}