当前位置：首页 > news >正文

用AI开发HTML双语阅读工具助力英语阅读

news 2025/9/22 9:50:21

一、问题的提出

开学了，我本学期教授的是大学英语三。所教班级人数多，学生基础参差不齐，为了辅助学生更好地学习英语，我特地制作了一些教学资料供学生自主学习。

双语阅读工具就是其中之一。这个工具的特点是可以导入双语语料库，选择文本分隔方式后，可以以不同的颜色间隔显示原文和译文，便于学生对照和辨识。同时学生还可以一键切换双语的上下位置，转移学生的视觉焦点，提升阅读效率。点击播放，还可以播放当前目录下的音频，这样一款妥妥的自定义的双语英语阅读学习辅助工具。

二、问题的解决

然而实现这一点，其实并不简单。

第一步，我要找到课文原文和译文，通过语料清洗，删除行首的数字、空行，进行除噪后，分别存储为原文和译文两个不同的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>

最终的效果如下，可以显示双语、播放音频，同时还带有单词的注释内容。