diff --git a/Draw.md b/Draw.md new file mode 100644 index 0000000..faef0a1 --- /dev/null +++ b/Draw.md @@ -0,0 +1,58 @@ +# Draw Methods + +`Human` library includes built-in Canvas draw methods + +- [human.draw.options](https://vladmandic.github.io/human/typedoc/interfaces/DrawOptions.html) + currenntly set draw options, can be overriden in each method + used to set line/text colors, line width, font type, label templates, etc. +- [human.draw.canvas](https://vladmandic.github.io/human/typedoc/functions/draw.canvas.html) + simply input (video, canvas, image, etc.) to output canvas + as it was after processing (see [filters](https://vladmandic.github.io/human/typedoc/interfaces/FilterConfig.html)) +- [human.draw.all](https://vladmandic.github.io/human/typedoc/functions/draw.all.html) + meta function that executes draw for `face`, `hand`, `body`, `object`, `gestures` for all detected features +- [human.draw.person](https://vladmandic.github.io/human/typedoc/functions/draw.all.html) + meta function that executes draw for `face`, `hand`, `body`, `object`, `gestures` for all detected features beloning to a specific person +- `human.draw.[face|hand|body|object|gestures]` + draws **points**, **boxes**, **polygones** and **labels** for each detected feature as defined in `draw.options` + +## Labels + +If `options.drawLabels` is enabled (default) +- Labels for each feature are parsed using templates +- Label templates can use built-in values in `[]` or be provided as any string literal +- Labels for each feature are set relative to the top-left of the detection box of that feature (face, hand, body, object, etc.) +- Draw methods automatically handle multi-line labels and vertical spacing +- Built-in unmatched label templates not matched are removed + +## Default Label Templates + +```js + faceLabels: `face + confidence: [score]% + [gender] [genderScore]% + age: [age] years + distance: [distance]cm + real: [real]% + live: [live]% + [emotions] + roll: [roll]° yaw:[yaw]° pitch:[pitch]° + gaze: [gaze]°`, + bodyLabels: 'body [score]%', + bodyPartLabels: '[label] [score]%', + objectLabels: '[label] [score]%', + handLabels: '[label] [score]%', + fingerLabels: '[label]', + gestureLabels: '[where] [who]: [what]', +``` + +## Example + +Example of custom labels: +```js +import * as Human from '@vladmandic/human'; +... +const drawOptions: Partial = { + bodyLabels: `person confidence is [score]% and has ${human.result?.body?.[0]?.keypoints.length || 'no'} keypoints`, +}; +human.draw.all(dom.canvas, human.result, drawOptions); +``` diff --git a/Home.md b/Home.md index c0a849e..cae925d 100644 --- a/Home.md +++ b/Home.md @@ -12,7 +12,8 @@ **Body Pose Tracking, 3D Hand & Finger Tracking, Iris Analysis,** **Age & Gender & Emotion Prediction, Gaze Tracking, Gesture Recognition, Body Segmentation** -JavaScript module using TensorFlow/JS Machine Learning library +
+ ## Highlights - Compatible with most server-side and client-side environments and frameworks @@ -22,6 +23,7 @@ JavaScript module using TensorFlow/JS Machine Learning library - Detection of frame changes to trigger only required models for improved performance - Intelligent temporal interpolation to provide smooth results regardless of processing performance - Simple unified API +- Built-in Image, Video and WebCam handling
@@ -94,7 +96,8 @@ JavaScript module using TensorFlow/JS Machine Learning library - [**Code Repository**](https://github.com/vladmandic/human) - [**NPM Package**](https://www.npmjs.com/package/@vladmandic/human) - [**Issues Tracker**](https://github.com/vladmandic/human/issues) -- [**TypeDoc API Specification**](https://vladmandic.github.io/human/typedoc/classes/Human.html) +- [**TypeDoc API Specification - Main class**](https://vladmandic.github.io/human/typedoc/classes/Human.html) +- [**TypeDoc API Specification - Full**](https://vladmandic.github.io/human/typedoc/) - [**Change Log**](https://github.com/vladmandic/human/blob/main/CHANGELOG.md) - [**Current To-do List**](https://github.com/vladmandic/human/blob/main/TODO.md) @@ -105,6 +108,7 @@ JavaScript module using TensorFlow/JS Machine Learning library - [**Usage & Functions**](https://github.com/vladmandic/human/wiki/Usage) - [**Configuration Details**](https://github.com/vladmandic/human/wiki/Config) - [**Result Details**](https://github.com/vladmandic/human/wiki/Result) +- [**Customizing Draw Methods**](https://github.com/vladmandic/human/wiki/Draw) - [**Caching & Smoothing**](https://github.com/vladmandic/human/wiki/Caching) - [**Input Processing**](https://github.com/vladmandic/human/wiki/Image) - [**Face Recognition & Face Description**](https://github.com/vladmandic/human/wiki/Embedding) @@ -237,7 +241,7 @@ Additionally, `HTMLVideoElement`, `HTMLMediaElement` can be a standard `