search

Render 2D (Visualization)

The 2d visualization module for the Node SDK

hashtag
EyePop.ai Render 2D Node Module

This EyePop.ai Node Module provides convenient 2D rendering functions for predictions returned by to the EyePop.ai's inference API from applications written in the TypeScript or JavaScript language.

The module requires the React / Node SDK

hashtag
Installation

hashtag
Node

npm install --save @eyepop.ai/eyepop @eyepop.ai/eyepop-render-2d

hashtag
Browser

<script src="https://cdn.jsdelivr.net/npm/@eyepop.ai/eyepop-render-2d/dist/eyepop.render2d.min.js"></script>

hashtag
Usage example

hashtag
Node

This EyePop Node Module provides 2D rendering for predictions using canvas.CanvasRenderingContext2D.

import { EyePop } from '@eyepop.ai/eyepop';
import { Render2d } from '@eyepop.ai/eyepop-render-2d';

import {createCanvas, loadImage} from "canvas";
import {open} from 'openurl';
import { mkdtempSync, writeFileSync } from 'node:fs';
import { join } from 'node:path';
import { tmpdir } from 'node:os';

const example_image_path = 'examples/example.jpg';
    
(async() => {
    const image = await loadImage(example_image_path)
    const canvas = createCanvas(image.width, image.height)
    const context = canvas.getContext("2d")
    const renderer = Render2d.renderer(context)
    
    context.drawImage(image, 0, 0)

    const endpoint = await EyePop.workerEndpoint().connect()
    try {
        let results = await endpoint.process({path: example_image_path})
        for await (let result of results) {
            renderer.draw(result)
        }        
    } finally {
        await endpoint.disconnect()
    }
    
    const tmp_dir = mkdtempSync(join(tmpdir(), 'ep-demo-'))
    const temp_file = join(tmp_dir, 'out.png')
    console.log(`creating temp file: ${temp_file}`)

    const buffer = canvas.toBuffer('image/png')
    writeFileSync(temp_file, buffer)

    open(`file://${temp_file}`)
})();

hashtag
Browser

hashtag
Rendering Rules

By default, the 2D renderer renders boxes and class-labels for every top level object in the prediction. Change this rendering behaviour by passing in rendering rule(s), e.g.:

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. See JSONPath expressionarrow-up-right

Most prebuild render classes provide a reasonable default target.

Rendering Bounding Boxes and Class Labels

Render Human Body Poses (2d or 3d)

Render Human Hand Details

Render Human Faces

Render Segmentation Masks

Render Segmentation Contours

Blur an Object (TODO does black-put instead of blur)

Render a Trail of a traced object over time

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. E.g. trail the nose of every traced person:

Custom render implementation

To implement custom rendering rules, implement the Render interface and create your own RenderRule objects:

PreviousReact/Node SDKNextComposable Pops

Last updated