Google News
logo
ml5.js Interview Questions
Loading Existing Data :
External data : "data/colorData.json"
{
  "entries": [
    {"r":255, "g":0, "b":0, "color":"red-ish"},
    {"r":254, "g":0, "b":0, "color":"red-ish"},
    {"r":253, "g":0, "b":0, "color":"red-ish"},
    {"r":0, "g":255, "b":0, "color":"green-ish"},
    {"r":0, "g":254, "b":0, "color":"green-ish"},
    {"r":0, "g":253, "b":0, "color":"green-ish"},
    {"r":0, "g":0, "b":255, "color":"blue-ish"},
    {"r":0, "g":0, "b":254, "color":"blue-ish"},
    {"r":0, "g":0, "b":253, "color":"blue-ish"}
  ]
}
 
In your JavaScript : "script.js"
// Step 1: set your neural network options
const options = {
  dataUrl: "data/colorData.json",
  task: 'classification',
  inputs:['r', 'g', 'b'],
  outputs:['color'],
  debug: true
}

// Step 2: initialize your neural network
const nn = ml5.neuralNetwork(options, dataLoaded);

// Step 3: normalize data and train the model
function dataLoaded(){
  nn.normalizeData();
  trainModel();
}

// Step 4: train the model
function trainModel(){
  const trainingOptions = {
    epochs: 32,
    batchSize: 12
  }
  nn.train(trainingOptions, finishedTraining);
}

// Step 5: use the trained model
function finishedTraining(){
  classify();
}

// Step 6: make a classification
function classify(){
  const input = {
    r: 255, 
    g: 0, 
    b: 0
  }
  nn.classify(input, handleResults);
}

// Step 7: define a function to handle the results of your classification
function handleResults(error, result) {
    if(error){
      console.error(error);
      return;
    }
    console.log(result); // {label: 'red', confidence: 0.8};
}
For your reference, a few typical uses are showcased below :
Example 1 :
const options = {
  inputs: 1,
  outputs: 1,
  task: 'regression'
}
const nn = ml5.neuralNetwork(options)
 
Example 2 : loading data as a csv
const options = {
  dataUrl: 'weather.csv',
  inputs: ['avg_temperature', 'humidity'],
  outputs: ['rained'],
  task: 'classification'
}
const nn = ml5.neuralNetwork(options, modelLoaded)
 
Example 3 : loading data as a json
/**
The weather json looks something like:
{"data": [
  {"xs": {"avg_temperature":20, "humidity": 0.2}, "ys": {"rained": "no"}},
  {"xs": {"avg_temperature":30, "humidity": 0.9}, "ys": {"rained": "yes"}}
] }
* */
const options = {
  dataUrl: 'weather.json',
  inputs: ['avg_temperature', 'humidity'],
  outputs: ['rained'],
  task: 'classification'
}
const nn = ml5.neuralNetwork(options, modelLoaded)
 
Example 4 : specifying labels for a blank neural network
const options = {
  inputs: ['x', 'y'],
  outputs: ['label'],
  task: 'classification',
};
const nn = ml5.neuralNetwork(options);
 
Example 5 : creating a convolutional neural network for image classification by setting task: imageClassification.
const IMAGE_WIDTH = 64;
const IMAGE_HEIGHT = 64;
const IMAGE_CHANNELS = 4;
const options = {
  task: 'imageClassification',
  inputs:[IMAGE_WIDTH, IMAGE_HEIGHT, IMAGE_CHANNELS],
  outputs: ['label']
}
const nn = ml5.neuralNetwork(options);
There are a number of ways to initialize the ml5.neuralNetwork. Below we cover the possibilities :
 
* Minimal Configuration Method
* Defining inputs and output labels as numbers or as arrays of labels
* Loading External Data
* Loading a pre-trained Model
* A convolutional neural network for image classification tasks
* Defining custom layers
Minimal Configuration Method : If you plan to create data in real-time, you can just set the type of task you want to accomplish ('regression' | 'classification') and then create the neuralNetwork. You will have to add data later on, but ml5 will figure the inputs and outputs based on the data your add.
 
const options = {
  task: 'regression' // or 'classification'
}
const nn = ml5.neuralNetwork(options)
Defining inputs and output labels as numbers or as arrays of labels : If you plan to create data in real-time, you can just set the type of task you want to accomplish ('regression' | 'classification') and then create the neuralNetwork. To be more specific about your inputs and outputs, you can also define the names of the labels for your inputs and outputs as arrays OR the number of inputs and outputs. You will have to add data later on. Note that if you add data as JSON, your JSON Keys should match those defined in the options. If you add data as arrays, make sure the order you add your data match those given in the options.
 
