DEV Community: Gourav Singh Rawat

Know about HTTP/1.0 & HTTP/2

Gourav Singh Rawat — Mon, 08 Jan 2024 14:27:31 +0000

Hi readers!

HTTP

HTTP/1 and HTTP/2 are two versions of the Hypertext Transfer Protocol, which is the foundation of data communication on the World Wide Web. They define how messages are formatted and transmitted, and how web servers and browsers should respond to various commands.

HTTP/1.0:

Year of Introduction: 1996

Key Features:

Simple and straightforward protocol.
Each request from the client is answered by a single response from the server, and the connection is closed after each request/response.
The lack of request pipelining often led to a phenomenon known as the "head-of-line blocking," where a slow-loading resource could block the loading of subsequent resources in parallel.

HTTP/1.1:

Year of Introduction: 1997

Key Features:

Introduced persistent connections, allowing multiple requests and responses to be sent over a single connection, reducing latency.
Request pipelining, which allows multiple requests to be sent without waiting for each response, improving performance.
Host header to support multiple domains on the same IP address.
Chunked transfer encoding for efficient transmission of large data.

HTTP/2:

Year of Introduction: 2015

Key Features:

Binary protocol: Unlike the text-based nature of HTTP/1.x, HTTP/2 is a binary protocol, which makes it more efficient to parse and less error-prone.
Multiplexing: Allows multiple requests and responses to be sent in parallel over a single connection, addressing the head-of-line blocking issue.
Header Compression: Reduces overhead by compressing header information.
Server Push: Allows the server to push resources to the client before they are explicitly requested, improving performance.
Prioritization: Requests can be assigned priority levels, allowing more important resources to be delivered first.

HTTP/2 was designed to address the limitations of HTTP/1.x and improve the overall performance and efficiency of web communication. It has become widely adopted, and many modern websites use HTTP/2 to provide a faster and more responsive user experience.

Hope you find this helpful. Thanks for reading.

How to make an API using FastAPI

Gourav Singh Rawat — Sat, 23 Dec 2023 17:29:51 +0000

Let’s see how we can create a basic API using the FastAPI framework.

First, make sure you have FastAPI and Uvicorn installed. You can install them using:

As the FastAPI documentation suggests you'll need Uvicorn and FastAPI installed you can do so by:

pip install fastapi uvicorn[standard]

Now, let’s create a simple FastAPI application where we’ll be setting up our FastAPI app. Create a file named main.py:

# main.py
from fastapi import FastAPI

app = FastAPI()

But that’s not all we’re just initializing our FastAPI instance, now we also need to setup something known as CORS (Cross-Origin Resource Sharing).

CORS is important when you want to allow your API to be accessed by web applications from different origins. Modify your main.py file.

# main.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# Configure CORS

origins = ["http://localhost", "http://localhost:3000", "https://yourfrontenddomain.com"]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

Replace the allowed origins (origins) with the actual domains of your front-end applications. Or if you’re just testing your app on localhost then you might not need to change much…

Make an API.

@app.get("/")
async def read_root():
    return {"message": "Hello, World!"}

Your file should look like this.

# main.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# Configure CORS

origins = ["http://localhost", "http://localhost:3000", "https://yourfrontenddomain.com"]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/")
async def read_root():
    return {"message": "Hello, World!"}

Call your API of endpoint /. But before that we’ll need to start running the server. Now use the Uvicorn to initiate the FastAPI server.

uvicorn main:app --reload

This will start the FastAPI development server, and your API will be accessible at http://127.0.0.1:8000. The CORS middleware will allow requests from the specified origins.

You can access the API by opening your browser or using a tool like curl or Postman. For example, if you’re running it locally, open http://localhost:8000 in your browser, and you should see the “Hello, World!” message.

Hope this was useful. Thanks for reading.

Trying FastAPI as a Python Django developer.

Gourav Singh Rawat — Thu, 21 Dec 2023 11:18:42 +0000

Hello readers!

It's been almost 3 years and most of the time I've always chosen Django, you ask? Well, Django provided everything out of the box I could ask for from authentication to database flexibility and whatnot.

What about the FastAPI though?
FastAPI is a modern, fast (as the name suggests), and highly performant web framework for building APIs with Python. If you're familiar with Django, exploring FastAPI can introduce you to some exciting features and differences. Here are some amazing things about FastAPI that might appeal to a Django developer:

1. Automatic Documentation:

FastAPI automatically generates interactive API documentation using OpenAPI and Swagger UI.

2. Async Support:

FastAPI is designed with asynchronous support, enabling efficient handling of concurrent requests.

3. Automatic Data Validation:

Python type hints are used for automatic data validation, reducing the need for manual validation code.

