Monday, October 5, 2020

[How To] Create PHP SLIM SQLITE project on Glitch.com

1. Register your Glitch account.

Go to https://glitch.com/

Click the sign up button.

You are allowed to register using your Google account.

2. Create a new project.

Select the option to import from GitHub.

Import from: https://github.com/infotechrazzi/phpslimsqlite

3. Add Glitch config file

Go to root folder.

Create glitch.json :

{

"install": "composer install",

"start": "composer start",

"watch": {

"ignore": [

"logs"

]

}

}

Create composer.json:

{

"scripts": {

"start": "php -S 0.0.0.0:8080 -t public index.php"

}

}

4. Run

You should get the following default output:

{"action":"none","actionstatus":"done","result":"HELLO"}

Done.

Monday, September 7, 2020

3 Best Alternatives to Adobe PhoneGap after shutdown

On August 11, 2020, we witnessed the end of an era.

Adobe, the powerhouse behind Adobe PhoneGap has officially announced the PhoneGap is shutting down – and with it so is PhoneGap Build. And if that isn’t enough, in the same article, Adobe explains that they will also stop their investment in Apache Cordova. Although this may not come as a shock or a surprise for some, the announcement has made quite a ripple. And the most important question this announcement raises, are Ionic and React Native the best alternatives to PhoneGap?

So in this article, we will look into what PhoneGap is, what it does, and why was it such an important pillar in the development world. We will also compare PhoneGap and Apache Cordova to better understand the differences between the two technologies. Finally, we will do a quick recap on our knowledge about Ionic and React Native, and see if they truly are the best alternatives. Enjoy!

What is Adobe PhoneGap

PhoneGap is an open-source framework for developing cross-platform mobile applications. The project itself was initially started in 2008 by Nitobi, a Canadian web development company. During an iPhone Development Camp, the team at Nitoby tried to create a new technology that would bridge the gap between mobile and web technologies. Needless to say, the “experiment” was a success, and so PhoneGap came to life. And, yes, the name is a play on the words “Phone” and “Gap”.

In fact, this project was so successful that more and more contributors joined in. In 2011, Adobe acquired Nitobi, and the team’s only focus now was developing this revolutionizing new technology. As a part of the acquisition, Nitobi added the PhoneGap code to the Apache Software Foundation (ASF), under the new name of Apache Callback – now known as Apache Cordova. Since the team behind PhoneGap promised the framework will forever be free and open-source, Adobe introduced a different paid service based on PhoneGap, PhoneGap Build.

What is PhoneGap Build

PhoneGap Build at its core is a compiler based on the PhoneGap framework. In simple terms, a compiler is like a translator. It is a program that helps a device or a platform to read and execute statements from different programming languages – the software.

In this case, specifically, a developer writes the code in HTML, CSS, and JavaScript and uploads it to PageGap Build. The system would then compile the code so that different mobile platforms – iOS, Android, and Windows.- understand and execute the code. In other words, it translates the web code into native code

However, as PhoneGap Build is a paid service provided by Adobe, it also comes with other features. For one, teams can create projects in PhoneGap Build and collaborate with each other faster and smoother. The service also comes with Hydration, a tool that speeds up debugging by sending every update directly to the testers’ devices.

Adobe PhoneGap vs Apache Cordova

Many of us often confuse Apache Cordova with PhoneGap, sometimes even thinking they are the same thing. And understandably so. At their core, Apache Cordova and Adobe PhoneGap are very similar, since they were “born” from the same project. However, the two technologies are not one and the same.

PhoneGap vs Cordova

Apache Cordova is actually the free, open-source fork of PhoneGap. This means that anyone can contribute to the project or use it to build applications. PhoneGap, on the other hand, is the Adobe-branded version, or simply put the paid version. So, while Apache Cordova is mainly maintained by the open-source community, PhoneGap is exclusively maintained by Adobe.

Why is Phone Gap shutting down

The answer to this question sums up in three little words – Progressive Web Applications or PWAs for short. Ever since PhoneGap was created back in 2008, its purpose was to break the barrier between the web and mobile technologies. But ever since progressive web applications hit the market, they evolved into a fierce competitor. Especially because of progressive web applications “live” in browsers. So, they are available for anyone, no matter the device, and they are indexed like every other website making them easier to find.

