• Create a back-end application directory containing files named as app.py and requirements.txt.
• Initialize app.py file with basic Flask RESTful BoilerPlate with the tutorial link as mentioned in the Reference Section below.
• Create a new virtual environment with pip installed which will act as an isolated location (a directory) where everything resides.
• Activate the newly formed virtual environment and install the following dependencies using pip:-
  • Flask
  • youtube_transcript_api
  • transformers[torch]
• Execute pip freeze and redirect the output to the requirements.txt file. This requirements.txt file is used for specifying what python packages are required to run the project.

In app.py,

• Create a function which will accept YouTube video id as an input parameter and return parsed full transcript as output.
• The response from the Transcript API will return a list of dictionaries looking somewhat like this:

  [
    {
        'text': 'Hey there',
        'start': 7.58,
        'duration': 6.13
    },
    {
        'text': 'how are you',
        'start': 14.08,
        'duration': 7.58
    },
     ...
] 

• Parse the data from the response to return the transcript in whole string format looking somewhat like this:

  Hey there how are you ... 

In app.py,

• Create a function which will accept YouTube transcript as an input parameter and return summarized transcript as output.
• Instantiate a tokenizer and a model from the checkpoint name. Summarization is usually done using an encoder-decoder model, such as Bart or T5.
• Define the transcript that should be summarized.
• Add the T5 specific prefix “summarize: “.
• Use the PreTrainedModel.generate() method to generate the summary.

In app.py,

• Create a Flask API Route with GET HTTP Request method with a URI http://[hostname]/api/summarize?youtube_url=<url>.
• Extract the YouTube video id from the YouTube URL which is obtained from the query params.
• Generate the summarized transcript by executing the transcript generation function following the execution of transcript summarizer function.
• Return the summarized transcript with HTTP Status OK and handle HTTP exceptions if applicable.
• Run the Flask Application and test the endpoint in Postman to verify the appropriate results.

• Create a chrome extension application directory containing essential files required as mentioned below.

• The below diagram indicates the brief role of each of the files for building a chrome extension. (Image source: Coding In Simple English - Medium)

• Paste the following code snippet in the manifest.json.

{ 
    "manifest_version": 2,
    "name": "YSummarize",
    "description": "An extension to provide summarized transcript of a YouTube Subtitle eligible Video.",
    "version": "1.0",
    "permissions": ["activeTab"],


}

• And guess what? We already have enough to load our extension in the browser:
  • Just go to chrome://extensions and turn on developer mode from the top right-hand corner.
  • Then click on Load unpacked and select the folder containing the manifest file that we just created.
  • There you have it, our extension is up and running.

• Add the line below to page_action in the manifest file which enable the User Interface for a Popup.

{
 .
 .
 .
 "page_action": {
        "default_popup": "popup.html",
 }
 .
 .
}

• In the popup.html file,
  • Include the popup.css file to make the styles available to the HTML elements.
  • Include the popup.js file to enable user interaction and behavior with the HTML elements.
  • Add a button element named Summarize which when clicked will emit a click event which will be detected by an event listener to respond to it.
  • Add a div element where summarized text will be displayed when received from backend REST API Call.
• In popup.css file,
  • Provide appropriate CSS styling to the HTML elements button and div to have a better user experience.

• In popup.js,

  • When DOM is ready, attach event listener with event type as "click" to the Summarize button and pass second parameter as an anonymous callback function.
  • In anonymous function, send an action message generate using chrome.runtime.sendMessage method to notify contentScript.js to execute summary generation.
  • Add event listener chrome.runtime.onMessage to listen message result from contentScript.js which will execute the outputSummary callback function.
  • In callback function, display the summary in the div element programmatically using Javascript.

• Add the line below to content_scripts in the manifest file which will inject the content script contentScript.js declaratively and execute the script automatically on a particular page.

{
 .
 .
 .
 "content_scripts":[
    {
      "matches":["https://www.youtube.com/watch?v=*"],
      "js": ["contentScript.js"]
    }
 ],
 .
 .
 .

}

• In contentScript.js,
  • Add event listener chrome.runtime.onMessage to listen message generate which will execute the generateSummary callback function.
  • In call back function, extract the URL of the current tab and make a GET HTTP request using XMLHTTPRequest Web API to the backend to receive summarized text as a response.
  • Send an action message result with summary payload using chrome.runtime.sendMessage to notify popup.js to display the summarized text.

• Try to do the following:
  • Can you add a functionality to summarize very long transcripts using extractive summarization technique (For e.g. using LSA technique) ?
  • Can you add a functionality to summarize transcripts from a non-English video and display it in English language?
  • Can you add a functionality to adjust the maximum length of the summarized text?
  • Can you add a functionality to support transcript summarization from a video with no subtitles?