DEV Community: Vivek Nayyar

Unleashing Creativity with OpenAI’s Vision API: Build Your Own Social Media Caption Generator

Vivek Nayyar — Sat, 25 Nov 2023 09:03:22 +0000

Are you ready to bid farewell to mediocre captions on your social media posts? OpenAI has just introduced its Vision API, and it’s a game-changer for those of us looking to add a spark to our online presence.

This piece draws from my journey in developing captioncue.com, a platform that automatically generates captions using OpenAI’s vision API. I encourage you to give it a try and share your feedback in the comments. Now, let’s dive into constructing a streamlined version of captioncue.com 🚀🌟

Problem Statement

In this article, we’ll walk through creating a dazzling application that crafts captions as stunning as your photos, using the power of AI. If you’re someone who learns by doing, you’ll want to roll up your sleeves for this one.

This is what it would look like

Tech

Our tool of choice is a neat stack combining Next.js for our front end and OpenAI’s Vision API for the heavy lifting. So, let’s get the ball rolling!

Setting Up Your Dev Environment: A Breeze with Node.js

Before diving into the code, ensure you have Node v18 ready to go. Node’s environment will be the backbone of our application, providing all the necessary tools and libraries at our fingertips.

To get Node.js installed on your system, you can follow the step-by-step instructions provided in this article: Node.js Installation Guide via Node Version Manager (NVM).

Frontend Magic with Next.js

We’ll kick things off with a fresh Next.js project, woven with the grace of Tailwind CSS for styling and ESLint to keep our code clean. Here’s how to conjure this setup:

npx create-next-app@latest caption-generator-ai --tailwind --eslint

Once you’ve got the repository setup, change directories with a simple cd command

cd caption-generator-ai

For our UI wizardry, we’ll enlist the help of Shadcn UI, which will lend us its ready-to-use component library. Install it with:

npx shadcn-ui@latest init

Backend with Serverless Functions

Next.js isn’t just for show; it’s got the brawn for backend operations too. We’ll create a serverless function that will handle our caption generation logic inside pages/api/caption.js

Get the gears moving by installing the OpenAI package:

npm install openai

Now, for the main act, we’ll write a function that takes an image URL as input and employs OpenAI’s Vision API to generate a caption that’ll make your followers stop and stare.

import OpenAI from "openai";

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY, // This is also the default, can be omitted
});

const handler = async (req, res) => {
  const { imageUrl } = req.body;
  try {
    const response = await openai.chat.completions.create({
      model: "gpt-4-vision-preview",
      messages: [
        {
          role: "user",
          content: [
            {
              type: "text",
              text: `Write a catchy instagram caption for this image`,
            },
            {
              type: "image_url",
              image_url: imageUrl,
            },
          ],
        },
      ],
      max_tokens: 300,
    });
    res.status(200).json(response.choices[0].message.content);
  } catch (error) {
    res.status(500).json({
      error: {
        message: "An error occurred during the request.",
      },
    });
  }
};

export default handler;

That wraps up all the necessary backend code. Simple and enjoyable, isn’t it?

Frontend Logic for API Integration

We will concentrate on the functionality of the Generate button and the API calls in our UI, rather than delving into detailed UI aspects.

To start, let’s create a component in the src/components directory, naming it Caption.jsx

import React from "react";

export const Caption = () => {
  return (
    <main className="w-full p-4 py-20">
      <div className="max-w-md mx-auto space-y-4">
        <div className="space-y-2">
          <Label htmlFor="image-upload">Image URL</Label>
          <Input type="text" id="image-upload" value={imageUrl} onChange={handleImageChange} />
        </div>

        <div className="relative space-y-2">
          <Label htmlFor="caption">Generated Caption</Label>
          <Textarea
            className="w-full h-20 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500"
            id="caption"
            disabled
          />
        </div>
        <Button
          className="w-full"
          onClick={handleCaptionGeneration}
          disabled={false}
        >
          Generate Caption
        </Button>
      </div>
    </main>
  )
}

In our UI, we need to include components such as Button, Label, Input, and TextArea from Shad CN. To do this, we’ll begin by installing these components using the following commands:

npx shadcn-ui@latest add button
npx shadcn-ui@latest add input
npx shadcn-ui@latest add textarea
npx shadcn-ui@latest add label

Next, we’ll import these components into our project:

import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

Then, to manage the value for the image URL input, we’ll set up a useState hook:

const [imageUrl, setImageUrl] = useState("");

Following that, we’ll create a handler for image change event and the ‘Generate Caption’ button click.

const handleImageChange = (e) => {
  const value = e.currentTarget.value;
  setImageUrl(value);
};

const handleCaptionGeneration = async () => {
  try {
    // Call the api here

  } catch (error) {
    console.error(error);
  }
};

Up to this point, the UI will look something like this.

When calling an API, it’s essential to provide visual feedback such as displaying loaders on the button during processing, presenting any errors that occur, and resetting the state upon receiving new data. For these functionalities, we will utilize React Query. This choice over the plain useState from React offers several advantages, which are well-explained in the article Why You Want React Query

First, we’ll install React Query:

npm install react-query

Next, we import the mutation function necessary for making a POST call:

import { useMutation} from "react-query";

We then set up a mutation to post data to our backend API:

const captionMutation = useMutation(
  async (formData) => {
    const response = await fetch("/api/caption", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
    });

    if (!response.ok) {
      throw new Error(`Request failed with status ${response.status}`);
    }

    const data = await response.json();
    return data;
  }
);

Finally we call this mutation from our handleCaptionGeneration function:

const handleCaptionGeneration = async () => {
  try {
    // Call the mutation with your form data
    await captionMutation.mutateAsync({
      imageUrl: imageUrl
    });
  } catch (error) {
    console.error(error);
  }
};

React Query also provides helpers to detect loading states and errors:

let isCaptionLoading = captionMutation.isLoading;
let generatedCaption = captionMutation.isSuccess && captionMutation.data;

Finally to show the loader icon, we need to install @radix-ui/react-icons

npm install @radix-ui/react-icons

Our final frontend code for caption.jsx would look like this:

import React, { useState } from "react";
import { ReloadIcon } from "@radix-ui/react-icons";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

import { useMutation } from "react-query";

export const Caption = () => {
  const [imageUrl, setImageUrl] = useState("");

  const captionMutation = useMutation(
    async (formData) => {
      const response = await fetch("/api/caption", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });

      if (!response.ok) {
        throw new Error(`Request failed with status ${response.status}`);
      }

      const data = await response.json();
      return data;
    }
  );

  const handleCaptionGeneration = async () => {
    try {
      // Call the mutation with your form data
      await captionMutation.mutateAsync({
        imageUrl: imageUrl
      });
    } catch (error) {
      console.error(error);
    }
  };

  const handleImageChange = (e) => {
    const value = e.currentTarget.value;
    setImageUrl(value);
  };

  let isCaptionLoading = captionMutation.isLoading;
  let generatedCaption = captionMutation.isSuccess && captionMutation.data;

  return (
    <main className="w-full p-4 py-20">
      <section className="text-center pb-10 flex justify-center flex-col items-center">
        <h1 className="text-2xl md:text-5xl font-semibold mb-4">
          Generate Captions with AI
        </h1>
        <p className="text-lg text-gray-600 dark:text-gray-300">
          Our AI generates captions for your content in seconds!
        </p>
      </section>
      <div className="max-w-md mx-auto space-y-4">
        <div className="space-y-2">
          <Label htmlFor="image-upload">Image URL</Label>
          <Input type="text" id="image-upload" value={imageUrl} onChange={handleImageChange} />
        </div>

        <div className="relative space-y-2">
          <Label htmlFor="caption">Generated Caption</Label>
          <Textarea
            className="w-full h-20 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500"
            id="caption"
            disabled
            value={generatedCaption?generatedCaption:""}
          />
        </div>
        <Button
          className="w-full"
          onClick={handleCaptionGeneration}
          disabled={isCaptionLoading}
        >
          {isCaptionLoading?<ReloadIcon />: null}
          Generate Caption
        </Button>
      </div>
    </main>
  );
}

To incorporate the caption component into our homepage, navigate to pages/index.js. Clear out any unnecessary default code provided by Next.js and replace it with the following content:

import { Inter } from "next/font/google";
import { Caption } from "@/components/caption";
import { QueryClient, QueryClientProvider } from "react-query";

const inter = Inter({ subsets: ["latin"] });
const queryClient = new QueryClient();

export default function Home() {
  return (
    <div className={`flex flex-col min-h-screen ${inter.className}`}>
      <QueryClientProvider client={queryClient}>
        <Caption />
      </QueryClientProvider>
    </div>
  );
}

With these steps, we complete the front end setup of our app.

Finally, to get the app up and running, we must create a .env file to store the OpenAI key.

OPENAI_API_KEY=<your open ai key>

Ready, Set, Launch! 🚀

Conclusion

With your environment set, your front end styled, and your backend ready to deploy AI-powered captions, you’re all set to revolutionize how you post online. Say goodbye to caption fatigue and hello to a stream of compliments on your witty and engaging post descriptions. Let the likes (and envy) roll in!

Links

Open AI Vision API: https://platform.openai.com/docs/guides/vision?lang=node
Github Repo: https://github.com/vivek12345/caption-generation-ai-demo

You can follow me on twitter @VivekNayyar09 for more updates.

Also please don’t forget to like, share and subscribe to the youtube channel local lo baat. I continue to post videos around Open AI, langchain and Next JS

The Saga of the Replica Lag

Vivek Nayyar — Tue, 31 Oct 2023 09:28:12 +0000

Picture this: You’ve just started a new role as a senior backend engineer, and during your first week on call, you’re abruptly awakened at 5 AM by a barrage of alerts. Some scream “Quotation Creation Failure,” others whisper “No More Duplicate Policies,” and another ominously mentions “Severe RDS Lag.” This is the story of an on-call incident, a late-night puzzle that demands your attention.

Step 1: Unraveling the Mystery

Upon glancing at your phone, you see an alert description pointing to an error in the quotation service.

Oddly enough, you notice that this issue occurred like clockwork every day at the same late hour around 3–5 AM

Step 2: The Search for Clues

As you sleepily reach for your phone, your first move is to head to the Datadog dashboard, hoping to find insights in APM traces.
Within the traces, you stumble upon an enigmatic error message: “invalid character ‘i,” hinting at a potential gateway timeout.

Step 3: Unearthing the Truth

Armed with the timestamp from the initial alert, you dive into Datadog’s APM to pinpoint the exact error tracer on quotation-service around 5:22 AM.

You decide to delve deeper into this issue and investigate if any other functions are being invoked within the “create quotation” function. To your surprise, you come across a call to the policy service to create policy, which might have experienced a timeout.

Step 4: Digging Deeper

The next step in your thought process is to determine where to locate the complete request and response to examine the unique identifier for a policy.
After narrowing down the cloudwatch logs to the error’s timestamp, you find gold.

Step 5: The Deep Dive

Amidst the entries of policy service logs, one of them catches your attention. It was directly linked to the timeout.
Surprisingly, the API call didn’t result in a failure, but it had significantly delayed response times resulting in a timeout. This failure caused the customer to retry the operation, resulting in an error indicating a duplicate policy number. This occurred because the policy had already been created in our master database, but the response to the customer had timed out.

Step 6: Unmasking the Core Issue

To unravel the mystery of the sluggish API call, you decide to dig deeper into Datadog’s APM, now focusing entirely on the policy service.
Finally, within one of the traces, you pinpoint the culprit: it’s a “select * query” responsible for idempotency checks.
But now, you’re puzzled about why a read query would affect your “create policy” call. You examine your master database, and everything seems fine — the CPU and memory usage are all within acceptable ranges, at less than 20%-30%.
Perplexed, you begin to scrutinize the code of the policy service and discover that the idempotency check is, in fact, reading from the replica database. You check the CPU usage for the replica, and there it is — the replica database meant to assist is struggling under heavy load.
As a result, the “select * query” took nearly 6 seconds to execute.

Step 7: The Eureka Moment

While you’ve now determined why the policy creation timed out, the root cause of why the read replica was lagging remains shrouded in mystery.
Driven by curiosity, you decide to investigate AWS RDS monitoring. There, you stumble upon the culprit: a metabase query was running at 5 AM, overwhelming the database.
This query induced replication lag, ultimately triggering the alert.

Step 8: Resolution and Wisdom Gained

Armed with newfound understanding, you take decisive action. First, you stop the troublesome metabase query, putting an end to its havoc.
Next, you make a crucial architectural change. You shift the logic for creating policies, which previously relied on the replica database for idempotency checks, to the master database.

Conclusion
This story highlights the kind of challenges that arise at scale. We anticipate sharing more of these challenges in the future.

Revealing the magic of AST by writing babel plugins

Vivek Nayyar — Fri, 05 Mar 2021 15:47:13 +0000

When you hear Abstract syntax trees, what is the first thought that occurs in your mind?
Something to do with compilers? Some complex tree manipulation? Bit manipulations? 🤔

At the beginning of my career, this AST seemed like a complex term with low level compilers and transpilers magic sprinkled in it.

💡 Motivation

The motivation behind writing this blog is to make it easy for everyone to understand what Abstract syntax trees are and how they play an important part in most of the tools we use on a daily basis.

Be it babel, webpack, parcel, eslint, codemods, css parsers, css in js - all of these tools use the magic of AST's to manipulate our code and transform it into something else.

In this post, we will unravel this magic and in the process learn to write some super simple babel plugins. Yeah 🎉

🤔 What is an AST?

Like every new concept, we will start with a concrete definition.
According to wikipedia

An abstract syntax tree is a tree representation of source code written in a programming language. Each node of the tree denotes a construct occurring in the source code.

To understand this, imagine we write a simple line of code in our editor

 const a = 5 + 3;

This is a very simple variable assignment and addition of two numbers.
This simple operation goes through a process of Tokenization and Parsing.

🕹️ Tokenization (Lexical Analysis)

Tokenization or Lexical analysis is the step where a function reads the code as a string and splits it into a list of tokens.