4. Dependency Injection:

FastAPI features a powerful dependency injection system for managing and injecting dependencies into endpoints.

5. Built-in Authentication:

FastAPI provides built-in support for OAuth and JWT authentication, streamlining the implementation of user authentication and authorization.

Soon I'll be posting a good beginner tutorial about FastAPI so stay tuned!!!

So my suggestion would be if you're going to build a project with a limited use and fewer developer features, go with FastAPI.

Best Repositories for beginners to contribute in Hacktoberfest

Gourav Singh Rawat — Mon, 17 Oct 2022 12:36:38 +0000

Hacktoberfest 2022!

Since Hacktoberfest 2022 is live, many new developers & engineers are stepping forward and looking for some open source projects that fit for their stack.
But it's like finding a needle in a haystack...since there are lots & lots of repositories.

If you want a video for this article

This is the article for you to find few best open source projects that are hacktoberfest accepted & easy to understand as well.

1. Check Github topics for Hacktoberfest

Go to Github and in Hacktoberfest topics section.

Here you can find many projects and all of them are hacktoberfest accepted. You can select whichever suits your techstack.

2. Search for Docs websites

Docs websites are usually open source and are relatively easier to understand. If you find anything where you can add some content or change some UI or anything.
For example this repository:

microsoft / Web-Dev-For-Beginners

24 Lessons, 12 Weeks, Get Started as a Web Developer

Web Development for Beginners - A Curriculum

Learn the fundamentals of web development with our 12-week comprehensive course by Microsoft Cloud Advocates. Each of the 24 lessons dive into JavaScript, CSS, and HTML through hands-on projects like terrariums, browser extensions, and space games. Engage with quizzes, discussions, and practical assignments. Enhance your skills and optimize your knowledge retention with our effective project-based pedagogy. Start your coding journey today!

🧑‍🎓 Are you a student?

Visit Student Hub page where you will find beginner resources, Student packs and even ways to get a free certificate voucher. This is the page you want to bookmark and check from time to time as we switch out content monthly.

📣 Announcement - New Curriculum on Generative AI was just released!

Don't miss our NEW 12 lesson curriculum on generative AI!

Each lesson includes an assignment to complete, knowledge check and challenge to guide you on…

View on GitHub

Contribution towards these docs are one of the best things for beginners.

3. Look for e-books

Yes, e-books are also open source and they can be a good place to start.
Recently I found this guy, Bobby Iliev. He has amazing e-books that I found very helpful.
Since they are open source, you can contribute towards them.
Like contributing towards these Repositories.

bobbyiliev / 101-linux-commands-ebook

101 Linux commands Open-source eBook

💻 ++101 Linux commands Open-source eBook

This is an open-source eBook with 101 Linux commands that everyone should know. No matter if you are a DevOps/SysOps engineer, developer, or just a Linux enthusiast, you will most likely have to use the terminal at some point in your career.

Make sure to star the repository ⭐

📙 Online eBook

An online copy ⚡🌐 of this ebook is available here 📙.

🔽 Download links

Content

View on GitHub

bobbyiliev / introduction-to-git-and-github-ebook

Free Introduction to Git and GitHub eBook

💡 Introduction to Git and GitHub

This is an open-source introduction to Git and GitHub guide that will help you learn the basics of version control and start using Git for your SysOps, DevOps, and Dev projects. No matter if you are a DevOps/SysOps engineer, developer, or just a Linux enthusiast, you can use Git to track your code changes and collaborate with other members of your team or open source maintainers.

The guide is suitable for anyone working as a developer, system administrator, or a DevOps engineer and wants to learn the basics of Git, GitHub and version control in general.

🚀 Download

To download a copy of the eBook use one of the following links:

📘 Chapters

View on GitHub

Hope you liked this article. Thanks to these open source contributors like Bobby Iliev today we have a lot of free tutorials and docs, where everyone can learn new things.

Thanks for reading!

When NOT to BLOCKCHAIN?

Gourav Singh Rawat — Mon, 22 Aug 2022 04:45:35 +0000

Hi this post is about when and where you're not supposed to use blockchain and it's practices, because implementing blockchain has it's own cost, something more than money!

Now, I'm not any expert but I've seen some projects that were using some blockchains to store transactions about something very unnecessary, this way user experience is degraded and based on that this post flows.

When to use Blockchain?

Blockchains allow you to store something over them but at a cost, of course this cost varies from blockchain-to-blockchain and the time you're using it.
Layer-1 blockchains like Ethereum, Solana, Avalanche, Polkadot, etc. are very expensive and it's better to use Layer-2 blockchains like Polygon for transaction.
Blockchains enhance the security & trust factor for users, and being decentralised it reduces the chances of single point of failure.

