The avatar for @jeyabbalas
Jeya Balaji Balasubramanian
AI Researcher in Medicine. All opinions are my own.
Public
Edited
Nov 15, 2022
5 stars
2
TensorFlow.js
Getting started with TensorFlow.js (TF.js)TensorsImage tensors
Pretrained models (image classification)
Advanced pretrained models (object detection)
Also listed in…
Artificial Intelligence
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mobileNetPath = "https://tfhub.dev/google/tfjs-model/imagenet/mobilenet_v3_large_100_224/classification/5/default/1"
Insert cell
Insert cell
mobileNet = tf.loadGraphModel(mobileNetPath, { fromTFHub: true })
Insert cell
Insert cell
mobileNet.inputs[0].shape
Insert cell
Insert cell
mobileNet.weights
Insert cell
Insert cell
mobileNet.weights[Object.keys(mobileNet.weights)[0]]
Insert cell
mobileNet.weights[Object.keys(mobileNet.weights)[0]][0].array()
Insert cell
Insert cell
mobileNetClassNames = mobileNet.metadata.classNames
Insert cell
Insert cell
function preprocess(imageTensor) {
const widthToHeight = imageTensor.shape[1] / imageTensor.shape[0];
let squareCrop;
if (widthToHeight > 1) {
const heightToWidth = imageTensor.shape[0] / imageTensor.shape[1];
const cropTop = (1-heightToWidth) / 2;
const cropBottom = 1 - cropTop;
squareCrop = [[cropTop, 0, cropBottom, 1]];
} else {
const cropLeft = (1-widthToHeight) / 2;
const cropRight = 1 - cropLeft;
squareCrop = [[0, cropLeft, 1, cropRight]];
}
// Expand image input dimensions to add a batch dimension of size 1.
const crop = tf.image.cropAndResize(imageTensor.expandDims(), squareCrop, [0], [224, 224]);
return crop.div(255);
}
Insert cell
Insert cell
Insert cell
Insert cell
img = new Promise((resolve, reject) => {
const img = htl.html`<img/>`;
img.src = imgUrl;
img.crossOrigin = 'anonymous';
img.onload = () => resolve(img);
img.onerror = reject;
})
Insert cell
Insert cell
imageTensor = tf.browser.fromPixels(img)
Insert cell
imageTensor.shape
Insert cell
Insert cell
processedImageTensor = preprocess(imageTensor)
Insert cell
Insert cell
processedImageTensor.shape
Insert cell
{
const canvas = htl.html`<canvas/>`;
tf.browser.toPixels(processedImageTensor.squeeze(), canvas);
return canvas;
}
Insert cell
Insert cell
prediction = mobileNet.predict(processedImageTensor)
Insert cell
Insert cell
{
let topPredictions = prediction.topk(4);
let indices = await topPredictions.indices.array();
let values = await topPredictions.values.array();
tf.dispose([topPredictions.indices, topPredictions.values]);
let predictedClasses = indices[0].map(i => mobileNetClassNames[i]);
let scores = values[0];
return Object.fromEntries(predictedClasses.map((k, i) => [k, scores[i]]));
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
tf = require('@tensorflow/tfjs@4.0.0/dist/tf.min.js')
Insert cell
Plotly = require("https://cdn.plot.ly/plotly-2.14.0.min.js")
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more