For the sake of simplicity, let's assume every token has the following interface

interface Token {
 type: string,
 value: string
}

Our code goes through process of lexical analysis and gets broken down into tokens.

🧵 Parsing (Syntactic Analysis)

Post lexical analysis gives us an array of tokens, we pass that through an AST parser(babylon or acorn or espree) which converts it into a tree of AST nodes by establishing dependencies between them.

The super simple code that we wrote gets converted into a tree of nodes which we call an Abstract syntax tree.

And that entire tree is represented as a json in the following manner

{
    "type": "VariableDeclaration",
    "declarations": [{
        "type": "VariableDeclarator",
        "id": {
            "type": "Identifier",
            "name": "a"
        },
        "init": {
            "type": "BinaryExpression",
            "left": {
                "type": "Literal",
                "value": 5
            },
            "operator": "+",
            "right": {
                "type": "Literal",
                "value": 3
            }
        }
    }],
    "kind": "const"
}

In this json object we notice a param named type. We call them AST node types.
Multiple types of AST nodes exist and for babel we can refer to the following
Babel AST Node Types

For espree parser(the one eslint uses) we can refer here
Eslint AST Node Types

Babel, webpack, parcel and all of these tools use a common approach.
They first convert our code to an AST tree, then apply some transformation on it(add, edit, update, delete), create a new tree out of those transformations and then convert it back to human readable code.

To understand what will the AST tree representation of a particular line of code look like, I would recommend to always check AST Explorer

Now, without wasting any further time, we will write our very first babel plugin.
This plugin will remove any debugger statements we might have in our code.

📕 Babel Plugin - Remove Debugger

Consider having following code in multiple locations of your repo

function test() {
   const a = 5;
   debugger;
   const b = 6;
}

It is quite obvious that we would not like this debugger statements to end up in our production app.
(Note: In a real world app, we would have some bundler or some deployment pipeline step which can help us avoid such mistakes, but for the sake of this example let's assume we do not have any such deployment pipeline).

So we write a babel plugin to do the same for us.

Writing a babel plugin

Step 1: Identify the AST node type we want to target. If we go to AST Explorer and click on line 2, we will notice that the node type gets highlighted in yellow and it shows us that the AST node we have to target is DebuggerStatement.

Step 2: Fire up your editor and create new file. Let's name it removeDebugger.js. This will be our plugin file.

Every babel plugin we write from now on will follow a common pattern

module.exports = function(babel) {
  return {
    name: "remove-debugger-plugin", // this is optional
    visitor: {
    }
  };
};

We are returning an object with another nested object with the key visitor in it. It is named visitor because of the visitor pattern.

Step 3: We know the node type that we wish to target is DebuggerStatement

So our code will look like this now

module.exports = function(babel) {
  return {
    name: "remove-debugger-plugin", // this is optional
    visitor: {
      DebuggerStatement: function(path) {
      }
    }
  };
};

Every node that we wish to target has to be a key inside our visitor object.

Step 4: Now the only step remaining in this babel plugin is to remove debugger statement node and we do it like this:

module.exports = function(babel) {
  return {
    name: "remove-debugger-plugin", // this is optional
    visitor: {
      DebuggerStatement: function(path) {
         path.remove();
      }
    }
  };
};

And that my friends was our first babel plugin.

This babel plugin explains us how to manipulate an AST by removing a node from it.

The next plugin we will learn will explain us how to edit an existing node and convert it into something else

📕 Babel Plugin - Alert To Console

So in this we will convert every alert statement into a console.warn statement.

So our code we wish to change would look something like this

function test() {
  const a = 5;
  alert(a);
}

We will convert this to

function test() {
  const a = 5;
  console.warn(a);
}

Step 1: Identify the AST node type we want to target. Going to AST explorer and copy paste our from code and click on alert. It will highlight the node type on the right. We see that the node type to target now is called CallExpression.

So any function call is a CallExpression and any function call on an object is called MemberExpression. So alert is CallExpression and console.warn is MemberExpression.

A MemberExpression always will have an Object(console) and a property (warn) in our case.

Step 2: Once again fire up your editor and create new file. Let's name it convertAlertToConsole.js.

Like before we start our plugin with the skeleton code

module.exports = function(babel) {
  const t = babel.types;
  return {
    name: "convert-alert-to-console", // this is optional
    visitor: {
    }
  };
};

Step 3: So now since we know that the node we have to target is a CallExpression, lets write our code

module.exports = function(babel) {
  const t = babel.types;
  return {
    name: "convert-alert-to-console", // this is optional
    visitor: {
      CallExpression: function(path)
      }
    }
  };
};

Step 4: Since we do not wish to target every other function call, let us put a if condition to specify that we only wish to target a call expression with the name alert