If there's an application that generates sensitive transactional data like an online banking application or the complete banking system, using blockchain makes sense as these transactions will then be stored over something very secured.

When not to use Blockchain?

Blockchains are very expensive to use, some are even very slow to process the transaction, like compared to some other payment systems like Visa are way faster.
Adding blockchain transactions to basic things like commenting on a post, removing posts, or something similar will just make your application unreliable.

Using blockchains require some knowledge and awareness about them, as a big blockchain application that is Crypto currencies & markets are already suffering from a underlying scammers & frauds, this awareness is very important for people who want to enter this new technology.

Make sure to have some consultants or experienced people around you before implementing any of these new technologies, as some of these new technologies have some releases that are not meant to be used in production.

Hope it was worth reading.

Nyan Cat or Giga Cat Epic Game

Gourav Singh Rawat — Thu, 11 Aug 2022 16:51:00 +0000

Nyan Cat Game

Nyan cat game is actually a music rhythm based game 🎶 I.e you start with a decent difficulty as the music in start is decent and it expect you to pass through it, after a few tries at least.
Once you pass through the first phase of the game, you'll enter a Panic event phase, where it gets real exciting 🎸. Panic event can start anytime above the score of 50 pts.

Why this?

After participating in 4 previous Hackathons (actually winning non of them :P), I decided to do something really entertaining & crazy. So I came up with this idea to make a web game using Redis as a primary database. Thanks to RedisOm it got really easy to do this.
Easy to use thanks to the documentation, it was a fun project to work on, and really think it's a Wacky Wildcard Project :P.

Submission Category:

Wacky Wildcards

Languages used:

JavaScript(Next.Js) & Css

Screenshots 📷

Check out these Demo clips of the game 🤯

Overview video 🎥

Here's a short video that explains the project and how it uses Redis:

Seek4samurai / project-giga-cat

Nyan cat game with MetaMask authentication for Web 3.0 ecosystem. Made out of Next.js & Moralis. Database powered by @redis (Currently in hibernation)

Nyan Cat Game

Nyan cat game is actually a music rhythm based game 🎶 I.e you start with a decent difficulty as the music in start is decent and it expect you to pass through it, after a few tries at least Once you pass through the first phase of the game, you'll enter a Panic event phase, where it gets real exciting 🎸. Panic event can start anytime above the score of 50 pts.

Why this?

After participating in 4 previous Hackathons (actually winning non of them :P), I decided to do something really entertaining & crazy. So I came up with this idea to make a web game using Redis as a primary database. Thanks to RedisOm it got really easy to do this Easy to use thanks to the Redis documentation, it was a fun project to work on, and really think it's a Wacky…

View on GitHub

How it works 🤔

When it comes to working of this game, it comes down to a web application. Here I've created a Next app using npx create-next-app. Metamask wallet address for user Authentication, this app uses Next.js framework with Moralis SDK and Redis for querying & storing data into Redis cloud.
Here game is rendered using HTML5 canvas.

How the data is stored: 🤔

In this application, I've something called Redis-om for Node.js.
Here data is stored in the form of JSON where following schema is created

class Score extends Entity {}

const schema = new Schema(
  Score,
  {
    name: { type: "string" },
    address: { type: "string" },
    score: { type: "number", sortable: true, textSearch: true },
  },
  { dataStructure: "JSON" }
);

export const createScore = async (data) => {
  await connect();

  const repository = client?.fetchRepository(schema, client);

  const score = repository.createEntity();
  score.name = data.name;
  score.score = data.score;
  score.address = data.address;

  const id = await repository.save(score);

  const ttlInSeconds = 21600;
  await repository.expire(id, ttlInSeconds);

  await client.close();
  return id;
};

Notice I've also declared something as const ttlInSeconds = 21600; and then used it in await repository.expire(id, ttlInSeconds); because we don't want to store any data longer than 6 hours. Yes, your scores will reset after 6 hours.
Once this is done, we can create an API route in our Next.js application.

import { createScore } from "../../lib/redis";

export default async function handler(req, res) {
  const id = await createScore(req.body);
  res.status(200).json({ id });
}

Once we create it in our database, it will be stored in our database by giving data from our frontend, I've used javascript's fetch API for this purpose. You can check this file, where I've declared such logic.

How the data is accessed: 🤔

Now if you've gone through the application, there is a section of leaderboard, where we have scores and addresses or usernames of players with highest pts.
To access our database and then fetch it from our Redis database, we have couple of ways like...

In our development phase, I've used Redis Insight, importing my database using public endpoint & password.

