Smart-Advertising

Table of Contents

• Problem Statement
• Idea
• Description of Project
• Overview of the Project
• Interfaces and its explanation
• Environment Setup
• Permission required to run
• Code Structure of files added from general structure
• Common error faced and their solution
• Tools and Languages Used
• Project Development Timeline

Problem Statement

Advertisements are one of the primary way for increasing the market size of the products. Advertisements are introduced in common web-abb too. Smart advertising for showing products to target audiences will increase the efficiency.

Scenario:-
An adult has account in a web-app. This web-app shows ads for both adult and kids. When adult gives this to any kid to use, kid come across with this adult ads too. This doesnot provide any positive impact to the kid in terms of buying product but has non ethical impact. The problem is to find an efficient method to show advertisements to the audiences without having unethical impact to the users.

Idea

The main idea is to promote smart advertising. Advertisement when shown to proper and target audience makes proper sense. Keeping this key concept and the problem statement, the project uses facial recognition and age detection to distinguish users as per their detected age and show advertisement according to that.
So, 18+ advertisements will not be shown to below 18 years age users.

Description of Project

This project web-app UI ans tasks are inspired from Youtube web. So, the interface is similar to the Youtube web with functionalities to

• watch videos
• see related videos
• comment to a video
• see subscribed channels
• disable to allow adult ads
• authentication with face + google
• segregate advertisements with age of user

The above four tasks can be performed with the use of youtube api. This api has 10,000 quota. Each tasks have certain number of quotas to work with. Once, this quota is over. This tasks cannot be performed(As task was to concern more over facial recognition since it is the topic). Go to Common error faced and their solution for solving this error. In this platform, user gets authenticated with their face first then google authentication takes place. Once, user gets into the platform and perform tasks, camera identifies the face of the user and detects its age. As per the age, advertisements are shown.

Overview of the Project

Interfaces and its explanation

• The landing page when you run the project

  

  a. click "Open"

  

  Click once on "Click me" and wait for result. To check,the request you can see base64 code passed in terminal. If it is present, it means request is passsed.

  
  Note: Use google account which you have account in Youtube

  b. click "Create Account" and opens to Sign In page

  

  After creating account

  

• After successful login, enters to Home Page

  

• Click on any video and direct to watch screen

  

• search query to get results

  

• Subscription channel

  

Environment Setup

• Clone the repository:

  git clone"https://github.com/dewanshiPaul/Smart-Advertising.git"
  

• Go inside folder name "backend"
  1. Open terminal or command prompt in this folder
  2. Create a virtual environment Write the following command in the terminal/command prompt.

     python -m venv venv
     

  3. Enter inside the virtual environment Write the following command in the terminal/command prompt.
     for windows

     "venv\Scripts\activate" 
     

     for mac-os

     source venv/bin/activate 
     

  4. Install modules Write the following command in the terminal/command prompt.

     pip install -r requirements.txt
     

  5. Run the backend Write the following command in the terminal/command prompt.

     flask run
     

• Go inside folder name "frontend"
  1. Open terminal or command prompt in this folder.
  2. Install node packages. Write the following command in the terminal/command prompt.

     npm install
     

  3. Start the frontend Write the following command in the terminal/command prompt.

     npm start
     

Permission required to run

• Allow camera access

Code Structure of files added from general structure

