Fresh upload with LFS

.gitattributes

@@ -0,0 +1,2 @@
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,13 @@
+# Ignore the virtual environment folder
+.venv/
+venv/
+env/
+
+# Ignore compiled python files (junk)
+__pycache__/
+*.pyc
+
+# Ignore environment variables (sensitive passwords/keys)
+.env
+
+alisto_project/backend/models/roberta_model/

alisto_project/Dockerfile

@@ -0,0 +1,24 @@
+# Use Python 3.9
+FROM python:3.9
+
+# Set up the folder
+WORKDIR /code
+
+# Copy requirements and install them
+COPY ./requirements.txt /code/requirements.txt
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+# Copy all your code files
+COPY . .
+
+# Create a writable folder for the AI model to download into
+# (Hugging Face requires this permission step)
+RUN mkdir -p /tmp/cache
+RUN chmod 777 /tmp/cache
+ENV TRANSFORMERS_CACHE=/tmp/cache
+
+# Give permission to run the start script
+RUN chmod +x /code/start.sh
+
+# Start the "All-in-One" script
+CMD ["/code/start.sh"]

alisto_project/backend/app.py

@@ -0,0 +1,210 @@
+import os
+import csv
+import io
+from flask import Flask, render_template, jsonify, request, Response, redirect, url_for
+from flask_cors import CORS
+from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user
+from werkzeug.security import generate_password_hash, check_password_hash
+from sqlalchemy import func
+from models import db, DisasterPost
+
+# 1. CONFIG: FLAT STRUCTURE (Look in current directory '.')
+# initializes the Flask application
+app = Flask(__name__, static_url_path='', static_folder='.', template_folder='.')
+# sets a secret key for session management and security
+app.secret_key = "alisto_secret_key_secure" 
+
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+DB_PATH = os.path.join(BASE_DIR, 'alisto.db')
+# configures the application to use the SQLite database
+app.config['SQLALCHEMY_DATABASE_URI'] = f'sqlite:///{DB_PATH}'
+# disables modification tracking to save resources
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+# enables Cross-Origin Resource Sharing for API requests
+CORS(app)
+# initializes the SQLAlchemy database object with the Flask app
+db.init_app(app)
+
+# 2. AUTH CONFIG
+# initializes Flask-Login manager for user session handling
+login_manager = LoginManager()
+login_manager.init_app(app)
+# sets the default view for unauthenticated users
+login_manager.login_view = 'login_page' 
+
+# defines the User model for database and login functionality
+class User(UserMixin, db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(100), unique=True)
+    password = db.Column(db.String(100))
+
+# flask-Login callback to reload the user object from the user ID stored in the session
+@login_manager.user_loader
+def load_user(user_id):
+    return User.query.get(int(user_id))
+
+# creates the default 'admin' user if it does not already exist in the database
+def create_admin():
+    with app.app_context():
+        db.create_all()
+        if not User.query.filter_by(username='admin').first():
+            hashed = generate_password_hash('admin123', method='pbkdf2:sha256')
+            db.session.add(User(username='admin', password=hashed))
+            db.session.commit()
+            print("✅ Admin Created: admin / admin123")
+
+# 3. ROUTES
+
+# route to display the login page template
+@app.route('/login')
+def login_page():
+    if current_user.is_authenticated:
+        return redirect(url_for('index'))
+    return render_template('login.html')
+
+# route to display the main dashboard (requires login)
+@app.route('/')
+@login_required 
+def index():
+    return render_template('index.html')
+
+# route to display the live map view (requires login)
+@app.route('/map')
+@login_required
+def map_view():
+    return render_template('map.html')
+
+# --- API ROUTES ---
+# api endpoint for user authentication via POST request
+@app.route('/api/login', methods=['POST'])
+def login_api():
+    data = request.get_json()
+    user = User.query.filter_by(username=data.get('username')).first()
+    # checks hashed password and logs the user in on success
+    if user and check_password_hash(user.password, data.get('password')):
+        login_user(user)
+        return jsonify({"message": "Success"})
+    return jsonify({"message": "Invalid credentials"}), 401
+
+# api endpoint for logging out the current user
+@app.route('/api/logout')
+@login_required
+def logout():
+    logout_user()
+    return redirect(url_for('login_page'))
+
+# api endpoint to fetch filtered, sorted, and paginated disaster posts
+@app.route('/api/posts')
+@login_required
+def get_posts():
+    search_query = request.args.get('query')
+    sort_order = request.args.get('sort', 'newest')
+    view_mode = request.args.get('view', 'active')
+    urgency_filter = request.args.get('urgency', 'all')
+    type_filter = request.args.get('type', 'all')
+    assist_filter = request.args.get('assist', 'all') 
+    
+    posts_query = DisasterPost.query
+    posts_query = DisasterPost.query
+
+    # applies full-text search filter across title, content, and location
+    if search_query:
+        pattern = f"%{search_query}%"
+        posts_query = posts_query.filter(DisasterPost.title.ilike(pattern) | DisasterPost.content.ilike(pattern) | DisasterPost.location.ilike(pattern))
+    
+    # --- MODIFIED VIEW MODE FILTER LOGIC ---
+    # filters to show only resolved/archived posts
+    if view_mode == 'archived': 
+        posts_query = posts_query.filter(DisasterPost.status == 'Resolved')
+    
+    # filters to show only active (New or Verified) posts
+    elif view_mode == 'active': 
+        posts_query = posts_query.filter(DisasterPost.status.in_(['New', 'Verified']))
+    
+    # applies filter based on the 'urgency_level' parameter
+    if urgency_filter != 'all': posts_query = posts_query.filter(DisasterPost.urgency_level == urgency_filter)
+
+    # applies sorting by timestamp (newest or oldest)
+    if sort_order == 'oldest': posts_query = posts_query.order_by(DisasterPost.timestamp.asc())
+    else: posts_query = posts_query.order_by(DisasterPost.timestamp.desc())
+
+    # applies filter based on the 'urgency_level' parameter
+    if urgency_filter != 'all': posts_query = posts_query.filter(DisasterPost.urgency_level == urgency_filter)
+
+    # applies filter based on the 'disaster_type' parameter
+    if type_filter != 'all': posts_query = posts_query.filter(DisasterPost.disaster_type == type_filter)
+    # applies filter based on the 'assistance_type' parameter
+    if assist_filter != 'all': posts_query = posts_query.filter(DisasterPost.assistance_type == assist_filter)
+
+    # returns the first 100 posts matching the filters as a JSON array
+    return jsonify([p.to_dict() for p in posts_query.limit(100).all()])
+
+# api endpoint to update the status (New, Verified, Resolved) of a specific post ID
+@app.route('/api/posts/<int:post_id>/status', methods=['POST'])
+@login_required
+def update_status(post_id):
+    data = request.get_json()
+    post = DisasterPost.query.get(post_id)
+    # finds the post and updates its 'status' field
+    if post:
+        post.status = data.get('status')
+        db.session.commit()
+        return jsonify({"success": True})
+    return jsonify({"error": "Not found"}), 404
+
+# api endpoint to fetch statistics (counts by disaster type and urgency level) for charts
+@app.route('/api/stats')
+@login_required
+def get_stats():
+    # queries the count of active posts grouped by disaster type
+    disaster_counts = db.session.query(DisasterPost.disaster_type, func.count(DisasterPost.id)).filter(DisasterPost.status.in_(['New', 'Verified'])).group_by(DisasterPost.disaster_type).all()
+    # queries the count of active posts grouped by urgency level
+    urgency_counts = db.session.query(DisasterPost.urgency_level, func.count(DisasterPost.id)).filter(DisasterPost.status.in_(['New', 'Verified'])).group_by(DisasterPost.urgency_level).all()
+    # returns both sets of counts as a single JSON object
+    return jsonify({"disaster_types": dict(disaster_counts), "urgency_levels": dict(urgency_counts)})
+
+# api endpoint to export the full post database as a CSV file
+@app.route('/api/export')
+@login_required
+def export_csv():
+    # queries ALL posts in the database, regardless of status
+    posts = DisasterPost.query.order_by(DisasterPost.timestamp.desc()).all()
+    
+    output = io.StringIO()
+    writer = csv.writer(output)
+    
+    # writes the header row with all necessary triage columns
+    writer.writerow([
+        'ID', 'Time', 'Location', 'Contact Number', 
+        'Disaster Type', 'Assistance Type', 'Urgency', 'Status', 'Content'
+    ])
+    
+    # iterates through posts and writes data rows to the CSV output stream
+    for p in posts: 
+        writer.writerow([
+            p.id, 
+            p.timestamp, 
+            p.location, 
+            p.contact_number, 
+            p.disaster_type, 
+            p.assistance_type,
+            p.urgency_level, 
+            p.status,
+            p.content
+        ])
+        
+    output.seek(0)
+    # returns the CSV data as an attachment for download
+    return Response(output, mimetype="text/csv", headers={"Content-Disposition": "attachment;filename=alisto_full_report.csv"})
+
+# api endpoint to check the current user's authentication status and return their username
+@app.route('/api/user_status')
+def user_status():
+    if current_user.is_authenticated:
+        return jsonify({"is_logged_in": True, "username": current_user.username})
+    return jsonify({"is_logged_in": False})
+
+# runs the application on host 0.0.0.0 and creates the admin user on startup
+if __name__ == '__main__':
+    create_admin()
+    app.run(debug=True, port=5000)

alisto_project/backend/augment_data.py

