用AI开发HTML双语阅读工具助力英语阅读
·
一、问题的提出
开学了，我本学期教授的是大学英语三。所教班级人数多，学生基础参差不齐，为了辅助学生更好地学习英语，我特地制作了一些教学资料供学生自主学习。
双语阅读工具就是其中之一。这个工具的特点是可以导入双语语料库，选择文本分隔方式后，可以以不同的颜色间隔显示原文和译文，便于学生对照和辨识。同时学生还可以一键切换双语的上下位置，转移学生的视觉焦点，提升阅读效率。点击播放，还可以播放当前目录下的音频，这样一款妥妥的自定义的双语英语阅读学习辅助工具。
二、问题的解决
然而实现这一点，其实并不简单。
第一步，我要找到课文原文和译文，通过语料清洗，删除行首的数字、空行，进行除噪后，分别存储为原文和译文两个不同的txt文本，接着再导入到tmxmall的aligner，把文本进行句对齐。
第二步，我还要从tmxmall中导出我对齐的文本，放在Word文件中，把我要标注的单词加粗，并存为【课文.docx】。
第三步，我使用无障碍标注工具，把【课文.docx】文件中的加粗单词进行标注，主要是调用了小牛机器翻译的API，把单词的文中释义标注在单词旁边。如下图所示：
第四步，我们把标注好的文本复制到【课文带释义.TXT】文件当中备用。接着，我们打开ChatGPT，输入以下命令。
我想生成一个可以导入txt文件，用间隔颜色展示双语语料库的html文件，顶部设置有导入、重置、字体放大或缩小按钮，可以播放当前目录下的音频。右侧有滚动条，滚动时，顶部按钮一直显示，界面漂亮、清爽，可以大屏显示，在课堂上使用。可以添加一些必要的功能和参数，给出html代码。
经过不断调试，终于生成了以下代码，大家可以保存到html文件中使用：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>双语语料库展示</title>
<style>
body {
font-family: "Microsoft YaHei", sans-serif;
margin: 0;
background: linear-gradient(135deg, #f0f3f7, #e6ebef);
}
header {
position: fixed;
top: 0;
width: 100%;
background: linear-gradient(90deg, #2c3e50, #1abc9c);
color: white;
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
#controls {
display: flex;
gap: 10px;
align-items: center;
}
#controls button, #controls select, #controls input[type="file"] {
padding: 6px 12px;
font-size: 14px;
border-radius: 20px;
border: none;
cursor: pointer;
background: #ecf0f1;
color: #2c3e50;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: all 0.2s ease;
}
#controls button:hover, #controls select:hover, #controls input[type="file"]:hover {
background: #1abc9c;
color: white;
}
#audioPlayer {
height: 32px;
}
#content {
margin-top: 100px;
padding: 20px;
}
.entry {
margin-bottom: 20px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.entry:hover {
transform: scale(1.02);
box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}
.target {
background: #a8e6a3; /* 亮绿色 */
padding: 12px;
font-weight: bold;
font-size: 18px;
}
.source {
background: #aed6f1; /* 亮蓝色 */
padding: 12px;
font-size: 16px;
}
</style>
</head>
<body>
<header>
<div id="controls">
<input type="file" id="fileInput">
<select id="parseMode">
<option value="oddEven">奇偶行</option>
<option value="tab">Tab 分隔</option>
<option value="pipe">| 分隔</option>
<option value="triple">||| 分隔</option>
</select>
<button onclick="resetContent()">重置</button>
<button onclick="swapPosition()">交换位置</button>
</div>
<audio id="audioPlayer" controls>
<source src="audio.mp3" type="audio/mpeg">
你的浏览器不支持音频播放。
</audio>
</header>
<div id="content"></div>
<script>
let fontSize = 16;
let isSwapped = JSON.parse(localStorage.getItem("isSwapped")) || false;
document.getElementById('fileInput').addEventListener('change', handleFile);
function handleFile(event) {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = e => {
const lines = e.target.result.split(/\r?\n/).filter(l => l.trim());
const mode = document.getElementById("parseMode").value;
const entries = parseCorpus(lines, mode);
displayEntries(entries);
};
reader.readAsText(file, "utf-8");
}
function parseCorpus(lines, mode) {
let entries = [];
if (mode === "tab") {
lines.forEach(line => {
const parts = line.split("\t");
if (parts.length >= 2) entries.push([parts[1], parts[0]]);
});
} else if (mode === "pipe") {
lines.forEach(line => {
const parts = line.split("|");
if (parts.length >= 2) entries.push([parts[1], parts[0]]);
});
} else if (mode === "triple") {
lines.forEach(line => {
const parts = line.split("|||");
if (parts.length >= 2) entries.push([parts[1], parts[0]]);
});
} else if (mode === "oddEven") {
for (let i = 0; i < lines.length; i += 2) {
if (i + 1 < lines.length) entries.push([lines[i+1], lines[i]]);
}
}
return entries;
}
function displayEntries(entries) {
const container = document.getElementById("content");
container.innerHTML = "";
entries.forEach(([target, source]) => {
const entry = document.createElement("div");
entry.className = "entry";
if (isSwapped) {
entry.innerHTML = `
<div class="source">${source}</div>
<div class="target">${target}</div>
`;
} else {
entry.innerHTML = `
<div class="target">${target}</div>
<div class="source">${source}</div>
`;
}
container.appendChild(entry);
});
}
function resetContent() {
document.getElementById("content").innerHTML = "";
}
function changeFontSize(delta) {
fontSize += delta;
document.getElementById("content").style.fontSize = fontSize + "px";
}
function swapPosition() {
isSwapped = !isSwapped;
localStorage.setItem("isSwapped", JSON.stringify(isSwapped));
// 重新渲染已有条目
const entries = [...document.querySelectorAll(".entry")].map(entry => {
const target = entry.querySelector(".target").textContent;
const source = entry.querySelector(".source").textContent;
return [target, source];
});
displayEntries(entries);
}
</script>
</body>
</html>
最终的效果如下，可以显示双语、播放音频，同时还带有单词的注释内容。
三、学后总结
这个双语阅读工具，整合文字、音频、注释信息等，而且当鼠标放到指令行还会有突起动画，便于识别。
遗憾的是文本大小设置还有问题，不过可以用ctrl+中键滚动鼠标来实现页面字体放大或缩小。后期可以继续改进这个工具。
外语教学和英语学习过程中，都会遇到的一些个性化的小问题，看起来很难，其实都可以转化技术实现的问题，借助AI大模型，善用提示词，让AI帮助我们，轻松实现我们的编程梦想，把思想转化为现实。
关注我，学习更多Python和大模型在英语教学和学习方面的应用！
更多推荐
3
0- 0
已为社区贡献2条内容
所有评论(0)