<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ritabrata Das</title>
    <description>The latest articles on DEV Community by Ritabrata Das (@ritabratadas343).</description>
    <link>https://dev.to/ritabratadas343</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F601613%2F77c705af-60f0-4f12-90b0-42168a193ef9.jpg</url>
      <title>DEV Community: Ritabrata Das</title>
      <link>https://dev.to/ritabratadas343</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ritabratadas343"/>
    <language>en</language>
    <item>
      <title>Quarkus - Java for Kubernetes</title>
      <dc:creator>Ritabrata Das</dc:creator>
      <pubDate>Mon, 02 Jun 2025 21:52:53 +0000</pubDate>
      <link>https://dev.to/ritabratadas343/quarkus-java-for-kubernetes-113a</link>
      <guid>https://dev.to/ritabratadas343/quarkus-java-for-kubernetes-113a</guid>
      <description>&lt;p&gt;🚀 Getting Back in the Game with Quarkus – Supersonic Java for the Cloud&lt;/p&gt;

&lt;p&gt;Hey devs! After a bit of a blogging hiatus (four years, to be exact!), I'm back—and what better way to return than with something that redefines &lt;em&gt;Java for the modern cloud&lt;/em&gt;: &lt;strong&gt;Quarkus&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;In this post, I’ll walk you through what Quarkus is, why it matters, and how you can get started fast—even if you're still nursing a hangover from heavyweight Java EE setups. 😅&lt;/p&gt;




&lt;h2&gt;
  
  
  🔍 What is Quarkus?
&lt;/h2&gt;

&lt;p&gt;Quarkus is a &lt;strong&gt;Kubernetes-native Java framework&lt;/strong&gt; tailored for &lt;strong&gt;GraalVM and HotSpot&lt;/strong&gt;, crafted to make Java a top-tier citizen in the world of containers and serverless. Developed by Red Hat, it’s built on proven libraries like Hibernate, RESTEasy (JAX-RS), Vert.x, and Eclipse MicroProfile.&lt;/p&gt;

&lt;h3&gt;
  
  
  💡 Why Quarkus Exists:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Java is awesome, but its traditional frameworks are &lt;strong&gt;not cloud-native&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Cold start times, memory bloat, and long build cycles have made Java fall behind newer languages in the microservices world.&lt;/li&gt;
&lt;li&gt;Quarkus fixes that.&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdhbkwn8m90piw1weumdp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdhbkwn8m90piw1weumdp.png" alt="Image description" width="248" height="203"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  ⚡ Key Features That Got Me Hooked
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Feature&lt;/th&gt;
&lt;th&gt;Why It Rocks&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Fast Boot Time&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Quarkus boots in milliseconds, making it suitable for serverless.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Low Memory Usage&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Native builds use less RAM than traditional JVMs.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Live Coding&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Real-time reload without restarting the server.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Kubernetes Native&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Built for containers and Kubernetes out-of-the-box.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Developer Joy&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Simple configuration, dev UI, and zero-config REST endpoints.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4bts8ujzh7nsb95tlg8d.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4bts8ujzh7nsb95tlg8d.jpeg" alt="Image description" width="323" height="156"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5f2x2egzyw68bz0e5aqp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5f2x2egzyw68bz0e5aqp.png" alt="Image description" width="800" height="415"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🔧 Getting Started in 3 Commands
&lt;/h2&gt;

&lt;p&gt;Here’s how to scaffold a Quarkus project in seconds:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# 1. Generate the project&lt;/span&gt;
mvn io.quarkus.platform:quarkus-maven-plugin:3.10.1:create &lt;span class="se"&gt;\&lt;/span&gt;
    &lt;span class="nt"&gt;-DprojectGroupId&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;org.acme &lt;span class="se"&gt;\&lt;/span&gt;
    &lt;span class="nt"&gt;-DprojectArtifactId&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;my-quarkus-app &lt;span class="se"&gt;\&lt;/span&gt;
    &lt;span class="nt"&gt;-DclassName&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"org.acme.GreetingResource"&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
    &lt;span class="nt"&gt;-Dpath&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"/hello"&lt;/span&gt;

&lt;span class="c"&gt;# 2. Enter the project&lt;/span&gt;
&lt;span class="nb"&gt;cd &lt;/span&gt;my-quarkus-app

&lt;span class="c"&gt;# 3. Start in dev mode (hot reload FTW!)&lt;/span&gt;
./mvnw quarkus:dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You’ll get a simple REST endpoint at &lt;code&gt;http://localhost:8080/hello&lt;/code&gt; returning a friendly greeting.&lt;/p&gt;




&lt;h2&gt;
  
  
  📦 Native Compilation with GraalVM
&lt;/h2&gt;

&lt;p&gt;Native compilation is where Quarkus shines.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;./mvnw package &lt;span class="nt"&gt;-Pnative&lt;/span&gt;
./target/my-quarkus-app-1.0.0-runner
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You get a tiny binary, fast startup, and lower resource consumption—perfect for cloud deployments.&lt;/p&gt;




&lt;h2&gt;
  
  
  ✅ Advantages of Using Quarkus
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;⚡ &lt;strong&gt;Blazing Fast Startup Time&lt;/strong&gt; – Critical for serverless and autoscaling environments.&lt;/li&gt;
&lt;li&gt;🧠 &lt;strong&gt;Developer Productivity&lt;/strong&gt; – Live reload, dev UI, and easy-to-add extensions speed up development.&lt;/li&gt;
&lt;li&gt;🐳 &lt;strong&gt;Cloud-Native by Design&lt;/strong&gt; – Built for Docker/Kubernetes with out-of-the-box support.&lt;/li&gt;
&lt;li&gt;🛠️ &lt;strong&gt;Modern Tech Stack&lt;/strong&gt; – Supports imperative and reactive programming models.&lt;/li&gt;
&lt;li&gt;🧬 &lt;strong&gt;Native Compilation&lt;/strong&gt; – Thanks to GraalVM, apps can compile to small, fast executables.&lt;/li&gt;
&lt;li&gt;💼 &lt;strong&gt;Enterprise-Ready&lt;/strong&gt; – Supported by Red Hat and built on top of mature libraries.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  ⚠️ Disadvantages / Limitations
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;🧊 &lt;strong&gt;Cold Start for Native Builds&lt;/strong&gt; – Native compilation times can be long and require GraalVM setup.&lt;/li&gt;
&lt;li&gt;🧩 &lt;strong&gt;Immature Ecosystem&lt;/strong&gt; (compared to Spring) – Fewer integrations and community plugins.&lt;/li&gt;
&lt;li&gt;🧪 &lt;strong&gt;Learning Curve&lt;/strong&gt; – Concepts like reactive programming or Panache might take getting used to.&lt;/li&gt;
&lt;li&gt;🔍 &lt;strong&gt;Debugging Native Binaries&lt;/strong&gt; – Debugging GraalVM-compiled apps can be more complex.&lt;/li&gt;
&lt;li&gt;📦 &lt;strong&gt;Not a Drop-in Spring Replacement&lt;/strong&gt; – Some Spring features may not work out-of-the-box.&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F399g87azmjqrebbozriy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F399g87azmjqrebbozriy.png" alt="Image description" width="350" height="144"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🧩 Extension Ecosystem
&lt;/h2&gt;

&lt;p&gt;Quarkus offers a wide range of extensions. Just run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;./mvnw quarkus:list-extensions
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Need Kafka? Redis? Panache for ORM? Just add the extension and you’re good to go.&lt;/p&gt;




&lt;h2&gt;
  
  
  🔗 Cloud-Ready by Default
&lt;/h2&gt;

&lt;p&gt;Deploying to Kubernetes or OpenShift? Quarkus simplifies it with built-in configurations and Kubernetes descriptors generation.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;./mvnw clean package &lt;span class="nt"&gt;-Dquarkus&lt;/span&gt;.kubernetes.deploy&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nb"&gt;true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Boom—your app is on Kubernetes.&lt;/p&gt;




&lt;h2&gt;
  
  
  🧠 Final Thoughts
&lt;/h2&gt;

&lt;p&gt;If you’ve been avoiding Java for greenfield cloud-native projects, Quarkus might change your mind. It brings performance, simplicity, and joy back to Java development in a way that’s actually fun again.&lt;/p&gt;

&lt;p&gt;This is just the beginning—next up, I’ll explore reactive programming with Quarkus and integrating it with Kafka and PostgreSQL.&lt;/p&gt;

