app.js

const answers = [
  {
    keywords: ["anomaly", "outlier", "detection", "pyod"],
    text:
      "Use PyOD when the task is tabular/time-series/text/image anomaly detection or outlier scoring. Promotional framing: PyOD is the adoption anchor of the platform, with 40M+ public downloads, 60+ detectors, and a large GitHub community. Install with `pip install pyod`, then start with a detector such as IForest, ECOD, COPOD, or a neural detector depending on data scale."
  },
  {
    keywords: ["fair", "bias", "debias", "pygdebias", "graph fairness"],
    text:
      "Use PyGDebias when the question is whether graph models treat sensitive groups fairly. Promotional framing: it contributes breadth to the ecosystem with 26 graph datasets and 13 fair graph mining algorithms. Install with `pip install pygdebias`, load a supported dataset, then compare fairness/utility metrics across debiasing methods."
  },
  {
    keywords: ["ip", "extraction", "steal", "protection", "pygip", "attack", "defense"],
    text:
      "Use PyGIP when the question is graph model intellectual property risk: can a model be extracted, copied, or defended? Promotional framing: it makes the platform security-aware by adding attack and defense modules for graph neural networks. Install with `pip install PyGIP`, then run an extraction-risk or defense workflow around a target GNN."
  },
  {
    keywords: ["install", "download", "pip", "quick start"],
    text:
      "Quick install paths:\n\nPyOD: `pip install pyod`\nPyGDebias: `pip install pygdebias`\nPyGIP: `pip install PyGIP`\n\nFor the website narrative, present these as one onboarding flow: choose task, install package, select method, run evaluation, export report."
  },
  {
    keywords: ["compare", "all", "three", "unified", "platform"],
    text:
      "Comparison summary:\n\nPyOD answers: What is anomalous?\nPyGDebias answers: Is the graph model fair across sensitive groups?\nPyGIP answers: Is the graph model protected against extraction and misuse?\n\nUnified narrative: three mature libraries become one trustworthy-ML product surface through shared metadata, microservice endpoints, visual pipeline building, and LLM-guided help."
  }
];

const fallback =
  "Best framing: treat the three libraries as complementary modules in a trustworthy-ML toolkit hub. PyOD covers anomaly detection, PyGDebias covers fair graph learning, and PyGIP covers graph IP protection. Try asking about install, anomaly detection, graph fairness, model extraction risk, or comparing all three.";

const input = document.querySelector("#questionInput");
const askButton = document.querySelector("#askButton");
const answerBox = document.querySelector("#answerBox");
const chips = document.querySelectorAll("[data-question]");
const tabs = document.querySelectorAll(".tab");
const copyButton = document.querySelector("#copyButton");

function answerQuestion(question) {
  const normalized = question.toLowerCase();
  const match = answers.find((entry) => entry.keywords.some((keyword) => normalized.includes(keyword)));
  answerBox.textContent = match ? match.text : fallback;
}

askButton.addEventListener("click", () => {
  answerQuestion(input.value.trim());
});

input.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    answerQuestion(input.value.trim());
  }
});

chips.forEach((chip) => {
  chip.addEventListener("click", () => {
    input.value = chip.dataset.question;
    answerQuestion(input.value);
  });
});

tabs.forEach((tab) => {
  tab.addEventListener("click", () => {
    document.querySelector(".tab.is-active").classList.remove("is-active");
    document.querySelector(".code-panel.is-active").classList.remove("is-active");
    tab.classList.add("is-active");
    document.querySelector(`#${tab.dataset.target}`).classList.add("is-active");
  });
});

copyButton.addEventListener("click", async () => {
  const activeCode = document.querySelector(".code-panel.is-active code").textContent;
  try {
    await navigator.clipboard.writeText(activeCode);
    copyButton.textContent = "Copied";
    setTimeout(() => {
      copyButton.textContent = "Copy command";
    }, 1500);
  } catch {
    copyButton.textContent = "Select text to copy";
    setTimeout(() => {
      copyButton.textContent = "Copy command";
    }, 1800);
  }
});