zfsafe/web/main/templates/index.html

{% extends 'base.html' %}

{% block title %}ZFSAFE{% endblock %}

<!-- 页面样式块 -->
{% block style %}
#cookieInfo {
  font-size: 0.9rem;
}
{% endblock %}

<!-- 页面内容块 -->
{% block content %}
<div class="container mt-4">
  <!-- 测试目标输入框 -->
  <div class="mb-3">
    <label for="testTarget" class="form-label">
      测试目标: <span class="text-danger">*</span>
    </label>
    <input
      type="text"
      class="form-control"
      id="testTarget"
      placeholder="输入测试目标"
      required
    />
  </div>

  <!-- cookie 信息输入框，左缩进，非必填 -->
  <div class="mb-3">
    <div style="margin-left: 20px;margin-bottom: 10px">
      <label class="fw-bold" style="font-size:0.9rem">cookie信息 (非必填):</label>
      <input
        type="text"
        class="form-control"
        id="cookieInfo"
        placeholder="输入cookie信息"
      />
    </div>
    <!-- 模型选择 -->
    <div style="margin-left: 20px; margin-bottom: 10px">
      <label class="fw-bold" style="font-size:0.9rem">模型选择:</label>
      <select class="form-select" id="modelSelect" style="font-size:0.9rem">
        <option value="DeepSeek">DeepSeek</option>
        <option value="GPT-O3">GPT-O3</option>
      </select>
    </div>

    <!-- 测试模式：全自动，半自动 -->
    <div style="margin-left: 20px">
      <label class="fw-bold" style="font-size:0.9rem">测试模式: </label>
      <div class="form-check form-check-inline">
        <input
          class="form-check-input"
          type="radio"
          name="testMode"
          id="autoMode"
          value="auto"
        />
        <label class="form-check-label" for="autoMode"
          >自动执行</label
        >
      </div>
      <div class="form-check form-check-inline">
        <input
          class="form-check-input"
          type="radio"
          name="testMode"
          id="manualMode"
          value="manual"
          checked
        />
        <label class="form-check-label" for="manualMode"
          >人工确认</label
        >
      </div>
    </div>
  </div>

  <!-- 开始按钮，右对齐 -->
  <div class="mb-3 text-end">
    <button id="startButton" class="btn btn-primary">开始</button>
  </div>

  <!-- 使用说明 -->
  <div class="mt-4">
    <label for="usage" class="form-label">使用说明:</label>
    <textarea class="form-control" id="usage" rows="10">
1.测试模式分为两种：自动执行和人工确认(单步模式),模式的切换只允许在暂停情况下调整；
2.暂停不停止正在执行指令，指令执行后会根据当前参数的设定执行下一步工作；
3.单步的作用是将节点中：待执行的指令进行执行，待提交LLM的数据提交LLM；
4.顶部的单步是针对整个任务的单步执行，若节点执行状态不一致，会存在某些节点执行测试指令，某些节点提交llm任务的情况，节点树区域的控制是针对该节点的控制；
5.由于LLM的不一致性，会存在无执行任务，但没有标记完成的任务节点，可作为已完成论；
6
7
8.本工具的使用，仅限于在得到授权的前提下使用，若目标重要性很高，请使用单步模式，确认测试指令的影响后执行。
    </textarea>
  </div>
</div>
{% endblock %}

<!-- 页面脚本块 -->
{% block script %}
<script>
  let curmodel = 1 //0-腾讯云，1-DS，2-2233.ai,3-GPT
  // 为模型选择下拉框绑定选择事件
  document.getElementById("modelSelect").addEventListener("change", function() {
    const selectedModel = this.value;
    console.log("选择的模型为：" + selectedModel);
    // 可根据需要进一步处理选中模型
    if(selectedModel === "DeepSeek"){
      curmodel = 1
    }else if(selectedModel === "GPT-O3"){
      curmodel = 2  //暂时用2233.ai接口代替o3
    }
    else {
      alert("模型参数存在问题，请联系管理员！！");
    }
  });

  document.getElementById("startButton").addEventListener("click", async () => {
    //取值
    const testTarget = document.getElementById("testTarget").value;
    const cookieInfo = document.getElementById("cookieInfo").value;
    let workType = 0;  //0-人工，1-自动
    const selected = document.getElementById('manualMode').checked;
    if(selected){
      workType = 0;
    }else {
      workType = 1;
    }
    // 测试目标不能为空
    if (!testTarget) {
      alert("测试目标不能为空！");
      return;
    }
    try {
          const response = await fetch("/api/task/start", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              testTarget,
              cookieInfo,
              workType,
              curmodel,
            }),
          });

          // // 状态码校验
          // if (!response.ok) {
          //   const errorData = await res.json();
          //   throw new Error(errorData.error || `HTTP错误 ${res.status}`);
          // }

          // 如果后端返回了重定向，则前端自动跳转
          if (response.redirected) {
            window.location.href = response.url;
          } else {  //除了跳转，都是返回的错误信息
            const data = await response.json();
            if (data.error) {
              alert(data.error);
            }
          }
        } catch (error) {
          console.error("Error:", error);
          alert("请求出错，请稍后再试！");
        }
  });
</script>
{% endblock %}