&lt;p&gt;Stay tuned—and happy coding! 👨‍💻🔥&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Have questions, thoughts, or suggestions? Drop a comment below or hit me up on &lt;a href="https://www.instagram.com/t.h.e.s.k.y.w.a.l.k.e.r/" rel="noopener noreferrer"&gt;Instagram&lt;/a&gt; / &lt;a href="https://github.com/RitabrataDas343" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;!&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;NB - I am coming back to writing articles after 4 years. Support me at:&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://www.buymeacoffee.com/rito343" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2znn4km0i2jib7ru1sm9.png" alt="buy me a coffee" width="170" height="37"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>java</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Control Google Meet With Expressions/Gestures</title>
      <dc:creator>Ritabrata Das</dc:creator>
      <pubDate>Thu, 26 Aug 2021 09:41:15 +0000</pubDate>
      <link>https://dev.to/nitdgplug/control-google-meet-with-expressions-gestures-21oo</link>
      <guid>https://dev.to/nitdgplug/control-google-meet-with-expressions-gestures-21oo</guid>
      <description>&lt;p&gt;With the advancements made in the field of modern day machine-learning technologies, it has become quite easy and flexible to develop models and applications based on this domain. So, you might have a perception that the realm of Machine Learning requires complex algorithms and huge expert knowledge for it's projects. &lt;/p&gt;

&lt;p&gt;However, in the recent times, it has been quite easy to develop them as most of the standard algorithms and models are made available on the Internet in the form of web-applications. In this project, we will be using &lt;strong&gt;Teachable Machine&lt;/strong&gt;, along with &lt;strong&gt;Tensorflow.js&lt;/strong&gt; to control the basic actions in &lt;strong&gt;Google Meet&lt;/strong&gt; such as muting, switching off your video and a special action, which will be revealed in the later course of the article.         &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F74r6ivwuiroq1bgx4i33.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F74r6ivwuiroq1bgx4i33.png" alt="Screenshot_77"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Teachable-Machine
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Teachable Machine&lt;/strong&gt; is an online web-application, created by &lt;strong&gt;Google Creative Labs&lt;/strong&gt; that facilitates &lt;strong&gt;easy and fast creation of machine learning models&lt;/strong&gt; that is accessible to everyone on the net. It is flexible as it makes use of &lt;strong&gt;pre-existing files&lt;/strong&gt; or even &lt;strong&gt;capture live examples&lt;/strong&gt;, which will be recorded as instances, on the basis of which references will be made. You can even make a choice to use your models entirely &lt;strong&gt;on-device&lt;/strong&gt;, without any webcam or microphone data being conveyed outside your system. &lt;br&gt;
The advantage is that you train your computer to recognize your &lt;strong&gt;images, sounds, and poses&lt;/strong&gt; of your personal choice, without writing any complicated and long machine learning code. Then, you can use your model in your own &lt;strong&gt;projects, applications, websites and even more&lt;/strong&gt;. It is powered by &lt;strong&gt;Tensorflow.js&lt;/strong&gt;, which is an open-source library, created by &lt;strong&gt;Google&lt;/strong&gt; for the purpose of Machine-Learning.&lt;/p&gt;
&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;p&gt;Well, at the most, what you require is the basic knowledge of &lt;strong&gt;Vanilla JavaScript&lt;/strong&gt;, a webcam, an Internet connection and the passion to learn something new. Then, follow the below steps and get your own functional model developed in front of your eyes.&lt;/p&gt;
&lt;h2&gt;
  
  
  The Project
&lt;/h2&gt;

&lt;p&gt;The project is in the form of a chrome browser-extension, which basically controls all the actions on Google Meet. The article has been divided into the following subtopics to facilitate your understanding:&lt;/p&gt;
&lt;h3&gt;
  
  
  Step 1: Training your Model
&lt;/h3&gt;

