app.py

from __future__ import annotations

import os
from pathlib import Path
from typing import Callable


LABELS = {
    0: "Normal",
    1: "Hate/Offensive",
}

WEIGHT_FILENAMES = ("model.safetensors", "pytorch_model.bin")
TOKENIZER_FILENAMES = (
    "tokenizer.json",
    "tokenizer_config.json",
    "vocab.txt",
    "special_tokens_map.json",
)

DEFAULT_MODEL_PATH = "/Users/qqq/Downloads/fine_tuned_hatebert_model"

LIGHT_KEYNOTE_CSS = """
:root {
  --paper: #f7fbff;
  --paper-2: #eef5fb;
  --paper-3: #e8eef5;
  --ink: #15202a;
  --muted: #5f6f7d;
  --accent: #4f87b3;
  --accent-soft: #d8e7f4;
  --clear: #2d7a57;
  --danger: #b65745;
  --line: rgba(35, 71, 102, 0.12);
}

.gradio-container {
  background:
    radial-gradient(circle at 86% 14%, rgba(107, 177, 226, 0.18), transparent 18%),
    linear-gradient(90deg, rgba(35, 71, 102, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(35, 71, 102, 0.04) 1px, transparent 1px),
    linear-gradient(150deg, var(--paper) 0%, var(--paper-2) 46%, var(--paper-3) 100%) !important;
  background-size: auto, 40px 40px, 40px 40px, auto !important;
  color: var(--ink) !important;
  font-family: "Aptos", "Segoe UI", sans-serif !important;
}

.prototype-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 18px 28px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, #14212b, #36556e);
  color: #9fd0f7;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
}

.brand-copy {
  min-width: 0;
}

.brand-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
}

.brand-subtitle {
  margin-top: 2px;
  color: rgba(21, 32, 42, 0.56);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.status-badge {
  padding: 10px 12px;
  border: 1px solid rgba(35, 71, 102, 0.1);
  background: rgba(255, 255, 255, 0.52);
  color: #2e5b82;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.prototype-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(410px, 0.88fr);
  gap: 24px;
  align-items: start;
}

.stage-copy {
  padding: 10px 0 6px;
}

.stage-kicker {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stage-title {
  margin: 14px 0 0;
  max-width: 9em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 5.2vw, 68px);
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.stage-subtitle {
  max-width: 35rem;
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.stage-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
  max-width: 700px;
}

.stage-proof-item {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.stage-proof-label {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.stage-proof-value {
  margin-top: 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
}

.stage-chips {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.stage-chip {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(37, 85, 123, 0.1);
  background: rgba(37, 85, 123, 0.06);
  color: #25557b;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.queue {
  margin-top: 16px;
  display: grid;
  gap: 12px;
  max-width: 640px;
}

.queue-card {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(35, 71, 102, 0.08);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 16px 34px rgba(114, 145, 175, 0.08);
}

.queue-score {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  color: #25557b;
}

.queue-title {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(21, 32, 42, 0.52);
}

.queue-text {
  margin-top: 4px;
  color: rgba(21, 32, 42, 0.78);
  line-height: 1.42;
}

.queue-pill {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(37, 85, 123, 0.1);
  background: rgba(37, 85, 123, 0.06);
  color: #25557b;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stage-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid #5a8db5;
  background: rgba(255, 255, 255, 0.48);
  color: rgba(21, 32, 42, 0.76);
  line-height: 1.5;
}

.prototype-panel {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(35, 71, 102, 0.1);
  box-shadow: 0 22px 50px rgba(96, 132, 166, 0.12);
  backdrop-filter: blur(16px);
  padding: 24px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.panel-kicker {
  color: rgba(21, 32, 42, 0.55);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.panel-title {
  margin-top: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  line-height: 0.98;
}

.panel-badge {
  padding: 8px 10px;
  border: 1px solid rgba(79, 135, 179, 0.16);
  background: rgba(79, 135, 179, 0.08);
  color: #4076a1;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.prototype-panel textarea,
.prototype-panel input,
.prototype-panel .gradio-textbox textarea {
  background: rgba(243, 249, 255, 0.82) !important;
  border: 1px solid rgba(35, 71, 102, 0.1) !important;
  color: rgba(21, 32, 42, 0.78) !important;
}

.prototype-panel label,
.prototype-panel .gradio-form label {
  color: rgba(21, 32, 42, 0.55) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.prototype-panel button.primary,
.prototype-panel button.lg.primary {
  background: linear-gradient(135deg, #1f4e72, #5a8db5) !important;
  border: 0 !important;
  color: white !important;
}

.prototype-panel button.secondary {
  border: 1px solid rgba(35, 71, 102, 0.1) !important;
  background: rgba(255, 255, 255, 0.54) !important;
  color: #234966 !important;
}

.prototype-result {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(35, 71, 102, 0.1);
  display: grid;
  grid-template-columns: 1fr 168px;
  gap: 16px;
  align-items: center;
}

.result-copy {
  min-width: 0;
}

.result-kicker {
  color: rgba(21, 32, 42, 0.52);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.result-label {
  margin-top: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 48px;
  line-height: 0.95;
}

.result-confidence {
  margin-top: 10px;
  max-width: 17rem;
  color: rgba(21, 32, 42, 0.66);
  font-size: 15px;
  line-height: 1.55;
}

.result-ring {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  justify-self: end;
  background: conic-gradient(from -90deg, #5c93c0 0 0%, rgba(35, 71, 102, 0.08) 0% 100%);
}

.result-ring-inner {
  width: 114px;
  height: 114px;
  border-radius: 50%;
  background: rgba(246, 250, 255, 0.96);
  display: grid;
  place-items: center;
  text-align: center;
}

.result-ring-value {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
}

.result-ring-label {
  margin-top: 4px;
  color: rgba(21, 32, 42, 0.54);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.normal-result {
  --result-accent: var(--clear);
}

.harmful-result {
  --result-accent: var(--danger);
}

.error-result {
  --result-accent: var(--danger);
}

.neutral-result {
  --result-accent: var(--accent);
}

@media (max-width: 1100px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .prototype-stage {
    grid-template-columns: 1fr;
  }

  .queue {
    max-width: 100%;
  }
}

@media (max-width: 680px) {
  .prototype-result {
    grid-template-columns: 1fr;
  }

  .result-ring {
    justify-self: start;
  }
}
"""

