hz4th_coder/webtest-agent
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.1.0 新增大模型配置管理：页面可配置分析网页的LLM接口(名称/BaseURL/Key/模型/温度/超时/默认)，支持视觉标记——视觉模型走截图视觉分析路线，非视觉模型走DOM快照文本分析路线；任务创建可选模型并记录使用情况

Browse Source
This commit is contained in:
hz4th_coder
2026-08-10 12:01:05 +08:00
parent fd67548052
commit 69b6f8ccfb
8 changed files with 678 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/app.js
+181 -2
View File
@@ -6,7 +6,8 @@ async function refreshHealth() {
try {
const r = await fetch(API + '/health');
const d = await r.json();
$('#health').textContent = `服务正常 | 模型: ${d.llm_model} | 运行中任务: ${d.concurrent}`;
const mode = d.llm_vision ? '🖼️视觉' : '📄文本';
$('#health').textContent = `服务正常 | 默认模型: ${d.llm_name || d.llm_model || '-'}（${mode}） | 运行中任务: ${d.concurrent}`;
$('#health').classList.add('ok');
} catch (e) {
$('#health').textContent = '服务异常';
@@ -21,6 +22,180 @@ const RESULT_MAP = {
pending: '待定', pass: '✅ 通过', fail: '❌ 失败', error: '⚠️ 错误', stopped: '⏹️ 停止'
};
/* ========== 大模型配置 ========== */
let llmConfigs = [];
let editingLlmId = null;
function llmBadge(cfg) {
return cfg.vision ? '🖼️ 视觉' : '📄 文本';
}
async function loadLlmConfigs() {
try {
const r = await fetch(API + '/api/llm-configs');
const d = await r.json();
llmConfigs = d.configs || [];
renderLlmTable();
renderLlmSelect();
} catch (e) { /* ignore */ }
}
function renderLlmTable() {
const tb = $('#llm-table tbody');
if (!llmConfigs.length) {
tb.innerHTML = '<tr><td colspan="8" class="empty">暂无配置，点右上角「新增配置」添加</td></tr>';
return;
}
tb.innerHTML = llmConfigs.map(c => `
<tr>
<td>${esc(c.name)}</td>
<td>${esc(c.model)}</td>
<td class="url-cell" title="${esc(c.base_url)}">${esc(c.base_url)}</td>
<td><span class="mode-badge ${c.vision ? 'vision' : 'text'}">${llmBadge(c)}</span></td>
<td>${c.temperature}</td>
<td>${c.timeout}s</td>
<td>${c.is_default ? '⭐' : ''}</td>
<td class="ops">
<button class="btn small" onclick="openLlmModal(${c.id})">编辑</button>
<button class="btn small" onclick="testLlm(${c.id})">测试</button>
${c.is_default ? '' : `<button class="btn small" onclick="setDefaultLlm(${c.id})">设默认</button>`}
${c.is_default ? '' : `<button class="btn small danger" onclick="deleteLlm(${c.id})">删除</button>`}
</td>
</tr>`).join('');
}
function renderLlmSelect() {
const sel = $('#llm_config_id');
if (!sel) return;
if (!llmConfigs.length) {
sel.innerHTML = '<option value="">（请先添加模型配置）</option>';
$('#model-tag').textContent = '';
return;
}
sel.innerHTML = llmConfigs.map(c =>
`<option value="${c.id}" ${c.is_default ? 'selected' : ''}>${esc(c.name)}（${llmBadge(c)}）</option>`
).join('');
updateModelTag();
}
function updateModelTag() {
const id = parseInt($('#llm_config_id').value);
const cfg = llmConfigs.find(c => c.id === id);
$('#model-tag').textContent = cfg ? llmBadge(cfg) : '';
$('#model-tag').className = 'tag ' + (cfg && cfg.vision ? 'tag-vision' : 'tag-text');
}
function openLlmModal(id) {
editingLlmId = id || null;
const c = id ? llmConfigs.find(x => x.id === id) : null;
$('#llm-modal-title').textContent = c ? `编辑配置 - ${c.name}` : '新增模型配置';
$('#llm-name').value = c ? c.name : '';
$('#llm-base-url').value = c ? c.base_url : '';
$('#llm-api-key').value = c ? c.api_key : '';
$('#llm-model').value = c ? c.model : '';
$('#llm-vision').checked = c ? !!c.vision : false;
$('#llm-default').checked = c ? !!c.is_default : false;
$('#llm-temperature').value = c ? c.temperature : 0.2;
$('#llm-timeout').value = c ? c.timeout : 120;
$('#llm-test-result').textContent = '';
$('#llm-modal').classList.remove('hidden');
}
function closeLlmModal() {
$('#llm-modal').classList.add('hidden');
editingLlmId = null;
}
async function saveLlm() {
const body = {
name: $('#llm-name').value.trim(),
base_url: $('#llm-base-url').value.trim(),
api_key: $('#llm-api-key').value.trim(),
model: $('#llm-model').value.trim(),
vision: $('#llm-vision').checked,
is_default: $('#llm-default').checked,
temperature: parseFloat($('#llm-temperature').value) || 0.2,
timeout: parseInt($('#llm-timeout').value) || 120
};
if (!body.name || !body.base_url || !body.api_key || !body.model) {
alert('请填写名称、Base URL、API Key、模型名');
return;
}
const url = editingLlmId ? `${API}/api/llm-configs/${editingLlmId}` : `${API}/api/llm-configs`;
const method = editingLlmId ? 'PUT' : 'POST';
try {
const r = await fetch(url, {
method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body)
});
const d = await r.json();
if (d.error) { alert('保存失败: ' + d.error); return; }
closeLlmModal();
loadLlmConfigs();
} catch (e) { alert('保存失败: ' + e); }
}
async function deleteLlm(id) {
const c = llmConfigs.find(x => x.id === id);
if (!confirm(`确定删除配置「${c.name}」？`)) return;
const r = await fetch(API + `/api/llm-configs/${id}`, { method: 'DELETE' });
const d = await r.json();
if (d.error) { alert('删除失败: ' + d.error); return; }
loadLlmConfigs();
}
async function setDefaultLlm(id) {
await fetch(API + `/api/llm-configs/${id}/default`, { method: 'POST' });
loadLlmConfigs();
}
async function testLlm(id) {
const c = llmConfigs.find(x => x.id === id);
const el = $('#llm-test-result');
if (el) el.textContent = '';
try {
const r = await fetch(API + `/api/llm-configs/${id}/test`, { method: 'POST' });
const d = await r.json();
if (d.ok) {
alert(`✅ 连接成功！模型回复: ${d.reply}`);
} else {
alert(`❌ 连接失败: ${d.error}`);
}
} catch (e) { alert('测试请求失败: ' + e); }
}
$('#add-llm').onclick = () => openLlmModal(null);
$('#llm-modal-close').onclick = closeLlmModal;
$('#llm-cancel').onclick = closeLlmModal;
$('#llm-save').onclick = saveLlm;
$('#llm-modal').onclick = e => { if (e.target === $('#llm-modal')) closeLlmModal(); };
$('#llm-test').onclick = async () => {
// 用表单当前内容测试（未保存也能测）
const body = {
name: $('#llm-name').value.trim() || '测试',
base_url: $('#llm-base-url').value.trim(),
api_key: $('#llm-api-key').value.trim(),
model: $('#llm-model').value.trim(),
vision: $('#llm-vision').checked,
temperature: parseFloat($('#llm-temperature').value) || 0.2,
timeout: parseInt($('#llm-timeout').value) || 120
};
if (!body.base_url || !body.api_key || !body.model) {
alert('请先填写 Base URL、API Key、模型名再测试');
return;
}
const el = $('#llm-test-result');
el.textContent = '测试中...';
try {
const r = await fetch(API + '/api/llm-configs/test-form', {
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body)
});
const d = await r.json();
el.textContent = d.ok ? `✅ ${d.reply}` : `❌ ${d.error}`;
} catch (e) { el.textContent = '❌ ' + e; }
};
$('#llm_config_id').onchange = updateModelTag;
function esc(s) {
return String(s ?? '').replace(/[&<>"']/g, c => (
{'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
@@ -46,6 +221,7 @@ async function loadTasks() {
<td>${esc(t.id)}</td>
<td>${esc(t.url)}</td>
<td><div class="goal-cell" title="${esc(t.goal)}">${esc(t.goal)}</div></td>
<td>${t.llm_name ? `<span class="model-cell" title="${esc(t.llm_name)}">${esc(t.llm_name)}</span> <span class="mode-badge ${t.vision ? 'vision' : 'text'}">${t.vision ? '🖼️' : '📄'}</span>` : '-'}</td>
<td><span class="status ${esc(t.status)}">${STATUS_MAP[t.status] || esc(t.status)}</span></td>
<td><span class="result ${esc(t.result)}">${RESULT_MAP[t.result] || esc(t.result)}</span></td>
<td>${t.steps || 0}</td>
@@ -105,6 +281,7 @@ async function refreshDetail() {
$('#detail-meta').innerHTML = `
<div class="m-item"><b>目标网址</b><span>${esc(t.url)}</span></div>
<div class="m-item"><b>测试目标</b><span>${esc(t.goal)}</span></div>
<div class="m-item"><b>分析模型</b><span>${t.llm_name ? esc(t.llm_name) + ' ' + (t.vision ? '🖼️' : '📄') : '-'}</span></div>
<div class="m-item"><b>状态</b><span><span class="status ${esc(t.status)}">${STATUS_MAP[t.status] || esc(t.status)}</span> / <span class="result ${esc(t.result)}">${RESULT_MAP[t.result] || esc(t.result)}</span></span></div>
<div class="m-item"><b>步骤</b><span>${t.steps || 0} / ${t.max_steps}</span></div>
<div class="m-item"><b>创建时间</b><span>${esc(t.created)}</span></div>
@@ -185,7 +362,8 @@ $('#submit').onclick = async () => {
body: JSON.stringify({
url, goal,
max_steps: parseInt($('#max_steps').value) || 30,
timeout: parseInt($('#timeout').value) || 600
timeout: parseInt($('#timeout').value) || 600,
llm_config_id: parseInt($('#llm_config_id').value) || null
})
});
const d = await r.json();
@@ -217,5 +395,6 @@ $('#refresh').onclick = loadTasks;
refreshHealth();
loadTasks();
loadLlmConfigs();
setInterval(refreshHealth, 30000);
setInterval(loadTasks, 5000);