DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Amanda
Amanda

Posted on

Chat moderation in Wix with TensorflowJS and Velo

Hey everyone! Amanda here with a fun code snippet I wanted to share. For anyone that doesn't know me yet, I'm a developer advocate for Wix and you can read more about that in this post

Introduction

One of the coolest demos I saw at the Modern Frontends Live conference was from TensorflowJS. I’m a sucker for anything interactive and fascinated by AI/ML.

Jason Mayes took some time with me and Emmy showing us all the cool ootb models they have and promised me this was easy even if you aren’t a scientist!

Tensorflow booth at conference with Jason demoing to Emmy

So…easy, sure. But would it work with Velo on a Wix site? I had to know.

First step? Does Velo support the required NPM packages @tensorflow/tfjs and @tensorflow-models/toxicity?βœ”οΈ

Screenshot of where NPM packages are in Wix editor

Sweet! Now on to the implementation.

I decided to start with the toxicity model OOTB demo code for simplicity. You can find this code in their Github repo.

Implementation

  1. Import required NPM packages @tensorflow/tfjs and @tensorflow-models/toxicity
  2. Add the Wix Chat app to your site
  3. Add a backend code file named events.js and populate with the code below. This code will capture a new message event when a site visitor sends a message.
import {predict} from "backend/toxicity"

export function wixChat_onMessage(event) {
  predict(event.payload.text,event.channelId)
}
Enter fullscreen mode Exit fullscreen mode
  1. Add another backend file called toxicity.js with the code below. This will run the input through the toxicity model.

That model produces a large output but for the sake of a simple example I targeted if toxicity was equal to true.

When it returns true, we tell the user automatically to clean up their language and be cool.

import * as toxicity from '@tensorflow-models/toxicity';
import wixChatBackend from 'wix-chat-backend';

let model;

export async function predict(input, channelId) {
    const predictions = await classify(input, channelId);
    return predictions

}

const classify = async (inputs, channelId) => {
    model = await toxicity.load()
    const results = await model.classify(inputs);
    const toxicityResult = results[6].results[0].match
    if (toxicityResult === true) {
        sendWarning(channelId)
    }

};

function sendWarning(channelId) {
    wixChatBackend.sendMessage({
            "messageText": "We don't do that here. Be nice and try again.",
            "channelId": channelId,

        })
        .then(() => {
            console.log("Chat message sent");
        })
        .catch((error) => {
            console.error(error);
        });
}
Enter fullscreen mode Exit fullscreen mode

The Result

Now when someone sends me a nasty message, the chat responds for me!

chat showing automation output

Cool, right? And, surprisingly simple to set up!

What are your ideas to take this further? Have you tried any of the other tensorflow models?

Feel free to comment below or find me on Twitter and LinkedIn

I also placed this code in GitHub

Top comments (2)

Collapse
 
eddiejaoude profile image
Eddie Jaoude

This is great! We have EddieBot using a library called AlexJS that has a list of words, but this method with TensorFlow would have better context.

Thank you so much for sharing Amanda!!

Collapse
 
amandamartindev profile image
Amanda

Oh very cool and you're welcome!

The context would be an interesting improvement for the bot and I do know you can add training to them so you should be able to add more scenarios and reserved words if it doesn't have the same coverage as the current version.

I haven't tried model training yet....another day

Create an Account!

πŸ‘€ Just want to lurk?

That's fine, you can still create an account and turn on features like 🌚 dark mode.