But in our application I've used .env.local file to store all API keys.
Once that is done, in our redis.js file we create a redis instance also called Client() like:

import { Client } from "redis-om";

const client = new Client();

const connect = async () => {
  if (!client.isOpen()) {
    await client.open(process.env.NEXT_PUBLIC_REDIS_URL);
  }
};

Now once this is setup, we use fetch API to query for data.

  const fetchScores = async () => {
    const res = await fetch("/api/search?" + query);
    const results = await res.json();
    return results["scores"];
  };

To do this, we also need to create an index using await repository.createIndex(); and then we can create another API route to call this.

import { createIndex } from "../../lib/redis";

export default async function handler(req, res) {
  await createIndex();
  res.status(200).send("Index is created");
}

Then we use a custom function searchScore() to get the data of top-3 players with highest scores, we used RediSearch for that purpose.

export const searchScore = async () => {
  await connect();

  const repository = client.fetchRepository(schema, client);

  const offset = 0;
  const count = 3;

  const scores = await repository
    .search()
    .sortDesc("score")
    .return.page(offset, count);

  return scores;
};

This will get us the data we want. And we can get that data using API route as search.js

import { searchScore } from "../../lib/redis";

export default async function handler(req, res) {
  const data = req.query;
  const query = Object.keys(data)[0];

  const scores = await searchScore(query);
  res.status(200).json({ scores });
}

You can check this file, where I've declared such logic.

One more thing is that we are also displaying the top-3 players in the Home page of the Game. Let's dig it...
So we're doing something similar to what we did above I.e.

const fetchScores = async () => {
    const res = await fetch("/api/search?" + query);
    const results = await res.json();
    return results["scores"];
};

Fetching score as an Object. Then in our separate Marq.jsx component we are using it as:

<span>
    {score[0]?.name ? score[0]?.name : `${score[0]?.address?.slice(0,9)}...${score[0]?.address?.slice(39)}`}
</span>

Refer to Using RediSearch.

Hope everything was clear, and if not consider checking the video. If still stuck on something feel free to contact me over my any of the social handle, I'll be happy to help you :)

How to run it locally? 💻

Requirements 📝

Node.js - Expected version ">=14.17.0". If you need help in installing on Linux like me Check out.
Yarn - 1.22.19 (I used).
Metamask installed on Browser - Download here

You'll need Metamask account to pass Authentication 📝

Follow these steps to run on your device after Cloning the repository and cd project-giga-cat to enter the root project folder.

First things first, use yarn install to install all the dependencies.
In root directory of the repo, create a file .env.local and declare 3 env variables. But before that go to Moralis.io & Redis and create a free account over both.
In Moralis dashboard, click on Create new Dapp and select the Environment Testnet and under testnets select ETH Goerli testnet. Select a region and give a cute name, finally proceed with it.
Now, create a subscription in your Redis Cloud and then create a database for yourself. Make sure to save their details.
In your .env.local, create 3 variables as: NEXT_PUBLIC_MORALIS_SERVER_URL NEXT_PUBLIC_MORALIS_APP_ID NEXT_PUBLIC_REDIS_URL and give them their values.
For Moralis, go to settings of your Dapp, and copy the Dapp URL for SERVER_URL & Application ID for APP_ID.
For Redis, go to your database and from Security section copy the user password, and also take the public endpoint from General section. Now paste them in the .env.local file, formatted as NEXT_PUBLIC_REDIS_URL=redis://default:password@endpoint:port. Note: port should be appended at the last of your public endpoint.
Now run yarn run dev to run the application.
Go to http://localhost:3000/ and you'll see the Connect Wallet page.
Click on Connect wallet and for signing in, Metamask should've popped up. And you'll enter the dashboard.

If you've find any difficulty in this, Check my video! 🔥

If you notice anything unusual try refreshing the page. If it doesn't fixes the behavior, please create a issue in Github :)

💥 New Update : Users can now have their temporary usernames 💥

Thanks to a Redis feature -> TimeToLive or ttl, users can assign themselves a temporary username for purpose of few hours till their scores exist. Check & read docs for more information.

Deployment 🚀

Deployment is done using Vercel.

Stuck? 🤔

Feel free to contact me through anywhere, LinkedIn, Gmail, or leave a create a Github issue.

MIT

Each Soundtracks completely belongs to the respective artist & I don't own them at all.

Hope you liked the project ❤️ and let's wait till the results 🤞🤞

Made with ❤️ & Redis

Are PoW & PoS actually a Blockchain Consensus?

Gourav Singh Rawat — Mon, 18 Jul 2022 06:18:11 +0000

Some words on the blockchain Consensus from an upcoming small book on Ethereum. If you have suggestions for any topics, please DM or comment.

