前言

本文主要向大家介绍我独立开发的外语伴学项目——词帆 CiFan。

文章记录了项目的核心功能、设计思路以及技术实现，欢迎大家交流探讨！

个人主页：艺杯羹

体验传送门：词帆

1. 研发背景与 AI 向善项目立意

1.1. 学习困境与项目研发初衷

我开发词帆 (CiFan) 这个项目的初衷，源于我对当前外语学习痛点的长期观察与思考。

一方面，在偏远乡村与基层教学场景中，外语教育面临着师资分布不均、课后辅导真空等客观现实。

很多乡村留守儿童在完成课堂学习后，遇到复杂的英文长难句或生词，家庭环境中缺乏能够辅导的人。

另一方面，不仅是乡村孩子，广大普通的英语初学者、中小学生以及想要提升阅读量的自学人群，普遍都在面对传统死记硬背生词表的低效困境。

脱离了故事和语境去干背单词，不仅容易学了就忘，更容易让人产生严重的挫败感与厌学情绪。

同时，不少乡村学校或普通家庭的硬件设备配置有限，低配手机或旧电脑很难流畅运行体积庞大的 App 软件。

为了打破科技与教育资源的壁垒，我独立研发了基于 GGU 阶梯式分级阅读体系的公益数字外语伴学平台——词帆 CiFan。

我希望无论是偏远大山里的孩子，还是广大的普通外语初学者，都能通过免费的科技手段获得一位 24 小时在线的个性化 AI 外语伴学导师。

1.2. 词帆 CiFan 的核心痛点与解法

我设计的词帆平台，核心理念是“以文章故事为导向去记单词、学英语”。

项目既聚焦于乡村儿童课后无辅导的公益场景，也全面覆盖各类外语初学者的通用学习需求。

针对不同场景下的学习痛点，我提出了相对应的技术解决方案：

只要设备拥有常规浏览器与网络连接，学习者即可随时随地免费获取个性化的 AI 外语伴学辅导。

2. 词帆 CiFan 整体架构设计与全栈选型

2.1. 核心技术栈架构选型

为了兼顾系统的高性能、易维护性与低算力兼容性，我在前后端及部署层面选用了成熟现代的技术栈。

我采用了前后端分离架构，通过 RESTful API 进行轻量级数据交互，保障整体系统的响应速度。

具体的全栈技术选型与职责划分如下表所示：

2.2. 高兼容性与极轻量 Web 优化设计

考虑到乡村学校多媒体教学机与旧手机的硬件性能限制，我将前端打包体积控制在 11MB 以内。

我摈弃了复杂的第三方重型渲染库，采用 Web 标准原生的 HTML5 与 CSS 变量实现主题切换。

音频朗读方面我直接调用浏览器自带的 Web Speech Synthesis API 标准 TTS 引擎，无需额外加载音频资源包。

通过这种设计，页面首次加载延迟降低至毫秒级，大幅提升了低配设备上的阅读流畅度。

2.3. 前后端分工与低算力适配逻辑

后端系统通过分层架构解耦业务逻辑，控制器层专注于接口路由与参数校验。

数据传输过程采用 gzip 压缩，高频访问的分级文章与词汇数据库缓存在前端内存与后端 Redis 中。

系统在处理大模型 API 请求时，采用异步非阻塞机制，避免网络波动影响主线程阅读体验。

3. 核心功能设计与实战实现

3.1. GGU 阶梯式英文分级阅读体系

我在平台内内置了 83 篇精心编排的故事化分级阅读文章，内容涵盖基础词汇、高考核心词汇及日常实用表达。

文章难度基于 GGU 英语分级标准，划分为 L1（入门级故事）至 L5（进阶阅读）五个阶梯。

每一篇文章我都进行了细致的词汇标注，使学习者能够在适合自身水平的难度区间内循序渐进地提升阅读量。

3.2. 零障碍沉浸式交互阅读器

沉浸式交互阅读器是我研发的平台关键核心组件。

阅读器支持点击即查词功能，学习者点击文章中的任意单词即可弹出精准音标、中文释义与原生例句。

系统提供单句朗读与全文连续朗读功能，结合标准美音 TTS 发音，帮助纠正发音读音。

界面支持一键开启双语对照模式，并提供 6 种主题配色与 5 种字号调节，最大程度保障视觉舒适度。

在阅读过程中，遇到不易理解的复杂句子，只需点击“AI 解析”按钮即可立刻唤醒 AI 伴学小助教。

3.3. AI 乡村小助教长难句大白话拆解

针对传统语法解析中充斥复杂术语的问题，我专门对 AI 伴学小助教进行了提示词调优。

小助教自动将复杂的英文主从复合句拆解为主语、谓语、宾语等核心骨架。

解析语言转换为学习者听得懂的生活比喻，将从句比喻为“给名词戴上的小帽子”，让抽象语法变得形象具体。

通过充满童趣与亲和力的语言引导，帮助外语初学者快速消除对长难句的畏难情绪。

3.4. AI 趣味故事生成与场景串词

为了提高生词复习的趣味性，我设计了基于大模型的 GGU AI 趣味串词故事生成功能。

学习者可以从生词本中勾选需要复习的若干个词汇，系统自动调用 Qwen 大模型生成一段包含这些生词的短篇故事。

生成的故事严格控制在对应的难度等级内，并附带中文对照与阅读理解小测试。

将零散的生词重新串联成连贯的情节，有效强化了词汇在具体语境中的记忆深度。

3.5. 艾宾浩斯复习算法与云端生词本

学习者在阅读过程中标注的生词会自动同步保存至云端个人生词本。

后台复习引擎结合艾宾浩斯遗忘曲线模型，按 1天、2天、4天、7天及 15 天的时间节点智能规划复习任务。

复习界面支持“英译中”、“中译英”与“听音辨意”等多种交互模式，根据答题情况动态调整下一次复习周期。

通过科学的算法干预，防止生词停留在短期记忆阶段，帮助学习者形成长久记忆。

3.6. 学习统计与 GitHub 风格成就热力图

为了提供持续的学习激励，我构建了可视化学习统计面板。

系统会自动记录每日阅读字数、累计掌握词汇量、连续打卡天数以及阅读时长。

统计面板引入了类似 GitHub 贡献图样式的学习热力图，直观记录学习者的成长轨迹。

每一次阅读与复习都会在热力图上留下深浅不一的绿点，显著增强了成就感与学习动力。

3.7. 个人中心与多模态学习概览

个人中心聚合了学习者的账号设置、阅读收藏夹、AI 生成故事历史与学习计划管理。

管理界面清晰地展现了各个词汇等级的解锁进度，方便老师、家长或学习者本人了解阶段性成果。

系统同时支持数据导出功能，学习者可以一键将生词本导出为可打印的 PDF 打印单。

多维度的数据汇总，为个性化辅导提供了真实可靠的数据支持。

4. 大模型 Prompt 工程与双模式降级架构

4.1. 阿里云百炼 Qwen 大模型 Prompt 工程设计

我在词帆平台中接入了阿里云百炼 (ModelStudio) Qwen (通义千问) 大模型 API。

在 Prompt 工程设计中，我制定了严密的规则约束，以确保输出内容通俗易懂：

Role: 亲切的外语伴学 AI 导师
Rules:
1. 【大白话化】：严禁使用“限制性定语从句”、“状语后置”等复杂语法术语，必须转换为生活化比喻（如“主语是小火车头”，“从句是车厢拖着的小帽子”）。
2. 【正面激励】：每次解析结尾必须包含一句温暖童趣的鼓励（如“你非常棒！这个句子就像拼积木一样简单”）。
3. 【安全合规】：严格过滤任何不适合青少年的词汇与话题。

4.2. 无 API Key 与弱网环境下的优雅降级

在偏远场景或离线教学中，网络连接中断或未配置公网 API Key 是常见状况。

为了防止网络请求失败导致页面崩溃，我设计了双模式降级架构（Dual-Mode Architecture）。

当系统检测到未配置 VITE_DASHSCOPE_API_KEY 或网络请求超时，会自动切换至“离线本地模式”。

离线模式无缝衔接本地预置的语法解析模板库与生词故事库，确保基础伴学功能依然可正常运行。

4.3. 大模型交互核心代码实现

