@eyepop.ai/eyepop-render-2d 3.17.3 → 3.19.0

package/README.md

@@ -141,7 +141,7 @@ Most prebuild render classes provide a reasonable defaults, as shown below.
 Render2d.renderBox({
     showClass: true,
     showConfidence: false,
-    showTraceId: false,
+    showTrackId: false,
     showNestedClasses: false,
     target: '$..objects.*',
 })
@@ -180,6 +180,29 @@ Render2d.renderText({
 })
 ```
 
+#### Render Classification Labels
+
+Renders whole-image classification labels. Defaults shown:
+
+```typescript
+Render2d.renderClasses({
+    showConfidence: false,
+    labelSizePercentage: 0.05,
+    target: '$',
+})
+```
+
+#### Render Key Points
+
+Renders key points for any object that carries them. Defaults shown:
+
+```typescript
+Render2d.renderKeypoints({
+    showLabels: false,
+    target: '$..objects[?(@.keyPoints)]',
+})
+```
+
 #### Render Segmentation Masks
 
 ```typescript
@@ -196,7 +219,21 @@ Render2d.renderContour({
 })
 ```
 
-#### Blur an Object (TODO does black-put instead of blur)
+#### Render Depth Maps
+
+Renders the frame-level depth map produced by depth estimation abilities (e.g. `eyepop.depth.*`)
+as a turbo-colormap heatmap blended over the frame: near = warm (red/yellow), far = cool (blue).
+Sky pixels (+Infinity) leave the frame untouched unless `renderSky` is set.
+
+```typescript
+Render2d.renderDepth({
+    target: '$',
+    opacity: 0.5, // overlay opacity over the underlying frame
+    renderSky: false, // also paint sky pixels
+})
+```
+
+#### Blur an Object
 
 ```typescript
 Render2d.renderBlur({
@@ -204,6 +241,8 @@ Render2d.renderBlur({
 })
 ```
 
+Note: this currently paints a solid fill over the object rather than applying a true blur.
+
 #### Render a Trail of a traced object over time
 
 ```typescript

package/dist/eyepop.render2d.index.d.mts

@@ -220,6 +220,29 @@ declare class RenderClasses implements Render {
     drawLabel(label: string, context: CanvasRenderingContext2D, xOffset: number, yOffset: number, style: Style, drawDisabled: boolean, xPadding: number, yPadding: number, labelWidth: number, labelHeight: number, borderRadius: number): void;
 }
 
+type RenderDepthOptions = {
+    opacity?: number;
+    renderSky?: boolean;
+} & RenderTarget;
+/**
+ * Renders a frame-level depth map (Prediction.depth) as a turbo-colormap
+ * heatmap blended over the frame: near = warm (red/yellow), far = cool (blue).
+ * Sky pixels (+Infinity) leave the frame untouched unless renderSky is set.
+ *
+ * Uses getImageData/putImageData only, so it works with node-canvas as well
+ * as browser and react-native canvases.
+ */
+declare class RenderDepth implements Render {
+    target: string;
+    private context;
+    private style;
+    private readonly opacity;
+    private readonly renderSky;
+    constructor(options?: Partial<RenderDepthOptions>);
+    start(context: CanvasRenderingContext2D, style: Style): void;
+    draw(element: Prediction, xOffset: number, yOffset: number, xScale: number, yScale: number, streamTime: StreamTime, color?: string): void;
+}
+
 type Renderer2dOptions = {
     context: CanvasRenderingContext2D;
     rules?: Render[] | Render | undefined;
@@ -244,6 +267,7 @@ declare namespace Render2d {
     function renderClasses(options?: Partial<RenderClassesOptions>): Render;
     function renderMask(options?: Partial<RenderMaskOptions>): Render;
     function renderContour(options?: Partial<RenderContourOptions>): Render;
+    function renderDepth(options?: Partial<RenderDepthOptions>): Render;
     function renderFace(options?: Partial<RenderFaceOptions>): Render;
     function renderKeypoints(options?: Partial<RenderKeyPointsOptions>): Render;
     function renderHand(options?: Partial<RenderHandOptions>): Render;
@@ -252,4 +276,4 @@ declare namespace Render2d {
     function renderTrail(options?: Partial<RenderTrailOptions>): Render;
 }
 
-export { BoxType, type ClassificationProperties, DEFAULT_TARGET, type Render, Render2d, RenderBlur, type RenderBlurOptions, RenderBox, type RenderBoxOptions, RenderClasses, type RenderClassesOptions, RenderContour, type RenderContourOptions, RenderFace, type RenderFaceOptions, RenderHand, type RenderHandOptions, RenderKeyPoints, type RenderKeyPointsOptions, RenderMask, type RenderMaskOptions, RenderPose, type RenderPoseOptions, type RenderTarget, RenderText, type RenderTextOptions, RenderTrail, type RenderTrailOptions, type Renderer, Renderer2d, type Renderer2dOptions, Render2d as default };
+export { BoxType, type ClassificationProperties, DEFAULT_TARGET, type Render, Render2d, RenderBlur, type RenderBlurOptions, RenderBox, type RenderBoxOptions, RenderClasses, type RenderClassesOptions, RenderContour, type RenderContourOptions, RenderDepth, type RenderDepthOptions, RenderFace, type RenderFaceOptions, RenderHand, type RenderHandOptions, RenderKeyPoints, type RenderKeyPointsOptions, RenderMask, type RenderMaskOptions, RenderPose, type RenderPoseOptions, type RenderTarget, RenderText, type RenderTextOptions, RenderTrail, type RenderTrailOptions, type Renderer, Renderer2d, type Renderer2dOptions, Render2d as default };

package/dist/eyepop.render2d.index.d.ts

@@ -220,6 +220,29 @@ declare class RenderClasses implements Render {
     drawLabel(label: string, context: CanvasRenderingContext2D, xOffset: number, yOffset: number, style: Style, drawDisabled: boolean, xPadding: number, yPadding: number, labelWidth: number, labelHeight: number, borderRadius: number): void;
 }
 
+type RenderDepthOptions = {
+    opacity?: number;
+    renderSky?: boolean;
+} & RenderTarget;
+/**
+ * Renders a frame-level depth map (Prediction.depth) as a turbo-colormap
+ * heatmap blended over the frame: near = warm (red/yellow), far = cool (blue).
+ * Sky pixels (+Infinity) leave the frame untouched unless renderSky is set.
+ *
+ * Uses getImageData/putImageData only, so it works with node-canvas as well
+ * as browser and react-native canvases.
+ */
+declare class RenderDepth implements Render {
+    target: string;
+    private context;
+    private style;
+    private readonly opacity;
+    private readonly renderSky;
+    constructor(options?: Partial<RenderDepthOptions>);
+    start(context: CanvasRenderingContext2D, style: Style): void;
+    draw(element: Prediction, xOffset: number, yOffset: number, xScale: number, yScale: number, streamTime: StreamTime, color?: string): void;
+}
+
 type Renderer2dOptions = {
     context: CanvasRenderingContext2D;
     rules?: Render[] | Render | undefined;
@@ -244,6 +267,7 @@ declare namespace Render2d {
     function renderClasses(options?: Partial<RenderClassesOptions>): Render;
     function renderMask(options?: Partial<RenderMaskOptions>): Render;
     function renderContour(options?: Partial<RenderContourOptions>): Render;
+    function renderDepth(options?: Partial<RenderDepthOptions>): Render;
     function renderFace(options?: Partial<RenderFaceOptions>): Render;
     function renderKeypoints(options?: Partial<RenderKeyPointsOptions>): Render;
     function renderHand(options?: Partial<RenderHandOptions>): Render;
@@ -252,4 +276,4 @@ declare namespace Render2d {
     function renderTrail(options?: Partial<RenderTrailOptions>): Render;
 }
 
-export { BoxType, type ClassificationProperties, DEFAULT_TARGET, type Render, Render2d, RenderBlur, type RenderBlurOptions, RenderBox, type RenderBoxOptions, RenderClasses, type RenderClassesOptions, RenderContour, type RenderContourOptions, RenderFace, type RenderFaceOptions, RenderHand, type RenderHandOptions, RenderKeyPoints, type RenderKeyPointsOptions, RenderMask, type RenderMaskOptions, RenderPose, type RenderPoseOptions, type RenderTarget, RenderText, type RenderTextOptions, RenderTrail, type RenderTrailOptions, type Renderer, Renderer2d, type Renderer2dOptions, Render2d as default };
+export { BoxType, type ClassificationProperties, DEFAULT_TARGET, type Render, Render2d, RenderBlur, type RenderBlurOptions, RenderBox, type RenderBoxOptions, RenderClasses, type RenderClassesOptions, RenderContour, type RenderContourOptions, RenderDepth, type RenderDepthOptions, RenderFace, type RenderFaceOptions, RenderHand, type RenderHandOptions, RenderKeyPoints, type RenderKeyPointsOptions, RenderMask, type RenderMaskOptions, RenderPose, type RenderPoseOptions, type RenderTarget, RenderText, type RenderTextOptions, RenderTrail, type RenderTrailOptions, type Renderer, Renderer2d, type Renderer2dOptions, Render2d as default };

package/dist/eyepop.render2d.index.js

@@ -37,6 +37,7 @@ __export(index_exports, {
   RenderBox: () => RenderBox,
   RenderClasses: () => RenderClasses,
   RenderContour: () => RenderContour,
+  RenderDepth: () => RenderDepth,
   RenderFace: () => RenderFace,
   RenderHand: () => RenderHand,
   RenderKeyPoints: () => RenderKeyPoints,
@@ -4201,6 +4202,121 @@ var RenderClasses = class {
   }
 };
 
+// render-depth.ts
+var TURBO_ANCHORS = [
+  [48, 18, 59],
+  [62, 86, 196],
+  [33, 145, 237],
+  [26, 192, 181],
+  [94, 223, 105],
+  [181, 229, 54],
+  [243, 192, 52],
+  [246, 117, 26],
+  [122, 4, 3]
+];
+var SKY_COLOR = [48, 18, 59];
+var isLittleEndianPlatform = new Uint8Array(new Uint16Array([1]).buffer)[0] === 1;
+function decodeDepthValues(base64, width, height) {
+  if (!Number.isSafeInteger(width) || width <= 0 || !Number.isSafeInteger(height) || height <= 0 || !Number.isSafeInteger(width * height * 4)) {
+    throw new Error(`invalid depth dimensions: ${width}x${height}`);
+  }
+  const count = width * height;
+  const buffer = Buffer.from(base64, "base64");
+  if (buffer.byteLength !== count * 4) {
+    throw new Error(`depth values hold ${buffer.byteLength} bytes, expected ${count * 4} float32 bytes`);
+  }
+  if (isLittleEndianPlatform) {
+    const aligned = new Uint8Array(buffer);
+    return new Float32Array(aligned.buffer, 0, count);
+  }
+  const view = new DataView(buffer.buffer, buffer.byteOffset, buffer.byteLength);
+  const values = new Float32Array(count);
+  for (let i = 0; i < count; i++) {
+    values[i] = view.getFloat32(i * 4, true);
+  }
+  return values;
+}
+function turboColor(position) {
+  const scaled = Math.min(Math.max(position, 0), 1) * (TURBO_ANCHORS.length - 1);
+  const lower = Math.floor(scaled);
+  const upper = Math.min(lower + 1, TURBO_ANCHORS.length - 1);
+  const fraction = scaled - lower;
+  return [
+    TURBO_ANCHORS[lower][0] * (1 - fraction) + TURBO_ANCHORS[upper][0] * fraction,
+    TURBO_ANCHORS[lower][1] * (1 - fraction) + TURBO_ANCHORS[upper][1] * fraction,
+    TURBO_ANCHORS[lower][2] * (1 - fraction) + TURBO_ANCHORS[upper][2] * fraction
+  ];
+}
+var RenderDepth = class {
+  constructor(options = {}) {
+    this.target = "$";
+    const { target = "$", opacity = 0.5, renderSky = false } = options;
+    this.target = target;
+    this.opacity = Math.min(Math.max(opacity, 0), 1);
+    this.renderSky = renderSky;
+  }
+  start(context, style) {
+    this.context = context;
+    this.style = style;
+  }
+  draw(element, xOffset, yOffset, xScale, yScale, streamTime, color) {
+    const context = this.context;
+    if (!context || !this.style) {
+      throw new Error("render() called before start()");
+    }
+    if (!element.depth) {
+      return;
+    }
+    const depthWidth = element.depth.width;
+    const depthHeight = element.depth.height;
+    const values = decodeDepthValues(element.depth.values, depthWidth, depthHeight);
+    const destWidth = Math.round(element.source_width * xScale);
+    const destHeight = Math.round(element.source_height * yScale);
+    if (destWidth <= 0 || destHeight <= 0) {
+      return;
+    }
+    let finiteMin = Number.POSITIVE_INFINITY;
+    let finiteMax = Number.NEGATIVE_INFINITY;
+    for (let i = 0; i < values.length; i++) {
+      const value = values[i];
+      if (Number.isFinite(value)) {
+        if (value < finiteMin) finiteMin = value;
+        if (value > finiteMax) finiteMax = value;
+      }
+    }
+    const span = finiteMax > finiteMin ? finiteMax - finiteMin : 1;
+    const dest = context.getImageData(xOffset, yOffset, destWidth, destHeight);
+    const pixels = dest.data;
+    for (let y = 0; y < destHeight; y++) {
+      const mapY = Math.min(Math.floor(y * depthHeight / destHeight), depthHeight - 1);
+      const mapRow = mapY * depthWidth;
+      for (let x = 0; x < destWidth; x++) {
+        const mapX = Math.min(Math.floor(x * depthWidth / destWidth), depthWidth - 1);
+        const value = values[mapRow + mapX];
+        let heat;
+        if (Number.isFinite(value)) {
+          const normalized = Number.isFinite(finiteMin) ? (value - finiteMin) / span : 0;
+          heat = turboColor(1 - normalized);
+        } else if (this.renderSky) {
+          heat = SKY_COLOR;
+        } else {
+          continue;
+        }
+        const index = (y * destWidth + x) * 4;
+        const destinationAlpha = pixels[index + 3] / 255 * (1 - this.opacity);
+        const outAlpha = this.opacity + destinationAlpha;
+        if (outAlpha > 0) {
+          pixels[index] = Math.round((heat[0] * this.opacity + pixels[index] * destinationAlpha) / outAlpha);
+          pixels[index + 1] = Math.round((heat[1] * this.opacity + pixels[index + 1] * destinationAlpha) / outAlpha);
+          pixels[index + 2] = Math.round((heat[2] * this.opacity + pixels[index + 2] * destinationAlpha) / outAlpha);
+        }
+        pixels[index + 3] = Math.round(outAlpha * 255);
+      }
+    }
+    context.putImageData(dest, xOffset, yOffset);
+  }
+};
+
 // index.ts
 var Render2d;
 ((Render2d2) => {
@@ -4228,6 +4344,10 @@ var Render2d;
     return new RenderContour(options);
   }
   Render2d2.renderContour = renderContour;
+  function renderDepth(options = {}) {
+    return new RenderDepth(options);
+  }
+  Render2d2.renderDepth = renderDepth;
   function renderFace(options = {}) {
     return new RenderFace(options);
   }
@@ -4263,6 +4383,7 @@ var index_default = Render2d;
   RenderBox,
   RenderClasses,
   RenderContour,
+  RenderDepth,
   RenderFace,
   RenderHand,
   RenderKeyPoints,