下载地址
https://api.skillhub.cn/api/v1/download?slug=%40user_5499c3bc%2Fbatchvocabularyscenememory将提示词发送给你的 AI 安装该 skills
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_5499c3bc/batchvocabularyscenememory。- Vocab HTML Builder v2 — 英文生词一键变互动学习页面 🎯 一句话介绍 输入任何包含英文生词的文件(Excel / Word / PDF / TXT / CSV),自动生成带神经网络男女声对话朗读的交互式 HTML 词汇学习页面,电脑手机都能用。 ✨ 核心亮点 任意格式输入 — xlsx / csv / txt / pdf / docx …
- 中"
- 看中文翻译) ├── 🔊 男声(GuyNeural) + 女声(JennyNeural) 朗读 └── 📝 localStorage 复习系统 🚀 使用方式 把这个 skill 安装到 WorkBuddy 对 AI 说:「帮我把 [文件名] 生成为词汇学习 HTML」 AI 自动执行 6 步流水线: 读取文件 → 理解主题 → 提取生词 → 生成对话 → 构…
阅读全文 (展开查看完整说明)
概述
Vocab HTML Builder v2
核心能力
输入任意包含英文生词的文件 → 输出:
- 交互式 HTML 学习页面(格式完全参照
business_english_study_guide.html蓝本) - 神经网络音频文件夹(对话 MP3 + 单词 MP3,edge-tts 生成)
- 电脑/手机均可使用:HTML +
audio/文件夹放同一目录即可
支持输入格式:xlsx / csv / txt / pdf / docx / html
输出格式(蓝本参照)
生成的 HTML 与 business_english_study_guide.html 完全一致:
📚 [主题] · 单词学习指南
├── 顶部 sticky 导航(标题 + 词数统计)
├── TOC 分组标签 + 📝 复习组入口
├── 单组显示(CSS :target 机制)
├── 每张卡片含:
│ ├── 编号 + 单词 🔊 + 音标(英/美)+ 📝 复习按钮
│ ├── 📖 释义(中文 + 词性)
│ ├── 🌱 词根词缀
│ └── 💬 场景对话(3 轮 A/B/A)
│ ├── 每行:角色标签 + 英文 + 「中」按钮 + 🔊
│ └── 点击行 → 显示/隐藏中文翻译
└── 复习系统(localStorage 持久化)完整工作流
阶段 0:读取输入 + 理解上下文(AI 执行)
这是生成高质量对话的关键一步。
结构化文件(xlsx/csv):运行 extract_words.py 自动解析
非结构化文件(txt/pdf/docx/html):AI 直接读取文件内容,然后:
- 理解文档主题:识别文档涉及的领域、场景、关键概念
- 提取英文生词:过滤常见词,只保留需要学习的词汇
- 为每个生词生成中文释义(准确、简洁)
- 创建
words_normalized.csv:word,chinese,phonetic,etymology
# 对于结构化文件,运行提取脚本
python scripts/extract_words.py <input_file> --output ./work阶段 1:创建对话(两种方式,推荐「定制对话」)
⚠️ 重要:模板硬塞会产出语义不通的对话。 例如把 utensil(餐具)填进 Have you tried the {} at that restaurant?,会得到「你试过餐厅的餐具吗」——完全不符逻辑。因此优先使用方式 A(定制对话),只有单词量极大、无法逐一编写时才退回方式 B(场景模板)。
方式 A:定制对话(推荐,语义精准)
AI 为每个单词逐一编写 3 行 A/B/A 对话,格式写入 custom_dialogues.py:
# -*- coding: utf-8 -*-
DIALOGUES = {
"utensil": [
("A", "The new restaurant downtown is beautiful, but the tables felt a bit empty.", "市中心那家新餐厅很漂亮,但桌子感觉有点空。"),
("B", "That's because they bring the utensils after you order.", "那是因为他们等你点完单才上 utensils(餐具)。"),
("A", "Oh, that explains it. I thought the service was just slow.", "哦,原来如此。我还以为是服务慢呢。"),
],
# ... 每个单词一段
}定制对话规范:
- 每个单词 3 行,角色固定为 A / B / A
- 每行三元组
(角色, 英文, 中文) - 目标单词自然融入语境、词性正确、符合逻辑(餐具出现在「点完单才上餐具」,不是「试吃餐具」)
- 中文翻译内嵌,保留目标英文单词便于对照学习
- 单词必须覆盖
words_normalized.csv里全部 127 个(少一个该词就退回模板)
方式 B:场景模板(单词量极大时的兜底)
AI 基于文档主题创建 context_scenarios.json(模板 + {} 占位符):
{
"supply_chain": [
["Have you reviewed the latest supplier report?", "Yes, the lead time for {} needs attention.", "Let's schedule a call with them tomorrow."],
["What's the status of our {} order?", "It's still pending customs clearance.", "Keep me posted. This is a priority shipment."]
]
}模板要点:
- 每套 3 句话(A, B, A),至少 2 处
{}占位符 - 场景名用英文下划线;至少 3-5 套场景
- 对话自然、务实,反映真实场景
- 注意:模板必须适配填入单词的词性/语义,否则仍会硬凑
阶段 2:生成对话
方式 A(定制对话)——中文已内嵌,直接构建,无需提取句子、无需翻译:
python scripts/build_vocab.py words_normalized.csv
--output ./output
--per-section 20
--title "随身带生词列表 · 词汇学习指南"
--custom-dialogues custom_dialogues.py方式 B(场景模板)——先提取句子供翻译:
python scripts/build_vocab.py words_normalized.csv
--output ./output
--per-section 30
--title "商务英语360 · 单词学习指南"
--custom-scenarios context_scenarios.json
--extract-sentences输出:
unique_sentences.json:所有去重对话句子(供翻译用,仅方式 B 需要)words_list.txt:单词 ID 映射(供音频生成用)
阶段 3:AI 批量翻译(仅方式 B 需要)
方式 A(定制对话)跳过此步——中文翻译已内嵌在 custom_dialogues.py 中,脚本会自动跳过 cn_translations.py 加载。
方式 B:AI 读取 unique_sentences.json,逐条翻译为中文,写入 cn_translations.py:
# -*- coding: utf-8 -*-
CN = {
"Have you reviewed the latest supplier report?": "你审阅过最新的供应商报告了吗?",
"Yes, the lead time for board needs attention.": "是的,board 的交货周期需要注意。",
# ... 全部句子
}翻译规范:
- 商务/专业语境用正式中文
- 保留数字、百分号、金额符号原文
- 中文引号用「」
- 生词在翻译中保留英文原词(让学习者对照学习)
- 100% 覆盖率,缺一句都不行
阶段 4:构建最终 HTML
方式 A(定制对话) 已在阶段 2 直接构建完成,跳过本阶段。
方式 B(场景模板) 需带 --translations 参数构建:
python scripts/build_vocab.py words_normalized.csv
--output ./output
--per-section 30
--title "商务英语360 · 单词学习指南"
--custom-scenarios context_scenarios.json
--translations cn_translations.py验证清单:
- [ ] HTML 中
toggleCn(this)调用数 = 对话总行数 × 3 - [ ] 空
cn-tip标签数 = 0 - [ ]
data-audio="audio/d_XXXX.mp3"属性全部存在 - [ ]
data-audio-word="audio/words/w_XXXXX.mp3"属性全部存在 - [ ] 文件无
fetch()调用(纯离线)
阶段 5:生成神经网络音频
# 1. 安装依赖(首次)
pip install edge-tts
# 2. 生成对话音频(男声 GuyNeural / 女声 JennyNeural)
python scripts/gen_dialogue_audio.py output/xxx.html --audio-dir output/audio --concurrency 8
# 3. 生成单词音频(男声 GuyNeural,慢速学习)
python scripts/gen_word_audio.py --words-list output/words_list.txt --output-dir output/audio/words --concurrency 8阶段 6:验证 + 呈现
# 验证音频完整性
echo "对话音频: $(ls output/audio/d_*.mp3 | wc -l) 文件"
echo "单词音频: $(ls output/audio/words/w_*.mp3 | wc -l) 文件"
echo "零字节: $(find output/audio -size 0 | wc -l) 个"
echo "总大小: $(du -sh output/audio | cut -f1)"通过 present_files 呈现 HTML 给用户。
最终交付物
output/
├── 商务英语360_单词学习指南.html # 主文件
└── audio/ # 音频文件夹
├── d_0000.mp3 ... d_XXXX.mp3 # 对话音频
└── words/
└── w_XXXXX.mp3 # 单词音频部署:将 HTML + audio/ 文件夹拷贝到同一目录(电脑或手机均可)。
手机端使用说明
| 浏览器 | 单词发音 | 对话发音 | 备注 |
|---|---|---|---|
| 红米自带浏览器 | ✅ | ✅ | 完美运行 |
| 手机 Edge | ✅ | ⚠️ | 大部分正常 |
| 手机 Chrome | ⚠️ | ⚠️ | file:// 安全限制 |
备用方案:手机上安装 "An HttpServer"(安卓免费开源应用),通过 http://localhost:port/ 访问,绕过所有 file:// 限制。
脚本速查
| 脚本 | 功能 | 必需依赖 |
|---|---|---|
scripts/extract_words.py | 从 xlsx/csv 提取 → 标准化 CSV;从 txt/pdf/docx 提取文本 | pandas, (pdfplumber), (python-docx) |
scripts/build_vocab.py | CSV → HTML + words_list.txt + unique_sentences.json;支持 --custom-dialogues(定制对话)或 --custom-scenarios(场景模板) | pandas |
scripts/gen_dialogue_audio.py | HTML → audio/d_*.mp3 | edge-tts |
scripts/gen_word_audio.py | words_list.txt → audio/words/w_*.mp3 | edge-tts |
assets/html-template.html | HTML 模板(CSS + JS 框架) | — |
对话格式参考
定制对话 custom_dialogues.py(推荐)
# -*- coding: utf-8 -*-
DIALOGUES = {
"word": [
("A", "English sentence", "中文翻译(保留英文生词)"),
("B", "English sentence", "中文翻译(保留英文生词)"),
("A", "English sentence", "中文翻译(保留英文生词)"),
],
# ... 每个单词一段
}- 每个单词固定 3 行,角色 A / B / A
- 目标单词自然融入语境、词性正确、符合逻辑
- 中文内嵌,脚本自动跳过
cn_translations.py
场景模板 context_scenarios.json(单词量大时兜底)
{
"场景英文名": [
["A 说的话(用 {} 占位生词)", "B 说的话", "A 说的话"],
["第二套模板的 A 行", "B 行", "A 行"]
]
}场景命名约定:用小写英文 + 下划线,反映文档主题(如 supply_chain, legal_terms, medical_phrases)。
模板撰写原则:
- 自然的工作对话,不是教科书式问答
- 每个模板至少嵌入 2 个
{}占位符 - 3 句话形成一个完整的小故事/情境
- 避免「What does X mean?」这类幼稚问法——用真实的工作交流方式