Skip to Content
🚀 Drubase One v1.1 - 基于 Drupal 11 的多租户后端即服务平台
Docs前端应用TuyuX - AI 英语词汇学习📚 TuyuX — AI 驱动的沉浸式英语词汇学习应用

📚 TuyuX — AI 驱动的沉浸式英语词汇学习应用

Tip

✅ 已完成 Supabase → Drubase One 迁移

TuyuX 现已采用 Drubase One 作为后端服务，实现完全自托管的 BaaS 架构，拥有更强的数据掌控力和可扩展性。

🎓 起点：用相机学英语的新方式

语言学习的痛点在于——缺乏真实场景的词汇记忆。

传统的背单词 App 让你在屏幕上看着脱离语境的单词表，死记硬背，枯燥乏味。而 TuyuX 提出了一个不同的思路：

“如果你能用手机拍下周围的任何物体，就能立即学会它的英文表达呢？”

于是，TuyuX 诞生了——一个基于 AI 图像识别的沉浸式英语词汇学习应用。

🚀 核心理念：在真实世界中学习

TuyuX 的核心工作流程极其简单：

  1. 📸 拍照 - 用手机相机拍摄任何物体（杯子、植物、建筑等）
  2. 🤖 AI 识别 - 应用使用 AI 视觉模型识别图像中的物体
  3. 📖 生成内容 - 自动生成双语翻译、词性、发音、例句
  4. 🎧 语音学习 - 点击单词即可听到标准发音（中英双语）
  5. 📝 场景记忆 - 与真实照片绑定，加深记忆印象

学习理念是：

“最好的词汇学习，发生在你真实接触这个物体的那一刻。”

通过将英语学习与真实生活场景结合，TuyuX 让词汇记忆变得自然、有趣、持久。

🧠 技术架构：现代化的移动应用技术栈

TuyuX 采用了现代化的跨平台移动应用技术栈，实现了流畅的用户体验和强大的 AI 功能。

📱 前端技术栈

技术作用说明
React Native跨平台框架一套代码运行在 iOS、Android、Web
Expo SDK 52开发工具链快速开发、热更新、原生功能访问
expo-router路由系统基于文件的路由，类 Next.js 体验
NativeBaseUI 组件库精美的预制组件 + Glass Morphism 设计
TypeScript类型系统类型安全，减少 Bug

🔐 后端 & 服务

服务功能说明
Drubase One自托管 BaaS 平台认证、数据库、存储、实时功能一体化方案
PostgreSQL关系型数据库存储用户数据、学习记录
Drubase File文件存储用户头像、照片存储（自托管）
Drubase Auth用户认证JWT Token 认证、Session 管理
Drubase Realtime实时功能WebSocket 实时数据同步（可选）

🤖 AI 图像识别

TuyuX 的核心是 AI 图像分析能力，支持多提供商切换：

提供商模型特点
Qwen-VL (默认)阿里通义千问视觉模型本地/远程部署，免费，中文友好
OpenAI VisionGPT-4 Vision云端 API，识别准确，需付费
自定义 API自定义模型支持任意自定义图像分析接口

切换提供商只需一行代码：

const service = ImageAnalysisService.getInstance();
service.switchProvider('openai'); // 切换到 OpenAI
service.switchProvider('qwen-vl'); // 切换回 Qwen-VL

🎯 核心功能

1️⃣ 智能图像识别

  • 📸 拍照/选图 - 支持相机拍摄和相册选择
  • 🔍 物体识别 - AI 识别图像中的多个物体
  • 🏷️ 场景理解 - 分析整体场景（室内/室外、环境类型）
  • 📝 生成摘要 - 用自然语言描述图像内容

2️⃣ 词汇学习

  • 🔤 关键词提取 - 从图像中提取核心英语词汇
  • 🌐 中英翻译 - 每个单词的中文释义
  • 📖 词性标注 - 名词、动词、形容词等
  • 💬 例句生成 - 实用的英语例句
  • 🎧 双语发音 - 中英文语音朗读

