@eyepop.ai/eyepop-render-2d 0.16.3 → 0.18.0

package/README.md

@@ -126,6 +126,18 @@ Render2d.renderFace(target = '$..objects[?(@.classLabel=="face")]')
 // or 
 Render2d.renderFace() 
 ```
+#### Render Segmentation Masks
+```typescript
+Render2d.renderMask(target = '$..objects[?(@.mask)]') 
+// or 
+Render2d.renderMask() 
+```
+#### Render Segmentation Contours
+```typescript
+Render2d.renderContour(target = '$..objects[?(@.contours)]') 
+// or 
+Render2d.renderContour() 
+```
 #### Blur an Object (TODO does black-put instead of blur)
 ```typescript
 Render2d.renderBlur(target = '$..objects[?(@.classLabel=="face")]')

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

@@ -1,61 +1,5 @@
+import { StreamTime, Prediction } from '@eyepop.ai/eyepop';
 import { CanvasRenderingContext2D } from 'canvas';
-import { StreamTime as StreamTime$1 } from '@eyepop.ai/eyepop';
-
-interface StreamTime {
-    timestamp: number;
-    seconds: number;
-    offset: number;
-}
-interface Prediction extends StreamTime {
-    source_width: number;
-    source_height: number;
-    source_id: string;
-    objects: Array<PredictedObject>;
-    classes: Array<PredictedClass>;
-    labels: Array<string>;
-    meshs: Array<PredictedMesh>;
-    keyPoints: Array<PredictedKeyPoints>;
-}
-interface PredictedClass {
-    id: number;
-    confidence: number;
-    classLabel: string;
-    category: string;
-}
-interface PredictedObject extends PredictedClass {
-    traceId: number | undefined;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    orientation: number;
-    outline: Array<Point2d>;
-    objects: Array<PredictedObject>;
-    classes: Array<PredictedClass>;
-    labels: Array<string>;
-    meshs: Array<PredictedMesh>;
-    keyPoints: Array<PredictedKeyPoints>;
-}
-interface Point2d {
-    x: number;
-    y: number;
-}
-interface PredictedMesh {
-    category: string;
-    id: number;
-    confidence: number;
-    points: Array<Point3d>;
-}
-interface Point3d extends Point2d {
-    z: number | undefined;
-}
-interface PredictedKeyPoints {
-    category: string;
-    type: string;
-    points: Array<PredictedKeyPoint>;
-}
-interface PredictedKeyPoint extends Point3d, PredictedClass {
-}
 
 interface Colors {
     primary_color: string;
@@ -77,7 +21,7 @@ declare class Style {
 
 interface Render {
     start(context: CanvasRenderingContext2D, style: Style): void;
-    draw(element: any, xOffset: number, yOffset: number, xScale: number, yScale: number, streamTime: StreamTime$1): void;
+    draw(element: any, xOffset: number, yOffset: number, xScale: number, yScale: number, streamTime: StreamTime): void;
 }
 
 interface RenderRule {
@@ -92,6 +36,8 @@ declare namespace Render2d {
     function renderer(context: CanvasRenderingContext2D, rules?: RenderRule[] | undefined): Renderer;
     function renderBlur(target: string): RenderRule;
     function renderBox(includeSecondaryLabels?: boolean, target?: string): RenderRule;
+    function renderMask(target?: string): RenderRule;
+    function renderContour(target?: string): RenderRule;
     function renderFace(target?: string): RenderRule;
     function renderHand(target?: string): RenderRule;
     function renderPose(target?: string): RenderRule;

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

@@ -1,61 +1,5 @@
+import { StreamTime, Prediction } from '@eyepop.ai/eyepop';
 import { CanvasRenderingContext2D } from 'canvas';
-import { StreamTime as StreamTime$1 } from '@eyepop.ai/eyepop';
-
-interface StreamTime {
-    timestamp: number;
-    seconds: number;
-    offset: number;
-}
-interface Prediction extends StreamTime {
-    source_width: number;
-    source_height: number;
-    source_id: string;
-    objects: Array<PredictedObject>;
-    classes: Array<PredictedClass>;
-    labels: Array<string>;
-    meshs: Array<PredictedMesh>;
-    keyPoints: Array<PredictedKeyPoints>;
-}
-interface PredictedClass {
-    id: number;
-    confidence: number;
-    classLabel: string;
-    category: string;
-}
-interface PredictedObject extends PredictedClass {
-    traceId: number | undefined;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    orientation: number;
-    outline: Array<Point2d>;
-    objects: Array<PredictedObject>;
-    classes: Array<PredictedClass>;
-    labels: Array<string>;
-    meshs: Array<PredictedMesh>;
-    keyPoints: Array<PredictedKeyPoints>;
-}
-interface Point2d {
-    x: number;
-    y: number;
-}
-interface PredictedMesh {
-    category: string;
-    id: number;
-    confidence: number;
-    points: Array<Point3d>;
-}
-interface Point3d extends Point2d {
-    z: number | undefined;
-}
-interface PredictedKeyPoints {
-    category: string;
-    type: string;
-    points: Array<PredictedKeyPoint>;
-}
-interface PredictedKeyPoint extends Point3d, PredictedClass {
-}
 
 interface Colors {
     primary_color: string;
@@ -77,7 +21,7 @@ declare class Style {
 
 interface Render {
     start(context: CanvasRenderingContext2D, style: Style): void;
-    draw(element: any, xOffset: number, yOffset: number, xScale: number, yScale: number, streamTime: StreamTime$1): void;
+    draw(element: any, xOffset: number, yOffset: number, xScale: number, yScale: number, streamTime: StreamTime): void;
 }
 
 interface RenderRule {
@@ -92,6 +36,8 @@ declare namespace Render2d {
     function renderer(context: CanvasRenderingContext2D, rules?: RenderRule[] | undefined): Renderer;
     function renderBlur(target: string): RenderRule;
     function renderBox(includeSecondaryLabels?: boolean, target?: string): RenderRule;
+    function renderMask(target?: string): RenderRule;
+    function renderContour(target?: string): RenderRule;
     function renderFace(target?: string): RenderRule;
     function renderHand(target?: string): RenderRule;
     function renderPose(target?: string): RenderRule;

package/dist/eyepop.render2d.index.js

@@ -728,6 +728,117 @@ var RenderTrail = class {
   }
 };
 
+// render-mask.ts
+var RenderMask = class {
+  start(context, style) {
+    this.context = context;
+    this.style = style;
+  }
+  draw(element, xOffset, yOffset, xScale, yScale, streamTime) {
+    if (!element.mask) {
+      return;
+    }
+    const context = this.context;
+    const style = this.style;
+    if (!context || !style) {
+      throw new Error("render() called before start()");
+    }
+    const buffer = Buffer.from(element.mask.bitmap, "base64");
+    const offscreenCanvas = new OffscreenCanvas(element.mask.width, element.mask.height);
+    const offscreenContext = offscreenCanvas.getContext("2d");
+    if (!offscreenContext) {
+      throw new Error("cannot render a mask without offscreen context");
+    }
+    const aPixel = offscreenContext.createImageData(1, 1);
+    const d = aPixel.data;
+    d[0] = 80;
+    d[1] = 80;
+    d[2] = 80;
+    d[3] = 128;
+    for (let y = 0; y < element.mask.height; y++) {
+      const line = y * element.mask.stride;
+      for (let s = 0; s < element.mask.stride; s++) {
+        const byte = buffer[line + s];
+        for (let p = 0; p < 8; p++) {
+          const x = s * 8 + p;
+          if (x >= element.mask.width) {
+            break;
+          }
+          const bit = byte >> 7 - p % 8 & 1;
+          if (bit) {
+            offscreenContext.putImageData(aPixel, x, y);
+          }
+        }
+      }
+    }
+    const bitmap = offscreenCanvas.transferToImageBitmap();
+    context.drawImage(
+      // @ts-ignore - wouldn't work for node, but then we errored out above already
+      bitmap,
+      element.x + xOffset,
+      element.y + yOffset,
+      element.width * xScale,
+      element.height * yScale
+    );
+  }
+};
+
+// render-contour.ts
+var RenderContour = class {
+  start(context, style) {
+    this.context = context;
+    this.style = style;
+  }
+  draw(element, xOffset, yOffset, xScale, yScale, streamTime) {
+    if (!element.contours || !element.contours.length) {
+      return;
+    }
+    const context = this.context;
+    const style = this.style;
+    if (!context || !style) {
+      throw new Error("render() called before start()");
+    }
+    const lineWidth = Math.max(1, Math.max(context.canvas.width, context.canvas.height) / 360);
+    console.log("line width:", lineWidth, context.canvas.width, context.canvas.height);
+    for (let j = 0; j < element.contours.length; j++) {
+      const contour = element.contours[j];
+      if (contour.points.length < 2) {
+        continue;
+      }
+      context.beginPath();
+      context.lineWidth = lineWidth;
+      context.strokeStyle = style.colors.primary_color;
+      context.fillStyle = style.colors.opacity_color;
+      let p = contour.points[0];
+      context.moveTo(p.x * xScale + xOffset, p.y * yScale + yOffset);
+      for (let i = contour.points.length - 1; i > 0; i--) {
+        p = contour.points[i];
+        context.lineTo(p.x * xScale + xOffset, p.y * yScale + yOffset);
+      }
+      context.closePath();
+      context.stroke();
+      if (contour.cutouts && contour.cutouts.length) {
+        for (let k = 0; k < contour.cutouts.length; k++) {
+          const points = contour.cutouts[k];
+          if (points.length < 2) {
+            continue;
+          }
+          context.beginPath();
+          p = points[0];
+          context.moveTo(p.x * xScale + xOffset, p.y * yScale + yOffset);
+          for (let i = points.length - 1; i > 0; i--) {
+            p = points[i];
+            context.lineTo(p.x * xScale + xOffset, p.y * yScale + yOffset);
+          }
+          context.closePath();
+          context.stroke();
+        }
+      }
+      context.fill();
+    }
+  }
+};
+
 // index.ts
 var Render2d;
 ((Render2d2) => {
@@ -743,6 +854,14 @@ var Render2d;
     return { render: new RenderBox(includeSecondaryLabels), target };
   }
   Render2d2.renderBox = renderBox;
+  function renderMask(target = "$..objects[?(@.mask)]") {
+    return { render: new RenderMask(), target };
+  }
+  Render2d2.renderMask = renderMask;
+  function renderContour(target = "$..objects[?(@.contours)]") {
+    return { render: new RenderContour(), target };
+  }
+  Render2d2.renderContour = renderContour;
   function renderFace(target = '$..objects[?(@.classLabel=="face")]') {
     return { render: new RenderFace(), target };
   }