How to Auto-Moderate User-Submitted Content With ChatGPT

Give people a way to submit reviews, opinions, and advice, and content creation practically takes care of itself. User-generated content (or UGC) is genuine and, perhaps best of all, free. That is, as long as you’re sure no one will post something offensive to a screen you’re responsible for.

With the mind-boggling amount of content that ChatGPT accepts and responds to, one of OpenAI’s earliest projects was using AI to recognize and filter out anything even remotely controversial. And while everyone has been obsessing over their chatbot, few people have been talking up OpenAI’s incredible (and free!) content moderation API. Using the same models that ChatGPT does, you can comfortably:

• Display live QAs during conferences or presentations.
• Showcase reviews and testimonials from loyal users.
• Create a digital signage message board that’s updated in real-time.

You don’t need to write any of your own code to get it working, but you do need to know your way around a bit of JavaScript. If you’re good with that, let’s get started.

What this AI moderation will (and won’t) do

Here’s the core idea. Your team has digital signage, a TV that shows stats and current events for your team (or, you’d like to build something like that). And you’d like to work user-generated content into the equation, so reviews from customers and ideas from colleagues help populate your signage.

But you need to make sure that content is safe for work, literally, before it shows up on your workplace signage.

We’re going to create an automation where any time someone fills out a form, the GPT-3 API will evaluate its potential offensiveness and respond with a true/false classification. If that response indicates the content is safe to post, Zapier will push that message to ScreenCloud Playgrounds so it can be displayed on any digital signage channel or playlist you want. 

Before you get started, make sure you have accounts for all of these apps and are logged in:

• A ScreenCloud account—a 14-day free trial will work. 
• A free OpenAI account.
• A free Fillout account, a new form builder with a webhooks integration.
• A Starter-tier Zapier account. 

It’s worth noting that if you’re more familiar with Microsoft’s Power Automate, IFTTT, or Maker, you could likely skip the paid Zapier account by swapping the Fillout form trigger for another automation tool. 

Moderation severity and filtered content

With the apps out of the way, it’s time to start building out your moderation system. It’s worth taking a few minutes to think through what types of content you want to moderate.

Unless you set your own thresholds for specific content categories, users might be able to get content through the filter that you don’t want on your screens. For example, OpenAI’s ‘hate’ category only filters content that “expresses, incites, or promotes hate based on race, gender, ethnicity, religion, nationality, sexual orientation, disability status, or caste. Hateful content aimed at non-protected groups (e.g., chess players) is not covered by this category.” 

You can learn more about each category and its definition in OpenAI’s documentation. And, if you’re particularly adventurous, you can experiment with changing the thresholds after learning how to pass content on to the API.

Then it’s time to start building.

Connecting form submissions to OpenAI’s moderation API

First, create a blank Fillout form with one ‘Short Answer’ field for your ‘Message’ and another for the respondent's ‘Name’. Don’t worry about updating the design or adding other fields until you’ve gotten the automation working. Publish your form and submit a test message.

 Next, log into ScreenCloud, select Apps from the sidebar, and search for Playgrounds (here’s a quick guide to ScreenCloud Playgrounds if you haven’t used it before). Click Go to App, then create a New Instance and pick Start with a blank template. Open the Application Data pane in the upper right corner of the screen and copy the API URL from the textbox near the bottom. 

At this point, you could have your form send all submissions straight to your screens. Just go to the Integration tab in your Fillout form’s setup page, open the Webhooks configuration, and paste ScreenCloud’s API URL into the first textbox. Select PUT from the HTTP method dropdown, type Message in the Body field, and in the field to its right, pick Page from the dropdown list and choose your message field.   

If automatic moderation is your end goal, however, you need to add a step between the form submission and the update on your screen. So open Zapier and create a new Zap with Fillout - New Submission as the trigger and Code by Zapier - Run as JavaScript as the action. 

Connect your Fillout account to Zapier, select the form you just created in the Trigger field, and test the connection. If everything looks good, move on to the Code by Zapier step and open the Action section. In the empty textbox below Input Name, write ‘message,’ then click the dropdown to the right and select your Fillout form’s message field. Then, copy this JavaScript into the Code textbox:

// Extract the message field from the form response 
const message = inputData.message; 

// Call OpenAI's Moderation API to moderate the message 
const moderationAPIKey = 'YOUR_OPENAI_API_KEY'; 
const moderationEndpoint = 'https://api.openai.com/v1/moderations'; 
const moderationHeaders = { 
  'Content-Type': 'application/json', 
  'Authorization': `Bearer ${moderationAPIKey}` 
}; 
const moderationBody = { 
  'input': message 
}; 

// Send a POST request to OpenAI's Moderation API 
const moderationResponse = await fetch(moderationEndpoint, { 
  method: 'POST', 
  headers: moderationHeaders, 
  body: JSON.stringify(moderationBody) 
}); 
const moderationResult = await moderationResponse.json(); 

// Check if the message is safe for display based on the flagged field 
const isSafe = !moderationResult?.results[0]?.flagged; 

// Prepare the result to be sent to the next step 
const result = { 
  isSafe: isSafe, 
  moderation: moderationResult 
}; 

// Return the result 
return result;

You need to update one thing in the code: Replace YOUR_OPENAI_API_KEY with an API key generated in your OpenAI account settings. The code will tell Zapier to pass form submission data to OpenAI’s moderation API and see if it gets flagged as inappropriate. Test the Code by Zapier test to make sure it’s working.

Now you need to tell Zapier what to do with messages that return the code `isSafe`. You could add more JavaScript code to watch each OpenAI response value and only return `isSafe` if everything’s below safe levels. Or, you could do it visually with Zapier Filters.  Then, set your Zap to only continue if the specific category_scores from OpenAI that you’re concerned about are less than say 0.0001 or even 0.00001 to be the safest. 

The filter is now ditching anything marked as unsafe, but still doesn’t know what to do with everything else. We need to get the Zap to send the safe messages to ScreenCloud’s webhook. Click the ‘+’ symbol below the Filter step and add a Webhooks by Zapier step. Pick PUT from the Events list, and in the URL field, paste the link from your Application Data pane in ScreenCloud Playgrounds. Lastly, choose JSON as the Payload Type, enter ‘message’ into the blank Data field, and add your Fillout message value to the textbox on the right.

That’s it for Zapier. You just need to make a few small changes to your ScreenCloud environment to wrap things up.

Passing approved form submissions on to ScreenCloud

You’re sending submissions to your ScreenCloud signage, but you haven’t told it what to do with them yet. So, first, go back to your Playgrounds instance from earlier, and open the Application Data pane. It should show the last form submission message. That means all you need to do is add some basic styling and tell Playgrounds to display application data on your screens. 

Close the Application Data pane, and in your HTML column, replace `<!-- Add your code here–>  with <div id="messageDisplay">. In the CSS column, paste this:

body { 
  background-color: #333; 
  font-family: Arial, sans-serif; 
} 

#root { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
  padding: 20px; 
  box-sizing: border-box; 
} 

#messageDisplay { 
  background-color: #fff; 
  padding: 20px; 
  border-radius: 10px; 
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); 
  max-width: 800px; 
  text-align: center; 
  font-size: 24px; 
  color: #555; 
  margin: 0; 
  line-height: 1.5; 
} 

#messageDisplay .speaker { 
  font-size: 20px; 
  color: #888; 
  margin-top: 20px; 
} 

#messageDisplay .timestamp { 
  font-size: 16px; 
  color: #999; 
  margin-top: 10px; 
}

Finally, add this bit if JavaScript to the column on the left to retrieve application data:

getData().then(data => { 
  // Get a reference to the div element 
  const messageDisplay = document.getElementById('messageDisplay'); 
 
  // Update the div element with the message 
  messageDisplay.innerText = data; 
});

Click Preview and see your moderation in action! Make sure you save and close the instance and submit some test content to see what does and doesn’t get filtered out by the moderation API. 

All that’s left is to spruce up the HTML and CSS with your brand colors, images, and design elements. You could code it yourself, but GPT has gotten us this far already, why not ask it to help add some style. Copy the CSS into a new chat and ask things like “Can you help me add this [image URL] as a background image?” Or “Can you change the font color to [HTML color code]?” So far, it’s been able to code almost every update we’ve requested!

Keep exploring ScreenCloud Playgrounds

You can use your AI moderator any time you want to display a live feed of your audience’s messages. Or, you could tweak the trigger so users can submit messages with an email, Slack chat, or Twitter message. Whatever you think will drive the most engagement within a group. 

ScreenCloud Playgrounds is one of the app’s most useful and versatile tools for anyone with a bit of technical knowledge. If you’re looking for more digital signage inspiration, check out our tutorial on building your own auto-updating dashboard or working with GraphQL to customize your screens. Sign up for a free trial today and start building anything you can dream up!