module.exports = function(babel) {
  const t = babel.types;
  return {
    name: "convert-alert-to-console", // this is optional
    visitor: {
      CallExpression: function(path) {
        if (path.node.callee.name === "alert") {
        }
      }
    }
  };
};

Now the only part remaining is figuring out what to replace it with.

Step 5: We go back to AST explorer and copy our to code this time and clicking on console.warn will tell us that we need to replace it with another call expression as all function calls are call expressions but since this is an object property function call that is why it needs a call expression with a member expression inside it as it's callee.

 module.exports = function(babel) {
  const t = babel.types;
  return {
    name: "convert-alert-to-console", // this is optional
    visitor: {
      CallExpression: function(path) {
        if (path.node.callee.name === "alert") {
          const args = path.node.arguments;
          path.replaceWith(
            t.callExpression(
              t.memberExpression(t.identifier("console"), t.identifier("warn")),
              args
            )
          );
        }
      }
    }
  };
};

And that's it. We wrote our second plugin too 🥳. Isn't all of this too easy? 🤗

📕 Bonus Plugin - Remove data-test-id from react app

In this we will remove every data-test-id attribute from our react app. As data-test-id is usually needed only in the dev env, our plugin can safely remove this from our production bundle.

So our code we wish to change would look something like this

import React from "react";

const App = () => {
  return (
    <div data-test-id="test">Hello World</div>
  );
}

We will convert this to

import React from "react";

const App = () => {
  return <div>Hello World</div>;
};

Step 1: Identify the AST node type we want to target. Going to AST explorer and copy paste our from code and click on data-test-id. It will highlight the node type on the right. We see that the node type to target now is called JSXAttribute.

Step 2: Fire up your editor and create new file. Let's name it removeDataAttribute.js.
Like before we start our plugin with the skeleton code

module.exports = function(babel) {
  return {
    name: "remove-date-test-id", // this is optional
    visitor: {
    }
  };
};

Step 3: So now since we know that the node we have to target is a JSXAttribute, lets write our code

So our code will look like this now

module.exports = function(babel) {
  return {
    name: "remove-date-test-id", // this is optional
    visitor: {
      JSXAttribute: function(path) {
      }
    }
  };
};

Step 4: Now the only step remaining in this babel plugin is to remove this jsx attribute node and we do it like this:

module.exports = function(babel) {
  return {
    name: "remove-date-test-id", // this is optional
    visitor: {
      JSXAttribute: function(path) {
         if(path.node.name.name === "data-test-id") {
           path.remove();
         }
      }
    }
  };
};

And that's it. We wrote another plugin 🥳.

Github Repo: https://github.com/vivek12345/webcamp-zagreb-demo

🍬 Conclusion

I hope this helps us all in understanding that AST's are not complicated and all of us can improve our developer tools ecosystem by either making linter plugins or writing babel plugins or doing large scale refactors using codemods. And if you are in the mood, you could also write a css in js library.

🔗 References

Leveling up parsing game by Vaidehi Joshi
AST explorer by Felix Kling
Babel handbook
Step by step guide to write a babel transformation
Magical land of AST's

Travel to India during Covid 19

Vivek Nayyar — Tue, 03 Nov 2020 19:49:46 +0000

Since I recently traveled to India and I have been asked by a couple of people around the rules and regulations of flying to India from Germany, I am trying to share all the information that I had gathered before my flight.

Note: I have also made a youtube video explaining how I planned my travel via Air France. Most of those procedures apply to other airline carriers as well.

You can skip reading this blog and directly watch the youtube video here

https://www.youtube.com/embed/xHtBpe9SKjA

Air France

Rules: https://www.airfrance.in/IN/en/local/resainfovol/meilleuresoffres/travelrestrictions.htm

Purchase tickets from official website.
Register with the Indian embassy in Paris(even if you are flying from Germany, the original leg of the flight to India will begin from Paris and that is the reason why we need to register with the Embassy of India in Paris. https://forms.gle/ddKHqae5cVrstXbu8
Passengers will be required to produce a copy of the registration confirmation at boarding in Paris — CDG.
Wait for an approval from the embassy. It usually takes a day to get an approval.
Submit “Undertaking cum Indemnity Bond”. You are required to print & prefill and submit to Air France staff before boarding at CDG.
Form will also be available at boarding gate CDG.
All passengers must submit a self-declaration via **https://www.newdelhiairport.in/airsuvidha/apho-registration** at least 72 hours prior departure(This is not a hard deadline — I know people who submitted this a day before as well)
DESTINATION DELHI & MUMBAI :
All passengers would undergo mandatory quarantine for 14 days. (7 days compulsory hotel at own expense + 7 days home).
If the passengers wishes to quarantine for the entire duration at home (14 days) they can seek EXEMPTION FROM INSTITUTIONAL QUARANTINE by submitting a negative RT-PCR Test report on arrival.
RT-PCR Test. This test should have been conducted within 9672 hours prior to undertaking the journey. The test Report should be uploaded here https://www.newdelhiairport.in/airsuvidha/covid-19-exemption-international-passenger. This approval takes around maximum of a day. In some case it has also been approved in few hours. Please do not upload test receipt as these days they are rejecting exemption if a covid negative report ain't uploaded.
In case of institutional quarantine is required, passengers are recommended to pre-book hotels before departure.
Hard copy of RT-PCR Report.
RT-PCR booking clinic in Berlin
1) https://www.doctolib.de/privatpraxis/berlin/berliner-centrum-fur-reise-und-tropenmedizin-bcrt-jelinek - 123 euros cost
2) https://www.centogene.com/covid-19/testing/about-the-sars-cov-2-test.html - 60 euros cost

