Getting Started with TensorFlow.js: Front‑end, Node.js, and WeChat Mini‑Program Integration
This article introduces TensorFlow.js, explains its origin and core features, and provides step‑by‑step instructions for using it in browsers, Node.js, and WeChat mini‑programs, including package installation, sample code, and practical tips for front‑end developers.
TensorFlow.js Overview
TensorFlow.js (tfjs) is a JavaScript library that brings TensorFlow’s machine‑learning capabilities to the browser and Node.js, allowing developers to create, train, and run models directly with JavaScript.
Why Front‑end Developers Should Care
With tfjs you can run pre‑trained models in the browser, fine‑tune them using JavaScript, or build entire models without Python, enabling richer user interactions, on‑device inference, and privacy‑preserving AI.
Using TensorFlow.js in the Browser
Install the library via a package manager (npm, yarn, pnpm) and import it in your Vue/React project:
pnpm install @tensorflow/tfjsExample Vue component:
<script setup>
import * as tf from "@tensorflow/tfjs";
const x = tf.tensor2d([1, 2, 3, 4], [2, 2]);
const y = tf.tensor2d([1, 3, 5, 7], [2, 2]);
const sum = x.add(y);
sum.print();
</script>
<template>
<div class="greetings">
<h1>Hello TensorFlow</h1>
</div>
</template>Open the browser console and verify that the tensor sum is printed.
Alternatively, load tfjs via a CDN:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TensorFlow</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
</head>
<body>
<h1>Hello TensorFlow</h1>
</body>
</html>After loading, you can check the version with tf.version and run quick examples from the official docs.
Using TensorFlow.js in Node.js
Initialize a project and install tfjs:
pnpm init
pnpm install @tensorflow/tfjsCreate a test script (e.g., TensorFlow.js ) with the following code:
const tf = require("@tensorflow/tfjs");
const xs = tf.randomNormal([100, 10]);
const ys = tf.randomNormal([100, 1]);
const sum = xs.add(ys);
const xsSum = xs.sum();
const xsMean = xs.mean();
console.log("Sum of xs and ys");
sum.print();
console.log("Sum of xs");
xsSum.print();
console.log("Mean of xs");
xsMean.print();Run the script with node TensorFlow.js and verify the printed tensors.
TensorFlow.js in WeChat Mini‑Programs
Google released a tfjs plugin for WeChat mini‑programs, enabling on‑device AI for image, speech, and text tasks.
Steps to integrate:
Create a mini‑program project in the WeChat DevTools.
Install the required packages: # Initialize project pnpm init # Install tfjs core and related packages pnpm i @tensorflow/tfjs-core @tensorflow/tfjs-converter @tensorflow/tfjs-backend-webgl fetch-wechat
Configure the plugin in app.json : { "plugins": { "tfjsPlugin": { "version": "0.2.0", "provider": "wx6afed118d9e81df9" } } }
Initialize the plugin in app.js : var fetchWechat = require('fetch-wechat'); var tf = require('@tensorflow/tfjs-core'); var webgl = require('@tensorflow/tfjs-backend-webgl'); var plugin = requirePlugin('tfjsPlugin'); App({ onLaunch() { plugin.configPlugin({ fetchFunc: fetchWechat.fetchFunc(), tf, webgl, canvas: wx.createOffscreenCanvas() }); } });
Test the integration by creating a tensor and printing it: App({ onLaunch() { plugin.configPlugin({}); tf.tensor([1,2,3,4]).print(); } });
Use the camera component to capture images and feed them to a model. Example index.wxml and index.js snippets are provided in the original article.
Key Takeaways
TensorFlow.js bridges the gap between machine learning and front‑end development, offering three main capabilities: running pre‑trained models in the browser, fine‑tuning models with JavaScript, and building models entirely in JavaScript. It works seamlessly in browsers, Node.js, and even WeChat mini‑programs, expanding AI possibilities for web developers.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.