However, until recently progressive web apps were missing two key features – offline support and push notifications. But that is not the case anymore. Progressive web apps today have “workers” – built-in mechanisms that make PWAs work the way they do – that ensure the application is functional even when the device is offline. Moreover, push notifications for PWAs are now supported by all browsers except for Safari.

On top of that, the development process for PWAs is just so much simpler – no adjustments to the code, no containers or compilers, no pushing the app for review. Build once, deploy, and maintain, that’s it. Coincidentally or not, Adobe also stated a decline in PhoneGap usage.

So considering everything, it really comes as no surprise that they shifted focus from PhoneGap and moved towards PWAs. As a result, Adobe stopped development for PhoneGap and its support for Apache Cordova. However, to give their customers a chance to migrate from Adobe PhoneGap to other alternatives, they will keep PhoneGap Build active until October 1st, 2020.

Apache Cordova after PhoneGap shuts down

While Adobe is dropping both technologies, Cordova still has a community behind it. And currently, Cordova powers many of the apps available in both Google Play and App Store. In other words, Cordova has nothing to worry about.

Additionally, PhoneGap and Cordova are part of the same initial project, based on the same technology. So migrating from PhoneGap to Cordova would be a smooth transition for both customers as well as developers. This is also the main reason why Cordova was Adobe’s first alternative suggestion. As for compiler alternatives to PhotoGap Build, there are plenty of Cordova-based options such as Monaca or Framework 7.

Ionic as an alternative to Adobe PhoneGap

Ionic is a mobile framework for cross-platform mobile development built as an alternative to PhoneGap from the beginning. Back in 2013, when Ionic was launched, PhoneGap was the go-to cross-platform solution. But developers were missing a UI library, and had to build everything from scratch.

So, Ionic made use of the up and coming Angular framework and created that library for mobile developers. In simple terms, Ionic and PhoneGap are both based on Cordova. However, while PhoneGap uses vanilla Javascript, Ionic uses Angular – a well known and vastly used JavaScript frontend framework.

Ionic vs PhoneGap vs Cordova

The “battle” between Ionic and Adobe for the 1st place in cross-platform mobile development has been going on ever since 2013. But, now that PhoneGap is shutting down, Adobe is finally stepping down. In fact, recently, Adobe worked closely with the Ionic team to put together a migration plan for PhoneGap customers.

The full documentation is available online and comes with step-by-step instructions on how to migrate from PhoneGap Build to Ionic Appflow. Just like PhoneGap Build, Ionic’s Appflow is a DevOps tool allowing developers to build, deploy, and maintain applications from within one platform. And if the guide is not enough, Ionic also provides paid advisory services.

Other alternatives to PhoneGap

While Ionic seems like the best migration solution, there are plenty of cross-platform mobile development tools out there.Let’s take NativeScript for example. Much like PhoneGap, NativeScript works with vanilla JavaScript. But unlike PhoneGap, NativeScript also works with Javascript frameworks like Angular or VueJS. Another advantage this mobile development tool has is that NativeScript communicates directly with native components. In comparison, most cross-platform technologies need Java or Swift adjustments to do that.

Speaking of “almost” native technologies, our second alternative is of course React Native. React Native is the mobile cross-platform framework built by Facebook for its mobile application. This technology is based on ReactJS and is focused on performance and scalability above everything else.

On top of that, React Native provides an almost perfect native feel, which in the eyes of any user is a big plus. While PhoneGap and React Native are rather different, this doesn’t mean one can’t migrate from PhoneGap to the latter. And with the enormous community behind React Native, it is almost a certainty that there will be someone there to help with the process.

Conclusion

PhoneGap will forever be known as the pioneer of cross-platform mobile development. More importantly, PhoneGap provided both an example and an inspiration for mobile development technologies out there. But, with progressive web applications evolving to an almost native level, Adobe decided it is time to move on. As a result, PhoneGap development has stopped, and so is Adobe’s support for Apache Cordova.

However, PhoneGap customers still have until the 1st of October to migrate to different platforms. After that date, PhoneGap Build will also shut down. So far, Ionic seems like the best choice for the migration, as the Ionic team and Adobe worked closely on a migration guide. Two other alternatives, aside from Ionic, are React Native and NativeScript. Both technologies are excellent for building native-like applications and both benefit from a vast community. So migrating to either will not be an issue.

https://wiredelta.com/3-best-alternatives-to-adobe-phonegap-after-shutdown/

