Forem: professor_2390

How To Make a Realtime Smile Detector

professor_2390 — Sun, 07 Mar 2021 17:59:38 +0000

So After A long time i returned with python a.i So lets begin

download these files
haarcascade_frontalface_default.xml
haarcascade_smile.xml

now lets add Face and Smile classifiers

# Face and Smile classifiers
face_detector = cv2.CascadeClassifier('haarcascade_frontalface_default.xml')
smile_detector = cv2.CascadeClassifier('haarcascade_smile.xml')

lets get our webcam

# Grab Webcam feed
webcam = cv2.VideoCapture(0)

Lets add the frames

while True:

    successful_frame_read, frame = webcam.read()

    # if there is an error or abort
    if not successful_frame_read:
        break

    # Change to grayscale
    frame_grayscale = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

    # Detect faces first
    faces = face_detector.detectMultiScale(frame_grayscale, 1.3, 5)

Now lets detect the faces make a retringle around the face and add the text is he smiling and quit functionally

# Run smile detection within each of those faces
    for (x, y, w, h) in faces:
        # draw a square around smile
        cv2.rectangle(frame, (x, y), (x+w, y+h), (100, 200, 50), 4)

        # Draw a sub image
        face = frame[y:y+h, x:x+w]

        # Grayscale the face
        face_grayscale = cv2.cvtColor(face, cv2.COLOR_BGR2GRAY)

        # Detect Smile in the face 😄
        smile = smile_detector.detectMultiScale(face_grayscale, 1.7,20)

        # Label the face as smiling 

        if len(smile) > 0:
            cv2.putText(frame, 'Smiling', (x,y+h+40), fontScale=3,
            fontFace=cv2.FONT_HERSHEY_PLAIN, color=(255,255,255))

        # Show the current frame
        cv2.imshow('Smile Detector', frame)

        # Stop if 'Q' is pressed
        key = cv2.waitKey(1)   
        if key == 81 or key==113:
            break

Now lets clearup and release the webcam

# Clear up!
webcam.release() 
cv2.destroyAllWindows()

lets see the full code

#============================================================
#   This is an a.i smile detector written in python
#           By - 'Sadman Sakib'
#============================================================
import cv2 

# Face and Smile classifiers
face_detector = cv2.CascadeClassifier('haarcascade_frontalface_default.xml')
smile_detector = cv2.CascadeClassifier('haarcascade_smile.xml')

# Grab Webcam feed
webcam = cv2.VideoCapture(0)

while True:

    successful_frame_read, frame = webcam.read()

    # if there is an error or abort
    if not successful_frame_read:
        break

    # Change to grayscale
    frame_grayscale = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

    # Detect faces first
    faces = face_detector.detectMultiScale(frame_grayscale, 1.3, 5)

    # Run smile detection within each of those faces
    for (x, y, w, h) in faces:
        # draw a square around smile
        cv2.rectangle(frame, (x, y), (x+w, y+h), (100, 200, 50), 4)

        # Draw a sub image
        face = frame[y:y+h, x:x+w]

        # Grayscale the face
        face_grayscale = cv2.cvtColor(face, cv2.COLOR_BGR2GRAY)

        # Detect Smile in the face 😄
        smile = smile_detector.detectMultiScale(face_grayscale, 1.7,20)

        # Label the face as smiling 

        if len(smile) > 0:
            cv2.putText(frame, 'Smiling', (x,y+h+40), fontScale=3,
            fontFace=cv2.FONT_HERSHEY_PLAIN, color=(255,255,255))

        # Show the current frame
        cv2.imshow('Smile Detector', frame)

        # Stop if 'Q' is pressed
        key = cv2.waitKey(1)   
        if key == 81 or key==113:
            break

# Clear up!
webcam.release() 
cv2.destroyAllWindows()

It is on github
Code
please give it a star

How to make a digital greeting clock using javascript

professor_2390 — Fri, 05 Feb 2021 11:08:17 +0000

So, Today we are going to build a digital greeting clock using javascript so lets start,lets see the folder structure

DIGITAL CLOCK
├───css
└───js

in the project root make an index.html file and make a css file in css folder and a js file in js folder open root folder in code editor

code .

now lets start codding the entire html file

after that we have to code the css

now the main part the javascript open the js file code the js
lets code the clock

const clock = () => {
  var date    = new Date();
  var hours   = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  var midday;

  hours     = updateTime(hours);
  minutes   = updateTime(minutes);
  seconds   = updateTime(seconds);
  var name  = "Hacker";

  // if else condition

  midday = (hours >= 12) ? "PM" : "AM";

  document.getElementById("clock").innerHTML =
    ""+hours+"" + ":" + ""+minutes+"" + ":" + ""+seconds+"" + ""+midday+"";

  var time = setTimeout(function () {
    clock();
  }, 1000);

  //   Good Morning and Good Night Conditions

  if (hours < 12) {
    var greeting = "Good Morning " + name + " Hurry Up!";
  }

  if (hours >= 12 && hours <= 18) {
    var greeting = "Good Afternoon " + name;
  }

  if (hours >= 18 && hours <= 24) {
    var greeting = "Good Evening " + name;
  }

  document.getElementById("greetings").innerHTML = greeting;
}

now lets update the time and call the clock function

const updateTime = (k) => {
  if (k < 10) {
    return "0" + k;
  } else {
    return k;
  }
}

// call clock function 
clock();

there you have it it is done please follow me on github the code is also on github

github: https://github.com/Sadman-Sakib2234/
code: https://github.com/Sadman-Sakib2234/Greetings-clock-js
twitter: https://twitter.com/SakibDev

How to make a random password generator using javascript

professor_2390 — Thu, 28 Jan 2021 19:18:37 +0000

So today we are doing to build a random password generator using html css js so lets start

At first lets see the folder structure

PASSWORD GENERATOR MINI PROJECT USING HTML CSS & JAVASCRIPT
├───css
├───img
└───js

in the project root make an index.html file and make a css file in css folder and a js file in js folder and for copying the password we need an clipboard image download it

open project in the code editor

code .

import css and js in the index.html file

now lets start codding.Write the entire html

After it we want to code the css so lets start. copy the entire style.css from here

* {
  margin: 0;
  padding: 0;
  font-family: Consolas;
  user-select: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f8f8f8;
}

.inputBox {
  position: relative;
  width: 450px;
}

.inputBox h2 {
  font-size: 28px;
  color: #333333;
}

.inputBox input {
  position: relative;
  width: 100%;
  height: 60px;
  border: none;
  margin: 15px 0 20px;
  background: transparent;
  outline: none;
  padding: 0 20px;
  font-size: 24px;
  letter-spacing: 4px;
  box-sizing: border-box;
  border-radius: 4px;
  color: #333333;
  box-shadow: -4px -4px 10px rgba(255, 255, 255, 1),
    inset 4px 4px 10px rgba(0, 0, 0, 0.05),
    inset -4px -4px 10px rgba(255, 255, 255, 1),
    4px 4px 10px rgba(0, 0, 0, 0.05);
}

.inputBox input::placeholder {
  letter-spacing: 0px;
}

.inputBox #btn {
  position: relative;
  cursor: pointer;
  color: #fff;
  background-color: #333333;
  font-size: 24px;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 8px;
}

.inputBox #btn:active {
  background-color: #9c27b0;
}

.copy {
  position: absolute;
  top: 58px;
  right: 15px;
  cursor: pointer;
  opacity: 0.2;
  width: 40px;
  height: 40px;
}

.copy:hover {
  opacity: 1;
}

.alertbox {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background-color: #9c27b0;
  color: #fff;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-size: 4em;
  display: none;
}

.alertbox.active {
  display: flex;
  justify-content: center;
  align-content: center;
}

now lets write the js file open it and start put the js code in

so now we have completed the project. the full code is on github .please follow me on github if you want and thanks for reading good bye...
github: get the code here

How to make a weather app in React using openweather api

professor_2390 — Wed, 27 Jan 2021 15:48:03 +0000

So today i am going to show how to make a weather app in react

At first create an empty react app

npx create-react-app weather-app

cd into it and now open it in code editor

code .

Now delete app.css and open the app.js
import useState

