【教程】AI时代的便利！零成本部署学生专属“自动听写”网页

辅导神兽写作业，尤其是语文听写，绝对是破坏家庭和谐的第一杀手。读快了记不住，读慢了又走神。作为技术折腾党，这种纯重复性的劳动，当然要交给代码来解决。

经过一番折腾，我用纯代码糊出了一个专属的“自动听写”网页。支持按年级/课时多选、混合抽测、随机乱序，还拥有极度拟真的 AI 人声和精准的物理停顿控制。

今天不聊虚的，直接手把手教你：如何利用免费资源，零成本把这个听写系统部署上线。

🛠 01. 课前准备：你需要准备什么？

在开始动手之前，请确认已经具备以下条件：

一套现成的源代码：包括核心代码 app.py、环境依赖 requirements.txt 以及存放听写词汇的 txt 文件夹。
一个 Hugging Face账号：这是我们的免费服务器，去抱抱脸官网（huggingface.co）用邮箱免费注册即可。（必须）
一个 Cloudflare 账号+托管域名：用于国内访问加速。（非必须，仅进阶优化需要）

⚙️ 02. 核心技术栈

了解底层逻辑，能让你在后续折腾时心里更有底：

前端框架（Gradio）：写 Python 的朋友都懂，用它写 Web UI 极度舒适。我套了一层 iOS 风格的毛玻璃（Glassmorphism）美化，并做了只读安全设计，防止神兽乱点。
语音合成（edge-tts）：微软的看家本领，高保真中文语音，吐字清晰，发音极度接近真人。
音频处理（pydub）：听写的核心在于“停顿”。市面上很多工具的停顿很不自然，使用 pydub 在生成的词语语音之间，物理卡秒拼接静音音频，完美满足听写教学的严苛要求。
数据管理（本地txt映射）：拒绝复杂的数据库，直接建几个 .txt 文件存放词表，随用随改，极其轻量。

🚀 03. 核心部署：Hugging Face免费托管

有了代码，放哪里跑？买国内云服务器太贵且需备案，放家里NAS出门访问又得折腾内网穿透。强烈推荐白嫖党使用 Hugging Face Spaces，原生支持Gradio，免费提供极速环境。

保姆级部署步骤：

登录 Hugging Face 官网。
点击右上角的头像，选择 New Space。
填写你的项目名称（比如 auto-dictation），License 选随意，Space SDK 必须选择 Gradio。
Space Hardware 保持默认的 Free（免费 CPU 额度跑个听写完全性能过剩），点击 Create Space。
接下来进入传代码环节。在页面的 Files 标签页（或通过 Git），将你的 app.py、requirements.txt 和 txt 词库文件夹推上去。
提交后，HF 会自动拉取依赖并 Build。等待几分钟，状态变成 Running，你的听写网页就正式上线了！

🎯 阶段总结：
其实到这一步，你的听写网页就已经可以正常访问和使用了！ 你只需要打开 HF 提供的默认域名（如 你的用户名-项目名.hf.space）就能直接给神兽听写。

⚡️ 04. 进阶优化：CF Worker国内丝滑直连（非必选）

虽然直接访问HF的域名就能用，但有一痛点：Hugging Face在国内访问偶尔会抽风，可能会出现加载慢或者音频断流的情况。
如果你想追求国内“秒开”的极致丝滑体验，可以祭出反代神器——Cloudflare Workers。

网络加速部署步骤：

登录Cloudflare控制台，在左侧菜单找到 Workers 和 Pages，点击 创建应用程序 -> 创建 Worker。
随便起个名字（比如 dictation-proxy），点击部署。
部署成功后，点击 编辑代码，将左侧默认的代码清空，替换成以下极简的反代代码：

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    // 将下面的地址替换为你刚刚创建的 Hugging Face Space 的真实地址
    url.hostname = '你的用户名-项目名.hf.space'; 

    const newRequest = new Request(url.toString(), request);
    newRequest.headers.set('X-Forwarded-Host', request.headers.get('Host'));
    
    return fetch(newRequest);
  }
}