&lt;p&gt;The first step involves &lt;strong&gt;creating the basic models on Teachable Machine&lt;/strong&gt;. The model can be either any &lt;strong&gt;image, body pose or sound of your choice&lt;/strong&gt;. In this project, we have decided to utilize the &lt;strong&gt;basic image model&lt;/strong&gt; for training our computer. However, you can also use body poses and speech to train your model otherwise. &lt;strong&gt;Make sure the images, poses or sounds that you wish to implement are quite unnatural and can be performed accurately.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Now, to start with, head over to the &lt;a href="https://teachablemachine.withgoogle.com/" rel="noopener noreferrer"&gt;Teachable Machine&lt;/a&gt; site and click on &lt;strong&gt;Get Started&lt;/strong&gt;. You can further access it from the hamburger  menu at the top-left corner of the homepage. You will get the following page:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flmg5sbegmoeim8odk30r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flmg5sbegmoeim8odk30r.png" alt="Screenshot_2021-08-07_15-45-06"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You will now get the options for creating your model online to train your machine. There are three different projects namely &lt;strong&gt;Image Project, Audio Project and Pose Project&lt;/strong&gt;. For our model, we have used the &lt;strong&gt;Pose Project&lt;/strong&gt; for it's implementation. You can also import your previously saved models from your &lt;strong&gt;Google Drive or local file system&lt;/strong&gt; if you want to use a model which was created beforehand and you wish to reuse and modify it. If you want a new model, just click on &lt;strong&gt;Pose Project&lt;/strong&gt;. Then, the site will redirect you to your project destination: &lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm6vljtdzwbz6neq7l2gk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm6vljtdzwbz6neq7l2gk.png" alt="abc"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;First, you have to record your images in the form of &lt;strong&gt;"classes"&lt;/strong&gt;. The images can be &lt;strong&gt;captured live via webcam&lt;/strong&gt;, or can be &lt;strong&gt;uploaded from the local file system&lt;/strong&gt; as well. The image samples of a particular class should be &lt;strong&gt;same and repetitive&lt;/strong&gt; in nature, while the image samples used in various classes should be &lt;strong&gt;different&lt;/strong&gt; so that the class can be defined more accurately and can be recognized with ease.&lt;/p&gt;

&lt;p&gt;It is advisable to record &lt;strong&gt;at least 50 to 60 images&lt;/strong&gt; for increasing the accuracy threshold of the recorded class. In order to record live instances, grant permission to your webcam and press the &lt;strong&gt;Hold to Record&lt;/strong&gt; button to capture your live images. &lt;/p&gt;

&lt;p&gt;If you want a free tutorial on how to record your model in the form of images, you can head over to the &lt;a href="https://teachablemachine.withgoogle.com/v1/" rel="noopener noreferrer"&gt;Teachable Machine Tutorial&lt;/a&gt; and click on &lt;strong&gt;"Let's Go"&lt;/strong&gt; for a live demo practice.&lt;/p&gt;

&lt;p&gt;You can change the &lt;strong&gt;labels&lt;/strong&gt; of the classes according to your wish. In this project, we have made use of three classes namely: &lt;strong&gt;Audio&lt;/strong&gt;,&lt;strong&gt;Video&lt;/strong&gt; and &lt;strong&gt;Escape&lt;/strong&gt;, which are recorded live via webcam. The images in these classes can be specific &lt;strong&gt;hand gestures ,facial expressions or particular objects&lt;/strong&gt;, which can be identified and recognized by the machine easily. &lt;br&gt;
In order to add more than two classes, click on &lt;strong&gt;Add Class&lt;/strong&gt;. After recording the image samples for the respective classes, it is time to train and export your model.&lt;/p&gt;
&lt;h3&gt;
  
  
  Step 2: Exporting your Model
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhzl31obq3b7r3grmk5no.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhzl31obq3b7r3grmk5no.png" alt="Screenshot_2021-08-07_16-59-46"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After, you have created your respective classes, click on &lt;strong&gt;Train Model&lt;/strong&gt;, which will train your machine to recognize the content of the images, which will be used in our upcoming projects. Teachable Machine mainly uses &lt;strong&gt;pattern recognition algorithms&lt;/strong&gt; and involves the usage of:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Statistical Techniques&lt;/li&gt;
&lt;li&gt;Structural Techniques&lt;/li&gt;
&lt;li&gt;Template Matching&lt;/li&gt;
&lt;li&gt;Neural Network Approach&lt;/li&gt;
&lt;li&gt;Fuzzy Model&lt;/li&gt;
&lt;li&gt;Hybrid Models&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;After your model has been trained, you can &lt;strong&gt;preview your model&lt;/strong&gt; before exporting it. This helps you to test the model before implementing it in your projects. Just perform the poses according to the images set by you and check whether the machine can identify them or not. &lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1oo8kbt57ew1xsxkehb6.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1oo8kbt57ew1xsxkehb6.gif" alt="ezgif.com-gif-maker"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When your model has been prepared, click on &lt;strong&gt;Export Model&lt;/strong&gt; and export the model in the form of &lt;strong&gt;Tensorflow.js&lt;/strong&gt;. Click on &lt;strong&gt;Upload my model&lt;/strong&gt;, which will publish your model online and it will generate an &lt;strong&gt;URL&lt;/strong&gt; , where your model will be hosted by Teachable Machine for free. You can also download it in the form of &lt;strong&gt;Tensorflow&lt;/strong&gt; or &lt;strong&gt;Tensorflow Lite&lt;/strong&gt; for local uses. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The model used in the project is live at:&lt;/strong&gt; &lt;a href="https://teachablemachine.withgoogle.com/models/fDdI9WGhO/" rel="noopener noreferrer"&gt;Project Model&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Step 3: Preparing the Manifest.json
&lt;/h3&gt;

