script.js

const captcha = document.querySelector(".captcha-card");
const checkButton = document.querySelector(".check-control");
const statusLine = document.querySelector(".status-line");
const resetButton = document.querySelector("#resetBtn");
const continueButton = document.querySelector("#continueBtn");
const requestState = document.querySelector("#requestState");
const rayId = document.querySelector("#rayId");
const traceCanvas = document.querySelector("#traceCanvas");
const traceCount = document.querySelector("#traceCount");
const traceDuration = document.querySelector("#traceDuration");
const traceOutput = document.querySelector("#traceOutput");
const copyTraceButton = document.querySelector("#copyTraceBtn");
const traceContext = traceCanvas.getContext("2d");
const delbotModelState = document.querySelector("#delbotModelState");
const humanScore = document.querySelector("#humanScore");
const botProbability = document.querySelector("#botProbability");
const delbotDecision = document.querySelector("#delbotDecision");

let timer = null;
let isRecordingTrace = true;
let traceStart = null;
let lastTraceAt = 0;
let tracePoints = [];
let delbotRecorder = createDelbotRecorder();
let delbotRnn1Model = null;

const delbotRnn1ModelUrl =
  "./models/rnn1/model-rnn1-features2.json";
const traceSampleIntervalMs = 10;
const shouldLogDelbotDebug = false;

function createDelbotRecorder() {
  if (!window.delbot?.Recorder) return null;

  return new window.delbot.Recorder(window.innerWidth, window.innerHeight);
}

function getDelbotRnn1Model() {
  if (delbotRnn1Model) return delbotRnn1Model;
  if (!window.delbot?.Model || !window.delbot?.data?.DataFeatures2) return null;

  delbotRnn1Model = new window.delbot.Model(
    delbotRnn1ModelUrl,
    new window.delbot.data.DataFeatures2({
      numClasses: 1,
      xSize: 24,
      shouldCompleteXSize: false,
    }),
  );

  return delbotRnn1Model;
}

function getTracePayload() {
  return {
    capturedBefore: "verify-click",
    delbot: getDelbotPayload(),
    pointCount: tracePoints.length,
    viewport: {
      width: window.innerWidth,
      height: window.innerHeight,
    },
    points: tracePoints,
  };
}

function getDelbotPayload() {
  return {
    model: "DELBOT-Mouse rnn1",
    modelState: delbotModelState.textContent,
    humanScore: humanScore.textContent,
    botProbability: botProbability.textContent,
    decision: delbotDecision.textContent,
  };
}

function setDelbotResult({ modelState, score, botRate, decision }) {
  if (modelState) {
    delbotModelState.textContent = modelState;
  }

  humanScore.textContent = Number.isFinite(score) ? `${score}/100` : "--";
  botProbability.textContent = Number.isFinite(botRate)
    ? `${(botRate * 100).toFixed(1)}%`
    : "--";
  delbotDecision.textContent = decision;
  traceOutput.textContent = JSON.stringify(getTracePayload(), null, 2);
}

function average(values) {
  if (!values.length) return 0;

  return values.reduce((sum, value) => sum + value, 0) / values.length;
}

