cat-shark
37b75c2d21
- 流式查询（SSE 实时展示生成过程） - 三维度数据模型：history（查询）/ words（单词档案）/ roots（词根档案） - 词根拆解与发音拼读训练（词根点击揭晓历史词例） - 词义/同义例句跨查询累积，同义项自动合并 - 历史与词库分页、多维度搜索 - 模型：Qwen3.6-35B-A3B（硅基流动，可 LLM_MODEL 切换）
59 lines
2.1 KiB
HTML
59 lines
2.1 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>查词学英语</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>📖 查词学英语</h1>
|
|
<nav>
|
|
<button id="nav-query" class="nav-btn active">查询</button>
|
|
<button id="nav-history" class="nav-btn">历史记录</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- 查询视图 -->
|
|
<main id="view-query" class="view">
|
|
<section class="card">
|
|
<label for="sentence">粘贴英语句子</label>
|
|
<textarea id="sentence" rows="3"
|
|
placeholder="例如: The scientist conducted a thorough analysis of the data."></textarea>
|
|
<label>句子分词（点击选择要查询的单词，最多 5 个）</label>
|
|
<div id="word-tokens" class="word-tokens">
|
|
<span class="tokens-empty">输入句子后自动分词</span>
|
|
</div>
|
|
<button id="query-btn" class="btn primary">🔍 查询</button>
|
|
<div id="query-status" class="status hidden"></div>
|
|
<div id="stream-box" class="stream-box hidden">
|
|
<div class="stream-label">🤖 AI 生成中（实时输出）</div>
|
|
<pre id="stream-text"></pre>
|
|
</div>
|
|
</section>
|
|
<section id="result-area"></section>
|
|
</main>
|
|
|
|
<!-- 历史视图 -->
|
|
<main id="view-history" class="view hidden">
|
|
<section class="card">
|
|
<h2>历史查询</h2>
|
|
<input id="history-search" class="search-box" type="text" placeholder="🔍 搜索原句或单词…" />
|
|
<div id="history-list" class="history-list"></div>
|
|
<div id="history-pager" class="pager"></div>
|
|
</section>
|
|
<section class="card">
|
|
<h2>我的词库</h2>
|
|
<input id="word-lib-search" class="search-box" type="text" placeholder="🔍 搜索单词、释义或词根…" />
|
|
<div id="word-lib" class="word-lib"></div>
|
|
<div id="word-lib-pager" class="pager"></div>
|
|
</section>
|
|
<section id="word-detail-area" class="hidden"></section>
|
|
<section id="detail-area" class="hidden"></section>
|
|
</main>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|