PoW & PoS

I've seen people talk about PoW & PoS are blockchain consensus algorithms, but aren't they Sybil Resistance mechanisms.

PoW & PoS are Sybil Resistance mechanisms that prevent from such attacks. Where as the consensus is an algorithm that is computed or mined.

Consensus

We know there are thousands of nodes running on a blockchain, and every node could be engaged in some different computation. In order to reach a particular state of the blockchain, a mechanism is used called the consensus.

Consensus algorithm used by Bitcoin is Nakamoto Consensus and EthHash in the case of Ethereum.

It is during the computation where nodes reach this consensus or agree on some single value or single state of the blockchain in a distributed process.

In public blockchains, this means that once the computation is completed all the other nodes will validate it, and once 51% of the nodes approve that particular computation, the computation is considered to be completed.

As we know in blockchain, data or transactions are stored in blocks but before storage they are computed by the nodes and the node that completes that computational (mathematical) problem first is said to be the author of that block.

Now since people can create multiple addresses to run these nodes and get an advantage over other users or even try to manipulate the blockchain, as majority rules in blockchain, we have some algorithms/mechanisms called Sybil resistance algorithms/mechanisms, which are used and implemented in order to avoid these spamming. These mechanisms are helpful against Sybil attacks.

The most popular Sybil Resistance mechanisms are:

Proof-of-Work (PoW).
Proof-of-Stake (Pos).

Sybil attack is when a single person creates multiple nodes or tries to flood the network with different identities to get an advantage over other nodes or use them to gain disproportionately larger influence on the blockchain.

Function visibility in Solidity Smart Contracts

Gourav Singh Rawat — Sat, 25 Jun 2022 16:01:48 +0000

Before we begin, I hope you're familiar with Solidity Smart contracts if not check out

What are Functions in Solidity

Functions can be declared both inside and outside of the contract in solidity. Functions are one of the most important component in a programming language. They are units or a block of code which you can call anytime or anywhere depending on it's visibility.

contract myContract{
    function add(uint num_1, uint num_2)public pure returns(uint){
        return num_1 + num_2;
    }
}

I mentioned visibility above because calling a function completely depends on it.
There are 4 types of visibility options of functions in solidity.

Public functions

The example of function above was a public function, check this out.

contract myContract{
    function add(uint num_1, uint num_2)public pure returns(uint){
        return num_1 + num_2;
    }
}

A public function is callable almost everywhere and it'll be a part of your contract UI, you can play with solidity on Remix IDE. The compiler automatically creates a getter function for public functions, which are visible after you compile them. You can learn more about Getter functions here.

Private functions

Private functions are functions that can only be called in the contract they are defined in. Private functions won't inherit at all, even if you derive another contract from your previous contract.
Check this example.

contract oldContract{
    function add(uint num_1, uint num_2)private pure returns(uint){
        return num_1 + num_2;
    }
}

// this is not gonna work coz the function add() is private

contract newContract is oldContract{
    uint ans = add(2,4);
}

Internal functions

Functions that are internal can be called inside the contract they're declared in as well as in any other contract that are derived from that i.e. Internal functions are inherited unlike private functions.

contract oldContract{
    function add(uint num_1, uint num_2)internal pure returns(uint){
        return num_1 + num_2;
    }
}

// this is gonna work coz the function add() is internal

contract newContract is oldContract{
    uint ans = add(2,4);
}

External functions

Functions that are set to external visibility can only be called from outside of the contract they are defined in.
You cannot call a external function within the same contract.

contract oldContract{
    function add(uint num_1, uint num_2)external pure returns(uint){
        return num_1 + num_2;
    }
    // This won't work coz add() function is set external visibility
    uint public answer = add(2, 4);
}

To make that work, you can create another contract and then call that function over there.

contract oldContract{
    function add(uint num_1, uint num_2)external pure returns(uint){
        return num_1 + num_2;
    }
}

But first you'll need to make an instance of that old contract in your new contract.

contract newContract {
    oldContract instance = new oldContract();
    uint public answer = instance.add(3, 4);
}

Hope function visibility was clear now and this tutorial was helpful.
Please check out:

Join for more blockchain, ethereum and solidity smart contract content.
Thanks for reading and watching :)

Guide for Smart contracts in Solidity

Gourav Singh Rawat — Tue, 21 Jun 2022 19:48:57 +0000

You might heard people in web3 and blockchain talking about smart contracts and solidity.

What even is a smart contract

In Solidity, smart contract can be considered as collection of constructor, functions and state variables, or to be more beginner friendly we can take contracts as a class in c++.
In a smart contract, we can implement any algorithm or whatever you want to be done once your contract is deployed or compiled.