• Backend

  |-------known_faces (stores all user's images whoever has created account. Images name are set as the username set by user during creating account)
  |-------new_face (stores an image for facial recognition during login)
  |-------modelNweight (stores age and face detection models for detecting age of the user when he/she is working in the web app)
  |            |----------age_deploy.prototxt 
  |            |----------age_net.caffemodel
  |            |----------opencv_face_detector_unit8.pb
  |            |----------opencv_face_detector.pbtxt
  |-------agedetection.py (code for detecting age of the user)
  |-------app.py (code for flask to route through different pages)
  |-------facerecognition_v1.py (code for implementing face recognition while login. Model used here is different as per used in age detection as here accuracy matters more and fast too whereas there orientation of face also matters.)
  

• Frontend

  |-------src (folder)
  |        |-----------adsimages
  |        |               |--------adult (stores all ads images for adults)
  |        |               |--------kids  (stores all ads images for kids)
  |        |-----------components
  |        |               |--------adsheader (for implementing header for ads to display)
  |        |               |--------comment (for implementing each comments UI)
  |        |               |--------comments (for implementing comments UI)
  |        |               |--------content (for implementing each video box UI)
  |        |               |--------header (for implementing each top header UI)
  |        |               |--------comment (for implementing each screens for each tasks UI)
  |        |               |--------sidebar (for implementing side navigation UI)
  |        |               |--------skeletonframe (for implementing skeleton frames while loading UI)
  |        |               |--------videometadata (for implementing video description and details section UI)
  |        |               |--------videonext (for implementing related video section UI)
  |        |-----------redux
  |        |             |----------action (for implementing all the action states of redux)
  |        |             |----------reducer (for implementing all the reducer states of redux)
  |        |             |----------actiontype (for implementing all variable to action types of redux)
  |        |             |----------store (for implementing all the store of redux)
  |        |-----------apiFromYoutube (for storing api from youtube)
  |        |-----------firebase (for configurating our app with firebase)
  |--------.env.api (environment variable)
  
  

Common error faced and their solution

• Error 403: This error is caused when certain quota of youtube api is exhausted for the current day. For this to resolve, you can either use this application after 24 hourse or create new account in firebase.
  
  1. Go to the website https://firebase.google.com/
  2. Login with an account
  3. Click on "Go to Console"
  4. Click on "Add project"

     

  5. Fill it

     

  6. Continue to next step and disable "Enable Google Analytics for this project"

     

  7. Click "Create Project"
  8. Once project is created click "Continue"
  9. Page redirects where you have to click </> button

     

  10. Register your app with proper or unique name

      

  11. Once above step is completed, you will be provided with firebase configurations. Copy the highlighted portion.

      

  12. Open your code editor, go to frontend>firebase.jsx. Inside firebaseConfig function, comment the previous details and paste them inside it. Save the file.
  13. Come to firebase, Click "Continue to console" present inside the Firebase SDK or the page in step 10.
  14. Under Project Overview, click "Authentication".

      

  15. Click on "Get Started"

      

  16. Click on "Google"

      

  17. Click on "Enable"

      

  18. Provide your logged in account in the firebase in the field

      

  19. Click "Save".
  20. Go to https://console.cloud.google.com/
  21. Sign in with the account with which you created account in firebase for project.
  22. Click here to search your project over this tab.

      

  23. A modal comes where click "All" to get list of all the projects you created in firebase.

      

  24. Click "Open"
  25. Open Navigation menu by clicking "three horizontal bar icon". Click on highlighted one.

      

  26. A dashboard opens. Click on highlighed one.

      

  27. A new page with search box opens. Type "Youtube" and enter. You will see apis related to youtube. Click the marked one.

      

  28. Initially you will see "Enable" button.

      

      Click on it to enable it.
  29. Click on highlighted menu

      

  30. Click on "Show Key" under API Keys.

      

  31. Copy the API KEY is shown.
  32. Move to your editor. In .env.api replace the content in the string with the content you just copied.
• Error 401: This error is caused when your google authorized account is not authenticated properly for youtube api to get access to requests. This will not allow you to see subscribed channels, comment. To solve this, just Log out from the web app and login again.
• Index out of range showing in terminal of backend while login using face detection: This means face is not detected from the image you uploaded to create account. Either create a new account with clear image(try with jpeg/jpg/png). Else, go to backend->known_faces and delete your image and add a new image file with same name.
• Error of opencv in terminal of backend: This is mostly when your face is not properly located in the webcam section. Try to place your face properly.
• Webcam not showing: This is because your browser may not be updated. Update your browser.

Note: sometimes data are not retrieved properly from youtube api, it delays so refresh/reload page

Tools and Languages Used

               

Project Development Timeline

1st week: Brainstorming and noting down all the ideas came into mind.

2nd week: Decided with topic to work on and tech stacks to work on.

3rd week: Started developement

4th week: Completed project and testing. Preparing documents and github repository for submission