144 lines
6.0 KiB
HTML
144 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>AI 网页测试智能体</title>
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<div class="brand">🌐 AI 网页测试智能体 <span class="ver">v1.0.0</span></div>
|
||
<div class="health" id="health">检测服务中...</div>
|
||
</header>
|
||
|
||
<main class="wrap">
|
||
<section class="card create-card">
|
||
<h2>发起测试任务</h2>
|
||
<div class="form-grid">
|
||
<div class="field span2">
|
||
<label>目标网址</label>
|
||
<input id="url" type="text" placeholder="https://example.com" value="https://example.com">
|
||
</div>
|
||
<div class="field span2">
|
||
<label>测试目标（自然语言描述要测什么）</label>
|
||
<textarea id="goal" rows="3" placeholder="例如：打开页面后，验证标题为 Example Domain，并点击 Learn more 链接能跳转"></textarea>
|
||
</div>
|
||
<div class="field">
|
||
<label>最大步数</label>
|
||
<input id="max_steps" type="number" value="30" min="1" max="100">
|
||
</div>
|
||
<div class="field">
|
||
<label>分析模型 <span class="tag" id="model-tag"></span></label>
|
||
<select id="llm_config_id"></select>
|
||
</div>
|
||
<div class="field">
|
||
<label>超时（秒）</label>
|
||
<input id="timeout" type="number" value="600" min="30" max="3600">
|
||
</div>
|
||
</div>
|
||
<button id="submit" class="btn primary">🚀 开始测试</button>
|
||
<div class="hint">测试由 AI 自动驱动浏览器执行：打开页面 → 逐步操作 → 断言验证 → 生成报告（含截图）。
|
||
<b>🖼️ 视觉模型</b>：通过截图直接观察页面视觉状态分析；<b>📄 文本模型</b>：通过 DOM 元素快照分析。</div>
|
||
</section>
|
||
|
||
<section class="card">
|
||
<h2>🔌 大模型配置 <button id="add-llm" class="btn small primary">＋ 新增配置</button></h2>
|
||
<table id="llm-table">
|
||
<thead><tr><th>名称</th><th>模型</th><th>Base URL</th><th>分析方式</th><th>温度</th><th>超时</th><th>默认</th><th>操作</th></tr></thead>
|
||
<tbody><tr><td colspan="8" class="empty">加载中...</td></tr></tbody>
|
||
</table>
|
||
<div class="hint">配置 OpenAI 兼容接口的大模型。支持视觉的模型（如 GPT-4o、豆包视觉版）用截图分析网页，不支持视觉的模型用 DOM 快照分析。</div>
|
||
</section>
|
||
|
||
<section class="card">
|
||
<h2>任务列表 <button id="refresh" class="btn small">刷新</button></h2>
|
||
<table id="task-table">
|
||
<thead><tr><th>任务ID</th><th>目标网址</th><th>测试目标</th><th>状态</th><th>结果</th><th>步骤</th><th>创建时间</th><th>操作</th></tr></thead>
|
||
<tbody><tr><td colspan="8" class="empty">加载中...</td></tr></tbody>
|
||
</table>
|
||
</section>
|
||
</main>
|
||
|
||
<div id="detail-modal" class="modal hidden">
|
||
<div class="modal-body detail-body">
|
||
<div class="modal-head">
|
||
<span id="detail-title">任务详情</span>
|
||
<span>
|
||
<button id="detail-report-btn" class="btn small hidden">📄 完整报告</button>
|
||
<button id="detail-stop-btn" class="btn small danger hidden">⏹ 停止</button>
|
||
<button id="detail-close" class="btn small">关闭</button>
|
||
</span>
|
||
</div>
|
||
<div class="detail-content">
|
||
<div class="detail-meta" id="detail-meta"></div>
|
||
<div class="live-bar hidden" id="live-bar">
|
||
<span class="live-dot"></span>
|
||
<div class="live-info">
|
||
<div class="live-phase" id="live-phase"></div>
|
||
<div class="live-detail" id="live-detail"></div>
|
||
</div>
|
||
</div>
|
||
<div class="detail-steps-head">步骤日志</div>
|
||
<div class="detail-steps" id="detail-steps">
|
||
<div class="empty">加载中...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="report-modal" class="modal hidden">
|
||
<div class="modal-body">
|
||
<div class="modal-head"><span id="modal-title">测试报告</span><button id="modal-close" class="btn small">关闭</button></div>
|
||
<iframe id="report-frame" src="about:blank"></iframe>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="llm-modal" class="modal hidden">
|
||
<div class="modal-body llm-modal-body">
|
||
<div class="modal-head"><span id="llm-modal-title">新增模型配置</span><button id="llm-modal-close" class="btn small">关闭</button></div>
|
||
<div class="llm-form">
|
||
<div class="field">
|
||
<label>配置名称</label>
|
||
<input id="llm-name" type="text" placeholder="例如：火山引擎豆包视觉版">
|
||
</div>
|
||
<div class="field">
|
||
<label>Base URL（OpenAI 兼容接口地址）</label>
|
||
<input id="llm-base-url" type="text" placeholder="https://ark.cn-beijing.volces.com/api/plan/v3">
|
||
</div>
|
||
<div class="field">
|
||
<label>API Key</label>
|
||
<input id="llm-api-key" type="password" placeholder="sk-...">
|
||
</div>
|
||
<div class="field">
|
||
<label>模型名</label>
|
||
<input id="llm-model" type="text" placeholder="例如：doubao-seed-evolving">
|
||
</div>
|
||
<div class="field span2 llm-opts">
|
||
<label class="check"><input id="llm-vision" type="checkbox"> 🖼️ 支持视觉分析（通过页面截图观察分析）</label>
|
||
<label class="check"><input id="llm-default" type="checkbox"> ⭐ 设为默认配置</label>
|
||
</div>
|
||
<div class="field">
|
||
<label>温度（0~1）</label>
|
||
<input id="llm-temperature" type="number" value="0.2" min="0" max="1" step="0.1">
|
||
</div>
|
||
<div class="field">
|
||
<label>超时（秒）</label>
|
||
<input id="llm-timeout" type="number" value="120" min="10" max="600">
|
||
</div>
|
||
<div class="llm-actions">
|
||
<button id="llm-test" class="btn small">🔌 测试连接</button>
|
||
<span id="llm-test-result" class="llm-test-result"></span>
|
||
</div>
|
||
<div class="llm-actions">
|
||
<button id="llm-save" class="btn primary">💾 保存</button>
|
||
<button id="llm-cancel" class="btn small">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/js/app.js"></script>
|
||
</body>
|
||
</html>
|