Classifier = Callable[[str], tuple[str, float]]


def detect_missing_model_artifacts(model_dir: Path | str) -> list[str]:
    path = Path(model_dir)
    missing: list[str] = []

    if not (path / "config.json").exists():
        missing.append("config.json")

    if not any((path / name).exists() for name in WEIGHT_FILENAMES):
        missing.append("model weights (model.safetensors or pytorch_model.bin)")

    if not any((path / name).exists() for name in TOKENIZER_FILENAMES):
        missing.append("tokenizer assets")

    return missing


def build_colab_mount_hint() -> str:
    return (
        "Mount Google Drive first with: "
        "from google.colab import drive; drive.mount('/content/drive')"
    )


def build_model_path_hint(model_path: Path | str) -> str:
    path = str(model_path)
    if path.startswith("/content/drive/"):
        return build_colab_mount_hint()
    return (
        "Check that the local model path is correct or set "
        "HATEBERT_MODEL_PATH to your model directory."
    )


def get_bundled_model_path(base_dir: Path | str | None = None) -> Path:
    root = Path(base_dir) if base_dir is not None else Path(__file__).resolve().parent
    return root / "fine_tuned_hatebert_model"


def resolve_model_path(base_dir: Path | str | None = None) -> str:
    env_path = os.getenv("HATEBERT_MODEL_PATH")
    if env_path:
        return env_path

    bundled = get_bundled_model_path(base_dir)
    if bundled.exists():
        return str(bundled)

    return DEFAULT_MODEL_PATH


def get_transformers_load_kwargs() -> dict[str, bool]:
    return {"local_files_only": True}


def build_launch_kwargs() -> dict[str, object]:
    env_port = os.getenv("GRADIO_SERVER_PORT") or os.getenv("PORT")
    server_port = int(env_port) if env_port else None
    running_on_space = bool(os.getenv("SPACE_ID") or os.getenv("SPACE_HOST"))
    return {
        "share": not running_on_space,
        "debug": not running_on_space,
        "server_name": "0.0.0.0",
        "server_port": server_port,
        "show_error": True,
    }


