Add UI

app/config.py

@@ -1,4 +1,8 @@
 import os
+from fastapi.templating import Jinja2Templates
+
+from app.services.gambling_filter import GamblingFilter
+from app.services.youtube_moderator import YouTubeCommentModerator
 
 # In a real environment, you would secure these properly.
 GOOGLE_CLIENT_ID = os.environ.get("GOOGLE_CLIENT_ID", "50786072753-s9nq1ma3nv44k382b5mcnvmeggt1cvha.apps.googleusercontent.com")
@@ -7,3 +11,7 @@ GOOGLE_REDIRECT_URI = os.environ.get("GOOGLE_REDIRECT_URI", "http://localhost:80
 
 # For YouTube Data API. The user must consent to at least read their channel info and videos.
 YOUTUBE_SCOPES = ["https://www.googleapis.com/auth/youtube.readonly", "https://www.googleapis.com/auth/youtube.force-ssl"]
+
+templates = Jinja2Templates(directory="templates")
+filter_instance = GamblingFilter()
+user_moderator = YouTubeCommentModerator(gambling_filter=GamblingFilter())

app/main.py

@@ -1,7 +1,9 @@
 from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse, RedirectResponse, JSONResponse
 from fastapi.templating import Jinja2Templates
 from fastapi.responses import HTMLResponse
 from starlette.middleware.sessions import SessionMiddleware
+from fastapi.staticfiles import StaticFiles
 # from starlette.middleware.proxy_headers import ProxyHeadersMiddleware
 import os
 # BEFORE creating the FastAPI app
@@ -13,7 +15,7 @@ from app.routes import auth, youtube
 templates = Jinja2Templates(directory="app/templates")
 
 app = FastAPI()
-
+app.mount("/static", StaticFiles(directory="static"), name="static")
 # Set a secret key for session cookies (Use a strong key in production!)
 app.add_middleware(SessionMiddleware, secret_key="CHANGE_THIS_SECRET")
 
@@ -21,9 +23,28 @@ app.add_middleware(SessionMiddleware, secret_key="CHANGE_THIS_SECRET")
 app.include_router(auth.router)
 app.include_router(youtube.router)
 
+# 1) Root route => Decide if user is logged in; if not, go to /login
 @app.get("/", response_class=HTMLResponse)
-async def read_root(request: Request):
-    return templates.TemplateResponse("index.html", {"request": request})
+async def root_redirect(request: Request):
+    token = request.cookies.get("token")
+    if token:
+        return RedirectResponse(url="/videos", status_code=303)
+    else:
+        return RedirectResponse(url="/login", status_code=303)
+
+# 2) Show the login form (GET /login)
+@app.get("/login", response_class=HTMLResponse)
+async def login_form(request: Request):
+    return templates.TemplateResponse("login.html", {"request": request})
+
+@app.get("/logout")
+async def logout():
+    response = RedirectResponse(url="/login")
+    response.delete_cookie("token")
+    return response
+# @app.get("/", response_class=HTMLResponse)
+# async def read_root(request: Request):
+#     return templates.TemplateResponse("login.html", {"request": request})
 
 @app.get("/success", response_class=HTMLResponse)
 async def read_success(request: Request):

app/models.py

@@ -0,0 +1,25 @@
+from typing import List, Dict, Optional, Set, Tuple
+from pydantic import BaseModel
+
+
+class User(BaseModel):
+    username: str
+    email: Optional[str] = None
+    youtube_credentials: Optional[Dict] = None
+
+class UserDatabase:
+    """
+    In-memory user database. In a production app, 
+    replace with a proper database like SQLAlchemy
+    """
+    users = {}
+
+    @classmethod
+    def create_user(cls, username: str, credentials: Dict):
+        user = User(username=username, youtube_credentials=credentials)
+        cls.users[username] = user
+        return user
+
+    @classmethod
+    def get_user(cls, username: str):
+        return cls.users.get(username)

app/routes/auth.py

@@ -2,10 +2,11 @@ from fastapi import APIRouter, Request, Response, status
 from fastapi.responses import RedirectResponse, HTMLResponse
 from starlette.middleware.sessions import SessionMiddleware
 from google_auth_oauthlib.flow import Flow
+from googleapiclient.discovery import build
 import os
 
 from app.config import GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, GOOGLE_REDIRECT_URI, YOUTUBE_SCOPES
-
+from app.models import UserDatabase
 router = APIRouter()
 
 
@@ -23,7 +24,7 @@ def create_flow():
         scopes=YOUTUBE_SCOPES,
     )
 
-@router.get("/login")
+@router.get("/auth")
 async def login(request: Request):
     flow = create_flow()
     flow.redirect_uri = GOOGLE_REDIRECT_URI  # must set the redirect_uri separately
@@ -65,5 +66,35 @@ async def auth_callback(request: Request):
         "client_secret": credentials.client_secret,
         "scopes": credentials.scopes
     }
+
+    youtube = build("youtube", "v3", credentials=credentials)
+    channel_response = youtube.channels().list(part="snippet", mine=True).execute()
+    if channel_response.get("items") and len(channel_response["items"]) > 0:
+        channel_username = channel_response["items"][0]["snippet"]["title"]
+    else:
+        channel_username = "unknown_user"
+    
+
+    user = UserDatabase.create_user(channel_username, request.session["credentials"])
+    response = RedirectResponse(url="/videos", status_code=status.HTTP_302_FOUND)
+    
+    # Set cookie settings based on your environment
+    import os
+    if os.getenv("HF_SPACE") == "true":
+        secure_cookie = True
+        samesite_value = "none"
+    else:
+        secure_cookie = False
+        samesite_value = "lax"
     
-    return RedirectResponse(url="/success", status_code=status.HTTP_302_FOUND)
+    # Redirect to /videos with a cookie token
+    response = RedirectResponse(url="/videos", status_code=303)
+    response.set_cookie(
+        key="token", 
+        value=channel_username, 
+        max_age=1800, 
+        httponly=True, 
+        secure=secure_cookie, 
+        samesite=samesite_value
+    )
+    return response

app/routes/youtube.py

@@ -1,7 +1,32 @@
-from fastapi import APIRouter, Request, HTTPException
+from fastapi import APIRouter, Request, HTTPException, Depends
+from fastapi import FastAPI, Request, Form, File, UploadFile, HTTPException, Depends
+from fastapi.responses import HTMLResponse, RedirectResponse, JSONResponse
 from google.oauth2.credentials import Credentials
 from googleapiclient.discovery import build
+from typing import List, Dict, Optional, Set, Tuple
 
+from app.services.gambling_filter import GamblingFilter
+from app.models import User, UserDatabase
+
+from app.config import templates, user_moderator, filter_instance
+
+import googleapiclient.discovery
+import logging
+
+# 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__)
+
+manual_overrides = {}  
+def keep_comment(comment_id: str, video_id: str):
+    # Mark this comment as manually kept
+    manual_overrides[(video_id, comment_id)] = "safe"
+
+    
 router = APIRouter()
 
 def get_credentials_from_session(session) -> Credentials:
@@ -18,6 +43,15 @@ def get_credentials_from_session(session) -> Credentials:
         scopes=creds_data["scopes"]
     )
 
+def get_current_user_from_cookie(request: Request):
+    token = request.cookies.get("token")
+    if not token:
+        raise HTTPException(status_code=401, detail="Not authenticated")
+    user = UserDatabase.get_user(token)
+    if not user:
+        raise HTTPException(status_code=401, detail="Invalid authentication credentials")
+    return user
+
 @router.get("/list-channels")
 async def list_channels(request: Request):
     """Return the user’s list of YouTube channels."""
@@ -75,3 +109,184 @@ async def list_videos(request: Request, channel_id: str):
         })
 
     return {"videos": videos}
+
+@router.post("/api/comments/keep/{comment_id}")
+async def api_keep_comment(
+    request: Request, 
+    comment_id: str,
+    video_id: str
+):
+    try:
+        logging.debug(f"Received keep request for comment_id: {comment_id}, video_id: {video_id}")
+        
+        # Get current user's credentials
+        current_user = get_current_user_from_cookie(request)
+        logging.debug(f"Current user: {current_user.username}")
+        user_creds = Credentials.from_authorized_user_info(current_user.youtube_credentials)
+        
+        # Create a moderator instance with user credentials
+
+        user_moderator.youtube_service = googleapiclient.discovery.build(
+            "youtube", "v3", 
+            credentials=user_creds
+        )
+        
+        logging.debug("Setting moderation status to 'published' on YouTube...")
+        # Mark comment as approved on YouTube
+        result = user_moderator.youtube_service.comments().setModerationStatus(
+            id=comment_id,
+            moderationStatus="published"  # This marks the comment as approved
+        ).execute()
+        logging.debug(f"YouTube API response: {result}")
+        
+        # Add the comment ID to the manual overrides so it won't be reflagged
+        keep_comment(comment_id, video_id)  # Ensure this function is defined and working
+        logging.debug("Manual override saved for comment.")
+        
+        return {"success": True, "message": "Comment kept successfully"}
+    
+    except Exception as e:
+        logging.error(f"Error keeping comment: {e}", exc_info=True)
+        return {"success": False, "error": str(e)}
+
+
+@router.get("/videos", response_class=HTMLResponse)
+async def list_videos(request: Request, current_user: User = Depends(get_current_user_from_cookie)):
+    # Reconstruct the credentials from the stored dictionary
+    user_creds = Credentials.from_authorized_user_info(current_user.youtube_credentials)
+    user_moderator.youtube_service = googleapiclient.discovery.build(
+        "youtube", "v3", credentials=user_creds
+    )
+    
+    videos = user_moderator.get_channel_videos()
+    
+    return templates.TemplateResponse("videos.html", {
+        "request": request,
+        "current_user": current_user,
+        "videos": videos
+    })
+
+
+@router.get("/refresh_comments/{video_id}")
+async def refresh_video_comments(
+    request: Request, 
+    video_id: str, 
+    threshold: float = 0.55
+):
+    """
+    Refresh comments for a specific video, reapplying moderation.
+    
+    :param request: Request object
+    :param video_id: ID of the video to refresh comments for
+    :param threshold: Gambling confidence threshold
+    :return: Rendered template with updated comments
+    """
+    # Get current user's credentials
+    current_user = get_current_user_from_cookie(request)
+    
+    if not current_user:
+        return RedirectResponse(url="/login", status_code=303)
+    
+    try:
+        # Recreate moderator with current user's credentials
+        user_creds = Credentials.from_authorized_user_info(current_user.youtube_credentials)
+        
+        
+        user_moderator.youtube_service = googleapiclient.discovery.build(
+            "youtube", "v3", 
+            credentials=user_creds
+        )
+        
+        # Moderate comments for the video
+        result = user_moderator.moderate_video_comments(video_id, threshold)
+        
+        # Fetch video details to pass to template
+        youtube_service = googleapiclient.discovery.build(
+            "youtube", "v3", 
+            credentials=user_creds
+        )
+        video_request = youtube_service.videos().list(
+            part="snippet",
+            id=video_id
+        )
+        video_response = video_request.execute()
+        video_info = video_response['items'][0]['snippet'] if video_response['items'] else {}
+        
+        return templates.TemplateResponse("video_comments.html", {
+            "request": request,
+            "video": {
+                "id": video_id,
+                "title": video_info.get('title', 'Unknown Video')
+            },
+            "safe_comments": result.get('safe_comments', []),
+            "flagged_comments": result.get('gambling_comments', []),
+            "total_comments": result.get('total_comments', 0)
+        })
+    
+    except Exception as e:
+        logging.error(f"Error refreshing comments: {e}")
+        return templates.TemplateResponse("error.html", {
+            "request": request,
+            "error": f"Failed to refresh comments: {str(e)}"
+        })
+
+
+@router.post("/moderate_video")
+async def moderate_video(request: Request, video_id: str = Form(...), threshold: float = Form(0.55)):
+    if not user_moderator.youtube_service:
+        result = {"error": "YouTube service not authenticated. Please authenticate first."}
+    else:
+        result = user_moderator.moderate_video_comments(video_id, threshold)
+    
+    return templates.TemplateResponse("index.html", {
+        "request": request,
+        "result": result,
+        "video_id": video_id,
+        "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))
+        }
+    })
+
+@router.delete("/api/comments/{comment_id}")
+async def api_delete_comment(
+    request: Request, 
+    comment_id: str,
+    video_id: str
+):
+    current_user = get_current_user_from_cookie(request)
+    user_creds = Credentials.from_authorized_user_info(current_user.youtube_credentials)
+
+    user_moderator.youtube_service = googleapiclient.discovery.build(
+        "youtube", "v3", 
+        credentials=user_creds
+    )
+    success = user_moderator.delete_comment(comment_id)
+    return {"success": success}
+
+@router.get("/video/{video_id}", response_class=HTMLResponse)
+async def moderate_video_comments(
+    request: Request, 
+    video_id: str, 
+    current_user: User = Depends(get_current_user_from_cookie)
+):
+    # Reconstruct the Credentials object from the stored dict
+    user_creds = Credentials.from_authorized_user_info(current_user.youtube_credentials)
+    
+    user_moderator.youtube_service = googleapiclient.discovery.build(
+        "youtube", "v3", 
+        credentials=user_creds
+    )
+    
+    moderation_results = user_moderator.moderate_video_comments(video_id)
+    
+    return templates.TemplateResponse("video_comments.html", {
+        "request": request,
+        "current_user": current_user,
+        "video": {"id": video_id, "title": "Sample Video Title"},  # Optionally fetch actual title
+        "safe_comments": moderation_results.get('safe_comments', []),
+        "flagged_comments": moderation_results.get('gambling_comments', [])
+    })

app/services/gambling_filter.py

@@ -0,0 +1,293 @@
+
+import re
+import time
+import os
+import logging
+from typing import List, Dict, Optional, Set, Tuple
+
+import unicodedata
+import unidecode
+
+import io
+import pandas as pd
+import json
+
+# 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__)
+
+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: Set[str] = {
+            'agustoto', 'aero', 'aero88', 'dora', 'dora77', 'dewadora', 'pulau777', 'pulau', '777',
+            'jptogel', 'mandalika', 'cnd88', 'axl', 'berkah99', 'weton88', 'garuda', 'hoki'
+        }
+        
+        self._gambling_terms: Set[str] = {
+            '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: Set[str] = {
+            'auto', 'main', 'bermain', 'hasil', 'dapat', 'dapet', 'berkat'
+        }
+        
+        self._safe_indicators: Set[str] = {
+            'tidak mengandung', 'bukan perjudian', 'tanpa perjudian',
+            'dokumentasi', 'profesional', 'pembelajaran'
+        }
+        
+        self._gambling_contexts: List[str] = [
+            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)
+            # strict = ''.join(f'[{c.upper()}{c.lower()}][^a-zA-Z0-9]*' for c in chars[:-1]) + f'[{chars[-1].upper()}{chars[-1].lower()}]'
+            # flexible = '.*?'.join(re.escape(c) for c in chars)
+            # platform_patterns.append(f'({strict})')
+            # platform_patterns.append(f'({flexible})')
+            chars = list(platform)  # e.g. ['p', 'u', 'l', 'a', 'u']
+            # Each letter can be followed by up to 3 non-alphanumeric chars:
+            # (or fewer if you want to be more strict)
+            segments = [
+                f'[{c.upper()}{c.lower()}][^a-zA-Z0-9]{{0,3}}'
+                for c in chars[:-1]
+            ]
+            # Then the last char without trailing non-alphanumerics
+            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:
+        result = []
+        for c in text:
+            if c.isalnum() or c.isspace():
+                result.append(c.lower())
+        return ''.join(result)
+        
+    def _aggressive_normalize_text(self, text: str) -> str:
+        normalized = unicodedata.normalize('NFKD', text)
+        ascii_text = ''.join(c for c in normalized if ord(c) < 128)
+        return ascii_text.lower()
+    
+
+
+    def _robust_normalize(self, text: str) -> str:
+        """
+        1) Replace visually-similar letters (Cyrillic/Greek) with Latin equivalents.
+        2) Then use unidecode to handle bold/italic forms, fullwidth, etc.
+        3) Lowercase the result.
+        """
+        # Step 1: custom pass for visual lookalikes
+        mapped_chars = []
+        for ch in text:
+            if ch in VISUAL_MAP:
+                mapped_chars.append(VISUAL_MAP[ch])
+            else:
+                mapped_chars.append(ch)
+        mapped_text = ''.join(mapped_chars)
+        
+        # Step 2: apply normal Unicode decomposition + unidecode
+        # This handles bold/italic/mathematical letters, fullwidth forms, etc.
+        decomposed = unicodedata.normalize('NFKD', mapped_text)
+        ascii_equiv = unidecode.unidecode(decomposed)
+        
+        # Step 3: lowercase the result
+        return ascii_equiv.lower()
+
+
+    def _extract_platform_names(self, text: str) -> List[str]:
+        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[bool, Dict]:
+        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.lower():
+                metrics['safe_indicators'].append(indicator)
+        
+        if len(metrics['safe_indicators']) > 0:
+            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.lower() or 
+                term in stripped_text.lower() or 
+                term in aggressive_text.lower()):
+                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.lower() or "berkah" in aggressive_text.lower()) and \
+           ("rezeki" in normalized_text.lower() or "rezeki" in aggressive_text.lower()) and \
+           len(metrics['platform_matches']) > 0:
+            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.lower() or "puji" in aggressive_text.lower()) and \
+             ("syukur" in normalized_text.lower() or "syukur" in aggressive_text.lower()) and \
+             len(metrics['platform_matches']) > 0:
+            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[str], threshold: float = 0.55) -> Dict[str, List]:
+        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
+

app/services/youtube_moderator.py

@@ -0,0 +1,200 @@
+import re
+import time
+import os
+import logging
+from typing import List, Dict, Optional, Set, Tuple
+
+import google_auth_oauthlib.flow
+import googleapiclient.discovery
+import googleapiclient.errors
+from google_auth_oauthlib.flow import Flow
+from google.oauth2.credentials import Credentials
+from googleapiclient.discovery import build
+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 google.oauth2.credentials import Credentials
+from pydantic import BaseModel
+
+
+from app.services.gambling_filter import GamblingFilter
+
+def get_credentials_from_session(session) -> Credentials:
+    """Utility to build a Credentials object from stored session data."""
+    creds_data = session.get("credentials")
+    if not creds_data:
+        return None
+    return Credentials(
+        token=creds_data["token"],
+        refresh_token=creds_data["refresh_token"],
+        token_uri=creds_data["token_uri"],
+        client_id=creds_data["client_id"],
+        client_secret=creds_data["client_secret"],
+        scopes=creds_data["scopes"]
+    )
+
+class YouTubeCommentModerator:
+    def __init__(self, 
+                 client_secrets_path: str = "./app/client_secret.json", 
+                 gambling_filter: Optional[GamblingFilter] = None):
+        """
+        Initialize the YouTube Comment Moderator with configurable settings.
+        
+        :param client_secrets_path: Path to OAuth 2.0 client secrets file
+        :param gambling_filter: Optional pre-configured GamblingFilter instance
+        """
+        # Setup logging
+        logging.basicConfig(
+            level=logging.INFO, 
+            format='%(asctime)s - [%(levelname)s] %(message)s',
+            datefmt='%Y-%m-%d %H:%M:%S'
+        )
+        self.logger = logging.getLogger(__name__)
+    
+        
+        # YouTube service
+        self.youtube_service = None
+        
+        # Gambling Filter
+        self.gambling_filter = gambling_filter or GamblingFilter()
+    
+    
+    def moderate_video_comments(self, video_id: str, threshold: float = 0.55) -> Dict:
+        if not self.youtube_service:
+            self.logger.error("YouTube service not authenticated.")
+            return {"error": "Not authenticated"}
+        
+        try:
+            comments = []
+            request = self.youtube_service.commentThreads().list(
+                part="snippet",
+                videoId=video_id,
+                maxResults=100,
+                textFormat="plainText"
+            )
+            response = request.execute()
+            
+            moderation_results = {
+                "total_comments": 0,
+                "gambling_comments": [],
+                "safe_comments": [],
+                "moderation_metrics": []
+            }
+            
+            while request is not None:
+                for item in response.get("items", []):
+                    comment_id = item["snippet"]["topLevelComment"]["id"]
+                    comment_snippet = item["snippet"]["topLevelComment"]["snippet"]
+                    comment_text = comment_snippet["textDisplay"]
+                    
+                    # Check for manual override first
+                    if manual_overrides.get((video_id, comment_id)) == "safe":
+                        # The user previously pressed "Keep" - skip the gambling filter
+                        is_gambling = False
+                        metrics = {"confidence_score": 0.0}
+                    else:
+                        # Normal path - filter it
+                        is_gambling, metrics = self.gambling_filter.is_gambling_comment(comment_text, threshold)
+                    
+                    comment_info = {
+                        "id": comment_id,
+                        "text": comment_text,
+                        "author": comment_snippet["authorDisplayName"],
+                        "is_gambling": is_gambling,
+                        "metrics": metrics
+                    }
+                    
+                    moderation_results["total_comments"] += 1
+                    
+                    if is_gambling:
+                        moderation_results["gambling_comments"].append(comment_info)
+                    else:
+                        moderation_results["safe_comments"].append(comment_info)
+                    
+                    metrics["original_text"] = comment_text
+                    moderation_results["moderation_metrics"].append(metrics)
+                
+                # Handle pagination if available
+                request = self.youtube_service.commentThreads().list_next(request, response)
+                if request:
+                    response = request.execute()
+                else:
+                    break
+            
+            return moderation_results
+        
+        except Exception as e:
+            self.logger.error(f"Error moderating comments: {e}")
+            return {"error": str(e)}
+
+    
+    def delete_comment(self, comment_id: str) -> bool:
+        """
+        Delete a specific comment.
+        
+        :param comment_id: YouTube comment ID
+        :return: Boolean indicating successful deletion
+        """
+        try:
+            
+            # self.youtube_service.comments().delete(id=comment_id).execute()
+            self.youtube_service.comments().setModerationStatus(
+                id=comment_id,
+                moderationStatus="rejected"
+            ).execute()
+            self.logger.info(f"Comment {comment_id} deleted successfully.")
+            return True
+        except Exception as e:
+            self.logger.error(f"Failed to delete comment {comment_id}: {e}")
+            return False
+    
+    def get_channel_videos(self, max_results: int = 50) -> List[Dict]:
+        """
+        Retrieve videos from authenticated user's channel.
+        
+        :param max_results: Maximum number of videos to retrieve
+        :return: List of video details
+        """
+        if not self.youtube_service:
+            self.logger.error("YouTube service not authenticated.")
+            return []
+        
+        try:
+            request = self.youtube_service.search().list(
+                part="snippet",
+                channelId=self._get_channel_id(),
+                maxResults=max_results,
+                type="video"
+            )
+            response = request.execute()
+            
+            videos = []
+            for item in response.get("items", []):
+                video_info = {
+                    "id": item["id"]["videoId"],
+                    "title": item["snippet"]["title"],
+                    "thumbnail": item["snippet"]["thumbnails"]["default"]["url"]
+                }
+                videos.append(video_info)
+            
+            return videos
+        except Exception as e:
+            self.logger.error(f"Error retrieving videos: {e}")
+            return []
+    
+    def _get_channel_id(self) -> Optional[str]:
+        """
+        Retrieve the authenticated user's channel ID.
+        
+        :return: Channel ID or None
+        """
+        try:
+            request = self.youtube_service.channels().list(part="id", mine=True)
+            response = request.execute()
+            return response["items"][0]["id"]
+        except Exception as e:
+            self.logger.error(f"Error retrieving channel ID: {e}")
+            return None
+        

app/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>

app/templates/index.html

@@ -1,10 +1,519 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <title>FastAPI + Google OAuth2 Example</title>
+  <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>
-    <h1>Welcome to the FastAPI + Google OAuth2 Example</h1>
-    <p>Please <a href="/login">Login with Google</a> to see your YouTube channels.</p>
+  <!-- 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>
+</html>

app/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="/auth" method="get">
+            <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>

app/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 %}

app/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 %}