Monday, August 24, 2020

Introducing Danfo.js, a Pandas-like Library in JavaScript

Danfo.js is an open-source JavaScript library that provides high-performance, intuitive, and easy-to-use data structures for manipulating and processing structured data. Danfo.js is heavily inspired by the Python Pandas library and provides a similar interface/API. This means that users familiar with the Pandas API and know JavaScript can easily pick it up.

One of the main goals of Danfo.js is to bring data processing, machine learning and AI tools to JavaScript developers. This is in line with our vision and essentially the vision of the TensorFlow.js team, which is to bring ML to the web. Open-source libraries like Numpy and Pandas revolutionise the ease of manipulating data in Python and lots of tools were built around them, thus driving the bubbling ecosystem of ML in Python.

Danfo.js is built on TensorFlow.js. That is, as Numpy powers Pandas arithmetic operations, we leverage TensorFlow.js to power our low-level arithmetic operations.

Some of the main features of Danfo.js

Danfo.js is fast. It is built on TensorFlow.js, and supports tensors out of the box. This means you can load Tensors in Danfo and also convert Danfo data structure to Tensors. Leveraging these two libraries, you have a data processing library on one hand (Danfo.js), and a powerful ML library on the other hand (TensorFlow.js).

In the example below, we show you how to create a Danfo DataFrame from a tensor object:

const dfd = require("danfojs-node")
const tf = require("@tensorflow/tfjs-node")

let data = tf.tensor2d([[20,30,40], [23,90, 28]])
let df = new dfd.DataFrame(data)
let tf_tensor = df.tensor
console.log(tf_tensor);
tf_tensor.print()

Output:

Tensor {
  kept: false,
  isDisposedInternal: false,
  shape: [ 2, 3 ],
  dtype: 'float32',
  size: 6,
  strides: [ 3 ],
  dataId: {},
  id: 3,
  rankType: '2'
}
Tensor
    [[20, 30, 40],
     [23, 90, 28]]

You can easily convert Arrays, JSONs, or Objects to DataFrame objects for manipulation.

JSON object to DataFrame:

const dfd = require("danfojs-node")
json_data = [{ A: 0.4612, B: 4.28283, C: -1.509, D: -1.1352 },
            { A: 0.5112, B: -0.22863, C: -3.39059, D: 1.1632 },
            { A: 0.6911, B: -0.82863, C: -1.5059, D: 2.1352 },
            { A: 0.4692, B: -1.28863, C: 4.5059, D: 4.1632 }]
df = new dfd.DataFrame(json_data)
df.print()

Output:

Object array with column labels to DataFrame:

const dfd = require("danfojs-node")
obj_data = {'A': [“A1”, “A2”, “A3”, “A4”],
            'B': ["bval1", "bval2", "bval3", "bval4"],
            'C': [10, 20, 30, 40],
            'D': [1.2, 3.45, 60.1, 45],
            'E': ["test", "train", "test", "train"]
            }
df = new dfd.DataFrame(obj_data)
df.print()

Output:

You can easily handle missing data (represented as NaN) in floating point as well as non-floating point data:

const dfd = require("danfojs-node")
let data = {"Name":["Apples", "Mango", "Banana", undefined],
            "Count": [NaN, 5, NaN, 10], 
            "Price": [200, 300, 40, 250]}        
let df = new dfd.DataFrame(data)
let df_filled = df.fillna({columns: ["Name", "Count"], values: ["Apples", 
df["Count"].mean()]})
df_filled.print()

Output:

Intelligent label-based slicing, fancy indexing, and querying of large data sets:

const dfd = require("danfojs-node")
let data = { "Name": ["Apples", "Mango", "Banana", "Pear"] ,
            "Count": [21, 5, 30, 10],
             "Price": [200, 300, 40, 250] }

let df = new dfd.DataFrame(data)
let sub_df = df.loc({ rows: ["0:2"], columns: ["Name", "Price"] })
sub_df.print()

Output:

Robust IO tools for loading data from flat-files (CSV and delimited). Both in full and chunks:

const dfd = require("danfojs-node")
//read the first 10000 rows
dfd.read_csv("file:///home/Desktop/bigdata.csv", chunk=10000)
  .then(df => {
    df.tail().print()
  }).catch(err=>{
       console.log(err);
  })