@@ -0,0 +1,172 @@
+import pandas as pd
+import os
+import random
+import re
+import my_generator as gen
+
+# Config
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+SEED_PATH = os.path.join(BASE_DIR, '../data/seed_data.txt')
+CSV_PATH = os.path.join(BASE_DIR, '../data/reddit_disaster_posts.csv')
+# sets the target total size of the final dataset
+TOTAL_ROWS = 5000 
+
+# ---------------------------------------------------------
+# 1. SLANG & AUGMENTATION LIBRARY
+# ---------------------------------------------------------
+# defines common Taglish words and their text-speak/slang equivalents
+SLANG_MAP = {
+    "tulong": ["help", "saklolo", "tulong po", "help pls"],
+    "kami": ["kmi", "kme", "tayo"],
+    "dito": ["d2", "dto", "here"],
+    "baha": ["flood", "tubig", "pagbaha"],
+    "rescue": ["save us", "pasundo", "saklolo"],
+    "please": ["pls", "plz", "paki", "parang awa nyo na"],
+    "wala": ["la", "wla", "zero"],
+    "sa": ["s", "sa may"],
+    "ang": ["ung", "yung", "ang"],
+    "hindi": ["di", "d", "hndi"],
+    "kayo": ["kau", "nyo"],
+    "may": ["meron", "my"],
+}
+
+# replaces common words with text-speak or slang based on SLANG_MAP
+def apply_slang(text):
+    words = text.split()
+    new_words = []
+    for word in words:
+        lower_word = word.lower().replace(".", "").replace("!", "")
+        if lower_word in SLANG_MAP and random.random() > 0.5:
+            new_words.append(random.choice(SLANG_MAP[lower_word]))
+        else:
+            new_words.append(word)
+    return " ".join(new_words)
+
+# randomly swaps two adjacent words to simulate panic typing errors
+def shuffle_sentence(text):
+    words = text.split()
+    if len(words) > 3:
+        idx = random.randint(0, len(words) - 2)
+        words[idx], words[idx+1] = words[idx+1], words[idx]
+    return " ".join(words)
+
+# adds formatting noise (random caps, repetition, punctuation spam) to simulate distress
+def add_noise(text):
+    # 1. Random Caps
+    if random.random() > 0.7:
+        text = text.upper()
+    elif random.random() > 0.7:
+        text = text.lower()
+        
+    # 2. Urgent Repetition (for positives)
+    if "help" in text.lower() or "tulong" in text.lower():
+        if random.random() > 0.7:
+            text = text + " TULONG!"
+            
+    # 3. Punctuation Spam
+    if random.random() > 0.6:
+        text += "!!" if random.random() > 0.5 else "..."
+        
+    return text
+
+# creates multiple variations of a single input text using all augmentation methods
+def generate_variations(text, num_variations=3):
+    variations = [text] # Keep original
+    
+    for _ in range(num_variations):
+        # Method A: Slang
+        var = apply_slang(text)
+        # Method B: Noise
+        var = add_noise(var)
+        # Method C: Shuffle (rarely)
+        if random.random() > 0.8:
+            var = shuffle_sentence(var)
+            
+        variations.append(var)
+    
+    return list(set(variations)) # Unique only
+
+# ---------------------------------------------------------
+# 2. CORE LOGIC
+# ---------------------------------------------------------
+# cleans and loads the initial seed data from the text file
+def clean_and_load_seed_data(filepath):
+    if not os.path.exists(filepath):
+        print(f"⚠️ Warning: {filepath} not found.")
+        return []
+
+    with open(filepath, 'r', encoding='utf-8') as f:
+        content = f.read()
+
+    # removes internal tags or bracketed information
+    pattern = re.compile(r"\[.*?\]")
+    content = pattern.sub("", content)
+
+    clean_rows = []
+    raw_lines = content.split('\n')
+    buffer = ""
+
+    for line in raw_lines:
+        line = line.strip()
+        if not line: continue
+
+        # checks for the classification label at the end of the line
+        if line.endswith('|0') or line.endswith('|1'):
+            full_line = (buffer + " " + line).strip()
+            try:
+                text, label = full_line.rsplit('|', 1)
+                clean_rows.append({'text': text.strip(), 'label': int(label)})
+            except: pass
+            buffer = ""
+        else:
+            buffer += line + " "
+            
+    return clean_rows
+
+# main function to orchestrate the data augmentation and saving process
+def create_database():
+    print("--- ALISTO: Phase 2 Data Augmentation (Lean & Mean Mode) ---")
+    
+    # 1. Load Seed Data
+    seed_rows = clean_and_load_seed_data(SEED_PATH)
+    print(f"🌱 Loaded {len(seed_rows)} original seed rows.")
+
+    # 2. MULTIPLY SEED DATA
+    final_rows = []
+    print("🧬 Cloning and mutating seed data...")
+    # generates multiple variations for each original seed row
+    for row in seed_rows:
+        # Generate 8 variations per real row
+        variations = generate_variations(row['text'], num_variations=8)
+        for var in variations:
+            final_rows.append({'text': var, 'label': row['label']})
+            
+    print(f"   ↳ Expanded seed data to {len(final_rows)} rows.")
+
+    # 3. Fill the rest with Synthetic Templates
+    # calculates how many synthetic rows are needed to meet the TOTAL_ROWS target
+    remaining = TOTAL_ROWS - len(final_rows)
+    
+    # generates synthetic positive and negative posts using my_generator
+    if remaining > 0:
+        print(f"🤖 Generating {remaining} TRICKY synthetic rows to fill dataset...")
+        for _ in range(remaining // 2):
+            final_rows.append({'text': add_noise(gen.build_positive()), 'label': 1})
+            final_rows.append({'text': add_noise(gen.build_negative()), 'label': 0})
+    else:
+        print("🤖 Seed data expansion is sufficient. Skipping synthetic generation.")
+
+    # 4. Save
+    df = pd.DataFrame(final_rows)
+    # shuffles the dataset and removes duplicates before saving
+    final_df = df.sample(frac=1).reset_index(drop=True)
+    final_df.drop_duplicates(subset=['text'], inplace=True)
+    
+    # saves the final dataset to a CSV file
+    final_df.to_csv(CSV_PATH, index=False)
+    print(f"✅ Success! Saved {len(final_df)} rows to {CSV_PATH}")
+    print("   (Note: Dataset is optimized for quality over quantity)")
+
+# executes the main function when the script is run
+if __name__ == "__main__":
+    create_database()

alisto_project/backend/index.html

@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ALISTO</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="login-modal" class="modal-overlay hidden">
+        <div class="modal-content small-modal">
+            <div class="modal-header">
+                <h2>Responder Login</h2>
+                <button id="close-login-btn" class="icon-btn-ghost"><i class="fa-solid fa-xmark"></i></button>
+            </div>
+            <div class="login-form">
+                <input type="text" id="username" placeholder="Username" class="login-input">
+                <input type="password" id="password" placeholder="Password" class="login-input">
+                <button id="login-submit-btn" class="action-btn resolve-btn full-width">Log In</button>
+                <p id="login-error" style="color: #ff4444; margin-top: 10px; font-size: 0.9em;"></p>
+            </div>
+        </div>
+    </div>
+    
+    <div id="logout-modal" class="modal-overlay hidden">
+        <div class="modal-content" style="max-width: 400px; text-align: center;">
+            <div class="modal-header" style="justify-content: center; margin-bottom: 10px;">
+                <h2 style="color: #ed4801;">Confirm Logout</h2>
+            </div>
+            <p style="color: #ccc; margin-bottom: 30px;">Are you sure you want to end your session?</p>
+            
+            <div class="action-buttons" style="justify-content: center; gap: 15px;">
+                <button id="cancel-logout-btn" class="action-btn" style="background: #444; padding: 10px 20px;">Cancel</button>
+                <button id="confirm-logout-btn" class="action-btn confirm-btn" style="padding: 10px 20px;">Yes, Logout</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="new-alert-notification" class="alert-popup hidden">
+        <i class="fa-solid fa-bell"></i> 
+        <span id="notification-message">New URGENT Alert Received!</span>
+    </div>
+    
+    <audio id="alert-sound" src="https://assets.mixkit.co/active_storage/sfx/2869/2869-preview.mp3" preload="auto"></audio>
+
+    <div id="stats-modal" class="modal-overlay hidden">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>Situation Report</h2>
+                <button id="close-stats-btn" class="icon-btn-ghost"><i class="fa-solid fa-xmark"></i></button>
+            </div>
+            <div class="charts-container">
+                <div class="chart-wrapper">
+                    <h3>Active Incidents by Type</h3>
+                    <canvas id="typeChart"></canvas>
+                </div>
+                <div class="chart-wrapper">
+                    <h3>Urgency Breakdown</h3>
+                    <canvas id="urgencyChart"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <header class="main-header">
+        <div class="logo">
+            <span class="logo-main">ALISTO</span> 
+            <span class="logo-sub">Alert System</span>
+        </div>
+
+        <div class="search-container">
+            <i class="fa-solid fa-xmark clear-icon hidden"></i>
+            <input type="text" placeholder="Search incidents..." class="search-input">
+            <i class="fa-solid fa-magnifying-glass search-icon clickable" data_tooltip="Search"></i>
+        </div>
+        
+        <nav class="main-nav">
+            <a href="index.html" class="nav-link active" data_tooltip="Go to Posts">Dashboard</a>
+            <a href="map.html" class="nav-link" data_tooltip="Go to Live Map">Live Map</a>
+            <a href="#" id="nav-login-btn" class="nav-link" style="color: #ed4801;">Login</a>
+            
+            <div class="profile-container" id="profile-container-wrap" style="display: none;">
+                
+                <div id="profile-toggle" class="profile-icon">
+                    <i class="fa-solid fa-user"></i> 
+                </div>
+
+                <div id="profile-dropdown" class="profile-dropdown hidden">
+                    <div class="profile-info-header">
+                        <div class="profile-icon-large">
+                            <i class="fa-solid fa-user"></i>
+                        </div>
+                        <div id="dropdown-username" class="dropdown-username">Officer ID</div>
+                    </div>
+                    
+                    <hr class="dropdown-separator">
+                    
+                    <button id="dropdown-logout-btn" class="dropdown-logout-btn">
+                        <i class="fa-solid fa-right-from-bracket"></i> Logout
+                    </button>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <section class="hero">
+        
+        <div class="sidebar-wrapper">
+            <div class="filter-bar">
+                
+                <button id="show-stats-btn" class="pulse-btn" data_tooltip="View Real-time Alert Statistics" data_tooltip_align="left">
+                    <i class="fa-solid fa-chart-pie"></i>
+                </button>
+
+                <div class="separator"></div>
+                    
+                <div class="filter-bar-c">
+                    <div class="filter-bar-r">
+                        
+                        <div class="filter-wrap1" data_tooltip="Sort alerts by Time">
+                            <select id="sort-select" class="filter-select">
+                                <option value="newest" title="Hi">Newest</option>
+                                <option value="oldest">Oldest</option>
+                            </select>
+                        </div>
+
+                        <div class="filter-wrap2" data_tooltip="Filter by Urgency Level">
+                            <select id="urgency-select" class="filter-select">
+                                <option value="all">All Levels</option>
+                                <option value="High">High</option>
+                                <option value="Medium">Medium</option>
+                                <option value="Low">Low</option>
+                            </select>
+                        </div>
+
+                        <div class="filter-wrap3" data_tooltip="Filter alerts by status">
+                            <select id="view-select" class="filter-select">
+                                <option value="all">All Status</option>
+                                <option value="active">Active</option>
+                                <!-- <option value="active">Verified</option> -->
+                                <option value="archived">Resolved</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="filter-bar-r">
+                        <div class="filter-wrap4" data_tooltip="Filter by Disaster Type">
+                            <select id="type-select" class="filter-select">
+                                <option value="all">All Disaster Types</option>
+                                <option value="Flood">Flood</option>
+                                <option value="Typhoon">Typhoon</option>
+                                <option value="Earthquake">Earthquake</option>
+                                <option value="Fire">Fire</option>
+                                <option value="Volcano">Volcano</option>
+                                <option value="Landslide">Landslide</option>
+                                <option value="General Emergency">General</option>
+                            </select>
+                        </div>
+
+                        <div class="filter-wrap5" data_tooltip="Filter by Assistance Needed">
+                            <select id="assist-select" class="filter-select">
+                                <option value="all">All Assistances</option>
+                                <option value="Rescue">Rescue</option>
+                                <option value="Medical">Medical</option>
+                                <option value="Evacuation">Evacuation</option>
+                                <option value="Food/Water">Food/Water</option>
+                                <option value="General Assistance">General</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                
+                <button id="export-btn" class="icon-btn" data_tooltip="Download Report (CSV)">
+                    <i class="fa-solid fa-download"></i>
+                </button>
+
+            </div>
+
+            <div class="sidebar" id="incident-feed">
+                <p style="color: white; padding: 20px; text-align: center;">Loading alerts...</p>
+            </div>
+
+            <div class="active-alert-counter">
+                <span style="font-size: 0.9em; color: #ccc;">Active Alerts: </span>
+                <span id="dashboard-alert-count" style="font-weight: 700; color: #ffc107;">0</span> 
+            </div>
+            
+        </div>
+
+        <div class="detail-box" id="postInfo">
+            <div class="detail-header-r">
+                <h2 class="detail-title" id="detail-title">Select an Alert</h2>
+                
+                <div class="action-buttons">
+                    <button id="verify-btn" class="action-btn1 verify-btn" onclick="updateStatus('Verified')" data_tooltip="Mark this alert as Verified (Confirmed)">
+                        <i class="fa-solid fa-check"></i> 
+                        <span class="btn-text">Verify</span>
+                    </button>
+                    <button id="resolve-btn" class="action-btn1 resolve-btn" onclick="updateStatus('Resolved')" data_tooltip="Mark this alert as Resolved and dismiss">
+                        <i class="fa-solid fa-box-archive"></i> 
+                        <span class="btn-text">Resolve</span>
+                    </button>
+                    <a href="#" id="detail-link" target="_blank" class="detail-redirect" data_tooltip="Go to Reddit Post">
+                        <i class="fa-brands fa-reddit-alien"></i> Post
+                    </a>
+                </div>
+            </div>
+
+            <hr class="detail-line">
+
+            <div class="detail-important-r">
+                <div class="detail-row1-c"> 
+                    <div>
+                        <div class="detail-label" style="margin-top: 10px;">Assistance Needed</div>
+                        <div id="detail-assistance" style="color: #ed4801; font-weight: bold; text-transform: uppercase;">-</div>
+                    </div> 
+                    <div> 
+                        <div class="detail-label">Location / Address</div>
+                        <span id="detail-location" style="color: white;">-</span>
+                    </div>
+                    
+                    <div class="detail-row1-col2-r">
+                        <div class="contact-c">
+                            <div class="detail-label">Contact Person</div>
+                            <span id="detail-contact-name" style="color: white;">-</span>
+                        </div>
+
+                        <div class="contact-c">
+                            <div class="detail-label">Contact Number</div>
+                            <span id="detail-contact-number" style="color: white;">-</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div style="text-align: right;"> 
+                    <div class="detail-label">Posted</div>
+                    <div class="time" id="detail-time">_ mins ago at __:__ __</div>
+                    
+                    <!-- <div class="detail-label" style="margin-top: 10px;">Assistance Needed</div>
+                    <div id="detail-assistance" style="color: #ed4801; font-weight: bold; text-transform: uppercase;">-</div>  -moved above --> 
+
+                    <div class="detail-label" style="margin-top: 10px;">Status</div>
+                    <div id="detail-urgency" style="color: white;">-</div>
+                    <div id="detail-status" class="status-badge">New</div>
+                </div>
+            </div>
+
+            <div class="detail-content" id="detail-body">
+                Click on an alert from the sidebar to view full details here.
+            </div>
+        </div>
+
+    </section>
+
+    <script src="script.js"></script>
+</body>
+</html>

alisto_project/backend/ingest_reddit.py

@@ -0,0 +1,423 @@
+import asyncpraw
+import asyncio
+import os
+import torch
+import pickle
+import numpy as np
+import torch.nn.functional as F
+from datetime import datetime
+from dotenv import load_dotenv
+from flask import Flask
+from models import db, DisasterPost 
+from transformers import AutoTokenizer, AutoModelForSequenceClassification
+from ner_extractor import extract_entities
+
+# 1. Config & Setup
+# defines the subreddits to be monitored by the scraper
+SUBREDDITS = "AlistoSimulation"
+# SUBREDDITS = "Philippines+NaturalDisasters+DisasterUpdatePH+Assistance+Typhoon+AlistoSimulation"
+
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+# loads environment variables from .env file
+load_dotenv(os.path.join(BASE_DIR, '../.env'))
+
+# initializes the Flask application context for database access
+app = Flask(__name__)
+DB_PATH = os.path.join(BASE_DIR, 'alisto.db')
+app.config['SQLALCHEMY_DATABASE_URI'] = f'sqlite:///{DB_PATH}'
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+# sets a timeout for stable database connection
+app.config['SQLALCHEMY_ENGINE_OPTIONS'] = {'connect_args': {'timeout': 15}}
+db.init_app(app)
+
+# 2. Load Models
+print("Loading ALISTO Brains...")
+MODEL_DIR = os.path.join(BASE_DIR, 'models')
+ROBERTA_DIR = os.path.join(MODEL_DIR, 'roberta_model')
+TFIDF_PATH = os.path.join(MODEL_DIR, 'tfidf_ensemble.pkl')
+
+# A. RoBERTa (XLM-R Multilingual)
+# loads the RoBERTa tokenizer and sequence classification model (Context Expert)
+try:
+    tokenizer = AutoTokenizer.from_pretrained(ROBERTA_DIR)
+    roberta_model = AutoModelForSequenceClassification.from_pretrained(ROBERTA_DIR)
+    device = torch.device("cpu") # determines the device (CPU/GPU) for model execution
+    roberta_model.to(device)
+    roberta_model.eval()
+    print("✅ Context Expert (XLM-R) loaded")
+except Exception as e:
+    print(f"❌ Error loading RoBERTa: {e}")
+    exit()
+
+# B. TF-IDF (The Gatekeeper)
+# loads the pre-trained TF-IDF vectorizer and ensemble model (Gatekeeper)
+try:
+    with open(TFIDF_PATH, 'rb') as f:
+        tfidf_model = pickle.load(f)
+    print("✅ Gatekeeper (TF-IDF) loaded")
+except Exception as e:
+    print(f"❌ Error loading TF-IDF: {e}")
+    tfidf_model = None
+
+# 3. Reference Lists (Kept from your original)
+# list of Philippine locations used for basic geo-validation
+PHILIPPINE_LOCATIONS = [
+    "Philippines", "PH", "Luzon", "Visayas", "Mindanao", "Metro Manila", "NCR",
+    "Manila", "Quezon City", "Makati", "Taguig", "Pasig", "Mandaluyong", 
+    "Marikina", "Las Pinas", "Las Piñas", "Muntinlupa", "Caloocan", 
+    "Paranaque", "Parañaque", "Valenzuela", "Pasay", "Malabon", 
+    "Navotas", "San Juan", "Pateros",
+    "Cavite", "Naic", "Bacoor", "Imus", "Dasmarinas", "Dasmariñas", 
+    "General Trias", "Tagaytay", "Kawit", "Noveleta", "Rosario", "Tanza", 
+    "Silang", "Trece Martires", "Laguna", "Calamba", "Santa Rosa", "Binan", 
+    "Biñan", "San Pedro", "Cabuyao", "Los Banos", "Los Baños", "Rizal", 
+    "Antipolo", "Cainta", "Taytay", "San Mateo", "Binangonan", "Batangas",
+    "Bulacan", "Pampanga", "Tarlac", "Cebu", "Iloilo", "Tacloban", 
+    "Davao", "Cagayan", "Bicol", "Albay", "Isabela"
+]
+
+# function to process a single Reddit submission through all filters and save it
+async def process_post(post):
+    """handles logic for a single Reddit submission (filtering, AI, saving)"""
+    try:
+        full_text = f"{post.title} {post.selftext}"
+        
+        # A. Check for Duplicates & Credibility (Unchanged logic)
+        # checks for existing post ID in the database
+        with app.app_context():
+            exists = DisasterPost.query.filter_by(reddit_id=post.id).first()
+            if exists: return
+            # blocks posts from suspicious new/low-karma accounts
+            if not is_credible_user(post):
+                print(f"\n------------------- DEBUG REJECTION -------------------")
+                print(f"❌ REJECTED POST ID: {post.id} (Title: {post.title[:30]})")
+                print(f"REASON: Credibility Check (Account too new/Low Karma)") 
+                print(f"---------------------------------------------------------\n")
+                return
+                
+        # B. Logic Filter (First Defense) (Unchanged logic)
+        # runs simple keyword checks to filter news/financial/irrelevant content
+        is_bad, reason = is_news_or_irrelevant(full_text)
+        if is_bad:
+            print(f"\n------------------- DEBUG REJECTION -------------------")
+            print(f"❌ REJECTED POST ID: {post.id} (Title: {post.title[:30]})")
+            print(f"REASON: Logic Filter (Common Sense Layer) Categorized as: {reason}")
+            print(f"---------------------------------------------------------\n")
+            return
+
+        # C. AI Analysis (Unchanged logic)
+        # runs the cascade AI check (TF-IDF then RoBERTa)
+        is_urgent, score, source = predict_urgency(full_text)
+        if not is_urgent:
+            print(f"\n------------------- DEBUG REJECTION -------------------")
+            print(f"❌ REJECTED POST ID: {post.id} (Title: {post.title[:30]})")
+            print(f"REASON: AI Confidence too low Score: {score:.2%} (Source: {source})")
+            print(f"---------------------------------------------------------\n")
+            return
+
+        # D. Entity Extraction
+        # extracts location, contact number, and contact person name
+        ner_results = extract_entities(full_text)
+        locations = ner_results.get('locations', [])
+        contact_num = ner_results.get('contact', None)
+        contact_person_name = ner_results.get('contact_person_name', None)
+        
+        # E. Final Triage and Data Preparation
+        # assigns location and determines disaster/assistance type
+        location = locations[0] if locations else "Unknown Location"
+        disaster_type = get_disaster_type(full_text)
+        assistance_type = get_assistance_type(full_text)
+        
+        # 1. Calculate Dynamic Urgency (NEW)
+        # assigns High, Medium, or Low urgency based on severity keywords
+        dynamic_urgency = assign_dynamic_urgency(full_text)
+        
+        # 2. Finalize Author (Fallback Logic)
+        # defaults to Reddit username if no contact name is explicitly extracted
+        reddit_username = str(post.author) if post.author else "Unknown"
+        final_author = contact_person_name if contact_person_name else reddit_username
+        
+        # 3. Print Final Alert Confirmation
+        print(f"""------------------- ALERT SAVED -------------------\n🚨 ALERT ({score:.2%}): {disaster_type} in {location} Urgency: {dynamic_urgency} \n---------------------------------------------------------""")
+
+        # F. Single Database Creation and Commit
+        # creates and commits the final DisasterPost object to the database
+        new_post = DisasterPost(
+            reddit_id=post.id,
+            title=post.title,
+            content=post.selftext or post.title,
+            author=final_author,
+            location=location,
+            contact_number=contact_num,
+            disaster_type=disaster_type,
+            assistance_type=assistance_type,
+            urgency_level=dynamic_urgency,
+            is_help_request=True,
+            timestamp=datetime.utcfromtimestamp(post.created_utc)
+        )
+
+        with app.app_context():
+            db.session.add(new_post)
+            db.session.commit()
+
+    except Exception as e:
+        print(f"Post Processing Error for {post.id}: {e}")
+
+# validates if the extracted location is relevant to the Philippines
+def check_for_philippine_location(location_list):
+    if not location_list: return False
+    ph_locations = [loc.lower() for loc in PHILIPPINE_LOCATIONS]
+    for extracted_loc in location_list:
+        # Check partial match (e.g., "Marikina City" matches "Marikina")
+        for known_loc in ph_locations:
+            if known_loc in extracted_loc.lower() or extracted_loc.lower() in known_loc:
+                return True
+    return False
+
+# classifies the type of disaster based on severity keywords
+def get_disaster_type(text):
+    text_lower = text.lower()
+    mapping = {
+        "Earthquake": ["quake", "lindol", "shake", "aftershock"],
+        "Landslide": ["landslide", "guho", "mudslide", "natabunan"],
+        "Volcano": ["volcano", "lava", "ash", "magma", "taal", "mayon"],
+        "Fire": ["fire", "sunog", "burn", "smoke"],
+        "Typhoon": ["typhoon", "bagyo", "storm", "wind", "signal", "ulysses", "odette"],
+        "Flood": ["flood", "baha", "water", "river", "drown", "lubog", "taas ng tubig"]
+    }
+
+    for dtype, keywords in mapping.items():
+        if any(k in text_lower for k in keywords):
+            return dtype
+    return "General Emergency"
+
+# classifies the specific type of assistance needed (e.g., Medical, Rescue, Food)
+def get_assistance_type(text):
+    """determines the specific help needed using Nested Priority"""
+    text = text.lower()
+    
+    # --- 1. IMMEDIATE RESCUE (Life Threatening) ---
+    rescue_kw = [
+        "rescue", "saklolo", "trapped", "stuck", "stranded", 
+        "bubong", "roof", "boat", "bangka", "drowning", "lunod",
+        "di makalabas", "unable to leave"
+    ]
+    if any(k in text for k in rescue_kw):
+
+        critical_medical_override_kw = [
+            "bleeding", "unconscious", "head injury", "head wound", 
+            "severely bleeding", "stroke", "heart attack", "trauma"
+        ]
+        if any(k in text for k in critical_medical_override_kw):
+            return "Medical"
+        
+        return "Rescue" # if no critical medical keywords found
+
+    # --- 2. MEDICAL (Specific Needs/Ambulance) ---
+    # handles standalone medical needs if no rescue keywords were found
+    medical_kw = [
+        "medical", "doctor", "gamot", "medicine", "insulin", "dialysis", 
+        "hospital", "oxygen", "pregnant", "labor", "manganganak", "ambulance", 
+        "first aid", "pills", "medication"
+    ]
+    if any(k in text for k in medical_kw):
+        return "Medical"
+
+    # --- 3. EVACUATION (Shelter/Transport) ---
+    # classifies the need for temporary shelter or transport
+    evac_kw = [
+        "evacuate", "evacuation", "shelter", "center", "likas", "tents", 
+        "matutuluyan", "alis", "transportation", "walang matutuluyan"
+    ]
+    if any(k in text for k in evac_kw):
+        return "Evacuation"
+
+    # --- 4. FOOD & WATER (Logistics) ---
+    # classifies the need for essential supplies (food, water, formula)
+    food_kw = [
+        "food", "pagkain", "water", "tubig", "gutom", "hungry", "relief", 
+        "goods", "makakain", "inumin", "groceries", "supplies", "supply", "wala ng stock",
+        "gatas", "milk", "formula", "baby supplies", "ubos na", "wala na", "stock", "stock ng"
+    ]
+    if any(k in text for k in food_kw):
+        return "Food/Water"
+
+    return "General Assistance"
+
+
+# --- LOGIC FILTERS (The "Common Sense" Layer) ---
+# runs simple logic checks to filter out news reports and non-urgent context
+def is_news_or_irrelevant(text):
+    text_lower = text.lower()
+    
+    # 1. NEWS & REPORTS
+    news_indicators = [
+        "breaking:", "just in:", "news:", "update:", "report:", 
+        "casualties", "death toll", "according to", "reported that",
+        "suspension", "declared", "signal no", "public advisory",
+        "weather update", "volcano alert", "mmda", "pagasa"
+    ]
+    
+    # 2. MONEY / SELLING
+    financial_indicators = [
+        "gcash", "paypal", "budget", "loan", "selling", 
+        "fundraising", "donate", "send funds"
+    ]
+    
+    # 3. IRRELEVANT CONTEXT
+    irrelevant_contexts = [
+        "how can i help", "where to donate", "thoughts and prayers",
+        "keep safe", "god bless", "praying for", "discussion:", "opinion:"
+    ]
+    
+    # Logic Checks
+    if any(ind in text_lower for ind in news_indicators):
+        return True, "News/Report"
+        
+    # blocks financial requests unless life-threatening keywords are also present
+    has_financial = any(ind in text_lower for ind in financial_indicators)
+    is_life_death = any(k in text_lower for k in ["trapped", "lubog", "roof", "rescue", "drowning", "stuck"])
+    
+    if has_financial and not is_life_death:
+        return True, "Financial/Non-Urgent"
+
+    # blocks posts containing non-urgent discussion or commentary
+    if any(ctx in text_lower for ctx in irrelevant_contexts):
+        return True, "Context/NotUrgent"
+        
+    return False, None
+
+# runs the two-stage AI classification check (TF-IDF then RoBERTa)
+def predict_urgency(text):
+    
+    # 1. Gatekeeper (TF-IDF)
+    # quickly rejects posts with extremely low urgency confidence (below 10%)
+    if tfidf_model:
+        tfidf_probs = tfidf_model.predict_proba([text])[0]
+        tfidf_conf = tfidf_probs[1]
+        
+        # If the fast model is sure it's junk, skip the heavy lifting
+        if tfidf_conf < 0.20:
+            return False, tfidf_conf, "TF-IDF Reject"
+
+    # 2. Context Expert (RoBERTa)
+    # runs the slower, context-aware model for final classification
+    inputs = tokenizer(text, return_tensors="pt", truncation=True, padding=True, max_length=128)
+    with torch.no_grad():
+        outputs = roberta_model(**inputs)
+        probs = F.softmax(outputs.logits, dim=-1)
+        roberta_conf = probs[0][1].item() # Probability of 'Rescue Request'
+    
+    # final acceptance threshold (40%) for the RoBERTa model
+    return (roberta_conf > 0.4), roberta_conf, "RoBERTa"
+
+# assigns the final severity level (High, Medium, Low) based on severity keywords
+def assign_dynamic_urgency(text):
+    text_lower = text.lower()
+
+    # 1. HIGH URGENCY (Immediate Life-Threatening Event or Critical Medical Need)
+    high_keywords = [
+        "bleeding", "unconscious", "severely injured", "severe injury", "life threatening",
+        "insulin", "oxygen", "ambulance", "urgent medicine", "doctor", "hospital",
+        
+        "trap", "trapped", "bubong", "collapsed", "di mapigilan", "drowning", 
+        "lampas tao", "lubog", "delikado", "baha na", "mamatay"
+    ]
+    if any(k in text_lower for k in high_keywords):
+        return "High"
+
+    # 2. MEDIUM URGENCY (Time-Sensitive, Logistical Crisis)
+    medium_keywords = [
+        "stranded", "running out", "evacuate", "kailangan agad", "lowbat",
+        "paubos", "senior", "bedridden", "disabled", "gatas", "formula"
+    ]
+    if any(k in text_lower for k in medium_keywords):
+        return "Medium"
+
+    # 3. LOW URGENCY (General Supplies/Warning)
+    # posts that pass the AI but lack the above severity indicators fall here
+    return "Low"
+
+# blocks posts from accounts created less than 2 days ago or with negative karma
+def is_credible_user(post):
+    try:
+        author = post.author
+        
+        # checks if author is deleted or unknown
+        if not author: 
+            return False 
+
+        # 1. Check Account Age (Must be older than 2 days)
+        created_time = datetime.utcfromtimestamp(author.created_utc)
+        account_age = datetime.utcnow() - created_time
+        
+        if account_age.days < 2:
+            print(f"   ⚠️ Blocked: Account too new ({account_age.days} days)")
+            return False
+
+        # 2. Check Karma (Must not be negative)
+        total_karma = author.comment_karma + author.link_karma
+        if total_karma < -5:
+            print(f"   ⚠️ Blocked: Negative Karma ({total_karma})")
+            return False
+            
+        return True
+
+    except Exception as e:
+        # allows posts to pass if Reddit API fails to get user info
+        return True
+
+
+# 4. Main Scraper Loop
+# orchestrates the entire scraping process (historical scan + real-time stream)
+async def scrape_reddit():
+    print("Connecting to Reddit API...")
+
+    client_id = os.getenv("REDDIT_CLIENT_ID")
+    client_secret = os.getenv("REDDIT_CLIENT_SECRET")
+    
+    if not client_id or not client_secret:
+        print("❌ Error: Client ID or Secret missing in .env")
+        return
+
+    # initializes PRAW using the secure Client Credentials Flow (read-only)
+    reddit = asyncpraw.Reddit(
+        client_id=client_id,
+        client_secret=client_secret,
+        user_agent=os.getenv("REDDIT_USER_AGENT", "script:alisto_bot:v3.0")
+    )
+
+    try:
+        subreddit = await reddit.subreddit(SUBREDDITS)
+        print(f"👁️  ALISTO ACTIVE: Monitoring r/{SUBREDDITS}...")
+        
+        # --- PHASE 1: FETCH LATEST EXISTING POSTS (e.g., last 500) ---
+        print("🔍 Scanning last 500 posts for missed alerts...")
+        # iterates over the last 500 posts asynchronously
+        async for post in subreddit.new(limit=500):
+            await process_post(post) 
+        
+        print("✅ Historical scan complete")
+        
+        # --- PHASE 2: START REAL-TIME STREAM (Forever Loop) ---
+        print("📡 Starting real-time stream for new submissions...")
+        
+        # starts the continuous loop to monitor for new submissions
+        async for post in subreddit.stream.submissions(skip_existing=False):
+            await process_post(post) 
+
+    except Exception as e:
+        print(f"Global Scraper Error: {e}")
+    finally:
+        await reddit.close()
+        print("Scraper stopped")
+
+
+# executes the main scraping loop when the script is run
+if __name__ == "__main__":
+    try:
+        loop = asyncio.new_event_loop()
+        asyncio.set_event_loop(loop)
+        loop.run_until_complete(scrape_reddit())
+    except KeyboardInterrupt:
+        print("\n🛑 Stopped by user")

alisto_project/backend/init_db.py

@@ -0,0 +1,28 @@
+import os
+from flask import Flask
+from models import db
+
+app = Flask(__name__)
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+DB_PATH = os.path.join(BASE_DIR, 'alisto.db')
+app.config['SQLALCHEMY_DATABASE_URI'] = f'sqlite:///{DB_PATH}'
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+db.init_app(app)
+
+def reset_database():
+    print("--- RESETTING DATABASE ---")
+    
+    # 1. Delete the old file if it exists
+    if os.path.exists(DB_PATH):
+        os.remove(DB_PATH)
+        print(f"Deleted old database: {DB_PATH}")
+    else:
+        print("No old database found.")
+
+    # 2. Create fresh tables
+    with app.app_context():
+        db.create_all()
+        print("✅ Success: Created new empty 'alisto.db' with correct columns.")
+
+if __name__ == "__main__":
+    reset_database()

alisto_project/backend/login.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ALISTO | Command Login</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css"> 
+    <style>
+        /* Specific overrides for Login Page centering */
+        body.login-page {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            background: #121212 url('images/bg2-logan.jpg') center/cover no-repeat;
+        }
+        .login-card {
+            position: relative; z-index: 2;
+            background: rgba(30, 30, 30, 0.9);
+            padding: 40px;
+            border-radius: 15px;
+            border: 1px solid #ed4801;
+            width: 100%; max-width: 400px;
+            text-align: center;
+            box-shadow: 0 20px 50px rgba(0,0,0,0.8);
+        }
+        .overlay {
+            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(5px); z-index: 1;
+        }
+        input {
+            width: 100%; padding: 15px; margin-bottom: 15px;
+            background: rgba(255,255,255,0.1); border: 1px solid #444;
+            border-radius: 8px; color: white; font-size: 1rem; outline: none;
+        }
+        button {
+            width: 100%; padding: 15px;
+            background: linear-gradient(135deg, #ed4801, #ff7e42);
+            color: white; border: none; border-radius: 8px;
+            font-size: 1.1rem; font-weight: bold; cursor: pointer;
+        }
+    </style>
+</head>
+<body class="login-page">
+    <div class="overlay"></div>
+    
+    <div class="login-card">
+        <h1 style="color: #ed4801; font-family: 'Montserrat'; margin: 0;">ALISTO</h1>
+        <p style="color: #ccc; letter-spacing: 2px; font-size: 0.8em; text-transform: uppercase; margin-bottom: 30px;">Command Center</p>
+        
+        <p id="error-msg" style="color: #ff4444; font-size: 0.9em; min-height: 20px;"></p>
+        
+        <form id="loginForm">
+            <input type="text" id="username" placeholder="Officer ID" required>
+            <input type="password" id="password" placeholder="Password" required>
+            <button type="submit">Login</button>
+        </form>
+    </div>
+
+    <script>
+        document.getElementById('loginForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const u = document.getElementById('username').value;
+            const p = document.getElementById('password').value;
+            const btn = document.querySelector('button');
+            const err = document.getElementById('error-msg');
+
+            btn.innerText = "Authenticating...";
+            
+            try {
+                const res = await fetch('/api/login', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({username: u, password: p})
+                });
+                
+                if (res.ok) {
+                    window.location.href = "/"; 
+                } else {
+                    const data = await res.json();
+                    err.innerText = data.message || "Access Denied";
+                    btn.innerText = "ACCESS SYSTEM";
+                }
+            } catch (e) {
+                err.innerText = "Connection Failed";
+                btn.innerText = "ACCESS SYSTEM";
+            }
+        });
+    </script>
+</body>
+</html>