&lt;p&gt;The next step involves creating a &lt;strong&gt;Chrome browser extension&lt;/strong&gt; to render the following model to the Google Meet URL. So, we have to create the &lt;strong&gt;manifest.json&lt;/strong&gt; file in the browser directory which will be loaded in the browser. So let's have a look at the json file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Gmeet_Controller&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;description&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;An extension to control Google Meet Actions using hand/facial gestures.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;permissions&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;activeTab&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;storage&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;tabs&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;notifications&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;version&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1.0&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;manifest_version&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;content_scripts&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;matches&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://meet.google.com/*&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
        &lt;span class="p"&gt;],&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;src/tf.min.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;src/teachablemachine-pose.min.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;src/background.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
        &lt;span class="p"&gt;]&lt;/span&gt;
    &lt;span class="p"&gt;}]&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;You can set the &lt;strong&gt;name&lt;/strong&gt;, &lt;strong&gt;description&lt;/strong&gt; and &lt;strong&gt;version&lt;/strong&gt; according to your choice, which is basically the information which will be displayed when you will load the extension on to the browser. You can also store &lt;strong&gt;icons&lt;/strong&gt; in a separate directory in your extension directory and render them on to the browser. The URL needs to be specified in &lt;strong&gt;"matches"&lt;/strong&gt; under &lt;strong&gt;content scripts&lt;/strong&gt;. You can set &lt;strong&gt;permissions&lt;/strong&gt; as well, if you do not want the extension to have unnecessary access to your system storage, notifications etc.&lt;/p&gt;
&lt;h3&gt;
  
  
  Step 4: Linking your models to Google Meet
&lt;/h3&gt;

&lt;p&gt;Now create a separate directory to store the javascript files (here &lt;strong&gt;src&lt;/strong&gt;), which will render the functionality of the extension. Download the latest and updated version of &lt;a href="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" rel="noopener noreferrer"&gt;tf.min.js&lt;/a&gt; and &lt;a href="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8.3/dist/teachablemachine-pose.min.js" rel="noopener noreferrer"&gt;teachablemachine-pose.min.js&lt;/a&gt;, and place them in the directory. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Note: This project can also be accomplished using npm and yarn packages such as "@teachablemachine/pose" and "@tensorflow/tfjs" or using their CDNs. However, we have used Vanilla JS to make the project simple and beginner-friendly.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;After importing, it is now time to frame the &lt;strong&gt;background.js&lt;/strong&gt;. First, declare a constant variable named URL which will contain the model URL that was generated by Teachable Machine.&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;URL&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://teachablemachine.withgoogle.com/models/&amp;lt;MODEL_ID&amp;gt;/&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="c1"&gt;// Use your own personalized model here&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Then you have to write the basic Javascript to adjust the frame &lt;strong&gt;height and width&lt;/strong&gt; of the webcam, &lt;strong&gt;request access from the webcam&lt;/strong&gt; and keep on &lt;strong&gt;updating the webcam frame&lt;/strong&gt;.&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;model&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;webcam&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;labelContainer&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;maxPredictions&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;init&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;modelURL&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;URL&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;model.json&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;metadataURL&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;URL&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;metadata.json&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="nx"&gt;model&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;tmPose&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;load&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;modelURL&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;metadataURL&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;maxPredictions&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;model&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getTotalClasses&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;size&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;flip&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; 
    &lt;span class="nx"&gt;webcam&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;tmPose&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Webcam&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;size&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;size&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;flip&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;webcam&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setup&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; 
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;webcam&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;play&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;requestAnimationFrame&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;loop&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;webcam-container&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;appendChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;webcam&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;canvas&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;loop&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;timestamp&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;webcam&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;update&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;predict&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;requestAnimationFrame&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;loop&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Now we have to write the functions to identify the event on the webcam, compare it with the classes of the models and if the event's probability is more than the threshold probability then the function gets executed.&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Audio&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;probability&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;probability&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;audioButton&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;querySelectorAll&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;.VfPpkd-Bz112c-LgbsSe.yHy1rc.eT1oJ.tWDL4c.uaILN&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;audioButton&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;classList&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;contains&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;HNeRed&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;audioButton&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;click&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Video&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;probability&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;probability&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;videoButton&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;querySelectorAll&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;.VfPpkd-Bz112c-LgbsSe.yHy1rc.eT1oJ.tWDL4c.uaILN&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;videoButton&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;classList&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;contains&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;HNeRed&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;videoButton&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;click&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Escape&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;probability&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;probability&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Button0&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;querySelectorAll&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;.VfPpkd-Bz112c-LgbsSe.yHy1rc.eT1oJ.tWDL4c.uaILN&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Button1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;querySelectorAll&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;.VfPpkd-Bz112c-LgbsSe.yHy1rc.eT1oJ.tWDL4c.uaILN&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;Button0&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;classList&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;contains&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;HNeRed&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;Button0&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;click&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;Button1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;classList&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;contains&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;HNeRed&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;Button1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;click&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;predict&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;pose&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;posenetOutput&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;model&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;estimatePose&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;webcam&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;canvas&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;prediction&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;model&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;predict&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;posenetOutput&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;predictionsArray&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;prediction&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;o&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;probability&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;o&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;probability&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toFixed&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="na"&gt;event&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;o&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;className&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;

    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;min&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;predictionsArray&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;probability&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;max&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;predictionsArray&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;probability&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;event&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;predictionsArray&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;predictionsArray&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;predictionsArray&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;probability&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;min&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="nx"&gt;min&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;max&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="nx"&gt;max&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;index&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;predictionsArray&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;findIndex&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;probability&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="nx"&gt;max&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="nx"&gt;event&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;predictionsArray&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Audio&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nc"&gt;Audio&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;max&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Video&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nc"&gt;Video&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;max&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Escape&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
        &lt;span class="nc"&gt;Escape&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;max&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;


