Introduction to TensorFlow.js (tfjs)
TensorFlow.js is a powerful and flexible library that allows you to define, train, and run machine learning models entirely in the browser using JavaScript. With tfjs, developers can bring machine learning capabilities to web applications, providing a smooth and interactive user experience.
Getting Started with TensorFlow.js
To start using tfjs, include the following script tag in your HTML:
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
You can also install it via npm:
npm install @tensorflow/tfjs
Basic Usage and APIs
Here are some useful tfjs APIs along with examples:
Tensor Creation
Create tensors with different values:
const tensor1 = tf.tensor([1, 2, 3, 4]); const tensor2 = tf.tensor2d([[1, 2], [3, 4]]); const zerosTensor = tf.zeros([2, 2]);
Mathematical Operations
Perform arithmetic operations on tensors:
const a = tf.tensor([1, 2, 3]); const b = tf.tensor([4, 5, 6]); const sum = a.add(b); sum.print(); // Output [5, 7, 9]
Model Definition
Define and compile a simple model:
const model = tf.sequential();
model.add(tf.layers.dense({units: 32, inputShape: [50]}));
model.add(tf.layers.dense({units: 1}));
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});
Model Training
Train the model on data:
const xs = tf.tensor2d([[1], [2], [3], [4]], [4, 1]);
const ys = tf.tensor2d([[1], [3], [5], [7]], [4, 1]);
model.fit(xs, ys, {epochs: 10}).then(() => {
model.predict(tf.tensor2d([[5]], [1, 1])).print(); // Predict for a new input
});
Pre-trained Models
Use pre-trained models available in tfjs:
const modelUrl = 'https://tfhub.dev/google/tfjs-model/mobilenet_v2/1/default/1'; const model = await tf.loadGraphModel(modelUrl); const input = tf.browser.fromPixels(imageElement); const predictions = model.predict(input.expandDims(0)); predictions.print();
Sample Web Application
Here is an example of a simple web app that uses tfjs:
<!DOCTYPE html>
<html>
<head>
<title>TensorFlow.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
</head>
<body>
<canvas id="canvas" width="224" height="224"></canvas>
<script>
async function run() {
const model = await tf.loadGraphModel('https://tfhub.dev/google/tfjs-model/mobilenet_v2/1/default/1');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(videoElement, 0, 0, 224, 224);
const input = tf.browser.fromPixels(canvas);
const predictions = model.predict(input.expandDims(0));
predictions.print();
}
run();
</script>
</body>
</html>
By integrating TensorFlow.js in your web applications, you can leverage the power of machine learning directly in the browser, improving your app’s functionality and user engagement.
Hash: 2f997981779d243d9668889d787d00da3f6c7f711355f37503e646c5c680c757
