348 lines
13 KiB
HTML
348 lines
13 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>LLM Demo</title>
|
||
<style>
|
||
:root { --bg:#0b1220; --panel:#111a2e; --muted:#8aa0c5; --text:#e6eeff; --border:#233152; --accent:#4f8cff; --danger:#ff5c7a; }
|
||
* { box-sizing: border-box; }
|
||
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei"; background: radial-gradient(1200px 600px at 10% 0%, #182447, var(--bg)); color:var(--text); }
|
||
.wrap { max-width: 1200px; margin: 0 auto; padding: 20px; }
|
||
.header { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom: 16px; }
|
||
.title { font-size: 18px; font-weight: 650; letter-spacing: .2px; }
|
||
.sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
|
||
.panel { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius: 14px; padding: 14px; }
|
||
.panel h3 { margin: 0 0 10px 0; font-size: 14px; }
|
||
label { display:block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
|
||
input[type="text"], textarea { width: 100%; background: rgba(0,0,0,.18); color: var(--text); border:1px solid var(--border); border-radius: 10px; padding: 10px 10px; outline: none; }
|
||
textarea { min-height: 120px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; line-height: 1.45; }
|
||
.grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||
@media (max-width: 980px) { .grid { grid-template-columns: 1fr; } }
|
||
.btns { display:flex; gap:10px; flex-wrap: wrap; align-items:center; }
|
||
button { border: 1px solid var(--border); background: rgba(79,140,255,.18); color: var(--text); border-radius: 10px; padding: 9px 12px; cursor:pointer; font-weight:600; }
|
||
button.secondary { background: rgba(255,255,255,.06); }
|
||
button.danger { background: rgba(255,92,122,.18); border-color: rgba(255,92,122,.4); }
|
||
button:disabled { opacity: .55; cursor:not-allowed; }
|
||
.pill { display:inline-flex; align-items:center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.04); }
|
||
.pill input { width: auto; }
|
||
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
|
||
.out { white-space: pre-wrap; word-break: break-word; min-height: 160px; background: rgba(0,0,0,.22); border:1px solid var(--border); border-radius: 12px; padding: 12px; font-size: 13px; line-height: 1.5; }
|
||
.muted { color: var(--muted); }
|
||
.err { color: #ffd0d8; border-color: rgba(255,92,122,.35); background: rgba(255,92,122,.08); }
|
||
.ok { border-color: rgba(79,140,255,.35); }
|
||
.tabs { display:flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
|
||
.tab { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.04); cursor:pointer; font-weight:650; font-size: 12px; }
|
||
.tab.active { border-color: rgba(79,140,255,.55); background: rgba(79,140,255,.14); }
|
||
.small { font-size: 12px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<div class="header">
|
||
<div>
|
||
<div class="title">H5 前端调用模型接口（前后端分离版）</div>
|
||
<div class="sub">此页面可放在任意静态服务器；后端需开启 CORS（我已在后端加了 CorsConfig）</div>
|
||
</div>
|
||
<div class="small muted">接口：/api/chat 与 /api/vl/chat</div>
|
||
</div>
|
||
|
||
<div class="panel" style="margin-bottom: 12px;">
|
||
<div class="grid">
|
||
<div>
|
||
<label>后端 Base URL</label>
|
||
<input id="baseUrl" type="text" placeholder="http://localhost:8080" />
|
||
</div>
|
||
<div>
|
||
<label>Model（可选；留空则用后端默认）</label>
|
||
<input id="model" type="text" placeholder="例如：qwen3-vl-plus / 你的模型名" />
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:10px;" class="btns">
|
||
<span class="pill"><input id="useStream" type="checkbox" /> <label for="useStream" style="margin:0; cursor:pointer;">流式（SSE）</label></span>
|
||
<span class="pill"><input id="prettyJson" type="checkbox" checked /> <label for="prettyJson" style="margin:0; cursor:pointer;">格式化 JSON 请求</label></span>
|
||
<button id="stopBtn" class="danger" disabled>停止</button>
|
||
<span id="status" class="muted small"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<div class="panel">
|
||
<div class="tabs">
|
||
<div class="tab active" data-mode="text">文本模型（/api/chat）</div>
|
||
<div class="tab" data-mode="vl">多模态模型（/api/vl/chat）</div>
|
||
</div>
|
||
|
||
<div id="textMode">
|
||
<h3>文本请求</h3>
|
||
<label>System（可选）</label>
|
||
<textarea id="textSystem" placeholder="例如：你是一名严谨的助教。"></textarea>
|
||
<label style="margin-top:10px;">User</label>
|
||
<textarea id="textUser" placeholder="请输入问题...">你好，请用一句话介绍你自己。</textarea>
|
||
<div style="margin-top:10px;" class="btns">
|
||
<button id="sendTextBtn">发送</button>
|
||
<button id="genTextJsonBtn" class="secondary">生成 JSON</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="vlMode" style="display:none;">
|
||
<h3>多模态请求</h3>
|
||
<div class="muted small" style="margin-bottom:10px;">
|
||
messages[].content 是 Object：可以是字符串，或数组（包含 text/image_url 等）。
|
||
</div>
|
||
<label>Messages JSON（可直接编辑）</label>
|
||
<textarea id="vlMessagesJson" class="mono"></textarea>
|
||
<label style="margin-top:10px;">extraBody JSON（可选；例如 max_tokens、temperature 等）</label>
|
||
<textarea id="vlExtraJson" class="mono" placeholder='例如：{ "temperature": 0.2 }'></textarea>
|
||
<div style="margin-top:10px;" class="btns">
|
||
<button id="sendVlBtn">发送</button>
|
||
<button id="resetVlBtn" class="secondary">重置示例</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 12px;">
|
||
<h3>最终请求体</h3>
|
||
<div id="reqBox" class="out mono muted"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<h3>响应</h3>
|
||
<div id="respBox" class="out ok"></div>
|
||
<div style="margin-top:10px;">
|
||
<h3>调试信息</h3>
|
||
<div id="debugBox" class="out mono muted" style="min-height:120px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const $ = (id) => document.getElementById(id);
|
||
|
||
const state = {
|
||
mode: 'text',
|
||
aborter: null,
|
||
};
|
||
|
||
function setStatus(msg) { $('status').textContent = msg || ''; }
|
||
|
||
function setReqBox(objOrText) {
|
||
if (typeof objOrText === 'string') { $('reqBox').textContent = objOrText; return; }
|
||
const pretty = $('prettyJson').checked;
|
||
$('reqBox').textContent = pretty ? JSON.stringify(objOrText, null, 2) : JSON.stringify(objOrText);
|
||
}
|
||
|
||
function setRespBox(text, isError=false) {
|
||
const box = $('respBox');
|
||
box.textContent = text ?? '';
|
||
box.classList.toggle('err', !!isError);
|
||
box.classList.toggle('ok', !isError);
|
||
}
|
||
|
||
function appendResp(text) {
|
||
$('respBox').textContent += text;
|
||
}
|
||
|
||
function setDebug(objOrText) {
|
||
if (typeof objOrText === 'string') { $('debugBox').textContent = objOrText; return; }
|
||
$('debugBox').textContent = JSON.stringify(objOrText, null, 2);
|
||
}
|
||
|
||
function baseUrl() {
|
||
const v = $('baseUrl').value.trim();
|
||
return v || 'http://localhost:8080';
|
||
}
|
||
|
||
function buildTextRequest() {
|
||
const model = $('model').value.trim();
|
||
const system = $('textSystem').value.trim();
|
||
const user = $('textUser').value.trim();
|
||
|
||
const messages = [];
|
||
if (system) messages.push({ role: 'system', content: system });
|
||
if (user) messages.push({ role: 'user', content: user });
|
||
|
||
const body = { messages };
|
||
if (model) body.model = model;
|
||
return body;
|
||
}
|
||
|
||
function parseJsonStrict(text, label) {
|
||
try { return JSON.parse(text); }
|
||
catch (e) { throw new Error(`${label} 不是合法 JSON：${e.message}`); }
|
||
}
|
||
|
||
function buildVlRequest() {
|
||
const model = $('model').value.trim();
|
||
const messages = parseJsonStrict($('vlMessagesJson').value, 'Messages JSON');
|
||
|
||
const body = { messages };
|
||
if (model) body.model = model;
|
||
|
||
const extra = $('vlExtraJson').value.trim();
|
||
if (extra) {
|
||
body.extraBody = parseJsonStrict(extra, 'extraBody JSON');
|
||
}
|
||
|
||
return body;
|
||
}
|
||
|
||
function stopRunning() {
|
||
if (state.aborter) {
|
||
state.aborter.abort();
|
||
state.aborter = null;
|
||
}
|
||
$('stopBtn').disabled = true;
|
||
setStatus('已停止');
|
||
}
|
||
|
||
async function postJson(url, body, { stream=false } = {}) {
|
||
stopRunning();
|
||
$('stopBtn').disabled = false;
|
||
state.aborter = new AbortController();
|
||
|
||
setRespBox('');
|
||
setDebug('');
|
||
|
||
const reqInfo = { url, method: 'POST', headers: { 'Content-Type': 'application/json' }, body };
|
||
setDebug(reqInfo);
|
||
|
||
const startedAt = Date.now();
|
||
setStatus(stream ? '流式请求中...' : '请求中...');
|
||
|
||
try {
|
||
const resp = await fetch(url, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(body),
|
||
signal: state.aborter.signal,
|
||
});
|
||
|
||
const ct = resp.headers.get('content-type') || '';
|
||
|
||
if (!resp.ok) {
|
||
const t = await resp.text();
|
||
throw new Error(`HTTP ${resp.status}: ${t}`);
|
||
}
|
||
|
||
if (!stream) {
|
||
const t = await resp.text();
|
||
if (!t) {
|
||
setRespBox('');
|
||
} else if (ct.includes('application/json') || t.trim().startsWith('{') || t.trim().startsWith('[')) {
|
||
try {
|
||
const data = JSON.parse(t);
|
||
setRespBox(typeof data === 'string' ? data : (data.content ?? JSON.stringify(data, null, 2)));
|
||
} catch {
|
||
setRespBox(t);
|
||
}
|
||
} else {
|
||
setRespBox(t);
|
||
}
|
||
|
||
setStatus(`完成：${((Date.now() - startedAt)/1000).toFixed(2)}s`);
|
||
return;
|
||
}
|
||
|
||
const reader = resp.body.getReader();
|
||
const decoder = new TextDecoder('utf-8');
|
||
let buffer = '';
|
||
|
||
while (true) {
|
||
const { value, done } = await reader.read();
|
||
if (done) break;
|
||
|
||
buffer += decoder.decode(value, { stream: true });
|
||
const lines = buffer.split(/\r?\n/);
|
||
buffer = lines.pop() || '';
|
||
|
||
for (const line of lines) {
|
||
const trimmed = line.trim();
|
||
if (!trimmed) continue;
|
||
|
||
if (trimmed.startsWith('data:')) {
|
||
const data = trimmed.slice(5).trim();
|
||
if (data === '[DONE]') { setStatus('完成（DONE）'); continue; }
|
||
appendResp(data + '\n');
|
||
} else {
|
||
appendResp(line + '\n');
|
||
}
|
||
}
|
||
}
|
||
|
||
setStatus(`完成：${((Date.now() - startedAt)/1000).toFixed(2)}s`);
|
||
} catch (e) {
|
||
if (e.name === 'AbortError') {
|
||
setStatus('已中止');
|
||
return;
|
||
}
|
||
setRespBox(String(e?.message ?? e), true);
|
||
setStatus('失败');
|
||
} finally {
|
||
state.aborter = null;
|
||
$('stopBtn').disabled = true;
|
||
}
|
||
}
|
||
|
||
function setMode(mode) {
|
||
state.mode = mode;
|
||
document.querySelectorAll('.tab').forEach(el => el.classList.toggle('active', el.dataset.mode === mode));
|
||
$('textMode').style.display = mode === 'text' ? '' : 'none';
|
||
$('vlMode').style.display = mode === 'vl' ? '' : 'none';
|
||
setRespBox('');
|
||
setDebug('');
|
||
$('reqBox').textContent = '';
|
||
}
|
||
|
||
function resetVlExample() {
|
||
const example = [
|
||
{ role: 'system', content: '你是一名严谨的助教。' },
|
||
{ role: 'user', content: '请用一句话解释什么是多模态模型。' }
|
||
];
|
||
$('vlMessagesJson').value = JSON.stringify(example, null, 2);
|
||
$('vlExtraJson').value = '';
|
||
}
|
||
|
||
// init
|
||
$('baseUrl').value = 'http://localhost:8080';
|
||
resetVlExample();
|
||
|
||
document.querySelectorAll('.tab').forEach(el => {
|
||
el.addEventListener('click', () => setMode(el.dataset.mode));
|
||
});
|
||
|
||
$('stopBtn').addEventListener('click', stopRunning);
|
||
|
||
$('genTextJsonBtn').addEventListener('click', () => {
|
||
try { setReqBox(buildTextRequest()); }
|
||
catch (e) { setReqBox(String(e.message ?? e)); }
|
||
});
|
||
|
||
$('sendTextBtn').addEventListener('click', async () => {
|
||
const stream = $('useStream').checked;
|
||
const body = buildTextRequest();
|
||
setReqBox(body);
|
||
const url = baseUrl() + (stream ? '/api/chat/stream' : '/api/chat');
|
||
await postJson(url, body, { stream });
|
||
});
|
||
|
||
$('resetVlBtn').addEventListener('click', resetVlExample);
|
||
|
||
$('sendVlBtn').addEventListener('click', async () => {
|
||
const stream = $('useStream').checked;
|
||
let body;
|
||
try {
|
||
body = buildVlRequest();
|
||
} catch (e) {
|
||
setRespBox(String(e.message ?? e), true);
|
||
return;
|
||
}
|
||
setReqBox(body);
|
||
const url = baseUrl() + (stream ? '/api/vl/chat/stream' : '/api/vl/chat');
|
||
await postJson(url, body, { stream });
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|