f(x)=ax²+bx+c ∇×E = -∂B/∂t ∫₀^∞ e^(-x²) dx = √π/2 σ(z) = 1/(1+e^(-z)) ∂L/∂w = ∑(ŷ-y)x P(A|B) = P(B|A)P(A)/P(B)

技术详解

深入剖析 MathMate 的技术选型、设计思路、核心路径、迭代过程与开源参考。从 Flutter 原生可视化引擎到多模型协作 AI 流水线,完整呈现技术全貌。

E = mc²   ∫ sin(x)dx = -cos(x)+C   ∑(n=0→∞) xⁿ/n! = eˣ   det(A) = |a₁₁ a₁₂; a₂₁ a₂₂|   ∀ε>0 ∃δ>0   lim(n→∞) (1+1/n)ⁿ = e
Δ = b²-4ac   cos²θ+sin²θ = 1   ∮ F·ds = ∫∫ (∇×F)·dA   aⁿ·aᵐ = aⁿ⁺ᵐ   log(ab) = log(a)+log(b)   ∑(k=1→n) k = n(n+1)/2
dy/dx = lim(Δx→0) [f(x+Δx)-f(x)]/Δx   |x| = √(x²)   C(n,r) = n!/(r!(n-r)!)   eⁱᶿ = cosθ+i·sinθ
∇f = (∂f/∂x, ∂f/∂y, ∂f/∂z)   ∫∫∫ ρ dV = M   P(A∪B) = P(A)+P(B)-P(A∩B)   λ = h/p   S = k·ln(W)

设计思路与核心决策

每一个技术选型背后都有明确的取舍逻辑

🎯 Flutter 原生优先

选择 Flutter 作为唯一前端框架,而非 React Native 或原生开发。核心考量:Canvas 绘图能力是几何可视化引擎的基石,Flutter 的 CustomPaint + Canvas API 提供了 60fps 的原生渲染性能,无需 WebView 中间层。一套代码覆盖 Android、iOS、Web、桌面全平台。

🧩 无外部状态管理

不引入 Provider、Riverpod、Bloc 等状态管理框架。全部使用 StatefulWidget + setState。理由:MathMate 的页面间数据流是单向的(拍照 → 识别 → 解题 → 展示),没有复杂的全局状态共享需求。减少依赖、降低复杂度、提升可维护性。

🔗 自研可视化引擎

拒绝使用现成图表库,从零构建 GeometryPainter。原因:通用图表库无法理解数学语义(如"动点在圆上滑动"的约束关系)。自研引擎实现了 GeometryJSON 协议——AI 输出结构化 JSON,引擎解析并渲染为交互式几何图形,形成"语义-图形"的完整闭环。

🤖 多模型协作流水线

没有将所有 AI 任务绑定到单一模型,而是根据各模型的优势分配任务:DeepSeek 负责数学推理(解题+可视化),火山引擎 负责多模态 OCR(手写/印刷识别),Qwen-PLUS 负责流式对话。每个模型在各自领域做到最优,整体效果超越单模型方案。

💾 纯本地数据架构

不依赖云数据库或后端服务器。全部数据存储在本地:Hive 用于结构化数据(搜题历史、对话记录),SharedPreferences 用于键值偏好(主题、年级、用户设置)。优势:零服务器成本、用户数据完全本地化、离线可用、隐私安全。

核心技术路径

从拍照到交互式可视化的三阶段 AI 流水线

1

多模态 OCR 识别

用户拍照后,图片经过裁剪与预处理(自动透视校正、自适应锐化、背景二值化),送入火山引擎多模态 API。AI 将手写或印刷的数学公式、文字识别为结构化的 Markdown + LaTeX 文本。SafeJsonParser 容错处理 AI 返回的非标准 JSON(如 InfinityNaN)。

Volc Engine API OcrService SafeJsonParser 图像预处理管线
2

AI 分步解题推理

OCR 识别的数学文本送入 DeepSeek API,配合专门设计的解题 System Prompt(solve_prompt.dart)。AI 执行分步推理,输出完整的 Markdown 解题过程,包含 LaTeX 公式、步骤说明和最终答案。支持小学到大学各难度层级的数学题。

DeepSeek API SolverService Chain-of-Thought 推理 专用 Prompt 模板
3

GeometryJSON 可视化生成与渲染