3️⃣ 用户系统

  • 👤 账户管理 - 注册、登录、个人资料
  • 🖼️ 头像上传 - 自定义用户头像（自动压缩优化）
  • 📊 学习记录 - 保存分析历史，方便复习
  • 🔐 安全认证 - 基于 Drubase One 的 JWT Token 安全认证系统

4️⃣ 性能优化

  • ⚡ 请求超时控制 - 防止长时间等待（默认 60 秒）
  • 🔄 自动重试机制 - 网络失败自动重试（指数退避）
  • 💾 结果缓存 - 相同图像不重复分析
  • 📊 性能统计 - 实时监控 API 性能

💡 技术亮点 (Tech Highlights)

1️⃣ 多 AI 提供商架构

TuyuX 采用了插件式 AI 提供商架构，通过统一的接口支持多个图像分析服务：

// 配置管理
import { apiConfig } from '../config/api';
 
// 获取当前提供商
const provider = apiConfig.getCurrentProvider();
 
// 运行时切换
apiConfig.setProvider('openai');
 
// 验证配置
const validation = apiConfig.validateCurrentConfig();

优势：

  • ✅ 无缝切换 AI 提供商
  • ✅ 支持本地和云端部署
  • ✅ 方便测试和成本优化

2️⃣ 环境变量管理

所有敏感配置通过 .env 文件管理，支持多环境：

# AI 提供商选择
EXPO_PUBLIC_IMAGE_ANALYSIS_PROVIDER=qwen-vl
 
# Qwen-VL 配置
EXPO_PUBLIC_QWEN_VL_API_URL=http://localhost:1234/v1/chat/completions
 
# OpenAI 配置（备选）
EXPO_PUBLIC_OPENAI_API_URL=https://api.openai.com/v1/chat/completions
EXPO_PUBLIC_OPENAI_API_KEY=sk-xxx
 
# 超时配置
EXPO_PUBLIC_IMAGE_ANALYSIS_TIMEOUT=60000

3️⃣ Singleton 服务模式

所有核心服务采用单例模式，确保资源共享和状态一致：

// ImageAnalysisService - 图像分析
const analyzer = ImageAnalysisService.getInstance();
 
// ProfileService - 用户管理
const profileService = ProfileService.getInstance();
 
// KeywordService - 词汇服务
const keywordService = KeywordService.getInstance();
 
// SpeechService - 语音服务
const speechService = SpeechService.getInstance();

4️⃣ 完善的认证流程

三重认证状态验证，确保安全性：

const { user, session, profile } = useAuth();
 
// 只有三者都存在才算已认证
const isAuthenticated = !!(user && session && profile);

认证流程：

  1. Drubase Auth 创建用户（JWT Token）
  2. 自动创建项目成员记录和权限
  3. 退出时清理本地和服务端 Session

5️⃣ 网络层优化

自研的网络工具库提供超时和重试支持：

import { fetchWithTimeout, fetchWithRetry } from '../utils/fetchWithTimeout';
 
// 带超时的请求
await fetchWithTimeout(url, {
  method: 'POST',
  timeout: 30000 // 30秒超时
});
 
// 带重试的请求
await fetchWithRetry(url, options, 3); // 重试3次

🏗️ 架构设计

📁 项目结构

TuyuX/
├── app/                        # Expo Router 页面
│   ├── _layout.tsx            # 根布局 + 认证路由
│   ├── (auth)/                # 认证页面（登录/注册）
│   └── (tabs)/                # 主应用页面（Tab 导航）
├── components/                # 共享 UI 组件
├── services/                  # 业务逻辑层（Singleton）
│   ├── imageAnalysis.ts      # AI 图像分析服务
│   ├── profileService.ts     # 用户管理服务
│   ├── keywordService.ts     # 词汇服务
│   └── speechService.ts      # 语音服务
├── hooks/                     # React Hooks
│   └── useAuth.tsx           # 认证 Hook
├── config/                    # 配置管理
│   └── api.ts                # API 配置管理器
├── lib/                       # 基础库
│   ├── drubase.ts            # Drubase One 客户端
│   └── logger.ts             # 日志系统
└── utils/                     # 工具函数
    ├── fetchWithTimeout.ts   # 网络请求工具
    └── networkLogger.ts      # 网络日志工具