前端大模型服务层 (qwenService.ts) 封装了 API 调用与本地模式切换逻辑，关键实现如下：

import type { GeneratedRuralLesson } from './localAiTemplates';
import { getLocalSentenceExplanation } from './localAiTemplates';
const API_KEY = import.meta.env.VITE_DASHSCOPE_API_KEY || '';
const BASE_URL = import.meta.env.VITE_DASHSCOPE_BASE_URL || 'https://dashscope.aliyuncs.com/compatible-mode/v1';
const MODEL = import.meta.env.VITE_DASHSCOPE_MODEL || 'qwen-turbo';
function isLocalMode(): boolean {
  return !API_KEY || API_KEY.trim() === '';
}
export async function explainSentenceForRuralKids(sentence: string, contextStory?: string) {
  if (isLocalMode()) {
    console.info('[qwenService] 未检测到 API Key，自动启用离线本地降级模式');
    return getLocalSentenceExplanation(sentence);
  }
  try {
    const response = await fetch(`${BASE_URL}/chat/completions`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${API_KEY}`,
      },
      body: JSON.stringify({
        model: MODEL,
        messages: [
          {
            role: 'system',
            content: '你是一位亲切的外语伴学老师。请用大白话拆解输入的长难句，说明主干，并用生活化比喻进行解释。',
          },
          {
            role: 'user',
            content: `待拆解句子: "${sentence}"`,
          },
        ],
        temperature: 0.6,
      }),
    });
    if (!response.ok) {
      throw new Error(`API 响应状态异常: ${response.status}`);
    }
    const data = await response.json();
    return data.choices?.[0]?.message?.content || getLocalSentenceExplanation(sentence);
  } catch (error) {
    console.warn('[qwenService] 请求大模型失败，优雅降级至本地解析模板:', error);
    return getLocalSentenceExplanation(sentence);
  }
}

通过统一的接口签名设计，调用方页面无需关注底层是走公网 API 还是本地模板，提升了代码的鲁棒性。

5. 后端 RESTful 服务与缓存鉴权设计

5.1. Spring Boot 3.2.5 统一响应与鉴权层

后端系统基于 Spring Boot 3.2.5 构建，我采用了规范的 JSON 统一响应封装格式（Result）。

安全鉴权部分整合 Spring Security 与 JWT 机制，保障各用户数据隔离。

接口拦截器会自动校验请求头中的 Authorization Token，对非法访问进行统一拦截。

核心控制器 AuthController.java 结构示范如下：

package com.english.reader.controller;
import com.english.reader.common.Result;
import com.english.reader.dto.LoginDTO;
import com.english.reader.vo.UserVO;
import com.english.reader.service.UserService;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/api/auth")
public class AuthController {
    private final UserService userService;
    public AuthController(UserService userService) {
        this.userService = userService;
    }
    @PostMapping("/login")
    public Result<UserVO> login(@RequestBody LoginDTO loginDTO) {
        UserVO userVO = userService.login(loginDTO);
        return Result.success("登录成功", userVO);
    }
    @GetMapping("/me")
    public Result<UserVO> getCurrentUser(@RequestHeader("Authorization") String token) {
        UserVO userVO = userService.getUserByToken(token);
        return Result.success("获取用户信息成功", userVO);
    }
}

5.2. MySQL 8.0 词库设计与 Redis 缓存策略

词汇与文章数据存储于 MySQL 8.0 数据库中，索引对词汇拼写与难度级别进行了优化。

用户频繁查阅的公共词条数据由 Redis 进行二级缓存，避免重复查询数据库。

生词本更新操作采用异步写回策略，显著降低了高并发读取时的响应延时。

6. 项目构建验证与社会效益展望

6.1. 自动化构建与测试验证结果

项目在发布前我完成了全流程的构建与自动化验证。

静态代码检查、前后端打包编译以及 API 接口连通性测试均一次性顺利通过。

具体的测试验证汇总如下表：

6.2. 总结与应用展望

不论是乡村儿童还是广大的普通外语初学者，都可以利用这个平台摆脱死记硬背，在轻松的分级阅读中高效积累词汇。

如果大家在开发或者部署过程中有什么想法，欢迎在评论区一起交流探讨！~(*￣︶￣)