British Airways

Rules: https://www.britishairways.com/en-gb/information/incident/coronavirus/entry-requirements

Purchase tickets from official website.
Passenger information declaration form. https://www.britishairways.com/cms/global/pdfs/information/entry-requirements/passenger-information-declaration-form-v23oct.pdf.
All passengers must submit a self-declaration via **https://www.newdelhiairport.in/airsuvidha/apho-registration** at least 72 hours prior departure(This is not a hard deadline — I know people who submitted this a day before as well)
DESTINATION DELHI & MUMBAI :
All passengers would undergo mandatory quarantine for 14 days. (7 days compulsory hotel at own expense + 7 days home).
If the passengers wishes to quarantine for the entire duration at home (14 days) they can seek EXEMPTION FROM INSTITUTIONAL QUARANTINE by submitting a negative RT-PCR Test report on arrival.
RT-PCR Test. This test should have been conducted within 9672 hours prior to undertaking the journey. The test Report should be uploaded here https://www.newdelhiairport.in/airsuvidha/covid-19-exemption-international-passenger. This approval takes around maximum of a day. In some case it has also been approved in few hours. Please do not upload test receipt as these days they are rejecting exemption if a covid negative report ain't uploaded.
In case of institutional quarantine is required, passengers are recommended to pre-book hotels before departure.
Hard copy of RT-PCR Report.
RT-PCR booking clinic in Berlin
1) https://www.doctolib.de/privatpraxis/berlin/berliner-centrum-fur-reise-und-tropenmedizin-bcrt-jelinek - 123 euros cost
2) https://www.centogene.com/covid-19/testing/about-the-sars-cov-2-test.html - 60 euros cost

KLM Airlines

Rules: https://www.klm.com/travel/in_en/campaigns/travelrestrictions.htm

Purchase tickets from official website.
Register with the Indian embassy **https://docs.google.com/forms/d/1-Sev_hUZhFX3gyd_5kmABGKMLWQkTvgFzNrV9AP7KBM/viewform?gxids=7757&edit_requested=true. **Passengers will be required to produce a copy of the registration confirmation at boarding in AMS.
Wait for an approval from the embassy. It usually takes a day to get an approval.
Submit “Undertaking cum Indemnity Bond”. You are required to print & prefill and submit to Staff before boarding at AMS.
Form will also be available at boarding gate AMS.
All passengers must submit a self-declaration via **https://www.newdelhiairport.in/airsuvidha/apho-registration** at least 72 hours prior departure(This is not a hard deadline — I know people who submitted this a day before as well)
DESTINATION DELHI & MUMBAI :
All passengers would undergo mandatory quarantine for 14 days. (7 days compulsory hotel at own expense + 7 days home).
If the passengers wishes to quarantine for the entire duration at home (14 days) they can seek EXEMPTION FROM INSTITUTIONAL QUARANTINE by submitting a negative RT-PCR Test report on arrival.
RT-PCR Test. This test should have been conducted within 9672 hours prior to undertaking the journey. The test Report should be uploaded here https://www.newdelhiairport.in/airsuvidha/covid-19-exemption-international-passenger. This approval takes around maximum of a day. In some case it has also been approved in few hours. Please do not upload test receipt as these days they are rejecting exemption if a covid negative report ain't uploaded.
In case of institutional quarantine is required, passengers are recommended to pre-book hotels before departure.
Hard copy of RT-PCR Report.
RT-PCR booking clinic in Berlin
1) https://www.doctolib.de/privatpraxis/berlin/berliner-centrum-fur-reise-und-tropenmedizin-bcrt-jelinek - 123 euros cost
2) https://www.centogene.com/covid-19/testing/about-the-sars-cov-2-test.html - 60 euros cost

Lufthansa

Rules: https://www.lufthansa.com/in/en/flight-information

