Forem: Pulkit Kashyap

Tensorflow.js: Building a quick and dirty stock market predictor

Pulkit Kashyap — Tue, 08 Mar 2022 17:13:39 +0000

When you think of Machine Learning, the first thing that strikes you is Python. Well, great community support and plenty of available packages make Python a great choice. But, while going through Andrew Ng's ML course I realized that Machine Learning is about how you define your model and not about the programming language being used. So I thought, why not give Tensorflow.js a try.

Building a quick and dirty stock market predictor using Tensorflow.js

I'll be using ICICI bank's dataset to predict the closing price based on the provided opening price.

The data is the price history and trading volumes of the ICICI bank stock. The data spans from 1st January 2000 to 30th April 2021.

Checkout Kaggle for various datasets.

Choosing a model

Let's have a look at the first 1000 values of the dataset using a scatter plot.

Plotting the open price against the closing price

Now by looking at the data, we can see that if we define a line of best fit then we establish a relation between the opening and the closing price.

Does this ring any bells? Remember the equation of straight line we studied in high school?



y = mx + c

m -> slope of the line
c -> y intercept

And this is exactly what simple linear regression ML models use. It is a statistical model which is used to define a relationship between two variables. The independent variable x is used to predict the value of the dependent variable y.

In ML terminology this equation is called the hypothesis.

Now the ICICI bank stock dataset has two columns named Open & Close and contains more than 1000 rows. So instead of adding/operating on these values one by one, they are generally represented in the form of a matrix.

Understanding the cost function

Cost function (sometimes also called an error function)is a function that maps an event or values of one or more variables onto a real number intuitively representing some "cost" associated with the event. An optimization problem seeks to minimize a loss function.

Source Wikipedia

In other words, it is the difference between the value that the hypothesis function spits out and the actual value. Since we are looking to find the line of best fit, the aim is to minimize the cost. We want our predicted value to be very close to the actual value while the model is being compiled.

Squared error cost function used for linear regression

Source Medium

Let's have a glance at the hypothesis function

x -> This will be the opening price (Nx1 matrix)
m,c -> Their value is chosen to minimize the cost function. Let's park the explanation part for now.

In the world of Tensorflow.js these matrices are called tensors. You can read more about them here.

Getting things ready

Add the below mentioned script tags to your HTML file to ensure that Tensorflow and tfjs-vis (used for visualization) are available on your page.



 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis"></script>

Loading the csv file and plotting the values on Scatter plot

We are using tfvis here to plot our dataset.



function plot(points, predictedPoints) {
    const data = { values: [points, ...(predictedPoints ? [predictedPoints] : [])],
        series: ['original', ...(predictedPoints ? ['prediction'] : [])] };

    const surface = { name: 'ICICI Bank stock price prediction' };
    tfvis.render.scatterplot(surface, data, {xLabel: 'Open', yLabel: 'Close'});            
}

// All the tensorflow utility functions can be 
accessed through the variable 'tf'
// File path can be changed
let dataset = tf.data.csv('http://localhost:4000/ICICIBANK.csv');
let points = dataset.map(item => ({
       x: item.Open,
       y: item.Close
}));

let pointsArr = await points.toArray();
if(pointsArr.length&1) pointsArr.pop();
/**
* Shuffling the data set so that our model does not 
* encounter similar values in each step
* */
tf.util.shuffle(pointsArr)

plot(pointsArr);

Now the price values can be in different ranges, so it becomes really important to bring the values on a common scale. This process is also called normalization. Typically you would want to bring the values in the range 0-1.



/**
 * Normalize the tensor
* */
function normalize(tensor, prevMin, prevMax) {
    const min = prevMin || tensor.min(),
         max = prevMax || tensor.max(),
         normalisedTensor = tensor.sub(min).div(max.sub(min));
         return normalisedTensor;
}

/**
* Denormalize the tensor
* */
function denormalize(tensor, min, max) {
      return tensor.mul(max.sub(min)).add(min);
}

Defining the feature and output tensor



let featureTensor = tf.tensor2d(features,[features.length,1]);
let outputTensor = tf.tensor2d(outputs, [outputs.length,1]);
let normalisedFeatures = normalize(featureTensor);
let normalisedOutput = normalize(outputTensor);

Splitting the datasets into training and testing

Why is splitting required?
Splitting ensures that our model is built using a specific set of data so that when we evaluate the model against the test data it is actually evaluated against something it has never encountered during the creation phase. It also gives you a sense of how it might perform in production.

Generally 70% of the data is reserved for training

If you don't find the reasoning very intuitive, I would highly recommend reading this blog.



let [trainFeatures, testFeatures] =
tf.split(normalisedFeatures,2);

let [trainOutput, testOuput] = tf.split(normalisedOutput,2);

Creating a model

We'll use the Tensorflow layers API to create the model.



