Spaces:

ariansyahdedy
/

webclient

Running

File size: 15,730 Bytes

<!DOCTYPE html>
<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 &amp; 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 &amp; 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 &copy; 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>