here is a quick tutorial of the same:

1. Constructor

Sometimes we want some variables to be declared as soon as our contract is deployed or compiled. So to achieve this we have constructors. These are initialised with a constructor keyword.
constructor() {}
Since constructor is just a function that is run on contract creation, you can define or write code for initialising the contract.

2. State variables

General variables where we store the state about our contract.

3. Functions

You must be knowing what functions are if you're familiar with any other programming language. If there is something or some block of code that is to be run different times on many places, you can define those code lines in a functions and call that function to run them.
Same applies in Solidity.

contract my_contract{
   uint num_1 = 10;
   uint num_2 = 20;

   function add(uint a, uint b) public pure returns(uint){
      return a + b;
   }
}

But here's a thing to know in solidity is that if in a contract you declare a function and doesn't put any implementation inside it, our parent contract will become an abstract contract. So our contract will look like this.

abstract contract my_contract{
   function add(uint a, uint b) public virtual returns(uint);
}

As you can see above, our contract my_contract has a function add that is not yet implemented, so we have marked our contract as abstract contract.

I hope this topic was clear, thanks for reading!
Do checkout the video in the blog that describes the same

Questions whose answers are worth knowing in Machine Learning for beginners!

Gourav Singh Rawat — Sat, 28 May 2022 10:17:58 +0000

Some concepts and answers one should know in machine learning before going further. Wrote them in my weekend, because I was bored and I thought to dive into some data science, machine learning and statistics.

1. Explain what is regression?

Regression is a supervised learning technique which helps us in finding the correlation between the dependent target variable and one or more independent predicting variable(s).
It is mainly used for predictions, weather forecasting, or determining the causal-effect relationship between variables.

In Regression, we plot a graph between the variables which best fits in the given data points or dataset, using this plot, the machine learning model can make predictions about the data.

Fact: The method in which we analyse such type of regression is called Regression Analysis, which is indeed a statistical analysis to model the relationship between a dependent (target) and independent (predictor) variables with one or more independent variables.

2. What is Geometric machine learning model?

Before we get to know the actual meaning of Geometric machine learning model, we need to know what's Euclidean data and non-Euclidean data.
So, basically most of the data and information that we get to know or have, is Euclidean data (most of it).
Euclidean data is just the datatypes that exists in 1-dimension or 2-dimension domain.
Euclidean data consist of audio, images, videos, numbers, some text and more similar type of data.

A non-Euclidean data is much like that we can't really explain in simple ways and it require much like 3-dimensional explanation, for example a molecular structure or some hierarchy or a tree structure.
Here a molecular structure or a network structure is a 3D structure which will fall into non-Euclidean data.

After all above, Geometric machine learning model or Geometric Deep learning (GDL) is the model that aims to deal with or learn from the non-Euclidean data, or Geometric machine learning model or Geometric Deep Learning (GDL) is the niche field under the umbrella of deep learning that aims to build neural networks that can learn from non-euclidean data.

3. What is Analysis of variance(ANOVA)?

Analysis of Variance is a test which an analyst might perform to check the difference among the means of the population by examining the amount of variation within each of the sample. ANOVA is the statistical approach of testing or comparing the two datasets, this is one of the best applied test when we have more that 2 populations or samples to be compared.

But to compare the means of two or more populations or datasets, ANOVA would be appreciated if the samples of datasets satisfies the following:-

- Independence of case -> this assumption means that the case or samples of dependent variable should be independent or selected randomly, there should not be any sequence or pattern to be followed when selecting sample datasets.

- Normality -> this means that the distribution of each group should be normal.

- Homogeneity -> this means that the variance between each group should be same.

4. What are the types of Analysis of variance(ANOVA)

ANOVA has basically 3-types.

- One way analysis: when we are comparing 3 or more than 3 groups based on 1 factor variable, then it's said to be one way analysis of that group.
Example: if we want to compare whether or not the mean output of three employees is same or not, based on the working hours of the three employees.

- Two way analysis: when there are two or more factor variables in a comparison then it is said to be two way analysis of those groups.
Example: if we compare whether or not the mean output of three employees is same or not based on their working hours and working locations.

- K-way analysis: When factor variables are k, then it is said to be the k-way analysis of variance(ANOVA).

5. Explain in brief what is T-test and Z-test

Before we dive in both of these tests, we need to know what is Hypothesis testing. A more descriptive article about this can be found here.

So hypothesis testing is method for us to test if our hypothesis is true or false, about the population using the sample dataset. Through hypothesis testing we can know if we have enough evidence about the population, and conclude if our hypothesis is true or false.

So what is Z-test and T-test? Well both are Parametric tests i.e they rely on statistical distribution of the dataset. To know more about Parametric tests, check this out!