alisto_project/backend/map.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ALISTO | Live Map</title>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    
+    
+    <style>
+        /* Specific Map Page Styles */
+        body { overflow: hidden; }
+        
+        #map {
+            width: 100%;
+            height: 100vh;
+            z-index: 1;
+        }
+ 
+    </style>
+</head>
+<body>
+
+    <div class="map-sidebar">
+        <a href="index.html" class="back-btn">← Back to Dashboard</a>
+        <h1 style="font-family: Montserrat; color: #ed4801; margin-bottom: 5px;">LIVE MAP</h1>
+        <p style="font-size: 0.8em; color: #ccc;">Real-time disaster tracking</p>
+        <hr style="border: 0; border-top: 1px solid #555; margin: 15px 0;">
+        
+        <div id="status-text">Connecting to Alisto...</div>
+        
+        <div class="stat-item">
+            <span class="stat-highlight" id="alert-count">0</span> Active Alerts
+        </div>
+    </div>
+
+    <div id="map"></div>
+
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script src="map_script.js"></script>
+</body>
+</html>

alisto_project/backend/map_script.js

@@ -0,0 +1,219 @@
+// 1. EXTENDED COORDINATE DATABASE
+// defines a static database of coordinates for Philippine cities and provinces
+const cityCoords = {
+    // --- NCR ---
+    "Manila": [14.5995, 120.9842],
+    "Quezon City": [14.6760, 121.0437],
+    "Makati": [14.5547, 121.0244],
+    "Taguig": [14.5176, 121.0509],
+    "Pasig": [14.5763, 121.0851],
+    "Mandaluyong": [14.5794, 121.0359],
+    "Marikina": [14.6333, 121.0980],
+    "Las Pinas": [14.4445, 120.9939],
+    "Muntinlupa": [14.4081, 121.0415],
+    "Caloocan": [14.6401, 120.9745],
+    "Parañaque": [14.4793, 121.0198],
+    "Valenzuela": [14.7011, 120.9830],
+    "Pasay": [14.5378, 121.0014],
+    "Malabon": [14.6625, 120.9512],
+    "Navotas": [14.6732, 120.9350],
+    "San Juan": [14.6019, 121.0355],
+    "Pateros": [14.5454, 121.0687],
+
+    // --- CAVITE ---
+    "Cavite": [14.2831, 120.9168], 
+    "Naic": [14.3168, 120.7628], 
+    "Bacoor": [14.4624, 120.9645],
+    "Imus": [14.4297, 120.9367],
+    "Dasmarinas": [14.3294, 120.9367],
+    "General Trias": [14.3876, 120.8842],
+    "Tagaytay": [14.1153, 120.9621],
+    "Kawit": [14.4448, 120.9022],
+    "Noveleta": [14.4263, 120.8820],
+    "Rosario": [14.4153, 120.8532],
+    "Tanza": [14.3949, 120.8532],
+    "Silang": [14.2312, 120.9746],
+    "Trece Martires": [14.2883, 120.8677],
+
+    // --- LAGUNA ---
+    "Laguna": [14.2166, 121.1667],
+    "Calamba": [14.2142, 121.1553],
+    "Santa Rosa": [14.3121, 121.1132],
+    "Binan": [14.3400, 121.0827],
+    "San Pedro": [14.3644, 121.0370],
+    "Cabuyao": [14.2796, 121.1219],
+    "Los Banos": [14.1708, 121.2413],
+
+    // --- RIZAL ---
+    "Rizal": [14.5906, 121.2236],
+    "Antipolo": [14.5844, 121.1763],
+    "Cainta": [14.5760, 121.1213],
+    "Taytay": [14.5623, 121.1376],
+    "San Mateo": [14.6963, 121.1215],
+    "Binangonan": [14.4759, 121.1893],
+
+    // --- BULACAN ---
+    "Bulacan": [14.8524, 120.8228],
+    "Malolos": [14.8527, 120.8160],
+    "Meycauayan": [14.7356, 120.9622],
+    "San Jose del Monte": [14.8143, 121.0427],
+    "Bocaue": [14.8066, 120.9256],
+
+    // --- MAJOR PROVINCES / CITIES ---
+    "Pampanga": [15.0359, 120.6924],
+    "Tarlac": [15.4802, 120.5979],
+    "Batangas": [13.7565, 121.0583],
+    "Baguio": [16.4023, 120.5960],
+    "Cebu": [10.3157, 123.8854],
+    "Iloilo": [10.7202, 122.5621],
+    "Davao": [7.1907, 125.4553],
+    "Cagayan": [17.6133, 121.7302],
+    "Bicol": [13.4350, 123.4100],
+    "Albay": [13.1391, 123.7438],
+    "Tacloban": [11.2442, 125.0039],
+    "Zamboanga": [6.9214, 122.0790],
+    "Palawan": [9.8349, 118.7384],
+    "Mindoro": [13.0264, 121.2227],
+    "Isabela": [16.9754, 121.8107],
+    "Pangasinan": [15.9236, 120.3392],
+    "Philippines": [12.8797, 121.7740] // CENTER OF PH
+};
+
+let map;
+let markers = [];
+
+// initializes the map view and starts fetching data
+document.addEventListener("DOMContentLoaded", () => {
+    // sets the initial map center on the CALABARZON/NCR area
+    map = L.map('map').setView([14.40, 121.00], 10);
+
+    // adds the dark-themed tile layer to the map
+    L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+        attribution: '© OpenStreetMap © CARTO',
+        subdomains: 'abcd',
+        maxZoom: 19
+    }).addTo(map);
+
+    console.log("ALISTO Map: Loaded");
+    // fetches the first set of post data
+    fetchDataAndPlot();
+    // sets a timer to refresh data every 30 seconds
+    setInterval(fetchDataAndPlot, 30000);
+});
+
+// fetches the list of active disaster posts from the API
+function fetchDataAndPlot() {
+    fetch('/api/posts')
+        .then(response => response.json())
+        .then(data => {
+            // updates the alert count in the map sidebar
+            updateSidebar(data);
+            // plots the markers on the map
+            plotMarkers(data);
+        })
+        .catch(err => console.error("Map Fetch Error:", err));
+}
+
+// updates the displayed alert count and system status in the floating sidebar
+function updateSidebar(data) {
+    const countEl = document.getElementById('alert-count');
+    const statusEl = document.getElementById('status-text');
+    if(countEl) countEl.innerText = data.length;
+    if(statusEl) statusEl.innerText = "System Active";
+}
+
+// clears existing markers and plots new circular markers for each post
+function plotMarkers(posts) {
+    // removes all existing markers from the map
+    markers.forEach(m => map.removeLayer(m));
+    markers = [];
+
+    // iterates through all posts to find coordinates and draw markers
+    posts.forEach(async post => {
+        // asynchronously finds the latitude and longitude for the location
+        let coords = await getCoordinatesSmart(post.location);
+
+        if (coords) {
+            // sets color and size based on post urgency level
+            const urgencyColor = post.urgency_level === 'High' ? '#ff4444' : '#ed4801';
+            const radius = post.urgency_level === 'High' ? 14 : 8;
+
+            // creates and adds a circular marker (L.circleMarker) to the map
+            const circle = L.circleMarker(coords, {
+                color: urgencyColor,
+                fillColor: urgencyColor,
+                fillOpacity: 0.7,
+                radius: radius
+            }).addTo(map);
+
+            const timeStr = new Date(post.timestamp).toLocaleTimeString();
+            
+            // binds a detailed pop-up box to the circular marker
+            circle.bindPopup(`
+                <div style="font-family: 'Roboto', sans-serif; color: #333; min-width: 200px;">
+                    <strong style="text-transform:uppercase; color: #d32f2f; font-size: 1.1em;">
+                        ${post.disaster_type}
+                    </strong>
+                    
+                    <div style="color: #ed4801; font-weight: 700; font-size: 0.9em; margin-bottom: 4px; text-transform: uppercase;">
+                        ⚠ ${post.assistance_type || "General Help"}
+                    </div>
+
+                    <span style="font-size: 0.9em; color: #555;">📍 ${post.location}</span>
+                    
+                    <hr style="margin:8px 0; border:0; border-top:1px solid #ccc;">
+                    
+                    <div style="font-size: 0.9em; margin-bottom: 5px; font-weight: 500;">
+                        "${post.title}"
+                    </div>
+                    
+                    <small style="color: #888;">${timeStr}</small>
+                </div>
+            `);
+            // adds the new marker to the global array
+            markers.push(circle);
+        }
+    });
+}
+
+// --- NEW SMART FINDER (Hybrid: Static List + API) ---
+// function to look up coordinates, prioritizing the static list then Nominatim API
+async function getCoordinatesSmart(locationStr) {
+    if (!locationStr) return cityCoords["Philippines"];
+
+    // 1. Try Static List (Instant)
+    // direct match check
+    const exactMatch = Object.keys(cityCoords).find(k => k.toLowerCase() === locationStr.toLowerCase());
+    if (exactMatch) return cityCoords[exactMatch];
+
+    // fuzzy match check
+    const fuzzyKey = Object.keys(cityCoords).find(city => locationStr.toLowerCase().includes(city.toLowerCase()));
+    if (fuzzyKey) return cityCoords[fuzzyKey];
+
+    // 2. Try OpenStreetMap API (Dynamic)
+    // checks local cache before making a network request
+    if (!window.coordCache) window.coordCache = {};
+    if (window.coordCache[locationStr]) return window.coordCache[locationStr];
+
+    try {
+        console.log(`Fetching coords for: ${locationStr}...`);
+        // fetches coordinates from the Nominatim API
+        const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${locationStr}, Philippines`);
+        const data = await response.json();
+        
+        // processes and caches the result
+        if (data && data.length > 0) {
+            const lat = parseFloat(data[0].lat);
+            const lon = parseFloat(data[0].lon);
+            const result = [lat, lon];
+            window.coordCache[locationStr] = result;
+            return result;
+        }
+    } catch (e) {
+        console.error("Geocoding failed:", e);
+    }
+
+    // 3. Fallback
+    // returns the center of the Philippines if geocoding fails
+    return cityCoords["Philippines"];
+}

alisto_project/backend/models.py

@@ -0,0 +1,64 @@
+from flask_sqlalchemy import SQLAlchemy
+from datetime import datetime
+
+# initializes the SQLAlchemy object for the application
+db = SQLAlchemy()
+
+# defines the main data model for a scraped disaster post
+class DisasterPost(db.Model):
+    # sets the name of the database table
+    __tablename__ = 'posts'
+
+    # primary key for the table
+    id = db.Column(db.Integer, primary_key=True)
+    # unique ID from Reddit to prevent duplicates
+    reddit_id = db.Column(db.String(50), unique=True, nullable=False)
+    # title of the Reddit post
+    title = db.Column(db.String(300), nullable=False)
+    # full body content of the post
+    content = db.Column(db.Text, nullable=True)
+    # stores the contact person's name or Reddit username
+    author = db.Column(db.String(50), nullable=True)
+    # timestamp when the post was created (UTC)
+    timestamp = db.Column(db.DateTime, default=datetime.utcnow)
+    
+    # Intelligence Fields
+    # extracted location or address of the incident
+    location = db.Column(db.String(100), nullable=True) 
+    # extracted mobile or contact number
+    contact_number = db.Column(db.String(50), nullable=True) 
+    # AI-classified type of disaster (e.g., Flood, Fire)
+    disaster_type = db.Column(db.String(50), nullable=True)
+    # AI-classified specific assistance needed (e.g., Medical, Rescue)
+    assistance_type = db.Column(db.String(50), nullable=True)
+    # dynamically assigned severity level (High, Medium, Low)
+    urgency_level = db.Column(db.String(20), nullable=True)
+    # boolean flag indicating if the post is a help request
+    is_help_request = db.Column(db.Boolean, default=False)
+    
+    # Metadata
+    # operational status of the post (New, Verified, Resolved)
+    status = db.Column(db.String(20), default="New")
+
+    # converts the model object into a dictionary format for API responses
+    def to_dict(self):
+        # converts the timestamp to ISO 8601 format
+        iso_time = self.timestamp.isoformat()
+        # ensures the time string ends with 'Z' for standardized UTC representation
+        if not iso_time.endswith("Z"):
+            iso_time += "Z"
+
+        return {
+            "id": self.id,
+            "reddit_id": self.reddit_id,
+            "title": self.title,
+            "content": self.content,
+            "author": self.author,
+            "timestamp": iso_time, 
+            "location": self.location,
+            "contact_number": self.contact_number or "Check Post",
+            "disaster_type": self.disaster_type,
+            "assistance_type": self.assistance_type,
+            "urgency_level": self.urgency_level,
+            "status": self.status
+        }

alisto_project/backend/models/tfidf_ensemble.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d09e788d8ecc671cef44bcc67d2f0054b9937e68b27751459455fafbba541f8c
+size 405802

alisto_project/backend/my_generator.py

@@ -0,0 +1,72 @@
+import random
+
+# ---------------------------------------------------------
+# DATA POOLS
+# ---------------------------------------------------------
+# list of locations used for synthetic data generation
+LOCATIONS = [
+    "Manila", "Marikina", "Quezon City", "Pasig", "Cainta", "Rizal", 
+    "Bulacan", "Pampanga", "Cavite", "Batangas", "Laguna", "San Mateo",
+    "Montalban", "Antipolo", "Valenzuela", "Malabon", "Navotas", "Las Pinas",
+    "Taguig", "Makati", "Caloocan", "Muntinlupa", "Paranaque", "Pasay"
+]
+
+# list of disaster types used for synthetic data generation
+DISASTERS = [
+    "baha", "flood", "flooding", "tubig", 
+    "bagyo", "typhoon", "storm", "hangin", "ulan",
+    "sunog", "fire", "smoke", "apoy",
+    "lindol", "earthquake", "quake", "aftershock",
+    "landslide", "guho", "mudslide"
+]
+
+# list of critical keywords used in both urgent and non-urgent samples
+URGENT_KEYWORDS = [
+    "tulong", "help", "saklolo", "rescue", "emergency", "evacuate", 
+    "need food", "trapped", "stranded", "stuck", "lubog", "buntis"
+]
+
+# ---------------------------------------------------------
+# GENERATORS
+# ---------------------------------------------------------
+
+# generates a synthetic urgent post (positive sample)
+def build_positive():
+    kw = random.choice(URGENT_KEYWORDS)
+    disaster = random.choice(DISASTERS)
+    loc = random.choice(LOCATIONS)
+    
+    templates = [
+        f"{kw.upper()} please! {disaster} dito sa {loc}!",
+        f"{loc} need {kw}, {disaster} is rising!",
+        f"Kami po sa {loc} ay need ng {kw}, sobrang taas ng {disaster}!",
+        f"{kw.upper()}! {disaster} sa {loc}, di kami makalabas!",
+        f"Na-trap kami sa {loc} dahil sa {disaster}, {kw} please!",
+        f"{disaster} alert in {loc}, we need {kw} asap!",
+        f"Wala na kaming matatakbuhan sa {loc}, {disaster} na! {kw}!"
+    ]
+    return random.choice(templates)
+
+# generates a synthetic non-urgent post (negative sample/trap)
+def build_negative():
+    kw = random.choice(URGENT_KEYWORDS) # uses urgent keywords in a safe context
+    disaster = random.choice(DISASTERS)
+    loc = random.choice(LOCATIONS)
+    
+    category = random.choice(["news", "donation", "past", "question"])
+    
+    # templates that structure the urgent keyword as general news or a report
+    if category == "news":
+        return f"Update: {kw} operations for {disaster} victims in {loc} are ongoing."
+        
+    # templates that structure the urgent keyword as a donation or offering help
+    elif category == "donation":
+        return f"We are sending {kw} and relief goods to {loc}. Stay strong!"
+        
+    # templates that structure the urgent keyword using past tense
+    elif category == "past": 
+        return f"Remembering when we were {kw}ed during the last {disaster} in {loc}."
+        
+    # templates that structure the urgent keyword as a general question or advice
+    else: 
+        return f"Guys in {loc}, do you need {kw}? Comment below."

alisto_project/backend/ner_extractor.py

@@ -0,0 +1,105 @@
+from transformers import AutoTokenizer, AutoModelForTokenClassification, pipeline
+import re
+
+# Load NER model once
+model_name = "Davlan/xlm-roberta-base-ner-hrl"
+# loads the tokenizer for the multilingual NER model
+tokenizer = AutoTokenizer.from_pretrained(model_name, force_download=True)
+# loads the pre-trained token classification model (the NER engine)
+model = AutoModelForTokenClassification.from_pretrained(model_name, force_download=True)
+# creates a Hugging Face pipeline for easy entity recognition
+nlp = pipeline("ner", model=model, tokenizer=tokenizer, aggregation_strategy="simple")
+
+# function to extract the contact person's name using Regex
+def extract_contact_person_name(text):
+    # regex pattern to find name following contact/name keywords
+    name_pattern = re.compile(
+        r'(?:contact\s*person|contact\s*name|contact|name):\s*(.*?)(?=\s*(?:Mobile|Number|Needs|09\d{2}|[A-Z]{3,}:|\n|$))', 
+        re.IGNORECASE | re.DOTALL
+    )
+    
+    match = name_pattern.search(text)
+    if match:
+        # returns the captured name after removing parenthetical nicknames and periods
+        name = match.group(1).strip()
+        return re.sub(r'\s*\(.*\)\s*$', '', name).strip().rstrip('.')
+    return None
+
+# function to extract mobile or landline phone numbers using Regex
+def extract_contact_number(text):
+
+    # regex for common Philippine mobile and landline patterns
+    phone_pattern = re.compile(r'(09\d{2}\s?-?\s?\d{3}\s?-?\s?\d{4}|(?:\+63|63)?\d{10})')
+    
+    match = phone_pattern.search(text)
+    if match:
+        # returns the captured phone number
+        return match.group(0).strip()
+    return None
+
+# list of keywords often incorrectly classified as locations by the NER model
+NON_LOC_KEYWORDS = ["S.O.S", "PLS", "HELP", "URGENT", "ALERT", "LOCATION", "ADDRESS", "ASAP"]
+
+# function to extract the detailed address line by prioritizing explicit labels
+def extract_address_line(text):
+    # regex pattern to capture address text following keywords, stopping at noise or new lines
+    address_pattern = re.compile(
+        r'(?:location|address|loc|near):\s*(.*?)(?=\s*\n|\s*\(|\s*Contact|\s*Mobile|\s*Number|\s*kami|\s*yung|\s*bahay|\s*kmi|\s*near\s|$)', 
+        re.IGNORECASE
+    )
+    
+    match = address_pattern.search(text)
+    if match:
+        # returns the cleaned address line
+        return match.group(1).strip().rstrip('.') 
+    return None
+
+# main function that orchestrates all entity extraction and filtering
+def extract_entities(text):
+
+    # 1. Attempt to extract high-confidence address line (Regex)
+    explicit_address = extract_address_line(text)
+    
+    # 2. Run general NER extraction
+    # runs the text through the Hugging Face NER pipeline
+    results = nlp(text)
+    locations = []
+    
+    # processes NER results and filters out generic noise keywords
+    for entity in results:
+        # 'LOC' is the label for Locations in XLM-R NER
+        if entity['entity_group'] == 'LOC':
+            clean_loc = entity['word'].replace("##", "").strip()
+            
+            # --- FILTERING LOGIC (Skip noise) ---
+            # skips locations that are too short
+            if len(clean_loc) <= 2:
+                continue
+            
+            # skips locations matching known non-location keywords (e.g., S.O.S.)
+            clean_loc_upper = clean_loc.upper().replace('.', '')
+            if clean_loc_upper in NON_LOC_KEYWORDS:
+                continue
+            # --- END FILTERING LOGIC ---
+                
+            if clean_loc not in locations:
+                locations.append(clean_loc)
+            
+    # 3. Prioritize the explicit address if found (inserts at index 0)
+    # ensures the regex-found address is always the primary location
+    if explicit_address:
+        locations.insert(0, explicit_address)
+
+    # 4. Extract Contact Number
+    contact_number = extract_contact_number(text)
+    
+    # 5. Extract Contact Person Name (NEW)
+    contact_name = extract_contact_person_name(text) # <--- NEW CALL
+
+    # returns all extracted data in a dictionary format
+    return {
+        "locations": locations,
+        "contact": contact_number, 
+        "contact_person_name": contact_name, 
+        "raw": results
+    }

alisto_project/backend/script.js

@@ -0,0 +1,594 @@
+// GLOBAL VARIABLES
+let typeChart = null;
+let urgencyChart = null;
+let lastClickedId = null;
+let knownPostIds = new Set();
+let readPostIds = new Set();
+let isLoggedIn = false; // track login state
+let isInitialLoadComplete = false; // flag to prevent false alerts on page load
+let currentUsername = ''; // stores the logged-in user's username
+
+document.addEventListener("DOMContentLoaded", function() {
+    console.log("ALISTO Dashboard Loaded");
+
+    // 1. Check Login Status Immediately
+    checkLoginStatus();
+
+    // 2. Init Data
+    initCharts();
+    fetchPosts();
+    fetchStats();
+    
+    setInterval(() => { fetchPosts(); fetchStats(); }, 30000);
+
+    // 3. Filter Listeners
+    document.getElementById('sort-select').addEventListener('change', () => fetchPosts());
+    document.getElementById('view-select').addEventListener('change', () => fetchPosts());
+    document.getElementById('urgency-select').addEventListener('change', () => fetchPosts());
+    document.getElementById('type-select').addEventListener('change', () => fetchPosts());  
+    document.getElementById('assist-select').addEventListener('change', () => fetchPosts());
+    
+    // 4. Export (Check login first)
+    document.getElementById('export-btn').addEventListener('click', () => {
+        if(!isLoggedIn) { alert("Responders Only. Please Log In."); return; }
+        window.location.href = '/api/export';
+    });
+
+    // 5. Stats Modal
+    const statsModal = document.getElementById('stats-modal');
+    document.getElementById('show-stats-btn').addEventListener('click', () => {
+        statsModal.classList.remove('hidden');
+        fetchStats();
+    });
+    document.getElementById('close-stats-btn').addEventListener('click', () => statsModal.classList.add('hidden'));
+
+    // 6. Login Modal Logic
+    setupLoginLogic();
+    setupSearch();
+    setupProfileDropdown();
+    
+    // 🚨 The manual button listeners were correctly removed from here in the previous step.
+});
+
+// ----------------------------------------------------------------------
+// ACTION BUTTON VISUAL SYNC LOGIC
+// ----------------------------------------------------------------------
+
+function updateActionButtons(postStatus) {
+    const verifyBtn = document.getElementById('verify-btn');
+    const resolveBtn = document.getElementById('resolve-btn');
+    
+    if (!verifyBtn || !resolveBtn) return; // Safety check
+
+    // 1. Reset all active states first (CRITICAL STEP)
+    verifyBtn.classList.remove('is-verified');
+    resolveBtn.classList.remove('is-resolved');
+    
+    // Reset button text
+    document.querySelector('#verify-btn .btn-text').textContent = 'Verify';
+    document.querySelector('#resolve-btn .btn-text').textContent = 'Resolve';
+
+    // 2. Apply Active State Classes based *only* on the current status
+    
+    if (postStatus === 'Verified') {
+        // If Verified, apply the 'is-verified' style
+        verifyBtn.classList.add('is-verified');
+        document.querySelector('#verify-btn .btn-text').textContent = 'Verified';
+        
+    } else if (postStatus === 'Resolved') {
+        // If Resolved, apply the 'is-resolved' style
+        resolveBtn.classList.add('is-resolved');
+        document.querySelector('#resolve-btn .btn-text').textContent = 'Resolved';
+    }
+}
+
+// ----------------------------------------------------------------------
+// AUTHENTICATION LOGIC
+// ----------------------------------------------------------------------
+
+// checks the user's current login status via API   
+function checkLoginStatus() {
+    fetch('/api/user_status')
+        .then(res => res.json())
+        .then(data => {
+            isLoggedIn = data.is_logged_in;
+            currentUsername = data.username || ''; 
+            updateUIForAuth();
+        });
+}
+
+// toggles the visibility of login links, profile dropdown, and action buttons
+function updateUIForAuth() {
+    const navBtn = document.getElementById('nav-login-btn');
+    const profileWrap = document.getElementById('profile-container-wrap'); 
+    const dropdownUsername = document.getElementById('dropdown-username');
+    const actionButtonsContainer = document.querySelector('.action-buttons');
+    
+    if (isLoggedIn) {
+        // LOGGED IN: Show Profile Icon, Update Name, Hide Login Link
+        if (navBtn) navBtn.style.display = 'none';
+        if (profileWrap) profileWrap.style.display = 'flex'; // Show the profile icon container
+        if (dropdownUsername) dropdownUsername.innerText = currentUsername;
+        if (actionButtonsContainer) actionButtonsContainer.style.visibility = 'visible';
+    } else {
+        // LOGGED OUT: Show Login Link, Hide Profile Icon
+        if (navBtn) navBtn.style.display = 'inline-block';
+        if (profileWrap) profileWrap.style.display = 'none'; // Hide the profile icon container
+        if (actionButtonsContainer) actionButtonsContainer.style.visibility = 'hidden';
+    }
+}
+
+// handles click events for the new profile icon and logout button inside the dropdown
+function setupProfileDropdown() {
+    const profileToggle = document.getElementById('profile-toggle');
+    const profileDropdown = document.getElementById('profile-dropdown');
+    const logoutBtn = document.getElementById('dropdown-logout-btn');
+
+    // Get the reference to the existing logout modal element
+    const logoutModal = document.getElementById('logout-modal'); 
+
+    // 1. Toggle visibility when clicking the icon (Unchanged)
+    if (profileToggle) {
+        profileToggle.addEventListener('click', (e) => {
+            e.stopPropagation();
+            profileDropdown.classList.toggle('hidden');
+        });
+    }
+
+    // 2. Logout button handler (MODIFIED BLOCK)
+    if (logoutBtn) {
+        logoutBtn.addEventListener('click', (e) => {
+            e.preventDefault(); 
+            
+            // Action: Show the confirmation modal instead of redirecting
+            if (logoutModal) {
+                logoutModal.classList.remove('hidden'); 
+            } else {
+                // Fallback, should not happen if index.html is correct
+                window.location.href = '/api/logout';
+            }
+        });
+    }
+
+    // 3. Close when clicking outside (Unchanged)
+    document.addEventListener('click', (e) => {
+        if (profileToggle && profileDropdown && !profileToggle.contains(e.target) && !profileDropdown.contains(e.target)) {
+            if (!profileDropdown.classList.contains('hidden')) {
+                profileDropdown.classList.add('hidden');
+            }
+        }
+    });
+}
+
+// sets up handlers for the login and logout modals
+function setupLoginLogic() {
+    const loginModal = document.getElementById('login-modal');
+    const logoutModal = document.getElementById('logout-modal'); 
+    const navBtn = document.getElementById('nav-login-btn');
+    const closeBtn = document.getElementById('close-login-btn');
+    const submitBtn = document.getElementById('login-submit-btn');
+
+    // 1. NAV BUTTON CLICK HANDLER
+    navBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        if (isLoggedIn) {
+            logoutModal.classList.remove('hidden');
+        } else {
+            loginModal.classList.remove('hidden');
+        }
+    });
+
+    // 2. LOGOUT MODAL HANDLERS
+    document.getElementById('confirm-logout-btn').addEventListener('click', () => {
+        window.location.href = '/api/logout';
+    });
+
+    document.getElementById('cancel-logout-btn').addEventListener('click', () => {
+        logoutModal.classList.add('hidden');
+    });
+
+    // 3. LOGIN MODAL HANDLERS
+    closeBtn.addEventListener('click', () => loginModal.classList.add('hidden'));
+
+    submitBtn.addEventListener('click', () => {
+        const u = document.getElementById('username').value;
+        const p = document.getElementById('password').value;
+        
+        fetch('/api/login', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({username: u, password: p})
+        })
+        .then(res => {
+            if(res.ok) return res.json();
+            throw new Error('Invalid credentials');
+        })
+        .then(data => {
+            isLoggedIn = true;
+            updateUIForAuth();
+            loginModal.classList.add('hidden');
+            document.getElementById('username').value = '';
+            document.getElementById('password').value = '';
+            document.getElementById('login-error').innerText = '';
+        })
+        .catch(err => {
+            document.getElementById('login-error').innerText = "Invalid Username or Password";
+        });
+    });
+}
+
+// calculates and formats the time difference for 'X hrs ago'
+function formatRelativeTime(timestamp) {
+    const now = new Date();
+    const posted = new Date(timestamp);
+    const diffMs = now - posted;
+    const diffMins = Math.floor(diffMs / 60000);
+    
+    if (isNaN(diffMins)) return "Unknown time";
+    if (diffMins < 1) return "Just now";
+    if (diffMins < 60) return diffMins + " mins ago";
+    if (diffMins < 1440) { 
+        const hours = Math.floor(diffMins / 60);
+        return hours + (hours === 1 ? " hr ago" : " hrs ago"); // Use "hrs ago"
+    }
+    const days = Math.floor(diffMins / 1440);
+    return days + (days === 1 ? " day ago" : " days ago");
+}
+
+// ----------------------------------------------------------------------
+// RENDER LOGIC
+// ----------------------------------------------------------------------
+
+// renders the list of incident posts in the sidebar feed
+function renderSidebar(data) {
+    const sidebar = document.getElementById('incident-feed');
+    if (!sidebar) return;
+    sidebar.innerHTML = '';
+
+    const countEl = document.getElementById('dashboard-alert-count');
+    if (countEl) {
+        countEl.innerText = data.length;
+    }
+
+    if (data.length === 0) {
+        sidebar.innerHTML = `<p style="color: #ccc; padding: 20px; text-align: center;">No alerts found.</p>`;
+        return;
+    }
+
+    data.forEach(post => {
+        const box = document.createElement('div');
+        box.className = 'alert-box';
+        
+        if (post.id === lastClickedId) box.classList.add('selected');
+        else if (post.status === 'New' && !readPostIds.has(post.id)) box.classList.add('unread');
+
+        const relativeTimeStr = formatRelativeTime(post.timestamp);
+        // const timeStr = new Date(post.timestamp).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+        
+        let statusColor = '#ed4801'; /*ed4801*/
+        if (post.status === 'Verified') statusColor = '#ffc107'; /*00C851*/
+        if (post.status === 'Resolved') statusColor = '#00C851'; /*33b5e5*/
+
+        let statusText = `(${post.status})`;
+        if (post.status === 'New' && readPostIds.has(post.id)) statusText = ""; 
+
+        // Determine Badge Color Class
+        let assistClass = 'assist-badge'; // Default
+        const type = (post.assistance_type || "").toLowerCase();
+        if (type.includes('medical')) assistClass += ' assist-medical';
+        else if (type.includes('rescue')) assistClass += ' assist-rescue';
+        else if (type.includes('food')) assistClass += ' assist-food';
+        else if (type.includes('evac')) assistClass += ' assist-evac';
+
+        box.innerHTML = `
+            <div class="alert-icon" style="background-color: ${statusColor}"></div>
+            <div class="box-text">
+                <div class="box-title">
+                    ${post.disaster_type} 
+                    <span style="font-size:0.7em; opacity:0.7">${statusText}</span>
+                </div>
+                
+                <div style="display: flex; align-items: center; margin-top: 4px; gap: 5px;">
+                    <span class="${assistClass}">${post.assistance_type || "General"}</span>
+                    <div class="box-subtitle" style="margin-top:0;">${post.location} • ${relativeTimeStr}</div>
+                </div>
+            </div>
+        `;
+
+        box.addEventListener('click', () => {
+            const detailBox = document.getElementById('postInfo');
+            if (lastClickedId === post.id) {
+                detailBox.classList.remove('active'); 
+                box.classList.remove('selected');    
+                lastClickedId = null;
+                renderSidebar(data); 
+            } else {
+                document.querySelectorAll('.alert-box').forEach(el => el.classList.remove('selected'));
+                box.classList.add('selected');
+                lastClickedId = post.id;
+                readPostIds.add(post.id);
+                
+                updateDetailView(post);
+                detailBox.classList.add('active');
+                
+                // CRITICAL: Check auth again to show/hide buttons for this specific detail view
+                updateUIForAuth(); 
+                
+                renderSidebar(data);
+            }
+        });
+        sidebar.appendChild(box);
+    });
+}
+
+// updates the detail panel with the selected post's information
+function updateDetailView(post) {
+    const setText = (id, text) => {
+        const el = document.getElementById(id);
+        if (el) el.innerText = text;
+    };
+
+    setText('detail-title', post.title);
+    setText('detail-location', post.location || "Unknown");
+    setText('detail-assistance', post.assistance_type || "General"); 
+    setText('detail-contact-name', post.author ? (
+    // Check if the name contains a space (suggests a full name)
+    // If no space is found, assume it is a username and prepend 'u/'
+    post.author.includes(' ') ? post.author : `u/${post.author}`
+) : "Unknown");
+    setText('detail-contact-number', post.contact_number || "Check Post");
+    setText('detail-body', post.content);
+    setText('detail-status', post.status);
+    
+    const statusBadge = document.getElementById('detail-status');
+    if (statusBadge) {
+        // Clear all previous status classes
+        statusBadge.classList.remove('status-new', 'status-verified', 'status-resolved'); 
+        
+        // Apply the correct new class
+        if (post.status) {
+            statusBadge.classList.add(`status-${post.status.toLowerCase()}`);
+        }
+    }
+
+    const link = document.getElementById('detail-link');
+    if (link) {
+        const isSimulated = typeof post.reddit_id === 'string' && (post.reddit_id.startsWith('fake') || post.reddit_id.startsWith('sim'));
+        link.href = isSimulated ? '#' : `https://reddit.com/comments/${post.reddit_id.replace('t3_', '')}`;
+    }
+
+    const urgEl = document.getElementById('detail-urgency');
+    if (urgEl) {
+        urgEl.innerText = post.urgency_level;
+        urgEl.style.color = post.urgency_level === 'High' ? '#ff4444' : '#00C851';
+    }
+
+    const timeEl = document.getElementById('detail-time');
+    if (timeEl) {
+        // 1. Calculate relative and exact time strings
+        const posted = new Date(post.timestamp);
+        const relativeTime = formatRelativeTime(post.timestamp); // e.g., "2 hrs ago"
+        
+        // 2. Format the exact time (e.g., 10:34 PM)
+        const exactTimeStr = posted.toLocaleTimeString([], {
+            hour: '2-digit', 
+            minute: '2-digit', 
+            hour12: true
+        });
+        
+        // 3. Generate multi-line HTML structure with inline CSS
+        timeEl.innerHTML = `
+            <div style="font-size: 1.1em; font-weight: bold; color: white;">${exactTimeStr}</div>
+            
+            <div style="font-size: 0.85em; color: #ed4801; margin-top: 2px; text-transform: uppercase">${relativeTime}</div>
+        `;
+        
+        // The redundant if/else logic block for combining text is now removed.
+    }
+
+    // Synchronize buttons with the loaded post status
+    updateActionButtons(post.status);
+}
+
+// ----------------------------------------------------------------------
+// STANDARD FUNCTIONS (FINAL WORKING VERSION)
+// ----------------------------------------------------------------------
+
+// handles the logic for updating the post status (Verify/Resolve)
+function updateStatus(intendedStatus) {
+    if (!lastClickedId) return;
+    const badge = document.getElementById('detail-status');
+    // FIX: Read status and clean it by converting to lowercase and trimming whitespace
+    const currentStatus = badge ? badge.innerText.trim() : 'New'; 
+    let finalStatus;
+
+    if (intendedStatus === 'Verified') {
+        // ... (rest of the logic)
+        // Check against the current, clean status
+        if (currentStatus.toLowerCase() === 'verified') {
+            finalStatus = 'New';
+        } else {
+            finalStatus = 'Verified'; 
+        }
+        
+    } else if (intendedStatus === 'Resolved') {
+        // ... (rest of the logic)
+        // Check against the current, clean status
+        if (currentStatus.toLowerCase() === 'resolved') {
+            finalStatus = 'New';
+        } else {
+            finalStatus = 'Resolved';
+        }
+    } else {
+        return; 
+    }
+    
+    // Safety check: ensure we are actually changing the status
+    if (finalStatus === currentStatus) {
+        return;
+    }
+    
+    // --- API CALL AND UI UPDATE ---
+    fetch(`/api/posts/${lastClickedId}/status`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: finalStatus })
+    })
+    .then(res => {
+        if(res.status === 401) { alert("Unauthorized. Please log in."); return; }
+        // If the API call returns success (200), proceed with UI updates based on the finalStatus.
+        return res.json();
+    })
+    .then(data => {
+        if(data) {
+            fetchPosts(); 
+            fetchStats(); 
+            
+            if (badge) {
+                // 1. Update text
+                badge.innerText = finalStatus; 
+                
+                // 2. Apply color class (visual sync fix)
+                badge.classList.remove('status-new', 'status-verified', 'status-resolved');
+                badge.classList.add(`status-${finalStatus.toLowerCase()}`);
+            }
+            
+            // 3. Update buttons' appearance
+            updateActionButtons(finalStatus); 
+        }
+    })
+    .catch(error => {
+        console.error("Status Update Failed:", error);
+        alert("Failed to update status due to network error.");
+    });
+}
+
+// pop up notificaiton for new alerts
+function showNotification(message) {
+    const popup = document.getElementById('new-alert-notification');
+    const msgEl = document.getElementById('notification-message');
+    if (!popup || !msgEl) return;
+
+    msgEl.innerText = message;
+    
+    // 1. Prepare for animation (ensure it's visible but off-screen)
+    popup.classList.remove('hidden'); 
+    
+    // 2. Force reflow to ensure CSS animation starts correctly
+    void popup.offsetWidth; 
+    
+    // 3. Trigger slide-in animation
+    popup.classList.add('visible');
+
+    // 4. Set timeout to slide out after 6 seconds
+    setTimeout(() => {
+        popup.classList.remove('visible');
+        
+        // 5. Hide completely after animation finishes (0.5s transition time in CSS)
+        setTimeout(() => {
+            popup.classList.add('hidden');
+        }, 500); 
+    }, 6000); // Display for 6 seconds
+}
+
+// initializes and draws the chart.js graphs for stats modal
+function initCharts() {
+    const ctxType = document.getElementById('typeChart');
+    const ctxUrg = document.getElementById('urgencyChart');
+    if (!ctxType || !ctxUrg) return;
+
+    typeChart = new Chart(ctxType.getContext('2d'), {
+        type: 'doughnut',
+        data: { labels: [], datasets: [{ data: [], backgroundColor: ['#ed4801', '#33b5e5', '#00C851', '#ffbb33', '#aa66cc'], borderWidth: 0 }] },
+        options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'right', labels: { color: 'white' } } } }
+    });
+
+    urgencyChart = new Chart(ctxUrg.getContext('2d'), {
+        type: 'bar',
+        data: { labels: ['High', 'Low/Med'], datasets: [{ label: 'Count', data: [0, 0], backgroundColor: ['#ff4444', '#00C851'], borderRadius: 5 }] },
+        options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.1)' }, ticks: { color: 'white' } }, x: { ticks: { color: 'white' } } }, plugins: { legend: { display: false } } }
+    });
+}
+
+// fetches statistical data from the API
+function fetchStats() { fetch('/api/stats').then(res=>res.json()).then(data=>updateCharts(data)).catch(err=>console.error(err)); }
+
+// updates the chart data and redraws the graphs
+function updateCharts(data) { if(!typeChart || !urgencyChart) return; const types = data.disaster_types || {}; typeChart.data.labels = Object.keys(types); typeChart.data.datasets[0].data = Object.values(types); typeChart.update(); const levels = data.urgency_levels || {}; urgencyChart.data.datasets[0].data = [levels['High']||0, (levels['Low']||0)+(levels['Medium']||0)]; urgencyChart.update(); }
+
+// fetches post data from the API based on current filter selections
+function fetchPosts(q='') {
+    const sort = document.getElementById('sort-select')?.value||'newest';
+    const view = document.getElementById('view-select')?.value||'active';
+    const urgency = document.getElementById('urgency-select')?.value||'all';
+    const type = document.getElementById('type-select')?.value||'all';
+    const assist = document.getElementById('assist-select')?.value||'all';
+    const searchVal = document.querySelector('.search-input')?.value||'';
+    let url = `/api/posts?sort=${sort}&view=${view}&urgency=${urgency}&type=${type}&assist=${assist}`;
+    if(searchVal) url += `&query=${encodeURIComponent(searchVal)}`;
+    url += `&_=${new Date().getTime()}`;
+    fetch(url).then(r=>r.json()).then(d=>{renderSidebar(d); checkAudioAlert(d);}).catch(e=>console.error(e));
+}
+
+// checks for new high-urgency alerts and plays sound + shows notification
+function checkAudioAlert(p){
+    const a=document.getElementById('alert-sound');
+    if(!a)return;
+    a.volume = 0.1;
+    let newAlertFound = false;
+
+    if (!isInitialLoadComplete) {
+        // 1. On the very first load after page navigation/refresh:
+        // Populate the known set with ALL current IDs and skip the alert.
+        p.forEach(x => knownPostIds.add(x.id));
+        isInitialLoadComplete = true; 
+        return;
+    }
+    
+    p.forEach(x => {
+        if(x.urgency_level === 'High' && !knownPostIds.has(x.id) && x.status !== 'Resolved') {
+            newAlertFound = true;
+        }
+    });
+
+    if(newAlertFound) {
+        a.play().catch(e=>{});
+        showNotification("NEW HIGH PRIORITY ALERT: Check Feed");
+    }
+
+    p.forEach(x => {
+        knownPostIds.add(x.id);
+    });
+}
+
+// sets up the search input logic with clear button
+function setupSearch(){ const i=document.querySelector('.search-input'), c=document.querySelector('.clear-icon'); if(!i)return; i.addEventListener('input',()=>{if(i.value)c?.classList.remove('hidden');else{c?.classList.add('hidden');fetchPosts();}}); i.addEventListener('keydown',e=>{if(e.key==='Enter')fetchPosts();}); c?.addEventListener('click',()=>{i.value='';c.classList.add('hidden');fetchPosts();}); }
+
+  // Attach listeners once DOM is ready
+  (function () {
+    // Select all elements with data_tooltip attribute
+    const tooltipElements = document.querySelectorAll('[data_tooltip]');
+
+    tooltipElements.forEach(el => {
+      // When clicked: hide tooltip immediately by adding class
+      el.addEventListener('mousedown', (e) => {
+        // Add class so CSS hides tooltip; use mousedown for immediate feedback
+        el.classList.add('tooltip-hidden');
+
+        // Also remove focus so :focus doesn't keep hiding/showing unpredictably
+        if (typeof el.blur === 'function') {
+          el.blur();
+        }
+      });
+
+      // When mouse leaves the element: remove the hiding class so future hovers work
+      el.addEventListener('mouseleave', (e) => {
+        el.classList.remove('tooltip-hidden');
+      });
+
+      // Also remove hidden class on touchend for touch devices (optional)
+      el.addEventListener('touchend', () => {
+        el.classList.remove('tooltip-hidden');
+      });
+    });
+  })();

