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

Import required NPM packages @tensorflow/tfjs and @tensorflow-models/toxicity
Add the Wix Chat app to your site
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)
}

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