As arrays of labels : 
const options = {
  task: 'classification' // or 'regression'
  inputs:['r', 'g','b'],
  outputs: ['color']
}
const nn = ml5.neuralNetwork(options)
 
As numbers :
const options = {
  task: 'classification' // or 'regression'
  inputs: 3, // r, g, b
  outputs: 2 // red-ish, blue-ish
}
const nn = ml5.neuralNetwork(options)
Loading External Data : You can initialize ml5.neuralNetwork specifying an external url to some data structured as a CSV or a JSON file. If you pass in data as part of the options, you will need to provide a callback function that will be called when your data has finished loading. Furthermore, you will need to specify which properties in the data that ml5.neuralNetwork will use for inputs and outputs.
const options = {
    dataUrl: 'data/colorData.csv'
    task: 'classification' // or 'regression'
    inputs: ['r', 'g','b'], // r, g, b
    outputs: ['color'] // red-ish, blue-ish
}

const nn = ml5.neuralNetwork(options, dataLoaded)

function dataLoaded(){
  // continue on your neural network journey
  nn.normalizeData();
  // ...
}
Loading a pre-trained Model : If you've trained a model using the ml5.neuralNetwork and saved it out using the ml5.neuralNetwork.save() then you can load in the model, the weights, and the metadata.
const options = {
    task: 'classification' // or 'regression'
  }
  const nn = ml5.neuralNetwork(options);
  
  const modelDetails = {
    model: 'model/model.json',
    metadata: 'model/model_meta.json',
    weights: 'model/model.weights.bin'
  }
  nn.load(modelDetails, modelLoaded)

  function modelLoaded(){
    // continue on your neural network journey
    // use nn.classify() for classifications or nn.predict() for regressions
  }
A convolutional neural network for image classification tasks : You can use convolutional neural networks in the ml5.neuralNetwork by setting the task:"imageClassification".
const IMAGE_WIDTH = 64;
const IMAGE_HEIGHT = 64;
const IMAGE_CHANNELS = 4;
const options = {
  task: 'imageClassification',
  inputs:[IMAGE_WIDTH, IMAGE_HEIGHT, IMAGE_CHANNELS],
  outputs: ['label']
}
const nn = ml5.neuralNetwork(options);
Defaults : By default the ml5.neuralNetwork has simple default architectures for the classification, regression and imageClassificaiton tasks.
 
default classification layers :
layers:[
  {
    type: 'dense',
    units: this.options.hiddenUnits,
    activation: 'relu',
  },
  {
    type: 'dense',
    activation: 'softmax',
  },
];
 
default regression layers :
layers: [
  {
    type: 'dense',
    units: this.options.hiddenUnits,
    activation: 'relu',
  },
  {
    type: 'dense',
    activation: 'sigmoid',
  },
];
 
default imageClassification layers :
layers = [
  {
    type: 'conv2d',
    filters: 8,
    kernelSize: 5,
    strides: 1,
    activation: 'relu',
    kernelInitializer: 'varianceScaling',
  },
  {
    type: 'maxPooling2d',
    poolSize: [2, 2],
    strides: [2, 2],
  },
  {
    type: 'conv2d',
    filters: 16,
    kernelSize: 5,
    strides: 1,
    activation: 'relu',
    kernelInitializer: 'varianceScaling',
  },
  {
    type: 'maxPooling2d',
    poolSize: [2, 2],
    strides: [2, 2],
  },
  {
    type: 'flatten',
  },
  {
    type: 'dense',
    kernelInitializer: 'varianceScaling',
    activation: 'softmax',
  },
];
 
Defining Custom Layers : You can define custom neural network architecture by defining your layers in the options that are passed to the ml5.neuralNetwork on initialization.
 
A neural network with 3 layers :
const options = {
  debug: true,
  task: 'classification',
  layers: [
    {
      type: 'dense',
      units: 16,
      activation: 'relu'
    },
    {
      type: 'dense',
      units: 16,
      activation: 'sigmoid'
    },
    {
      type: 'dense',
      activation: 'sigmoid'
    }
  ]
};
const nn = ml5.neuralNetwork(options);
property description datatype
.callback the callback to be called after data is loaded on initialization function
.options the options for how the neuralNetwork should be configured on initialization object
.neuralNetwork the neuralNetwork class where all of the tensorflow.js model operations are organized class
.neuralNetworkData the neuralNetworkData class where all of the data handling operations are organized class
.neuralNetworkVis the neuralNetworkVis class where all of the tf-vis operations are organized class
.data The property that stores all of the training data after .train() is called class
.ready set to true if the model is loaded and ready, false if it is not. boolean

Sources : Ml5.js, W3C, more..