function createModel() {
    let model = tf.sequential();

    model.add(tf.layers.dense({
        units: 1,
        inputDim: 1,
        activation: 'linear',
        useBias: true
    }));

    // sgd -> gradient descend
    let optimizer = tf.train.sgd(0.1);
    model.compile({
        loss: 'meanSquaredError',
        optimizer
    })
    return model;
}

let model = createModel();

tf.sequential() - This means that the model will be sequential i.e output of one layer will act as an input to the other.
units - Our model has one unit.
inputDim - input dimension is 1 as we have only one feature which is the opening price
activation - We are using linear regression here, so using linear activation function here.
useBias - 'c' in our hypothesis function is called the bias term

Now, the point that is a little unclear here is tf.train.sgd. Remember that we parked the explanation part for m,c previously. Gradient descend is the algorithm that tries to find the minimum value for these terms to minimize the loss(happens at every iteration). Read more about it here. It takes in a learning rate to find the step of descent. A traditional default value for the learning rate is 0.1 or 0.01, and this may represent a good starting point on your problem..

As mentioned earlier our cost(or loss) function will be a squared error function.

Evaluating the model against the test set



let testing =  await model.evaluate(testFeatures, testOuput);

Predicting the values and plotting them

using tfvis to create a scatterplot



async function plotPrediction(model) {
    let normalisedXs = [];
    while(normalisedXs.length < 1000){
        var r = Math.random();
        normalisedXs.push(r);
    }
    normalisedXs = tf.tensor2d(normalisedXs, [1000,1])
    const normalisedYs = model.predict(normalisedXs);
    const xs = denormalize(normalisedXs, featureTensor.min(), featureTensor.max()).dataSync();
    const ys = denormalize(normalisedYs, outputTensor.min(), outputTensor.max()).dataSync();

    const predictedPoints = Array.from(xs).map((val, ind) => ({
        x: val, y: ys[ind]
    }));
    plot(pointsArr, predictedPoints);
}

Let's see how the scatter plot looks like for our predicted values

Well, there are a couple of things that I didn't mention like saving the model, loading the model from storage, etc. But you can find the complete code in this Github Repo.

A question for the readers

So, if you run this code locally and plot the original and predicted values on the scatter plot, you will notice that every predicted closing price is less than its corresponding opening price. I am not quite sure as to what is causing this issue. Maybe, I'll try tinkering around with the learning rate.

Let me know if you catch the issue 🙏.

Browser and React onChange event: The conundrum

Pulkit Kashyap — Sun, 01 Aug 2021 17:24:20 +0000

The Problem

Sometimes I think we all are so inclined towards Javascript frameworks or libraries that we don't pay attention to how things work natively. Recently when I was debugging an issue about input tag's onchange event, I was startled when the callback function was not being called on changing the input value. Well, React triggers onChange whenever one changes the input value. Coming from React I just assumed that such things would work the same in vanilla Javascript 😔 😔 . The way browser fires the onchange event is different.

Javascript onchange

Coming from React it's easy to fall into the trap. But let's understand some events the browser fires when one interacts with the input tag

onfocus - Fired when the user sets focus on the element
onblur - Opposite of onfocus. Fired when an element loses focus
onchange - (the most interesting one 😅). Unlike React, the browser fires onchange event after focus from input element is taken off. So when focus is set on an input element and something is typed, onchange won't be fired until and unless the input element is out of focus.

When an element is out of focus, the browser assumes that the user is done making the change(probably the reason why onchange is fired late).

Let's see this in action. Check out the JS part here and open your console to see what is logged.
Note that onchange is fired only when input is out of focus

Question for the readers 🧐

I am not too sure as to why in the above example onblur callback is fired after the onchange callback. We know now that onchange is fired when the element is out of focus. Know the reason?? Please comment down below.

React onChange

Apart from the camel case difference the way React onChange handler works is also pretty different. It gets triggered whenever one makes a change in the input element value.
I tried to create something like React onChange. Let's have a look (not saying that this is how it works exactly).

I had attached my custom onChange callback to the element.
Using setter/getter to get the previously entered value and compare it with the latest one.
Additionally attached a keyup event listener to get hold of the latest value
Notice that the custom onChange handler gets triggered everytime a change is made.

Bye Bye !! 👋👋 Hope there were takeaways.

Let's connect

Linkedin
Twitter
Github

Custom Validation in Materialize css

Pulkit Kashyap — Fri, 19 Jun 2020 18:37:03 +0000

Hey! Thanks for dropping by. Well, if you are using Materialize in your project then I believe this trick can be really helpful for you. Almost every website has some kind of form or input fields the user interacts with. And most of the fields have some validation logic attached to them. Think of a case where you want the user to enter a unique username as the input. But when this username is not unique we immediately notify the user by displaying a warning for the same.

