Skip to content

connectedGraph/DuoGrow-SPA

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Duogrow SPA

一个面向中年人、老年人和带娃家长的英语学习小工具。它把日常场景转成可以直接开口的短句,适合亲子英语、手机端复听、轻量复习和每天留一张记忆卡片。

💡 灵感来源 本项目来源于 2026.5.10 送给母亲的母亲节礼物。项目定位为 MIT 开源项目,希望让一个普通家庭也能用很低的成本,把 AI 变成可保存、可复听、可慢慢练习的学习陪伴。 (虽然开发完后冷静下来,感觉学习模式还是略显单一。市面上估计早就有类似的成熟软件了,就当是一次 Vibe Coding 的练手吧。不得不说我可真会浪费时间 ── 导师催着的 NLP 任务明天就要交了,大晚上我竟然还在这里感动自己地写 README 😭)

GitHub 仓库:https://github.com/connectedGraph/AIED-DuoGrow-SaaS


项目形态

  • 单 HTML 文件版本classic 分支的 v1+.html 可以直接打开,也适合静态部署。
  • ESM拆分代码版本(游戏化):当前 main 分支,使用 build.js 构建为单文件 dist.html,用于后续工程化维护、主题切换和多版本同步。
  • 静态 LLM 调用:前端直接调用 OpenAI-compatible API,不需要自建后端。
  • BYOK:用户自带文本模型 API Key 和语音 API Secret。
  • 本地存储:学习数据默认保存在浏览器 localStorage

功能

  • 场景化生成:输入生活场景,生成 5 句或 10 句亲子英语表达。每句包含英文、中文解释和适合使用的场景。
  • 随身听仓库:保存整组内容到仓库,支持单句播放、整组播放、全仓库循环听和后台听。
  • 轻量复习:复习页会从保存过的表达里抽题,记录答对、答错和熟练度。
  • 每日一记卡片:随机抽取内容生成适合手机保存的图片,支持长按存入相册。
  • 豆包一对一训练(仅 classic 分支):复制魔法指令,引导豆包按仓库句子做中译英小任务。

⚠️ 原本想做豆包 URL Scheme 自动发送和跳转的,但目前网上能检索到的相关接口均已失效;在网页里内嵌一个套壳 LLM 对话框又显得很鸡肋,故最终保留了"一键复制提示词"的形式。

  • 智能缓存:音频会缓存到本地,重复播放时优先读取缓存,减少重复请求。

游戏化激励 & UI 大幅优化(v2 新增)

🎨 v2 对整体 UI 做了大幅优化:游戏风格视觉重设计、霓虹色彩体系、卡片化布局、动效反馈,整体观感和交互体验相比经典版本有质的提升。

  • XP 与等级:完成生成、保存、复习等学习动作获得经验值,积累升级,从"新手妈妈"逐步晋升到更高等级。
  • 连续打卡:记录每日学习连续天数,保持学习节奏,断签会重置。
  • PK 竞技场:模拟匹配对战,支持中译英、英译中等多种答题模式,带段位晋升动画。
  • 徽章系统:分级可升级徽章,完成特定成就解锁,支持徽章详情查看和升级动画。
  • 每日推送:机器人气泡消息,每天推送学习提醒和趣味内容,基于种子随机保证每日不同。
  • 个人档案:汇总学习数据、等级、徽章和打卡记录的个人主页。
  • 暗色/亮色主题:一键切换深色和浅色主题,暗色主题带霓虹风格。
  • 单词评测:语音跟读评分,检测发音准确度并给出反馈。使用自部署 API 中转,目前仅 HTTP 版本,只有在微信浏览器等安全限制较低的环境下才能正常调用,API 地址不公开。
  • 沉浸模式:专注学习时隐藏导航干扰,减少视觉噪音。

接口与密码格式

文本生成

使用 OpenAI-compatible API。当前 baseUrlmodel 写在配置常量中,页面不提供自由配置入口,方便非技术用户(如父母)直接使用。

语音 (TTS) API

语音使用 有道智云 (YOUDAO) 的外部 TTS API,baseUrlhttps://openapi.youdao.com/ttsapi

💡 福利提示:有道智云目前有注册送 60 元体验金的活动,羊毛不薅白不薅。(有道智云打钱!) 为什么不用浏览器自带语音? 移动端和微信 WebView 的内置语音能力极不稳定,音色、发音质量和可用性都很差。使用靠谱的外部语音 API 才能保证可复听、可缓存的优质体验。

密码格式

右上角密码框输入的是一整串组合密码,格式如下:

sk-xxxx-yyyy

解析规则

  • 前半部分 sk-xxxx 会作为 OpenAI-compatible API Key。
  • 最后一段 yyyy 会作为有道语音 API Secret。
  • README 不提供真实密钥,请自行从对应服务商后台获取。

当前局限与优化空间 (UI/UX)

目前的 UI/UX 依然过分注重功能而非体验。 老实说,目前的上线版本优先为了"体感良好"做了大量的兼容性优化(比如到处打补丁的音频缓存、移动端长按保存等),但在美观度和交互直觉上还有很大提升空间。

更重要的是,如何真正提高老妈的学习积极性、打破目前相对单一的学习模式,是后续迭代的核心痛点。


部署与合规思路

当前版本是前端应用,main 分支使用 build.js 构建为单文件 dist.html,可直接打开或上传到任意静态网页托管服务。classic 分支的 v1+.html 同样可以直接使用。

关于静态 HTML 的优势,懂的都懂 —— 正是在于"简审查"。 如果你需要探索国内静态分发,可以参考 web2html.com 这类静态部署/网页封装方式,作为一种免人工审核的静态部署思路。

📬 欢迎提案:如果你有更好的部署方案(例如基于 React 的快捷部署、国内访问良好、且能做到零审查/机器快审的平台),强烈欢迎在 Issues 中提供建议!


本地数据

应用使用 localStorage 保存当前课程、仓库主题、复习表达、每日一记抽取结果、生成缓存、游戏化数据(XP、等级、徽章、打卡)和组合密码。更换浏览器或清理缓存后数据会丢失,本版本默认不上传任何数据。


分支说明

分支 说明
main 游戏化版本(ESM 拆分),带 XP、等级、竞技场、徽章等激励系统
classic 经典版本,单文件 v1+.html,功能完整但无游戏化元素

开源协议

本项目定位为 MIT License 开源项目。你可以基于它学习、修改、部署和二次开发。


Roadmap

  • 激发兴趣(核心):探索更多能调动父母学习积极性的趣味模式。
  • 多主题支持:同步提供古诗词、中老年英语、亲子阅读和生活照护表达等主题。
  • 架构重构:使用 DDD 思路拆分领域配置,让主题、提示词、词库和 UI 文案可以一键切换。
  • 小程序生态:未来可能提供一套 html2miniprogram 的小程序模板,支持一键将 HTML 应用转换为微信小程序。
  • 小白部署指南:增强静态部署说明,让非技术用户也能把自己的学习工具部署给家人使用。

About

一个专为中老年人学英语、带娃设计的 MIT 开源静态 SPA 应用。支持单 HTML 文件及代码拆分版,采用前端 DDD 架构与 LocalStorage 机制,纯静态调用 OpenAI 兼容模型与语音API。源于 2026 母亲节礼物,dist打包版本适配 html2web.com 国内单文件免人工审核静态部署站。

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors