// Function to render the AI Moderation Interface
function renderModerationInterface() {
// Define the HTML content as a template literal
const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Moderation Interface</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"/>
<style>
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
color: #fff;
background-color: #1e1e1e;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
box-sizing: border-box;
}
.container {
background-color: #282828;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(4, 170, 109, 0.2);
padding: 20px;
width: 90%;
max-width: 800px;
}
h1, h2 {
color: #04AA6D;
}
.input-field {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 2px solid #04AA6D;
border-radius: 5px;
font-size: 16px;
color: #333;
background-color: #f0f0f0;
}
.input-field:focus {
border-color: #026D4D;
outline: none;
}
.generate-button {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #04AA6D;
color: white;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.generate-button:hover {
background-color: #026D4D;
}
.result-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background-color: #3e3e3e;
color: #D6EEE2;
border-radius: 5px;
overflow: hidden;
}
.result-table th, .result-table td {
border: 1px solid #555;
padding: 10px;
text-align: left;
}
.result-table th {
background-color: #04AA6D;
}
.errorText {
color: #e74c3c;
font-weight: bold;
margin-top: 20px;
}
footer {
margin-top: 20px;
padding: 10px;
text-align: center;
background-color: #282828;
color: #aaa;
}
</style>
</head>
<body>
<div class="container">
<h1>AI Moderation Interface</h1>
<h2>Moderate by Direct Upload</h2>
<input type="file" id="imageUpload" accept="image/*" class="input-field" />
<button onclick="moderateByUpload()" class="generate-button">Moderate Uploaded Image</button>
<div id="uploadResult"></div>
</div>
<footer>
Moderation results are based on AI analysis. Ensure images are appropriate before uploading.
</footer>
<script>
const API_USER = '1593938920';
const API_SECRET = 'vhiNTLhx9rx8CsW9n9UEoVD2GZiikZm2';
const MODELS = 'nudity-2.1,weapon,alcohol,offensive,violence,self-harm,gambling';
const SIGHTENGINE_ENDPOINT = 'https://api.sightengine.com/1.0/check.json';
async function moderateByUpload() {
const fileInput = document.getElementById('imageUpload');
const file = fileInput.files[0];
if (!file) {
displayError('uploadResult', 'ERROR: Please select an image to upload.');
return;
}
const formData = new FormData();
formData.append('media', file);
formData.append('models', MODELS);
formData.append('api_user', API_USER);
formData.append('api_secret', API_SECRET);
try {
const response = await fetch(SIGHTENGINE_ENDPOINT, {
method: 'POST',
body: formData,
});
if (!response.ok) {
throw new Error(\`API error: \${response.statusText}\`);
}
const data = await response.json();
displayResult('uploadResult', formatModerationResults(data));
} catch (error) {
displayError('uploadResult', \`ERROR: \${error.message}\`);
}
}
function formatModerationResults(data) {
const importantData = {
"File Name": data.media.uri,
"Nudity Detected": data.nudity.none < 0.9 ? "Yes" : "No",
"Violence Probability": data.violence.prob,
"Weapon Detected": Object.values(data.weapon.classes).some(v => v > 0.1) ? "Yes" : "No",
"Alcohol Probability": data.alcohol.prob,
"Offensive Content": data.offensive.prob,
"Self-Harm Probability": data["self-harm"].prob,
"Gambling Probability": data.gambling.prob
};
let tableHTML = '<table class="result-table"><thead><tr>';
Object.keys(importantData).forEach(key => {
tableHTML += \`<th>\${key}</th>\`;
});
tableHTML += '</tr></thead><tbody><tr>';
Object.values(importantData).forEach(value => {
tableHTML += \`<td>\${value}</td>\`;
});
tableHTML += '</tr></tbody></table>';
return tableHTML;
}
function displayResult(containerId, tableHTML) {
const container = document.getElementById(containerId);
container.innerHTML = tableHTML;
}
function displayError(containerId, message) {
const container = document.getElementById(containerId);
container.innerHTML = \`<p class="errorText">\${message}</p>\`;
}
</script>
</body>
</html>
`;
// Replace the current document with the new HTML content
document.open();
document.write(htmlContent);
document.close();
}
// Invoke the function to render the interface
renderModerationInterface();