alisto_project/backend/simulate_feed.py

@@ -0,0 +1,127 @@
+import time
+import os
+import pickle
+import torch
+import torch.nn.functional as F
+from transformers import AutoTokenizer, AutoModelForSequenceClassification
+from ingest_reddit import is_news_or_irrelevant, get_disaster_type, check_for_philippine_location
+from ner_extractor import extract_entities
+
+# ---------------------------------------------------------
+# CONFIG & SETUP
+# ---------------------------------------------------------
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+MODEL_DIR = os.path.join(BASE_DIR, 'models')
+ROBERTA_DIR = os.path.join(MODEL_DIR, 'roberta_model')
+TFIDF_PATH = os.path.join(MODEL_DIR, 'tfidf_ensemble.pkl')
+
+# ---------------------------------------------------------
+# LOAD BRAINS
+# ---------------------------------------------------------
+print("--- ALISTO: Loading Simulator ---")
+
+tokenizer = None
+roberta_model = None
+tfidf_model = None
+
+# 1. Load XLM-R (Context Expert)
+try:
+    if os.path.exists(ROBERTA_DIR):
+        tokenizer = AutoTokenizer.from_pretrained(ROBERTA_DIR)
+        roberta_model = AutoModelForSequenceClassification.from_pretrained(ROBERTA_DIR)
+        roberta_model.eval()
+        print("✅ XLM-R Loaded")
+    else:
+        print("❌ Failed to load XLM-R (Folder missing)")
+except Exception as e:
+    print(f"❌ Error loading XLM-R: {e}")
+
+# 2. Load TF-IDF (Gatekeeper)
+try:
+    if os.path.exists(TFIDF_PATH):
+        with open(TFIDF_PATH, 'rb') as f:
+            tfidf_model = pickle.load(f)
+        print("✅ TF-IDF Loaded")
+    else:
+        print("❌ Failed to load TF-IDF (File missing)")
+except Exception as e:
+    print(f"❌ Error loading TF-IDF: {e}")
+
+# ---------------------------------------------------------
+# PREDICTION LOGIC (Must match ingest_reddit.py)
+# ---------------------------------------------------------
+def predict_urgency(text):
+    # 1. Gatekeeper (TF-IDF)
+    if tfidf_model:
+        probs = tfidf_model.predict_proba([text])[0]
+        tfidf_conf = probs[1]
+        
+        if tfidf_conf < 0.20:
+            return False, tfidf_conf, "TF-IDF Reject"
+        
+    # 2. Context Expert (RoBERTa)
+    if roberta_model and tokenizer:
+        inputs = tokenizer(text, return_tensors="pt", truncation=True, padding=True, max_length=128)
+        with torch.no_grad():
+            outputs = roberta_model(**inputs)
+            r_probs = F.softmax(outputs.logits, dim=-1)
+            roberta_conf = r_probs[0][1].item()
+            
+        return (roberta_conf > 0.5), roberta_conf, "RoBERTa"
+    
+    return False, 0.0, "No Model"
+
+# ---------------------------------------------------------
+# TEST DATA
+# ---------------------------------------------------------
+TEST_POSTS = [
+    # --- SHOULD BE ACCEPTED ---
+    "Tulong po, stuck kami sa bubong ng bahay, tumataas tubig sa Marikina!", 
+    "Rescue needed at Provident Village, 3 kids trapped inside ceiling.",
+    "Wala na kaming matatakbuhan, lampas tao na ang baha sa Cainta.",
+    "Emergency! Landslide blocked the road in Baguio, need extraction.",
+    "Please help us, flood entering 2nd floor in San Mateo Rizal.",
+    
+    # --- SHOULD BE REJECTED ---
+    "Breaking News: Typhoon Signal No 4 raised in Bicol.",
+    "Open for donations via GCash for typhoon victims.",
+    "Looking for volunteers to repack relief goods at Ateneo.",
+    "Stay safe everyone, praying for all affected.",
+    "Discussion: Why is the government so slow?",
+    "My heart breaks seeing the flood photos."
+]
+
+def run_simulation():
+    print("\n--- 🟢 STARTING SIMULATION ---\n")
+    
+    for text in TEST_POSTS:
+        print(f"📝 Post: {text[:60]}...")
+        
+        # A. Logic Filter
+        is_bad, reason = is_news_or_irrelevant(text)
+        if is_bad:
+            print(f"   ❌ BLOCKED by Logic: {reason}")
+            print("-" * 50)
+            time.sleep(0.5)
+            continue
+            
+        # B. AI Prediction
+        is_urgent, score, source = predict_urgency(text)
+        
+        if is_urgent:
+            # C. Entity Extraction
+            ner = extract_entities(text)
+            locs = ner.get('locations', [])
+            disaster = get_disaster_type(text)
+            
+            print(f"   ✅ ACCEPTED ({source} Conf: {score:.2%})")
+            print(f"      📍 Location: {locs}")
+            print(f"      🌊 Type: {disaster}")
+        else:
+            print(f"   ❌ REJECTED by AI (Conf: {score:.2%})")
+            
+        print("-" * 50)
+        time.sleep(1)
+
+if __name__ == "__main__":
+    run_simulation()