def validate_model_path(model_path: Path | str) -> tuple[bool, str]:
    path = Path(model_path)

    if not path.exists():
        return False, f"Model path does not exist: {path}. {build_model_path_hint(path)}"

    if not path.is_dir():
        return False, f"Model path is not a directory: {path}"

    missing = detect_missing_model_artifacts(path)
    if missing:
        joined = ", ".join(missing)
        return False, f"Missing required files in model directory: {joined}"

    return True, f"Model directory ready: {path}"


def render_empty_state() -> str:
    return """
    <div class="prototype-result neutral-result">
      <div class="result-copy">
        <div class="result-kicker">Prediction</div>
        <div class="result-label">Awaiting input</div>
        <div class="result-confidence">Enter a short online comment to run inference.</div>
      </div>
      <div class="result-ring" style="background: conic-gradient(from -90deg, var(--accent) 0 0%, rgba(35, 71, 102, 0.08) 0% 100%);">
        <div class="result-ring-inner">
          <div>
            <div class="result-ring-value">0%</div>
            <div class="result-ring-label">Confidence</div>
          </div>
        </div>
      </div>
    </div>
    """


def render_error_state(message: str) -> str:
    return f"""
    <div class="prototype-result error-result">
      <div class="result-copy">
        <div class="result-kicker">Prediction unavailable</div>
        <div class="result-label">Startup issue</div>
        <div class="result-confidence">{message}</div>
      </div>
      <div class="result-ring" style="background: conic-gradient(from -90deg, var(--danger) 0 0%, rgba(35, 71, 102, 0.08) 0% 100%);">
        <div class="result-ring-inner">
          <div>
            <div class="result-ring-value">0%</div>
            <div class="result-ring-label">Confidence</div>
          </div>
        </div>
      </div>
    </div>
    """


def render_result_state(label: str, confidence: float) -> str:
    state_class = "normal-result" if label == "Normal" else "harmful-result"
    accent = "var(--clear)" if label == "Normal" else "var(--danger)"
    confidence_pct = confidence * 100
    return f"""
    <div class="prototype-result {state_class}">
      <div class="result-copy">
        <div class="result-kicker">Prediction</div>
        <div class="result-label">{label}</div>
        <div class="result-confidence">Model confidence: {confidence:.2%}</div>
      </div>
      <div class="result-ring" style="background: conic-gradient(from -90deg, {accent} 0 {confidence_pct:.2f}%, rgba(35, 71, 102, 0.08) {confidence_pct:.2f}% 100%);">
        <div class="result-ring-inner">
          <div>
            <div class="result-ring-value">{confidence:.2%}</div>
            <div class="result-ring-label">Confidence</div>
          </div>
        </div>
      </div>
    </div>
    """


def predict_text(text: str | None, classify: Classifier) -> str:
    cleaned = (text or "").strip()
    if not cleaned:
        return render_empty_state()

    try:
        label, confidence = classify(cleaned)
    except Exception as exc:
        return render_error_state(f"Inference unavailable: {exc}")

    return render_result_state(label, confidence)


def build_hero_markup() -> str:
    return """
    <div class="topbar">
      <div class="brand">
        <div class="brand-mark">H</div>
        <div class="brand-copy">
          <div class="brand-title">HateBERT Moderation Prototype</div>
          <div class="brand-subtitle">Platform Safety / Live Inference System</div>
        </div>
      </div>
      <div class="status-badge">Binary classifier / Real-time review</div>
    </div>

    <section class="prototype-stage">
      <div class="stage-copy">
        <div class="stage-kicker">Content safety intelligence</div>
        <h1 class="stage-title">Moderation infrastructure for live social risk screening.</h1>
        <p class="stage-subtitle">
          A polished live review surface for harmful content detection. This interface frames
          the model as a platform moderation tool rather than a plain classroom demo.
        </p>
        <div class="stage-proof">
          <div class="stage-proof-item">
            <div class="stage-proof-label">System</div>
            <div class="stage-proof-value">Moderation</div>
          </div>
          <div class="stage-proof-item">
            <div class="stage-proof-label">Model</div>
            <div class="stage-proof-value">HateBERT</div>
          </div>
          <div class="stage-proof-item">
            <div class="stage-proof-label">Mode</div>
            <div class="stage-proof-value">Live Review</div>
          </div>
        </div>

        <div class="stage-chips">
          <div class="stage-chip">Binary classifier</div>
          <div class="stage-chip">Confidence output</div>
          <div class="stage-chip">2 classes</div>
        </div>

        <div class="queue">
          <div class="queue-card">
            <div class="queue-score">82%</div>
            <div>
              <div class="queue-title">Flagged Comment</div>
              <div class="queue-text">User-submitted social content is routed into a lightweight review layer with confidence evidence.</div>
            </div>
            <div class="queue-pill">Queued</div>
          </div>

          <div class="queue-card">
            <div class="queue-score">2</div>
            <div>
              <div class="queue-title">Output Classes</div>
              <div class="queue-text">The interface returns a binary moderation decision designed for clear academic demonstration and platform governance storytelling.</div>
            </div>
            <div class="queue-pill">Normal / Harmful</div>
          </div>
        </div>

        <div class="stage-note">
          Designed to look and behave like a real platform safety product while staying lightweight enough for sharing and live presentation.
        </div>
      </div>
    </section>
    """


