Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gambling Comment Filter</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #4361ee; | |
| --secondary: #3a0ca3; | |
| --light: #f8f9fa; | |
| --dark: #212529; | |
| --success: #2dc653; | |
| --danger: #e63946; | |
| --warning: #ff9f1c; | |
| --info: #90e0ef; | |
| --border-radius: 0.5rem; | |
| --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s ease; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background-color: #f5f7fa; | |
| color: #333; | |
| line-height: 1.6; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .navbar { | |
| background-color: var(--primary); | |
| box-shadow: var(--box-shadow); | |
| padding: 1rem 0; | |
| } | |
| .navbar-brand { | |
| color: white; | |
| font-weight: 700; | |
| font-size: 1.5rem; | |
| padding-left: 1rem; | |
| } | |
| .app-container { | |
| max-width: 1200px; | |
| margin: 2rem auto; | |
| padding: 0 1rem; | |
| } | |
| .card { | |
| border: none; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--box-shadow); | |
| margin-bottom: 2rem; | |
| overflow: hidden; | |
| transition: var(--transition); | |
| } | |
| .card:hover { | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .card-header { | |
| background-color: white; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| font-weight: 600; | |
| padding: 1.25rem 1.5rem; | |
| } | |
| .card-body { | |
| padding: 1.5rem; | |
| } | |
| .form-label { | |
| font-weight: 500; | |
| margin-bottom: 0.5rem; | |
| color: #495057; | |
| } | |
| .form-control { | |
| border-radius: var(--border-radius); | |
| padding: 0.75rem 1rem; | |
| border: 1px solid #ced4da; | |
| transition: var(--transition); | |
| } | |
| .form-control:focus { | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.25); | |
| } | |
| .btn { | |
| border-radius: var(--border-radius); | |
| padding: 0.75rem 1.5rem; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .btn-primary { | |
| background-color: var(--primary); | |
| border-color: var(--primary); | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--secondary); | |
| border-color: var(--secondary); | |
| } | |
| .result { | |
| background-color: #f8f9fa; | |
| border-radius: var(--border-radius); | |
| padding: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .result-header { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .result-icon { | |
| font-size: 1.5rem; | |
| margin-right: 0.75rem; | |
| } | |
| .result-title { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin: 0; | |
| } | |
| .badge { | |
| font-size: 0.85rem; | |
| padding: 0.5rem 0.75rem; | |
| border-radius: 50px; | |
| font-weight: 500; | |
| } | |
| .rules-container { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--box-shadow); | |
| padding: 1.5rem; | |
| } | |
| .rules-category { | |
| margin-bottom: 2rem; | |
| } | |
| .rules-category h3 { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| padding-bottom: 0.5rem; | |
| border-bottom: 2px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .rules-list { | |
| list-style-type: none; | |
| padding: 0; | |
| margin: 0; | |
| max-height: 200px; | |
| overflow-y: auto; | |
| } | |
| .rules-list li { | |
| padding: 0.5rem 0.75rem; | |
| background-color: #f8f9fa; | |
| margin-bottom: 0.5rem; | |
| border-radius: var(--border-radius); | |
| font-size: 0.9rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .rules-list li:before { | |
| content: "•"; | |
| color: var(--primary); | |
| font-weight: bold; | |
| margin-right: 0.5rem; | |
| } | |
| pre { | |
| background-color: #f8f9fa; | |
| padding: 1rem; | |
| border-radius: var(--border-radius); | |
| white-space: pre-wrap; | |
| } | |
| .tabs { | |
| display: flex; | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--box-shadow); | |
| margin-bottom: 2rem; | |
| overflow: hidden; | |
| } | |
| .tab { | |
| flex: 1; | |
| text-align: center; | |
| padding: 1rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| border-bottom: 3px solid transparent; | |
| font-weight: 500; | |
| } | |
| .tab.active { | |
| background-color: white; | |
| color: var(--primary); | |
| border-bottom: 3px solid var(--primary); | |
| } | |
| .tab-icon { | |
| margin-right: 0.5rem; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .footer { | |
| text-align: center; | |
| padding: 2rem 0; | |
| margin-top: 2rem; | |
| background-color: white; | |
| border-top: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navbar --> | |
| <nav class="navbar navbar-dark"> | |
| <div class="container"> | |
| <span class="navbar-brand"> | |
| <i class="fas fa-shield-alt me-2"></i> | |
| Gambling Comment Filter | |
| </span> | |
| </div> | |
| </nav> | |
| <div class="app-container"> | |
| <!-- Results Section (if available) --> | |
| {% if result %} | |
| <div class="card mb-4"> | |
| <div class="card-header d-flex align-items-center"> | |
| <i class="fas fa-chart-bar me-2"></i> | |
| Analysis Results | |
| </div> | |
| <div class="card-body"> | |
| {% if result.message %} | |
| <div class="alert alert-success"> | |
| <i class="fas fa-check-circle me-2"></i> | |
| {{ result.message }} | |
| </div> | |
| {% elif result.upload_result %} | |
| <div class="result"> | |
| <div class="result-header"> | |
| <div class="result-icon text-primary"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <h5 class="result-title">File Upload Results</h5> | |
| </div> | |
| <div class="row mb-3"> | |
| <div class="col-md-6"> | |
| <div class="card bg-light"> | |
| <div class="card-body text-center"> | |
| <h3 class="text-danger mb-1">{{ result.upload_result.gambling_comments | length }}</h3> | |
| <p class="mb-0">Gambling Comments Found</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="card bg-light"> | |
| <div class="card-body text-center"> | |
| <h3 class="text-success mb-1">{{ result.upload_result.safe_comments | length }}</h3> | |
| <p class="mb-0">Safe Comments Found</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <details> | |
| <summary class="mb-2 btn btn-sm btn-outline-secondary">View Detailed Results</summary> | |
| <pre>{{ result.upload_result | pretty_json | safe }}</pre> | |
| </details> | |
| </div> | |
| {% else %} | |
| <div class="result"> | |
| <div class="result-header"> | |
| <div class="result-icon {% if result.is_gambling %}text-danger{% else %}text-success{% endif %}"> | |
| <i class="fas {% if result.is_gambling %}fa-exclamation-triangle{% else %}fa-check-circle{% endif %}"></i> | |
| </div> | |
| <h5 class="result-title">Classification Result</h5> | |
| </div> | |
| <div class="mb-3"> | |
| <span class="badge {% if result.is_gambling %}bg-danger{% else %}bg-success{% endif %} me-2"> | |
| <i class="fas {% if result.is_gambling %}fa-times{% else %}fa-check{% endif %} me-1"></i> | |
| {{ "Gambling Comment" if result.is_gambling else "Safe Comment" }} | |
| </span> | |
| <span class="badge bg-info text-dark"> | |
| <i class="fas fa-chart-line me-1"></i> | |
| Confidence: {{ result.metrics.confidence_score }} | |
| </span> | |
| </div> | |
| <details> | |
| <summary class="mb-2 btn btn-sm btn-outline-secondary">View Analysis Details</summary> | |
| <pre>{{ result.upload_result | pretty_json | safe }}</pre> | |
| </details> | |
| </div> | |
| {% endif %} | |
| </div> | |
| </div> | |
| {% endif %} | |
| <!-- Tabs for Different Functions --> | |
| <div class="tabs"> | |
| <div class="tab active" data-tab="classify"> | |
| <i class="fas fa-search tab-icon"></i> | |
| Classify Comment | |
| </div> | |
| <div class="tab" data-tab="upload"> | |
| <i class="fas fa-upload tab-icon"></i> | |
| Batch Upload | |
| </div> | |
| <div class="tab" data-tab="rules"> | |
| <i class="fas fa-cogs tab-icon"></i> | |
| Manage Rules | |
| </div> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div class="tab-content active" id="classify-tab"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <i class="fas fa-search me-2"></i> | |
| Classify Single Comment | |
| </div> | |
| <div class="card-body"> | |
| <form action="/classify" method="post"> | |
| <div class="form-group mb-3"> | |
| <label for="comment" class="form-label">Enter your comment:</label> | |
| <textarea class="form-control" name="comment" id="comment" rows="4" placeholder="Type or paste the comment here...">{{ comment }}</textarea> | |
| </div> | |
| <button type="submit" class="btn btn-primary"> | |
| <i class="fas fa-check-circle me-2"></i> | |
| Analyze Comment | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="upload-tab"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <i class="fas fa-upload me-2"></i> | |
| Batch Upload & Process | |
| </div> | |
| <div class="card-body"> | |
| <form action="/upload" method="post" enctype="multipart/form-data"> | |
| <div class="form-group mb-3"> | |
| <label for="file" class="form-label">Select File for Analysis:</label> | |
| <input type="file" class="form-control" name="file" id="file"> | |
| <small class="form-text text-muted">Supported formats: CSV, JSON, Excel</small> | |
| </div> | |
| <div class="form-group mb-3"> | |
| <label for="column" class="form-label">Column Name:</label> | |
| <input type="text" class="form-control" name="column" id="column" value="comment" placeholder="Column containing comments"> | |
| <small class="form-text text-muted">Default is "comment"</small> | |
| </div> | |
| <button type="submit" class="btn btn-primary"> | |
| <i class="fas fa-file-import me-2"></i> | |
| Upload & Process File | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="rules-tab"> | |
| <div class="card mb-4"> | |
| <div class="card-header"> | |
| <i class="fas fa-plus-circle me-2"></i> | |
| Add New Rule | |
| </div> | |
| <div class="card-body"> | |
| <form action="/add_rule" method="post"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="form-group mb-3"> | |
| <label for="rule_type" class="form-label">Rule Type:</label> | |
| <select name="rule_type" id="rule_type" class="form-control"> | |
| <option value="platform">Platform Name</option> | |
| <option value="gambling_term">Gambling Term</option> | |
| <option value="safe_indicator">Safe Indicator</option> | |
| <option value="gambling_context">Gambling Context</option> | |
| <option value="ambiguous_term">Ambiguous Term</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="form-group mb-3"> | |
| <label for="rule_value" class="form-label">Rule Value:</label> | |
| <input type="text" class="form-control" name="rule_value" id="rule_value" placeholder="Enter new rule value"> | |
| </div> | |
| </div> | |
| </div> | |
| <button type="submit" class="btn btn-primary"> | |
| <i class="fas fa-plus me-2"></i> | |
| Add Rule | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="rules-container"> | |
| <h2 class="mb-4">Current Rules</h2> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <div class="rules-category"> | |
| <h3><i class="fas fa-dice me-2"></i>Platform Names</h3> | |
| <ul class="rules-list"> | |
| {% for rule in rules.platform %} | |
| <li>{{ rule }}</li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="rules-category"> | |
| <h3><i class="fas fa-coins me-2"></i>Gambling Terms</h3> | |
| <ul class="rules-list"> | |
| {% for rule in rules.gambling_term %} | |
| <li>{{ rule }}</li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="rules-category"> | |
| <h3><i class="fas fa-shield-alt me-2"></i>Safe Indicators</h3> | |
| <ul class="rules-list"> | |
| {% for rule in rules.safe_indicator %} | |
| <li>{{ rule }}</li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="rules-category"> | |
| <h3><i class="fas fa-comment-alt me-2"></i>Gambling Contexts</h3> | |
| <ul class="rules-list"> | |
| {% for rule in rules.gambling_context %} | |
| <li>{{ rule }}</li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="rules-category"> | |
| <h3><i class="fas fa-question-circle me-2"></i>Ambiguous Terms</h3> | |
| <ul class="rules-list"> | |
| {% for rule in rules.ambiguous_term %} | |
| <li>{{ rule }}</li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <p class="mb-0">Gambling Comment Filter © 2025 | All Rights Reserved</p> | |
| </div> | |
| </footer> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| // Tab functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const tabs = document.querySelectorAll('.tab'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| // Remove active class from all tabs | |
| tabs.forEach(t => t.classList.remove('active')); | |
| // Add active class to clicked tab | |
| this.classList.add('active'); | |
| // Hide all tab contents | |
| document.querySelectorAll('.tab-content').forEach(content => { | |
| content.classList.remove('active'); | |
| }); | |
| // Show the corresponding tab content | |
| const tabId = this.getAttribute('data-tab') + '-tab'; | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |