Thatohatsi Matshidiso TilodiMachine Learning and JavaScript
Introduction to Machine Learning
Ever wondered if it is possible to integrate data science and web development?...
Well, we all know that machine learning is a vital element of today's technological evolution. In multitudes of fields, ranging from healthcare to agriculture, businesses have begun to leverage the potential of machine learning for decision-making and strategy planning. Although JavaScript was initially designed to augment web development with smooth, interactive features, developers increasingly use JavaScript for purposes beyond web design and development. Type casting and mobile device tracking are examples of machine learning functions that can be performed with JavaScript.
Overview of JavaScript Files and Libraries HTML and CSS dictate web face design and structure.
JavaScript typically provides the interactivity that users look for when viewing webpages. What I did not know or rather was not aware of is that this is sometimes achieved by injecting JavaScript code into the HTML document directly, by creating a separate .js file and using the script tag in an HTML file, or by linking the JavaScript file using a URL. The full web address of a JavaScript file can be referenced in the src attribute of such a script tag just as it would in the href attribute of a hyperlink. To facilitate these interactions and seamless processes, developers use a range of JavaScript-based libraries and frameworks. Also having to incorporate these tools, I further learned that one can simplify operations such as streaming video, fulfilling requests for free documentation, page layout, and customizing virtual reality (VR) gameplay design.
Popular Libraries for Machine Learning in JavaScript
There are many machine learning libraries that are either written in JavaScript or have APIs for JavaScript. All these libraries target different use cases, from simple model deployment to training models in the browser. Below are some of these technologies that make machine learning in the browser not just possible, but even easy and fun.
A little bit that kept me wondering about Brain.js and Tensorflow.js (which I have never used before) well with Brain.js, also known to be developed by the Liquid Studio Group, is a library for training neural networks in "vanilla" JavaScript. The library provides a high-level abstraction layer above TensorFlow.js, which simplifies the training and working with neural networks. Brain.js, however, is a great solution for training models in browser environments.
I know a lot of data scientists or even data science students like myself are aware of tensorflow, well **tensorflow.js **is something new or rather a library I heard under the integration of data science and web development. TensorFlow.js is basically a Google library used for training models in the browser. It supports both classic models from conventional machine learning and models for deep learning with relatively advanced capabilities. The library contains convolutional networks, recurrent neural networks, and others, and developers on the other hand can create, train, and deploy different model types directly in JavaScript.
One thing I really never saw coming is that KNN, which is also known as K-nearest neighbors, is a small machine learning library written in TypeScript (what you would expect to use under web development). One can also say that it is simple and user-friendly, the library has a limited set of functions that make it possible to solve some problems related to a machine learning task in a browser or a server-side environment. It's especially good for problems with classification.
Synaptic on the other hand is a JavaScript neural network library for both Node and the browser. It's good for experimenting with different types of neural networks like both high-level and primitive. At first, it may look more complex than it really is. The library is about training and working with models "a la Brain.js," but can be more flexible and meet more specific requirements.
Dljsis a library for deep learning in JavaScript. The authors pursued a bold goal that being to provide the most powerful tools for deep learning in the simplest available scripts. The library contains six models, twelve losses, and thirteen optimizers. It's probably a good choice for a limited number of specific tasks.
Comparing Machine Learning Frameworks in JavaScript
Key Features and Capabilities of Popular Machine Learning Frameworks
We shall briefly review the core features and capabilities of popular JavaScript machine learning frameworks. Specifically, we will review the following three frameworks namely TensorFlow.js, Brain.js and Synaptic.js
1. TensorFlow.js
We will eventually present an in-depth comparison of these ML frameworks based on different perspectives summarized in Section 4. Specifically, we rely on both our comprehensive study and further feedback from the communities and experienced developers who have contributed to these frameworks.
A. TensorFlow.js
We all know that TensorFlow is an open-source machine learning library developed by Google, commonly used to build various neural networks. TensorFlow is developed primarily with Python. However, evolving TensorFlow.js recently allows JavaScript developers to train and use models directly in the browser or at Node.js. Therefore, it improves user experience by enabling server-side and client-side implementation, especially allowing browsers to run predictive machine learning models without sending user data to the server. TensorFlow.js directly exposes low-level operations which are performed server-side on CPUs and client-side on WebGL, with later devices such as CPUs and GPUs for opening on mobile. Our study uses both CPU and WebGL backends for comparison. The training of a machine learning model is now possible on a webpage. The library is billed to carry out "training from a user's own data" in an incremental way, which is expected as users become able to add functions, they want to use JavaScript libraries without using Python libraries.
How to go about some of the installations and some of the real-life applications examples:
First step:
With the first step what is basically required of you is to have Node.js or npm first installed so that you are able to install tensorflow.js via your command prompt using the configuration below:
npm install @tensorflow/tfjs
Second Step:
The second step basically requires one to start loading using pre-trained models. These pre-trained models can also come from the tensorflow.js hub. This can be done using the configuration in code set below:
import * as tf from '@tensorflow/tfjs';
import * as mobilenet from '@tensorflow-models/mobilenet';
const img = document.getElementById('img');
const model = await mobilenet.load();
const predictions = await model.classify(img);
console.log(predictions);
Third Step:
This is the part where one gets to build and train models in browser.
The below example is simple neural network that basically assisting a model to recognize handwritten digits.
import * as tf from '@tensorflow/tfjs';
import * as mobilenet from '@tensorflow-models/mobilenet';
const img = document.getElementById('img');
const model = await mobilenet.load();
const predictions = await model.classify(img);
console.log(predictions);
Fourth Step/ last step:
This is where real-life applications come into play and this is by example, we can try using the above pre-trained models to help classify web-cam images in real-time
const video = document.getElementById('webcam');
const model = await mobilenet.load();
async function classifyVideo() {
const predictions = await model.classify(video);
console.log(predictions);
requestAnimationFrame(classifyVideo);
}
classifyVideo();
Practical Applications of JavaScript in Machine Learning
So, we now have a basic understanding of JavaScript and event listeners and their functions. Let's try move forward and get into more practical applications of JavaScript and see some case studies of it in machine learning and web development. We are going to explain how to create a convolutional neural network in TensorFlow.js, create a few types of chatbots using plain JavaScript with different conversational services, and how to perform sentiment analysis.
Pure JavaScript Sentiment Analysis:
You can find several models trained for Natural Language Processing (NLP) in machine learning libraries. There are several powerful libraries in Python which can create, train, and test several models for NLP. However, what is going to happen when you want to run a large pre-trained model in the front-end using a web browser? .... Well the answer is that you have TensorFlow.js. But, how can you perform the same task using plain JavaScript without a powerful library like TensorFlow.js? ...Of course, you do not need TensorFlow.js to perform this task, or sometimes to apply Machine Learning in the browser. The reason to use TensorFlow.js for NLP tasks is that it allows you to train and test your selected models for NLP. But, what you are going to learn in this article is how you can still use traditional machine learning models for NLP without TensorFlow.js. Therefore, you are going to need the classification model from compromised_sentiment, which is just an NLP model within compromised, applied to perform sentiment analysis using the compromise package.
Case studies provided with their code examples:
Case Studies of Successful Implementations
Case studies constituting this section are provided to look at several successful implementations of JavaScript for the work of training and predictions with different machine learning models.
Case Study 1: Lemonade Sales Prediction Webapp
A simple regression model known to many beginners is predicting lemonade sales dependent upon the temperature. This is one of the most basic applications of the idea behind the significance of machine learning and how it can be utilized practically. This is one such application where D_Meta allows the user to forecast sales dependent upon given average temperatures. This is implemented via JS/Keras Neural Network API. For most JavaScript frameworks, using D_Meta's model to predict is similar. Data Fields contain Predictions used to input index against test data/training data with Pivot.
<!DOCTYPE html>
<html>
<head>
<title>Lemonade Sales Prediction</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
</head>
<body>
<h1>Lemonade Sales Prediction</h1>
<input type="number" id="temperature" placeholder="Enter Temperature">
<button onclick="predictSales()">Predict Sales</button>
<p id="prediction"></p>
<script>
const modelUrl = 'path/to/your/model.json'; // Replace with your model URL
let model;
async function loadModel() {
model = await tf.loadLayersModel(modelUrl);
console.log("Model Loaded");
}
async function predictSales() {
const temperature = parseFloat(document.getElementById('temperature').value);
const inputTensor = tf.tensor2d([[temperature]]);
const prediction = model.predict(inputTensor);
const sales = prediction.dataSync()[0];
document.getElementById('prediction').innerText = `Predicted Sales: ${sales.toFixed(2)}`;
}
loadModel();
</script>
</body>
</html>
Case Study 2: Predicting Bike Sales in Time Series
In addition to being familiar with beginners, another concept called Time Series prediction is forecasting the amount of unit sales or cash amount variables in the future by using the machine learning model. This is a JS module using Keras LSTM and TimeWindow to
forecast next month sales through updating at each target pivot - in a sequential manner amongst different models. The default state of accomplishment is achieved when obtained time-series data wrapping is used surrounding Bikesales CSV inside the app-items for a time window of size four. Side value functions provided include chart_interval, define_target_field, file_selected, predict.
<!DOCTYPE html>
<html>
<head>
<title>Bike Sales Prediction</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
</head>
<body>
<h1>Bike Sales Prediction</h1>
<button onclick="predictBikeSales()">Predict Next Month Sales</button>
<p id="prediction"></p>
<script>
const modelUrl = 'path/to/your/bike-sales-model.json'; // Replace with your model URL
let model;
async function loadModel() {
model = await tf.loadLayersModel(modelUrl);
console.log("Model Loaded");
}
async function predictBikeSales() {
const last4MonthsSales = [/* array of last 4 months sales */];
const inputTensor = tf.tensor2d([last4MonthsSales]);
const prediction = model.predict(inputTensor);
const nextMonthSales = prediction.dataSync()[0];
document.getElementById('prediction').innerText = `Predicted Next Month Sales: ${nextMonthSales.toFixed(2)}`;
}
loadModel();
</script>
</body>
</html>
Case Study 3: Weather Forecasting Using OpenWeather API
A weather forecasting model utilizing the OpenWeatherMap API, the temperature, pressure, humidity, etc. are all used. This project is not advanced, but it is serving as a means of providing all the relevant inputs and thus providing the capabilities of fetching both historic as well as current weather data. City inputs are used for predicted temperature response, which hence can be created via a basic LSTM as outlined in case study 2. The JS model present wraps around the model located within the API via the server making use of Open REST API services. The experiment then provides final temperature forecasts and steps where particularly interested individuals can look at the code. Code is directly passed on to like-minded learners with the final experiment report being a pertinent means of deploying ready-made base models thereby updating the code for fetching competing yearly or weekly forecasts for every future workshop.
<!DOCTYPE html>
<html>
<head>
<title>Weather Forecasting</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
</head>
<body>
<h1>Weather Forecasting</h1>
<input type="text" id="city" placeholder="Enter City">
<button onclick="predictWeather()">Predict Weather</button>
<p id="prediction"></p>
<script>
const apiKey = 'your_openweather_api_key'; // Replace with your OpenWeather API key
const modelUrl = 'path/to/your/weather-model.json'; // Replace with your model URL
let model;
async function loadModel() {
model = await tf.loadLayersModel(modelUrl);
console.log("Model Loaded");
}
async function fetchWeatherData(city) {
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`);
const data = await response.json();
return [data.main.temp, data.main.pressure, data.main.humidity]; // Example of features used
}
async function predictWeather() {
const city = document.getElementById('city').value;
const weatherData = await fetchWeatherData(city);
const inputTensor = tf.tensor2d([weatherData]);
const prediction = model.predict(inputTensor);
const forecastedTemperature = prediction.dataSync()[0];
document.getElementById('prediction').innerText = `Predicted Temperature: ${forecastedTemperature.toFixed(2)}°C`;
}
loadModel();
</script>
</body>
</html>
Challenges and Future Directions
How would I conclude if you may ask?
As a student who is stuck between the likes of data science and web development I have actually come to understand that the goal of integrating JS with machine learning and data science has long been the ultimate goal of the package development journey of which I never knew is possible integrating the two in the very first place. In addition to practical techniques such as memory reuse, code optimizations, and benchmarking, some challenges were raised to the integration of JS with data science. Such efforts and experience are valuable, like for instance their insights provide an excellent starting point for further research. One of the main obstacles is that of the potential difficulty in working with polymorphic and nonspecialized data. Arrays in C, Python, and R tend to be more compact than objects, and for loops tend to be considerably slower for JavaScript with random access arrays than for JavaScript with fast integer-typed array methods. So what is your pick on that?...Do you also think integrating the two will go a long way especially if you're also stuck between the likes of data science and web development?
If you read this far, please comment below and tell what you think, I will appreciate your inputs.
