zzzjy
eb00b23de8
AI 划词翻译 Chrome 扩展（Manifest V3）： - 支持 DeepSeek/OpenAI/Kimi/智谱/通义/Gemini/Claude/Ollama 等 10 种服务商 - 流式输出、左右分栏对照、原文一键展开收起 - 划词图标/自动翻译/Alt+T 快捷键/右键菜单四种触发方式
134 lines
5.1 KiB
HTML
134 lines
5.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>译泡 PopLingo · 设置</title>
|
||
<link rel="stylesheet" href="options.css" />
|
||
</head>
|
||
<body>
|
||
<div class="layout">
|
||
<aside class="side">
|
||
<div class="logo">
|
||
<img src="../icons/icon48.png" width="34" height="34" alt="" />
|
||
<div>
|
||
<h1>译泡 · PopLingo</h1>
|
||
<span>v1.0.0</span>
|
||
</div>
|
||
</div>
|
||
<nav>
|
||
<a href="#provider" class="active">🔌 模型服务</a>
|
||
<a href="#behavior">🖱️ 翻译行为</a>
|
||
<a href="#prompt">✨ 自定义 Prompt</a>
|
||
<a href="#about">ℹ️ 使用说明</a>
|
||
</nav>
|
||
</aside>
|
||
|
||
<main>
|
||
<!-- 模型服务 -->
|
||
<section id="provider" class="card">
|
||
<h2>模型服务</h2>
|
||
<p class="desc">选择服务商后会自动填充接口地址与推荐模型；也可以选择「自定义」接入任意 OpenAI 兼容接口。</p>
|
||
|
||
<div class="grid2">
|
||
<label class="field">
|
||
<span>服务商</span>
|
||
<select id="preset"></select>
|
||
</label>
|
||
<label class="field">
|
||
<span>接入协议</span>
|
||
<select id="apiType">
|
||
<option value="openai">OpenAI 兼容（chat/completions）</option>
|
||
<option value="anthropic">Anthropic Messages</option>
|
||
<option value="gemini">Google Gemini</option>
|
||
</select>
|
||
</label>
|
||
<label class="field wide">
|
||
<span>API Base URL</span>
|
||
<input id="baseURL" type="text" placeholder="https://api.deepseek.com/v1" spellcheck="false" />
|
||
</label>
|
||
<label class="field">
|
||
<span>API Key</span>
|
||
<div class="keywrap">
|
||
<input id="apiKey" type="password" placeholder="sk-..." spellcheck="false" autocomplete="off" />
|
||
<button id="eyeBtn" class="ghost" type="button" title="显示/隐藏">👁</button>
|
||
</div>
|
||
</label>
|
||
<label class="field">
|
||
<span>模型名称</span>
|
||
<input id="model" type="text" placeholder="deepseek-chat" spellcheck="false" />
|
||
</label>
|
||
</div>
|
||
|
||
<div class="actions">
|
||
<button id="testBtn" class="btn">测试连接</button>
|
||
<span id="testResult" class="test-result"></span>
|
||
</div>
|
||
|
||
<div class="tips">
|
||
💡 国内推荐 <b>DeepSeek</b>（便宜好用）或 <b>智谱 GLM-4-Flash</b>（免费）；本地部署选 <b>Ollama</b>（无需 Key）。Key 仅保存在你的浏览器账号同步存储中。
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 翻译行为 -->
|
||
<section id="behavior" class="card">
|
||
<h2>翻译行为</h2>
|
||
<div class="grid2">
|
||
<label class="field">
|
||
<span>目标语言</span>
|
||
<select id="targetLang"></select>
|
||
</label>
|
||
<label class="field">
|
||
<span>源语言</span>
|
||
<select id="sourceLang"></select>
|
||
</label>
|
||
<label class="field">
|
||
<span>触发方式</span>
|
||
<select id="triggerMode">
|
||
<option value="icon">划词后显示图标，点击翻译</option>
|
||
<option value="auto">划词后自动翻译</option>
|
||
<option value="shortcut">仅快捷键（默认 Alt+T）</option>
|
||
</select>
|
||
</label>
|
||
<label class="field">
|
||
<span>译文字号</span>
|
||
<input id="fontSize" type="number" min="12" max="22" step="1" />
|
||
</label>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Prompt -->
|
||
<section id="prompt" class="card">
|
||
<h2>自定义 Prompt（可选）</h2>
|
||
<p class="desc">留空使用内置专业翻译 Prompt。可用变量：<code>{targetLang}</code> 目标语言、<code>{sourceLang}</code> 源语言。</p>
|
||
<textarea id="systemPrompt" rows="5" placeholder="例如：你是字幕翻译专家，将文本翻译成{targetLang}，保持口语化，输出纯文本……"></textarea>
|
||
<div class="grid2" style="margin-top:12px">
|
||
<label class="field">
|
||
<span>Temperature（0 严谨 ~ 1 活泼）</span>
|
||
<input id="temperature" type="number" min="0" max="1" step="0.1" />
|
||
</label>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 关于 -->
|
||
<section id="about" class="card">
|
||
<h2>使用说明</h2>
|
||
<ul class="about">
|
||
<li>划词 / 按 <kbd>Alt+T</kbd> / 右键菜单「AI 翻译」触发翻译；<kbd>Esc</kbd> 关闭弹窗。</li>
|
||
<li>弹窗支持拖拽移动、右下角调整大小、一键复制与重新翻译。</li>
|
||
<li>快捷键可在 <code>chrome://extensions/shortcuts</code> 中修改。</li>
|
||
<li>API 请求由扩展后台发起，不经过任何第三方服务器。</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<div class="savebar" id="savebar">
|
||
<span id="saveHint">设置修改后自动保存</span>
|
||
<button id="saveBtn" class="btn primary">保存</button>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="options.js"></script>
|
||
</body>
|
||
</html>
|