🔄 数据流

用户拍照/选图
    ↓
ImageAnalysisService
    ↓
AI 提供商 (Qwen-VL / OpenAI / Custom)
    ↓
解析 AI 响应
    ↓
KeywordService (获取词汇详情)
    ↓
展示学习内容
    ↓
SpeechService (语音播放)

📱 应用展示

🎬 视频演示

想要快速了解 TuyuX 的完整使用流程？观看我们的视频演示，从拍照识别到词汇学习，一览无余。

🎥 完整功能演示视频

体验 TuyuX 完整的 AI 图像识别和词汇学习流程

观看视频 →

📸 应用截图

深入了解 TuyuX 的每一个界面细节，查看完整的应用截图集。

TuyuX 欢迎页TuyuX 主界面TuyuX 词汇展示TuyuX 词汇详情

查看全部截图 (8张) →

💼 意义

TuyuX 展示了如何构建一个生产级别的 AI 移动应用：

层级实现技术
🎨 UI 层React Native + NativeBaseGlass Morphism 设计
🔐 认证层Drubase AuthJWT Token + 项目级权限管理
💾 数据层PostgreSQL + Drubase One自托管 BaaS + 多租户架构
🤖 AI 层多提供商架构Qwen-VL / OpenAI / Custom
📡 网络层超时 + 重试机制生产级别的容错能力
📱 跨平台层Expo + React NativeiOS / Android / Web 三端

它证明了：

一个独立开发者，可以构建具备企业级架构的 AI 应用，并实现完全自托管的 BaaS 后端。

🎯 从 Supabase 到 Drubase One 的迁移收益

迁移到 Drubase One 后，TuyuX 获得了以下优势：

  • ✅ 完全自托管 - 数据和服务完全掌控，无第三方依赖
  • ✅ 多租户架构 - 支持项目级数据隔离，可扩展为 SaaS 服务
  • ✅ 统一后端 - 认证、数据库、文件、实时功能统一管理
  • ✅ 成本优化 - 无云服务订阅费用，仅基础设施成本
  • ✅ 灵活扩展 - 基于 Drupal 11 生态，可快速添加新功能模块
  • ✅ API 兼容 - RESTful API 与原 Supabase 风格保持一致

🧭 未来规划

TuyuX 将持续演进，计划增加以下功能：

  • 📚 词汇本 - 收藏和复习已学词汇
  • 🎯 学习统计 - 可视化学习进度
  • 🏆 成就系统 - 激励持续学习
  • 🌍 社区分享 - 分享学习照片和经验
  • 🎨 AI 生成练习 - 基于照片生成填空/选择题
  • 🔊 语音对话 - AI 对话练习口语
  • 🌐 离线模式 - 本地缓存词汇数据

更大的愿景：

  • 🧩 多语言支持 - 扩展到日语、韩语、西班牙语等
  • 🎓 教育机构版 - 为学校和培训机构定制 SaaS 版本
  • 📱 小程序版本 - 微信小程序轻量版
  • 🌐 PWA 应用 - 渐进式 Web 应用，无需安装
  • 🔌 插件生态 - 开放插件接口，支持第三方功能扩展

🌟 一句话总结

TuyuX 让英语学习回归真实生活场景，用 AI 的力量让词汇记忆变得自然而持久。

它不仅是一个学习工具，更是展示现代移动 AI 应用开发最佳实践的参考项目，同时也是 Drubase One 自托管 BaaS 平台的成功应用案例。

📖 文档导航

📱 应用展示

用 TuyuX 开启你的沉浸式英语学习之旅 🚀

Made with ❤️ by TuyuX Team

Last updated on
部署指南视频演示