Robust data preprocessing functions like OneHotEncoders, LabelEncoders, and scalers like StandardScaler and MinMaxScaler are supported on DataFrame and Series:

const dfd = require("danfojs-node")
let data = ["dog","cat","man","dog","cat","man","man","cat"]
let series = new dfd.Series(data)
let encode = new dfd.LabelEncoder()
encode.fit(series)
let sf_enc = encode.transform(series)
let new_sf = encode.transform(["dog","man"])

Output:

Interactive, flexible and intuitive API for plotting DataFrames and Series in the browser:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/danfojs@0.1.1/dist/index.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="plot_div"></div>
    <script>
         dfd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")

            .then(df => {
                var layout = {
                    title: 'A financial charts',
                    xaxis: {title: 'Date'},
                    yaxis: {title: 'Count'}
                }
    new_df = df.set_index({ key: "Date" })
   new_df.plot("plot_div").line({ columns: ["AAPL.Open", "AAPL.High"], layout: layout 
})
            }).catch(err => {
                console.log(err);
            })
    </script>
</body>
</html>

Output:

Titanic Survival Prediction using Danfo.js and Tensorflow.js
Below we show a simple end-to-end classification task using Danfo.js and TensorFlow.js. We use Danfo for data loading, manipulating and preprocessing of the dataset, and then export the tensor object.

const dfd = require("danfojs-node")
const tf = require("@tensorflow/tfjs-node")

async function load_process_data() {
    let df = await dfd.read_csv("https://web.stanford.edu/class/archive/cs/cs109/cs109.1166/stuff/titanic.csv")

    //A feature engineering: Extract all titles from names columns
    let title = df['Name'].apply((x) => { return x.split(".")[0] }).values
    //replace in df
    df.addColumn({ column: "Name", value: title })

    //label Encode Name feature
    let encoder = new dfd.LabelEncoder()
    let cols = ["Sex", "Name"]
    cols.forEach(col => {
        encoder.fit(df[col])
        enc_val = encoder.transform(df[col])
        df.addColumn({ column: col, value: enc_val })
    })

    let Xtrain,ytrain;
    Xtrain = df.iloc({ columns: [`1:`] })
    ytrain = df['Survived']

    // Standardize the data with MinMaxScaler
    let scaler = new dfd.MinMaxScaler()
    scaler.fit(Xtrain)
    Xtrain = scaler.transform(Xtrain)

    return [Xtrain.tensor, ytrain.tensor] //return the data as tensors
}

Next, we create a simple neural network using TensorFlow.js.

function get_model() {
    const model = tf.sequential();
    model.add(tf.layers.dense({ inputShape: [7], units: 124, activation: 'relu', kernelInitializer: 'leCunNormal' }));
    model.add(tf.layers.dense({ units: 64, activation: 'relu' }));
    model.add(tf.layers.dense({ units: 32, activation: 'relu' }));
    model.add(tf.layers.dense({ units: 1, activation: "sigmoid" }))
    model.summary();
    return model
}

Finally, we perform training, by first loading the model and the processed data as tensors. This can be fed directly to the neural network.

async function train() {
    const model = await get_model()
    const data = await load_process_data()
    const Xtrain = data[0]
    const ytrain = data[1]

    model.compile({
        optimizer: "rmsprop",
        loss: 'binaryCrossentropy',
        metrics: ['accuracy'],
    });

    console.log("Training started....")
    await model.fit(Xtrain, ytrain,{
        batchSize: 32,
        epochs: 15,
        validationSplit: 0.2,
        callbacks:{
            onEpochEnd: async(epoch, logs)=>{
                console.log(`EPOCH (${epoch + 1}): Train Accuracy: ${(logs.acc * 100).toFixed(2)},
                                                     Val Accuracy:  ${(logs.val_acc * 100).toFixed(2)}\n`);
            }
        }
    });
};

train()