Purchase tickets from official website.
Register with the Indian embassy **https://repat.videshapps.gov.in/user_registrationPg
This is a **mandatory requirement for travel on these flights. Passengers are required to produce a confirmation of the same at check-in
Wait for an approval from the embassy. It usually takes a day to get an approval.
All passengers must submit a self-declaration via **https://www.newdelhiairport.in/airsuvidha/apho-registration** at least 72 hours prior departure(This is not a hard deadline — I know people who submitted this a day before as well)
DESTINATION DELHI & MUMBAI :
All passengers would undergo mandatory quarantine for 14 days. (7 days compulsory hotel at own expense + 7 days home).
If the passengers wishes to quarantine for the entire duration at home (14 days) they can seek EXEMPTION FROM INSTITUTIONAL QUARANTINE by submitting a negative RT-PCR Test report on arrival.
RT-PCR Test. This test should have been conducted within 9672 hours prior to undertaking the journey. The test Report should be uploaded here https://www.newdelhiairport.in/airsuvidha/covid-19-exemption-international-passenger. This approval takes around maximum of a day. In some case it has also been approved in few hours. Please do not upload test receipt as these days they are rejecting exemption if a covid negative report ain't uploaded.
In case of institutional quarantine is required, passengers are recommended to pre-book hotels before departure.
Hard copy of RT-PCR Report.
RT-PCR booking clinic in Berlin
1) https://www.doctolib.de/privatpraxis/berlin/berliner-centrum-fur-reise-und-tropenmedizin-bcrt-jelinek - 123 euros cost
2) https://www.centogene.com/covid-19/testing/about-the-sars-cov-2-test.html - 60 euros cost

UPDATE: 5th November 2020

All such passengers opting for exemption from institutional quarantine shall undertake self-monitoring of their health and will be exempted from quarantine. This basically means no home quarantine is needed for passengers who have exemption from institutional quarantine.

More info here https://www.mohfw.gov.in/pdf/05112020Guidelinesforinternationalarrivals.pdf

You can follow me on twitter @VivekNayyar09 for more updates.

Also please don't forget to like, share and subscribe the youtube channel local lo baat.

Maintain social distance to prevent the virus from spreading and wash your hands regularly. Stay safe and stay at home.

E2E Testing of excel file downloads with cypress

Vivek Nayyar — Tue, 07 Apr 2020 23:02:26 +0000

Recently while working on a project, I had to create a functionality where users can download an excel file consisting of some data.

In this process, since I am a big fan of E2E Testing with Cypress.io, I decided to write a test suite that could make sure that the excel is being downloaded correctly and also consists of the correct data that our users would expect.

This article assumes a basic understanding of cypress.

Disclaimer

If you haven't tried e2e testing with cypress before, I would highly recommend skipping over to the References section and following some of the getting started guides.

📦 Installation

1) Assuming you have a repo named dashboard-ui , create a new folder in it named e2e.

2) cd into that folder and execute the following commands inside it

npm init
npm install cypress --save-dev

3) Update the project’s scripts by opening package.json and updating your scripts to the following:

"scripts": {
   "cy:run": "cypress run --headless -b chrome",
   "cy:open": "cypress open"
}

4) You should also see some default folders and files created by cypress for you after you have installed cypress.

5) The test that we will write will go inside integration folder.

⚙️ Functionality

For the sake of simplicity, let's say our application only has one feature where users can click on a download template button, which can download an excel file comprising of some data in it.

On click of the download template button a file gets downloaded which looks something like this:

Demo

🧪 E2E Testing

1) Create a new file inside integration folder with the name ExcelDownload.spec.js.

2) Inside this file our test would first start with checking for existence of our button and then we will click on it.

cy.get("[data-test-id=export-template-btn")
  .should("be.visible")
  .click();

3) After clicking on it, the file should ideally have been downloaded and now we need to somehow read that file and check if it exists and also check if it consists of the right data in it.

4) To do that, we will first need to install another npm package which can parse the excel and convert it to a json

npm install node-xlsx --save-dev

5) After this inside your plugins/index.js file we will create a new task

const xlsx = require("node-xlsx").default;
const fs = require("fs");
const path = require("path");

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  on("task", {
    parseXlsx({ filePath }) {
      return new Promise((resolve, reject) => {
        try {
          const jsonData = xlsx.parse(fs.readFileSync(filePath));
          resolve(jsonData);
        } catch (e) {
          reject(e);
        }
      });
    }
  });
};

This function will parse our excel file and convert it to json.

6) Finally let’s complete our test for excel file download

// data to check against
const data = [
  "id",
  "config_sku",
  "simple_sku",
  "fallback_type",
  "field",
  "value",
  "command"
];
// check for existence of the button on the ui and then click it
cy.get("[data-test-id=export-template-btn")
    .should("be.visible")
    .click();