1. Z-Test:
Z-test is a hypothesis test which ascertains the averages of the two datasets are different from each other, when standard deviation or variance is given. Z-test is usually preferred over T-test when in a dataset, sample-size > 30. It is based on Normal distribution and all data points are independent.

2. T-test:
T-test is also a hypothesis test which is used when either the standard deviation or variance is not known or the sample-size < 30, in a dataset. This states how averages of two datasets differ from each other.
This test is based on t-distribution and data points are not dependent.

Hope this was informative for you! I might post few more briefly explained questions on similar topics.
Thanks for reading!

Quick guide to FaceApi Machine learning model for web - ML5.js

Gourav Singh Rawat — Sun, 22 May 2022 18:13:56 +0000

What is ML5.js?

ml5.js is machine learning for the web in your web browser. Through some clever and exciting advancements, the folks building TensorFlow.js figured out that it is possible to use the web browser's built in graphics processing unit (GPU) to do calculations that would otherwise run very slowly using central processing unit (CPU). ml5 strives to make all these new developments in machine learning on the web more approachable for everyone.

What I find amazing about ML5.js is that it's really easy for beginners to get started and it also gives a nice idea about running machine learning models.

Getting started

ML5 provides an amazingly easy face api to work with.It provides this face-api.js that allows you to access face and face landmark detection.

Create a basic html page

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>face-api</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/ml5js/Intro-ML-Arts-IMA@ml5-build-10-7-19/ml5_build/ml5.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

We are also importing p5.js, as it works best with Ml5.js.
Once we have imported all necessary things we can get started with our sketch.js.

So, the basic idea is that we create a video element at starting. Once

// initialized variables
let faceapi;
let detections = [];

let video;
let canvas;

function setup() {
  canvas = createCanvas(1080, 720); // canvas window
  canvas.id("canvas");

  // getting video of user
  video = createCapture(video);
  video.id("video");
  video.size(width, height);

  // making face details
  const faceOptions = {
    withLandmarks: true,
    withExpressions: true,
    withDescriptors: true,
    minConfidence: 0.5,
  };

  //Initialize the model:
  faceapi = ml5.faceApi(video, faceOptions, faceReady);
}

We initialised some variables like video and canvas, in which we will setup our video element. We have created faceOption array for ML5 and it'll return us the details about the face data that we sent when initialising the model. we used ml5.faceapi() for this project as this is for detecting faces. Once a face is detected in our video element this should be called.

// on face detection
function faceReady() {
  faceapi.detect(gotFaces);
}

Above here, gotFaces is a callback function, so we'll make another function once faceApi detects a face.
This is a tricky part!

// Got faces:
function gotFaces(error, result) {
  if (error) {
    console.log(error);
    return;
  }

  detections = result; //Now all the data in this detections:

  clear(); //Draw transparent background;:
  drawBoxs(detections); //Draw detection box:
  drawLandmarks(detections); //// Draw all the face points:

  faceapi.detect(gotFaces); // Call the function again at here:
}

Once we get the face details, we store details in detections variable and clear previous on screen renders caused by our next step.
Next we need to draw box and face landmarks over our user's face.

Here we create two functions that draw box user's face.

function drawBoxs(detections) {
  if (detections.length > 0) {
    //If at least 1 face is detected:
    for (f = 0; f < detections.length; f++) {
      let { _x, _y, _width, _height } = detections[f].alignedRect._box;
      stroke(44, 169, 225);
      strokeWeight(1);
      noFill();
      rect(_x, _y, _width, _height);
    }
  }
}

Above, if check in detections array, if atleast one face is detected then we create a box with the help of coordinates that are provided with the help of Ml5 library. Remember we did a clear() in our previous gotFaces() function? We did this so once a face is detected, we create a box around it and then after few frames we clear that box and re-create it. So as to update it's coordinates.

Now to create face landmarks we do similar things.

function drawLandmarks(detections) {
  if (detections.length > 0) {
    //If at least 1 face is detected:
    for (f = 0; f < detections.length; f++) {
      let points = detections[f].landmarks.positions;
      for (let i = 0; i < points.length; i++) {
        stroke(47, 255, 0); // points color
        strokeWeight(5); // points weight
        point(points[i]._x, points[i]._y);
      }
    }
  }
}

Here, landmark points and coordinates are returned by ML5 api.

Add some basic css for centering canvas.

body {
  background-color: #000;
}

#canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

#video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  border: 3px #fff solid;
  border-radius: 10px;
}

And our face detection application is ready!
Hope you liked this basic start guide. Thanks for reading

Computer vision API - Using Microsoft Azure Cognitive services

