Awesome English 🚀

智能英文单词学习助手 - 探索单词的意义与形态

在线体验 • 功能特性 • 快速开始 • 技术栈

✨ 功能特性

🔍 智能单词分析

输入任意英文单词，AI 将为你找到两类相关词汇：

• 意思相似 (Semantic)：语义相近的同义词，附带中文释义
• 拼写相似 (Visual)：外形相似的单词，帮助区分易混淆词汇

🎨 优雅的用户体验

• 现代化的 UI 设计，简洁直观
• 支持深色/浅色主题切换
• 响应式布局，完美适配各种设备
• 流畅的加载动画

🔊 单词发音

• 支持美式/英式发音切换
• 使用 Web Speech API，无需额外配置
• 一键朗读任意单词

⭐ 单词收藏夹

• 收藏重要单词，随时回顾
• 支持快速添加/移除收藏
• 本地存储，数据安全

🎨 画布模式

• 无限画布，自由探索单词关系
• 双击节点展开相关词汇
• 语义相似（蓝色实线）和拼写相似（橙色虚线）两种连线
• 悬停显示单词释义
• 自动保存画布状态

💾 便捷功能

• 搜索历史：自动保存搜索记录，快速回顾
• 一键复制：轻松复制搜索结果
• 自定义 API：支持配置任意 OpenAI 兼容的 API
• 智能提示：友好的错误提示和操作反馈

🚀 快速开始

环境要求

• Node.js 18+
• pnpm (推荐) / npm / yarn

本地开发

# 克隆项目
git clone https://github.com/XimilalaXiang/Explore-English.git
cd Explore-English

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

打开 http://localhost:3000 查看应用。

配置 API

1. 点击右上角 设置 按钮
2. 填入你的 API URL 和 API Key
3. 点击 获取模型列表 选择模型
4. 保存设置后即可开始使用

💡 支持 OpenAI 官方 API 及所有兼容接口

🛠 技术栈

类别	技术
框架	Next.js 16 (App Router)
UI	React 19 + TypeScript 5
样式	Tailwind CSS 4 + shadcn/ui
画布	React Flow
AI	Vercel AI SDK
部署	Vercel

📁 项目结构

Explore-English/
├── app/
│   ├── api/
│   │   └── find-words/      # 单词查询 API
│   ├── canvas/              # 画布模式页面
│   ├── settings/            # 设置页面
│   ├── layout.tsx           # 根布局
│   ├── page.tsx             # 首页
│   └── globals.css          # 全局样式
├── components/
│   ├── canvas/              # 画布相关组件
│   ├── ui/                  # shadcn/ui 组件
│   ├── theme-provider.tsx   # 主题提供者
│   └── theme-toggle.tsx     # 主题切换按钮
├── lib/
│   └── utils.ts             # 工具函数
├── public/                  # 静态资源
└── styles/                  # 额外样式

🌐 部署

项目已部署在 Vercel：https://awesome-english.vercel.app

自行部署

📄 许可证

MIT License © 2025

---

Made with ❤️ for English learners