@eyepop.ai/eyepop-render-2d 0.20.0 → 0.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +55 -37
  2. package/dist/eyepop.render2d.index.d.mts +54 -11
  3. package/dist/eyepop.render2d.index.d.ts +54 -11
  4. package/dist/eyepop.render2d.index.js +263 -75
  5. package/dist/eyepop.render2d.index.js.map +1 -1
  6. package/dist/eyepop.render2d.index.mjs +263 -75
  7. package/dist/eyepop.render2d.index.mjs.map +1 -1
  8. package/dist/eyepop.render2d.min.js +1 -1
  9. package/package.json +5 -3
package/README.md CHANGED
@@ -57,6 +57,7 @@ const example_image_path = 'examples/example.jpg';
57
57
  })();
58
58
  ```
59
59
  ### Browser
60
+
60
61
  ```html
61
62
  <!DOCTYPE html>
62
63
  <html lang="en">
@@ -66,25 +67,29 @@ const example_image_path = 'examples/example.jpg';
66
67
  </head>
67
68
  <body>
68
69
  <!-- ... -->
69
- <input type="file" id="my-file-chooser">
70
+ <input type="file" id="my-file-chooser">
70
71
  <!-- ... -->
71
- <canvas id="my-canvas"></canvas>
72
+ <canvas id="my-canvas"></canvas>
72
73
  <!-- ... -->
73
- <script>
74
- async uploadFile(event) {
74
+ <script>
75
+ async
76
+ uploadFile(event)
77
+ {
75
78
  const fileChooser = document.getElementById('my-file-chooser');
76
79
  const context = document.getElementById('my-canvas').getContext("2d");
77
80
  const renderer = Render2d.renderer(context);
78
-
79
- const endpoint = await EyePop.endpoint({ auth: { oAuth2: true }, popId: '< Pop Id>' }).connect();
81
+
82
+ const endpoint = await EyePop.workerEndpoint({auth: {oAuth2: true}, popId: '< Pop Id>'}).connect();
80
83
  endpoint.process({file: fileChooser.files[0]}).then(async (results) => {
81
84
  for await (let result of results) {
82
85
  renderer.draw(result);
83
86
  }
84
87
  });
85
88
  await endpoint.disconnect();
86
- });
87
- </script>
89
+ }
90
+ )
91
+ ;
92
+ </script>
88
93
  </body>
89
94
  </html>
90
95
 
@@ -97,64 +102,77 @@ Change this rendering behaviour by passing in rendering rule(s), e.g.:
97
102
  Render2d.renderer(context,[Render2.renderFace()]).draw(result);
98
103
  // ...
99
104
  ```
100
- Each rule has a `render` object and a `target` attribute. All prebuild render classes accept a
101
- JSONPath expression as `target` parameter to select which elements should be rendered from predictions.
105
+ Each rule has a `render` object and a `target` attribute. All prebuild render classes accept a JSONPath expression as `target` parameter to select which elements should be rendered from predictions.
102
106
  See [JSONPath expression](https://www.npmjs.com/package/jsonpath)
103
107
 
104
- Most prebuild render classes provide a reasonable default `target`.
108
+ Most prebuild render classes provide a reasonable defaults, as shown below.
105
109
  #### Rendering Bounding Boxes and Class Labels
110
+
106
111
  ```typescript
107
- Render2d.renderBox({target: '$.objects.*'})
108
- // or
109
- Render2d.renderBox()
112
+ Render2d.renderBox({
113
+ showClass = true,
114
+ showConfidence = false,
115
+ showTraceId = false,
116
+ showNestedClasses = false,
117
+ target = '$..objects.*'
118
+ })
110
119
  ```
111
120
  #### Render Human Body Poses (2d or 3d)
112
121
  ```typescript
