由 Champlain 学院助理教授，InSpace 首席执行官 Narine Hall 撰写

InSpace 是一个通信和虚拟学习平台，它使人们能够以熟悉的方式在虚拟空间中进行互动、协作和学习。InSpace 由教育工作者为教育工作者构建，将教育放在平台的核心位置。

• InSpace 的设计旨在反映真实课堂的流畅、个性化和互动性。它允许参与者摆脱现有会议解决方案中 “布雷迪一家”框 的束缚，创造一个有趣、自然和引人入胜的环境，以促进互动和协作。

• 每个人都以一个视频圆圈的形式展现，可以在空间中自由移动。当人们彼此靠近时，他们可以听到并进行交谈，当他们走开时，音频会逐渐消失，使他们能够找到新的对话。

• 当参与者缩小视图时，他们可以看到整个空间，这提供了视觉社交提示。人们可以无缝地在课堂讨论、私人对话或小组/团队工作之间切换，类似于实验室或课堂的模式。

• 教师可以在需要时对所有人讲话，在学生和小组之间移动进行更私人的讨论，并将学生分组到音频隔离的房间中进行协作，同时仍属于一个虚拟空间。

作为一个协作平台，聊天是 InSpace 的一项基本功能。从一开始，我们就希望提供一种机制来帮助警告用户不要发送和接收有毒消息。例如，在一个有年轻人的课堂环境中，教师可能希望有一种方法来防止学生键入不合适的评论。或者，一个大型讨论的版主可能希望有一种方法来减少不合适的垃圾邮件。或者，单个用户可能希望自行过滤掉它们。

识别有毒评论的一种简单方法是检查是否存在包含脏话在内的词语列表。除此之外，我们不想仅仅根据消息中包含的词语来识别有毒消息，我们还想考虑上下文。因此，我们决定使用机器学习来实现这一目标。

经过一番研究，我们在 TensorFlow.js 中发现了一个用于 毒性检测 的预训练模型，可以轻松集成到我们的平台中。重要的是，这个模型完全在浏览器中运行，这意味着我们可以警告用户不要发送有毒评论，而无需将他们的消息存储或由服务器处理。

在性能方面，我们发现将毒性处理过程在浏览器的主线程中运行会损害用户体验。我们决定使用 Web Workers API 将消息毒性检测与主应用程序分离，使这两个过程独立且非阻塞，是一种不错的方案。

Web Workers 通过发送和接收消息与主应用程序连接，你可以在其中封装你的数据。每当用户发送消息时，它会自动添加到一个所谓的队列中，并从主应用程序发送到 Web Worker。当 Web Worker 从主应用程序接收到消息时，它会开始对消息进行分类，当输出准备就绪时，它会将结果发送回主应用程序。根据 Web Worker 的结果，主应用程序要么将消息发送给所有参与者，要么警告用户该消息有毒。

以下是主应用程序的伪代码，我们通过提供其路径作为参数来初始化 Web Worker，然后设置每次工作者发送消息时都会调用的回调，以及在用户提交消息时会调用的回调。

// main application
// initializing the web worker
const toxicityFilter = new Worker('toxicity-filter.worker.js'));
// now we need to set the callback which will process the data from the worker
worker.onMessage = ({ data: { message, isToxic } }) => {
 if (isToxic) {
   markAsToxic(message);
 } else {
   sendToAll(message);
 }
}

当用户发送消息时，我们将其传递给 Web Worker

onMessageSubmit = message => {
 worker.postMessage(message);
 addToQueue(message);
}

在工作者初始化后，它开始监听来自主应用程序的数据消息，并使用声明的 onmessage 回调处理它们，然后将消息发送回主应用程序。

// toxicity-filter worker
// here we import dependencies
importScripts(
 // the main library to run Tenser Flow in the browser
 'https://cdn.jsdelivr.net.cn/npm/@tensorflow/tfjs',
 // trained models for toxicity detection
 'https://cdn.jsdelivr.net.cn/npm/@tensorflow-models/toxicity',
);
// threshold point for the decision
const threshold = 0.9;
// the main model promise which would be used to classify the message
const modelPromise = toxicity.load(threshold);
// registered callback to run when the main app sends the data message
onmessage = ({ data: message }) => {
 modelPromise.then(model => {
   model.classify([message.body]).then(predictions => {
     // as we want to check the toxicity for all labels,
     // `predictions` will contain the results for all 7 labels
     // so we check, whether there is a match for any of them
     const isToxic = predictions.some(prediction => prediction.results[0].match);
     // here we send the data message back to the main app with the results
     postMessage({ message, isToxic });
   });
 });
};

如你所见，毒性检测器易于将包与应用程序集成，并且不需要对现有架构进行重大更改。主应用程序只需要一个小的“连接器”，过滤器的逻辑写在单独的文件中。

要了解更多关于 InSpace 的信息，请访问 https://inspace.chat。