这是 MathMate 的技术核心。AI 将题目中的几何语义转化为结构化的 GeometryJSON 协议——定义视口(viewport)、几何元素(点、线、圆、椭圆、双曲线、抛物线)、动态约束(动点在曲线上滑动)。GeometryValidator 校验 JSON 合法性,GeometryPainter 使用纯 Dart Canvas 渲染为 60fps 交互式图形,支持手势拖拽动点。

GeometryJSON 协议 VisualizationService GeometryPainter GeometryValidator Constraint Solver GestureDetector
// GeometryJSON 协议示例 — AI 输出的结构化几何描述
{ "viewport": { "xMin": -5, "xMax": 5, "yMin": -5, "yMax": 5 }, "elements": [ { "type": "point", "id": "A", "x": -3, "y": 0 }, { "type": "point", "id": "B", "x": 3, "y": 0 }, { "type": "circle", "id": "c1", "cx": 0, "cy": 0, "r": 3 }, { "type": "dynamic_point", "id": "P", "constraint": { "target": "c1", "param": 0.785 } // 动点P约束在圆c1上,可拖拽交互 } ] }

自研可视化引擎架构

纯 Dart + Flutter Canvas,零 WebView 依赖,原生 60fps

📐 数据模型层

  • 抽象 GeoElement 基类
  • GeoPoint — 静态点(固定坐标)
  • GeoCircle — 圆(圆心+半径)
  • DynamicPoint — 动点(含约束目标 ID + 参数化位置)
  • 支持:线、椭圆、双曲线、抛物线

🔄 约束求解器

  • 用户拖拽动点时触发约束求解
  • 计算动点在约束目标上的最近合法位置
  • 投影到圆弧 / 线段 / 曲线
  • 纯 Dart 数学计算,无外部依赖
  • 实时 setState 触发重绘

🎨 交互式渲染器

  • CustomPaint + GestureDetector
  • 触摸查找最近动点 → 拖拽 → 约束求解 → 重绘
  • 坐标系自动缩放适配 viewport
  • 60fps 原生帧率
  • 支持缩放、平移手势

可视化引擎四阶段实现路径

Phase 1

JSON 协议定义

设计 LLM 友好的 GeometryJSON Schema,包含 viewport、elements、constraint 语义

Phase 2

Prompt 工程

注入"几何翻译家"System Prompt,强制 AI 输出严格格式的 GeometryJSON

Phase 3

Flutter 引擎实现

CustomPainter 渲染 + GestureDetector 交互 + 约束求解器

Phase 4

UI/UX 打磨

流式渲染、触觉反馈、实时 LaTeX 标签、异常降级处理

外源库引用清单

所有第三方依赖均经过选型评估,按需引入

核心框架

库名版本用途
Flutter SDKDart ^3.11.3跨平台 UI 框架,Android / iOS / Web / Desktop 全平台构建
flutter_localizationsSDK 内置多语言本地化支持(zh_CN / en_US)
cupertino_icons^1.0.8iOS 风格图标集(CupertinoIcons)
http^1.1.0HTTP 客户端,调用 DeepSeek / 火山引擎 / Qwen API
path^1.9.1跨平台路径操作工具(文件路径拼接、解析)
flutter_dotenv^5.2.1.env 文件加载 API 密钥,安全隔离敏感配置

AI 与数据处理

库名版本用途
flutter_math_fork^0.7.2+1LaTeX / MathML 数学公式渲染(计划迁移至 flutter_tex)
flutter_markdown_plus^1.0.7Markdown 内容渲染,支持代码高亮和 LaTeX 行内公式
image^4.5.4图像处理库,用于拍照后的裁剪、缩放、预处理

数据存储与持久化

库名版本用途
hive^2.2.3高性能本地 NoSQL 数据库,存储搜题历史与 AI 对话记录(v2.2.0 从 Isar 迁移)
hive_flutter^1.1.0Hive Flutter 绑定,提供 Widgets 集成
shared_preferences^2.5.3键值对持久化,存储用户主题/年级/设置等偏好
path_provider^2.1.5跨平台文件路径获取,数据存储目录管理

UI 组件与交互

库名版本用途
webview_flutter^4.10.0内嵌 WebView,用于 GeoGebra 数学工具箱、KaTeX 公式可视化、B 站视频播放
flutter_quill^11.5.0富文本编辑器,支持 LaTeX 公式插入、图片、格式化
image_picker^1.0.0相机拍照与相册选取,拍照搜题入口
cached_network_image^3.4.1网络图片缓存加载,视频缩略图等
pdf^3.11.3PDF 文档生成,支持 KaTeX 公式到 PDF 导出
file_picker^8.0.0文件选择器,PDF 导入等
url_launcher^6.3.1打开外部链接(B 站视频、浏览器等)
share_plus^10.1.4系统分享功能,分享解题结果
permission_handler^11.3.1运行时权限管理(相机、存储等)
device_info_plus^11.0.0设备信息获取,生成唯一设备 ID
open_file^3.5.10打开本地文件(PDF 等)

开发工具链

库名版本用途
build_runner^2.4.13Dart 代码生成工具,为 Hive 生成序列化代码
hive_generator^2.0.1Hive TypeAdapter 代码生成器
flutter_launcher_icons^0.14.2自动生成多平台应用图标
flutter_lints^6.0.0Flutter 官方 lint 规则集

内嵌第三方资源

资源类型用途
GeoGebra Web3D离线嵌入 · GPL v3数学可视化工具套件(科学计算器、几何画板、函数绘图、3D 视图、尺规作图、概率模型)。内含 canvas2pdf、gifshot、whammy、webfont.js 等子库
KaTeX离线嵌入 · MIT高速 LaTeX 数学公式渲染,用于 WebView 中的公式可视化与 PDF 导出
PDF.js离线嵌入 · Apache 2.0Mozilla 出品的 PDF 渲染引擎,用于应用内 PDF 查看与标注
SimHei 字体离线嵌入中文黑体字体,用于 LaTeX 编译器生成含中文的 PDF 文档

CDN 运行时依赖

库名协议用途
Plotly.js v2.27.0MIT交互式数据可视化图表,用于手写笔记中公式分析的 WebView 可视化
Chart.jsMITHTML5 Canvas 图表库,用于手写笔记中的图表渲染

外部 API 服务

服务接入方式用途
Bilibili API公共接口获取视频信息(标题、封面、播放量),用于视频推荐模块的元数据展示
Bilibili Playeriframe 嵌入WebView 内嵌 B 站播放器,实现应用内视频学习
MathMate Web API Proxy自建代理Node.js 反向代理服务(deploy/proxy_server.js),运行于 mathmate.top 服务器。提供 /api/deepseek/api/vivo/api/volc 三条代理路由,将 Flutter Web 客户端请求转发至上游 AI API,在服务端注入真实 API Key,实现密钥安全隔离。Nginx 配置 120s 超时以适配 AI 长推理

部署架构

🌐 Web 端部署方案

  • 前端:Flutter Web 构建静态资源,部署至 /var/www/mathmate,Nginx SPA 模式托管
  • API 代理:Node.js (deploy/proxy_server.js) 运行于 127.0.0.1:3001,PM2 守护进程管理
  • 密钥隔离:Web 构建使用 .env.web(API Key 设为 web-proxy,URL 指向 mathmate.top/api/*),真实密钥仅存储在服务端 .env.server
  • 反向代理:Nginx 将 /api/* 请求转发至 Node.js,/* 静态资源由 Nginx 直接服务(30 天缓存)
  • HTTPS:Certbot 自动签发 Let's Encrypt 证书

AI 模型选型与依据

三大模型各司其职,协同覆盖 OCR / 推理 / 对话全链路

🧠

DeepSeek

核心推理引擎
模型
deepseek-v4-flash (DeepSeek-V4) · 可切换 deepseek-chat
核心任务
数学解题 + 几何可视化 JSON 生成 + OCR 识别
选型依据
数学推理能力在开源模型中领先;MATH 基准 51.7%;API 成本极低(~0.02元/千token);中文理解能力强
调用方式
同步 HTTP 请求,超时 60 秒
服务模块
OcrService SolverService VisualizationService
👁️

火山引擎(豆包)

多模态 AI
模型
doubao-seed-2-0-pro-260215(通用推理)
doubao-seed-1-8-251228(OCR 专用,通过 VOLC_OCR_MODEL_ID 独立配置)
核心任务
拍照 OCR 识别 + 手写识别 + 公式分析 + 数学识别
选型依据
中文数学公式识别准确率高;支持手写体识别;多模态理解能力强(图片→结构化文本);豆包系列模型中文语境深度优化
调用方式
HTTP API,图片 Base64 编码上传;OCR 任务独立配置轻量模型,实现推理/OCR 按需分流
服务模块
VolcAiClientService HandwritingOcrService FormulaAnalysisService MathRecognizer
💬

Qwen(通义千问)

流式对话 + 推荐引擎
模型
qwen3.6-flash-2026-04-16(默认)· 可切换 qwen-plus / qwen-turbo / qwen-max
核心任务
AI 数学辅导对话 + 视频推荐 + 搜题历史标题生成
选型依据
低延迟流式输出(SSE);OpenAI 兼容 API 接口;中文对话自然流畅;通过阿里云 DashScope 调用,稳定性高
调用方式
Server-Sent Events (SSE) 流式响应
服务模块
ChatStreamService VivoChatService VideoRecommendationService HistoryRepository
服务模块AI 模型输入输出
OcrService火山引擎 / DeepSeek拍照图片 (Base64)Markdown + LaTeX 文本
SolverServiceDeepSeek数学题文本 + 解题 Prompt分步解题 Markdown
VisualizationServiceDeepSeek解题结果 + 可视化 PromptGeometryJSON
ChatStreamServiceQwen-PLUS多轮对话上下文SSE 流式 Markdown
HandwritingOcrService火山引擎手写笔迹图片LaTeX 公式文本
FormulaAnalysisService火山引擎单个数学公式公式分析 + 解释
VideoRecommendationServiceQwen (DashScope)搜索历史 + 年级B 站视频推荐列表
HistoryRepositoryQwen (DashScope)搜题结果文本自动生成历史标题
MathRecognizer火山引擎数学图片公式识别 + 结构化文本

版本迭代历程

13 个版本的持续演进,从核心流水线到全平台支持

v1.1.0
2026-05-02
GeoGebra 工具箱集成
集成 GeoGebra 3D 计算器、科学计算器、概率计算器,新增 KaTeX 公式渲染资源。更新高中数学核心考点视频列表。
GeoGebraKaTeX
v1.2.0
2026-05-02 ~ 05-06
几何可视化引擎 + 新手引导
新增几何可视化模块与交互控制器、视频资源管理模块、新手引导页面。优化笔记编辑器和聊天交互。移除 Supabase 依赖。
VisualizationController移除 Supabase
v1.3.0
2026-05-02
手写笔记与 OCR 识别
全新手写笔记功能:多种纸张背景(空白/横线/网格)、笔迹平滑、橡皮擦、多色画笔。新增手写 OCR 识别服务,自动将笔迹转为文本。+1,271 行新增。
手写笔记Catmull-RomHandwritingOcr
v1.4.0
2026-05-02
用户系统与公式分析
新增用户资料系统(头像、昵称、个性签名)、公式分析服务(AI 识别并解释数学公式)。优化账户设置与主题切换。+1,135 行新增。
UserProfileFormulaAnalysis
v1.5.0
2026-05-03
KaTeX PDF 服务重构
重构 KaTeX PDF 服务以支持更好的数学公式渲染。更新 Flutter 依赖包,改进跨平台插件支持(Windows/macOS/Linux)。
KaTeX PDF跨平台优化
v1.6.0
2026-05-03
PDF 查看器 + 手写笔记增强
新增 PDF 查看页面,支持查看数学文档。大幅增强手写笔记编辑器功能和流畅度。优化主题配置。
PDF Viewer手写流畅度
v1.7.0
2026-05-03
UI/UX 全面优化
增强 PDF 查看器功能,改善手写笔记编辑器流畅度,优化聊天页面交互体验,修复多个 UI/UX 问题。
多问题修复UX 优化
v1.8.0
2026-05-05
架构瘦身与视频系统
新增视频资源管理模块和教程页面。完全移除 Supabase 依赖。更新跨平台构建配置。改进视频推荐算法。标准化 Changelog 格式。
视频推荐移除 Supabase
v1.9.0
2026-05-05
性能与搜索优化
视觉设计改进,小屏幕移动端适配优化。新增搜索功能。优化应用启动性能和加载时间。重构项目结构以提升可维护性。
启动优化搜索功能
v2.1.0
2026-05-05
外部 API 集成
新增外部 API 服务集成。添加 device_info_plus 实现设备 ID 初始化(Android/iOS 设备识别)。移除裁剪选框大小限制。
Device ID裁剪优化
v2.2.0
2026-05-23
数据库迁移 + Web 平台支持(重大更新)
从 Isar 迁移到 Hive 数据库以提升跨平台兼容性。新增 Web 平台完整支持:Web 设备 ID 生成、IO/Web 适配层、Repository 工厂模式。移除 dart:io 依赖以兼容 Web。
Isar → HiveWeb 平台IO/Web 双适配
v2.2.1
2026-05-25
统一日志系统 + 全局优化
合并远程仓库更新。新增多平台日志系统(app_logger, logger_io, logger_web)。全面优化视频推荐、PDF 查看器、手写识别、裁剪页面、AI 服务等模块。
日志系统全面优化

测试数据与性能指标

基于实际使用测试的关键性能数据

97
动态可视化评分
vs 传统搜题软件 32 分
94
解题逻辑深度
vs 传统搜题软件 48 分
91
OCR 识别速度
毫秒级图片预处理 + AI 识别
60fps
可视化引擎帧率
纯 Dart Canvas 原生渲染
96
即时答疑能力
vs 在线教育 52 / 通用大模型 85
92
数学符号严谨性
vs 通用大模型 72
3
AI 模型协作数量
DeepSeek + 火山引擎 + Qwen
6+
数学工具集成
GeoGebra 全套离线工具

竞品对比关键指标

对比维度MathMate传统搜题在线教育通用大模型
即时答疑96725285
数学可视化97355820
个性化学习88607655
成本性价比92784282
解题逻辑深度94487165
用户体验89707476
动态几何画板9522
专用可视化引擎9718

开源参考与借鉴

学习并参考的优秀开源项目,推动 MathMate 技术演进

🔬 ToRA

Microsoft Research

工具集成推理(Tool-integrated Reasoning)。GSM8K 84.3%,MATH 51.0%。通过代码执行与外部工具协作增强数学推理。为 MathMate 的未来"工具增强推理"方向提供参考。

🧮 DeepSeek-Math

DeepSeek AI

DeepSeek 数学推理大模型。MATH 基准 51.7%。工具使用 + Chain-of-Thought 推理。直接启发了 MathMate 选择 DeepSeek 作为核心推理引擎的技术决策。

📐 Mather

Community

全学科数学 Web 应用。包含知识库、离线求解、LaTeX 编辑器。其知识库架构和 API 设计为 MathMate 的知识图谱规划提供了架构参考。

✍️ AutoScaler

South China University of Technology

手写数学表达式识别。基于深度学习,从 BTTR 改进而来。为 MathMate 的手写笔记 OCR 识别模块提供了算法参考。

📚 awesome-math

Community

精选数学学习资源合集,覆盖数学所有分支。为 MathMate 的分级视频推荐和知识点体系提供了内容结构参考。

📐 GeoGebra

Open Source (GPL)

开源动态数学软件。MathMate 将其 Web3D 版本离线嵌入 WebView,提供科学计算器、几何画板、函数绘图、3D 视图、尺规作图、概率模型六大数学工具。

💬 NextChat (ChatGPT-Next-Web)

ChatGPTNextWeb · MIT License

一键部署的私人 AI 对话 Web 应用,支持 GPT-4 / Claude / Gemini 等 15+ 模型提供商。MathMate 借鉴了其流式对话 UI 设计、Markdown + LaTeX 渲染方案和多模型切换机制,应用于蓝心 AI 助手模块。

计划集成的新技术

flutter_tex

优先级:最高

完全离线的 LaTeX 渲染(MathJax),Math2SVG 纯 Flutter 渲染无需 WebView。计划替代 flutter_math_fork。

flutter_onnxruntime

优先级:高

本地 AI 模型推理,支持 GPU 加速(CUDA/TensorRT/CoreML/NNAPI)。为离线 OCR 和推理铺路。

Cristalyse

优先级:最高

Grammar of Graphics API,60fps 原生 Flutter 动画图表。计划补充/替代 GeoGebra 用于 2D 可视化。

three_d_graph

优先级:中

3D 数学图形渲染(XYZ 坐标系),数学函数定义形状。用于 3D 几何可视化增强。