I had a similar use case and I was using Materialize, a CSS framework in my project. It provides you an easy way to show or customize warning messages if the input value is not in the expected format. But what if you want to perform custom validation for an input. For eg. username must not contain characters like @, { etc. Unfortunately the documentation does not mention any such scenarios.

So just like any other developer I googled that immediately. But I could not find any useful resource. After digging a bit on how Materialize manages to show the warning messages, I came out with a solution(a little hackish 😅). Basically Materialize adds valid class to the input to show succes message and vice-versa. Accordingly it displays the helper text. Here is a quick demo -

The above code checks if username contains [@.;:] and shows message accordingly. I attached event listeners for fetching the current value and toggled classes accordingly.

Hope this helped.

Find me on my social media handles 🤟.

My Open Source Experience With Fossasia

Pulkit Kashyap — Tue, 12 Nov 2019 10:23:42 +0000

So finally with this post I have decided to pen down my experience of contributing to one of the biggest open source communities which is Fossasia. Well, I always wanted to contribute to open source projects but always held back thinking it would be difficult to get used to the huge code base they generally have and to sync up with others contributing. Finally I started out with one of the Fossasia projects and I must say it has been a great learning curve. I would be lying if I said codeheat wasn't a motivation to start looking at Fossasia repositories. For those of you who don't know what codeheat is I would highly recommend checking it out.
I feel with events like codeheat one capture the true essence of open source contribution while still being in a healthy competitive environment. Not only you focus on your personal contributions but you learn from others you might be doing it better in certain ways. This year codeheat began in Sept'19 and would go on till Jan'20.

While Fossasia has many of Github repositories but what caught my attention the most was susi.ai. So I decided to contribute to it for the following reasons -:

I like working with React and it uses React for front end 😅.
Love the idea of a bot wherever anyone can add skills.
Just a few lines of code and you can add susi.ai bot to your website. I contribute mainly to susi_webclient.

About susi.ai: SUSI.AI is an artificial intelligence system, combining pattern matching, internet data, data flow, and inference engine principles. Through some abilities to reflect, it can remember the user input to produce results. What's cool is that you can create your own skills and bot within certain lines of code it can be added to your webpage.

Susi.ai web client tech stack 🚀

CSS
Javascript
ReactJS
Redux
Material-UI
styled-components

Whenever you jump into a new codebase it is always tough to relate to it. So for starters I picked a basic UI issue to get familiar with the coding style and I must say that I had a lot to learn. Better if I list down my learnings -:

Reusability of components.
Making component wrappers wherever necessary.
Came to know about styled components (a great way to style your components).
Best practices to use React along with Redux.
Creating architecture in a such a way that adding any new feature is less of a pain and more of fun.

The first major issue that I picked was of converting promises to async/await. This really helped me to familiarise myself with architecture.
Though it took my pull request a while to be finally merged, but it feels very good when your contributions are accepted. I have been a regular contributor since then.

My thoughts on getting started with Fossasia

To start off explore all the projects and find out the one which you think resonates with your interests. It is important to communicate with others contributing or wanting to contribute. So make sure you join the Gitter channels. If you are a beginner to open source then there are a lot of beginner-friendly issues, try them out. I feel sometimes looking at some other person's PR might also help. Before picking up an issue knowing exactly what it expects is essential as it would save a lot of time. Last but not the least go through the Readme and Coding guidelines to avoid making unnecessary errors.

Well, Codeheat'19 is almost halfway through and it has been a great experience so far. Looking forward to some more contributions ahead.

Keep contributing 😀!!

Understanding Microtasks and tasks in JS

Pulkit Kashyap — Sun, 18 Aug 2019 07:56:33 +0000

Well, as Javascript developers we all are in a habit of using promises, timers etc. Whenever we think of making a particular piece of code asynchronous the first thing that comes to our mind is using promises or maybe a setTimeout(). Have you ever wondered how these things work under the hood? I have been going through a lot of blogs regarding execution queues, microtasks and tasks, so I decided to jot down my learnings in this post.

Let's start off with a quick exercise(just to brush up your javascript skills)

Now put on your thinking hats and think what output of above code snippet would be.

The correct answer goes as

call the printer
Inside the Printer
Promise resolved
Timeout 1

Yes the output is not exactly what a lot of us must be expecting🤷‍♂️ 🤷‍♂️. But what goes on behind the scenes in Javascript is very engaging.

Actually when the printer function is called the Inside the Printer is logged. Now the important thing to note here is that even when the timer is set to 0 the log statement inside setTimeout() is executed after promise is resolved. To understand this you need to know how the event loop handles tasks and microtasks. The event loop runs continuously and ensures that all the tasks queued are executed sequentially. So in our case the setTimeout() is scheduled as a task which is executed in the next event loop. But the question here remains is How the hell does Promise log the statement first?

Promises are queued as microtasks. Microtasks are executed straight after the currently executing script and thus promises are resolved in the same event loop. Calling .then() puts the promise in the microtask queue. The microtask queue is processed after callbacks as long as no other JavaScript is mid-execution. That is why Promise resolved is logged before Timeout 1.

The crux is -:

Tasks have to wait for next round of execution
Microtasks can execute in the same round after the current script finishes execution

Hopefully I could explain the topic in a simple yet effective manner. Bye !!!