The reader will notice that the API of Danfo is very similar to Pandas, and a non-Javascript programmer can easily read and understand the code. You can find the full source code of the demo above here (https://gist.github.com/risenW/f54e4e5b6d92e7b1b9b1f30e884ca83c).

Closing Remarks

As web-based machine learning has matured, it is imperative to have efficient data science tools built specifically for it. Tools like Danfo.js will enable web-based applications to easily support ML features, thus opening the space to an ecosystem of exciting applications. TensorFlow.js started the revolution by providing ML capabilities available in Python, and we hope to see Danfo.js as an efficient partner in this journey. We can’t wait to see what Danfo.js grows into! Hopefully, it becomes indispensable to the web community as well.

Play with Danfo.js on CodePen
Link to the official getting started guide
Link to Github repository

https://blog.tensorflow.org/2020/08/introducing-danfo-js-pandas-like-library-in-javascript.html

DNotebook Tutorial: The Javascript Version of Python's Jupyter Notebook

DNOTEBOOK

Dnotebook allows you to create and share pages that contain live code, text and visualizations in a textbook-like manner.

We are redesigning Dnotebook to feel more native. Track progress in this epic issue, project board.

Features:

Easily perform interactive data exploration and analysis using efficient JavaScript packages like Danfo.js.
Easily build, train and prototype machine learning models using different tools like Tensorflow.js
Learn JavaScript in an interactive/visual style. This can hasten learning and understanding.
Plain Experimentation/Prototyping. Any experimentation performed in JavaScript can run on Dnotebooks.

REFERENCE: https://dnotebook.jsdata.org/getting-started

TRY RUNNING DNOTEBOOK ON STACKBLITZ

0) You should have a StackBlitz account first.

1) Create a node.js project

2) Enter the following package.json data:

3) Run (using terminal command)

>npm install

>dnotebook

4) Use dnotebook in the browser

5) Try uploading json data from https://pastebin.com/raw/K8gcmPb4

You should be getting the following output

Thursday, January 30, 2020

[ebook] Deep Learning with JavaScript Neural networks in TensorFlow.js

Deep learning has transformed the fields of computer vision, image processing, and natural language applications. Thanks to TensorFlow.js, now JavaScript developers can build deep learning apps without relying on Python or R. Deep Learning with JavaScript shows developers how they can bring DL technology to the web. Written by the main authors of the TensorFlow library, this new book provides fascinating use cases and in-depth instruction for deep learning apps in JavaScript in your browser or on Node.

about the technology

Running deep learning applications in the browser or on Node-based backends opens up exciting possibilities for smart web applications. With the TensorFlow.js library, you build and train deep learning models with JavaScript. Offering uncompromising production-quality scalability, modularity, and responsiveness, TensorFlow.js really shines for its portability. Its models run anywhere JavaScript runs, pushing ML farther up the application stack.

about the book

In Deep Learning with JavaScript, you’ll learn to use TensorFlow.js to build deep learning models that run directly in the browser. This fast-paced book, written by Google engineers, is practical, engaging, and easy to follow. Through diverse examples featuring text analysis, speech processing, image recognition, and self-learning game AI, you’ll master all the basics of deep learning and explore advanced concepts, like retraining existing models for transfer learning and image generation.

detailed TOC

PART 1: MOTIVATION AND BASIC CONCEPTS

1DEEP LEARNING AND JAVASCRIPT

PART 2: A GENTLE INTRODUCTION TO TENSORFLOW.JS

2 GETTING STARTED: SIMPLE LINEAR REGRESSION IN TENSORFLOW.JS

3 ADDING NONLINEARITY: BEYOND WEIGHTED SUMS

4 RECOGNIZING IMAGES AND SOUNDS USING CONVNETS

5 TRANSFER LEARNING: REUSING PRETRAINED NEURAL NETWORKS

PART 3: ADVANCED DEEP LEARNING WITH TENSORFLOW.JS

6 WORKING WITH DATA

7 VISUALIZING DATA AND MODELS

8 UNDERFITTING, OVERFITTING, AND THE UNIVERSAL WORKFLOW OF MACHINE LEARNING

9 DEEP LEARNING FO R SEQUENCES AND TEXT

10 GENERATIVE DEEP LEARNING

11 BASICS OF DEEP REINFORCEMENT LEARNING

PART 4: SUMMARY AND CLOSING WORDS

12 TESTING, OPTIMIZING, AND DEPLOYING MODELS

13 SUMMARY, CONCLUSIONS, AND BEYOND

APPENDIXES

APPENDIX A: INSTALLING TFJS-NODE-GPU AND ITS DEPENDENCIES

APPENDIX B: A QUICK TUTORIAL OF TENSORS AND OPERATIONS IN TENSORFLOW.JS

what's inside

Image and language processing in the browser
Tuning ML models with client-side data
Text and image creation with generative deep learning
Source code samples to test and modify

