| from fastapi import FastAPI |
| from fastapi.responses import HTMLResponse |
| from pathlib import Path |
| from .routes import app |
|
|
| @app.get("/", response_class=HTMLResponse) |
| async def root(): |
| """Serve an interactive demo page with visualizations.""" |
| ui_path = Path(__file__).parent / "enhanced_ui.html" |
| with open(ui_path, 'r') as f: |
| return f.read() |
|
|
| @app.get("/simple", response_class=HTMLResponse) |
| async def simple_demo(): |
| """Serve the original simple demo page.""" |
| return """ |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Context-Aware Profanity Handler - Interactive Demo</title> |
| <style> |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| max-width: 900px; |
| margin: 40px auto; |
| padding: 20px; |
| background: #f5f5f5; |
| } |
| .container { |
| background: white; |
| padding: 30px; |
| border-radius: 8px; |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
| } |
| h1 { |
| color: #2c3e50; |
| border-bottom: 3px solid #3498db; |
| padding-bottom: 10px; |
| } |
| .input-group { |
| margin: 20px 0; |
| } |
| label { |
| display: block; |
| margin-bottom: 5px; |
| font-weight: 600; |
| color: #34495e; |
| } |
| textarea, select { |
| width: 100%; |
| padding: 10px; |
| border: 1px solid #ddd; |
| border-radius: 4px; |
| font-size: 14px; |
| box-sizing: border-box; |
| } |
| textarea { |
| min-height: 100px; |
| resize: vertical; |
| } |
| button { |
| background: #3498db; |
| color: white; |
| padding: 12px 30px; |
| border: none; |
| border-radius: 4px; |
| cursor: pointer; |
| font-size: 16px; |
| font-weight: 600; |
| } |
| button:hover { |
| background: #2980b9; |
| } |
| .result { |
| margin-top: 20px; |
| padding: 20px; |
| border-radius: 4px; |
| display: none; |
| } |
| .result.safe { |
| background: #d4edda; |
| border: 1px solid #c3e6cb; |
| color: #155724; |
| } |
| .result.warning { |
| background: #fff3cd; |
| border: 1px solid #ffeeba; |
| color: #856404; |
| } |
| .result.error { |
| background: #f8d7da; |
| border: 1px solid #f5c6cb; |
| color: #721c24; |
| } |
| .example { |
| background: #e8f4f8; |
| padding: 15px; |
| border-radius: 4px; |
| margin: 20px 0; |
| border-left: 4px solid #3498db; |
| } |
| .example h3 { |
| margin-top: 0; |
| color: #2c3e50; |
| } |
| .badge { |
| display: inline-block; |
| padding: 4px 8px; |
| border-radius: 3px; |
| font-size: 12px; |
| font-weight: 600; |
| margin-right: 5px; |
| } |
| .badge.safe { background: #d4edda; color: #155724; } |
| .badge.mild { background: #fff3cd; color: #856404; } |
| .badge.explicit { background: #f8d7da; color: #721c24; } |
| .badge.slur { background: #f5c6cb; color: #721c24; } |
| .badge.threat { background: #f5c6cb; color: #721c24; } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>🧩 Context-Aware Profanity Handler</h1> |
| <p>A demonstration of context-aware profanity detection and handling for AI-assisted reporting.</p> |
| |
| <div class="example"> |
| <h3>💡 Example Use Case</h3> |
| <p><strong>Input:</strong> "Report on asset: <em>Do You Want to F*** Me Tonight</em>"</p> |
| <p><strong>Context:</strong> Song Title (Entity Name)</p> |
| <p><strong>Expected Result:</strong> Detected but allowed, with transparent feedback about safe rendering.</p> |
| </div> |
| |
| <div class="input-group"> |
| <label for="text">Text to Analyze:</label> |
| <textarea id="text" placeholder="Enter text here, e.g., a song title, brand name, or user input...">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="input-group"> |
| <label> |
| <input type="checkbox" id="strict_mode"> Strict Mode |
| </label> |
| </div> |
| |
| <button onclick="analyzeText()">Analyze Text</button> |
| |
| <div id="result" class="result"></div> |
| </div> |
| |
| <script> |
| async function analyzeText() { |
| const text = document.getElementById('text').value; |
| const context = document.getElementById('context').value; |
| const strict_mode = document.getElementById('strict_mode').checked; |
| |
| const resultDiv = document.getElementById('result'); |
| resultDiv.style.display = 'none'; |
| |
| try { |
| const response = await fetch('/analyze', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ text, context, strict_mode }) |
| }); |
| |
| const data = await response.json(); |
| |
| let className = 'safe'; |
| if (data.toxicity_level === 'explicit' || data.toxicity_level === 'slur' || data.toxicity_level === 'threat') { |
| className = 'error'; |
| } else if (data.toxicity_level === 'mild') { |
| className = 'warning'; |
| } |
| |
| resultDiv.className = 'result ' + className; |
| resultDiv.innerHTML = ` |
| <h3>Analysis Results</h3> |
| <p><strong>Profanity Detected:</strong> ${data.contains_profanity ? 'Yes' : 'No'}</p> |
| <p><strong>Toxicity Level:</strong> <span class="badge ${data.toxicity_level}">${data.toxicity_level.toUpperCase()}</span></p> |
| <p><strong>Message:</strong> ${data.message}</p> |
| <hr> |
| <p><strong>Original Text:</strong><br><code>${text}</code></p> |
| <p><strong>Safe Text:</strong><br><code>${data.safe_text}</code></p> |
| `; |
| resultDiv.style.display = 'block'; |
| } catch (error) { |
| resultDiv.className = 'result error'; |
| resultDiv.innerHTML = `<p>Error: ${error.message}</p>`; |
| resultDiv.style.display = 'block'; |
| } |
| } |
| </script> |
| </body> |
| </html> |
| """ |
|
|
| if __name__ == "__main__": |
| import uvicorn |
| uvicorn.run(app, host="0.0.0.0", port=8000) |
|
|