async function scoreTraceWithDelbot() {
  const rnn1Model = getDelbotRnn1Model();

  if (!rnn1Model || !window.tf) {
    setDelbotResult({
      modelState: "未加载",
      score: NaN,
      botRate: NaN,
      decision: "请检查脚本 CDN",
    });
    return;
  }

  if (!delbotRecorder) {
    delbotRecorder = createDelbotRecorder();
  }

  if (!delbotRecorder || tracePoints.length < 24) {
    setDelbotResult({
      modelState: "数据不足",
      score: NaN,
      botRate: NaN,
      decision: "至少需要 24 个移动点",
    });
    return;
  }

  setDelbotResult({
    modelState: "rnn1 推理中",
    score: NaN,
    botRate: NaN,
    decision: "计算中",
  });

  try {
    const loadedModel = await rnn1Model.getModel();

    if (shouldLogDelbotDebug) {
      const rawRecords = delbotRecorder.getRecords();
      console.log("[DEBUG] Total records in recorder:", rawRecords.length);
      console.log("[DEBUG] First record:", JSON.stringify(rawRecords[0]));
      console.log("[DEBUG] Last record:", JSON.stringify(rawRecords.at(-1)));
      console.log("[DEBUG] tf version:", window.tf?.version);
      console.log("[DEBUG] Model loadingPath:", rnn1Model.loadingPath);
      console.log("[DEBUG] Model input shape:", loadedModel.inputs[0].shape);
      console.log("[DEBUG] Model output shape:", loadedModel.outputs[0].shape);
    }

    const predictions = await delbotRecorder.getPrediction(rnn1Model);

    if (shouldLogDelbotDebug) {
      console.log("[DEBUG] Raw predictions array:", predictions);
      console.log("[DEBUG] Predictions count:", predictions.length);
      console.log(
        "[DEBUG] Each prediction:",
        ...predictions.map((p, i) => `[${i}]=${p.toFixed(6)}`),
      );
    }

    if (!predictions.length) {
      setDelbotResult({
        modelState: "数据不足",
        score: NaN,
        botRate: NaN,
        decision: "模型未生成预测",
      });
      return;
    }

    const botRate = Math.max(0, Math.min(1, average(predictions)));
    const score = Math.round((1 - botRate) * 100);
    const decision = botRate <= 0.2 ? "偏真人" : "偏机器";

    setDelbotResult({
      modelState: "rnn1 已完成",
      score,
      botRate,
      decision,
    });
  } catch (error) {
    setDelbotResult({
      modelState: "推理失败",
      score: NaN,
      botRate: NaN,
      decision:
        error.message === "Failed to fetch"
          ? "模型文件下载失败"
          : error.message || "模型调用异常",
    });
  }
}

function drawTrace() {
  const rect = traceCanvas.getBoundingClientRect();
  const ratio = window.devicePixelRatio || 1;
  const width = Math.max(1, Math.round(rect.width * ratio));
  const height = Math.max(1, Math.round(rect.height * ratio));

  if (traceCanvas.width !== width || traceCanvas.height !== height) {
    traceCanvas.width = width;
    traceCanvas.height = height;
  }

  traceContext.clearRect(0, 0, width, height);

  if (tracePoints.length === 0) {
    traceContext.fillStyle = "#7a828c";
    traceContext.font = `${12 * ratio}px sans-serif`;
    traceContext.fillText("移动鼠标开始采集", 16 * ratio, 26 * ratio);
    return;
  }

  traceContext.lineWidth = 2 * ratio;
  traceContext.strokeStyle = "#f48120";
  traceContext.lineCap = "round";
  traceContext.lineJoin = "round";
  traceContext.beginPath();

  tracePoints.forEach((point, index) => {
    const x = (point.x / window.innerWidth) * width;
    const y = (point.y / window.innerHeight) * height;

    if (index === 0) {
      traceContext.moveTo(x, y);
    } else {
      traceContext.lineTo(x, y);
    }
  });

  traceContext.stroke();

  const first = tracePoints[0];
  const last = tracePoints[tracePoints.length - 1];
  const startX = (first.x / window.innerWidth) * width;
  const startY = (first.y / window.innerHeight) * height;
  const endX = (last.x / window.innerWidth) * width;
  const endY = (last.y / window.innerHeight) * height;

  traceContext.fillStyle = "#2f6fed";
  traceContext.beginPath();
  traceContext.arc(startX, startY, 4 * ratio, 0, Math.PI * 2);
  traceContext.fill();

  traceContext.fillStyle = "#118a45";
  traceContext.beginPath();
  traceContext.arc(endX, endY, 5 * ratio, 0, Math.PI * 2);
  traceContext.fill();
}