import React, { useState } from 'react';

not make a variable and app api key

const api = {
  key: "key",
  base: "https://api.openweathermap.org/data/2.5/"
}

Now set query and weather to empty

  const [query, setQuery] = useState('');
  const [weather, setWeather] = useState({});

now lets add search feature after that we will make the search field

  const search = evt => {
    if (evt.key === "Enter") {
      fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
        .then(res => res.json())
        .then(result => {
          setWeather(result);
          setQuery('');
          console.log(result);
        });
    }
  }

So now to add the date and month builder

  const dateBuilder = (d) => {
    let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
    let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    let day = days[d.getDay()];
    let date = d.getDate();
    let month = months[d.getMonth()];
    let year = d.getFullYear();

    return `${day} ${date} ${month} ${year}`
  }

it will retun day date and month
so now lets build the ui

After that lets start the styling put the css code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "montseratt", sans-serif;
}

.app {
  background-image: url("./assets/cold-bg.jpg");
  background-size: cover;
  background-position: bottom;
  transition: 0.4s ease;
}

.app.warm {
  background-image: url("./assets/warm-bg.jpg");
}

main {
  min-height: 100vh;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.75)
  );
  padding: 25px;
}

.search-box {
  width: 100%;
  margin: 0 0 75px;
}

.search-box .search-bar {
  display: block;
  width: 100%;
  padding: 15px;

  appearance: none;
  background: none;
  border: none;
  outline: none;

  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0px 0px 16px 16px;
  margin-top: -25px;

  box-shadow: 0px 5px rgba(0, 0, 0, 0.2);

  color: #313131;
  font-size: 20px;

  transition: 0.4s ease;
}

.search-box .search-bar:focus {
  background-color: rgba(255, 255, 255, 0.75);
}

.location-box .location {
  color: #fff;
  font-size: 32px;
  font-weight: 500;
  text-align: center;
  text-shadow: 3px 3px rgba(50, 50, 70, 0.5);
}

.location-box .date {
  color: #fff;
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  text-align: center;
  text-shadow: 2px 2px rgba(50, 50, 70, 0.5);
}

.weather-box {
  text-align: center;
}

.weather-box .temp {
  position: relative;
  display: inline-block;
  margin: 30px auto;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 16px;

  padding: 15px 25px;

  color: #fff;
  font-size: 102px;
  font-weight: 900;

  text-shadow: 3px 6px rgba(50, 50, 70, 0.5);
  text-align: center;
  box-shadow: 3px 6px rgba(0, 0, 0, 0.2);
}

.weather-box .weather {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  text-shadow: 3px 3px rgba(50, 50, 70, 0.5);
}

.description {
  color: #fff;
  font-size: 18px;
}

Then start the react app

npm start

there you have it

Thank you for reading goodbye

Make a progress bar in terminal using python

professor_2390 — Wed, 27 Jan 2021 13:46:19 +0000

Requirements

Latest version of python
tqdm module in python
```
pip install tqdm
```
Ide/Code Editor (vscode) ## Code
make a python file and open it 2.import tqdm and time
```
import time
from tqdm import tqdm
```
make a loop
```
for i in tqdm([0, 25, 50, 75, 100]):
```
put sleep in the loop
```
time.sleep(0.5)
```

Done

Take care bye

Motivational Quotes App in React

professor_2390 — Mon, 25 Jan 2021 17:53:01 +0000

It is a Motivational Quotes App that fetches quotes using an api
I learnt about fetching data from an api and how to host a site using netlify.I loved the app one of my favourite quote is,
"Fate is in your hands and no one elses" - Byron Pulsifer

The website is hosted on https://motivational-quotes-react.netlify.app/

You can also find the source code of it on github/motivational-quotes-react

So that is it stay happy, stay safe, stay motivated...
Good Bye!

Netflix Clone

professor_2390 — Sun, 24 Jan 2021 13:24:50 +0000

A netflix clone using react firebase and js. I learnt a lot fom this project
It is hosed on firebase you can see it on https://netflix-clone-81604.web.app/

The Source Code is on github

https://github.com/Sadman-Sakib2234/netflix-clone