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="输入测试目标。多目标以,(英文逗号)隔开，或导入txt文件（一行一个目标）"
      required
    />
  </div>

  <!-- cookie 信息输入框，左缩进，非必填 -->
  <div class="mb-3">
    <!-- 模型选择 -->
    <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="1">DeepSeek</option>
        <option value="2">GPT-O3</option>
        <option value="4">Qwen3</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>

  <!-- 隐藏的文件输入框 -->
  <input type="file" id="fileInput" accept=".txt" style="display:none;"/>
  <!-- 开始按钮，右对齐 -->
  <div class="mb-3 text-end">
    <button id="addfileButton" class="btn btn-primary">目标文件</button>
    <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="9">
1.测试模式分为两种：自动执行和人工确认(单步模式),模式的切换只允许在暂停情况下调整；
2.暂停不停止正在执行指令，指令执行后会根据当前参数的设定执行下一步工作；
3.单步的作用是将节点中：待执行的指令进行执行，待提交LLM的数据提交LLM；
4.顶部的单步是针对整个任务的单步执行，若节点执行状态不一致，会存在某些节点执行测试指令，某些节点提交llm任务的情况，节点树区域的控制是针对该节点的控制；
5.由于LLM的不一致性，会存在无执行任务，但没有标记完成的任务节点，可作为已完成论；
6.在单步模式下，若某指令执行的结果错误，可以在查看MSG功能里，修改待提交的执行结果，来保障测试的顺利推进；
7.对于已经验证漏洞存在的节点，若LLM返回了测试指令，但没有必要继续验证的话，可以点击该节点的暂停按钮，暂停该节点的测试推进；
    </textarea>
    <div style="color: red; margin-top: 0.5rem;">****本工具仅限于在得到授权的前提下使用，若目标重要性很高，请使用单步模式，确认测试指令的影响后执行！
</div>
  </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 === "1"){
      curmodel = 1;
    }else if(selectedModel === "2"){
      curmodel = 2;  //暂时用2233.ai接口代替o3
    }else if(selectedModel === "4") {
      curmodel = 4;
    }else if(selectedModel === "5") {
      curmodel = 5;
    } else {
      alert("模型参数存在问题，请联系管理员！！");
    }
  });

  document.getElementById("startButton").addEventListener("click", async () => {
    //取值
    const testTarget = document.getElementById("testTarget").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,
            workType,
            curmodel,
          }),
        });

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

        const data = await response.json();
        fail_list = data.fail_list;
        if(fail_list.trim() !== ""){
          alert("创建任务成功，失败的有："+fail_list);
        }
        window.location.href = "/task_manager.html";
      } catch (error) {
        console.error("Error:", error);
        alert("请求出错，请稍后再试！");
      }
  });

  //上传目标文件
  const fileInput = document.getElementById('fileInput');
  const addfileButton = document.getElementById('addfileButton');
  const testTargetInput = document.getElementById('testTarget');

  // 点击“目标文件”按钮时触发文件选择
  addfileButton.addEventListener('click', () => {
    fileInput.value = null;   // 允许重复选择同一个文件
    fileInput.click();
  });

  // 文件选中后读取内容、替换换行并填入输入框
  fileInput.addEventListener('change', async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    try {
      // 现代浏览器支持直接用 File.text()
      const text = await file.text();

      // 按行拆分、去空行、再用英文逗号拼起来
      const targets = text
        .split(/\r?\n/)            // 按 Unix/Windows 换行拆分
        .map(line => line.trim())  // 去掉每行首尾空白
        .filter(line => line)      // 丢掉空行
        .join(',');

      // 填入测试目标输入框
      testTargetInput.value = targets;
    } catch (err) {
      console.error('读取文件失败', err);
      alert('读取文件失败，请检查文件格式');
    }
  });

</script>
{% endblock %}