&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;webcamContainer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createElement&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;div&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;webcamContainer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;webcam-container&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;appendChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;webcamContainer&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nf"&gt;init&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Open &lt;strong&gt;Google Chrome&lt;/strong&gt;, and type &lt;strong&gt;"chrome://extensions"&lt;/strong&gt;, to navigate to the &lt;strong&gt;Extensions&lt;/strong&gt; window. Now toggle on the &lt;strong&gt;Developer mode&lt;/strong&gt;, and click on &lt;strong&gt;Load unpacked&lt;/strong&gt;. Then open the file directory where your &lt;strong&gt;manifest.json&lt;/strong&gt; is stored. The extension is now ready to work.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Now you can have your own personalized model working on your system!&lt;/strong&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;Here you can have a short look at the working model of the project: &lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/JIXqszlrv2M"&gt;
&lt;/iframe&gt;
&lt;/p&gt;


&lt;h2&gt;
  
  
  Resources
&lt;/h2&gt;

&lt;p&gt;You can further refer to the following documentation and tutorials to know more about the libraries and technologies:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://teachablemachine.withgoogle.com/" rel="noopener noreferrer"&gt;Teachable Machine&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.tensorflow.org/js" rel="noopener noreferrer"&gt;Tensorflow&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.chrome.com/docs/extensions/mv3/getstarted/" rel="noopener noreferrer"&gt;How to make a Browser Extension?&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Credits:&lt;/strong&gt; &lt;a href="https://github.com/arjusmoon860" rel="noopener noreferrer"&gt;Arju S. Moon&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can find the github repository for the above project here:&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/RitabrataDas343" rel="noopener noreferrer"&gt;
        RitabrataDas343
      &lt;/a&gt; / &lt;a href="https://github.com/RitabrataDas343/GMeet_Controller" rel="noopener noreferrer"&gt;
        GMeet_Controller
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      This is a browser extension used for controlling Google Meet using hand/facial expressions.
    &lt;/h3&gt;
  &lt;/div&gt;
&lt;/div&gt;






&lt;p&gt;This article has been written and established by: &lt;/p&gt;

&lt;div class="ltag__user ltag__user__id__601613"&gt;
    &lt;a href="/ritabratadas343" class="ltag__user__link profile-image-link"&gt;
      &lt;div class="ltag__user__pic"&gt;
        &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F601613%2F77c705af-60f0-4f12-90b0-42168a193ef9.jpg" alt="ritabratadas343 image"&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;div class="ltag__user__content"&gt;
    &lt;h2&gt;