function updateTracePanel() {
  const duration = tracePoints.length
    ? tracePoints[tracePoints.length - 1].t - tracePoints[0].t
    : 0;

  traceCount.textContent = String(tracePoints.length);
  traceDuration.textContent = `${duration} ms`;
  traceOutput.textContent = JSON.stringify(getTracePayload(), null, 2);
  drawTrace();
}

function recordTracePoint(event) {
  if (!isRecordingTrace || captcha.dataset.state !== "idle") return;
  if (event.pointerType && event.pointerType !== "mouse") return;
  if (event.timeStamp - lastTraceAt < traceSampleIntervalMs) return;

  if (traceStart === null) {
    traceStart = Math.round(event.timeStamp);
  }

  lastTraceAt = event.timeStamp;
  const point = {
    t: Math.round(event.timeStamp - traceStart),
    x: Math.round(event.clientX),
    y: Math.round(event.clientY),
    pageX: Math.round(event.pageX),
    pageY: Math.round(event.pageY),
  };

  tracePoints.push(point);

  if (delbotRecorder) {
    delbotRecorder.addRecord({
      time: point.t,
      type: "Move",
      x: point.x,
      y: point.y,
    });
  }

  if (tracePoints.length > 500) {
    tracePoints = tracePoints.slice(-500);
  }

  updateTracePanel();
}

function resetTrace() {
  isRecordingTrace = true;
  traceStart = null;
  lastTraceAt = 0;
  tracePoints = [];
  delbotRecorder = createDelbotRecorder();
  setDelbotResult({
    modelState: getDelbotRnn1Model() ? "rnn1 就绪" : "等待加载",
    score: NaN,
    botRate: NaN,
    decision: "等待验证",
  });
  updateTracePanel();
}

function freezeTrace() {
  isRecordingTrace = false;
  updateTracePanel();
}

function setState(state) {
  captcha.dataset.state = state;

  if (state === "idle") {
    statusLine.textContent = "等待用户操作";
    requestState.textContent = "Challenge pending";
    continueButton.disabled = true;
    checkButton.disabled = false;
    checkButton.setAttribute("aria-label", "开始验证");
  }

  if (state === "loading") {
    statusLine.textContent = "正在分析浏览器环境...";
    requestState.textContent = "Running checks";
    continueButton.disabled = true;
    checkButton.disabled = true;
    checkButton.setAttribute("aria-label", "正在验证");
  }

  if (state === "done") {
    statusLine.textContent = "验证通过，可以继续访问";
    requestState.textContent = "Access granted";
    continueButton.disabled = false;
    checkButton.disabled = true;
    checkButton.setAttribute("aria-label", "验证成功");
  }
}

function randomRayId() {
  const chars = "0123456789abcdef";
  let id = "";

  for (let index = 0; index < 16; index += 1) {
    id += chars[Math.floor(Math.random() * chars.length)];
  }

  return id;
}

checkButton.addEventListener("click", () => {
  if (captcha.dataset.state !== "idle") return;

  freezeTrace();
  scoreTraceWithDelbot();
  setState("loading");
  window.clearTimeout(timer);
  timer = window.setTimeout(() => setState("done"), 1650);
});

resetButton.addEventListener("click", () => {
  window.clearTimeout(timer);
  rayId.textContent = randomRayId();
  resetTrace();
  setState("idle");
});

continueButton.addEventListener("click", () => {
  statusLine.textContent = "演示完成：真实项目中这里会跳转到受保护页面";
});

copyTraceButton.addEventListener("click", async () => {
  const json = JSON.stringify(getTracePayload(), null, 2);

  try {
    await navigator.clipboard.writeText(json);
    copyTraceButton.textContent = "已复制";
    window.setTimeout(() => {
      copyTraceButton.textContent = "复制 JSON";
    }, 1200);
  } catch {
    traceOutput.focus();
  }
});

window.addEventListener("pointermove", recordTracePoint);
window.addEventListener("resize", drawTrace);
setDelbotResult({
  modelState: getDelbotRnn1Model() ? "rnn1 就绪" : "等待加载",
  score: NaN,
  botRate: NaN,
  decision: "等待验证",
});
updateTracePanel();