113
- Render2d.renderPose({target: '$..objects[?(@.category=="person")]'})
114
- // or
115
- Render2d.renderPose()
122
+ Render2d.renderPose({
123
+ target: '$..objects[?(@.category=="person")]'
124
+ })
116
125
  ```
117
126
  #### Render Human Hand Details
118
127
  ```typescript
119
- Render2d.renderHand({target: '$..objects[?(@.classLabel=="hand circumference")]'})
120
- // or
121
- Render2d.renderHand()
128
+ Render2d.renderHand({
129
+ target: '$..objects[?(@.classLabel=="hand circumference")]'
130
+ })
122
131
  ```
123
132
  #### Render Human Faces
124
133
  ```typescript
125
- Render2d.renderFace({target: '$..objects[?(@.classLabel=="face")]'})
126
- // or
127
- Render2d.renderFace()
134
+ Render2d.renderFace({
135
+ showLabels = false,
136
+ target = '$..objects[?(@.classLabel=="face")]'
137
+ })
138
+ ```
139
+ #### Render Text (OCR Overlay)
140
+ ```typescript
141
+ Render2d.renderText({
142
+ target: '$..objects[?(@.classLabel=="text")]'
143
+ })
128
144
  ```
129
145
  #### Render Segmentation Masks
130
146
  ```typescript
131
- Render2d.renderMask({target: '$..objects[?(@.mask)]'})
132
- // or
133
- Render2d.renderMask()
147
+ Render2d.renderMask({
148
+ target: '$..objects[?(@.mask)]'
149
+ })
134
150
  ```
135
151
  #### Render Segmentation Contours
136
152
  ```typescript
137
- Render2d.renderContour({target: '$..objects[?(@.contours)]'})
138
- // or
139
- Render2d.renderContour()
153
+ Render2d.renderContour({
154
+ target: '$..objects[?(@.contours)]'
155
+ })
140
156
  ```
141
157
  #### Blur an Object (TODO does black-put instead of blur)
142
158
  ```typescript
143
- Render2d.renderBlur({target: '$..objects[?(@.classLabel=="face")]'})
159
+ Render2d.renderBlur({
160
+ target: '$..objects[?(@.classLabel=="face")]'
161
+ })
144
162
  ```
145
163
  #### Render a Trail of a traced object over time
146
164
  ```typescript
147
- Render2d.renderTrail({target: '$..objects[?(@.traceId)]', trailLengthSeconds:1})
148
- // or
149
- Render2d.renderTrail()
165
+ Render2d.renderTrail({
166
+ target: '$..objects[?(@.traceId)]',
167
+ trailLengthSeconds:1,
168
+ })
150
169
  ```
151
- By default, this traces the mid-point of the object's bounding box. Instead, one can also draw trails of
152
- sub-objects or key points of the traced object. Use the optional parameter `traceDetails` for this purpose.
170
+ By default, this traces the mid-point of the object's bounding box. Instead, one can also draw trails of sub-objects or key points of the traced object. Use the optional parameter `traceDetails` for this purpose.
153
171
  E.g. trail the nose of every traced person:
154
172
  ```typescript
155
173
  Render2d.renderTrail({
156
- target: '$..objects[?(@.traceId)]',
157
- trailLengthSeconds:1,
174
+ target: '$..objects[?(@.traceId)]',
175
+ trailLengthSeconds:1,
158
176
  traceDetails:'$..keyPoints[?(@.category=="3d-body-points")].points[?(@.classLabel.includes("nose"))]'
159
177
  })