// arbitrary wait so that the download can complete
cy.wait(2000);
// call the parseXlsx task we created above to parse the excel and return data as json
cy.parseXlsx("/Users/Downloads/overrides-template.xlsx").then(
  jsonData => {
    // finally we write the assertion rule to check if that data matches the data we expected the excel file to have.
    expect(jsonData[0].data[0]).to.eqls(data);
  }
);

7) With this we can be sure that our excel download functionality is working as expected.

Test Execution

8) The only caveat here is how do you know the download path for your CI/CD Pipeline or how can you change that path to something else.

The solution to that is built into cypress. Again inside plugins/index.js file we will create another task.

on("before:browser:launch", (browser = {}, launchOptions) => {
  const downloadDirectory = path.join(__dirname, '..', 'excelDownloads')

  if (browser.family === 'chromium') {
   launchOptions.preferences.default['download'] = { default_directory: downloadDirectory }
  }
  return launchOptions;
});

Here we are changing the default directory of download to a directory named excelDownloads inside of cypress folder.

https://docs.cypress.io/api/plugins/browser-launch-api.html#Change-download-directory

💡 Conclusion

In conclusion, E2E tests are really important for every app and you should write one too because this is the closest you can get to test how an actual user will use your application.

And as @tlakomy says:

Sleep better at night with e2e tests and cypress.io

👯 Share this article if you found it helpful!

You can follow me on twitter @VivekNayyar09 for more updates.

Also please don't forget to maintain social distance to prevent the virus from spreading and wash your hands regularly. Stay safe and stay at home.

🚀 References

Fixing security vulnerabilities in npm dependencies in less than 3 mins

Vivek Nayyar — Thu, 19 Mar 2020 18:05:43 +0000

Hola people!!! 🥑

It’s been a while since I have written a blog and now since most of us are working from home we sort of have a considerable amount of time at hand and I thought why not write about my recent experience of fixing a security vulnerability.

So if any of you in the recent time have seen something like this image below and have no clue how to fix it then this article is for you. When I saw it, I had no clue either but with some research I could fix this.

🔬 Problem:

github security vulnerability bot alert

So what this means is one of the dependencies in your package.json has some security implications which can be exploited by an attacker and can cause problems for you, your product or the company you work for.

For example: https://snyk.io/vuln/npm:eslint:20180222

This vulnerability could have caused a Regular Expression Denial of Service

💡 Finding:

In order to find potential vulnerabilities in your repo, you can either do

npm audit — which should show you an output like the following image:

npm audit log

2) Github security policy can also notify you — something like the following image:

github security alert

Today when I started working I had to deal with this error where acorn and minimist were being reported as security vulnerabilities.

🎉 Solution

Solution to this problem is in steps:-

📦 npm update

1) This is the first thing you should do and it's the simplest one too.

Run npm update — https://docs.npmjs.com/cli-commands/update.html
Delete your package-lock.json file or for yarn users, delete your yarn.lock file. In an ideal world this would work, but there might be some dependency which does not follow semver and might get updated too.
So a better solution here would be to only delete the lines corresponding to the vulnerable package in your package-lock.json(or yarn.lock) file.
Run npm install again

In an ideal scenario, this should have upgraded your dependencies to the next semver version and those libraries might have already fixed the version of there transitive dependencies.

🔭 npm audit

2) But if that did not fix your issue, which for minimist did not fix for me, then follow the below mentioned steps:

2.1) To fix any dependency, you need to first know which npm package depends on that.

npm audit

This will tell you the packages which are vulernable.

npm audit log

This tells me that minimist is required by mkdirp and that is required by mocha

A quick glance into package-lock.json can give you more information around the affected version.

In my case mocha(7.1.0) -> mkdirp(0.5.1) -> minimist(0.0.8) — the vulnerable version.

🔑 Resolutions key

3) And finally the fix was:

3.1) First npm install the non-vulnerable version, which in my case was 1.2.5



npm install minimist --save-dev

For yarn and npm users

3.2) Add a resolutions key in your package.json file



{
  "resolutions": {
    "minimist": "^1.2.5"
  }
}

For npm users, we need one more step for that resolutions key to work.

3.3) Use npm-force-resolutions (https://www.npmjs.com/package/npm-force-resolutions)



"scripts": {
  "preinstall": "npx npm-force-resolutions"
}

3.4) After that run



    npm install

That’s it. That solves the dependency issues which can not be updated using either npm update or by uninstalling and reinstalling a new dependency.

To check if the dependency works correctly

npm ls minimist

This should give you an output like the image below

npm ls command showing results of a dependency tree

🔥 Disclaimer

If some packages are only compatible with an older version, then this change might break your app. So be careful while resolving to a particular version and test your app before releasing this change.

👯 Share this article if you found it helpful!

You can follow me on twitter @VivekNayyar09 for more updates.

Also please don’t forget to maintain social distance to prevent the virus from spreading and wash your hands regularly. Stay safe and stay at home.