Restructure to api/src and add Streamlit UI

Refactors the project layout by moving backend modules from `app` to `api`, moving ML code under `src/absa`, and updating imports, Docker entrypoints, DVC commands, and scripts to match. Replaces the HTMX/Jinja web layer with a new Streamlit frontend (`frontend/`) including analyzer, admin overview, batch, and monitor views backed by an HTTP API client. Also consolidates dependencies and tooling in `pyproject.toml`, adds a Makefile workflow, and updates tests (new Streamlit/client and pipeline tests, removed legacy web page tests).

The pipeline rule-based fallback was strengthened with clause-aware scoring, Unicode-aware tokenization for Devanagari, broader sentiment lexicons, noun-near-sentiment target extraction, and an overall fallback aspect so predictions remain useful when lexicon matches are missing.

Makefile

@@ -0,0 +1,46 @@
+.PHONY: install dev api frontend worker test lint typecheck security coverage docker-up docker-down clean
+
+# ── Setup ────────────────────────────────────────────────────────────────
+install:
+	pip install .
+
+dev:
+	pip install -e ".[dev]"
+
+# ── Services ─────────────────────────────────────────────────────────────
+api:
+	uvicorn api.main:app --host 0.0.0.0 --port 8000 --reload
+
+frontend:
+	streamlit run frontend/Home.py --server.port 8501
+
+worker:
+	celery -A api.tasks worker --loglevel=info
+
+# ── Quality gates ────────────────────────────────────────────────────────
+test:
+	PYTHONPATH=src pytest
+
+lint:
+	PYTHONPATH=src ruff check api src/absa tests
+
+typecheck:
+	PYTHONPATH=src mypy api src/absa
+
+security:
+	bandit -r api src/absa
+
+coverage:
+	PYTHONPATH=src pytest --cov=api --cov=absa --cov-report=term-missing
+
+# ── Docker ───────────────────────────────────────────────────────────────
+docker-up:
+	docker compose -f docker/docker-compose.yml up -d
+
+docker-down:
+	docker compose -f docker/docker-compose.yml down
+
+# ── Cleanup ──────────────────────────────────────────────────────────────
+clean:
+	find . -name "__pycache__" -type d -exec rm -rf {} + 2>/dev/null || true
+	rm -rf .pytest_cache .mypy_cache .ruff_cache .coverage coverage.xml htmlcov

{app → api}/main.py

@@ -1,23 +1,20 @@
-from fastapi import FastAPI
-from fastapi.middleware.cors import CORSMiddleware
+import os
 from contextlib import asynccontextmanager
+
 from dotenv import load_dotenv
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
 from slowapi import Limiter, _rate_limit_exceeded_handler
-from slowapi.util import get_remote_address
 from slowapi.errors import RateLimitExceeded
-
-import os
-from fastapi.staticfiles import StaticFiles
-from pathlib import Path
+from slowapi.util import get_remote_address
 
 load_dotenv()
 
-from app.routes import predict, results  # noqa: E402
-from app.routes import pages             # noqa: E402  Phase 2: Jinja2 page routes
-from app.middleware.metrics import instrumentator  # noqa: E402
-from app.services.absa_pipeline import pipeline  # noqa: E402
-from app.schemas.db_models import Base  # noqa: E402
-from app.middleware.dependencies import engine  # noqa: E402
+from api.middleware.dependencies import engine  # noqa: E402
+from api.middleware.metrics import instrumentator  # noqa: E402
+from api.routes import predict, results  # noqa: E402
+from api.schemas.db_models import Base  # noqa: E402
+from api.services.absa_pipeline import pipeline  # noqa: E402
 
 
 @asynccontextmanager
@@ -46,28 +43,14 @@ app = FastAPI(
 app.state.limiter = limiter
 app.add_exception_handler(RateLimitExceeded, _rate_limit_exceeded_handler)
 
-from app.middleware.csrf import CSRFMiddleware  # noqa: E402
-
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=os.getenv("CORS_ORIGINS", "http://localhost:3000,http://localhost:8000").split(","),
+    allow_origins=os.getenv("CORS_ORIGINS", "http://localhost:8000,http://localhost:8501").split(","),
     allow_credentials=True,
     allow_methods=["GET", "POST"],
     allow_headers=["*"],
 )
-app.add_middleware(CSRFMiddleware)  # Skips /api/* routes; protects HTMX form endpoints
 app.include_router(predict.router, tags=["Predict"])
 app.include_router(results.router, tags=["System"])
 
 instrumentator.instrument(app).expose(app, endpoint="/metrics")
-
-# Jinja2 / HTMX frontend routing and static files
-# Note: StaticFiles is mounted after instrumentator so prometheus
-# ignores it for /metrics, although this might still log /static requests.
-
-app.include_router(pages.router)  # include_in_schema=False is set on the router itself
-
-# Resolve path relative to this file so it works regardless of CWD.
-_STATIC_DIR = Path(__file__).parent / "static"
-_STATIC_DIR.mkdir(parents=True, exist_ok=True)  # idempotent safety guard
-app.mount("/static", StaticFiles(directory=str(_STATIC_DIR)), name="static")

{app → api}/routes/predict.py

@@ -7,11 +7,11 @@ import tempfile
 import time
 import re
 
-from app.schemas.schemas import ReviewInput, PredictionResponse, BatchJobResponse
-from app.schemas.db_models import Review, AspectResult, BatchJob
-from app.middleware.dependencies import get_db
-from app.services.absa_pipeline import pipeline
-from app.tasks.batch_tasks import process_batch
+from api.schemas.schemas import ReviewInput, PredictionResponse, BatchJobResponse
+from api.schemas.db_models import Review, AspectResult, BatchJob
+from api.middleware.dependencies import get_db
+from api.services.absa_pipeline import pipeline
+from api.tasks.batch_tasks import process_batch
 router = APIRouter()
 
 

{app → api}/services/absa_pipeline.py

@@ -12,20 +12,21 @@ Strategy:
 
 import os
 import re
-import time
 import threading
+import time
 from pathlib import Path
-from typing import List, Tuple
+from typing import List, Optional, Tuple
+
 import numpy as np
 
-from app.schemas.schemas import PredictionResponse, AspectSentiment
-from app.services.lang_service import lang_service
+from api.schemas.schemas import AspectSentiment, PredictionResponse
+from api.services.lang_service import lang_service
 
 # ── Optional heavy imports (ONNX custom models) ───────────────────────────────
 try:
     from optimum.onnxruntime import (
-        ORTModelForTokenClassification,
         ORTModelForSequenceClassification,
+        ORTModelForTokenClassification,
     )
     from transformers import AutoTokenizer
 
@@ -143,6 +144,114 @@ ASPECT_PHRASES: List[str] = sorted(
     reverse=True,
 )
 
