|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Context-Aware Profanity Handler - Interactive Demo</title> |
|
|
<style> |
|
|
* { box-sizing: border-box; } |
|
|
body { |
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
|
|
margin: 0; |
|
|
padding: 20px; |
|
|
background: #f5f5f7; |
|
|
} |
|
|
.header { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto 30px; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
padding: 40px; |
|
|
border-radius: 12px; |
|
|
color: white; |
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1); |
|
|
} |
|
|
.header h1 { margin: 0 0 10px; font-size: 36px; } |
|
|
.header p { margin: 0; opacity: 0.95; font-size: 18px; } |
|
|
.container { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 20px; |
|
|
} |
|
|
.panel { |
|
|
background: white; |
|
|
padding: 30px; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08); |
|
|
} |
|
|
.panel.full { grid-column: 1 / -1; } |
|
|
h2 { |
|
|
margin-top: 0; |
|
|
color: #1d1d1f; |
|
|
font-size: 24px; |
|
|
border-bottom: 2px solid #667eea; |
|
|
padding-bottom: 10px; |
|
|
} |
|
|
.input-group { |
|
|
margin: 20px 0; |
|
|
} |
|
|
label { |
|
|
display: block; |
|
|
margin-bottom: 8px; |
|
|
font-weight: 600; |
|
|
color: #1d1d1f; |
|
|
} |
|
|
textarea, select { |
|
|
width: 100%; |
|
|
padding: 12px; |
|
|
border: 2px solid #d2d2d7; |
|
|
border-radius: 8px; |
|
|
font-size: 15px; |
|
|
font-family: inherit; |
|
|
transition: border-color 0.2s; |
|
|
} |
|
|
textarea:focus, select:focus { |
|
|
outline: none; |
|
|
border-color: #667eea; |
|
|
} |
|
|
textarea { min-height: 120px; resize: vertical; } |
|
|
.checkbox-group { |
|
|
display: flex; |
|
|
gap: 20px; |
|
|
margin: 20px 0; |
|
|
} |
|
|
.checkbox-group label { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
font-weight: 500; |
|
|
} |
|
|
input[type="checkbox"] { |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
cursor: pointer; |
|
|
} |
|
|
button { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
padding: 14px 32px; |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
font-size: 16px; |
|
|
font-weight: 600; |
|
|
transition: transform 0.2s, box-shadow 0.2s; |
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); |
|
|
} |
|
|
button:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5); |
|
|
} |
|
|
button:active { |
|
|
transform: translateY(0); |
|
|
} |
|
|
.badge { |
|
|
display: inline-block; |
|
|
padding: 6px 12px; |
|
|
border-radius: 6px; |
|
|
font-size: 13px; |
|
|
font-weight: 600; |
|
|
margin: 4px; |
|
|
} |
|
|
.badge.safe { background: #d1f4e0; color: #0f5132; } |
|
|
.badge.mild { background: #fff3cd; color: #997404; } |
|
|
.badge.explicit { background: #f8d7da; color: #842029; } |
|
|
.badge.slur { background: #f5c2c7; color: #58151c; } |
|
|
.badge.threat { background: #ea868f; color: #58151c; } |
|
|
.comparison { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 20px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
.comparison-item { |
|
|
padding: 15px; |
|
|
background: #f5f5f7; |
|
|
border-radius: 8px; |
|
|
border-left: 4px solid #667eea; |
|
|
} |
|
|
.comparison-item h4 { |
|
|
margin-top: 0; |
|
|
color: #667eea; |
|
|
font-size: 14px; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.5px; |
|
|
} |
|
|
.comparison-item pre { |
|
|
margin: 0; |
|
|
white-space: pre-wrap; |
|
|
word-wrap: break-word; |
|
|
font-size: 14px; |
|
|
line-height: 1.6; |
|
|
} |
|
|
.metrics { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 15px; |
|
|
margin: 20px 0; |
|
|
} |
|
|
.metric { |
|
|
background: #f5f5f7; |
|
|
padding: 20px; |
|
|
border-radius: 8px; |
|
|
text-align: center; |
|
|
} |
|
|
.metric-value { |
|
|
font-size: 32px; |
|
|
font-weight: 700; |
|
|
color: #667eea; |
|
|
margin: 10px 0; |
|
|
} |
|
|
.metric-label { |
|
|
font-size: 13px; |
|
|
color: #86868b; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.5px; |
|
|
} |
|
|
.log-viewer { |
|
|
background: #1d1d1f; |
|
|
color: #f5f5f7; |
|
|
padding: 20px; |
|
|
border-radius: 8px; |
|
|
font-family: 'Courier New', monospace; |
|
|
font-size: 13px; |
|
|
max-height: 400px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
.log-entry { |
|
|
margin: 10px 0; |
|
|
padding: 10px; |
|
|
background: rgba(255,255,255,0.05); |
|
|
border-radius: 4px; |
|
|
} |
|
|
.log-redacted { |
|
|
color: #ff9f0a; |
|
|
} |
|
|
.log-verbatim { |
|
|
color: #30d158; |
|
|
} |
|
|
.example-box { |
|
|
background: linear-gradient(135deg, #e0e7ff 0%, #f0e7ff 100%); |
|
|
padding: 20px; |
|
|
border-radius: 8px; |
|
|
margin: 20px 0; |
|
|
border-left: 4px solid #667eea; |
|
|
} |
|
|
.example-box h3 { |
|
|
margin-top: 0; |
|
|
color: #1d1d1f; |
|
|
} |
|
|
.tab-container { |
|
|
margin-top: 20px; |
|
|
} |
|
|
.tabs { |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
border-bottom: 2px solid #d2d2d7; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
.tab { |
|
|
padding: 10px 20px; |
|
|
cursor: pointer; |
|
|
border: none; |
|
|
background: none; |
|
|
font-size: 15px; |
|
|
font-weight: 600; |
|
|
color: #86868b; |
|
|
border-bottom: 3px solid transparent; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
.tab.active { |
|
|
color: #667eea; |
|
|
border-bottom-color: #667eea; |
|
|
} |
|
|
.tab-content { |
|
|
display: none; |
|
|
} |
|
|
.tab-content.active { |
|
|
display: block; |
|
|
} |
|
|
.hidden { display: none !important; } |
|
|
.ai-scores { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); |
|
|
gap: 10px; |
|
|
margin: 15px 0; |
|
|
} |
|
|
.ai-score { |
|
|
background: #f5f5f7; |
|
|
padding: 12px; |
|
|
border-radius: 6px; |
|
|
text-align: center; |
|
|
} |
|
|
.ai-score-label { |
|
|
font-size: 11px; |
|
|
color: #86868b; |
|
|
text-transform: uppercase; |
|
|
} |
|
|
.ai-score-value { |
|
|
font-size: 20px; |
|
|
font-weight: 700; |
|
|
color: #1d1d1f; |
|
|
margin-top: 5px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="header"> |
|
|
<h1>🧩 Context-Aware Profanity Handler</h1> |
|
|
<p>Interactive demonstration of context-aware profanity detection, delexicalization, and audit logging</p> |
|
|
</div> |
|
|
|
|
|
<div class="container"> |
|
|
|
|
|
<div class="panel"> |
|
|
<h2>📝 Input</h2> |
|
|
|
|
|
<div class="example-box"> |
|
|
<h3>💡 Example Use Case</h3> |
|
|
<p><strong>Scenario:</strong> A user wants to generate a report about an asset with an explicit song title.</p> |
|
|
<p><strong>Input:</strong> "Report on asset: <em>Do You Want to Fuck Me Tonight</em>"</p> |
|
|
<p><strong>Context:</strong> Song Title (Entity Name)</p> |
|
|
</div> |
|
|
|
|
|
<div class="input-group"> |
|
|
<label for="text">Text to Analyze:</label> |
|
|
<textarea id="text" placeholder="Enter text here...">Report on asset: Do You Want to Fuck Me Tonight</textarea> |
|
|
</div> |
|
|
|
|
|
<div class="input-group"> |
|
|
<label for="context">Content Category:</label> |
|
|
<select id="context"> |
|
|
<option value="song_title">Song Title</option> |
|
|
<option value="entity_name">Entity Name</option> |
|
|
<option value="brand_name">Brand Name</option> |
|
|
<option value="user_input">User Input</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="checkbox-group"> |
|
|
<label> |
|
|
<input type="checkbox" id="strict_mode"> Strict Mode |
|
|
</label> |
|
|
<label> |
|
|
<input type="checkbox" id="use_ai" checked> Use AI Classifier |
|
|
</label> |
|
|
<label> |
|
|
<input type="checkbox" id="include_explicit"> Include in Export |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<button onclick="analyzeText()">🔍 Analyze Text</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="panel"> |
|
|
<h2>📊 Analysis Results</h2> |
|
|
<div id="results" style="color: #86868b; text-align: center; padding: 40px;"> |
|
|
Run an analysis to see results here |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="panel full hidden" id="comparisonPanel"> |
|
|
<h2>🔄 Text Comparison</h2> |
|
|
<div class="comparison"> |
|
|
<div class="comparison-item"> |
|
|
<h4>📄 Original Text (Verbatim)</h4> |
|
|
<pre id="originalText"></pre> |
|
|
</div> |
|
|
<div class="comparison-item"> |
|
|
<h4>✨ Delexicalized Text (Safe for AI)</h4> |
|
|
<pre id="safeText"></pre> |
|
|
</div> |
|
|
<div class="comparison-item"> |
|
|
<h4>📤 Export Text (Based on Preference)</h4> |
|
|
<pre id="exportText"></pre> |
|
|
</div> |
|
|
<div class="comparison-item"> |
|
|
<h4>🔍 Detected Words</h4> |
|
|
<pre id="detectedWords"></pre> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="panel full hidden" id="logsPanel"> |
|
|
<h2>📋 Audit Logs Visualization</h2> |
|
|
|
|
|
<div class="tab-container"> |
|
|
<div class="tabs"> |
|
|
<button class="tab active" onclick="switchTab('redacted')">📊 Redacted Logs (Analytics)</button> |
|
|
<button class="tab" onclick="switchTab('verbatim')">🔐 Verbatim Logs (Compliance)</button> |
|
|
</div> |
|
|
|
|
|
<div class="tab-content active" id="redacted-tab"> |
|
|
<p style="color: #86868b; margin-bottom: 15px;"> |
|
|
<strong>Purpose:</strong> Safe for analytics and monitoring. Contains metadata without sensitive content. |
|
|
</p> |
|
|
<div class="log-viewer" id="redactedLogs"> |
|
|
<div class="log-redacted">Waiting for analysis...</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="tab-content" id="verbatim-tab"> |
|
|
<p style="color: #86868b; margin-bottom: 15px;"> |
|
|
<strong>Purpose:</strong> Full audit trail for compliance. Access should be restricted (RBAC). |
|
|
</p> |
|
|
<div class="log-viewer" id="verbatimLogs"> |
|
|
<div class="log-verbatim">Waiting for analysis...</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
let currentRequestId = null; |
|
|
|
|
|
function switchTab(tabName) { |
|
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); |
|
|
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); |
|
|
|
|
|
event.target.classList.add('active'); |
|
|
document.getElementById(tabName + '-tab').classList.add('active'); |
|
|
} |
|
|
|
|
|
async function analyzeText() { |
|
|
const text = document.getElementById('text').value; |
|
|
const context = document.getElementById('context').value; |
|
|
const strict_mode = document.getElementById('strict_mode').checked; |
|
|
const use_ai = document.getElementById('use_ai').checked; |
|
|
const include_explicit_in_export = document.getElementById('include_explicit').checked; |
|
|
|
|
|
const resultsDiv = document.getElementById('results'); |
|
|
resultsDiv.innerHTML = '<div style="text-align: center; padding: 20px;">⏳ Analyzing...</div>'; |
|
|
|
|
|
try { |
|
|
const response = await fetch('/analyze', { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify({ text, context, strict_mode, use_ai, include_explicit_in_export }) |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
currentRequestId = data.request_id; |
|
|
|
|
|
|
|
|
displayResults(data, text); |
|
|
|
|
|
|
|
|
displayComparison(text, data); |
|
|
|
|
|
|
|
|
await displayLogs(data.request_id); |
|
|
|
|
|
} catch (error) { |
|
|
resultsDiv.innerHTML = `<div style="color: #d1180b;">Error: ${error.message}</div>`; |
|
|
} |
|
|
} |
|
|
|
|
|
function displayResults(data, originalText) { |
|
|
const resultsDiv = document.getElementById('results'); |
|
|
|
|
|
let html = '<div class="metrics">'; |
|
|
html += `<div class="metric"> |
|
|
<div class="metric-label">Profanity</div> |
|
|
<div class="metric-value">${data.contains_profanity ? '⚠️' : '✅'}</div> |
|
|
</div>`; |
|
|
html += `<div class="metric"> |
|
|
<div class="metric-label">Toxicity</div> |
|
|
<div class="metric-value"><span class="badge ${data.toxicity_level}">${data.toxicity_level.toUpperCase()}</span></div> |
|
|
</div>`; |
|
|
html += '</div>'; |
|
|
|
|
|
html += `<div style="margin: 20px 0;"> |
|
|
<strong>Message:</strong> |
|
|
<div style="padding: 15px; background: #f5f5f7; border-radius: 8px; margin-top: 10px;"> |
|
|
${data.message} |
|
|
</div> |
|
|
</div>`; |
|
|
|
|
|
if (data.ai_confidence) { |
|
|
html += '<div style="margin: 20px 0;"><strong>AI Confidence Scores:</strong><div class="ai-scores">'; |
|
|
for (const [label, score] of Object.entries(data.ai_confidence)) { |
|
|
html += `<div class="ai-score"> |
|
|
<div class="ai-score-label">${label}</div> |
|
|
<div class="ai-score-value">${(score * 100).toFixed(1)}%</div> |
|
|
</div>`; |
|
|
} |
|
|
html += '</div></div>'; |
|
|
} |
|
|
|
|
|
html += `<div style="margin-top: 20px; font-size: 13px; color: #86868b;"> |
|
|
Request ID: <code>${data.request_id}</code> |
|
|
</div>`; |
|
|
|
|
|
resultsDiv.innerHTML = html; |
|
|
} |
|
|
|
|
|
function displayComparison(originalText, data) { |
|
|
document.getElementById('comparisonPanel').classList.remove('hidden'); |
|
|
document.getElementById('originalText').textContent = originalText; |
|
|
document.getElementById('safeText').textContent = data.safe_text; |
|
|
document.getElementById('exportText').textContent = data.export_text; |
|
|
document.getElementById('detectedWords').textContent = |
|
|
data.detected_words && data.detected_words.length > 0 |
|
|
? data.detected_words.join(', ') |
|
|
: 'None detected'; |
|
|
} |
|
|
|
|
|
async function displayLogs(requestId) { |
|
|
document.getElementById('logsPanel').classList.remove('hidden'); |
|
|
|
|
|
try { |
|
|
|
|
|
const redactedResponse = await fetch('/logs/redacted'); |
|
|
const redactedData = await redactedResponse.json(); |
|
|
|
|
|
const redactedLogs = document.getElementById('redactedLogs'); |
|
|
if (redactedData.logs && redactedData.logs.length > 0) { |
|
|
redactedLogs.innerHTML = redactedData.logs.slice(-5).reverse().map(log => ` |
|
|
<div class="log-entry log-redacted"> |
|
|
<strong>Request ID:</strong> ${log.request_id}<br> |
|
|
<strong>Timestamp:</strong> ${new Date(log.timestamp).toLocaleString()}<br> |
|
|
<strong>Context:</strong> ${log.context}<br> |
|
|
<strong>Profanity:</strong> ${log.contains_profanity ? 'Yes' : 'No'}<br> |
|
|
<strong>Toxicity:</strong> ${log.toxicity_level}<br> |
|
|
<strong>Text Hash:</strong> ${log.text_hash}<br> |
|
|
<strong>Text Length:</strong> ${log.text_length} chars |
|
|
</div> |
|
|
`).join(''); |
|
|
} |
|
|
|
|
|
|
|
|
const verbatimResponse = await fetch(`/logs/verbatim/${requestId}`); |
|
|
const verbatimData = await verbatimResponse.json(); |
|
|
|
|
|
const verbatimLogs = document.getElementById('verbatimLogs'); |
|
|
if (verbatimData.request_id) { |
|
|
verbatimLogs.innerHTML = ` |
|
|
<div class="log-entry log-verbatim"> |
|
|
<strong>⚠️ COMPLIANCE ACCESS ONLY ⚠️</strong><br><br> |
|
|
<strong>Request ID:</strong> ${verbatimData.request_id}<br> |
|
|
<strong>Timestamp:</strong> ${new Date(verbatimData.timestamp).toLocaleString()}<br> |
|
|
<strong>Context:</strong> ${verbatimData.context}<br> |
|
|
<strong>Original Text:</strong> ${verbatimData.original_text}<br> |
|
|
<strong>Safe Text:</strong> ${verbatimData.safe_text}<br> |
|
|
<strong>Profanity:</strong> ${verbatimData.contains_profanity ? 'Yes' : 'No'}<br> |
|
|
<strong>Toxicity:</strong> ${verbatimData.toxicity_level} |
|
|
</div> |
|
|
`; |
|
|
} else { |
|
|
verbatimLogs.innerHTML = '<div class="log-verbatim">Verbatim logs not available or disabled</div>'; |
|
|
} |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Error loading logs:', error); |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
