Initial Commit

.gitattributes

@@ -0,0 +1 @@
+*.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,13 @@
+venv
+__pycache__/
+*.pyc
+app/client_secret.json
+app/client_secrets.json
+.env
+secret.json
+test*.py
+client_secret.json
+app/main_backup.py
+app/main*.py
+test.json
+draft.py

Dockerfile

@@ -0,0 +1,15 @@
+FROM tiangolo/uvicorn-gunicorn-fastapi:python3.9
+
+# Set working directory
+WORKDIR /app
+
+# Copy requirements and install them
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the app (including app.py and templates folder)
+COPY . .
+
+EXPOSE 7860
+
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,87 @@
+---
+title: Gambling Comment Filter
+emoji: 🎲
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+license: mit
+short_description: A PoC filter for detecting gambling-related comments
+---
+
+# Gambling Comment Filter
+A high-performance filter for detecting online gambling-related comments. This project is built using FastAPI and is designed to be deployed on Hugging Face Spaces. It uses robust Unicode normalization (via unidecode and a custom visual mapping) and dynamic rule management to catch obfuscated gambling content in comments.
+
+## Features
+- **Robust Text Normalization:** Converts fancy or obfuscated Unicode characters (bold, italic, fullwidth, Cyrillic/Greek lookalikes) into plain ASCII.
+- **Dynamic Rule Management:** Add or update filtering rules (platform names, gambling terms, safe indicators, gambling contexts, ambiguous terms) on the fly using a web interface.
+- **File Upload Support:** Process comments in bulk by uploading CSV or Excel files.
+- **Score-Based Classification:** Uses a scoring algorithm to determine if a comment is gambling-related based on multiple signals.
+- **Hugging Face Spaces Ready:** Deploy your project easily with a Dockerfile and run it as a Hugging Face Space.
+
+## Project Structure
+```
+gambling-comment-filter/
+├── app.py                # Main FastAPI application with filtering logic and endpoints
+├── requirements.txt      # Python dependencies
+├── Dockerfile            # Docker configuration for deployment on Hugging Face Spaces
+└── templates/
+    └── index.html        # HTML template for the web interface
+```
+
+## Requirements
+- Python 3.9+
+- [FastAPI](https://fastapi.tiangolo.com/)
+- [Uvicorn](https://www.uvicorn.org/)
+- [Jinja2](https://palletsprojects.com/p/jinja/)
+- [Pandas](https://pandas.pydata.org/)
+- [openpyxl](https://openpyxl.readthedocs.io/en/stable/)
+- [unidecode](https://pypi.org/project/Unidecode/)
+
+## Setup and Local Testing
+1. **Clone the Repository**
+   ```bash
+   git clone https://huggingface.co/spaces/ariansyahdedy/gambling-comment-filter
+   cd gambling-comment-filter
+   ```
+
+2. **Create a Virtual Environment and Install Dependencies**
+   ```bash
+   python -m venv venv
+   source venv/bin/activate  # On Windows use: venv\Scripts\activate
+   pip install -r requirements.txt
+   ```
+
+3. **Run the Application**
+   ```bash
+   uvicorn app:app --reload
+   ```
+
+4. **Access the Web Interface**
+   Open your browser and visit http://localhost:8000
+
+## Deployment on Hugging Face Spaces
+1. **Create a New Space**
+   Go to Hugging Face Spaces and create a new Space using the Docker runtime.
+
+2. **Push Your Local Project to the Space**
+   ```bash
+   cd path/to/gambling-comment-filter
+   git init  # if not already a git repo
+   git add .
+   git commit -m "Initial commit for Gambling Comment Filter"
+   git remote add hf https://huggingface.co/spaces/ariansyahdedy/gambling-comment-filter
+   git push hf main
+   ```
+   The Space will automatically build and deploy your project.
+
+## Customization
+* **Updating Rules:** Use the web interface to add new rules via the `/add_rule` endpoint.
+* **Visual Mapping:** The `_robust_normalize` function uses a `VISUAL_MAP` dictionary to convert fancy characters into plain ASCII. You can update this mapping directly in `app.py` or add new entries through the `/add_visual_char` endpoint.
+* **Scoring:** Adjust the scoring logic in `is_gambling_comment` if you want to tweak the sensitivity.
+
+## License
+This project is licensed under the MIT License. See the LICENSE file for details.
+
+## Contributing
+Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.

static/js/app.js

@@ -0,0 +1,36 @@
+// Modify the Refresh Comments button event listener
+document.getElementById('refreshCommentsBtn').addEventListener('click', function() {
+    const videoId = "{{ video.id }}";
+    window.location.href = `/refresh_comments/${videoId}`;
+});
+
+// Modify the Keep Comment button handler
+document.querySelectorAll('.keep-comment-btn').forEach(button => {
+    button.addEventListener('click', async function() {
+        const commentId = this.getAttribute('data-comment-id');
+        const videoId = "{{ video.id }}";
+        
+        try {
+            const response = await fetch(`/api/comments/keep/${commentId}?video_id=${videoId}`, {
+                method: 'POST'
+            });
+            const data = await response.json();
+            
+            if (data.success) {
+                // Remove from flagged comments
+                const commentCard = this.closest('.comment-card');
+                commentCard.remove();
+                
+                // Update flagged comments count
+                const flaggedCommentsCount = document.querySelector('h2 span');
+                const currentCount = parseInt(flaggedCommentsCount.textContent.replace(/[()]/g, ''));
+                flaggedCommentsCount.textContent = `(${currentCount - 1})`;
+            } else {
+                alert("Failed to keep comment. Please try again.");
+            }
+        } catch (err) {
+            console.error(err);
+            alert("Error processing comment.");
+        }
+    });
+});

templates/base.html

@@ -0,0 +1,43 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}YouTube Comment Moderator{% endblock %}</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
+</head>
+<body class="bg-gray-100 min-h-screen flex flex-col">
+    <nav class="bg-blue-600 text-white p-4 shadow-md">
+        <div class="container mx-auto flex justify-between items-center">
+            <a href="/" class="text-2xl font-bold">
+                <i class="fas fa-shield-alt mr-2"></i>YouTube Comment Guard
+            </a>
+            {% if current_user %}
+            <div class="flex items-center space-x-4">
+                <span>Welcome, {{ current_user.username }}</span>
+                <a href="/logout" class="bg-red-500 hover:bg-red-600 px-3 py-2 rounded">
+                    Logout
+                </a>
+            </div>
+            {% else %}
+            <a href="/login" class="bg-green-500 hover:bg-green-600 px-4 py-2 rounded">
+                Login
+            </a>
+            {% endif %}
+        </div>
+    </nav>
+
+    <main class="container mx-auto px-4 py-8 flex-grow">
+        {% block content %}{% endblock %}
+    </main>
+
+    <footer class="bg-gray-800 text-white py-4 text-center">
+        <p>&copy; 2024 YouTube Comment Guard. All rights reserved.</p>
+    </footer>
+
+    {% block scripts %}{% endblock %}
+</body>
+</html>

templates/index.html

@@ -0,0 +1,519 @@
+<!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>

templates/login.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YouTube Comment Moderator</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-color: #f4f4f4;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            font-family: 'Arial', sans-serif;
+        }
+        .login-container {
+            max-width: 400px;
+            width: 100%;
+            padding: 2rem;
+            background-color: white;
+            border-radius: 12px;
+            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+        }
+        .login-header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        .login-header img {
+            width: 80px;
+            margin-bottom: 1rem;
+        }
+        .btn-youtube {
+            background-color: #FF0000;
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            transition: background-color 0.3s ease;
+        }
+        .btn-youtube:hover {
+            background-color: #CC0000;
+            color: white;
+        }
+        .login-footer {
+            text-align: center;
+            margin-top: 1rem;
+            color: #6c757d;
+            font-size: 0.8rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="login-container">
+        <div class="login-header">
+            <img src="../static/logo.png" alt="YouTube Comment Moderator">
+            <h2>YouTube Comment Moderator</h2>
+            <p class="text-muted">Simplify your comment management</p>
+        </div>
+
+        {% if error %}
+        <div class="alert alert-danger mb-3">{{ error }}</div>
+        {% endif %}
+
+        <form action="/login" method="post">
+            <button type="submit" class="btn btn-youtube w-100 py-2">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white">
+                    <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.246 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
+                </svg>
+                Login with YouTube
+            </button>
+        </form>
+
+        <div class="login-footer">
+            <p>Securely powered by Google OAuth</p>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>

templates/video_comments.html

@@ -0,0 +1,186 @@
+{% extends "base.html" %}
+
+{% block title %}
+Moderate Comments - {{ video.title }}
+{% endblock %}
+
+{% block content %}
+<div class="container mx-auto px-4 py-8">
+    <!-- Outer container with card styling -->
+    <div class="bg-white shadow-xl rounded-lg overflow-visible">
+        <!-- Header section with video title and controls -->
+        <div class="bg-gradient-to-r from-blue-500 to-purple-600 p-6">
+            <div class="flex justify-between items-center">
+                <h1 class="text-3xl font-bold text-white flex items-center">
+                    <i class="fab fa-youtube mr-4 text-red-500"></i>
+                    {{ video.title }}
+                </h1>
+                <div class="flex space-x-4">
+                    <button id="refreshCommentsBtn" class="bg-white text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-50 transition duration-300 flex items-center shadow-md">
+                        <i class="fas fa-sync mr-2"></i>Refresh Comments
+                    </button>
+                    <div x-data="{ showSettings: false, saveSettings() { 
+                        // Add your save logic here, e.g., update a model or call an API
+                        alert('Settings saved!');
+                        this.showSettings = false; // Optionally hide the settings box after saving
+                      } }" class="relative">
+                      <button @click="showSettings = !showSettings" class="bg-white text-purple-600 px-4 py-2 rounded-lg hover:bg-purple-50 transition duration-300 flex items-center shadow-md">
+                          <i class="fas fa-cog mr-2"></i>Moderation Settings
+                      </button>
+                      <div x-show="showSettings" x-transition class="absolute right-0 mt-2 w-72 bg-white rounded-lg shadow-2xl p-6 z-20 border border-gray-100">
+                          <h3 class="text-xl font-semibold mb-4 text-gray-800">Moderation Settings</h3>
+                          <div class="space-y-4">
+                              <div class="flex items-center">
+                                  <input type="checkbox" id="auto-delete" class="mr-3 rounded text-blue-500 focus:ring-blue-400">
+                                  <label for="auto-delete" class="text-gray-700">Auto-delete flagged comments</label>
+                              </div>
+                              <div>
+                                  <label class="block mb-2 text-gray-700">Gambling Confidence Threshold</label>
+                                  <input type="range" min="0" max="1" step="0.05" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" x-model="threshold" value="0.55">
+                              </div>
+                              <button @click="saveSettings" class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-2 rounded-lg hover:opacity-90 transition duration-300">
+                                  Save Settings
+                              </button>
+                          </div>
+                      </div>
+                  </div>
+                  
+                </div>
+            </div>
+        </div>
+
+        <!-- Comments Section -->
+        <div class="grid md:grid-cols-2 gap-6 p-6">
+            <!-- Safe Comments Column -->
+            <div>
+                <h2 class="text-2xl font-semibold mb-4 flex items-center text-green-600">
+                    <i class="fas fa-check-circle mr-3"></i>Safe Comments 
+                    <span class="text-sm text-gray-500 ml-2">({{ safe_comments|length }})</span>
+                </h2>
+                <div class="space-y-4">
+                    {% for comment in safe_comments %}
+                    <div class="bg-white p-4 rounded-lg shadow-md border border-gray-100">
+                        <p class="mb-2 text-gray-800">{{ comment.text }}</p>
+                        <div class="text-sm text-gray-600 flex justify-between items-center">
+                            <span class="font-medium">{{ comment.author }}</span>
+                            <span class="text-xs text-green-600">Safe</span>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+            <!-- Flagged Comments Column -->
+            <div>
+                <h2 class="text-2xl font-semibold mb-4 flex items-center text-red-600">
+                    <i class="fas fa-exclamation-triangle mr-3"></i>Flagged Comments 
+                    <span id="flaggedCount" class="text-sm text-gray-500 ml-2">({{ flagged_comments|length }})</span>
+
+                </h2>
+                <div class="space-y-4">
+                    {% for comment in flagged_comments %}
+                    <div class="comment-card bg-red-50 p-4 rounded-lg shadow-md border border-red-200 relative">
+                        <p class="mb-2 text-gray-800">{{ comment.text }}</p>
+                        <div class="text-sm text-gray-600 flex justify-between items-center">
+                            <span class="font-medium">{{ comment.author }}</span>
+                            <div class="flex space-x-2">
+                                <button data-comment-id="{{ comment.id }}" data-video-id="{{ video.id }}" class="delete-comment-btn bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600 transition duration-300">
+                                    Delete
+                                </button>
+                                <button data-comment-id="{{ comment.id }}" data-video-id="{{ video.id }}"class="keep-comment-btn bg-green-500 text-white px-3 py-1 rounded hover:bg-green-600 transition duration-300">
+                                    Keep
+                                </button>
+                            </div>
+                        </div>
+                        <div class="mt-2 text-xs text-gray-500">
+                            <strong>Gambling Confidence:</strong> {{ comment.metrics.confidence_score }}
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Delete Comment Functionality
+    document.querySelectorAll('.delete-comment-btn').forEach(button => {
+        button.addEventListener('click', async function(e) {
+            e.stopPropagation(); // Ensure this click doesn't affect other handlers
+            const commentId = this.getAttribute('data-comment-id');
+            const videoId = this.getAttribute('data-video-id');
+            const commentCard = this.closest('.comment-card');
+
+            try {
+                const response = await fetch(`/api/comments/${commentId}?video_id=${videoId}`, {
+                    method: 'DELETE'
+                });
+                const data = await response.json();
+                
+                if (data.success) {
+                    // Remove the comment from the DOM
+                    commentCard.remove();
+                    
+                    // Optionally, update the flagged comments count
+                    const flaggedCommentsCount = document.querySelector('h2 span');
+                    const currentCount = parseInt(flaggedCommentsCount.textContent.replace(/[()]/g, ''));
+                    flaggedCommentsCount.textContent = `(${currentCount - 1})`;
+                } else {
+                    alert("Failed to delete comment. Please refresh and try again.");
+                }
+            } catch (err) {
+                console.error(err);
+                alert("Error deleting comment.");
+            }
+        });
+    });
+
+    // Keep Comment Functionality with added debug logging
+    document.querySelectorAll('.keep-comment-btn').forEach(button => {
+        button.addEventListener('click', async function(e) {
+            e.stopPropagation();
+            const commentId = this.getAttribute('data-comment-id');
+            const videoId = this.getAttribute('data-video-id');
+            const commentCard = this.closest('.comment-card');
+            console.log(`Keep button clicked for commentId: ${commentId}, videoId: ${videoId}`);
+            
+            try {
+                // Make the API call to keep the comment on YouTube
+                const response = await fetch(`/api/comments/keep/${commentId}?video_id=${videoId}`, {
+                    method: 'POST'
+                });
+                console.log("Response received from API:", response);
+                const data = await response.json();
+                console.log("Parsed response data:", data);
+                
+                if (data.success) {
+                    // If successful, remove from DOM and update the flagged count
+                    commentCard.remove();
+                    const flaggedCommentsCount = document.querySelector('#flaggedCount'); 
+                    const currentCount = parseInt(flaggedCommentsCount.textContent);
+                    flaggedCommentsCount.textContent = currentCount - 1;
+                    console.log(`Comment ${commentId} removed, flagged count updated to ${currentCount - 1}`);
+                } else {
+                    console.error(`API reported error for comment ${commentId}:`, data.error);
+                    alert("Failed to keep comment: " + (data.error || 'Unknown error'));
+                }
+            } catch (err) {
+                console.error(`Error keeping comment ${commentId}:`, err);
+                alert("Error keeping comment.");
+            }
+        });
+    });
+
+
+    // Refresh Comments Functionality
+    document.getElementById('refreshCommentsBtn').addEventListener('click', function(e) {
+        e.stopPropagation();  // Prevent any unwanted event bubbling
+        const videoId = "{{ video.id }}";
+        window.location.href = `/video/${videoId}`;
+    });
+});
+</script>
+{% endblock %}

templates/videos.html

@@ -0,0 +1,66 @@
+{% extends "base.html" %}
+
+{% block title %}Your YouTube Videos{% endblock %}
+
+{% block content %}
+<div class="container mx-auto px-4 py-8">
+    <div class="flex items-center justify-between mb-8">
+        <h1 class="text-4xl font-extrabold text-gray-800 flex items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 mr-4 text-red-600" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M3 5a2 2 0 012-2h10a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5zm12 1V5H5v1h10zm-5 8.5a3.5 3.5 0 100-7 3.5 3.5 0 000 7z" clip-rule="evenodd" />
+            </svg>
+            YouTube Video Management
+        </h1>
+        <button class="bg-green-500 text-white px-5 py-2 rounded-lg shadow-md hover:bg-green-600 transition duration-300 flex items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
+            </svg>
+            Refresh Videos
+        </button>
+    </div>
+
+    {% if videos %}
+    <div class="grid md:grid-cols-3 gap-6">
+        {% for video in videos %}
+        <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 border border-gray-100">
+            <div class="relative">
+                <img src="{{ video.thumbnail }}" alt="{{ video.title }}" class="w-full h-56 object-cover rounded-t-xl">
+                <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white px-3 py-1 rounded-full text-sm">
+                    {{ video.duration }}
+                </div>
+            </div>
+            <div class="p-5">
+                <h3 class="font-bold text-xl mb-3 text-gray-800 line-clamp-2">{{ video.title }}</h3>
+                <div class="flex justify-between items-center">
+                    <div class="flex items-center space-x-3">
+                        <span class="text-sm text-gray-600 flex items-center">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+                                <path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.5 1a.5.5 0 00-.5.5v1a.5.5 0 00.5.5h2a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5h-2zm5 0a.5.5 0 00-.5.5v1a.5.5 0 00.5.5h2a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5h-2zM6 9.5a.5.5 0 01.5-.5h2a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-2a.5.5 0 01-.5-.5v-1zm5 0a.5.5 0 01.5-.5h2a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-2a.5.5 0 01-.5-.5v-1z" />
+                            </svg>
+                            {{ video.comments_count }} Comments
+                        </span>
+                    </div>
+                    <a href="/video/{{ video.id }}" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition duration-300 shadow-md">
+                        Moderate
+                    </a>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    {% else %}
+    <div class="bg-white rounded-xl shadow-lg p-12 text-center">
+        <div class="flex justify-center mb-6">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
+            </svg>
+        </div>
+        <h2 class="text-2xl font-semibold text-gray-700 mb-4">No Videos Found</h2>
+        <p class="text-gray-500 mb-6">It looks like there are no videos to moderate at the moment.</p>
+        <button class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition duration-300 shadow-md">
+            Refresh Channel
+        </button>
+    </div>
+    {% endif %}
+</div>
+{% endblock %}