Build the Web Layout to Finish the App

Create an HTML page for our app

Let’s add an HTML page where we’ll have a text input box where user can provide the YouTube video id and two buttons: 

• One that generates caption of the video. 

• Second that summarizes the video (by internally generating the captions and then summarizing).

We’ll also render the output on the same HTML page so that we don’t lose our output. We will also add two buttons (which are by default hidden until we get the answer back from the /generate-captions and /summarize-video APIs).

• First button will call the rewrite-text API to rewrite the text displayed in the text area on the web page. 

• The second button will copy the answer to our clipboard.

Let’s take a look at the HTML and CSS for a simple design of our HTML page.

Code explanation:

Let’s briefly discuss the HTML and CSS code.

• The HTML code consists of a heading and the title of our project. Then we add an input tag to accept the YouTube video id from the user. We add two buttons: first will call the /generate-captions and other will call the /summarize-video API. We add an empty <div> with id as loader to show the loader by setting a class attribute through JavaScript once an API is called and remove the class attribute once we get the response from the API. Then, we add a text area that will be used to render the response from both the APIs ...