@eyepop.ai/eyepop-render-2d 0.15.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 (11) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +106 -0
  3. package/dist/eyepop.render2d.index.d.mts +70 -0
  4. package/dist/eyepop.render2d.index.d.ts +70 -0
  5. package/dist/eyepop.render2d.index.js +583 -0
  6. package/dist/eyepop.render2d.index.js.map +1 -0
  7. package/dist/eyepop.render2d.index.mjs +564 -0
  8. package/dist/eyepop.render2d.index.mjs.map +1 -0
  9. package/dist/eyepop.render2d.min.js +2 -0
  10. package/dist/eyepop.render2d.min.js.LICENSE.txt +1 -0
  11. package/package.json +37 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2023 EyePop.ai
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,106 @@
1
+ # EyePop.ai Render 2d Node Module
2
+ This EyePop.ai Node Module provides convenient 2d rendering functions for predictions returned by
3
+ to the EyePop.ai's inference API from applications written in the TypeScript or JavaScript language.
4
+
5
+ The module requires the [EyePop Node SDK](../eyepop/README.md)
6
+ ## Installation
7
+ ### Node
8
+ ```shell
9
+ npm install --save @eyepop.ai/eyepop @eyepop.ai/eyepop-render-2d
10
+ ```
11
+ ### Browser
12
+ ```html
13
+ <script src="https://cdn.jsdelivr.net/npm/@eyepop.ai/eyepop/dist/eyepop.min.js"></script>
14
+ <script src="https://cdn.jsdelivr.net/npm/@eyepop.ai/eyepop-render-2d/dist/eyepop.render2d.min.js"></script>
15
+ ```
16
+ ## Usage example
17
+ ### Node
18
+ This EyePop Node Module provides 2d rendering for predictions using `canvas.CanvasRenderingContext2D`.
19
+ ```typescript
20
+ import { EyePop } from '@eyepop.ai/eyepop';
21
+ import { Render2d } from '@eyepop.ai/eyepop-render-2d';
22
+
23
+ import {createCanvas, loadImage} from "canvas";
24
+ import {open} from 'openurl';
25
+ import { mkdtempSync, writeFileSync } from 'node:fs';
26
+ import { join } from 'node:path';
27
+ import { tmpdir } from 'node:os';
28
+
29
+ const example_image_path = 'examples/example.jpg';
30
+
31
+ (async() => {
32
+ const image = await loadImage(example_image_path)
33
+ const canvas = createCanvas(image.width, image.height)
34
+ const context = canvas.getContext("2d")
35
+ context.drawImage(image, 0, 0)
36
+
37
+ const endpoint = await EyePop.endpoint().connect()
38
+ try {
39
+ let results = await endpoint.process({path: example_image_path})
40
+ for await (let result of results) {
41
+ Render2d.renderer(context).prediction(result)
42
+ }
43
+ } finally {
44
+ await endpoint.disconnect()
45
+ }
46
+
47
+ const tmp_dir = mkdtempSync(join(tmpdir(), 'ep-demo-'))
48
+ const temp_file = join(tmp_dir, 'out.png')
49
+ console.log(`creating temp file: ${temp_file}`)
50
+
51
+ const buffer = canvas.toBuffer('image/png')
52
+ writeFileSync(temp_file, buffer)
53
+
54
+ open(`file://${temp_file}`)
55
+ })();
56
+ ```
57
+ ### Browser
58
+ ```html
59
+ <!DOCTYPE html>
60
+ <html lang="en">
61
+ <head>
62
+ <script src="https://cdn.jsdelivr.net/npm/@eyepop.ai/eyepop/dist/eyepop.min.js"></script>
63
+ <script src="https://cdn.jsdelivr.net/npm/@eyepop.ai/eyepop-render-2d/dist/eyepop.render2d.min.js"></script>
64
+ </head>
65
+ <body>
66
+ <!-- ... -->
67
+ <input type="file" id="my-file-chooser">
68
+ <!-- ... -->
69
+ <canvas id="my-canvas"></canvas>
70
+ <!-- ... -->
71
+ <script>
72
+ async uploadFile(event) {
73
+ const fileChooser = document.getElementById('my-file-chooser');
74
+ const context = document.getElementById('my-canvas').getContext("2d");
75
+ const endpoint = await EyePop.endpoint({ auth: { oAuth2: true }, popId: '< Pop Id>' }).connect();
76
+ endpoint.process({file: fileChooser.files[0]}).then(async (results) => {
77
+ for await (let result of results) {
78
+ Render2d.renderer(context).prediction(result);
79
+ }
80
+ });
81
+ await endpoint.disconnect();
82
+ });
83
+ </script>
84
+ </body>
85
+ </html>
86
+
87
+ ```
88
+ ### Rendering Rules
89
+ By default, the 2d renderer renders boxes and clasS-labels for every top level object in the prediction.
90
+ Change this rendering behaviour by passing in rendering rule(s), e.g.:
91
+ ```javascript
92
+ // ...
93
+ Render2d.renderer(context,[{
94
+ type: 'face',
95
+ target: '$..objects[?(@.classLabel=="face")]'
96
+ }]).prediction(result);
97
+ // ...
98
+ ```
99
+ Each rule has a `type` and a `target` attribute. Supported rule types are:
100
+ * `box` draws a bounding box and a class label
101
+ * `pose` draws person body key points
102
+ * `hand` draws person hand detailed key points
103
+ * `face` draws person face mesh and expression labels
104
+ * `blur` blurs the bounding box of the selected object
105
+
106
+ the `target` attribute is a [JSONPath expression](https://www.npmjs.com/package/jsonpath) that is applied to the prediction result to filter the objects to be rendered.
package/dist/eyepop.render2d.index.d.mts ADDED
@@ -0,0 +1,70 @@
1
+ import { CanvasRenderingContext2D } from 'canvas';
2
+
3
+ interface Prediction {
4
+ timestamp: number;
5
+ seconds: number;
6
+ offset: number;
7
+ source_width: number;
8
+ source_height: number;
9
+ source_id: string;
10
+ objects: Array<PredictedObject>;
11
+ classes: Array<PredictedClass>;
12
+ labels: Array<string>;
13
+ meshs: Array<PredictedMesh>;
14
+ keyPoints: Array<PredictedKeyPoints>;
15
+ }
16
+ interface PredictedClass {
17
+ id: number;
18
+ confidence: number;
19
+ classLabel: string;
20
+ category: string;
21
+ }
22
+ interface PredictedObject extends PredictedClass {
23
+ traceId: number | undefined;
24
+ x: number;
25
+ y: number;
26
+ width: number;
27
+ height: number;
28
+ orientation: number;
29
+ outline: Array<Point2d>;
30
+ objects: Array<PredictedObject>;
31
+ classes: Array<PredictedClass>;
32
+ labels: Array<string>;
33
+ meshs: Array<PredictedMesh>;
34
+ keyPoints: Array<PredictedKeyPoints>;
35
+ }
36
+ interface Point2d {
37
+ x: number;
38
+ y: number;
39
+ }
40
+ interface PredictedMesh {
41
+ category: string;
42
+ id: number;
43
+ confidence: number;
44
+ points: Array<Point3d>;
45
+ }
46
+ interface Point3d extends Point2d {
47
+ z: number | undefined;
48
+ }
49
+ interface PredictedKeyPoints {
50
+ category: string;
51
+ type: string;
52
+ points: Array<PredictedKeyPoint>;
53
+ }
54
+ interface PredictedKeyPoint extends Point3d, PredictedClass {
55
+ }
56
+
57
+ type RenderType = 'box' | 'pose' | 'hand' | 'face' | 'blur';
58
+ interface RenderRule {
59
+ readonly type: RenderType;
60
+ readonly target: string;
61
+ }
62
+
63
+ interface Renderer {
64
+ prediction(p: Prediction): void;
65
+ }
66
+ declare namespace Render2d {
67
+ function renderer(context: CanvasRenderingContext2D, rules?: RenderRule[] | undefined): Renderer;
68
+ }
69
+
70
+ export { Render2d, type Renderer, Render2d as default };
package/dist/eyepop.render2d.index.d.ts ADDED
@@ -0,0 +1,70 @@
1
+ import { CanvasRenderingContext2D } from 'canvas';
2
+
3
+ interface Prediction {
4
+ timestamp: number;
5
+ seconds: number;
6
+ offset: number;
7
+ source_width: number;
8
+ source_height: number;
9
+ source_id: string;
10
+ objects: Array<PredictedObject>;
11
+ classes: Array<PredictedClass>;
12
+ labels: Array<string>;
13
+ meshs: Array<PredictedMesh>;
14
+ keyPoints: Array<PredictedKeyPoints>;
15
+ }
16
+ interface PredictedClass {
17
+ id: number;
18
+ confidence: number;
19
+ classLabel: string;
20
+ category: string;
21
+ }
22
+ interface PredictedObject extends PredictedClass {
23
+ traceId: number | undefined;
24
+ x: number;
25
+ y: number;
26
+ width: number;
27
+ height: number;
28
+ orientation: number;
29
+ outline: Array<Point2d>;
30
+ objects: Array<PredictedObject>;
31
+ classes: Array<PredictedClass>;
32
+ labels: Array<string>;
33
+ meshs: Array<PredictedMesh>;
34
+ keyPoints: Array<PredictedKeyPoints>;
35
+ }
36
+ interface Point2d {
37
+ x: number;
38
+ y: number;
39
+ }
40
+ interface PredictedMesh {
41
+ category: string;
42
+ id: number;
43
+ confidence: number;
44
+ points: Array<Point3d>;
45
+ }
46
+ interface Point3d extends Point2d {
47
+ z: number | undefined;
48
+ }
49
+ interface PredictedKeyPoints {
50
+ category: string;
51
+ type: string;
52
+ points: Array<PredictedKeyPoint>;
53
+ }
54
+ interface PredictedKeyPoint extends Point3d, PredictedClass {
55
+ }
56
+
57
+ type RenderType = 'box' | 'pose' | 'hand' | 'face' | 'blur';
58
+ interface RenderRule {
59
+ readonly type: RenderType;
60
+ readonly target: string;
61
+ }
62
+
63
+ interface Renderer {
64
+ prediction(p: Prediction): void;
65
+ }
66
+ declare namespace Render2d {
67
+ function renderer(context: CanvasRenderingContext2D, rules?: RenderRule[] | undefined): Renderer;
68
+ }
69
+
70
+ export { Render2d, type Renderer, Render2d as default };