| <!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> |
|
|
