TensorSpace.js
Getting Start
Basic Concepts
Model Preprocessing
Models
Layers
Merge Function
YoloGrid
YoloGrid layer is specifically design for YOLO model which is used to determine the center of the rectangle to mark the position of the object.
The main idea of YOLO is to divide the image into regions and predicts bounding boxes and probabilities for each region. This YoloGird is interactive with this feature map and each region. You can click at this layer to draw the rectangle at next layer: ObjectDetection which can draw a rectangle on the image.
The shape of the feature map will be calculate automatically according to inputShape.
Constructor
Use anchors classLabelList configuration related to YOLO model and a callback function named onCeilClicked to construct.
let yoloGrid = new TSP.layers.YoloGrid( {

    anchors: [ 1.08, 1.19, 3.42, 4.41, 6.63, 11.38, 9.42, 5.11, 16.62, 10.52 ],

    //voc class label name list
    classLabelList: [ "aeroplane", "bicycle", "bird", "boat", "bottle",
        "bus", "car", "cat", "chair", "cow",
        "diningtable", "dog", "horse", "motorbike", "person",
        "pottedplant", "sheep", "sofa", "train", "tvmonitor" ],

    onCeilClicked: onYoloCeilClicked

} );
Fig. 1 - YoloGrid layer collapse and expand
Arguments

Name

Tag

Type

Instruction

Usage Notes and Examples

anchors

📦

Float32[] Previous Probability of anchors Check it at cfg file of darknet configuration, also can be found at our examples.

classLabelList

📦

String[] Output class label names Depend on the data set: VOC has 20 classes,COCO has 80,ImageNet has 1000

onCeilClicked

📦

function Fired when ceil is clicked, return data array store in array Check out this example for more information
ceilData: Return the output data.
rectList: The rectangle coordinate to present the object.

name

🔧

String Name of this layer. Highly recommend to arrange to make code more readable. name: "layerName"

color

⚙️🎨

color format Color of layer YoloGrid default is #EEEEEE

closeButton

⚙️🎨

Dict Close button appearance control dict, more about close button

display : Boolean. true[default] Show button, false Hide button

ratio : Int. Times to normal size, default is 1

For example, 2 means twice the normal size

initStatus

⚙️️🎦

String Layer status at beginning. Open or Close close[default] : Closed at beginning

animeTime

⚙️🎦

Int The speed of open and close animation For example, 2000 means 2 seconds. Note: Configure animeTime in a specific layer will override model's animeTime configuration.
Properties
.name : String
filter_center_focusThe custom name for this layer.
filter_center_focusOnce created, you can get it.
.layerType : String
filter_center_focusType of this layer, return a constant: string YoloGrid.
filter_center_focusOnce created, you can get it.
Method
filter_center_focusThis method only used in Functional Model (Non-sequential, Graph structure).
filter_center_focusLink this layer to layer which is the previous layer.
filter_center_focusTo crete a link between this layer and the previous layer. You don't need to use this method specifically to create links in Sequential Model; Instead, you can simply add layers along the lines of Keras or TensorFlow.js build the model syntax.
let convLayer = new TSP.layers.Conv2d( {

    // configure some parameters for Conv2d.

} );

let yoloGrid = new TSP.layers.YoloGrid( {

    // configure some parameters for YoloGrid.

} );

yoloGrid.apply( convLayer );
.openLayer() : void
filter_center_focusClick on the layer directly to open it by interacting directly with the object in the 3D scene.
filter_center_focusIn code, calling the method to open it.
let yoloGrid = new TSP.layers.YoloGrid( {

    // configure some parameters for YoloGrid.

} );

model.add( yoloGrid );

// ... add more layers for model.

model.init();

// Call openLayer API to open layer.

yoloGrid.openLayer();
filter_center_focusTo close by interacting directly with objects in a 3D scene by clicking the close button.
filter_center_focus In code, calling the method to close it.
let yoloGrid = new TSP.layers.YoloGrid( {

    // configure some parameters for YoloGrid.

} );

model.add( yoloGrid );

// ... add more layers for model.

model.init();

// If this layer already opened, call closeLayer API to close layer.

yoloGrid.closeLayer();
Example
filter_center_focus Declare an instance of YoloGrid to facilitate reuse
let yoloGrid = new TSP.layers.YoloGrid( {

    anchors: [ 1.08, 1.19, 3.42, 4.41, 6.63, 11.38, 9.42, 5.11, 16.62, 10.52 ],

    //voc class label name list
    classLabelList: [ "aeroplane", "bicycle", "bird", "boat", "bottle",
        "bus", "car", "cat", "chair", "cow",
        "diningtable", "dog", "horse", "motorbike", "person",
        "pottedplant", "sheep", "sofa", "train", "tvmonitor" ],

    onCeilClicked: onYoloCeilClicked

} );
model.add( yoloGrid );

function onYoloCeilClicked( ceilData, rectList ) {

    // some operation with ceilData and rectList

}
filter_center_focusAdd YoloGrid directly
model.add( new TSP.layers.YoloGrid( {

    anchors: [ 1.08, 1.19, 3.42, 4.41, 6.63, 11.38, 9.42, 5.11, 16.62, 10.52 ],

    //voc class label name list
    classLabelList: [ "aeroplane", "bicycle", "bird", "boat", "bottle",
        "bus", "car", "cat", "chair", "cow",
        "diningtable", "dog", "horse", "motorbike", "person",
        "pottedplant", "sheep", "sofa", "train", "tvmonitor" ],

    onCeilClicked: onYoloCeilClicked

} ) );

function onYoloCeilClicked( ceilData, rectList ) {

    // some operation with ceilData and rectList

}
Tag Lookup
Tag Icon Meaning Instruction
⭐️ Required Must be provided, cannot be empty. Meanwhile constructor works properly if this arguments provided. Control arguments use default value.
🔧 Suggest Recommended for giving. The API can work without them.
⚙️ Optional As an auxiliary adjustment parameter when used, selectively added according to the specific situation The parameters here have no effect on the structure of the layer (3D visualized form).
📦 Model Configure the properties of the Layer. It changes the output shape.
🎨 Style Override the properties in TSP.model (model configuration)
🎦 Animation Override the properties in TSP.model (model configuration)
Source Code
tensorspace/src/layer/output/YoloGrid.js