First commit

.gitignore

@@ -0,0 +1,2 @@
+venv
+app/__pycache__

Dockerfile

@@ -0,0 +1,16 @@
+# Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+
+FROM python:3.9
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

app/main.py

@@ -0,0 +1,404 @@
+# main.py
+import re
+import time
+import os
+import json
+import pathlib
+import logging
+import unicodedata
+import io
+import traceback
+import unidecode
+import pandas as pd
+from dotenv import load_dotenv
+
+
+from fastapi import FastAPI, Request, Form, File, UploadFile, HTTPException, Depends
+from fastapi.responses import HTMLResponse, RedirectResponse, JSONResponse
+from fastapi.templating import Jinja2Templates
+from fastapi.staticfiles import StaticFiles
+from fastapi.security import OAuth2PasswordBearer
+from pydantic import BaseModel
+
+
+
+load_dotenv()
+
+# Configure logging at the top of the file
+logging.basicConfig(
+    level=logging.INFO, 
+    format='%(asctime)s - %(name)s - [%(levelname)s] %(message)s',
+    datefmt='%Y-%m-%d %H:%M:%S'
+)
+logger = logging.getLogger(__name__)
+
+# Global visual map for replacing visually similar characters.
+VISUAL_MAP = {
+    'А': 'A', 'В': 'B', 'С': 'C', 'Е': 'E', 'Н': 'H', 'К': 'K', 'М': 'M',
+    'О': 'O', 'Р': 'P', 'Т': 'T', 'Х': 'X',
+    'а': 'a', 'в': 'b', 'с': 'c', 'е': 'e', 'о': 'o', 'р': 'p', 'х': 'x', 'у': 'y',
+    'Я': 'R', 'я': 'r',
+    'ρ': 'p',
+    'Π': 'P',
+    # etc...
+}
+
+
+# --- GamblingFilter class (with rule updates) ---
+class GamblingFilter:
+    """
+    A high-performance filter for detecting online gambling-related comments.
+    Features include aggressive Unicode normalization, keyword matching, and pattern detection.
+    """
+    def __init__(self):
+        logger.info("Initializing GamblingFilter")
+        self._platform_names = {
+            'agustoto', 'aero', 'aero88', 'dora', 'dora77', 'dewadora', 'pulau777', 'pulau', '777',
+            'jptogel', 'mandalika', 'cnd88', 'axl', 'berkah99', 'weton88', 'garuda', 'hoki'
+        }
+        self._gambling_terms = {
+            'jackpot', 'jp', 'wd', 'depo', 'cuan', 'gacor', 'gacir', 'jekpot', 'sultan',
+            'rezeki nomplok', 'rezeki', 'menang', 'nomplok', 'deposit', 'withdraw', 'maxwin', 
+            'auto sultan', 'jepe', 'jepee', 'bikin nagih', 'berkah'
+        }
+        self._ambiguous_terms = {
+            'auto', 'main', 'bermain', 'hasil', 'dapat', 'dapet', 'berkat'
+        }
+        self._safe_indicators = {
+            'tidak mengandung', 'bukan perjudian', 'tanpa perjudian',
+            'dokumentasi', 'profesional', 'pembelajaran'
+        }
+        self._gambling_contexts = [
+            r'(main|bermain|coba).{1,30}(dapat|dapet|pro|jadi|langsung|menang|jp|cuan)',
+            r'(modal|depo).{1,30}(jadi|langsung|wd|cuan)',
+            r'(jp|jackpot|jekpot).{1,30}(gede|besar|pecah)',
+            r'(berkat|dari).{1,30}(rezeki|menang|cuan|sultan)',
+            r'(gacor|gacir).{1,30}(terus|parah|tiap|hari)',
+            r'(rezeki|cuan).{1,30}(nomplok|datang|mengalir|lancar)',
+            r'(hari ini).{1,30}(menang|cuan|rezeki|berkat)',
+            r'(malah|eh).{1,30}(jadi|dapat|dapet|rezeki)',
+            r'(auto).{1,30}(sultan|cuan|rezeki|kaya)',
+            r'(0\d:[0-5]\d).{1,30}(menang|rezeki|cuan|gacor)',
+            r'(iseng|coba).{1,30}(malah|jadi|eh|pro)',
+            r'(deposit|depo|wd).{1,30}(jadi|langsung)',
+            r'(langsung|auto).{1,30}(jp|cuan|sultan|rezeki)',
+            r'bikin\s+nagih',
+            r'gak\s+ada\s+duanya',
+            r'berkah.{0,20}rezeki',
+            r'puji\s+syukur'
+        ]
+        self._compiled_gambling_contexts = [
+            re.compile(pattern, re.IGNORECASE | re.DOTALL) 
+            for pattern in self._gambling_contexts
+        ]
+        self._update_platform_pattern()
+        self._number_pattern = re.compile(r'(88|777|77|99|7+)')
+
+    def _update_platform_pattern(self):
+        """Recompile the platform name regex based on current _platform_names."""
+        platform_patterns = []
+        for platform in self._platform_names:
+            chars = list(platform)
+            segments = [
+                f'[{c.upper()}{c.lower()}][^a-zA-Z0-9]{{0,3}}'
+                for c in chars[:-1]
+            ]
+            segments.append(f'[{chars[-1].upper()}{chars[-1].lower()}]')
+            strict = ''.join(segments)
+            platform_patterns.append(strict)
+        self._platform_pattern = re.compile('|'.join(platform_patterns), re.DOTALL)
+
+    def add_rule(self, rule_type: str, rule_value: str):
+        """
+        Add a new rule based on the rule type.
+        Allowed types: 'platform', 'gambling_term', 'safe_indicator', 'gambling_context', 'ambiguous_term'
+        """
+        rule_type = rule_type.lower()
+        if rule_type == 'platform':
+            self._platform_names.add(rule_value)
+            self._update_platform_pattern()
+        elif rule_type == 'gambling_term':
+            self._gambling_terms.add(rule_value)
+        elif rule_type == 'safe_indicator':
+            self._safe_indicators.add(rule_value)
+        elif rule_type == 'gambling_context':
+            self._gambling_contexts.append(rule_value)
+            self._compiled_gambling_contexts.append(re.compile(rule_value, re.IGNORECASE | re.DOTALL))
+        elif rule_type == 'ambiguous_term':
+            self._ambiguous_terms.add(rule_value)
+        else:
+            raise ValueError("Unsupported rule type")
+
+    def _strip_all_formatting(self, text: str) -> str:
+        return ''.join(c.lower() for c in text if c.isalnum() or c.isspace())
+
+    def _robust_normalize(self, text: str) -> str:
+        # Step 1: custom mapping for visually similar characters
+        mapped_text = ''.join(VISUAL_MAP.get(ch, ch) for ch in text)
+        # Step 2: Unicode normalization + unidecode
+        decomposed = unicodedata.normalize('NFKD', mapped_text)
+        ascii_equiv = unidecode.unidecode(decomposed)
+        return ascii_equiv.lower()
+
+    def _extract_platform_names(self, text: str) -> list:
+        matches = []
+        pattern_matches = self._platform_pattern.findall(text)
+        if pattern_matches:
+            pattern_matches = [m for sublist in pattern_matches for m in sublist if m]
+            matches.extend(pattern_matches)
+        normalized = self._robust_normalize(text)
+        stripped = self._strip_all_formatting(text)
+        for platform in self._platform_names:
+            if platform in normalized or platform in stripped:
+                if not any(platform in m.lower() for m in matches):
+                    matches.append(platform)
+        if '88' in text or '88' in normalized:
+            if not any('88' in m for m in matches):
+                matches.append('88')
+        if '777' in text or '777' in normalized:
+            if not any('777' in m for m in matches):
+                matches.append('777')
+        return matches
+
+    def normalize_text(self, text: str) -> str:
+        normalized = unicodedata.normalize('NFKD', text)
+        normalized = ''.join(c for c in normalized if ord(c) < 128 or c.isspace())
+        return normalized.lower()
+
+    def is_gambling_comment(self, text: str, threshold: float = 0.55) -> tuple:
+        start_time = time.time()
+        logger.info(f"Analyzing comment for gambling content: {text[:100]}...")
+        metrics = {
+            'platform_matches': [],
+            'gambling_term_matches': [],
+            'context_matches': [],
+            'safe_indicators': [],
+            'has_numbers': False,
+            'confidence_score': 0.0,
+            'processing_time_ms': 0
+        }
+        normalized_text = self.normalize_text(text)
+        stripped_text = self._strip_all_formatting(text)
+        aggressive_text = self._robust_normalize(text)
+        for indicator in self._safe_indicators:
+            if indicator in normalized_text:
+                metrics['safe_indicators'].append(indicator)
+        if metrics['safe_indicators']:
+            metrics['confidence_score'] = 0.0
+            metrics['processing_time_ms'] = (time.time() - start_time) * 1000
+            return False, metrics
+        platform_matches = self._extract_platform_names(text)
+        if platform_matches:
+            metrics['platform_matches'] = platform_matches
+        for term in self._gambling_terms:
+            if term in normalized_text or term in stripped_text or term in aggressive_text:
+                metrics['gambling_term_matches'].append(term)
+        if self._number_pattern.search(normalized_text):
+            metrics['has_numbers'] = True
+        for pattern in self._compiled_gambling_contexts:
+            match = pattern.search(normalized_text)
+            if match:
+                metrics['context_matches'].append(match.group(0))
+            match = pattern.search(aggressive_text)
+            if match and match.group(0) not in metrics['context_matches']:
+                metrics['context_matches'].append(match.group(0))
+        platform_score = min(len(metrics['platform_matches']) * 1.0, 1)
+        term_score = min(len(metrics['gambling_term_matches']) * 0.2, 0.4)
+        context_score = min(len(metrics['context_matches']) * 0.2, 0.4)
+        number_score = 0.1 if metrics['has_numbers'] else 0
+        if platform_score > 0 and (term_score > 0 or context_score > 0):
+            total_score = platform_score + term_score + context_score + number_score
+        elif context_score > 0.2 and term_score > 0:
+            total_score = context_score + term_score + number_score
+        else:
+            total_score = max(platform_score, term_score, context_score) * 0.8
+        metrics['confidence_score'] = min(total_score, 1.0)
+        if ("berkah" in normalized_text or "berkah" in aggressive_text) and \
+           ("rezeki" in normalized_text or "rezeki" in aggressive_text) and \
+           metrics['platform_matches']:
+            metrics['confidence_score'] = max(metrics['confidence_score'], 0.7)
+            if "Special case: berkah+rezeki+platform" not in metrics['context_matches']:
+                metrics['context_matches'].append("Special case: berkah+rezeki+platform")
+        elif ("puji" in normalized_text or "puji" in aggressive_text) and \
+             ("syukur" in normalized_text or "syukur" in aggressive_text) and \
+             metrics['platform_matches']:
+            metrics['confidence_score'] = max(metrics['confidence_score'], 0.7)
+            if "Special case: puji+syukur+platform" not in metrics['context_matches']:
+                metrics['context_matches'].append("Special case: puji+syukur+platform")
+        metrics['processing_time_ms'] = (time.time() - start_time) * 1000
+        is_gambling = metrics['confidence_score'] >= threshold
+        return is_gambling, metrics
+
+    def filter_comments(self, comments: list, threshold: float = 0.55) -> dict:
+        result = {
+            'gambling_comments': [],
+            'safe_comments': [],
+            'metrics': []
+        }
+        for comment in comments:
+            is_gambling, metrics = self.is_gambling_comment(comment, threshold)
+            if is_gambling:
+                result['gambling_comments'].append(comment)
+            else:
+                result['safe_comments'].append(comment)
+            metrics["original_text"] = comment
+            result["metrics"].append(metrics)
+        return result
+
+
+# --- FastAPI application setup ---
+app = FastAPI()
+
+templates = Jinja2Templates(directory="templates")
+
+# Create a single instance of the GamblingFilter
+filter_instance = GamblingFilter()
+
+from jinja2 import Undefined
+def pretty_json(value):
+    if isinstance(value, Undefined):
+        return ""
+    return json.dumps(value, ensure_ascii=False, indent=2)
+templates.env.filters["pretty_json"] = pretty_json
+
+@app.get("/", response_class=HTMLResponse)
+async def read_root(request: Request):
+    return templates.TemplateResponse("index.html", {
+        "request": request,
+        "result": None,
+        "comment": "",
+        "rules": {
+            "platform": sorted(list(filter_instance._platform_names)),
+            "gambling_term": sorted(list(filter_instance._gambling_terms)),
+            "safe_indicator": sorted(list(filter_instance._safe_indicators)),
+            "gambling_context": sorted(list(filter_instance._gambling_contexts)),
+            "ambiguous_term": sorted(list(filter_instance._ambiguous_terms))
+        }
+    })
+
+
+
+@app.get("/classify", response_class=HTMLResponse)
+async def read_root(request: Request):
+    return templates.TemplateResponse("index.html", {
+        "request": request,
+        "result": None,
+        "comment": "",
+        "rules": {
+            "platform": sorted(list(filter_instance._platform_names)),
+            "gambling_term": sorted(list(filter_instance._gambling_terms)),
+            "safe_indicator": sorted(list(filter_instance._safe_indicators)),
+            "gambling_context": sorted(list(filter_instance._gambling_contexts)),
+            "ambiguous_term": sorted(list(filter_instance._ambiguous_terms))
+        }
+    })
+
+@app.post("/classify", response_class=HTMLResponse)
+async def classify_comment(request: Request, comment: str = Form(...)):
+    is_gambling, metrics = filter_instance.is_gambling_comment(comment)
+    result = {"is_gambling": is_gambling, "metrics": metrics}
+    print(result['metrics'])
+    return templates.TemplateResponse("index.html", {
+        "request": request,
+        "result": result,
+        "comment": comment,
+        "rules": {
+            "platform": sorted(list(filter_instance._platform_names)),
+            "gambling_term": sorted(list(filter_instance._gambling_terms)),
+            "safe_indicator": sorted(list(filter_instance._safe_indicators)),
+            "gambling_context": sorted(list(filter_instance._gambling_contexts)),
+            "ambiguous_term": sorted(list(filter_instance._ambiguous_terms))
+        }
+    })
+
+@app.post("/add_rule", response_class=HTMLResponse)
+async def add_rule(request: Request, rule_type: str = Form(...), rule_value: str = Form(...)):
+    try:
+        filter_instance.add_rule(rule_type, rule_value)
+        message = f"Added rule '{rule_value}' as type '{rule_type}'."
+    except ValueError as e:
+        message = str(e)
+    return templates.TemplateResponse("index.html", {
+        "request": request,
+        "result": {"message": message},
+        "comment": "",
+        "rules": {
+            "platform": sorted(list(filter_instance._platform_names)),
+            "gambling_term": sorted(list(filter_instance._gambling_terms)),
+            "safe_indicator": sorted(list(filter_instance._safe_indicators)),
+            "gambling_context": sorted(list(filter_instance._gambling_contexts)),
+            "ambiguous_term": sorted(list(filter_instance._ambiguous_terms))
+        }
+    })
+
+@app.post("/upload", response_class=HTMLResponse)
+async def upload_file(request: Request, file: UploadFile = File(...), column: str = Form("comment")):
+    content = await file.read()
+    try:
+        if file.filename.endswith('.csv'):
+            df = pd.read_csv(io.BytesIO(content))
+        elif file.filename.endswith(('.xls', '.xlsx')):
+            df = pd.read_excel(io.BytesIO(content))
+        else:
+            raise ValueError("Unsupported file type.")
+    except Exception as e:
+        return templates.TemplateResponse("index.html", {
+            "request": request,
+            "result": {"message": f"Error reading file: {e}"},
+            "comment": "",
+            "rules": {
+                "platform": sorted(list(filter_instance._platform_names)),
+                "gambling_term": sorted(list(filter_instance._gambling_terms)),
+                "safe_indicator": sorted(list(filter_instance._safe_indicators)),
+                "gambling_context": sorted(list(filter_instance._gambling_contexts)),
+                "ambiguous_term": sorted(list(filter_instance._ambiguous_terms))
+            }
+        })
+    if column not in df.columns:
+        return templates.TemplateResponse("index.html", {
+            "request": request,
+            "result": {"message": f"Column '{column}' not found. Available columns: {list(df.columns)}"},
+            "comment": "",
+            "rules": {
+                "platform": sorted(list(filter_instance._platform_names)),
+                "gambling_term": sorted(list(filter_instance._gambling_terms)),
+                "safe_indicator": sorted(list(filter_instance._safe_indicators)),
+                "gambling_context": sorted(list(filter_instance._gambling_contexts)),
+                "ambiguous_term": sorted(list(filter_instance._ambiguous_terms))
+            }
+        })
+    comments = df[column].astype(str).tolist()
+    results = filter_instance.filter_comments(comments)
+    return templates.TemplateResponse("index.html", {
+        "request": request,
+        "result": {"upload_result": results},
+        "comment": "",
+        "rules": {
+            "platform": sorted(list(filter_instance._platform_names)),
+            "gambling_term": sorted(list(filter_instance._gambling_terms)),
+            "safe_indicator": sorted(list(filter_instance._safe_indicators)),
+            "gambling_context": sorted(list(filter_instance._gambling_contexts)),
+            "ambiguous_term": sorted(list(filter_instance._ambiguous_terms))
+        }
+    })
+
+@app.post("/add_visual_char")
+async def add_visual_char(request: Request, char: str = Form(...), ascii_equiv: str = Form(...)):
+    VISUAL_MAP[char] = ascii_equiv
+    message = f"Added visual map entry '{char}' -> '{ascii_equiv}'."
+    return templates.TemplateResponse("index.html", {
+        "request": request,
+        "result": {"message": message},
+        "comment": "",
+        "rules": {
+            "platform": sorted(list(filter_instance._platform_names)),
+            "gambling_term": sorted(list(filter_instance._gambling_terms)),
+            "safe_indicator": sorted(list(filter_instance._safe_indicators)),
+            "gambling_context": sorted(list(filter_instance._gambling_contexts)),
+            "ambiguous_term": sorted(list(filter_instance._ambiguous_terms))
+        }
+    })
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)

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.metrics| 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>