alisto_project/backend/style.css

@@ -0,0 +1,763 @@
+/* --- GLOBAL RESET & FONTS --- */
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+    font-family: 'Roboto', sans-serif;
+    color: #fff;
+    background: #28282B;
+    overflow: hidden;
+    height: 100vh;
+}
+
+h1, h2, h3 { font-family: 'Montserrat', sans-serif; }
+
+/* --- HEADER --- */
+/* --- HEADER STYLES --- */
+.main-header {
+    position: fixed; 
+    top: 0; 
+    left: 0; 
+    width: 100%; 
+    height: 60px;
+    padding: 0 2vw; 
+    
+    background: rgba(0, 0, 0, 0.9);
+    backdrop-filter: blur(8px); 
+    z-index: 999; 
+    
+    display: flex; 
+    justify-content: space-between; 
+    align-items: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    
+    /* FIX: Prevent layout breaking on very small screens */
+    min-width: 600px; 
+}
+
+/* 1. LOGO (Locked) */
+.logo { 
+    display: flex; 
+    flex-direction: column; 
+    line-height: 1; 
+    flex-shrink: 0; /* Never shrink */
+    margin-right: 20px;
+}
+.logo-main { font-family: 'Montserrat', sans-serif; font-size: 1.8em; font-weight: 900; color: #ed4801; }
+.logo-sub { font-size: 0.65em; font-weight: 400; color: #ccc; letter-spacing: 2px; text-transform: uppercase; margin-top: 2px; }
+
+/* 2. NAVIGATION (Locked) */
+.main-nav {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0; /* Never shrink */
+    margin-left: 20px;
+}
+
+.main-nav .nav-link { 
+    color: #ccc; 
+    text-decoration: none; 
+    font-weight: 500; 
+    font-size: 0.9em; 
+    padding: 8px 15px; 
+    border-radius: 6px; 
+    transition: all 0.3s ease; 
+    margin-left: 10px;
+    
+    /* FIX: Keep text on one line */
+    white-space: nowrap; 
+}
+.main-nav .nav-link { 
+    color: #ccc; 
+    text-decoration: none; 
+    font-weight: 500; 
+    font-size: 0.9em; 
+    padding: 8px 15px; 
+    border-radius: 6px; 
+    transition: all 0.3s ease; 
+    margin-left: 10px;
+    
+    /* FIX: Keep text on one line */
+    white-space: nowrap; 
+    
+    /* FIX: Add invisible border so it doesn't jump when active */
+    border: 1px solid transparent; 
+}
+
+.main-nav .nav-link:hover { 
+    color: white; 
+    background-color: rgba(255, 255, 255, 0.1); 
+}
+
+.main-nav .nav-link.active { 
+    color: #ed4801; 
+    border: 1px solid #ed4801; 
+}
+
+/* --- SEARCH BAR (Stabilized) --- */
+.search-container { 
+    display: flex; 
+    align-items: center; 
+    background: rgba(255, 255, 255, 0.1); 
+    border-radius: 20px; 
+    padding: 8px 15px; 
+    
+    /* FIX: Remove 'clamp'. Use standard width so it stops jittering. */
+    width: 100%; 
+    max-width: 400px; 
+    
+    transition: background 0.3s ease; 
+}
+
+.search-container:hover { 
+    background: rgba(255, 255, 255, 0.15); 
+}
+
+.search-input { 
+    flex-grow: 1; 
+    border: none; 
+    background: transparent; 
+    color: white; 
+    font-size: 0.9em; 
+    padding: 0; 
+    outline: none; 
+}
+
+.search-icon { 
+    color: #ed4801; 
+    margin-left: 5px; 
+    cursor: pointer; 
+}
+
+.clear-icon { 
+    color: #ccc; 
+    margin-right: 10px; 
+    cursor: pointer; 
+}
+
+.clear-icon.hidden { 
+    display: none; 
+}
+
+/* --- HERO --- */
+.hero {
+    margin-top: 60px;
+    height: calc(100vh - 60px);
+    width: 100%;
+    background: url('images/bg2-logan.jpg') center/cover no-repeat fixed;
+    
+    /* FLEXBOX MAGIC */
+    display: flex;
+    align-items: stretch; /* Make both columns full height */
+    flex-wrap: nowrap;    /* Desktop: Side-by-side. Mobile: We change this via media query */
+    
+    padding: 0; 
+    gap: 0; 
+}
+/* --- SIDEBAR WRAPPER --- */
+.sidebar-wrapper {
+    display: flex; 
+    flex-direction: column;
+    flex: 0 0 400px;
+    width: 400px;
+    
+    height: 100%;
+    
+    background: rgba(0, 0, 0, 0.6);
+    border-right: 1px solid rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(5px);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
+    /* overflow: hidden; */
+    z-index: 10;
+}
+
+/* --- FILTER BAR --- */
+.filter-bar {
+    display: flex; gap: 8px; padding: 15px;
+    background: rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.1);
+    align-items: center;
+}
+
+.filter-bar-c {
+    display: flex; gap: 8px; width: 100%;
+    justify-content: center; align-items: center; flex-direction: column;
+}
+
+
+.filter-bar-r {
+    display: flex; gap: 8px; width: 100%;
+    justify-content: space-between; align-items: center; flex-direction: row;
+}
+
+.filter-select { background: rgba(99, 97, 97, 0.1); color: #acabab; border: 1px solid #555; border-radius: 4px; padding: 5px; font-size: 0.8rem; outline: none; cursor: pointer; flex-grow: 1; min-width: 0; }
+.pulse-btn, .icon-btn { flex-shrink: 0; }
+.icon-btn { background: #ed4801; color: white; border: none; border-radius: 8px; width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+.pulse-btn { background: linear-gradient(135deg, #ed4801, #ff7e42); color: white; border: none; border-radius: 50%; width: 35px; height: 35px; cursor: pointer; box-shadow: 0 0 10px rgba(237, 72, 1, 0.5); display: flex; align-items: center; justify-content: center; animation: pulse-glow 2s infinite; }
+@keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(237, 72, 1, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(237, 72, 1, 0); } }
+.separator { width: 1px; background: rgba(255,255,255,0.2); margin: 0 5px; height: 20px; }
+
+/* --- SIDEBAR LIST --- */
+.sidebar {
+    width: 100%; height: 100%;
+    background: transparent; border: none; box-shadow: none;
+    padding: 10px; overflow-y: auto; overflow-x: hidden;
+}
+.sidebar::-webkit-scrollbar { width: 6px; }
+.sidebar::-webkit-scrollbar-thumb { background: rgba(237, 72, 1, 0.5); border-radius: 10px; }
+
+/* --- ALERT BOXES --- */
+.alert-box { display: flex; align-items: center; background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 16px; margin-bottom: 10px; cursor: pointer; transition: transform 0.2s ease, background 0.2s; border-left: 4px solid transparent; }
+.alert-box:hover { background: rgba(255, 255, 255, 0.2); transform: translateX(5px); }
+.alert-box.selected { background: rgba(237, 72, 1, 0.3); border-left: 4px solid #ed4801; }
+.alert-box.unread { background: rgba(255, 255, 255, 0.15); border-left: 3px solid #ed4801; opacity: 1; }
+.alert-icon { width: 12px; height: 12px; background-color: #ed4801; border-radius: 50%; margin-right: 15px; flex-shrink: 0; }
+.box-text { display: flex; flex-direction: column; }
+.box-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 4px; color: #fff; text-transform: uppercase; }
+.box-subtitle { font-size: 0.8rem; color: #ccc; }
+.active-alert-counter{ padding: 5px 10px 5px 10px; text-align: left; }
+
+
+/* --- DETAIL BOX (ANIMATED) --- */
+.detail-box {
+    display: flex; 
+    flex-direction: column;
+    
+    /* FIX: Take up all remaining space */
+    flex: 1; 
+    
+    /* FIX: Prevents the box from forcing the screen wider if text is long */
+    min-width: 0; 
+    
+    /* Keep it floating */
+    height: calc(100% - 40px); /* Full height minus margins */
+    margin: 20px; 
+    
+    background: rgba(0,0,0,0.9);
+    padding: 30px;
+    border-radius: 15px;
+    color: #fff;
+    border: 1px solid #ed4801;
+    z-index: 20;
+
+    /* Animation: Hidden by default */
+    opacity: 0;
+    transform-origin: top right; 
+
+    transform: scale(0.9) translateX(0); 
+    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
+    pointer-events: none;
+    backdrop-filter: blur(5px);
+}
+
+/* Animation: Visible state */
+.detail-box.active {
+    opacity: 1;
+    transform: scale(1) translateX(0); 
+    pointer-events: auto;
+    box-shadow: -10px 10px 30px rgba(0,0,0,0.5);
+}
+/* --- DETAIL CONTENT --- */
+.detail-header-r { display: flex; flex-direction: row; justify-content: space-between; margin: 0 0 10px; align-items: center; }
+.detail-title { font-size: 24px; font-weight: 700; margin: 0; width: 70%; }
+.detail-redirect { font-size: 14px; color: #f6510a; text-decoration: none; border: 1px solid #f6510a; padding: 5px 10px; border-radius: 4px; transition: 0.3s; }
+.detail-redirect:hover { background: #f6510a; color: white; }
+.detail-line { border: none; border-top: 1px solid #ed4801; margin-bottom: 20px; }
+.detail-important-r { display: flex; flex-direction: row; justify-content: space-between; margin-top: 10px; }
+.detail-row1-c { display: flex; flex-direction: column; gap: 15px; flex: 1; }
+.detail-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: #888; margin-bottom: 5px; }
+.detail-content { margin-top: 50px; line-height: 1.6; font-size: 0.95rem; max-height: 400px; overflow-y: auto; color: #ddd; }
+.detail-row1-col2-r { display: flex; flex-direction: row;  gap: 20px; align-items: flex-start; }
+
+
+.detail-content::-webkit-scrollbar { width: 6px; }
+.detail-content::-webkit-scrollbar-track { background: transparent; }
+.detail-content::-webkit-scrollbar-thumb { background: rgba(237, 72, 1, 0.5); border-radius: 10px; }
+.detail-content::-webkit-scrollbar-thumb:hover { background: rgba(237, 72, 1, 1); }
+
+
+/* Buttons */
+.action-buttons { display: flex; gap: 10px; }
+.action-btn { border: none; padding: 5px 12px; border-radius: 4px; color: white; font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 5px; }
+.verify-btn { background: #00C851; } .verify-btn:hover { background: #00e25b; }
+.resolve-btn { background: #33b5e5; } .resolve-btn:hover { background: #4ec2ec; }
+.detail-redirect { border: 1px solid #ed4801; color: #ed4801; padding: 5px 12px; border-radius: 4px; text-decoration: none; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
+.detail-redirect:hover { background: #ed4801; color: white; }
+/* .status-badge { margin-top: 5px; font-size: 0.8rem; padding: 2px 8px; border-radius: 4px; background: #555; display: inline-block; } */
+.confirm-btn { background: #ed4801; } .resolve-btn:hover { background: #4ec2ec; }
+
+/* --- STATUS BADGE COLOR CLASSES --- */
+/* These classes are applied via JavaScript to synchronize with button clicks */
+
+.status-badge { 
+    margin-top: 5px; 
+    font-size: 0.8rem; 
+    padding: 2px 8px; 
+    border-radius: 4px; 
+    background: #555; 
+    display: inline-block; 
+    font-weight: bold; /* Added for clarity */
+    text-transform: uppercase;
+    transition: background-color 0.2s; /* Added transition */
+    color: white; /* Base text color */
+}
+
+/* Status: NEW (Default State/Unverified) */
+.status-new {
+    background-color: #555; /* Amber/Yellow ffc107 333 */
+    color: #ffffff;
+}
+
+/* Status: VERIFIED */
+.status-verified {
+    background-color: #ffc107; /* Green */
+    color: #ffffff;
+}
+
+/* Status: RESOLVED */
+.status-resolved {
+    background-color: #28a745; /* Gray 28a745*/
+    color: #ffffff;
+}
+
+/* Base Style for all action buttons (like 'Post' or 'Verify') */
+.action-btn1 {
+    /* Basic button styling (adjust padding, font, etc., as needed) */
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+    
+    /* Ensure icon and text are aligned */
+    display: inline-flex;
+    align-items: center;
+    gap: 5px; /* Spacing between icon and text */
+}
+
+/* 1. Default (Unverified) State: Green Outline only */
+#verify-btn {
+    background-color: transparent;
+    color: #ffc107; /* Green text color */
+    border: 1px solid #ffc107; /* Green border (outline) */
+}
+
+/* 2. Verified State: Entirely Green */
+#verify-btn.is-verified {
+    background-color: #ffc107; /* Solid Green background */
+    color: #ffffff; /* White text/icon */
+    border-color: #ffc107; /* Maintain border color */
+}
+
+/* 3. Hover States */
+#verify-btn:hover:not(.is-verified) {
+    background-color: rgba(40, 167, 69, 0.1); /* Light green background on hover */
+}
+
+#verify-btn.is-verified:hover {
+    /* Make the button slightly darker green on hover when it's already verified */
+    background-color: #c77f0c; 
+}
+
+/* --- RESOLVE BUTTON --- */
+/* 1. Default (Unresolved) State: Blue Outline only */
+#resolve-btn {
+    background-color: transparent;
+    color: #28a745; /* Blue text color */
+    border: 1px solid #28a745; /* Blue border (outline) */
+}
+
+/* 2. Resolved State: Entirely Blue */
+#resolve-btn.is-resolved {
+    background-color: #28a745; /* Solid Blue background */
+    color: #ffffff; /* White text/icon */
+    border-color: #28a745;
+}
+
+/* 3. Hover States (When Unresolved) */
+#resolve-btn:hover:not(.is-resolved) {
+    background-color: rgba(0, 123, 255, 0.1); /* Light blue background on hover */
+}
+
+/* 4. Hover States (When Already Resolved) */
+#resolve-btn.is-resolved:hover {
+    /* Make the button slightly darker blue on hover when it's already resolved */
+    background-color: #157349; 
+}
+
+
+/* --- MODAL --- */
+.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.3s ease; }
+.modal-overlay.hidden { opacity: 0; pointer-events: none; display: none !important; }
+.modal-content { background: #1a1a1a; border: 1px solid #444; padding: 30px; border-radius: 12px; width: 90%; max-width: 900px; }
+.modal-header { display: flex; justify-content: space-between; margin-bottom: 20px; }
+.charts-container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 20px; }
+.chart-wrapper { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 20px; flex: 1; min-width: 300px; max-height: 400px; display: flex; flex-direction: column; align-items: center; }
+canvas { max-width: 100%; max-height: 300px; }
+.icon-btn-ghost { background: transparent; border: none; color: #888; font-size: 1.5rem; cursor: pointer; }
+.hidden { display: none !important; }
+
+/* --- RESPONSIVE ADJUSTMENT --- */
+@media (max-width: 850px) {
+    /* Unlock the body scrolling for small screens */
+    body { 
+        overflow: auto; 
+        height: auto; 
+    }
+
+    .hero {
+        /* Stack vertically instead of side-by-side */
+        flex-direction: column;
+        height: auto;
+        min-height: 100vh;
+    }
+
+    .sidebar-wrapper {
+        /* Sidebar becomes full width banner at the top */
+        width: 100%;
+        flex: none; /* Turn off the fixed 350px logic */
+        height: 300px; /* Fixed height for list */
+    }
+
+    .detail-box {
+        /* Box sits below sidebar */
+        width: 95%; /* Almost full width */
+        margin: 10px auto; /* Center it */
+        height: 500px; /* Fixed height for content */
+        flex: none;
+        
+        /* Reset transform for mobile so it doesn't fly in weirdly */
+        transform: none; 
+    }
+    
+    /* Ensure active state just shows opacity on mobile */
+    .detail-box.active {
+        transform: none;
+    }
+}
+
+/* --- LOGIN MODAL STYLES --- */
+.small-modal { max-width: 400px; }
+
+.login-form {
+    display: flex; flex-direction: column; gap: 15px;
+}
+
+.login-input {
+    background: rgba(255,255,255,0.1);
+    border: 1px solid #444;
+    color: white;
+    padding: 12px;
+    border-radius: 6px;
+    font-size: 1rem;
+    outline: none;
+}
+.login-input:focus { border-color: #ed4801; }
+
+.full-width {
+    width: 100%;
+    justify-content: center;
+    padding: 12px;
+    font-size: 1rem;
+}
+
+/* --- SIDEBAR ASSISTANCE BADGE --- */
+.assist-badge {
+    display: inline-block;
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    padding: 2px 6px;
+    border-radius: 4px;
+    margin-right: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    color: #ccc;
+    border: 1px solid #555;
+}
+
+/* Specific Colors */
+.assist-medical { color: #ff4444; border-color: #ff4444; background: rgba(255, 68, 68, 0.1); }
+.assist-rescue { color: #ffbb33; border-color: #ffbb33; background: rgba(255, 187, 51, 0.1); }
+.assist-food { color: #00C851; border-color: #00C851; background: rgba(0, 200, 81, 0.1); }
+.assist-evac { color: #33b5e5; border-color: #33b5e5; background: rgba(51, 181, 229, 0.1); }
+
+
+/* --- CUSTOM TOOLTIP STYLES --- */
+
+/* 1. Base style for any element that has a tooltip */
+[data_tooltip] {
+    position: relative;
+    cursor: pointer;
+}
+
+/* 2. Create the tooltip content (::after) ALWAYS, but invisible */
+[data_tooltip]::after {
+    content: attr(data_tooltip);
+    position: absolute;
+    top: calc(100% + 15px);
+    
+    /* DEFAULT POSITIONING: Centered over parent */
+    left: 50%; 
+    right: auto;
+    transform: translateX(-50%);
+    margin: 0; 
+    
+    /* Appearance & Visibility */
+    background-color: #ed4801;
+    color: #fff;
+    white-space: nowrap;
+    padding: 6px 10px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s; 
+    transition-delay: 0s; /* Instant disappearance */
+    z-index: 9999;
+}
+
+/* 4a. LEFT EDGE OVERRIDE */
+[data_tooltip_align="left"]::after {
+    left: 0; 
+    right: auto;
+    transform: none; 
+    margin-left: 10px; 
+}
+
+/* 4b. RIGHT EDGE OVERRIDE */
+[data_tooltip_align="right"]::after {
+    right: 0; 
+    left: auto;
+    transform: none; 
+    margin-left: 0; 
+    margin-right: 10px; 
+}
+
+/* 5. ON HOVER — animate in (Fade only) */
+[data_tooltip]:hover::after {
+    opacity: 1;
+    transition-delay: 0.5s !important;
+}
+
+/* Add this to your existing CSS */
+[data_tooltip].tooltip-hidden:hover::after {
+    opacity: 0 !important;
+    transition-delay: 0s !important;
+}
+
+/* 5. Tooltip visibility on hover */
+/* [data_tooltip]:hover::after,
+[data_tooltip]:hover::before {
+    opacity: 1;
+} */
+ 
+/* Arrow — ALSO always created */
+/* [data_tooltip]::before {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+
+    transform: translateX(-50%); 
+    
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid #ed4801;
+    opacity: 0;
+
+    transition: opacity 0.2s; 
+    transition-delay: 0s;
+    z-index: 9999;
+} */
+
+/* Floating Sidebar for Map Page */
+.map-sidebar {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    width: 300px;
+    background: rgba(0, 0, 0, 0.85);
+    padding: 20px;
+    border-radius: 12px;
+    border: 1px solid #ed4801;
+    z-index: 1000; /* Sit on top of map */
+    color: white;
+    backdrop-filter: blur(5px);
+    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
+}
+
+.back-btn {
+    display: inline-block;
+    color: #ccc;
+    text-decoration: none;
+    margin-bottom: 15px;
+    font-size: 0.9em;
+    transition: color 0.2s;
+}
+.back-btn:hover { color: #ed4801; }
+
+.stat-item {
+    margin-top: 10px;
+    font-size: 0.85rem;
+    color: #aaa;
+}
+.stat-highlight {
+    color: white; 
+    font-weight: bold; 
+    font-size: 1.1rem;
+}
+
+.profile-container {
+    position: relative;
+    margin-left: 10px;
+    height: 35px;
+}
+.profile-icon {
+    width: 35px;
+    height: 35px;
+    background: #ed4801; /* Orange profile background */
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.1em;
+    cursor: pointer;
+    transition: box-shadow 0.2s;
+}
+.profile-icon:hover {
+    box-shadow: 0 0 0 4px rgba(237, 72, 1, 0.3);
+}
+
+/* Dropdown Menu Box */
+.profile-dropdown {
+    position: absolute;
+    top: 45px;
+    right: 0;
+    width: 250px;
+    background: #1a1a1a;
+    border: 1px solid #333;
+    border-radius: 8px;
+    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
+    z-index: 1000;
+    padding: 15px;
+    transform: translateY(10px);
+    transition: opacity 0.2s, transform 0.2s;
+}
+.profile-dropdown.hidden {
+    display: none;
+}
+
+/* Dropdown Header Info */
+.profile-info-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-bottom: 10px;
+}
+.profile-icon-large {
+    width: 50px;
+    height: 50px;
+    background: #ff7e42;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.8em;
+    margin-bottom: 8px;
+}
+.dropdown-username {
+    font-weight: bold;
+    color: white;
+    font-size: 1.1em;
+}
+
+/* Logout Button */
+.dropdown-separator {
+    border: none;
+    border-top: 1px solid #333;
+    margin: 10px 0;
+}
+.dropdown-logout-btn {
+    width: 100%;
+    background: #ed4801;
+    color: white;
+    border: none;
+    padding: 8px;
+    border-radius: 4px;
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+
+@media (max-width: 1200px) {
+
+    /* Target the container holding the Verify/Resolve/Post buttons */
+    .detail-header-r .action-buttons {
+        /* Change the direction to vertical stacking */
+        flex-direction: column; 
+        
+        /* Ensure buttons stretch to full width of the container */
+        align-items: stretch; 
+        
+        /* Add gap for visual separation */
+        gap: 8px; 
+    }
+    
+    /* Ensure the detail redirect link (Post button) also behaves like a block button */
+    .detail-redirect {
+        justify-content: center; /* Center the text/icon in the full-width button */
+    }
+    
+    /* Ensure the action buttons themselves stretch */
+    .action-btn1 {
+        width: 100%; /* Ensure the buttons take full width */
+    }
+}
+
+/* style.css (Add these new selectors) */
+
+.alert-popup {
+    /* Position the box: Fixed allows it to float with scrolling */
+    position: fixed; 
+    top: 70px; /* Just below the 60px high header + 10px margin */
+    right: 20px;
+    
+    /* Appearance */
+    background: #ed4801; /* ALISTO Primary Color */
+    color: white;
+    padding: 15px 25px;
+    border-radius: 10px; /* Rounded corners */
+    
+    /* Layout */
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    
+    /* Shadow and Stacking */
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
+    z-index: 1000;
+    
+    /* Animation Control */
+    opacity: 0;
+    transform: translateX(100%); /* Start off-screen to the right */
+    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
+}
+
+.alert-popup.visible {
+    opacity: 1;
+    transform: translateX(0); /* Slide into view */
+}
+
+/* Ensure the initial hidden state prevents any display issues */
+.hidden {
+    display: none !important;
+}
+/* NOTE: You may need to remove 'display: none !important' from your existing 
+   .hidden CSS class in style.css if you want to rely only on the opacity/transform 
+   for the initial state, but for robust functionality, we often keep 'display: none'
+   for the .hidden state and only remove it for the sliding animation to work. 
+   We'll use a .visible class to trigger the animation. */

alisto_project/backend/templates.py

@@ -0,0 +1,43 @@
+# templates.py
+
+LOCATIONS = [
+    "Marikina", "Quezon City", "Manila", "Pasig", "Cainta", "Antipolo", 
+    "Batangas", "Tagaytay", "Davao", "Cebu", "Bicol", "Albay", 
+    "Pampanga", "Bulacan", "Laguna", "Cavite", "Tacloban", "Iligan",
+    "Navotas", "Malabon", "San Mateo", "Rizal", "Valenzuela", "Muntinlupa",
+    "Las Pinas", "Makati", "Mandaluyong", "San Juan", "Catanduanes",
+    "Isabela", "Cagayan", "Iloilo", "Samar", "Leyte", "Mindoro",
+    "General Trias", "Dasmarinas", "Bacoor", "Imus", "Tondo"
+]
+
+DISASTERS = [
+    "baha", "flood", "flooding", "flash flood", "taas ng tubig",
+    "lindol", "earthquake", "quake", "aftershock", "yanig", "uga",
+    "bagyo", "typhoon", "storm", "winds", "malakas na hangin",
+    "sunog", "fire", "nasusunog", "apoy", "fire alert",
+    "landslide", "guho", "mudslide", "falling rocks",
+    "volcano", "ashfall", "eruption", "asupre", "smog"
+]
+
+NEEDS = [
+    "rescue", "tulong", "help", "saklolo", "assist", "save us",
+    "food", "pagkain", "water", "tubig", "relief goods", "makakain",
+    "medical", "gamot", "medic", "doctor", "ambulance", "oxygen", "first aid",
+    "shelter", "evacuation", "matutuluyan", "tents", "bubong", "trapal",
+    "boat", "bangka", "firetruck", "bumbero", "rescuers"
+]
+
+# POSITIVE FRAGMENTS
+POS_INTROS = ["EMERGENCY!", "HELP!", "S.O.S.", "URGENT:", "Please help,", "Tulong po,", "Saklolo,", "Rescue needed!"]
+POS_SITUATIONS = ["trapped kami sa loob", "stuck sa bubong", "water is rising fast", "nasusunog ang bahay", "injured ang kasama ko", "stranded kami", "collapsed ang pader", "lubog na ang first floor"]
+POS_REQUESTS = ["we need {need} immediately", "send {need} ASAP", "paki-dala ng {need}", "kailangan namin ng {need}", "need {need} now!"]
+
+# NEGATIVE FRAGMENTS
+NEG_NEWS_INTROS = ["BREAKING:", "Just in:", "News Update:", "Report:", "FYI:", "Advisory:", "Headlines:", "According to news,"]
+NEG_NEWS_BODIES = ["{disaster} hits {loc}", "death toll in {loc} rises", "classes suspended in {loc}", "state of calamity declared in {loc}"]
+
+NEG_ACT_INTROS = ["I want to donate", "Looking for volunteers", "Donation drive for", "Salute to", "Praying for", "Condolence to"]
+NEG_ACT_BODIES = ["victims of {disaster} in {loc}", "our heroes in {loc}", "the brave rescuers in {loc}", "{disaster} survivors in {loc}"]
+
+NEG_DISCUSS_INTROS = ["Why is the mayor", "The corruption in", "Remembering the", "Throwback to", "Discussion:", "Opinion:", "Is it safe in"]
+NEG_DISCUSS_BODIES = ["response to {disaster} in {loc} is slow", "1990 {disaster} in {loc}", "{loc} politicians are useless", "road to {loc} is passable"]

alisto_project/backend/train_ensemble.py

@@ -0,0 +1,71 @@
+import pandas as pd
+import pickle
+import os
+from sklearn.feature_extraction.text import TfidfVectorizer
+from sklearn.svm import LinearSVC
+from sklearn.calibration import CalibratedClassifierCV
+from sklearn.pipeline import make_pipeline
+from sklearn.model_selection import train_test_split
+from sklearn.metrics import accuracy_score, classification_report
+
+# Paths
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+DATA_PATH = os.path.join(BASE_DIR, '../data/reddit_disaster_posts.csv')
+MODEL_DIR = os.path.join(BASE_DIR, 'models')
+
+# --- 1. CUSTOM TAGLISH STOP WORDS ---
+# removing these prevents the model from cheating by memorizing common grammar words
+TAGLISH_STOP_WORDS = [
+    'ang', 'mga', 'ng', 'sa', 'na', 'ko', 'mo', 'ba', 'ka', 'yung', 
+    'ni', 'no', 'at', 'o', 'kay', 'to', 'po', 'pa', 'din', 'rin', 
+    'naman', 'nyo', 'nila', 'namin', 'kasi', 'kame', 'kami', 'tayo',
+    'sana', 'lang', 'talaga', 'di', 'eh', 'oh', 'ah', 'yun', 'yan',
+    'the', 'is', 'a', 'an', 'and', 'or', 'of', 'to', 'in', 'on', 'for'
+]
+
+def train_tfidf():
+    print(f"Loading data from: {DATA_PATH}")
+    if not os.path.exists(DATA_PATH):
+        print("Error: CSV not found.")
+        return
+
+    df = pd.read_csv(DATA_PATH)
+    df['text'] = df['text'].astype(str).fillna('')
+    df = df.dropna(subset=['label'])
+    
+    X = df['text']
+    y = df['label'].astype(int)
+
+    print(f"Training TF-IDF + SVM Ensemble on {len(df)} posts...")
+
+    X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=42)
+
+    # --- 2. THE UPGRADED PIPELINE ---
+    model = make_pipeline(
+        TfidfVectorizer(
+            stop_words=TAGLISH_STOP_WORDS,
+            max_features=5000, 
+            ngram_range=(1, 3),         
+            sublinear_tf=True             
+        ),
+        CalibratedClassifierCV(LinearSVC(dual=False, class_weight='balanced'), method='sigmoid')
+    )
+
+    model.fit(X_train, y_train)
+
+    # Evaluate
+    y_pred = model.predict(X_test)
+    acc = accuracy_score(y_test, y_pred)
+    print(f"✅ TF-IDF Model Accuracy: {acc * 100:.2f}%")
+    print("Classification Report:")
+    print(classification_report(y_test, y_pred))
+
+    # Save
+    save_path = os.path.join(MODEL_DIR, 'tfidf_ensemble.pkl')
+    with open(save_path, 'wb') as f:
+        pickle.dump(model, f)
+    
+    print(f"Model saved to: {save_path}")
+
+if __name__ == "__main__":
+    train_tfidf()

alisto_project/backend/train_model.py

@@ -0,0 +1,136 @@
+import pandas as pd
+import torch
+import numpy as np
+import os
+from sklearn.model_selection import train_test_split
+from sklearn.metrics import accuracy_score, precision_recall_fscore_support
+from transformers import (
+    AutoTokenizer, 
+    AutoModelForSequenceClassification, 
+    Trainer, 
+    TrainingArguments,
+    EarlyStoppingCallback
+)
+from torch import nn
+
+# 1. Config
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+DATA_PATH = os.path.join(BASE_DIR, '../data/reddit_disaster_posts.csv')
+MODEL_OUTPUT_DIR = os.path.join(BASE_DIR, 'models/roberta_model')
+
+# --- THE UPGRADE: Multilingual Brain (English + Tagalog) ---
+MODEL_NAME = 'xlm-roberta-base'
+
+print(f"--- ALISTO: Training Multilingual Brain ({MODEL_NAME}) ---")
+
+# 2. Load Data
+if not os.path.exists(DATA_PATH):
+    print("❌ Error: CSV file not found. Run augment_data.py first!")
+    exit()
+
+df = pd.read_csv(DATA_PATH)
+df = df.dropna(subset=['text', 'label'])
+texts = df['text'].tolist()
+labels = df['label'].tolist()
+
+print(f"Loaded {len(df)} samples.")
+
+# 3. Split (80% Train, 20% Validation)
+train_texts, val_texts, train_labels, val_labels = train_test_split(
+    texts, labels, test_size=0.2, random_state=42, stratify=labels
+)
+
+# 4. Tokenize
+print(f"Downloading tokenizer for {MODEL_NAME}...")
+tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME)
+
+def tokenize_function(texts):
+    return tokenizer(texts, padding=True, truncation=True, max_length=128)
+
+train_encodings = tokenize_function(train_texts)
+val_encodings = tokenize_function(val_texts)
+
+# 5. Dataset Class
+class DisasterDataset(torch.utils.data.Dataset):
+    def __init__(self, encodings, labels):
+        self.encodings = encodings
+        self.labels = labels
+
+    def __getitem__(self, idx):
+        item = {key: torch.tensor(val[idx]) for key, val in self.encodings.items()}
+        item['labels'] = torch.tensor(self.labels[idx])
+        return item
+
+    def __len__(self):
+        return len(self.labels)
+
+train_dataset = DisasterDataset(train_encodings, train_labels)
+val_dataset = DisasterDataset(val_encodings, val_labels)
+
+# --- CUSTOM TRAINER WITH WEIGHTED LOSS ---
+# Punishes the model 3x more if it misses a Rescue Request (False Negative)
+class WeightedTrainer(Trainer):
+    def compute_loss(self, model, inputs, return_outputs=False, num_items_in_batch=None, **kwargs):
+        labels = inputs.get("labels")
+        outputs = model(**inputs)
+        logits = outputs.get("logits")
+        
+        # [1.0, 3.0] -> Label 1 is 3x more important than Label 0
+        loss_fct = nn.CrossEntropyLoss(weight=torch.tensor([1.0, 3.0]).to(model.device))
+        loss = loss_fct(logits.view(-1, self.model.config.num_labels), labels.view(-1))
+        
+        return (loss, outputs) if return_outputs else loss
+
+# Metrics
+def compute_metrics(pred):
+    labels = pred.label_ids
+    preds = pred.predictions.argmax(-1)
+    precision, recall, f1, _ = precision_recall_fscore_support(labels, preds, average='binary')
+    acc = accuracy_score(labels, preds)
+    return {
+        'accuracy': acc,
+        'f1': f1,
+        'precision': precision,
+        'recall': recall
+    }
+
+# 6. Model Initialization
+print(f"Downloading base model {MODEL_NAME}...")
+model = AutoModelForSequenceClassification.from_pretrained(MODEL_NAME, num_labels=2)
+
+# 7. Training Args
+training_args = TrainingArguments(
+    output_dir='./results',
+    num_train_epochs=15,
+    per_device_train_batch_size=8,   
+    per_device_eval_batch_size=8,
+    warmup_steps=500,
+    weight_decay=0.01,
+    learning_rate=2e-5,
+    logging_dir='./logs',
+    logging_steps=50,
+    eval_strategy="epoch",
+    save_strategy="epoch",
+    load_best_model_at_end=True,
+    metric_for_best_model="f1",
+    seed=42
+)
+
+# 8. Train
+trainer = WeightedTrainer(
+    model=model,
+    args=training_args,
+    train_dataset=train_dataset,
+    eval_dataset=val_dataset,
+    compute_metrics=compute_metrics,
+    callbacks=[EarlyStoppingCallback(early_stopping_patience=2)]
+)
+
+print("Starting training (XLM-R + Weighted Loss)...")
+trainer.train()
+
+# 9. Save
+print(f"Saving upgraded model to {MODEL_OUTPUT_DIR}...")
+model.save_pretrained(MODEL_OUTPUT_DIR)
+tokenizer.save_pretrained(MODEL_OUTPUT_DIR)
+print("✅ Multilingual Brain Training Complete.")

alisto_project/requirements.txt

@@ -0,0 +1,17 @@
+flask
+flask-sqlalchemy
+python-dotenv
+pandas
+numpy
+scikit-learn
+asyncpraw
+torch
+transformers
+sentencepiece
+protobuf
+accelerate
+flask_cors
+flask-login
+werkzeuggit rm -r --cached .
+git add .
+gunicorn

alisto_project/start.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+# 1. Start the AI Scraper in the background (&)
+# It will silently find alerts and save them to alisto.db
+python ingest_reddit.py &
+
+# 2. Start the Website in the foreground
+# This keeps the server running
+gunicorn -b 0.0.0.0:7860 app:app