about the reader

For JavaScript programmers interested in deep learning.

about the author

Shanging Cai, Stanley Bileschi and Eric D. Nielsen are software engineers with experience on the Google Brain team, and were crucial to the development of the high-level API of TensorFlow.js. This book is based in part on the classic, Deep Learning with Python by François Chollet.

https://www.manning.com/books/deep-learning-with-javascript

Saturday, January 4, 2020

DeepLearning With TensorFlowJS 4 - The intuitions behind Gradient-Descent Optimization

One-layer model is fitting a linear function f(input), defined as output = kernel * input + bias

The kernel and bias are tunable parameters (the weights) of the dense layer.

These weights contain the information learned by the network from exposure to the training data.

Initially, these weights are filled with small random values (a step called random initialization).

To find a good setting for the kernel and bias (collectively, the weights) we need two things:

A measure that tells us how well we are doing at a given setting of the weights. This is represented by a loss function measurement.

A method to update the weights’ values so that next time we will do better than we currently are doing, according to the measure previously mentioned. This is accomplished by an optimizer method i.e. the algorithm by which the network will update its weights (kernel and bias, in this case) based on the data and the loss function.

The compile() method specifies 'sgd' as the optimizer and 'meanAbsoluteError' as the loss.

'meanAbsoluteError' means that the loss function will calculate how far the predictions are from the targets, take their absolute values (making them all positive), and then return the average of those values:

meanAbsoluteError = average( absolute(modelOutput - targets))

'sgd' stands for stochastic gradient descent, a calculus formula to determine what adjustments should be made to the weights in order to reduce the loss.

The fit() method is the training process of a model in TensorFlow.js. It can often be long-running, lasting for seconds or minutes. Therefore, the async/await feature is used.

The evaluate() method calculates the loss function as applied to the provided example features and targets. It is similar to the fit() method in that it calculates the same loss, but evaluate() does not update the model’s weights.

The training loop iterates through the following steps:

1. Draw a batch of training samples x and corresponding targets y_true. A batch is simply a number of input examples put together as a tensor. The number of examples in a batch is called the batch size. In practical deep learning, it is often set to be a power of 2, such as 128 or 256. Examples are batched together to take advantage of the GPU’s parallel processing power and to make the calculated values of the gradients more stable.

2. Run the network on x (a step called the forward pass) to obtain predictions y_pred.

3. Compute the loss of the network on the batch, a measure of the mismatch between y_true and y_pred. Recall that the loss function is specified when model.compile() is called.

4. Update all the weights (parameters) in the network in a way that slightly reduces the loss on this batch. The detailed updates to the individual weights are managed by the optimizer, which was specified during the model.compile() call.

The loss as a function of all tunable parameters is known as the loss surface concept.

The loss surface for this example has a bowl shape, with a global minimum at the bottom of the bowl representing the best parameter settings.

In general, however, the loss surface of a deep-learning model is much more complex. It will have many more than two dimensions and could have many local minima i.e. points that are lower than anything nearby but not the lowest overall.

For larger problems i.e. when optimizing millions of weights, the likelihood of randomly selecting a good direction becomes vanishingly small.

A much better approach is to take advantage of the fact that all operations used in the network are differentiable and hence, to compute the gradient of the loss with regard to the network’s parameters.

The mathematical definition of a gradient specifies a direction along which the loss function increases. When training neural networks, the loss should gradually decrease. Therefore the weights should be moved in the direction opposite the gradient. This training process is aptly named gradient descent.

One of the most desirable properties of deep neural networks are that they are universal approximators. Which means they should be able to cover non-convex functions as well. The problem with non-convex functions is that your initial guess might not be near the global minima and gradient descent might converge to a local minima. A solution to this problem is the stochastic gradient descent approach.