&lt;a class="ltag__user__link" href="/ritabratadas343"&gt;Ritabrata Das&lt;/a&gt;Follow
&lt;/h2&gt;
    &lt;div class="ltag__user__summary"&gt;
      &lt;a class="ltag__user__link" href="/ritabratadas343"&gt;Open-Source Fanatic || Full-Stack Developer || Graphic Designer || C.P. Enthusiast || CTF Player&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;center&gt;&lt;b&gt;and&lt;/b&gt;&lt;/center&gt;

&lt;div class="ltag__user ltag__user__id__601717"&gt;
    &lt;a href="/deucaleon18" class="ltag__user__link profile-image-link"&gt;
      &lt;div class="ltag__user__pic"&gt;
        &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F601717%2Fac894415-7fe0-47af-b8ba-959cf9e0aec2.jpeg" alt="deucaleon18 image"&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;div class="ltag__user__content"&gt;
    &lt;h2&gt;
&lt;a class="ltag__user__link" href="/deucaleon18"&gt;Shubham Shantam Raju&lt;/a&gt;Follow
&lt;/h2&gt;
    &lt;div class="ltag__user__summary"&gt;
      &lt;a class="ltag__user__link" href="/deucaleon18"&gt;Open Source Enthusiast | Sophomore of NIT Durgapur | Member of GNU Linux Users' Group | Full Stack Devleoper (MERN) | Blockchain Enthusiast&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;center&gt;&lt;b&gt;Hope you have found this article resourceful. &lt;/b&gt;&lt;/center&gt;

&lt;p&gt;Have a go through the following links to know more about us and keep yourself updated with the latest stuff:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://nitdgplug.org/" rel="noopener noreferrer"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGLUG_Website-FCC624%3Fstyle%3Dfor-the-badge%26logo%3Dlinux%26logoColor%3Dblack" alt="Linux"&gt; &lt;/a&gt; &lt;a href="https://www.facebook.com/nitdgplug/" rel="noopener noreferrer"&gt; &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FFacebook-%25231877F2.svg%3Fstyle%3Dfor-the-badge%26logo%3DFacebook%26logoColor%3Dwhite" alt="Facebook"&gt; &lt;/a&gt; &lt;a href="https://www.instagram.com/nitdgplug/" rel="noopener noreferrer"&gt; &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FInstagram-%2523E4405F.svg%3Fstyle%3Dfor-the-badge%26logo%3DInstagram%26logoColor%3Dwhite" alt="Instagram"&gt; &lt;/a&gt; &lt;a href="https://www.linkedin.com/company/lugnitdgp/" rel="noopener noreferrer"&gt; &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Flinkedin-%25230077B5.svg%3Fstyle%3Dfor-the-badge%26logo%3Dlinkedin%26logoColor%3Dwhite" alt="LinkedIn"&gt; &lt;/a&gt;&lt;a&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;
Do drop a &lt;b&gt;like&lt;/b&gt; to the post and &lt;b&gt;comment&lt;/b&gt; down below if you have liked the idea and are interested in exploring the domain of Machine-Learning along with us. Any kind of suggestions and propositions are appreciated.  
&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;center&gt;&lt;strong&gt;May The Source Be With You! 🐧❤️&lt;/strong&gt;&lt;/center&gt;
&lt;/h3&gt;




&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--sZInPlPk--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_66%252Cw_880%2Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fcplzcsry6s5r8m1pale8.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--sZInPlPk--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_66%252Cw_880%2Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fcplzcsry6s5r8m1pale8.gif"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>tutorial</category>
      <category>machinelearning</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Adding port "8080/tcp" using UFW</title>
      <dc:creator>Ritabrata Das</dc:creator>
      <pubDate>Mon, 10 May 2021 11:10:35 +0000</pubDate>
      <link>https://dev.to/ritabratadas343/adding-port-8080-tcp-using-ufw-4bbe</link>
      <guid>https://dev.to/ritabratadas343/adding-port-8080-tcp-using-ufw-4bbe</guid>
      <description>&lt;p&gt;Hello there!!1 &lt;br&gt;
