Muiruriscode / Spam-detection-on-the-browser

Spam Detection using Tensorflow.js

This project involes using tensorflowjs model to detect spam from user input. The project use socket io to broadcast user comments to other connected users using the web page. If a comment is detected as a spam it is captured and user is given a warning. A spam comment is not broadcast to other users.

Handle user comments

Handle the input that the user fills anfter clicking the comment button

function handleCommentPost() {
  if (! POST_COMMENT_BTN.classList.contains(PROCESSING_CLASS)) {
    POST_COMMENT_BTN.classList.add(PROCESSING_CLASS);
    COMMENT_TEXT.classList.add(PROCESSING_CLASS);
    let currentComment = COMMENT_TEXT.innerText;
    console.log(currentComment);
    
    // convert suer input to lower case and remove special characters
    let lowercaseSentenceArray = currentComment.toLowerCase().replace(/[^\w\s]/g, ' ').split(' ');
    
    let li = document.createElement('li');
    let p = document.createElement('p');
    p.innerText = COMMENT_TEXT.innerText;

    let spanName = document.createElement('span');
    spanName.setAttribute('class', 'username');
    spanName.innerText = currentUserName;

    let spanDate = document.createElement('span');
    spanDate.setAttribute('class', 'timestamp');

    let curDate = new Date();
    spanDate.innerText = curDate.toLocaleString();

    li.appendChild(spanName);
    li.appendChild(spanDate);
    li.appendChild(p);
    COMMENTS_LIST.prepend(li);

    COMMENT_TEXT.innerText = '';

    // call loadAndPredict to predict whether the comment is a spam or not
    loadAndPredict(tokenize(lowercaseSentenceArray), li).then(function() {
      POST_COMMENT_BTN.classList.remove(PROCESSING_CLASS);
      COMMENT_TEXT.classList.remove(PROCESSING_CLASS);
      

    });
  }
}

POST_COMMENT_BTN.addEventListener('click', handleCommentPost)

Tokenize the User Comment

Create tokens from the user comments using a dictionary to encode the words for the prediction model to use

// import dictionary to encode the words
import * as DICTIONARY from 'https://storage.googleapis.com/jmstore/TensorFlowJS/EdX/SavedModels/spam/dictionary.js';

// Length of the number of words in each token
const ENCODING_LENGTH = 20;


function tokenize(wordArray) {
// initialize the return array with the value showing the start of a sentence.
  let returnArray = [DICTIONARY.START];
  for (var i = 0; i < wordArray.length; i++) {
//for every word in the comment encode it to the value in the dictionary then push it to return array
    let encoding = DICTIONARY.LOOKUP[wordArray[i]];
    returnArray.push(encoding === undefined ? DICTIONARY.UNKNOWN : encoding);
  }
// if the words sre less than the total number required for one token use the value in PAD to fill the remaining values
  while (returnArray.length < ENCODING_LENGTH) {
    returnArray.push(DICTIONARY.PAD);
  }
  
  console.log([returnArray]);
  
  return tf.tensor2d([returnArray]);
}

Broadcast Comments

//use socket.io client
var socket = io.connect();


function handleRemoteComments(data) {
  let li = document.createElement('li');
  let p = document.createElement('p');
  p.innerText = data.comment;

  let spanName = document.createElement('span');
  spanName.setAttribute('class', 'username');
  spanName.innerText = data.username;

  let spanDate = document.createElement('span');
  spanDate.setAttribute('class', 'timestamp');
  spanDate.innerText = data.timestamp;

  li.appendChild(spanName);
  li.appendChild(spanDate);
  li.appendChild(p);
  
  COMMENTS_LIST.prepend(li);
}

// when you receive a message tagged remoteComment call handleRemoteComment function
socket.on('remoteComment', handleRemoteComments);

Socket.io

io.on('connect', socket => {
//When there is a new connection, exetute this code
  console.log('Client connected');

  socket.on('comment', (data) => {
    //Broadcast data to thje client with the tag remoteComment to all connected users
    socket.broadcast.emit('remoteComment', data);
  });
});