160
178
  ```
package/dist/eyepop.render2d.index.d.mts CHANGED
@@ -15,6 +15,8 @@ declare class Style {
15
15
  font: string;
16
16
  colors: Colors;
17
17
  scale: number;
18
+ cornerWidth: number;
19
+ cornerPadding: number;
18
20
  private static defaultColors;
19
21
  constructor(context: CanvasRenderingContext2D);
20
22
  private calculateFont;
@@ -26,23 +28,64 @@ interface RenderTarget {
26
28
  }
27
29
  interface Render extends RenderTarget {
28
30
  start(context: CanvasRenderingContext2D, style: Style): void;
29
- draw(element: any, xOffset: number, yOffset: number, xScale: number, yScale: number, streamTime: StreamTime): void;
31
+ draw(element: any, xOffset: number, yOffset: number, xScale: number, yScale: number, streamTime: StreamTime, color?: string): void;
30
32
  }
31
33
 
34
+ type RenderBlurOptions = {} & RenderTarget;
35
+
36
+ declare enum BoxType {
37
+ Rich = "rich",
38
+ Simple = "simple"
39
+ }
40
+ type RenderBoxOptions = {
41
+ showClass?: boolean;
42
+ showNestedClasses?: boolean;
43
+ showConfidence?: boolean;
44
+ showTraceId?: boolean;
45
+ boxType?: BoxType;
46
+ } & RenderTarget;
47
+
48
+ type RenderFaceOptions = {
49
+ showLabels: boolean;
50
+ } & RenderTarget;
51
+
52
+ type RenderHandOptions = {} & RenderTarget;
53
+
54
+ type RenderPoseOptions = {} & RenderTarget;
55
+
56
+ type RenderTrailOptions = {
57
+ trailLengthSeconds: number;
58
+ traceDetails?: string | undefined;
59
+ } & RenderTarget;
60
+
61
+ type RenderMaskOptions = {} & RenderTarget;
62
+
63
+ type RenderContourOptions = {} & RenderTarget;
64
+
65
+ type RenderKeyPointsOptions = {
66
+ showLabels: boolean;
67
+ } & RenderTarget;
68
+
69
+ type RenderTextOptions = {
70
+ showText: boolean;
71
+ fitToBounds: boolean;
72
+ } & RenderTarget;
73
+
32
74
  interface Renderer extends RenderTarget {
33
- draw(p: Prediction): void;
75
+ draw(p: Prediction, color?: string): void;
34
76
  }
35
77
  declare namespace Render2d {
36
78
  function renderer(context: CanvasRenderingContext2D, rules?: Render[] | undefined): Renderer;
37
- function renderBlur(target: string): Render;
38
- function renderBox(showClass?: boolean, showText?: boolean, showConfidence?: boolean, showTraceId?: boolean, showNestedClasses?: boolean, target?: string): Render;
39
- function renderMask(target?: string): Render;
40
- function renderContour(target?: string): Render;
41
- function renderFace(target?: string): Render;
42
- function renderKeypoints(target?: string): Render;
43
- function renderHand(target?: string): Render;
44
- function renderPose(target?: string): Render;
45
- function renderTrail(trailLengthSeconds?: number, traceDetails?: string | undefined, target?: string): Render;
79
+ function renderBlur(options?: Partial<RenderBlurOptions>): Render;
80
+ function renderBox(options?: Partial<RenderBoxOptions>): Render;
81
+ function renderMask(options?: Partial<RenderMaskOptions>): Render;
82
+ function renderContour(options?: Partial<RenderContourOptions>): Render;
83
+ function renderFace(options?: Partial<RenderFaceOptions>): Render;
84
+ function renderKeypoints(options?: Partial<RenderKeyPointsOptions>): Render;
85
+ function renderHand(options?: Partial<RenderHandOptions>): Render;
86
+ function renderPose(options?: Partial<RenderPoseOptions>): Render;
87
+ function renderText(options?: Partial<RenderTextOptions>): Render;
88
+ function renderTrail(options?: Partial<RenderTrailOptions>): Render;
46
89
  }
47
90
 
48
91
  export { Render2d, type Renderer, Render2d as default };
package/dist/eyepop.render2d.index.d.ts CHANGED
@@ -15,6 +15,8 @@ declare class Style {
15
15
  font: string;
16
16
  colors: Colors;
17
17
  scale: number;
18
+ cornerWidth: number;
19
+ cornerPadding: number;
18
20
  private static defaultColors;
19
21
  constructor(context: CanvasRenderingContext2D);
20
22
  private calculateFont;
@@ -26,23 +28,64 @@ interface RenderTarget {
26
28
  }
27
29
  interface Render extends RenderTarget {
28
30
  start(context: CanvasRenderingContext2D, style: Style): void;
29
- draw(element: any, xOffset: number, yOffset: number, xScale: number, yScale: number, streamTime: StreamTime): void;
31
+ draw(element: any, xOffset: number, yOffset: number, xScale: number, yScale: number, streamTime: StreamTime, color?: string): void;
30
32
  }
31
33
 
34
+ type RenderBlurOptions = {} & RenderTarget;
35
+
36
+ declare enum BoxType {
37
+ Rich = "rich",
38
+ Simple = "simple"
39
+ }
40
+ type RenderBoxOptions = {
41
+ showClass?: boolean;
42
+ showNestedClasses?: boolean;
43
+ showConfidence?: boolean;
44
+ showTraceId?: boolean;
45
+ boxType?: BoxType;
46
+ } & RenderTarget;
47
+
48
+ type RenderFaceOptions = {
49
+ showLabels: boolean;
50
+ } & RenderTarget;
51
+
52
+ type RenderHandOptions = {} & RenderTarget;
53
+
54
+ type RenderPoseOptions = {} & RenderTarget;
55
+
56
+ type RenderTrailOptions = {
57
+ trailLengthSeconds: number;
58
+ traceDetails?: string | undefined;
59
+ } & RenderTarget;
60
+
61
+ type RenderMaskOptions = {} & RenderTarget;
62
+
63
+ type RenderContourOptions = {} & RenderTarget;
64
+
65
+ type RenderKeyPointsOptions = {
66
+ showLabels: boolean;
67
+ } & RenderTarget;
68
+
69
+ type RenderTextOptions = {
70
+ showText: boolean;
71
+ fitToBounds: boolean;
72
+ } & RenderTarget;
73
+
32
74
  interface Renderer extends RenderTarget {
33
- draw(p: Prediction): void;
75
+ draw(p: Prediction, color?: string): void;
34
76
  }
35
77
  declare namespace Render2d {
36
78
  function renderer(context: CanvasRenderingContext2D, rules?: Render[] | undefined): Renderer;
37
- function renderBlur(target: string): Render;
38
- function renderBox(showClass?: boolean, showText?: boolean, showConfidence?: boolean, showTraceId?: boolean, showNestedClasses?: boolean, target?: string): Render;
39
- function renderMask(target?: string): Render;
40
- function renderContour(target?: string): Render;
41
- function renderFace(target?: string): Render;
42
- function renderKeypoints(target?: string): Render;
43
- function renderHand(target?: string): Render;
44
- function renderPose(target?: string): Render;
45
- function renderTrail(trailLengthSeconds?: number, traceDetails?: string | undefined, target?: string): Render;
79
+ function renderBlur(options?: Partial<RenderBlurOptions>): Render;
80
+ function renderBox(options?: Partial<RenderBoxOptions>): Render;
81
+ function renderMask(options?: Partial<RenderMaskOptions>): Render;
82
+ function renderContour(options?: Partial<RenderContourOptions>): Render;
83
+ function renderFace(options?: Partial<RenderFaceOptions>): Render;
84
+ function renderKeypoints(options?: Partial<RenderKeyPointsOptions>): Render;
85
+ function renderHand(options?: Partial<RenderHandOptions>): Render;
86
+ function renderPose(options?: Partial<RenderPoseOptions>): Render;
87
+ function renderText(options?: Partial<RenderTextOptions>): Render;
88
+ function renderTrail(options?: Partial<RenderTrailOptions>): Render;
46
89
  }
47
90
 
48
91
  export { Render2d, type Renderer, Render2d as default };