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!

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?✔️

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)
}

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);
        });
}

The Result

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

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