Gourav Singh Rawat — Fri, 13 May 2022 14:56:48 +0000

Cognitive services

Cognitive Services are a set of machine learning algorithms that Microsoft has developed to solve problems in the field of Artificial Intelligence (AI). The goal of Cognitive Services is to democratise AI by packaging it into discrete components that are easy for developers to use in their own apps.

I recently created an Application - Azura with same method.

Seek4samurai / Azura

Yes.! Azura Play with it. Powered by Microsoft's @Azure-cognitive-service-computer-vision. It's available in both as web application and as a browser extension.

Azura

Yes.! Azura

What is Azura?🚀

This is an extension just like those we put on our browsers and also a sort of searching tool, that takes an Image url as input and processes it using Microsoft Azure's Computer vision and describes what the image is about. This is basically a tool that exists to describe the one use of Computer vision

Live demo 🌏

Website is live at https://azura-website.vercel.app/
But do check the extension as well with even better user experience and with text to speech feature that reads out the description of the image.

How to use is as extension 🧑🏼‍💻

Clone or download it as zip, the following repository : https://github.com/seek4samurai/azura

Adding to your browser 📝

To add this extension, go to your browser >> extensions

First you need to turn on the Developer mode: On.

Once this is done, you can now import extensions

Click on…

View on GitHub

If you're familiar with Computer vision, you must know how it works. This is a technique in which we train a machine's vision to recognise real world objects and similar things, which could either be some objects or even living things like human face or recognising animals.

Microsoft Azure provides with some free to use cognitive service APIs to create such computer vision powered applications.

Getting started

Creating Azure resource

Select Computer vision from resource and then create a resource.

After you've created a resource.

Using API client
Once you did all before steps correctly, you can get started with your workspace.

Server setup
Get started with creating a server using, we are using nodejs npm init -y. Once you've initialised, you've to install following packages and libraries.

{
  "name": "azura-backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./src/index.js",
    "start": "node ./src/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@azure/cognitiveservices-computervision": "^8.1.0",
    "cors": "^2.8.5",
    "dotenv": "^16.0.0",
    "express": "^4.17.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

Here, we are using Express for creating server. And to use the Azure-cognitive services we install
npm i @azure/cognitiveservices-computervision

Create a src folder and index.js file to start a server and handle basic routes in it.

const express = require("express");
const dotenv = require("dotenv");
const cors = require("cors");

dotenv.config();

const imageController = require("./controller");

const app = express();
app.use(cors({
  origin: "*"
}));
app.use(express.json());

// Routes
app.use("/", imageController);

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {
  console.log(`App running or port ${PORT}`);
});

Once this is done, create controller.js file, where we will use computer vision client for our application.

const express = require("express");
const ComputerVisionClient =
  require("@azure/cognitiveservices-computervision").ComputerVisionClient;
const ApiKeyCredentials = require("@azure/ms-rest-js").ApiKeyCredentials;

const router = express.Router();

router.post("/describe", async (req, res) => {
  const KEY = process.env.KEY;
  const ENDPOINT = process.env.ENDPOINT;

  // Create a new Client
  const computerVisionClient = new ComputerVisionClient(
    new ApiKeyCredentials({ inHeader: { "Ocp-Apim-Subscription-Key": KEY } }),
    ENDPOINT
  );

  if (!req.body.imageUrl) {
    return res.send("Image url is not set! Please provide an image!");
  }
});

module.exports = router;

Remember you've to create .env file in your local workspace and paste your API keys and endpoint, and to use them I'm using dotenv package (hope that is understandable). We've initialised the client and when we hit the post request to redirect to /describe, it should hit our client. You can try using postman to check this API call.
And in the last line we are just checking if the request is empty, then simply return that empty url message.

After all this we can go ahead and create a try-catch block and use the

  try {
    // Describe and Image Url
    const descUrl = req.body.imageUrl;
    const caption = (await computerVisionClient.describeImage(descUrl))
      .captions[0];

    res.send(
      `This maybe ${caption.text} (confidence ${caption.confidence.toFixed(2)})`
    );
  } catch (error) {
    console.log(error);
    res.send(error.message)
  }

Here, we are getting the req.body.imageUrl from our frontend and using that URL for our client. And it will return and send response back to frontend.

Frontend overview

Since frontend is not the point of focus in this tutorial, we can take a quick overview of it.
We take input from user and that URL is sent to our backend. I'm using Axios for that purpose.

const res = await axios.post(
      "https://YourURL/describe",
      {
        imageUrl,
      }
    );

In place of YourURL, paste your server's URL.

You can check to print the response or log it in console. This will accept image's URL and return it's description, what the image is about.

Thank you for reading.