I have recently done a research on &lt;strong&gt;how to add the port 8080/tcp&lt;/strong&gt; in my system and list all the active ports in a text file called &lt;strong&gt;"zones.txt"&lt;/strong&gt;. I use a Linux Mint 20.1 XFCE system and I came across the apt-package named &lt;strong&gt;Uncomplicated Firewall&lt;/strong&gt;. This package allows you to open ports on your system and makes them ready for use using ssh. &lt;br&gt;
&lt;em&gt;Here is a screenshot on how to progress with the procedures.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Far7rvd8m6l3dizzlpthx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Far7rvd8m6l3dizzlpthx.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;I am also attaching my GitHub gist which provides an detailed explanation on how to implement this in your system.&lt;/strong&gt;&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;
 

&lt;h4&gt;
  
  
  Best of Luck and May the Source be with You 🐧💗.
&lt;/h4&gt;

</description>
      <category>linux</category>
      <category>ubuntu</category>
    </item>
    <item>
      <title>i3 Ricing</title>
      <dc:creator>Ritabrata Das</dc:creator>
      <pubDate>Sun, 09 May 2021 14:12:25 +0000</pubDate>
      <link>https://dev.to/ritabratadas343/i3-ricing-19ih</link>
      <guid>https://dev.to/ritabratadas343/i3-ricing-19ih</guid>
      <description>&lt;p&gt;Hello guys!!!&lt;br&gt;
Recently I have riced my entire &lt;strong&gt;Linux Mint 20.1 XFCE&lt;/strong&gt; using the &lt;strong&gt;i3-window manager&lt;/strong&gt;. Developers mostly use upgraded ricing tools like the Awesome window manager for their ricing models. Ricing in Arch-based systems is comparatively easier than in Ubuntu-based systems. Although, I preferred i3-window manager as it is &lt;strong&gt;good for beginners and we get to build the ricing model from scratch&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;My Ricing model is uploaded on YouTube on my friend's channel:&lt;br&gt;
 &lt;a href="https://youtu.be/-WyIyqiNpBk" rel="noopener noreferrer"&gt;i3-riced model&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/-WyIyqiNpBk"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;The configuration file for the ricing model is uploaded on GitHub: &lt;br&gt;
 &lt;a href="https://github.com/RitabrataDas343/i3_Ricing" rel="noopener noreferrer"&gt;i3-config-files&lt;/a&gt;&lt;/p&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/RitabrataDas343" rel="noopener noreferrer"&gt;
        RitabrataDas343
      &lt;/a&gt; / &lt;a href="https://github.com/RitabrataDas343/i3_Ricing" rel="noopener noreferrer"&gt;
        i3_Ricing
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      This is the repository containing the ricing configuration of the system. Please follow the steps of the README.md file in the repository to get the desired effect of ricing. 
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;i3_Ricing&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;This is the repository containig the ricing configuration of the system. Please follow the steps of the README.md file in the repository to get the desired effect of ricing.&lt;/p&gt;
&lt;p&gt;i3 is one of the most popular open source software that is used for ricing. 'Ricing' basically represents customizing desktop and enables multi-tasking tiling features and so on.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;To install&lt;/h2&gt;
&lt;/div&gt;
&lt;div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"&gt;
&lt;pre&gt;$ sudo apt install i3
$ sudo apt install feh thunar rofi pavucontrol arandr i3blocks compton lxappearance&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;Logout of the window and on the login screen, you will get a white icon depicting the i3 window manager, select that and login.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h4 class="heading-element"&gt;On login, you will get to choose &lt;em&gt;Win&lt;/em&gt; or &lt;em&gt;Alt&lt;/em&gt; keys to be your Mod key. It is preferable to use the &lt;em&gt;Win&lt;/em&gt; key but you can use the &lt;em&gt;Alt&lt;/em&gt; key as well.&lt;/h4&gt;
&lt;/div&gt;
&lt;p&gt;Now, you are good to go.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h4 class="heading-element"&gt;Patch the i3 folder from the repository and place it&lt;/h4&gt;…&lt;/div&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/RitabrataDas343/i3_Ricing" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;I hope you can try it and publish your ricing models too. &lt;/p&gt;

&lt;p&gt;Other references:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://i3wm.org/docs/userguide.html" rel="noopener noreferrer"&gt;i3wm-guide&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://gist.github.com/RitabrataDas343/e2cd532cbc7be330d58b58364bff0b07" rel="noopener noreferrer"&gt;My GitHub Gist for Keybindings&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Happy Ricing!!!&lt;br&gt;
May the Source be with you 🐧💗. &lt;/p&gt;

</description>
      <category>linux</category>
      <category>ubuntu</category>
    </item>
  </channel>
</rss>
