22:null 23:["$","title",null,{"children":"TensorFlow.js LAB02: using the toxicity model | Gerard Sans | Observable"}] 28:T7df,## Step 2: Setting up options and loading the model in memory We can specify two options: - **Threshold**: minimum confidence for classifications. ``Default: 0.85``. If predictions are below the threshold ``match`` will be set to ``null``. - **Toxicity labels**: these are the different categories we want to evaluate. ``toxicity`` is an aggregate of all the labels.``Default: ["identity_attack", "insult", "obscene", "severe_toxicity", "sexual_explicit", "threat", "toxicity"]`` Loading the model returns a promise. Once the model is loaded, you can run your predictions using ``classify`` and passing an array as an input. This will return the predictions. For each label it returns the probabilities for each sentence. For the sentence ``You suck`` the predictions: ``toxicity`` is **2%** to be not toxic and **97%** to be toxic. Match is ``true`` or ``false`` depending the values and ``null`` if probabilities fall below the threshold. ```Javascript predictions[label_index].label = "toxicity" predictions[label_index].results[sentence_index].probabilities[0] = 0.02 // Negative score predictions[label_index].results[sentence_index].probabilities[1] = 0.97 // Positive score predictions[label_index].results[sentence_index].match = true // Is this label a match? ``` Usage: ```Javascript const threshold = 0.9; // minimum prediction confidence const toxicityLabels = ["toxicity"]; // labels to return // load the model toxicity.load(threshold, toxicityLabels).then(model => { // evaluate the toxicity model.classify(['You suck']).then(predictions => { console.log(predictions); let toxic = predictions.some(p => p.results.some(sentence => sentence.match)); }); }); // const init = async () => { // let model = await toxicity.load(threshold, toxicityLabels); // let predictions = await model.classify(['you suck', 'You are silly']); // console.log(predictions); // console.log(JSON.stringify(predictions, null, 2)); // } // init(); ```29:[] 26:{"id":"62411cd55c5a0063","slug":"tensorflow-js-lab01-using-the-toxicity-model/2","title":"TensorFlow.js LAB02: using the toxicity model","thumbnail":"8261e8ad4ffe1389f0e5d2e2f062d646c06f0e5b6bf2e03eabecbc6f65575219","access_level":"public","create_time":"$D2022-08-25T17:44:02.281Z","update_time":"$D2022-08-27T14:43:22.108Z","view_time":null,"first_public_time":"$D2022-08-25T17:45:53.851Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"011c95201ed192f7","login":"e83e200c7de9a3ab","name":"Gerard Sans","avatar_url":"https://avatars-next.observableusercontent.com/40c694cf3291ea18caa7142f72fb1896cebaaba1bd76a826e5a3e2762557e93a","tier":"starter_2024","bio":""},"version":563,"publish_version":563,"role":null,"authored":false,"authors":[{"type":"individual","id":"e83e200c7de9a3ab","login":"e83e200c7de9a3ab","name":"Gerard Sans","avatar_url":"https://avatars-next.observableusercontent.com/40c694cf3291ea18caa7142f72fb1896cebaaba1bd76a826e5a3e2762557e93a","tier":null,"bio":""}],"members":[{"type":"individual","id":"e83e200c7de9a3ab","login":"e83e200c7de9a3ab","name":"Gerard Sans","avatar_url":"https://avatars-next.observableusercontent.com/40c694cf3291ea18caa7142f72fb1896cebaaba1bd76a826e5a3e2762557e93a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"TensorFlow.js LAB02: using the toxicity model","cells":[{"id":255,"value":"# TensorFlow.js LAB02: using the toxicity model\n\nIn this exercise you should create a demo from scratch using any of the following:\n- Online environment ([Codesandbox](https://codesandbox.io/s/admiring-allen-0ypkym?file=/src/index.ts))\n- Local environment\n\nGoal:\n- Showcase the **toxicity model** (load, classify and displaying results) using a different ``threshold`` and ``toxicity labels``; single and multiple sentences; single label (Eg: toxicity) and multiple labels ( Eg: thread, insult and toxicity).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"## Step 1: Adding the model to the browser\n\nYou can include the **toxicity model** in few different ways depending on your environment. See in [TensorFlow Hub](https://tfhub.dev/tensorflow/tfjs-model/toxicity/1/default/1).\n\n```HTML\n\n \n \n \n \n \n \n\n```\n\nOr via **npm**\n\n```JavaScript\nnpm install @tensorflow/tfjs-core @tensorflow/tfjs-converter @tensorflow/tfjs-backend-cpu @tensorflow-models/toxicity\n\nimport * as toxicity from \"@tensorflow-models/toxicity\";\nimport '@tensorflow/tfjs-backend-cpu';\ntf.setBackend('cpu');\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":306,"value":"$28","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":318,"value":"## Step 3: Running predictions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":282,"value":"viewof checkboxes = Inputs.checkbox(toxicity_labels, {label: \"Select labels\", value: toxicity_labels })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"viewof threshold = Inputs.range([0, 1], {label: \"Threshold\", value: 0.85, step: 0.05 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"viewof text_input = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"toxic? html`

Toxicity warning. Review your message

`:html``;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"Plot.plot({\n color: {\n scheme: \"blues\",\n legend: true,\n },\n x: {\n label: \"12\",\n axis: null,\n },\n y: {\n domain: [0, 1]\n },\n //grid: true,\n inset: 10,\n width: window.innerWidth,\n height: 240,\n facet: {\n data: data,\n x: \"series\",\n },\n marks: [\n Plot.frame(),\n Plot.barY(data, {\n x: \"axis\", \n y: \"value\", \n fill: \"axis\",\n }),\n Plot.text(data, {\n x: \"axis\", \n y: \"value\", \n text: d => `${d.value}-${d.match}`, \n dy: -5\n }),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"## More resources\n\n- Medium: [Text classification using TensorFlow.js: An example of detecting offensive language in browser](https://medium.com/tensorflow/text-classification-using-tensorflow-js-an-example-of-detecting-offensive-language-in-browser-e2b94e3565ce)\n- GitHub: [TensorFlow toxicity model demo](https://github.com/tensorflow/tfjs-models/tree/master/toxicity) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":330,"value":"---\n## Notebook setup and dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"toxicity = require('@tensorflow-models/toxicity');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"toxicity_labels = [\"identity_attack\", \"insult\", \"obscene\", \"severe_toxicity\", \"sexual_explicit\", \"threat\", \"toxicity\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"// Load the model.\nmodel = toxicity.load(threshold, checkboxes);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"predictions = model.classify(lines);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"JSON.stringify(predictions[predictions.findIndex(p => p.label==='toxicity')]||predictions[0], null, 2);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"toxic = predictions.some(p => p.results.some(sentence => sentence.match));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"model.tokenizer","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"lines = text_input.replace(/\\.\\s+([A-Z])/g, \".\\n$1\").split(\"\\n\").filter(x => x.length > 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"data = [...lines.map((c,i) => \n (predictions.map(l => ({ \n series: i,\n axis: l.label, \n value: l.results[i].probabilities[1].toFixed(2),\n match: l.results[i].match,\n })\n ))\n )].flat();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W29","stdlib":"1"}} 27:"$26:body"