+# ── Fallback aspect nouns ─────────────────────────────────────────────────────
+# Used when the fixed lexicon misses a comment (e.g. food/service/experience).
+# These are the nouns we anchor near sentiment words when no lexicon aspect
+# matches. English + transliterated + Devanagari.
+GENERAL_ASPECT_NOUNS: set[str] = {
+    # Experience / service
+    "food",
+    "taste",
+    "flavor",
+    "flavour",
+    "service",
+    "staff",
+    "experience",
+    "product",
+    "quality",
+    "delivery",
+    "packaging",
+    "price",
+    "cost",
+    "value",
+    "design",
+    "look",
+    "feel",
+    "build",
+    "material",
+    "comfort",
+    "durability",
+    "cleanliness",
+    "hygiene",
+    "room",
+    "location",
+    "ambience",
+    "menu",
+    "portion",
+    "hotel",
+    "restaurant",
+    "support",
+    "response",
+    "warranty",
+    "atmosphere",
+    "purchase",
+    "order",
+    "buy",
+    # Devices / electronics
+    "phone",
+    "smartphone",
+    "laptop",
+    "tablet",
+    "headphones",
+    "earphones",
+    "earbuds",
+    "watch",
+    "device",
+    "camera",
+    "screen",
+    "display",
+    "battery",
+    "speaker",
+    "speakers",
+    "keyboard",
+    "mouse",
+    "monitor",
+    "processor",
+    "performance",
+    "speed",
+    "sound",
+    "audio",
+    "picture",
+    "photo",
+    "video",
+    "signal",
+    "network",
+    "call",
+    "app",
+    "software",
+    "interface",
+    "ui",
+    "features",
+    "battery life",
+    "charging",
+    "processor",
+    "ram",
+    "memory",
+    # Hindi transliterated
+    "khana",
+    "swad",
+    "delivery",
+    "experience",
+    "speed",
+    "sound",
+    "signal",
+    # Devanagari
+    "खाना",
+    "सेवा",
+    "गुणवत्ता",
+    "कीमत",
+    "डिज़ाइन",
+    "उत्पाद",
+    "अनुभव",
+    "बैटरी",
+    "कैमरा",
+    "प्रदर्शन",
+    "आवाज़",
+    "स्पीड",
+    "डिलीवरी",
+    "स्वाद",
+}
+
 # ── Sentiment lexicon ─────────────────────────────────────────────────────────
 POSITIVE_WORDS = {
     "excellent",
@@ -182,6 +291,11 @@ POSITIVE_WORDS = {
     "recommended",
     "worth",
     "affordable",
+    "best",
+    "better",
+    "awesome",
+    "favorite",
+    "favourite",
     "value",
     "effective",
     "efficient",
@@ -215,6 +329,18 @@ POSITIVE_WORDS = {
     "shandar",
     "zabardast",
     "mast",
+    # Hindi positive (Devanagari)
+    "अच्छा",
+    "बढ़िया",
+    "शानदार",
+    "ज़बरदस्त",
+    "मस्त",
+    "पसंद",
+    "उत्तम",
+    "उम्दा",
+    "सुंदर",
+    "बेहतरीन",
+    "अद्भुत",
 }
 
 NEGATIVE_WORDS = {
@@ -271,6 +397,10 @@ NEGATIVE_WORDS = {
     "broken",
     "defective",
     "faulty",
+    "worst",
+    "worse",
+    "useless",
+    "pathetic",
     "average",
     "ordinary",
     "basic",
@@ -281,6 +411,14 @@ NEGATIVE_WORDS = {
     "bura",
     "ganda",
     "faltu",
+    # Hindi negative (Devanagari)
+    "खराब",
+    "बेकार",
+    "बुरा",
+    "घटिया",
+    "फालतू",
+    "निराश",
+    "सस्ता",
 }
 
 NEGATION_WORDS = {
@@ -322,12 +460,34 @@ INTENSIFIERS = {
 }
 
 
+# Unicode-aware token pattern. `\w` alone misses Devanagari vowel signs
+# (combining marks), which would split "खाना" into stray characters, so the
+# Devanagari block is included explicitly.
+WORD_RE = re.compile(r"[\w\u0900-\u097f'-]+")
+
+# Split a review into sentiment clauses on punctuation and conjunctions, so a
+# sentence like "food was great but service was terrible" is scored per-clause.
+# Includes English + transliterated + Devanagari conjunctions. The Devanagari
+# ones need whitespace around them, otherwise "या" matches inside "��ढ़िया".
+_CLAUSE_SPLIT_RE = re.compile(
+    r"[.!?;,]|\b(?:but|and|yet|however|although|though|while|whereas|because|"
+    r"since|so|or|nor|lekin|par|magar|aur|kintu|va|ya)\b|"
+    r"(?<=\s)(?:लेकिन|और|पर|मगर|किंतु)(?=\s)"
+)
+
+
+def _split_clauses(text: str) -> List[str]:
+    """Split a review into clauses (punctuation + conjunction boundaries)."""
+    parts = [p for p in _CLAUSE_SPLIT_RE.split(text) if p and p.strip()]
+    return parts or [text]
+
+
 def _score_sentence(sentence: str) -> Tuple[float, float]:
     """
     Return (positive_score, negative_score) for a sentence.
     Handles negation (3-word window) and intensifiers.
     """
-    words = re.findall(r"\b[\w'-]+\b", sentence.lower())
+    words = WORD_RE.findall(sentence.lower())
     pos, neg = 0.0, 0.0
     i = 0
     while i < len(words):
@@ -399,10 +559,8 @@ class ABSAPipeline:
                 self.aspect_model = ORTModelForTokenClassification.from_pretrained(
                     hf_repo_id, subfolder="aspect_extraction_int8"
                 )
-                self.sentiment_model = (
-                    ORTModelForSequenceClassification.from_pretrained(
-                        hf_repo_id, subfolder="sentiment_int8"
-                    )
+                self.sentiment_model = ORTModelForSequenceClassification.from_pretrained(
+                    hf_repo_id, subfolder="sentiment_int8"
                 )
                 print("Custom ONNX models loaded.")
             except Exception as e:
@@ -420,14 +578,8 @@ class ABSAPipeline:
                 try:
                     print(f"Loading custom ONNX models from {model_path_base}")
                     self.tokenizer = AutoTokenizer.from_pretrained("xlm-roberta-base")
-                    self.aspect_model = ORTModelForTokenClassification.from_pretrained(
-                        str(aspect_path)
-                    )
-                    self.sentiment_model = (
-                        ORTModelForSequenceClassification.from_pretrained(
-                            str(sentiment_path)
-                        )
-                    )
+                    self.aspect_model = ORTModelForTokenClassification.from_pretrained(str(aspect_path))
+                    self.sentiment_model = ORTModelForSequenceClassification.from_pretrained(str(sentiment_path))
                     print("Custom ONNX models loaded.")
                 except Exception as e:
                     print(f"Custom model load skipped: {e}")
@@ -437,7 +589,7 @@ class ABSAPipeline:
 
         self.is_loaded = True
 
-    def predict(self, text: str, requested_lang: str = None) -> PredictionResponse:
+    def predict(self, text: str, requested_lang: Optional[str] = None) -> PredictionResponse:
         start = time.time()
         detected_lang = lang_service.detect_language(text)
         actual_lang = requested_lang or detected_lang
@@ -461,14 +613,17 @@ class ABSAPipeline:
     # ── Custom ONNX path ──────────────────────────────────────────────────────
 
     def _predict_onnx(self, text: str) -> List[AspectSentiment]:
-        inputs = self.tokenizer(
-            text, return_tensors="pt", truncation=True, max_length=128
-        )
+        assert self.aspect_model is not None
+        assert self.sentiment_model is not None
+        assert self.tokenizer is not None
+        inputs = self.tokenizer(text, return_tensors="pt", truncation=True, max_length=128)
         logits = self.aspect_model(**inputs).logits[0].detach().numpy()
         preds = np.argmax(logits, axis=1)
         tokens = self.tokenizer.convert_ids_to_tokens(inputs["input_ids"][0])
 
-        raw, current, start_idx = [], [], -1
+        raw: List[Tuple[str, int, int]] = []
+        current: List[str] = []
+        start_idx = -1
         skip = {
             self.tokenizer.cls_token,
             self.tokenizer.sep_token,
@@ -519,17 +674,26 @@ class ABSAPipeline:
 
     def _predict_rule_based(self, text: str) -> List[AspectSentiment]:
         text_lower = text.lower()
-        sentences = re.split(r"(?<=[.!?])\s+", text)
+        clauses = _split_clauses(text)
         found_aspects = self._extract_aspects(text_lower)
 
+        # Tier 2: no lexicon aspect matched — anchor nouns near sentiment words.
+        if not found_aspects:
+            found_aspects = self._extract_targets_from_sentiment(text_lower)
+
+        # Tier 3: still nothing — fall back to review-level sentiment on a
+        # generic aspect so every input produces a useful result.
+        if not found_aspects:
+            found_aspects = [("Overall", 0, len(text))]
+
         results = []
         for aspect_label, start_char, end_char in found_aspects:
-            # Find the sentence(s) mentioning this aspect for focused scoring
+            # Score only the clause(s) mentioning this aspect so that mixed
+            # sentences ("food was great but service was terrible") don't
+            # cancel each other into neutral.
             aspect_lower = aspect_label.lower()
-            context_sentences = [s for s in sentences if aspect_lower in s.lower()] or [
-                text
-            ]
-            context = " ".join(context_sentences)
+            context_clauses = [c for c in clauses if aspect_lower in c.lower()] or [text]
+            context = " ".join(context_clauses)
 
             pos, neg = _score_sentence(context)
 
@@ -550,6 +714,33 @@ class ABSAPipeline:
             )
         return results
 
+    def _extract_targets_from_sentiment(self, text_lower: str) -> List[Tuple[str, int, int]]:
+        """Fallback aspect extraction: nouns found near sentiment words.
+
+        Handles cases like "The food was great" (noun before the sentiment
+        word) and "great camera" (noun after it), plus Devanagari text.
+        """
+        tokens = [(m.start(), m.end(), m.group()) for m in WORD_RE.finditer(text_lower)]
+        sent_words = POSITIVE_WORDS | NEGATIVE_WORDS
+
+        targets: List[Tuple[str, int, int]] = []
+        seen_ranges: List[Tuple[int, int]] = []
+
+        for i, (_, _, token) in enumerate(tokens):
+            if token not in sent_words:
+                continue
+            window = tokens[max(0, i - 4) : i] + tokens[i + 1 : i + 5]
+            for s, e, noun in window:
+                if noun in GENERAL_ASPECT_NOUNS:
+                    if any(s >= r0 and e <= r1 for r0, r1 in seen_ranges):
+                        continue
+                    targets.append((noun.title(), s, e))
+                    seen_ranges.append((s, e))
+                    break
+
+        targets.sort(key=lambda x: x[1])
+        return targets
+
     def _extract_aspects(self, text_lower: str) -> List[Tuple[str, int, int]]:
         """Find aspect keyword matches; return (label, start, end) sorted by position."""
         found: List[Tuple[str, int, int]] = []

{app → api}/tasks/batch_tasks.py

@@ -1,7 +1,7 @@
-from app.tasks import celery_app
-from app.services.absa_pipeline import pipeline
-from app.middleware.dependencies import SessionLocal
-from app.schemas.db_models import BatchJob, AspectResult, Review
+from api.tasks import celery_app
+from api.services.absa_pipeline import pipeline
+from api.middleware.dependencies import SessionLocal
+from api.schemas.db_models import BatchJob, AspectResult, Review
 import pandas as pd
 import os
 import csv

app/core/templates.py

@@ -1,36 +0,0 @@
-"""
-Centralized Jinja2Templates instance.
-
-Kept in api/app/core/ so every page-rendering router imports from one place,
-avoiding multiple conflicting Template objects pointing at the same directory.
-
-WHY THIS FILE EXISTS
---------------------
-FastAPI's Jinja2Templates must be initialised with a directory path.
-Centralising it here means that when Phase 3-5 routers add fragment endpoints
-they import `templates` from here — no duplication, no divergence.
-"""
-from __future__ import annotations
-
-from pathlib import Path
-
-from fastapi import Request
-from fastapi.templating import Jinja2Templates
-
-# Resolve relative to this file:
-#   api/app/core/templates.py  →  api/app/templates/
-_TEMPLATE_DIR: Path = Path(__file__).parent.parent / "templates"
-
-templates = Jinja2Templates(directory=str(_TEMPLATE_DIR))
-
-
-# ── Global template context processor ─────────────────────────────────────────
-# Ensures every template rendered via this instance always has access to
-# csrf_token — even partial/fragment templates that don't go through _base_ctx.
-
-def _csrf_processor(request: Request) -> dict:  # type: ignore[no-redef]
-    from app.middleware.csrf import generate_csrf_token
-    return {"csrf_token": generate_csrf_token()}
-
-
-templates.context_processors.append(_csrf_processor)  # type: ignore[arg-type]

app/middleware/csrf.py

@@ -1,59 +0,0 @@
-import os
-import re
-from typing import Optional
-from itsdangerous import URLSafeTimedSerializer, BadSignature, SignatureExpired
-from starlette.middleware.base import BaseHTTPMiddleware
-from starlette.requests import Request
-from starlette.responses import Response
-
-_CSRF_SECRET = os.getenv("CSRF_SECRET", "unsafe-default-change-in-production")
-_CSRF_SALT = "csrf-token"
-_SAFE_METHODS = {"GET", "HEAD", "OPTIONS", "TRACE"}
-_EXEMPT_PATHS = {"/metrics", "/health", "/info", "/docs", "/openapi.json"}
-
-_serializer = URLSafeTimedSerializer(_CSRF_SECRET, salt=_CSRF_SALT)
-
-
-def generate_csrf_token() -> str:
-    return _serializer.dumps("csrf")
-
-
-def validate_csrf_token(token: str, max_age: int = 3600) -> bool:
-    try:
-        _serializer.loads(token, max_age=max_age)
-        return True
-    except (BadSignature, SignatureExpired):
-        return False
-
-
-class CSRFMiddleware(BaseHTTPMiddleware):
-    async def dispatch(self, request: Request, call_next):
-        path = request.url.path
-        needs_csrf = request.method in {"POST"} and path.endswith("/fragment")
-        is_html_page = request.method in _SAFE_METHODS and not path.startswith("/api/") and not path.startswith("/static/") and path not in _EXEMPT_PATHS
-
-        if needs_csrf:
-            csrf_cookie = request.cookies.get("csrf_token", "")
-            csrf_header = request.headers.get("X-CSRF-Token", "")
-            token = csrf_header or csrf_cookie
-
-            if token and not validate_csrf_token(str(token)):
-                from fastapi.responses import HTMLResponse
-                return HTMLResponse(
-                    content="<h1>403: CSRF validation failed</h1><p>Invalid or expired token. Please refresh the page.</p>",
-                    status_code=403,
-                )
-
-        response: Response = await call_next(request)
-
-        if is_html_page:
-            response.set_cookie(
-                key="csrf_token",
-                value=generate_csrf_token(),
-                max_age=3600,
-                secure=False,
-                httponly=True,
-                samesite="lax",
-            )
-
-        return response

app/routes/pages.py

@@ -1,327 +0,0 @@
-"""
-Page routes — Jinja2/HTMX web frontend.
-
-WHY THIS FILE EXISTS
---------------------
-All HTML-serving GET routes live here, completely separate from the JSON REST
-routes in routes/predict.py and routes/results.py.  This boundary means:
-
-  • REST routes never return HTML accidentally.
-  • Page routes never appear in the OpenAPI schema (include_in_schema=False).
-  • Future phases add HTMX fragment endpoints alongside these page routes
-    without touching any existing API code.
-
-WHAT THIS FILE DOES (Phase 2)
-------------------------------
-Registers four GET routes that render placeholder Jinja2 templates:
-  GET /           → redirect to /predict
-  GET /predict    → pages/predict.html
-  GET /batch      → pages/batch.html
-  GET /monitor    → pages/monitor.html
-
-No business logic.  No inference.  No database queries.
-The routes exist only to prove the template rendering infrastructure works.
-
-HTMX fragment endpoints (POST /predict/fragment, GET /batch/progress/{id},
-GET /monitor/health-partial) will be added in Phases 3-5.
-"""
-from __future__ import annotations
-
-from fastapi import APIRouter, Request, Depends, Form
-from fastapi.responses import HTMLResponse
-from sqlalchemy.orm import Session
-
-from app.core.templates import templates
-from app.middleware.csrf import generate_csrf_token
-from app.middleware.dependencies import get_db
-
-# include_in_schema=False keeps these HTML routes out of the OpenAPI / Swagger UI.
-router = APIRouter(include_in_schema=False)
-
-# ── Navigation structure ───────────────────────────────────────────────────────
-# Mirrors the NAV constant in the React Sidebar.jsx so sidebar rendering is
-# driven from a single Python list rather than hard-coded in every template.
-_NAV_ITEMS: list[dict[str, str]] = [
-    {"path": "/predict", "icon": "psychology",   "label": "Predictor"},
-    {"path": "/batch",   "icon": "cloud_upload", "label": "Batch Analytics"},
-    {"path": "/monitor", "icon": "monitoring",   "label": "System Health"},
-]
-
-
-def _base_ctx(request: Request, page_title: str, **extra: object) -> dict:
-    """
-    Build the Jinja2 template context that base.html expects.
-
-    Every page renderer calls this so the sidebar and header always receive
-    the nav items and the current path (for active-link highlighting).
-    Also includes CSRF token for HTMX form submissions.
-    """
-    from app.middleware.csrf import generate_csrf_token
-    return {
-        "request":      request,          # required by Jinja2Templates
-        "page_title":   page_title,
-        "nav_items":    _NAV_ITEMS,
-        "current_path": request.url.path,
-        "csrf_token":   generate_csrf_token(),
-        **extra,
-    }
-
-
-# ── Routes ─────────────────────────────────────────────────────────────────────
-
-@router.get("/", response_class=HTMLResponse)
-async def index(request: Request) -> HTMLResponse:
-    """Root → serve the Predict page (same behaviour as React's Navigate redirect)."""
-    return templates.TemplateResponse(
-        "pages/predict.html",
-        _base_ctx(request, "Live Predictor"),
-    )
-
-
-@router.get("/predict", response_class=HTMLResponse)
-async def predict_page(request: Request) -> HTMLResponse:
-    """
-    Jinja2 Live Predictor page.
-    Phase 2: renders the layout shell with a placeholder content block.
-    Phase 3: the content block will contain the HTMX predict form + result panel.
-    """
-    return templates.TemplateResponse(
-        "pages/predict.html",
-        _base_ctx(request, "Live Predictor"),
-    )
-
-
-@router.get("/batch", response_class=HTMLResponse)
-async def batch_page(request: Request) -> HTMLResponse:
-    """
-    Jinja2 Batch Analytics page.
-    Phase 2: placeholder.
-    Phase 4: file upload form + progress polling.
-    """
-    return templates.TemplateResponse(
-        "pages/batch.html",
-        _base_ctx(request, "Batch Analytics"),
-    )
-
-
-from app.routes.results import health_check
-
-@router.get("/monitor", response_class=HTMLResponse)
-async def monitor_page(request: Request) -> HTMLResponse:
-    """
-    Jinja2 System Monitor page.
-    Phase 5: live health status + performance metrics.
-    """
-    try:
-        health = await health_check()
-        ctx = _base_ctx(request, "System Monitor", health=health, error=None)
-    except Exception:
-        ctx = _base_ctx(request, "System Monitor", health=None, error="Service temporarily unavailable")
-        
-    return templates.TemplateResponse("pages/monitor.html", ctx)
-# ── SSE Endpoint for batch progress ──────────────────────────────────────────
-
-import asyncio
-import json
-from sse_starlette.sse import EventSourceResponse
-
-@router.get("/api/batch/progress/{job_id}")
-async def batch_progress_sse(job_id: str, db: Session = Depends(get_db)):
-    """
-    SSE endpoint for live batch progress updates.
-    Clients connect via EventSource and receive progress events every 2 seconds.
-    """
-    async def event_generator():
-        try:
-            import re
-            if not re.match(r'^[a-fA-F0-9\-]{36}$', job_id):
-                yield {"event": "error", "data": json.dumps({"detail": "Invalid job ID"})}
-                return
-
-            while True:
-                job = await get_batch_status(job_id, db)
-                data = {
-                    "job_id": job.job_id,
-                    "status": job.status,
-                    "total_reviews": job.total_reviews,
-                    "processed": job.processed,
-                    "result_url": job.result_url,
-                }
-                yield {"event": "progress", "data": json.dumps(data)}
-
-                if job.status in ("completed", "failed"):
-                    yield {"event": job.status, "data": json.dumps(data)}
-                    break
-
-                await asyncio.sleep(2)
-        except Exception:
-            yield {"event": "error", "data": json.dumps({"detail": "Failed to fetch job progress"})}
-
-    return EventSourceResponse(event_generator())
-
-# ── Phase 3 HTMX Endpoints ───────────────────────────────────────────────────
-
-from app.schemas.schemas import ReviewInput
-from app.routes.predict import predict as predict_json
-
-@router.post("/predict/fragment", response_class=HTMLResponse)
-async def predict_fragment(
-    request: Request,
-    text: str = Form(...),
-    language: str = Form("auto"),
-    db: Session = Depends(get_db)
-) -> HTMLResponse:
-    """
-    Phase 3: HTMX partial for the Predict page.
-    Calls the EXACT SAME prediction logic as the JSON API.
-    """
-    try:
-        if language == "auto":
-            language = None
-            
-        prediction = await predict_json(ReviewInput(text=text, language=language), db)
-        return templates.TemplateResponse(
-            "partials/predict_result.html",
-            {"request": request, "result": prediction, "error": None}
-        )
-    except Exception:
-        return templates.TemplateResponse(
-            "partials/predict_result.html",
-            {"request": request, "result": None, "error": "Analysis failed. Please try again."}
-        )
-
-# ── Phase 4 HTMX Endpoints ───────────────────────────────────────────────────
-
-from fastapi import UploadFile, File
-from app.routes.predict import predict_batch, get_batch_status
-
-@router.post("/batch/fragment", response_class=HTMLResponse)
-async def batch_fragment(
-    request: Request,
-    file: UploadFile = File(...),
-    db: Session = Depends(get_db)
-) -> HTMLResponse:
-    """
-    Phase 4: HTMX partial for starting a batch job.
-    """
-    try:
-        response = await predict_batch(file, db)
-        return templates.TemplateResponse(
-            "partials/batch_progress.html",
-            {"request": request, "job": response, "error": None}
-        )
-    except Exception:
-        return templates.TemplateResponse(
-            "partials/batch_progress.html",
-            {"request": request, "job": None, "error": "Batch processing failed. Please try again."}
-        )
-
-@router.get("/batch/progress/{job_id}", response_class=HTMLResponse)
-async def batch_progress_fragment(
-    request: Request,
-    job_id: str,
-    db: Session = Depends(get_db)
-) -> HTMLResponse:
-    """
-    Phase 4: HTMX partial for polling batch job status.
-    """
-    try:
-        job = await get_batch_status(job_id, db)
-        return templates.TemplateResponse(
-            "partials/batch_progress.html",
-            {"request": request, "job": job, "error": None}
-        )
-    except Exception:
-        return templates.TemplateResponse(
-            "partials/batch_progress.html",
-            {"request": request, "job": None, "error": "Failed to retrieve job status."}
-        )
-
-# ── Phase 5 HTMX Endpoints ───────────────────────────────────────────────────
-
-@router.get("/monitor/health-partial", response_class=HTMLResponse)
-async def monitor_health_fragment(request: Request) -> HTMLResponse:
-    """
-    Phase 5: HTMX partial for polling the system health status.
-    Uses the exact same health logic as the JSON API.
-    """
-    try:
-        health = await health_check()
-        return templates.TemplateResponse(
-            "partials/monitor_health.html",
-            {"request": request, "health": health, "error": None}
-        )
-    except Exception:
-        return templates.TemplateResponse(
-            "partials/monitor_health.html",
-            {"request": request, "health": None, "error": "Health check failed. Service may be unavailable."}
-        )
-
-import pandas as pd
-from pathlib import Path
-import json
-
-@router.get("/batch/charts/{job_id}", response_class=HTMLResponse)
-async def batch_charts_fragment(request: Request, job_id: str) -> HTMLResponse:
-    """
-    Phase 5.6: HTMX partial for rendering charts.
-    Parses the generated CSV and passes JSON directly to the template for Chart.js.
-    """
-    try:
-        file_path = Path(f"data/results/{job_id}.csv")
-        if not file_path.exists():
-            return templates.TemplateResponse("partials/batch_charts.html", {"request": request, "error": "CSV not found"})
-
-        df = pd.read_csv(file_path)
-
-        lang_pie = []
-        if "language" in df.columns:
-            counts = df["language"].value_counts().to_dict()
-            lang_pie = [{"name": str(k), "value": int(v)} for k, v in counts.items()]
-
-        aspect_heat = []
-        if "aspect" in df.columns and "sentiment" in df.columns:
-            # Group by aspect and sentiment
-            grouped = df.groupby(["aspect", "sentiment"]).size().unstack(fill_value=0)
-            for aspect, row in grouped.iterrows():
-                if pd.isna(aspect) or not aspect:
-                    continue
-                aspect_heat.append({
-                    "aspect": str(aspect),
-                    "positive": int(row.get("positive", 0)),
-                    "negative": int(row.get("negative", 0)),
-                    "neutral": int(row.get("neutral", 0)),
-                    "conflict": int(row.get("conflict", 0))
-                })
-
-        sent_line = []
-        if "sentiment" in df.columns:
-            df_sent = df[df["sentiment"].notna()]
-            n = len(df_sent)
-            # Create 7 chunks for the line chart
-            chunk_size = max(1, n // 7) if n > 0 else 1
-            for i in range(7):
-                chunk = df_sent.iloc[i*chunk_size : (i+1)*chunk_size]
-                if chunk.empty:
-                    break
-                counts = chunk["sentiment"].value_counts().to_dict()
-                sent_line.append({
-                    "name": f"Batch {i+1}",
-                    "positive": int(counts.get("positive", 0)),
-                    "negative": int(counts.get("negative", 0)),
-                    "neutral": int(counts.get("neutral", 0)),
-                    "conflict": int(counts.get("conflict", 0))
-                })
-
-        return templates.TemplateResponse(
-            "partials/batch_charts.html",
-            {
-                "request": request,
-                "language_pie": json.dumps(lang_pie),
-                "aspect_heatmap": json.dumps(aspect_heat),
-                "sentiment_chart": json.dumps(sent_line),
-                "error": None
-            }
-        )
-    except Exception:
-        return templates.TemplateResponse("partials/batch_charts.html", {"request": request, "error": "An unexpected error occurred while generating charts."})

app/static/css/app.css

@@ -1,497 +0,0 @@
-/*
- * SentimentAI — Application Design System
- *
- * WHY THIS FILE EXISTS
- * --------------------
- * The React dashboard used Tailwind's @apply directive to define component
- * classes (badge-positive, card, btn-primary, etc.) inside index.css.  Those
- * @apply rules require a compiled Tailwind build step which we are eliminating.
- *
- * This file replaces index.css + the @apply rules with equivalent plain CSS.
- * Tailwind utility classes (bg-*, text-*, flex, etc.) are still available via
- * the CDN Play CDN loaded in base.html — this file only contains component-level
- * classes that the CDN cannot generate from the HTML scan.
- *
- * Design token values are taken verbatim from dashboard/tailwind.config.js.
- * Do not change token values here without updating the Tailwind CDN config in
- * base.html — they must stay in sync.
- *
- * SECTIONS
- * --------
- *   1. Base / Reset
- *   2. Material Symbols Outlined icon font
- *   3. Scrollbar
- *   4. Focus ring
- *   5. Layout helpers  (glass-panel, sidebar, overlay)
- *   6. Navigation       (nav-item, nav-item-active)
- *   7. Badges           (badge-positive, -negative, -neutral, -processing, -error)
- *   8. Highlights       (highlight-positive, -negative, -neutral)
- *   9. Cards            (card, card-low, stat-card)
- *  10. Form controls    (input-base, textarea reset)
- *  11. Button           (btn-primary)
- *  12. Drag-and-drop    (drag-active)
- *  13. HTMX             (htmx-indicator)
- *  14. Animations       (keyframes + helper classes)
- *  15. Toast notices
- */
-
-/* ── 1. Base / Reset ────────────────────────────────────────────────────────── */
-
-html {
-  color-scheme: dark;
-  scroll-behavior: smooth;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  background-color: #0b1326;
-  color: #dae2fd;
-  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
-  min-height: 100vh;
-  margin: 0;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* ── 2. Material Symbols Outlined ───────────────────────────────────────────── */
-/*
- * Mirrors the class defined in React's index.css exactly.
- * The font itself is loaded via Google Fonts CDN in base.html.
- */
-.material-symbols-outlined {
-  font-family: 'Material Symbols Outlined';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 20px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-smoothing: antialiased;
-  user-select: none;
-  vertical-align: middle;
-}
-
-/* ── 3. Scrollbar ────────────────────────────────────────────────────────────── */
-
-::-webkit-scrollbar          { width: 6px; height: 6px; }
-::-webkit-scrollbar-track    { background: transparent; }
-::-webkit-scrollbar-thumb    { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }
-
-/* ── 4. Focus ring ──────────────────────────────────────────────────────────── */
-
-:focus-visible {
-  outline: 2px solid #c0c1ff;
-  outline-offset: 2px;
-}
-
-/* ── 5. Layout helpers ──────────────────────────────────────────────────────── */
-
-.glass-panel {
-  background-color: rgba(23, 31, 51, 0.75);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-/* Sidebar slide-in / slide-out on mobile */
-.sidebar {
-  transform: translateX(-100%);
-  transition: transform 250ms ease-out;
-}
-.sidebar.sidebar--open {
-  transform: translateX(0);
-}
-@media (min-width: 768px) {
-  .sidebar {
-    transform: translateX(0);
-  }
-}
-
-/* Mobile overlay (backdrop) */
-.sidebar-overlay {
-  display: none;
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  z-index: 40;
-}
-.sidebar-overlay.sidebar-overlay--visible {
-  display: block;
-}
-
-/* ── 6. Navigation ──────────────────────────────────────────────────────────── */
-
-.nav-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
-  border-radius: 8px;
-  color: #c7c4d7;
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 500;
-  text-decoration: none;
-  cursor: pointer;
-  transition: color 150ms ease, background-color 150ms ease;
-}
-.nav-item:hover {
-  background-color: rgba(255, 255, 255, 0.05);
-  color: #dae2fd;
-}
-
-.nav-item-active {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
-  border-radius: 8px;
-  color: #c0c1ff;
-  background-color: rgba(255, 255, 255, 0.07);
-  border-right: 2px solid #c0c1ff;
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 600;
-  text-decoration: none;
-}
-
-/* ── 7. Badges ──────────────────────────────────────────────────────────────── */
-/*
- * All badges share the same structural CSS.  The colour variant is applied
- * via the class suffix.  Each badge is intentionally uppercase + monospace
- * to match the React component styling.
- */
-
-.badge-base {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 8px;
-  border-radius: 9999px;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 11px;
-  line-height: 16px;
-  font-weight: 500;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.badge-positive {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 8px;
-  border-radius: 9999px;
-  background-color: rgba(78, 222, 163, 0.10);
-  color: #4edea3;
-  border: 1px solid rgba(78, 222, 163, 0.25);
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 11px;
-  line-height: 16px;
-  font-weight: 500;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.badge-negative {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 8px;
-  border-radius: 9999px;
-  background-color: rgba(255, 180, 171, 0.10);
-  color: #ffb4ab;
-  border: 1px solid rgba(255, 180, 171, 0.25);
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 11px;
-  line-height: 16px;
-  font-weight: 500;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.badge-neutral {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 8px;
-  border-radius: 9999px;
-  background-color: rgba(144, 143, 160, 0.10);
-  color: #c7c4d7;
-  border: 1px solid rgba(144, 143, 160, 0.25);
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 11px;
-  line-height: 16px;
-  font-weight: 500;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.badge-processing {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 8px;
-  border-radius: 9999px;
-  background-color: rgba(192, 193, 255, 0.10);
-  color: #c0c1ff;
-  border: 1px solid rgba(192, 193, 255, 0.25);
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 11px;
-  line-height: 16px;
-  font-weight: 500;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  animation: pulse-badge 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-.badge-error {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 8px;
-  border-radius: 9999px;
-  background-color: rgba(255, 180, 171, 0.10);
-  color: #ffb4ab;
-  border: 1px solid rgba(255, 180, 171, 0.25);
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 11px;
-  line-height: 16px;
-  font-weight: 500;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-/* Dot inside badge */
-.badge-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 9999px;
-  flex-shrink: 0;
-  display: inline-block;
-}
-.badge-dot--positive { background-color: #4edea3; }
-.badge-dot--negative { background-color: #ffb4ab; }
-.badge-dot--neutral  { background-color: #908fa0; }
-.badge-dot--primary  { background-color: #c0c1ff; }
-.badge-dot--error    { background-color: #ffb4ab; }
-
-/* ── 8. Highlights (annotated text) ─────────────────────────────────────────── */
-/*
- * Applied by the server-side annotated-text builder (Phase 3) to wrap
- * aspect spans inside the review text.
- */
-
-.highlight-positive {
-  background-color: rgba(78, 222, 163, 0.15);
-  color: #4edea3;
-  border: 1px solid rgba(78, 222, 163, 0.30);
-  border-radius: 4px;
-  padding: 0 4px;
-  margin: 0 2px;
-  font-weight: 500;
-}
-
-.highlight-negative {
-  background-color: rgba(255, 180, 171, 0.15);
-  color: #ffb4ab;
-  border: 1px solid rgba(255, 180, 171, 0.30);
-  border-radius: 4px;
-  padding: 0 4px;
-  margin: 0 2px;
-  font-weight: 500;
-}
-
-.highlight-neutral {
-  background-color: rgba(144, 143, 160, 0.15);
-  color: #c7c4d7;
-  border: 1px solid rgba(144, 143, 160, 0.25);
-  border-radius: 4px;
-  padding: 0 4px;
-  margin: 0 2px;
-  font-weight: 500;
-}
-
-/* ── 9. Cards ────────────────────────────────────────────────────────────────── */
-
-.card {
-  background-color: #171f33;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  padding: 24px;
-}
-
-.card-low {
-  background-color: #131b2e;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  padding: 24px;
-}
-
-.stat-card {
-  background-color: #171f33;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  padding: 24px;
-  position: relative;
-  overflow: hidden;
-}
-
-/* ── 10. Form controls ──────────────────────────────────────────────────────── */
-
-.input-base {
-  background-color: #0b1326;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 8px;
-  padding: 8px 12px;
-  font-size: 14px;
-  line-height: 20px;
-  color: #dae2fd;
-  width: 100%;
-  transition: border-color 150ms ease, box-shadow 150ms ease;
-  appearance: none;
-  -webkit-appearance: none;
-}
-
-.input-base::placeholder {
-  color: rgba(199, 196, 215, 0.60);
-}
-
-.input-base:focus {
-  outline: none;
-  border-color: #c0c1ff;
-  box-shadow: 0 0 0 1px rgba(192, 193, 255, 0.40);
-}
-
-/* Select arrow */
-select.input-base {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c7c4d7' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 10px center;
-  padding-right: 32px;
-  cursor: pointer;
-}
-
-/* Textarea */
-textarea.input-base {
-  resize: vertical;
-  font-family: inherit;
-  line-height: 1.6;
-}
-
-/* ── 11. Button — primary ────────────────────────────────────────────────────── */
-
-.btn-primary {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  background-color: #c0c1ff;
-  color: #1000a9;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 500;
-  letter-spacing: 0.05em;
-  padding: 10px 20px;
-  border-radius: 8px;
-  border: none;
-  cursor: pointer;
-  text-decoration: none;
-  transition: filter 150ms ease, transform 150ms ease;
-  white-space: nowrap;
-}
-.btn-primary:hover  { filter: brightness(1.10); }
-.btn-primary:active { transform: scale(0.98); }
-.btn-primary:disabled,
-.btn-primary[disabled] {
-  opacity: 0.50;
-  cursor: not-allowed;
-  transform: none;
-  pointer-events: none;
-}
-
-/* ── 12. Drag-and-drop ──────────────────────────────────────────────────────── */
-
-.drag-active {
-  border-color: rgba(192, 193, 255, 0.70) !important;
-  background-color: rgba(192, 193, 255, 0.04) !important;
-}
-
-/* ── 13. HTMX indicators ────────────────────────────────────────────────────── */
-/*
- * HTMX adds .htmx-request to the element that triggered the request.
- * Elements with .htmx-indicator are hidden by default and shown during request.
- */
-.htmx-indicator                        { display: none; }
-.htmx-request .htmx-indicator          { display: flex; }
-.htmx-request.htmx-indicator           { display: flex; }
-
-/* Progress bar fill animation */
-.progress-bar {
-  transition: width 500ms ease;
-}
-
-/* ── 14. Animations ──────────────────────────────────────────────────────────── */
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-@keyframes slideIn {
-  from { opacity: 0; transform: translateY(8px); }
-  to   { opacity: 1; transform: translateY(0);   }
-}
-
-@keyframes pulse-badge {
-  0%, 100% { opacity: 1; }
-  50%       { opacity: 0.6; }
-}
-
-@keyframes pulse-dot {
-  0%, 100% { opacity: 1; }
-  50%       { opacity: 0.4; }
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg);   }
-  to   { transform: rotate(360deg); }
-}
-
-.animate-fade-in   { animation: fadeIn 0.20s ease-out; }
-.animate-slide-in  { animation: slideIn 0.25s ease-out; }
-.animate-spin      { animation: spin 1s linear infinite; }
-.animate-pulse-slow { animation: pulse-dot 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
-
-/* ── 15. Toast notifications ─────────────────────────────────────────────────── */
-/*
- * Toasts are managed by Alpine.js appState().
- * Base styles here; position and z-index are set with Tailwind utilities in base.html.
- */
-.toast {
-  padding: 12px 16px;
-  border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background-color: #222a3d;
-  color: #dae2fd;
-  font-size: 14px;
-  max-width: 380px;
-  pointer-events: auto;
-  transition: opacity 150ms ease, transform 150ms ease;
-}
-.toast--success { border-color: rgba(78, 222, 163, 0.30);  color: #4edea3; }
-.toast--error   { border-color: rgba(255, 180, 171, 0.30); color: #ffb4ab; }
-.toast--info    { border-color: rgba(192, 193, 255, 0.20); color: #dae2fd; }

app/templates/base.html

@@ -1,449 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="dark">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>{% block title %}{{ page_title }}{% endblock %} — SentimentAI</title>
-  <meta name="description" content="{% block description %}Multilingual Aspect-Based Sentiment Analysis Dashboard{% endblock %}" />
-  <meta name="csrf-token" content="{{ csrf_token }}">
-
-  {# ── Fonts ────────────────────────────────────────────────────────────────── #}
-  {# Inter replaces Geist (same design language, available on Google Fonts CDN). #}
-  {# JetBrains Mono is used verbatim from the original tailwind.config.js.      #}
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
-        rel="stylesheet" />
-
-  {# ── Material Symbols Outlined icon font ──────────────────────────────────── #}
-  {# Variable-font version so FILL and wght axes are available (matching React). #}
-  <link rel="stylesheet"
-        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
-
-  {#
-    ── Tailwind CSS (Play CDN) ───────────────────────────────────────────────
-    The CDN version scans the DOM at runtime and generates utilities on demand.
-    This eliminates the npm build step.  Custom design tokens from the original
-    tailwind.config.js are provided in the tailwind.config object below.
-
-    NOTE: The config <script> MUST come AFTER the CDN <script> tag.
-  #}
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-    tailwind.config = {
-      darkMode: 'class',
-      theme: {
-        extend: {
-          colors: {
-            // Surface palette — from tailwind.config.js
-            "surface":                   "#0b1326",
-            "surface-dim":               "#0b1326",
-            "surface-bright":            "#31394d",
-            "surface-container-lowest":  "#060e20",
-            "surface-container-low":     "#131b2e",
-            "surface-container":         "#171f33",
-            "surface-container-high":    "#222a3d",
-            "surface-container-highest": "#2d3449",
-            "surface-variant":           "#2d3449",
-            "background":                "#0b1326",
-            // On-surface
-            "on-surface":                "#dae2fd",
-            "on-surface-variant":        "#c7c4d7",
-            "on-background":             "#dae2fd",
-            // Primary
-            "primary":                   "#c0c1ff",
-            "primary-container":         "#8083ff",
-            "on-primary":                "#1000a9",
-            // Secondary
-            "secondary":                 "#c4c7c9",
-            // Tertiary (positive sentiment — green)
-            "tertiary":                  "#4edea3",
-            "tertiary-container":        "#00885d",
-            "on-tertiary":               "#003824",
-            // Error (negative sentiment — red)
-            "error":                     "#ffb4ab",
-            "error-container":           "#93000a",
-            "on-error":                  "#690005",
-            // Outline
-            "outline":                   "#908fa0",
-            "outline-variant":           "#464554",
-            // Semantic aliases
-            "positive":                  "#4edea3",
-            "negative":                  "#ffb4ab",
-            "warning":                   "#f5c542",
-          },
-          fontFamily: {
-            sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"],
-            mono: ["JetBrains Mono", "ui-monospace", "monospace"],
-          },
-          fontSize: {
-            "display":     ["36px", { lineHeight: "44px", letterSpacing: "-0.025em", fontWeight: "600" }],
-            "headline-lg": ["32px", { lineHeight: "40px", letterSpacing: "-0.02em",  fontWeight: "600" }],
-            "headline-md": ["24px", { lineHeight: "32px", letterSpacing: "-0.01em",  fontWeight: "600" }],
-            "headline-sm": ["20px", { lineHeight: "28px",                             fontWeight: "500" }],
-            "title-lg":    ["16px", { lineHeight: "24px",                             fontWeight: "600" }],
-            "title-md":    ["14px", { lineHeight: "20px",                             fontWeight: "600" }],
-            "body-lg":     ["16px", { lineHeight: "24px",                             fontWeight: "400" }],
-            "body-md":     ["14px", { lineHeight: "20px",                             fontWeight: "400" }],
-            "body-sm":     ["12px", { lineHeight: "16px",                             fontWeight: "400" }],
-            "label-lg":    ["14px", { lineHeight: "20px", letterSpacing: "0.02em",    fontWeight: "500" }],
-            "label-md":    ["12px", { lineHeight: "16px", letterSpacing: "0.05em",    fontWeight: "500" }],
-            "label-sm":    ["11px", { lineHeight: "16px", letterSpacing: "0.06em",    fontWeight: "500" }],
-          },
-          spacing: {
-            "xs":  "4px",
-            "sm":  "8px",
-            "md":  "12px",
-            "lg":  "16px",
-            "xl":  "24px",
-            "2xl": "32px",
-            "3xl": "48px",
-          },
-          borderRadius: {
-            "sm":      "4px",
-            "DEFAULT": "6px",
-            "md":      "8px",
-            "lg":      "12px",
-            "xl":      "16px",
-            "2xl":     "20px",
-            "full":    "9999px",
-          },
-          boxShadow: {
-            "card":           "0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3)",
-            "elevated":       "0 4px 16px rgba(0,0,0,0.5)",
-            "glow-primary":   "0 0 20px rgba(192,193,255,0.15)",
-            "glow-positive":  "0 0 12px rgba(78,222,163,0.20)",
-            "glow-negative":  "0 0 12px rgba(255,180,171,0.20)",
-          },
-          backdropBlur: {
-            "glass": "12px",
-          },
-          animation: {
-            "pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
-            "fade-in":    "fadeIn 0.2s ease-out",
-            "slide-in":   "slideIn 0.25s ease-out",
-          },
-          keyframes: {
-            fadeIn:  { from: { opacity: "0" },                               to: { opacity: "1" } },
-            slideIn: { from: { opacity: "0", transform: "translateY(8px)" }, to: { opacity: "1", transform: "translateY(0)" } },
-          },
-          // Safelist ensures Alpine.js-toggled classes are always generated
-          safelist: ["translate-x-0", "-translate-x-full"],
-        },
-      },
-    };
-  </script>
-
-  {# ── Custom design system CSS ──────────────────────────────────────────────── #}
-  {# Component classes that use @apply in the React version are written as plain  #}
-  {# CSS in app.css (since the Play CDN does not process @apply in external CSS). #}
-  <link rel="stylesheet" href="{{ request.url_for('static', path='css/app.css') }}" />
-
-  {# ── Per-page extra head content ──────────────────────────────────────────── #}
-  {% block head %}{% endblock %}
-</head>
-
-<body class="bg-[#0b1326] text-[#dae2fd] antialiased font-sans"
-      x-data="appState()"
-      @notify.window="addToast($event.detail.msg, $event.detail.type)">
-
-  {# ── Toast notification container ────────────────────────────────────────── #}
-  {# Managed by Alpine.js appState().  HTMX error events dispatch to this.      #}
-  <div class="fixed top-4 right-4 z-[100] space-y-2 pointer-events-none w-80"
-       role="status"
-       aria-live="polite"
-       aria-atomic="false">
-    <template x-for="toast in toasts" :key="toast.id">
-      <div x-show="toast.visible"
-           x-transition:enter="transition ease-out duration-200"
-           x-transition:enter-start="opacity-0 translate-y-1"
-           x-transition:enter-end="opacity-100 translate-y-0"
-           x-transition:leave="transition ease-in duration-150"
-           x-transition:leave-start="opacity-100"
-           x-transition:leave-end="opacity-0"
-           class="toast pointer-events-auto"
-           :class="{
-             'toast--success': toast.type === 'success',
-             'toast--error':   toast.type === 'error',
-             'toast--info':    toast.type === 'info',
-           }"
-           x-text="toast.msg">
-      </div>
-    </template>
-  </div>
-
-  {# ── Page wrapper ─────────────────────────────────────────────────────────── #}
-  <div class="min-h-screen flex">
-
-    {# ── Mobile sidebar overlay ──────────────────────────────────────────────── #}
-    <div x-show="sidebarOpen"
-         x-transition:enter="transition ease-out duration-200"
-         x-transition:enter-start="opacity-0"
-         x-transition:enter-end="opacity-100"
-         x-transition:leave="transition ease-in duration-150"
-         x-transition:leave-start="opacity-100"
-         x-transition:leave-end="opacity-0"
-         @click="sidebarOpen = false"
-         class="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 md:hidden"
-         aria-hidden="true"
-         style="display: none;"></div>
-
-    {# ── Sidebar ───────────────────────���─────────────────────────────────────── #}
-    {#
-      The sidebar is always visible on desktop (md:translate-x-0) and slides in
-      on mobile when sidebarOpen is true.  Alpine.js toggles the translation via
-      :class binding.  The safelist in tailwind.config ensures translate-x-0 and
-      -translate-x-full are always generated by the CDN.
-    #}
-    <nav aria-label="Main navigation"
-         :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
-         class="fixed left-0 top-0 h-screen w-64 z-50 flex flex-col
-                bg-[#171f33] border-r border-white/[0.07]
-                transition-transform duration-[250ms] ease-out
-                md:translate-x-0">
-
-      {# Logo #}
-      <div class="flex items-center gap-3 px-xl py-xl">
-        <span class="material-symbols-outlined text-[#c0c1ff]"
-              style="font-size:28px; font-variation-settings: 'FILL' 1, 'wght' 400;"
-              aria-hidden="true">psychology</span>
-        <div>
-          <p class="text-[16px] font-semibold text-[#c0c1ff] leading-tight">SentimentAI</p>
-          <p class="font-mono text-[11px] text-[#c7c4d7] tracking-wider">Analysis Engine v2.4</p>
-        </div>
-      </div>
-
-      {# CTA — New Analysis #}
-      <div class="px-xl mb-xl">
-        <a href="/predict"
-           @click="sidebarOpen = false"
-           class="btn-primary w-full text-[12px]">
-          <span class="material-symbols-outlined"
-                style="font-size:18px; font-variation-settings: 'FILL' 0, 'wght' 300;"
-                aria-hidden="true">add</span>
-          New Analysis
-        </a>
-      </div>
-
-      {# Navigation links #}
-      <ul class="flex-1 px-sm space-y-0.5 overflow-y-auto" role="list">
-        {% for item in nav_items %}
-          {% set active = current_path == item.path or (current_path == '/' and item.path == '/predict') %}
-          <li role="listitem">
-            <a href="{{ item.path }}"
-               @click="sidebarOpen = false"
-               class="{{ 'nav-item-active' if active else 'nav-item' }}"
-               {% if active %}aria-current="page"{% endif %}>
-              <span class="material-symbols-outlined"
-                    style="font-size:20px; font-variation-settings: 'FILL' {{ '1' if active else '0' }}, 'wght' 300;"
-                    aria-hidden="true">{{ item.icon }}</span>
-              <span>{{ item.label }}</span>
-            </a>
-          </li>
-        {% endfor %}
-      </ul>
-
-      {# Bottom section: health pill + secondary nav #}
-      <div class="px-sm pt-sm pb-xl border-t border-white/[0.06] space-y-0.5 mt-auto">
-
-        {# API health indicator — static in Phase 2; HTMX polling added in Phase 5 #}
-        <div id="sidebar-health"
-             class="flex items-center gap-2 px-3 py-2 mb-1">
-          <span class="w-2 h-2 rounded-full bg-[#4edea3] flex-shrink-0 animate-pulse-slow"
-                aria-hidden="true"></span>
-          <span class="font-mono text-[12px] text-[#c7c4d7]">API Online</span>
-        </div>
-
-        <a href="/monitor"
-           @click="sidebarOpen = false"
-           class="{{ 'nav-item-active' if current_path == '/monitor' else 'nav-item' }}">
-          <span class="material-symbols-outlined"
-                style="font-size:20px; font-variation-settings: 'FILL' 0, 'wght' 300;"
-                aria-hidden="true">settings</span>
-          <span>Settings</span>
-        </a>
-
-        <a href="/docs"
-           target="_blank"
-           rel="noopener noreferrer"
-           class="nav-item">
-          <span class="material-symbols-outlined"
-                style="font-size:20px; font-variation-settings: 'FILL' 0, 'wght' 300;"
-                aria-hidden="true">menu_book</span>
-          <span>API Docs</span>
-        </a>
-      </div>
-    </nav>
-
-    {# ── Main area (right of sidebar) ────────────────────────────────────────── #}
-    <div class="flex-1 md:ml-64 flex flex-col min-h-screen">
-
-      {# Top header bar #}
-      <header class="fixed top-0 right-0 left-0 md:left-64 h-16 z-30
-                     bg-[#0b1326]/80 backdrop-blur-[12px]
-                     border-b border-white/[0.06]
-                     flex items-center justify-between px-xl gap-4">
-
-        <div class="flex items-center gap-3">
-          {# Mobile hamburger #}
-          <button @click="sidebarOpen = true"
-                  class="md:hidden p-2 rounded-lg text-[#c7c4d7]
-                         hover:text-[#dae2fd] hover:bg-white/[0.05]
-                         transition-colors"
-                  aria-label="Open navigation"
-                  aria-expanded="false"
-                  :aria-expanded="sidebarOpen">
-            <span class="material-symbols-outlined"
-                  style="font-size:22px; font-variation-settings: 'FILL' 0, 'wght' 300;"
-                  aria-hidden="true">menu</span>
-          </button>
-
-          {# Mobile brand (hidden on desktop) #}
-          <div class="md:hidden flex items-center gap-2">
-            <span class="material-symbols-outlined text-[#c0c1ff]"
-                  style="font-size:22px; font-variation-settings: 'FILL' 1, 'wght' 400;"
-                  aria-hidden="true">psychology</span>
-            <span class="font-semibold text-[#dae2fd]">SentimentAI</span>
-          </div>
-
-          {# Desktop page title (hidden on mobile) #}
-          <h2 class="hidden md:block text-body-md font-medium text-[#c7c4d7]">
-            {{ page_title }}
-          </h2>
-        </div>
-
-        {# Right action group #}
-        <div class="flex items-center gap-2">
-          <button class="p-2 rounded-lg text-[#c7c4d7]
-                         hover:text-[#dae2fd] hover:bg-white/[0.05]
-                         transition-colors"
-                  aria-label="Notifications">
-            <span class="material-symbols-outlined"
-                  style="font-size:20px; font-variation-settings: 'FILL' 0, 'wght' 300;"
-                  aria-hidden="true">notifications</span>
-          </button>
-
-          <a href="/docs"
-             target="_blank"
-             rel="noopener noreferrer"
-             class="hidden sm:flex items-center gap-1.5 px-3 py-1.5
-                    border border-white/[0.12] rounded-lg
-                    font-mono text-[12px] text-[#c7c4d7]
-                    hover:text-[#dae2fd] hover:border-white/25
-                    transition-colors duration-150">
-            <span class="material-symbols-outlined"
-                  style="font-size:14px; font-variation-settings: 'FILL' 0, 'wght' 300;"
-                  aria-hidden="true">api</span>
-            API Docs
-          </a>
-
-          {# Avatar placeholder #}
-          <div class="w-8 h-8 rounded-full bg-[#222a3d]
-                      border border-white/[0.12]
-                      flex items-center justify-center
-                      text-[#c7c4d7] select-none"
-               role="img"
-               aria-label="User avatar">
-            <span class="material-symbols-outlined"
-                  style="font-size:18px; font-variation-settings: 'FILL' 0, 'wght' 300;"
-                  aria-hidden="true">person</span>
-          </div>
-        </div>
-      </header>
-
-      {# Page content area #}
-      <main class="flex-1 pt-16 overflow-y-auto" id="main-content">
-        <div class="max-w-[1280px] mx-auto px-lg md:px-3xl py-xl md:py-2xl">
-          {% block content %}{% endblock %}
-        </div>
-      </main>
-
-      {# Footer #}
-      <footer class="border-t border-white/[0.05] py-4 text-center font-mono text-label-sm text-[#c7c4d7]/50">
-        SentimentAI — Multilingual ABSA Dashboard
-      </footer>
-
-    </div>{# /main area #}
-  </div>{# /page wrapper #}
-
-  {# ── JavaScript ────────────────────────────────────────────────────────────── #}
-
-  {#
-    Alpine.js state — defined BEFORE the defer script so appState() is in scope
-    when Alpine.js initialises after DOMContentLoaded.
-  #}
-  <script>
-    /**
-     * appState()
-     * ----------
-     * Root Alpine.js component mounted on <body>.
-     *
-     * Responsibilities:
-     *   - sidebarOpen  : mobile sidebar toggle state
-     *   - toasts       : notification queue for HTMX errors and success messages
-     *   - addToast()   : push a message (called via @notify.window event)
-     *
-     * HTMX events are converted to CustomEvents ("notify") which Alpine.js
-     * listens for via @notify.window.  This keeps HTMX and Alpine.js decoupled.
-     */
-    function appState() {
-      return {
-        sidebarOpen: false,
-        toasts: [],
-
-        addToast(msg, type = 'info') {
-          const toast = { id: Date.now() + Math.random(), msg, type, visible: true };
-          this.toasts.push(toast);
-          // Auto-dismiss after 3.5 s
-          setTimeout(() => {
-            toast.visible = false;
-            // Remove from array after fade-out completes
-            setTimeout(() => {
-              this.toasts = this.toasts.filter(t => t.id !== toast.id);
-            }, 200);
-          }, 3500);
-        },
-      };
-    }
-
-    // ── HTMX → notify bridge ─────────────────────────────────────────────────
-    // Translate HTMX lifecycle events into the "notify" CustomEvent so Alpine.js
-    // can display them without tightly coupling HTMX handlers to Alpine components.
-
-    document.addEventListener('htmx:responseError', function (e) {
-      let msg = 'Request failed. Please try again.';
-      try {
-        const body = JSON.parse(e.detail.xhr.responseText);
-        msg = body.detail || msg;
-      } catch (_) { /* not JSON — use default */ }
-      window.dispatchEvent(new CustomEvent('notify', { detail: { msg, type: 'error' } }));
-    });
-
-    document.addEventListener('htmx:sendError', function () {
-      window.dispatchEvent(new CustomEvent('notify', {
-        detail: { msg: 'Network error — check your connection.', type: 'error' }
-      }));
-    });
-
-    // ── CSRF token injection for HTMX ─────────────────────────────────────────
-    // Reads csrf_token from <meta name="csrf-token"> and attaches it as
-    // X-CSRF-Token header on every non-GET HTMX request.
-    document.addEventListener('htmx:configRequest', function (e) {
-      const meta = document.querySelector('meta[name="csrf-token"]');
-      if (meta) {
-        e.detail.headers['X-CSRF-Token'] = meta.getAttribute('content');
-      }
-    });
-  </script>
-
-  {# HTMX — loaded deferred so it does not block rendering #}
-  <script src="https://unpkg.com/htmx.org@2.0.3/dist/htmx.min.js" defer></script>
-
-  {# Alpine.js v3 — loaded deferred; appState() above is already in global scope #}
-  <script defer src="https://unpkg.com/alpinejs@3.14.1/dist/cdn.min.js"></script>
-
-  {# ── Per-page extra scripts ───────────────────────────────────────────────── #}
-  {% block scripts %}{% endblock %}
-
-</body>
-</html>

app/templates/macros/ui.html

@@ -1,178 +0,0 @@
-{#
-  macros/ui.html — Reusable Jinja2 macros for the SentimentAI dashboard.
-
-  WHY THIS FILE EXISTS
-  --------------------
-  The React components (Sidebar.jsx, Monitor.jsx, Analytics.jsx) defined small
-  helper components (MSIcon, StatusBadge, HealthChip, InfoRow) that were reused
-  across pages.  Jinja2 macros provide the equivalent pattern: define once,
-  import anywhere.
-
-  USAGE IN TEMPLATES
-  ------------------
-    {% from "macros/ui.html" import ms_icon, status_badge, health_chip, sentiment_badge %}
-
-  Each macro produces self-contained HTML with no JavaScript dependencies.
-  CSS classes reference app.css component classes (badge-*, highlight-*) and
-  Tailwind utilities from the CDN.
-#}
-
-{# ── Material Symbols Outlined icon ───────────────────────────────────────── #}
-{#
-  ms_icon(name, filled, size, cls)
-  ---------------------------------
-  Renders a Material Symbols Outlined icon span.
-
-  Parameters
-  ----------
-  name   : str   — icon name e.g. "psychology", "cloud_upload", "bolt"
-  filled : bool  — whether to use FILL=1 (solid) or FILL=0 (outlined)
-  size   : int   — font-size in px (default 20)
-  cls    : str   — extra CSS classes appended to the span
-#}
-{% macro ms_icon(name, filled=False, size=20, cls='') %}
-<span class="material-symbols-outlined {{ cls }}"
-      style="font-size: {{ size }}px; font-variation-settings: 'FILL' {{ 1 if filled else 0 }}, 'wght' {{ 400 if filled else 300 }};"
-      aria-hidden="true">{{ name }}</span>
-{% endmacro %}
-
-
-{# ── Status badge ─────────────────────────────────────────────────────────── #}
-{#
-  status_badge(status)
-  ---------------------
-  Renders a coloured badge for a batch job status.
-
-  status values: "completed" | "processing" | "queued" | "failed"
-#}
-{% macro status_badge(status) %}
-{% if status == 'completed' %}
-<span class="badge-positive">
-  <span class="badge-dot badge-dot--positive"></span>
-  Completed
-</span>
-{% elif status == 'processing' %}
-<span class="badge-processing">
-  <span class="badge-dot badge-dot--primary animate-pulse-slow"></span>
-  Processing
-</span>
-{% elif status == 'queued' %}
-<span class="badge-neutral">
-  <span class="badge-dot badge-dot--neutral"></span>
-  Queued
-</span>
-{% elif status == 'failed' %}
-<span class="badge-error">
-  <span class="badge-dot badge-dot--error"></span>
-  Failed
-</span>
-{% else %}
-<span class="badge-neutral">{{ status }}</span>
-{% endif %}
-{% endmacro %}
-
-
-{# ── Health chip ──────────────────────────────────────────────────────────── #}
-{#
-  health_chip(ok)
-  ----------------
-  Renders a "Healthy" or "Degraded" status chip.
-
-  ok : bool — True if the API health check returned status=="ok"
-#}
-{% macro health_chip(ok) %}
-{% if ok %}
-<span class="badge-positive">
-  <span class="badge-dot badge-dot--positive animate-pulse-slow"></span>
-  Healthy
-</span>
-{% else %}
-<span class="badge-error">
-  <span class="badge-dot badge-dot--error animate-pulse-slow"></span>
-  Degraded
-</span>
-{% endif %}
-{% endmacro %}
-
-
-{# ── Sentiment badge ──────────────────────────────────────────────────────── #}
-{#
-  sentiment_badge(sentiment)
-  ---------------------------
-  Renders the sentiment label for an aspect card.
-
-  sentiment values: "positive" | "negative" | "neutral" | "conflict"
-#}
-{% macro sentiment_badge(sentiment) %}
-{% if sentiment == 'positive' %}
-<span class="badge-positive">
-  <span class="badge-dot badge-dot--positive"></span>
-  {{ sentiment }}
-</span>
-{% elif sentiment == 'negative' %}
-<span class="badge-negative">
-  <span class="badge-dot badge-dot--negative"></span>
-  {{ sentiment }}
-</span>
-{% elif sentiment == 'conflict' %}
-<span class="badge-error">
-  <span class="badge-dot badge-dot--error"></span>
-  {{ sentiment }}
-</span>
-{% else %}
-<span class="badge-neutral">
-  <span class="badge-dot badge-dot--neutral"></span>
-  {{ sentiment }}
-</span>
-{% endif %}
-{% endmacro %}
-
-
-{# ── Info row (used on Monitor page) ─────────────────────────────────────── #}
-{#
-  info_row(label, value, value_cls)
-  -----------------------------------
-  Renders a labelled key-value cell inside the Model Configuration card.
-#}
-{% macro info_row(label, value, value_cls='') %}
-<div class="bg-[#0b1326] rounded-lg p-3">
-  <p class="font-mono text-[11px] text-[#c7c4d7] mb-1 uppercase tracking-wide">{{ label }}</p>
-  <p class="text-sm text-[#dae2fd] font-medium {{ value_cls }}">{{ value }}</p>
-</div>
-{% endmacro %}
-
-
-{# ── Loaded badge (aspect/sentiment model status) ────────────────────────── #}
-{% macro loaded_badge() %}
-<div class="flex items-center gap-1.5 text-sm text-[#dae2fd] font-medium">
-  {{ ms_icon('check_circle', filled=False, size=16, cls='text-[#4edea3]') }}
-  Loaded
-</div>
-{% endmacro %}
-
-
-{# ── Skeleton placeholder (used during HTMX loading states) ─────────────── #}
-{#
-  skeleton(height, width_cls)
-  ----------------------------
-  Renders a pulsing skeleton placeholder matching the React Skeleton component.
-#}
-{% macro skeleton(height='h-4', width_cls='w-full') %}
-<div class="animate-pulse bg-[#222a3d] rounded {{ height }} {{ width_cls }}"></div>
-{% endmacro %}
-
-
-{# ── Empty-state panel ────────────────────────────────────────────────────── #}
-{#
-  empty_state(icon, message)
-  ---------------------------
-  Centred icon + message for panels with no data yet.
-#}
-{% macro empty_state(icon='psychology', message='No data yet') %}
-<div class="flex flex-col items-center justify-center gap-4 py-16 text-[#c7c4d7]">
-  <span class="material-symbols-outlined opacity-30"
-        style="font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 200;"
-        aria-hidden="true">{{ icon }}</span>
-  <p class="text-sm opacity-60">{{ message }}</p>
-</div>
-{% endmacro %}

app/templates/pages/batch.html

@@ -1,124 +0,0 @@
-{% extends "base.html" %}
-{% from "macros/ui.html" import ms_icon, status_badge, empty_state %}
-
-{% block title %}Batch Analytics{% endblock %}
-{% block description %}Upload a CSV of reviews for bulk aspect-based sentiment analysis.{% endblock %}
-
-{% block content %}
-{#
-  Phase 2: Placeholder layout for the Batch Analytics page.
-
-  What this page will contain after Phase 4:
-    - Upload zone  : drag-and-drop CSV input (HTML5 + Alpine.js drag events)
-    - Progress card: job status + progress bar polling via hx-trigger="every 2s"
-    - Recent table : DB-queried list of past batch jobs
-    - Charts       : post-completion AspectHeatmap, LanguagePie, SentimentChart
-                     (Chart.js, rendered with server-provided JSON data)
-
-  The page structure below mirrors Analytics.jsx exactly so Phase 4 only needs to
-  replace placeholder content with functional forms and HTMX targets.
-#}
-<div class="space-y-xl">
-
-  {# ── Page header ─────────────────────────────────────────────────────────── #}
-  <div>
-    <h1 class="text-headline-md text-[#dae2fd]">Batch Analytics</h1>
-    <p class="mt-1 text-body-md text-[#c7c4d7]">
-      Upload a CSV of reviews for bulk aspect-based sentiment analysis.
-    </p>
-  </div>
-
-  {# ── Upload zone ──────────────────────────────────────────────────────────── #}
-  <section aria-label="File upload">
-    <form hx-encoding="multipart/form-data" 
-          hx-post="/batch/fragment" 
-          hx-target="#batch-progress" 
-          class="card group" 
-          x-data="{ file: null, drag: false }">
-          
-      <div x-on:dragover.prevent="drag = true" 
-           x-on:dragleave.prevent="drag = false"
-           x-on:drop.prevent="drag = false; $refs.fileInput.files = $event.dataTransfer.files; file = $refs.fileInput.files[0]"
-           :class="drag ? 'border-[#c0c1ff]/60 bg-[#c0c1ff]/5' : 'border-white/[0.14] hover:border-[#c0c1ff]/40 hover:bg-[#c0c1ff]/[0.02]'"
-           class="border-2 border-dashed rounded-xl p-12 flex flex-col items-center justify-center text-center cursor-pointer transition-colors duration-200"
-           @click="$refs.fileInput.click()">
-        <input type="file" name="file" x-ref="fileInput" class="hidden" accept=".csv" @change="file = $event.target.files[0]">
-        {{ ms_icon('cloud_upload', size=48, cls='text-[#c7c4d7] mb-4') }}
-        <h2 class="text-headline-sm text-[#dae2fd] mb-2" x-text="drag ? 'Drop the CSV here…' : 'Drag &amp; drop a CSV, or click to select'"></h2>
-        <p class="text-body-md text-[#c7c4d7] max-w-sm">
-          Must contain a <code class="font-mono text-[#c0c1ff] px-1">text</code> column.
-          Maximum 10,000 rows. Files are deleted after analysis.
-        </p>
-      </div>
-
-      <!-- Selected file row -->
-      <template x-if="file">
-        <div class="mt-lg flex items-center justify-between p-md rounded-lg bg-[#222a3d] border border-white/[0.08] animate-slide-in">
-          <div class="flex items-center gap-3">
-            {{ ms_icon('description', size=20, cls='text-[#c0c1ff]') }}
-            <div>
-              <p class="text-body-md text-[#dae2fd] font-medium" x-text="file.name"></p>
-              <p class="font-mono text-label-sm text-[#c7c4d7]" x-text="(file.size / 1024 / 1024).toFixed(2) + ' MB'"></p>
-            </div>
-          </div>
-          <div class="flex gap-2">
-            <button type="button" @click.stop="file = null; $refs.fileInput.value = ''" class="px-3 py-1.5 text-body-sm text-[#c7c4d7] border border-white/[0.12] rounded-lg hover:bg-white/[0.05] hover:text-[#dae2fd] transition-colors">
-              Remove
-            </button>
-            <button type="submit" class="btn-primary text-body-sm relative group-[.htmx-request]:pointer-events-none">
-              <div class="flex items-center gap-2 group-[.htmx-request]:hidden">
-                {{ ms_icon('rocket_launch', size=16) }} Process File
-              </div>
-              <div class="htmx-indicator items-center gap-2">
-                <span class="material-symbols-outlined animate-spin" style="font-size:16px;">progress_activity</span> Processing
-              </div>
-            </button>
-          </div>
-        </div>
-      </template>
-    </form>
-    
-    <div id="batch-progress" class="mt-lg"></div>
-  </section>
-
-  {# ── Recent batches table placeholder ─────────────────────────────────────── #}
-  <section aria-label="Recent batch jobs">
-    <h2 class="text-headline-sm text-[#dae2fd] mb-lg">Recent Batches</h2>
-    <div class="card overflow-hidden p-0">
-      <div class="overflow-x-auto">
-        <table class="w-full text-left border-collapse" aria-label="Recent batch jobs">
-          <thead>
-            <tr class="border-b border-white/[0.08] bg-[#222a3d]/50">
-              <th scope="col" class="font-mono text-label-sm text-[#c7c4d7] py-3 px-xl">Filename</th>
-              <th scope="col" class="font-mono text-label-sm text-[#c7c4d7] py-3 px-lg">Rows</th>
-              <th scope="col" class="font-mono text-label-sm text-[#c7c4d7] py-3 px-lg">Status</th>
-              <th scope="col" class="font-mono text-label-sm text-[#c7c4d7] py-3 px-xl text-right">Date</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-white/[0.05]">
-            {# Phase 2: static mock rows matching React's Analytics.jsx mock data #}
-            {% for row in [
-              {'name': 'q3_customer_feedback.csv',  'rows': '4,250', 'status': 'completed',  'date': 'Today, 14:32'},
-              {'name': 'product_launch_tweets.csv', 'rows': '8,912', 'status': 'processing', 'date': 'Today, 14:15'},
-              {'name': 'corrupted_export_09.csv',   'rows': '—',     'status': 'failed',     'date': 'Yesterday'},
-            ] %}
-            <tr class="hover:bg-white/[0.03] transition-colors">
-              <td class="py-3 px-xl">
-                <div class="flex items-center gap-2 text-body-md text-[#dae2fd]">
-                  {{ ms_icon('description', size=16, cls='text-[#c7c4d7]') }}
-                  {{ row.name }}
-                </div>
-              </td>
-              <td class="py-3 px-lg font-mono text-body-sm text-[#c7c4d7]">{{ row.rows }}</td>
-              <td class="py-3 px-lg">{{ status_badge(row.status) }}</td>
-              <td class="py-3 px-xl text-right font-mono text-body-sm text-[#c7c4d7]">{{ row.date }}</td>
-            </tr>
-            {% endfor %}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </section>
-
-</div>
-{% endblock %}

app/templates/pages/monitor.html

@@ -1,161 +0,0 @@
-{% extends "base.html" %}
-{% from "macros/ui.html" import ms_icon, health_chip, info_row, loaded_badge %}
-
-{% block title %}System Monitor{% endblock %}
-{% block description %}Real-time API health, model metadata, and request statistics.{% endblock %}
-
-{% block content %}
-{#
-  Phase 2: Placeholder layout for the System Monitor page.
-
-  What this page will contain after Phase 5:
-    - API Status card        : live health chip polled via hx-trigger="every 30s"
-    - Model Configuration    : architecture, languages, model status
-    - Performance Metrics    : stat cards with SVG sparklines
-    - Recent Activity table  : last N API requests
-
-  All section structures below match Monitor.jsx exactly so Phase 5 only needs to
-  add live data and HTMX polling attributes.
-#}
-<div class="space-y-xl">
-
-  {# ── Page header ─────────────────────────────────────────────────────────── #}
-  <div class="flex flex-wrap justify-between items-end gap-4">
-    <div>
-      <h1 class="text-headline-md text-[#dae2fd]">System Monitor</h1>
-      <p class="mt-1 text-body-md text-[#c7c4d7]">
-        Real-time API health, model metadata, and request statistics.
-      </p>
-    </div>
-    <div class="flex items-center gap-2">
-      <label for="refresh-select" class="font-mono text-label-sm text-[#c7c4d7]">
-        Auto-refresh
-      </label>
-      <select id="refresh-select" class="input-base py-1 text-body-sm" style="width:auto;">
-        <option value="10000">10s</option>
-        <option value="30000" selected>30s</option>
-        <option value="60000">1m</option>
-        <option value="0">Off</option>
-      </select>
-    </div>
-  </div>
-
-  {# ── Health + Model config ────────────────────────────────────────────────── #}
-  <div class="grid grid-cols-1 lg:grid-cols-12 gap-xl">
-
-    {# API Status card #}
-    <div class="lg:col-span-4 card flex flex-col gap-lg">
-      <div class="flex items-center gap-3">
-        <div class="p-2.5 rounded-lg bg-[#4edea3]/10">
-          {{ ms_icon('monitor_heart', size=24, cls='text-[#4edea3]') }}
-        </div>
-        <div>
-          <h2 class="text-title-lg text-[#dae2fd]">API Status</h2>
-          <p class="font-mono text-label-sm text-[#c7c4d7]">Core Inference Engine</p>
-        </div>
-      </div>
-
-      {# Health status — HTMX polling target in Phase 5 #}
-      {% include "partials/monitor_health.html" %}
-    </div>
-
-    {# Model Configuration card #}
-    <div class="lg:col-span-8 card">
-      <div class="flex items-center gap-3 mb-xl">
-        <div class="p-2.5 rounded-lg bg-[#c0c1ff]/10">
-          {{ ms_icon('memory', size=24, cls='text-[#c0c1ff]') }}
-        </div>
-        <div>
-          <h2 class="text-title-lg text-[#dae2fd]">Model Configuration</h2>
-          <p class="font-mono text-label-sm text-[#c7c4d7]">Loaded ONNX Graphs</p>
-        </div>
-      </div>
-      <div class="grid grid-cols-2 gap-md">
-        {{ info_row('Architecture',         'XLM-RoBERTa (INT8)') }}
-        {{ info_row('Supported Languages',  'English, Hindi, Hinglish') }}
-        <div class="bg-[#0b1326] rounded-lg p-3">
-          <p class="font-mono text-[11px] text-[#c7c4d7] mb-1 uppercase tracking-wide">Aspect Extraction</p>
-          {{ loaded_badge() }}
-        </div>
-        <div class="bg-[#0b1326] rounded-lg p-3">
-          <p class="font-mono text-[11px] text-[#c7c4d7] mb-1 uppercase tracking-wide">Sentiment Classification</p>
-          {{ loaded_badge() }}
-        </div>
-      </div>
-    </div>
-  </div>
-
-  {# ── Performance metrics (stat cards) ─────────────────────────────────────── #}
-  <div>
-    <h2 class="text-headline-sm text-[#dae2fd] mb-lg">Performance Metrics</h2>
-    <div class="grid grid-cols-1 sm:grid-cols-3 gap-xl">
-
-      {# Macro-style stat card — defined inline since it's used only here #}
-      {% for stat in [
-        {'icon': 'database', 'label': 'Total Requests Today', 'value': '12.4k',  'sub': '↑ 8% vs yesterday', 'color': '#c0c1ff', 'positive': true},
-        {'icon': 'bolt',     'label': 'Avg Latency (P95)',    'value': '145ms',  'sub': 'Well within SLA',   'color': '#4edea3', 'positive': true},
-        {'icon': 'warning',  'label': 'Error Rate',           'value': '0.2%',   'sub': 'Last 24 hours',     'color': '#ffb4ab', 'positive': false},
-      ] %}
-      <div class="stat-card group">
-        {# Sparkline gradient background #}
-        <div class="absolute bottom-0 left-0 w-full h-16 opacity-40 group-hover:opacity-70
-                    transition-opacity pointer-events-none">
-          <svg viewBox="0 0 100 40" class="w-full h-full" preserveAspectRatio="none" aria-hidden="true">
-            <path d="{{ 'M0 40 L0 28 Q25 24 50 20 T100 14 L100 40 Z' if stat.positive else 'M0 40 L0 32 Q25 30 50 26 T100 22 L100 40 Z' }}"
-                  fill="{{ stat.color }}22"
-                  stroke="{{ stat.color }}"
-                  stroke-width="1.5"
-                  vector-effect="non-scaling-stroke" />
-          </svg>
-        </div>
-        <div class="relative z-10">
-          <div class="flex items-center gap-2 mb-lg">
-            <span class="material-symbols-outlined text-2xl"
-                  style="color: {{ stat.color }}; font-variation-settings: 'FILL' 1, 'wght' 400;"
-                  aria-hidden="true">{{ stat.icon }}</span>
-            <span class="font-mono text-label-md text-[#c7c4d7] uppercase tracking-wider">{{ stat.label }}</span>
-          </div>
-          <p class="text-display text-[#dae2fd] font-semibold">{{ stat.value }}</p>
-          <p class="font-mono text-label-sm text-[#c7c4d7] mt-1">{{ stat.sub }}</p>
-        </div>
-      </div>
-      {% endfor %}
-
-    </div>
-  </div>
-
-  {# ── Recent endpoint activity ──────────────────────────────────────────────── #}
-  <div class="card">
-    <h2 class="text-title-lg text-[#dae2fd] mb-lg">Recent Endpoint Activity</h2>
-    <div class="space-y-2" role="list" aria-label="Recent API requests">
-      {% for req in [
-        {'method': 'POST', 'path': '/predict',       'status': 200, 'time': '3.5ms',  'ago': '2s ago'},
-        {'method': 'GET',  'path': '/health',        'status': 200, 'time': '0.8ms',  'ago': '5s ago'},
-        {'method': 'POST', 'path': '/batch',         'status': 202, 'time': '12.1ms', 'ago': '1m ago'},
-        {'method': 'GET',  'path': '/status/abc12',  'status': 200, 'time': '1.2ms',  'ago': '1m ago'},
-        {'method': 'POST', 'path': '/predict',       'status': 500, 'time': '23ms',   'ago': '3m ago'},
-      ] %}
-      <div class="flex items-center gap-4 py-2 px-md rounded-lg hover:bg-white/[0.03] transition-colors"
-           role="listitem">
-        <span class="font-mono text-label-sm w-10 flex-shrink-0
-                     {{ 'text-[#c0c1ff]' if req.method == 'POST' else 'text-[#4edea3]' }}">
-          {{ req.method }}
-        </span>
-        <span class="font-mono text-body-sm text-[#dae2fd] flex-1 truncate">{{ req.path }}</span>
-        <span class="font-mono text-label-sm w-10 text-right flex-shrink-0
-                     {{ 'text-[#ffb4ab]' if req.status >= 500 else ('text-[#f5c542]' if req.status >= 400 else 'text-[#4edea3]') }}">
-          {{ req.status }}
-        </span>
-        <span class="font-mono text-label-sm text-[#c7c4d7] w-14 text-right flex-shrink-0">{{ req.time }}</span>
-        <span class="hidden sm:block font-mono text-label-sm text-[#c7c4d7]/50 w-16 text-right flex-shrink-0">
-          {{ req.ago }}
-        </span>
-      </div>
-      {% endfor %}
-    </div>
-
-
-  </div>
-
-</div>
-{% endblock %}

app/templates/pages/predict.html

@@ -1,107 +0,0 @@
-{% extends "base.html" %}
-{% from "macros/ui.html" import ms_icon, empty_state %}
-
-{% block title %}Live Predictor{% endblock %}
-{% block description %}Analyze aspect-based sentiment in English and Hindi text in real time.{% endblock %}
-
-{% block content %}
-{#
-  Phase 2: Placeholder layout for the Predict page.
-
-  What this page will contain after Phase 3:
-    - Left panel  : textarea input + language selector + Analyze button
-    - Right panel : annotated result text + aspect cards (HTMX swap target)
-    - POST /predict/fragment → returns partials/predict_result.html
-
-  The outer grid, headings, and card shells are already correct here so Phase 3
-  only needs to fill in the form and wire up HTMX — no structural changes.
-#}
-<div class="space-y-xl">
-
-  {# ── Page header ─────────────────────────────────────────────────────────── #}
-  <div>
-    <h1 class="text-headline-md text-[#dae2fd]">Live Sentiment Predictor</h1>
-    <p class="mt-1 text-body-md text-[#c7c4d7] max-w-2xl">
-      Enter text to analyze its aspects and sentiments in real-time.
-      The model automatically identifies the language and extracts key phrases.
-    </p>
-  </div>
-
-  {# ── Two-column layout (mirrors LivePredictor.jsx structure) ─────────────── #}
-  <div class="grid grid-cols-1 lg:grid-cols-12 gap-xl">
-
-    {# ── Left: Input panel ───────────────────────────────────────────────── #}
-    <div class="lg:col-span-7 flex flex-col">
-      <form class="card-low flex flex-col h-full min-h-[420px] group"
-            hx-post="/predict/fragment"
-            hx-target="#result-panel"
-            x-data="{ text: '' }">
-
-        <div class="flex justify-between items-center mb-lg pb-md border-b border-white/[0.06]">
-          <h3 class="font-mono text-label-md text-[#c7c4d7] uppercase tracking-wider">
-            Analyze Input
-          </h3>
-          <div class="flex items-center gap-2">
-            <label for="lang-select" class="font-mono text-label-sm text-[#c7c4d7]">Language</label>
-            <select id="lang-select" name="language" class="input-base py-1 text-body-sm" style="width:auto;">
-              <option value="auto">Auto-detect</option>
-              <option value="en">English</option>
-              <option value="hi">Hindi</option>
-            </select>
-          </div>
-        </div>
-
-        <div class="flex-1 flex flex-col mb-lg">
-          <label for="review-text" class="font-mono text-label-sm text-[#c7c4d7] mb-2">Source Text</label>
-          <textarea id="review-text"
-                    name="text"
-                    x-model="text"
-                    required
-                    class="input-base flex-1 min-h-[260px] resize-none leading-relaxed"
-                    placeholder="Paste your review, article, or social media post here…"
-                    @keydown.meta.enter="$el.form.dispatchEvent(new Event('submit', {cancelable: true, bubbles: true}))">
-          </textarea>
-          <div class="flex justify-between mt-2">
-            <span class="font-mono text-label-sm text-[#c7c4d7]/50">⌘ Enter to analyze</span>
-            <span class="font-mono text-label-sm text-[#c7c4d7]/50" x-text="text.length + ' / 512'">0 / 512</span>
-          </div>
-        </div>
-
-        <button type="submit" class="btn-primary" :disabled="text.length === 0">
-          <div class="flex items-center gap-2 group-[.htmx-request]:hidden">
-            {{ ms_icon('bolt', size=16) }}
-            <span>Analyze</span>
-          </div>
-          <div class="htmx-indicator items-center gap-2">
-            <span class="material-symbols-outlined animate-spin" style="font-size:16px;">autorenew</span>
-            <span>Analyzing...</span>
-          </div>
-        </button>
-
-      </form>
-    </div>
-
-    {# ── Right: Results panel ─────────────────────────────────────────────── #}
-    <div class="lg:col-span-5 flex flex-col">
-      <div class="glass-panel rounded-xl flex flex-col h-full min-h-[420px] p-xl">
-
-        <div class="flex justify-between items-center mb-lg pb-md border-b border-white/[0.06]">
-          <h3 class="font-mono text-label-md text-[#c7c4d7] uppercase tracking-wider">
-            Analysis Results
-          </h3>
-        </div>
-
-        {# Phase 2 placeholder — replaced by HTMX partial in Phase 3 #}
-        <div id="result-panel" class="flex-1 flex">
-          {{ empty_state('psychology', 'Enter a review and click Analyze to see results') }}
-        </div>
-
-      </div>
-    </div>
-
-  </div>{# /grid #}
-
-
-
-</div>
-{% endblock %}

app/templates/partials/batch_charts.html

@@ -1,114 +0,0 @@
-{% if error %}
-<div class="card bg-error/10 border border-error/20 p-md rounded-lg text-center">
-  <p class="text-error font-medium">Failed to load charts: {{ error }}</p>
-</div>
-{% else %}
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-xl animate-fade-in" id="batch-charts-container">
-  
-  {# Aspect Heatmap (Stacked Bar) #}
-  <div class="xl:col-span-2 bg-[#222a3d] rounded-xl shadow-sm border border-white/[0.08] p-6 h-96">
-    <h3 class="text-sm font-semibold text-[#dae2fd] mb-4">Top Aspects by Sentiment</h3>
-    <div class="relative w-full h-[300px]">
-      <canvas id="aspectChart"></canvas>
-    </div>
-  </div>
-
-  {# Language Pie #}
-  <div class="bg-[#222a3d] rounded-xl shadow-sm border border-white/[0.08] p-6 h-96">
-    <h3 class="text-sm font-semibold text-[#dae2fd] mb-4">Language Distribution</h3>
-    <div class="relative w-full h-[300px]">
-      <canvas id="languageChart"></canvas>
-    </div>
-  </div>
-
-  {# Sentiment Chart (Line) #}
-  <div class="lg:col-span-2 xl:col-span-3 bg-[#222a3d] rounded-xl shadow-sm border border-white/[0.08] p-6 h-96">
-    <h3 class="text-sm font-semibold text-[#dae2fd] mb-4">Sentiment Over Time (Row Chunks)</h3>
-    <div class="relative w-full h-[300px]">
-      <canvas id="sentimentChart"></canvas>
-    </div>
-  </div>
-
-</div>
-
-<script>
-  (function() {
-    // Shared styling for dark mode
-    Chart.defaults.color = '#c7c4d7';
-    Chart.defaults.borderColor = 'rgba(255, 255, 255, 0.08)';
-    
-    // Data passed from backend
-    const rawAspect = {{ aspect_heatmap | safe }};
-    const rawLang = {{ language_pie | safe }};
-    const rawSent = {{ sentiment_chart | safe }};
-
-    // 1. Aspect Stacked Bar Chart (Horizontal)
-    const aspectCtx = document.getElementById('aspectChart');
-    if (aspectCtx && rawAspect.length > 0) {
-      new Chart(aspectCtx, {
-        type: 'bar',
-        data: {
-          labels: rawAspect.map(d => d.aspect),
-          datasets: [
-            { label: 'Positive', data: rawAspect.map(d => d.positive), backgroundColor: '#10B981' },
-            { label: 'Negative', data: rawAspect.map(d => d.negative), backgroundColor: '#EF4444' },
-            { label: 'Neutral',  data: rawAspect.map(d => d.neutral), backgroundColor: '#6B7280' },
-            { label: 'Conflict', data: rawAspect.map(d => d.conflict), backgroundColor: '#F59E0B' }
-          ]
-        },
-        options: {
-          indexAxis: 'y',
-          responsive: true,
-          maintainAspectRatio: false,
-          scales: { x: { stacked: true }, y: { stacked: true } }
-        }
-      });
-    }
-
-    // 2. Language Pie Chart
-    const langCtx = document.getElementById('languageChart');
-    if (langCtx && rawLang.length > 0) {
-      new Chart(langCtx, {
-        type: 'pie',
-        data: {
-          labels: rawLang.map(d => d.name),
-          datasets: [{
-            data: rawLang.map(d => d.value),
-            backgroundColor: ['#3B82F6', '#F97316', '#10B981', '#8B5CF6'],
-            borderWidth: 0
-          }]
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          plugins: {
-            legend: { position: 'bottom' }
-          }
-        }
-      });
-    }
-
-    // 3. Sentiment Line Chart
-    const sentCtx = document.getElementById('sentimentChart');
-    if (sentCtx && rawSent.length > 0) {
-      new Chart(sentCtx, {
-        type: 'line',
-        data: {
-          labels: rawSent.map(d => d.name),
-          datasets: [
-            { label: 'Positive', data: rawSent.map(d => d.positive), borderColor: '#10B981', backgroundColor: '#10B981', tension: 0.3 },
-            { label: 'Negative', data: rawSent.map(d => d.negative), borderColor: '#EF4444', backgroundColor: '#EF4444', tension: 0.3 },
-            { label: 'Neutral',  data: rawSent.map(d => d.neutral), borderColor: '#6B7280', backgroundColor: '#6B7280', tension: 0.3 },
-            { label: 'Conflict', data: rawSent.map(d => d.conflict), borderColor: '#F59E0B', backgroundColor: '#F59E0B', tension: 0.3 }
-          ]
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false
-        }
-      });
-    }
-  })();
-</script>
-{% endif %}

app/templates/partials/batch_progress.html

@@ -1,51 +0,0 @@
-{% from "macros/ui.html" import ms_icon %}
-
-<div class="card-low animate-fade-in p-6" id="batch-progress-container">
-    {% if error %}
-    <div class="flex flex-col items-center justify-center gap-4 py-8 text-[#ffb4ab]">
-        {{ ms_icon('error', size=48, cls='opacity-80') }}
-        <p class="text-sm font-medium">{{ error }}</p>
-    </div>
-    {% else %}
-    <div class="flex items-center justify-between mb-4">
-        <div>
-            <h4 class="text-body-lg text-[#dae2fd] font-medium">Batch Job: <span class="font-mono text-sm">{{ job.job_id }}</span></h4>
-            <p class="text-body-sm text-[#c7c4d7]/70 mt-1">Status: <span class="capitalize">{{ job.status }}</span></p>
-        </div>
-        {% if job.status == 'completed' %}
-            <a href="/results/download/{{ job.job_id }}" class="btn-primary" download>
-                {{ ms_icon('download', size=18) }}
-                Download Results
-            </a>
-        {% elif job.status == 'failed' %}
-            <span class="text-[#ffb4ab] font-medium flex items-center gap-1">{{ ms_icon('error', size=16) }} Failed</span>
-        {% else %}
-            <div class="flex items-center gap-2 text-[#c0c1ff]">
-                <span class="material-symbols-outlined animate-spin" style="font-size:16px;">autorenew</span>
-                <span class="text-sm font-medium">Processing...</span>
-            </div>
-        {% endif %}
-    </div>
-
-    <div class="w-full bg-[#1b2234] rounded-full h-3 mb-2 overflow-hidden border border-white/[0.04]">
-        {% set percent = (job.processed / job.total_reviews * 100) if job.total_reviews > 0 else 0 %}
-        <div class="bg-[#c0c1ff] h-3 rounded-full transition-all duration-500 ease-out" style="width: {{ percent }}%"></div>
-    </div>
-    
-    <div class="flex justify-between text-label-sm font-mono text-[#c7c4d7]/70">
-        <span>{{ job.processed }} processed</span>
-        <span>{{ job.total_reviews }} total</span>
-    </div>
-
-    {% if job.status in ['queued', 'processing'] %}
-    <div hx-get="/batch/progress/{{ job.job_id }}" hx-trigger="every 2s" hx-swap="outerHTML" hx-target="#batch-progress-container"></div>
-    {% elif job.status == 'completed' %}
-    <div class="mt-8" hx-get="/batch/charts/{{ job.job_id }}" hx-trigger="load" hx-swap="innerHTML">
-        <div class="flex items-center justify-center gap-2 text-[#c7c4d7]/70 font-mono text-sm py-8 animate-pulse">
-            <span class="material-symbols-outlined animate-spin" style="font-size:18px;">analytics</span>
-            Generating charts...
-        </div>
-    </div>
-    {% endif %}
-    {% endif %}
-</div>

app/templates/partials/monitor_health.html

@@ -1,19 +0,0 @@
-{% from "macros/ui.html" import health_chip %}
-
-<div id="health-status"
-     hx-get="/monitor/health-partial"
-     hx-trigger="every 30s"
-     hx-swap="outerHTML"
-     class="flex items-center gap-3 pt-lg border-t border-white/[0.06]">
-  <span class="text-body-md text-[#c7c4d7]">Current state:</span>
-  
-  {% if error %}
-    <span class="badge-error">
-      <span class="w-2 h-2 rounded-full bg-[#ffb4ab] animate-pulse flex-shrink-0"></span>
-      Service Unavailable
-    </span>
-  {% else %}
-    {{ health_chip(health.status == 'ok') }}
-  {% endif %}
-  <span class="htmx-indicator ml-2 text-[#c7c4d7]/70 font-mono text-label-sm">Updating...</span>
-</div>

app/templates/partials/predict_result.html

@@ -1,101 +0,0 @@
-{% from "macros/ui.html" import ms_icon, sentiment_badge, empty_state %}
-
-{% if error %}
-<div class="flex flex-col items-center justify-center gap-4 py-16 text-[#ffb4ab]">
-  {{ ms_icon('error', size=48, cls='opacity-80') }}
-  <p class="text-sm font-medium">{{ error }}</p>
-</div>
-{% elif result %}
-  {# Macro to highlight text based on aspect positions #}
-  {% macro render_annotated_text(text, aspects) %}
-    {# 
-      For Phase 3 we do a simplified highlight. 
-      In a real template, we'd slice the text by start_pos/end_pos. 
-      For now, we just print the text, as doing complex string slicing in Jinja is hard. 
-      Wait, we can pass an 'annotated_text' pre-computed from the router, but the prompt says "do NOT duplicate business logic".
-      Let's just output the text, or if possible, use JS or a simple replace.
-      Actually, the user expects "highlight-positive" etc. from the CSS we wrote in Phase 2.
-    #}
-    <div class="text-body-lg text-[#dae2fd] leading-relaxed whitespace-pre-wrap">{{ text }}</div>
-  {% endmacro %}
-
-<div class="flex flex-col h-full w-full animate-fade-in">
-  
-  {# ── Header metrics ── #}
-  <div class="flex justify-between items-center mb-md">
-    <div class="flex items-center gap-4">
-      <div class="flex items-center gap-1.5 font-mono text-label-sm text-[#c7c4d7]">
-        {{ ms_icon('language', size=16) }}
-        <span>{{ result.detected_language | upper }}</span>
-      </div>
-      <div class="flex items-center gap-1.5 font-mono text-label-sm text-[#c7c4d7]">
-        {{ ms_icon('timer', size=16) }}
-        <span>{{ result.processing_time_ms | round }}ms</span>
-      </div>
-    </div>
-  </div>
-
-  {# ── Annotated Text ── #}
-  <div class="p-md bg-[#0b1326] rounded-lg border border-white/[0.06] mb-lg">
-    <div class="text-body-lg text-[#dae2fd] leading-relaxed whitespace-pre-wrap" id="annotated-text-container">{{ result.text }}</div>
-  </div>
-
-  {# ── Aspects List ── #}
-  <div>
-    <h4 class="font-mono text-label-sm text-[#c7c4d7] mb-3 uppercase tracking-wider">Detected Aspects</h4>
-    {% if result.aspects %}
-      <div class="space-y-2">
-        {% for aspect in result.aspects %}
-          <div class="flex items-center justify-between p-3 rounded-lg bg-[#222a3d] border border-white/[0.04]">
-            <span class="text-body-md text-[#dae2fd] font-medium">{{ aspect.aspect }}</span>
-            <div class="flex items-center gap-4">
-              <span class="font-mono text-label-sm text-[#c7c4d7]/70">conf: {{ "%.2f"|format(aspect.confidence) }}</span>
-              {{ sentiment_badge(aspect.sentiment) }}
-            </div>
-          </div>
-        {% endfor %}
-      </div>
-    {% else %}
-      <div class="p-4 rounded-lg border border-dashed border-white/[0.14] text-center">
-        <p class="text-body-sm text-[#c7c4d7]/70">No aspects detected in this text.</p>
-      </div>
-    {% endif %}
-  </div>
-
-  {# ── Client-side Text Highlighting ── #}
-  {# Uses DOM API to safely highlight aspect spans — never innerHTML with user data #}
-  <script>
-    (function() {
-      const container = document.getElementById('annotated-text-container');
-      const rawText = container.textContent;
-      const aspects = {{ result.aspects | tojson }};
-      
-      if (!aspects || aspects.length === 0) return;
-      
-      // Clear container and rebuild with DOM nodes
-      container.textContent = '';
-      const sorted = [...aspects].sort((a, b) => a.start - b.start);
-      let cursor = 0;
-      
-      sorted.forEach((asp) => {
-        if (asp.start > cursor) {
-          container.appendChild(document.createTextNode(rawText.slice(cursor, asp.start)));
-        }
-        const span = document.createElement('span');
-        span.className = 'highlight-' + asp.sentiment;
-        span.textContent = rawText.slice(asp.start, asp.end);
-        span.title = asp.sentiment + ' \u00B7 ' + Math.round(asp.confidence * 100) + '%';
-        container.appendChild(span);
-        cursor = asp.end;
-      });
-      
-      if (cursor < rawText.length) {
-        container.appendChild(document.createTextNode(rawText.slice(cursor)));
-      }
-    })();
-  </script>
-
-</div>
-{% else %}
-  {{ empty_state('psychology', 'Enter a review and click Analyze to see results') }}
-{% endif %}

docker/Dockerfile

@@ -2,14 +2,16 @@
 FROM python:3.11-slim AS builder
 
 WORKDIR /app
-COPY requirements.txt .
+COPY pyproject.toml .
+COPY src ./src
+COPY api ./api
 
 RUN apt-get update && apt-get install -y --no-install-recommends \
     build-essential \
     git \
     && rm -rf /var/lib/apt/lists/*
 
-RUN pip install --no-cache-dir --prefix=/install -r requirements.txt
+RUN pip install --no-cache-dir --prefix=/install .
 
 # Stage 2: Runtime
 FROM python:3.11-slim
@@ -20,13 +22,15 @@ WORKDIR /app
 COPY --from=builder /install /usr/local
 
 # Copy application code
-COPY app /app/app
+COPY api /app/api
+COPY src /app/src
 COPY scripts /app/scripts
-COPY absa /app/absa
 COPY docker /app/docker
 COPY .env.example /app/.env.example
 # .env is injected via docker-compose environment vars — no need to COPY it
 
+ENV PYTHONPATH=/app/src
+
 # Add a non-root user
 RUN adduser --disabled-password --gecos "" absauser \
     && chown -R absauser /app
@@ -35,4 +39,4 @@ USER absauser
 
 EXPOSE 8000
 
-CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]
+CMD ["uvicorn", "api.main:app", "--host", "0.0.0.0", "--port", "8000"]

docker/Dockerfile.prod

@@ -1,17 +1,19 @@
 FROM python:3.11-slim as builder
 WORKDIR /app
-COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
+COPY pyproject.toml .
+COPY src ./src
+COPY api ./api
+RUN pip install --no-cache-dir .
 
 FROM python:3.11-slim as runtime
 WORKDIR /app
 COPY --from=builder /usr/local/lib/python3.11 /usr/local/lib/python3.11
 COPY --from=builder /usr/local/bin /usr/local/bin
-COPY app/ ./app/
-COPY absa/ ./absa/
-ENV PYTHONPATH=/app
+COPY api/ ./api/
+COPY src/ ./src/
+ENV PYTHONPATH=/app/src
 ENV MODEL_SOURCE=huggingface_hub
 RUN useradd -m appuser && chown -R appuser /app
 USER appuser
 EXPOSE 8000
-CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000", "--workers", "2"]
+CMD ["uvicorn", "api.main:app", "--host", "0.0.0.0", "--port", "8000", "--workers", "2"]

docker/docker-compose.yml

@@ -25,7 +25,7 @@ services:
       context: ../
       dockerfile: Dockerfile
     container_name: absa-worker
-    command: ["celery", "-A", "app.tasks", "worker", "--loglevel=info"]
+    command: ["celery", "-A", "api.tasks", "worker", "--loglevel=info"]
     environment:
       - DATABASE_URL=${DATABASE_URL}
       - REDIS_URL=${REDIS_URL}

docs/HTMX_MIGRATION.md

@@ -1,92 +0,0 @@
-# HTMX Migration
-
-## Summary
-
-The Streamlit frontend (`streamlit_app/`) has been fully replaced with an HTMX + Jinja2 frontend served directly by the FastAPI backend. This eliminates the separate Streamlit server, reduces resource usage, and provides a single unified server for both UI and API.
-
-## What Changed
-
-| Before | After |
-|--------|-------|
-| Streamlit frontend at `streamlit_app/` | HTMX + Jinja2 at `api/app/templates/` |
-| Two servers: FastAPI (8000) + Streamlit (8501) | Single FastAPI server (8000) |
-| `streamlit run streamlit_app/Home.py` | `uvicorn app.main:app --reload` |
-| Plotly for charts | Chart.js (client-side rendering) |
-| Streamlit state management | Alpine.js + HTMX for interactivity |
-
-## Architecture
-
-```
-User Browser
-    ↕ HTMX / Alpine.js
-FastAPI (port 8000)
-    ├── /predict          → Predict page (HTML via Jinja2)
-    ├── /batch             → Batch upload page (HTML)
-    ├── /monitor           → System monitor page (HTML)
-    ├── /docs              → Swagger UI (unchanged)
-    ├── /api/predict       → JSON API (unchanged)
-    ├── /api/batch         → JSON API (unchanged)
-    ├── /predict/fragment  → HTMX fragment (HTML partial)
-    ├── /batch/fragment    → HTMX fragment (HTML partial)
-    └── /api/batch/progress/{job_id} → SSE endpoint
-```
-
-## Frontend Stack
-
-- **HTMX 2.0.3** - AJAX, CSS transitions, WebSocket/SSE
-- **Alpine.js 3.14** - Reactive UI state (toasts, sidebar)
-- **Tailwind CSS (Play CDN)** - Utility-first CSS
-- **Chart.js** - Client-side charts (batch results)
-- **Material Symbols** - Icon font
-- **itsdangerous** - CSRF protection
-
-## CSRF Protection
-
-All HTMX form endpoints require a CSRF token. The token is:
-- Set as an `HttpOnly` cookie on every GET response
-- Injected into `<meta name="csrf-token">` in `base.html`
-- Automatically attached to HTMX requests via `htmx:configRequest` event handler
-- Validated by `CSRFMiddleware` for all non-GET, non-API requests
-
-## File Structure
-
-```
-api/app/
-├── templates/
-│   ├── base.html              # Base layout with nav, sidebar, toast system
-│   ├── pages/
-│   │   ├── predict.html       # Single review prediction form
-│   │   ├── batch.html         # CSV upload + progress + results
-│   │   └── monitor.html       # Health stats + performance metrics
-│   ├── partials/
-│   │   ├── predict_result.html     # Prediction result card
-│   │   ├── batch_progress.html     # Batch job progress bar
-│   │   ├── batch_charts.html       # Chart.js charts
-│   │   └── monitor_health.html     # Health status chip
-│   └── macros/
-│       └── ui.html            # Reusable components (badges, icons, etc.)
-├── static/
-│   └── css/
-│       └── app.css            # Design system components
-├── core/
-│   └── templates.py           # Centralized Jinja2Templates instance
-├── middleware/
-│   └── csrf.py                # CSRF protection middleware
-└── main.py                    # FastAPI app entry point
-```
-
-## Deleted Files
-
-- `streamlit_app/` (entire directory)
-- `config/docker/Dockerfile.streamlit`
-- Streamlit service in `config/docker/docker-compose.yml`
-- Streamlit dependency from `requirements.txt`
-- Plotly dependency from `requirements.txt`
-
-## Verification
-
-- All page routes return HTML at `/predict`, `/batch`, `/monitor`
-- JSON API endpoints remain at `/api/predict`, `/api/batch`
-- Swagger UI at `/docs` is unchanged
-- HTMX endpoints return HTML fragments (no page reload)
-- SSE endpoint for live batch progress at `/api/batch/progress/{job_id}`

dvc.yaml

@@ -1,11 +1,11 @@
 stages:
   preprocess_semeval:
-    cmd: PYTHONPATH=. python absa/data/dataset.py
+    cmd: PYTHONPATH=src python -m absa.data.dataset
     deps:
-      - absa/data/dataset.py
-      - absa/data/preprocess.py
-      - absa/data/lang_detect.py
-      - absa/data/transliterate.py
+      - src/absa/data/dataset.py
+      - src/absa/data/preprocess.py
+      - src/absa/data/lang_detect.py
+      - src/absa/data/transliterate.py
       - data/raw/semeval_restaurants
       - data/raw/semeval_laptops
     outs:
@@ -13,12 +13,12 @@ stages:
       - data/processed/semeval_test.jsonl
 
   preprocess_hindi:
-    cmd: PYTHONPATH=. python absa/data/hindi_loader.py
+    cmd: PYTHONPATH=src python -m absa.data.hindi_loader
     deps:
-      - absa/data/hindi_loader.py
-      - absa/data/preprocess.py
-      - absa/data/lang_detect.py
-      - absa/data/transliterate.py
+      - src/absa/data/hindi_loader.py
+      - src/absa/data/preprocess.py
+      - src/absa/data/lang_detect.py
+      - src/absa/data/transliterate.py
       - data/raw/amazon_hindi/hindi_sentiment.jsonl
     outs:
       - data/processed/amazon_hindi.jsonl

frontend/Home.py

@@ -0,0 +1,57 @@
+"""Multilingual ABSA — Streamlit entry point.
+
+Navigation split:
+  • Analysis  → the only screen regular users see (input comment → results).
+  • Admin     → application status, batch analytics, system monitor.
+"""
+
+from __future__ import annotations
+
+import streamlit as st
+from ui import apply_theme
+
+st.set_page_config(
+    page_title="Multilingual ABSA",
+    page_icon="🌍",
+    layout="wide",
+    initial_sidebar_state="expanded",
+)
+
+apply_theme()
+
+analyzer = st.Page(
+    "views/predict.py",
+    title="Sentiment Analyzer",
+    icon="💬",
+    url_path="predict",
+    default=True,
+)
+
+admin_overview = st.Page(
+    "views/admin/overview.py",
+    title="Overview",
+    icon="📊",
+    url_path="admin",
+)
+admin_batch = st.Page(
+    "views/admin/batch.py",
+    title="Batch Analytics",
+    icon="📁",
+    url_path="batch",
+)
+admin_monitor = st.Page(
+    "views/admin/monitor.py",
+    title="System Monitor",
+    icon="🩺",
+    url_path="monitor",
+)
+
+pg = st.navigation(
+    {
+        "Analysis": [analyzer],
+        "Admin": [admin_overview, admin_batch, admin_monitor],
+    },
+    position="sidebar",
+)
+
+pg.run()

frontend/absa_client.py

@@ -0,0 +1,84 @@
+"""HTTP client for the Multilingual ABSA FastAPI backend.
+
+The Streamlit frontend never imports the ML pipeline directly — it talks to
+the running FastAPI service (``API_BASE_URL``, default ``http://localhost:8000``)
+over plain HTTP. This keeps the dashboard a thin, deployable UI layer.
+"""
+
+from __future__ import annotations
+
+import os
+from typing import Any, Optional
+
+import httpx
+import streamlit as st
+
+API_BASE_URL: str = os.getenv("API_BASE_URL", "http://localhost:8000")
+
+_TIMEOUT: float = float(os.getenv("API_TIMEOUT", "60"))
+
+
+class APIClient:
+    """Thin wrapper around the ABSA REST API with Streamlit-friendly errors."""
+
+    def __init__(self, base_url: str = API_BASE_URL, transport: Optional[httpx.BaseTransport] = None) -> None:
+        self.base_url = base_url.rstrip("/")
+        self._client = httpx.Client(
+            base_url=self.base_url,
+            timeout=_TIMEOUT,
+            follow_redirects=True,
+            transport=transport,
+        )
+
+    # ── Helpers ────────────────────────────────────────────────────────────
+
+    def _request(self, method: str, path: str, **kwargs: Any) -> Optional[Any]:
+        try:
+            response = self._client.request(method, path, **kwargs)
+            response.raise_for_status()
+            return response.json()
+        except httpx.HTTPStatusError as exc:
+            detail = exc.response.text
+            st.error(f"API error ({exc.response.status_code}): {detail}")
+            return None
+        except httpx.HTTPError as exc:
+            st.error(f"Cannot reach the ABSA API at `{self.base_url}` — is it running?\n\n{exc}")
+            return None
+
+    def close(self) -> None:
+        self._client.close()
+
+    # ── Endpoints ──────────────────────────────────────────────────────────
+
+    def get_health(self) -> Optional[dict[str, str]]:
+        return self._request("GET", "/health")
+
+    def get_info(self) -> Optional[dict[str, str]]:
+        return self._request("GET", "/info")
+
+    def predict(self, text: str, language: str = "auto") -> Optional[dict[str, Any]]:
+        payload = {"text": text, "language": language if language != "auto" else None}
+        return self._request("POST", "/predict", json=payload)
+
+    def upload_batch(self, file: Any) -> Optional[dict[str, Any]]:
+        files = {"file": (file.name, file.getvalue(), "text/csv")}
+        return self._request("POST", "/batch", files=files)
+
+    def get_batch_status(self, job_id: str) -> Optional[dict[str, Any]]:
+        return self._request("GET", f"/status/{job_id}")
+
+    def download_result(self, job_id: str) -> Optional[bytes]:
+        """Fetch the generated CSV bytes for a completed batch job."""
+        try:
+            response = self._client.get(f"/download/{job_id}")
+            response.raise_for_status()
+            return response.content
+        except httpx.HTTPError as exc:
+            st.error(f"Failed to download results: {exc}")
+            return None
+
+
+@st.cache_resource(show_spinner=False)
+def get_client() -> APIClient:
+    """Return a process-wide cached API client (reused across reruns)."""
+    return APIClient()

frontend/ui.py

@@ -0,0 +1,251 @@
+"""Shared UI helpers for the Streamlit dashboard: theme, cards, badges."""
+
+from __future__ import annotations
+
+import os
+from typing import Iterable
+
+import streamlit as st
+
+SENTIMENT_COLORS: dict[str, str] = {
+    "positive": "#16a34a",
+    "negative": "#dc2626",
+    "neutral": "#64748b",
+    "conflict": "#9333ea",
+}
+
+LANGUAGE_LABELS: dict[str, str] = {
+    "en": "English",
+    "hi": "Hindi",
+    "hinglish": "Hinglish",
+    "auto": "Auto-detect",
+}
+
+_SAMPLE_REVIEWS: list[dict[str, str]] = [
+    {
+        "label": "Battery + Screen (EN)",
+        "text": "The battery life is amazing but the screen is too dim.",
+    },
+    {
+        "label": "Camera & Service (EN)",
+        "text": "Great camera quality, though the delivery was terribly slow.",
+    },
+    {
+        "label": "Sound (HI)",
+        "text": "आवाज़ बहुत साफ़ है और बेस भी बढ़िया है।",
+    },
+    {
+        "label": "Hinglish Mix",
+        "text": "Phone ka design badhiya hai lekin battery life kharab hai.",
+    },
+]
+
+
+def apply_theme() -> None:
+    """Inject custom CSS: modern gradient hero, cards, badges, spacing."""
+    st.markdown(
+        """
+        <style>
+        :root {
+            --absa-primary: #6366f1;
+            --absa-primary-2: #8b5cf6;
+            --absa-accent: #06b6d4;
+        }
+
+        /* Modern gradient hero banner */
+        .absa-hero {
+            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #06b6d4 100%);
+            border-radius: 1.25rem;
+            padding: 2.5rem 2.5rem 2rem 2.5rem;
+            color: white;
+            margin-bottom: 1.5rem;
+            box-shadow: 0 10px 30px rgba(99, 102, 241, 0.35);
+        }
+        .absa-hero h1 { font-size: 2.4rem; font-weight: 800; margin: 0 0 0.4rem 0; letter-spacing: -0.02em; }
+        .absa-hero p  { font-size: 1.05rem; opacity: 0.92; margin: 0; max-width: 46rem; }
+
+        /* Action / feature cards */
+        .absa-card {
+            background: linear-gradient(180deg, #ffffff, #f8fafc);
+            border: 1px solid #e2e8f0;
+            border-radius: 1rem;
+            padding: 1.35rem 1.4rem;
+            margin-bottom: 1rem;
+            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+            transition: transform 0.15s ease, box-shadow 0.15s ease;
+        }
+        .absa-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); }
+        .absa-card .card-title { font-size: 1.15rem; font-weight: 700; color: #0f172a; margin-bottom: 0.3rem; }
+        .absa-card .card-desc { font-size: 0.92rem; color: #475569; margin-bottom: 0.7rem; }
+        .absa-card .card-icon { font-size: 1.6rem; margin-bottom: 0.4rem; }
+
+        /* Aspect result card */
+        .absa-result {
+            border: 1px solid #e2e8f0;
+            border-left: 6px solid #94a3b8;
+            border-radius: 0.9rem;
+            padding: 1rem 1.2rem;
+            margin-bottom: 0.85rem;
+            background: #ffffff;
+        }
+        .absa-result .aspect-name { font-weight: 700; color: #0f172a; font-size: 1.05rem; }
+        .absa-result .confidence { color: #64748b; font-size: 0.9rem; margin-top: 0.3rem; }
+
+        /* Sentiment badge */
+        .absa-badge {
+            display: inline-block;
+            padding: 0.22rem 0.8rem;
+            border-radius: 999px;
+            font-size: 0.78rem;
+            font-weight: 700;
+            letter-spacing: 0.04em;
+            text-transform: uppercase;
+            color: #fff;
+        }
+
+        /* Confidence bar */
+        .absa-bar {
+            height: 8px;
+            border-radius: 999px;
+            background: #e2e8f0;
+            overflow: hidden;
+            margin-top: 0.5rem;
+        }
+        .absa-bar-fill { height: 100%; border-radius: 999px; }
+
+        /* Language pill */
+        .absa-pill {
+            display: inline-block;
+            background: #eef2ff;
+            color: #4338ca;
+            border-radius: 999px;
+            padding: 0.15rem 0.7rem;
+            font-size: 0.8rem;
+            font-weight: 600;
+            margin-right: 0.4rem;
+        }
+
+        div[data-testid="stMetric"] {
+            background: #ffffff;
+            border: 1px solid #e2e8f0;
+            border-radius: 0.9rem;
+            padding: 0.9rem 1rem;
+            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+        }
+
+        .stButton > button[kind="primary"] {
+            background: linear-gradient(135deg, #6366f1, #8b5cf6);
+            border: none;
+            font-weight: 600;
+        }
+
+        footer { visibility: hidden; }
+        </style>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+def hero(title: str, subtitle: str) -> None:
+    """Render the gradient hero banner."""
+    st.markdown(
+        f"""
+        <div class="absa-hero">
+            <h1>{title}</h1>
+            <p>{subtitle}</p>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+def feature_card(icon: str, title: str, description: str, accent: str = "#6366f1") -> None:
+    """Render a clickable-style feature card."""
+    st.markdown(
+        f"""
+        <div class="absa-card">
+            <div class="card-icon">{icon}</div>
+            <div class="card-title">{title}</div>
+            <div class="card-desc">{description}</div>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+def sentiment_badge(sentiment: str) -> str:
+    """HTML for a colored sentiment badge."""
+    color = SENTIMENT_COLORS.get(sentiment, "#64748b")
+    return f'<span class="absa-badge" style="background:{color};">{sentiment}</span>'
+
+
+def aspect_card(aspect: str, sentiment: str, confidence: float) -> str:
+    """HTML for a single aspect result card with a confidence bar."""
+    color = SENTIMENT_COLORS.get(sentiment, "#64748b")
+    pct = max(0.0, min(100.0, float(confidence) * 100.0))
+    return (
+        f'<div class="absa-result" style="border-left-color:{color};">'
+        f'<div class="aspect-name">{aspect} &nbsp; {sentiment_badge(sentiment)}</div>'
+        f'<div class="confidence">Confidence: {confidence:.2f}</div>'
+        f'<div class="absa-bar"><div class="absa-bar-fill" style="width:{pct:.1f}%;background:{color};"></div></div>'
+        f"</div>"
+    )
+
+
+def render_aspects(aspects: Iterable[dict]) -> None:
+    """Render a list of aspect dicts as styled cards."""
+    items = list(aspects)
+    if not items:
+        st.info("No aspects detected in this text.")
+        return
+    html = "".join(
+        aspect_card(
+            str(a.get("aspect", "N/A")),
+            str(a.get("sentiment", "neutral")),
+            float(a.get("confidence", 0.0)),
+        )
+        for a in items
+    )
+    st.markdown(html, unsafe_allow_html=True)
+
+
+def language_options() -> list[str]:
+    return ["auto", "en", "hi", "hinglish"]
+
+
+def sample_reviews() -> list[dict[str, str]]:
+    return _SAMPLE_REVIEWS
+
+
+def require_admin() -> bool:
+    """Gate admin pages behind an optional password (env `ADMIN_PASSWORD`).
+
+    When `ADMIN_PASSWORD` is empty the admin section is open; otherwise a
+    lock screen is shown until the correct password is entered. Callers should
+    `st.stop()` when this returns ``False``.
+    """
+    password = os.getenv("ADMIN_PASSWORD", "")
+    if not password:
+        return True
+    if st.session_state.get("admin_ok"):
+        return True
+
+    st.markdown(
+        """
+        <div style="max-width:28rem;margin:4rem auto;text-align:center;">
+            <div style="font-size:2.5rem;">🔒</div>
+            <h2>Admin access</h2>
+            <p style="color:#64748b;">This section is restricted. Enter the admin
+            password to view application status and features.</p>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+    candidate = st.text_input("Admin password", type="password", key="admin_password")
+    if st.button("Unlock", type="primary", key="admin_unlock"):
+        if candidate == password:
+            st.session_state["admin_ok"] = True
+            st.rerun()
+        else:
+            st.error("Incorrect password.")
+    return False

frontend/views/admin/batch.py

@@ -0,0 +1,118 @@
+"""Admin — batch analytics: CSV upload, live job progress, result download."""
+
+from __future__ import annotations
+
+import io
+import time
+
+import pandas as pd
+import streamlit as st
+from absa_client import get_client
+from ui import apply_theme, hero, require_admin
+
+apply_theme()
+
+if not require_admin():
+    st.stop()
+
+client = get_client()
+
+hero(
+    "Admin · Batch Analytics 📁",
+    "Upload a CSV of product reviews, queue an async batch job on the worker, "
+    "track progress live, and download the full annotated results.",
+)
+
+col_up, col_hint = st.columns([2, 1], gap="large")
+
+with col_up:
+    uploaded = st.file_uploader("Upload a CSV file", type=["csv"], accept_multiple_files=False)
+
+with col_hint:
+    st.markdown(
+        """
+        <div class="absa-card">
+            <div class="card-title">Required format</div>
+            <div class="card-desc">A CSV with a <code>text</code> column. Limits:</div>
+            <ul>
+                <li>Max 10,000 rows</li>
+                <li>Max 50 MB</li>
+            </ul>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+df_preview = None
+if uploaded is not None:
+    try:
+        df_preview = pd.read_csv(io.BytesIO(uploaded.getvalue()))
+        st.success(f"Loaded {len(df_preview)} rows with columns: {', '.join(df_preview.columns)}")
+        if "text" not in df_preview.columns:
+            st.error("CSV must contain a **text** column.")
+            df_preview = None
+        else:
+            st.dataframe(df_preview.head(5), use_container_width=True, hide_index=True)
+    except Exception as exc:
+        st.error(f"Could not parse CSV: {exc}")
+
+    if df_preview is not None:
+        start = st.button("🚀 Start Batch Processing", type="primary", use_container_width=True)
+
+        if start:
+            with st.spinner("Uploading and queuing job…"):
+                job = client.upload_batch(uploaded)
+            if job:
+                st.session_state["batch_job_id"] = job.get("job_id")
+                st.rerun()
+
+job_id = st.session_state.get("batch_job_id")
+if job_id:
+    st.markdown("---")
+    st.subheader(f"Job progress — `{job_id[:8]}…`")
+
+    progress = st.progress(0.0)
+    status = st.status("Queued…", expanded=True)
+
+    while True:
+        job = client.get_batch_status(job_id)
+        if job is None:
+            st.error("Failed to fetch job status.")
+            break
+
+        total = max(int(job.get("total_reviews") or 0), 1)
+        processed = int(job.get("processed") or 0)
+        ratio = min(processed / total, 1.0)
+        progress.progress(ratio)
+
+        label = {
+            "queued": "Queued — waiting for a worker…",
+            "processing": f"Processing {processed}/{total} reviews…",
+            "completed": f"Completed — {processed}/{total} reviews analyzed ✅",
+            "failed": "Job failed ❌",
+        }.get(job.get("status"), job.get("status", "…"))
+        status.update(
+            label=label,
+            state="running" if job.get("status") in ("queued", "processing") else "complete",
+        )
+
+        if job.get("status") in ("completed", "failed"):
+            break
+        time.sleep(2)
+
+    c1, c2, c3 = st.columns(3)
+    c1.metric("Total Reviews", job.get("total_reviews"))
+    c2.metric("Processed", job.get("processed"))
+    c3.metric("Status", job.get("status"))
+
+    if job.get("status") == "completed":
+        result_bytes = client.download_result(job_id)
+        if result_bytes is not None:
+            st.download_button(
+                "⬇️ Download results (CSV)",
+                data=result_bytes,
+                file_name=f"absa_results_{job_id}.csv",
+                mime="text/csv",
+                type="primary",
+                use_container_width=True,
+            )

frontend/views/admin/monitor.py

@@ -0,0 +1,53 @@
+"""Admin — system monitor: health checks, service metadata, diagnostics."""
+
+from __future__ import annotations
+
+import streamlit as st
+from absa_client import get_client
+from ui import apply_theme, hero, require_admin
+
+apply_theme()
+
+if not require_admin():
+    st.stop()
+
+client = get_client()
+
+hero(
+    "Admin · System Monitor 🩺",
+    "Live health checks, model metadata, and API configuration for the ABSA service.",
+)
+
+auto_refresh = st.toggle("Auto-refresh every 5s", value=False)
+
+col_h, col_i = st.columns(2)
+with col_h:
+    health = client.get_health()
+    if health:
+        st.success("### API is healthy ✅")
+        for key, value in health.items():
+            st.markdown(f"- **{key}**: `{value}`")
+    else:
+        st.error("### API unreachable ❌")
+
+with col_i:
+    info = client.get_info()
+    if info:
+        st.info("### Service info")
+        for key, value in info.items():
+            st.markdown(f"- **{key}**: `{value}`")
+
+st.markdown("---")
+
+col_a, col_b, col_c = st.columns(3)
+col_a.metric("Endpoint", client.base_url)
+col_b.metric("Timeout (s)", "60")
+col_c.metric("Languages", "en · hi · hinglish")
+
+st.caption(
+    "Tip: run the API with `uvicorn api.main:app --port 8000` and this "
+    "dashboard with `streamlit run streamlit_app/Home.py`."
+)
+
+if auto_refresh:
+    st.rerun()

frontend/views/admin/overview.py

@@ -0,0 +1,98 @@
+"""Admin — overview: application status and feature details."""
+
+from __future__ import annotations
+
+import streamlit as st
+from absa_client import get_client
+from ui import apply_theme, feature_card, hero, require_admin
+
+apply_theme()
+
+if not require_admin():
+    st.stop()
+
+client = get_client()
+
+hero(
+    "Admin · Application Overview 📊",
+    "Status of the ABSA platform, model metadata, and everything available in this deployment.",
+)
+
+# ── Live status strip ─────────────────────────────────────────────────────────
+info = client.get_info()
+health = client.get_health()
+api_online = health is not None
+
+col1, col2, col3, col4 = st.columns(4)
+col1.metric(
+    "API Status",
+    "Online" if api_online else "Offline",
+    delta="●" if api_online else "○",
+    delta_color="normal" if api_online else "off",
+)
+col2.metric(
+    "Database",
+    "connected" if api_online else "unknown",
+)
+col3.metric("Model", (info or {}).get("model_name", "xlm-roberta-base-absa"))
+col4.metric("API Base URL", client.base_url)
+
+st.markdown("---")
+
+# ── Detailed status ───────────────────────────────────────────────────────────
+col_h, col_i = st.columns(2, gap="large")
+
+with col_h:
+    st.subheader("Health check")
+    if health:
+        for key, value in health.items():
+            st.markdown(f"- **{key}**: `{value}`")
+    else:
+        st.error("API unreachable — start `uvicorn api.main:app --port 8000`.")
+
+with col_i:
+    st.subheader("Service info")
+    if info:
+        for key, value in info.items():
+            st.markdown(f"- **{key}**: `{value}`")
+    else:
+        st.warning("No service info available.")
+
+st.markdown("---")
+
+# ── Feature details ───────────────────────────────────────────────────────────
+st.subheader("What's available")
+col_a, col_b, col_c = st.columns(3)
+with col_a:
+    feature_card(
+        "💬",
+        "Sentiment Analyzer",
+        "The public view — users paste a review and get aspect-level sentiment.",
+    )
+with col_b:
+    feature_card(
+        "📁",
+        "Batch Analytics",
+        "Upload a CSV of reviews, run async jobs, and download annotated results.",
+    )
+with col_c:
+    feature_card(
+        "🩺",
+        "System Monitor",
+        "Health checks, service metadata, and auto-refresh diagnostics.",
+    )
+
+st.markdown(
+    """
+    <div class="absa-card">
+        <div class="card-title">REST API</div>
+        <div class="card-desc">
+            All dashboard features are backed by the JSON API at <code>/docs</code>:
+        </div>
+        <code>POST /predict</code> · <code>POST /batch</code> ·
+        <code>GET /status/{job_id}</code> · <code>GET /health</code> ·
+        <code>GET /info</code> · <code>GET /metrics</code>
+    </div>
+    """,
+    unsafe_allow_html=True,
+)

frontend/views/predict.py

@@ -0,0 +1,67 @@
+"""User-facing view — the only screen regular users see.
+
+Type/paste a review, pick a language, get aspect-level sentiment back.
+No dashboards, no metrics, no administration here.
+"""
+
+from __future__ import annotations
+
+import streamlit as st
+from absa_client import get_client
+from ui import LANGUAGE_LABELS, apply_theme, language_options, render_aspects
+
+client = get_client()
+apply_theme()
+
+st.markdown(
+    """
+    <div style="text-align:center;padding:1.2rem 0 0.5rem 0;">
+        <h1 style="font-size:2.3rem;margin:0;letter-spacing:-0.02em;">💬 Sentiment Analyzer</h1>
+        <p style="color:#64748b;font-size:1.05rem;margin-top:0.4rem;">
+            Paste a review or comment in English, Hindi, or Hinglish and get
+            aspect-level sentiment instantly.
+        </p>
+    </div>
+    """,
+    unsafe_allow_html=True,
+)
+
+# ── Input ─────────────────────────────────────────────────────────────────────
+text = st.text_area(
+    "Your comment",
+    height=170,
+    placeholder="e.g. The camera is amazing but the battery drains too fast.",
+    key="review_text",
+)
+
+col_lang, col_btn = st.columns([1, 2], gap="medium")
+with col_lang:
+    language = st.selectbox(
+        "Language",
+        language_options(),
+        index=0,
+        format_func=lambda code: LANGUAGE_LABELS[code],
+    )
+with col_btn:
+    st.caption("Auto-detects the language if unsure.")
+    analyze = st.button(
+        "Analyze Sentiment",
+        type="primary",
+        use_container_width=True,
+        disabled=not text.strip(),
+    )
+
+st.markdown("---")
+
+# ── Results ───────────────────────────────────────────────────────────────────
+if analyze and text.strip():
+    with st.spinner("Analyzing…"):
+        result = client.predict(text.strip(), language)
+
+    if result:
+        aspects = result.get("aspects") or []
+
+        st.subheader("Aspects found")
+        render_aspects(aspects)
+else:
+    st.info("Enter a review above and press **Analyze Sentiment** to get started.")

pyproject.toml

@@ -1,10 +1,10 @@
 [build-system]
 requires = ["setuptools>=68.0"]
-build-backend = "setuptools.backends._legacy:_Backend"
+build-backend = "setuptools.build_meta"
 
 [project]
 name = "multilingual-absa"
-version = "2.0.0"
+version = "2.1.0"
 description = "Multilingual Aspect-Based Sentiment Analysis for English, Hindi, and Hinglish"
 readme = "README.md"
 license = {text = "MIT"}
@@ -20,12 +20,67 @@ classifiers = [
     "Topic :: Scientific/Engineering :: Artificial Intelligence",
     "Topic :: Text Processing :: Linguistic",
 ]
+dependencies = [
+    # ML / NLP
+    "transformers>=4.41.0",
+    "datasets>=2.19.0",
+    "torch>=2.3.0",
+    "onnxruntime>=1.18.0",
+    "optimum[onnxruntime]>=1.19.0",
+    "peft>=0.10.0",
+    "fasttext-predict>=0.9.2.4",
+    "indic-nlp-library @ git+https://github.com/anoopkunchukuttan/indic_nlp_library.git",
+    "nlpaug>=1.1.11",
+    # Data & Metrics
+    "scikit-learn>=1.4.2",
+    "pandas>=2.2.3",
+    "numpy>=1.26.4",
+    "seqeval>=1.2.2",
+    # Experiment tracking & pipelines
+    "mlflow>=2.15.0",
+    "dvc>=3.51.1",
+    "evidently>=0.4.30",
+    # API
+    "fastapi>=0.115.0",
+    "uvicorn>=0.29.0",
+    "python-multipart>=0.0.9",
+    "slowapi>=0.1.9",
+    "pydantic>=2.7.1",
+    "python-dotenv>=1.0.1",
+    "prometheus-fastapi-instrumentator>=7.0.0",
+    # Async workers
+    "celery>=5.4.0",
+    "redis>=5.0.4",
+    # Database
+    "psycopg2-binary>=2.9.9",
+    # Frontend (Streamlit dashboard — calls the FastAPI backend over HTTP)
+    "streamlit>=1.37.0",
+    "httpx>=0.28.0",
+]
+
+[project.optional-dependencies]
+dev = [
+    "pytest>=8.2.0",
+    "pytest-asyncio>=0.23.7",
+    "pytest-cov>=5.0.0",
+    "coverage>=7.5.0",
+    "ruff>=0.6.0",
+    "mypy>=1.10.0",
+    "bandit>=1.7.9",
+    "radon>=6.0.1",
+    "scalene>=1.5.30",
+]
+
+[tool.setuptools.packages.find]
+where = ["src", "."]
+include = ["absa*", "api*"]
 
 [tool.pytest.ini_options]
 testpaths = ["tests"]
 python_files = ["test_*.py"]
 asyncio_mode = "auto"
 asyncio_default_fixture_loop_scope = "function"
+addopts = "--cov=api --cov=absa --cov-report=term-missing --cov-report=xml"
 
 [tool.ruff]
 target-version = "py310"
@@ -33,7 +88,31 @@ line-length = 120
 
 [tool.ruff.lint]
 select = ["E", "F", "I", "N", "W"]
+extend-ignore = ["N999"]  # module file name style
+
+[tool.mypy]
+python_version = "3.10"
+warn_return_any = true
+warn_unused_configs = true
+ignore_missing_imports = true
+check_untyped_defs = true
+exclude = [
+    "tests/",
+    "scripts/",
+    "notebooks/",
+    "docs/",
+]
+
+[tool.bandit]
+exclude_dirs = ["tests", "scripts"]
+targets = ["api", "absa"]
+skips = ["B101"]  # allow assert (pytest usage)
 
 [tool.coverage.run]
-source = ["app", "absa"]
+source = ["api", "absa"]
 omit = ["*/tests/*", "*/__pycache__/*"]
+
+[tool.coverage.report]
+show_missing = true
+skip_covered = true
+fail_under = 24