(https://www.mltut.com/stochastic-gradient-descent-a-super-easy-complete-guide/)

The term “stochastic” means drawing random samples from the training data during each gradient-descent step for efficiency, as opposed to using every training data sample at every step. In short, stochastic gradient descent is simply a modification of gradient descent for computational efficiency.

Stochastic means nondeterministic or unpredictable. Random generally means unrecognizable, not adhering to a pattern. A random variable is also called a stochastic variable. (https://math.stackexchange.com/questions/114373/whats-the-difference-between-stochastic-and-random)

Friday, January 3, 2020

DeepLearning With TensorFlowJS 3 - Fitting The Model

This tutorial is based on the book Deep Learning With JavaScript (TensorFlowJS).

////
// Data Markers
////
const dataTraceTrain = {
  x: trainData.sizeMB,
  y: trainData.timeSec,
  name: 'trainData',
  mode: 'markers',
  type: 'scatter',
  marker: {symbol: "circle", size: 8}
};
const dataTraceTest = {
  x: testData.sizeMB,
  y: testData.timeSec,
  name: 'testData',
  mode: 'markers',
  type: 'scatter',
  marker: {symbol: "triangle-up", size: 10}
};
const dataTrace10Epochs = {
  x: [0, 2],
  y: [0, 0.01],
  name: 'model after N epochs',
  mode: 'lines',
  line: {color: 'blue', width: 1, dash: 'dot'},
};
const dataTrace20Epochs = {
  x: [0, 2],
  y: [0, 0.01],
  name: 'model after N epochs',
  mode: 'lines',
  line: {color: 'green', width: 2, dash: 'dash'}
};
const dataTrace100Epochs = {
  x: [0, 2],
  y: [0, 0.01],
  name: 'model after N epochs',
  mode: 'lines',
  line: {color: 'red', width: 3, dash: 'longdash'}
};
const dataTrace200Epochs = {
  x: [0, 2],
  y: [0, 0.01],
  name: 'model after N epochs',
  mode: 'lines',
  line: {color: 'black', width: 4, dash: 'solid'}
};

////
// Set up plotly plot.
////
Plotly.newPlot('dataSpaceWith4Lines', [dataTraceTrain, dataTraceTest, dataTrace10Epochs, dataTrace20Epochs, dataTrace100Epochs, dataTrace200Epochs], {
  width: 700,
  title: 'Model fit result',
  xaxis: {
     title: 'size (MB)'
   },
  yaxis: {
    title: 'time (sec)'
  }
});

////
// Construct and compile model.
////
const model = tf.sequential();
model.add(tf.layers.dense({
  units: 1,
  inputShape: [1],
}));
// Use a slower learning rate for illustration purposes.
const optimizer = tf.train.sgd(0.0005);
model.compile({optimizer: optimizer, loss: 'meanAbsoluteError'});

// Updates a specified line on the plot
function updateScatterWithLines(dataTrace,k, b, N, traceIndex) {
  dataTrace.x = [0, 10];
  dataTrace.y = [b, b + (k * 10)];
  var update = {
    x: [dataTrace.x],
    y: [dataTrace.y],
    name: 'model after ' + N + ' epochs'
  } 
  Plotly.restyle('dataSpaceWith4Lines', update, traceIndex);
}

// Initialize to k=0, b=0 for pretty illustration purposes.  
// You may want to remove this to see how the model looks with
// random initialization
let k = 0;
let b = 0;
model.setWeights([tf.tensor2d([k], [1, 1]), tf.tensor1d([b])]);

////
// Train the model within an async block
////
(async () => {
  await model.fit(trainTensors.sizeMB, trainTensors.timeSec, {
    epochs: 200,
    // Use callbacks to orchestrate certain functions at certain triggers.
    callbacks: {
      onEpochEnd: async (epoch, logs) => {
        k = model.getWeights()[0].dataSync()[0];
        b = model.getWeights()[1].dataSync()[0];
        // console.log(`epoch ${epoch}`);
        if (epoch === 9) {
          updateScatterWithLines(dataTrace10Epochs, k, b, 10,  2);
          console.log('wrote model 10');
        }        
        if (epoch === 19) {
          updateScatterWithLines(dataTrace20Epochs, k, b, 20,  3);
          console.log('wrote model 20');
        }        
        if (epoch === 99) {
          updateScatterWithLines(dataTrace100Epochs, k, b, 100, 4);
          console.log('wrote model 100');
        }        
        if (epoch === 199) {
          updateScatterWithLines(dataTrace200Epochs, k, b, 200, 5);
          console.log('wrote model 200');
        }        
        await tf.nextFrame();
      }
    }
  });
})();  
  
</script>

https://codepen.io/tfjs-book/pen/VEVMMd

Thursday, January 2, 2020

DeepLearning With TensorFlowJS 2 - Plotting Tensor Data

This tutorial is based on the book Deep Learning With JavaScript (TensorFlowJS).

Tensors

Tensors are the core data structure of TensorFlow.js

Tensors can also be thought of as containers for numbers.

They are a generalization of vectors and matrices to potentially higher dimensions.

The number of dimensions and size of each dimension is called the tensor’s shape.

Declaring a tensor

// Pass an array of values to create a vector.

tf.tensor([1, 2, 3, 4]).print();

// Pass a nested array of values to make a matrix or a higher

// dimensional tensor.

tf.tensor([[1, 2], [3, 4]]).print();

//Creates rank-1 tf.Tensor with the provided values, shape and dtype.

tf.tensor1d([1, 2, 3]).print();

//Creates rank-2 tf.Tensor with the provided values, shape and dtype.

// Pass a nested array.

tf.tensor2d([[1, 2], [3, 4]]).print();

(REFERENCE: https://js.tensorflow.org/api/latest/#tensor)

Plotly.js is a charting library that comes with over 40 chart types, 3D charts, statistical graphs, and SVG maps.

(REFERENCE: https://www.w3schools.com/js/js_graphics_plotly.asp )

<p> Plot of 'lattitude' feature vs row index<p>
<div id="dataSpace" class="plots"></div>

const trainData = {
  sizeMB:  [0.080, 9.000, 0.001, 0.100, 8.000, 5.000, 0.100, 6.000, 0.050, 0.500,
            0.002, 2.000, 0.005, 10.00, 0.010, 7.000, 6.000, 5.000, 1.000, 1.000],
  timeSec: [0.135, 0.739, 0.067, 0.126, 0.646, 0.435, 0.069, 0.497, 0.068, 0.116,
            0.070, 0.289, 0.076, 0.744, 0.083, 0.560, 0.480, 0.399, 0.153, 0.149]
};
const testData = {
  sizeMB:  [5.000, 0.200, 0.001, 9.000, 0.002, 0.020, 0.008, 4.000, 0.001, 1.000,
            0.005, 0.080, 0.800, 0.200, 0.050, 7.000, 0.005, 0.002, 8.000, 0.008],
  timeSec: [0.425, 0.098, 0.052, 0.686, 0.066, 0.078, 0.070, 0.375, 0.058, 0.136,
            0.052, 0.063, 0.183, 0.087, 0.066, 0.558, 0.066, 0.068, 0.610, 0.057]
};

trainXs = tf.tensor2d(trainData.sizeMB, [20, 1]);
trainYs = tf.tensor2d(trainData.timeSec, [20, 1]);
testXs = tf.tensor2d(testData.sizeMB, [20, 1]);
testYs = tf.tensor2d(testData.timeSec, [20, 1]);

const dataTraceTrain = {
  x: trainData.sizeMB,
  y: trainData.timeSec,
  name: 'trainData',
  mode: 'markers',
  type: 'scatter',
  marker: {symbol: "circle", size: 8}
};
const dataTraceTest = {
  x: testData.sizeMB,
  y: testData.timeSec,
  name: 'testData',
  mode: 'markers',
  type: 'scatter',
  marker: {symbol: "triangle-up", size: 10}
};

Plotly.newPlot('dataSpace', [dataTraceTrain, dataTraceTest], {
  width: 700,
  title: 'File download duration',
  xaxis: {
     title: 'size (MB)'
   },
  yaxis: {
    title: 'time (sec)'
  }
});
</script>

https://codepen.io/tfjs-book/pen/dgQVze

-

- -

Monday, October 5, 2020

1. Register your Glitch account.

2. Create a new project.

3. Add Glitch config file

4. Run

Done.

Monday, September 7, 2020

Monday, August 24, 2020

Some of the main features of Danfo.js

Closing Remarks

DNOTEBOOK

Features:

TRY RUNNING DNOTEBOOK ON STACKBLITZ

Thursday, January 30, 2020

about the technology

about the book

table of contents

PART 1: MOTIVATION AND BASIC CONCEPTS

PART 2: A GENTLE INTRODUCTION TO TENSORFLOW.JS

PART 3: ADVANCED DEEP LEARNING WITH TENSORFLOW.JS

PART 4: SUMMARY AND CLOSING WORDS

APPENDIXES

what's inside

about the reader

about the author

Saturday, January 4, 2020

Friday, January 3, 2020

Thursday, January 2, 2020