def load_runtime(model_path: str) -> Classifier:
    ok, message = validate_model_path(model_path)
    if not ok:
        raise RuntimeError(message)

    import torch
    from transformers import AutoModelForSequenceClassification, AutoTokenizer

    load_kwargs = get_transformers_load_kwargs()
    tokenizer = AutoTokenizer.from_pretrained(model_path, **load_kwargs)
    model = AutoModelForSequenceClassification.from_pretrained(model_path, **load_kwargs)
    device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
    model.to(device)
    model.eval()

    def classify(cleaned_text: str) -> tuple[str, float]:
        inputs = tokenizer(
            cleaned_text,
            return_tensors="pt",
            truncation=True,
            padding=True,
            max_length=128,
        )
        inputs = {key: value.to(device) for key, value in inputs.items()}

        with torch.no_grad():
            logits = model(**inputs).logits
            probabilities = torch.softmax(logits, dim=-1)[0]
            predicted_id = int(torch.argmax(probabilities).item())
            confidence = float(probabilities[predicted_id].item())

        label = LABELS.get(predicted_id, f"LABEL_{predicted_id}")
        return label, confidence

    return classify


def build_demo(classify: Classifier):
    import gradio as gr

    with gr.Blocks(title="Moderation Demo", css=LIGHT_KEYNOTE_CSS) as demo:
        with gr.Column(elem_classes=["prototype-shell"]):
            gr.HTML(build_hero_markup())

            with gr.Column(elem_classes=["prototype-panel"]):
                gr.HTML(
                    """
                    <div class="panel-head">
                      <div>
                        <div class="panel-kicker">Inference Workspace</div>
                        <div class="panel-title">Live Comment Review</div>
                      </div>
                      <div class="panel-badge">Fine-tuned model</div>
                    </div>
                    """
                )

                text_input = gr.Textbox(
                    label="Comment Input",
                    lines=7,
                    placeholder="Enter an online comment for classification...",
                )
                with gr.Row():
                    analyze_button = gr.Button("Run Moderation", variant="primary")
                    clear_button = gr.Button("Clear", variant="secondary")
                output = gr.HTML(value=render_empty_state())

                gr.Examples(
                    examples=[
                        ["I really enjoy spending time with my friends at the park."],
                        ["You are absolutely useless and I hate everything about you."],
                        ["This is a neutral statement about the weather."],
                    ],
                    inputs=text_input,
                    label="Live Review Examples",
                )

                analyze_button.click(
                    fn=lambda text: predict_text(text, classify),
                    inputs=text_input,
                    outputs=output,
                )
                clear_button.click(
                    fn=lambda: ("", render_empty_state()),
                    outputs=[text_input, output],
                )
                text_input.submit(
                    fn=lambda text: predict_text(text, classify),
                    inputs=text_input,
                    outputs=output,
                )

    return demo


def main() -> None:
    """
    Local quick start:
    1. Put the fine-tuned model directory on this machine.
    2. Set HATEBERT_MODEL_PATH if your model folder is not the default path.
    3. Run this script to launch the Gradio demo.
    4. Share the temporary public link with your teammates.
    """

    classify = load_runtime(resolve_model_path())
    demo = build_demo(classify)
    demo.launch(**build_launch_kwargs())


if __name__ == "__main__":
    main()