Skip to content

billzi2016/FlashcardsAPP

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Flashcards

项目简介

Flashcards 是一个基于 AI 的记忆卡片学习系统。用户输入要学习的主题后,后端调用模型生成由浅入深的 4 选项选择题;用户完成答题后,可以继续追问、要求解释,再进入下一题。

当前仓库已经进入前后端一起推进的阶段。目标是把 Django、Django Ninja、PostgreSQL、Docker Compose、Vue、Pinia 和 Markdown 协议串成一个能继续扩展的学习系统骨架。

当前访问地址

本地开发默认地址:

  • 前端:http://localhost:4387
  • 后端 API:http://localhost:8765/api/sessions
  • 页面右上角:flashcards v0.1.3

如果你通过 Docker Compose 启动项目,优先从前端地址进入,再由前端代理访问后端 /api

快速开始

  1. 复制环境变量模板:
cp .env.example .env
  1. 按需修改 .env 中的数据库、Ollama 和端口配置。

  2. 启动开发环境:

docker compose up --build -d
  1. 打开前端页面:
http://localhost:4387
  1. 查看服务状态:
docker compose ps

当前技术栈

  • 前端:Vue 3、Pinia、Vue Router、Vite、splitpanes、markdown-it
  • 后端:Django 5、Django Ninja
  • 数据库:PostgreSQL 16
  • 编排:Docker Compose
  • AI 接口:Ollama client 封装
  • Token 计数:tiktoken cl100k_base
  • 测试:Django TestCase

当前目录概览

Flashcards/
├── .docker/
│   └── postgres/
├── backend/
│   ├── manage.py
│   ├── requirements/
│   ├── config/
│   └── apps/
│       └── cards/
├── frontend/
│   ├── package.json
│   ├── src/
│   └── Dockerfile
├── docs/
│   └── prd/
├── .env
├── .env.example
├── .gitignore
├── docker-compose.yml
└── README.md

当前已实现内容

后端已经落地:

  • Django 项目骨架
  • cards app
  • Django ORM 模型
  • Django Ninja API 路由
  • Markdown 固定协议解析
  • 会话创建、历史列表、pin、delete
  • 消息发送与继续出题
  • 答题提交
  • 会话 summary 生成
  • 上下文构造与 token 计数
  • Ollama client 封装
  • Docker Compose / PostgreSQL 持久化配置
  • 后端测试文件

前端已经落地:

  • Vue 3 + Pinia + Vue Router 骨架
  • ChatGPT 风格的双栏学习界面
  • 右上角版本号和 Ollama health 指示灯
  • 左侧历史记录区
  • 右侧聊天 / 题目 / 输入区
  • Markdown 渲染
  • 题目作答交互
  • ghost draft 灰字提示,支持直接发送或点击编辑
  • 可拖拽布局
  • 基于 /api 的前后端对接

联调已经验证:

  • docker compose up --build -d 可以成功启动
  • postgres 健康检查通过
  • backend8765 正常响应
  • frontend4387 正常响应
  • 前端代理访问 /api/sessions 已返回 JSON

环境变量

根目录使用两个文件:

  • .env:本地开发真实配置
  • .env.example:示例模板

主要变量:

  • DJANGO_SECRET_KEY
  • DJANGO_DEBUG
  • DJANGO_ALLOWED_HOSTS
  • DJANGO_PORT
  • FRONTEND_PORT
  • POSTGRES_DB
  • POSTGRES_USER
  • POSTGRES_PASSWORD
  • POSTGRES_HOST
  • POSTGRES_PORT
  • OLLAMA_BASE_URL
  • OLLAMA_MODEL
  • OLLAMA_USE_STUB
  • OLLAMA_TIMEOUT
  • OLLAMA_NUM_CTX
  • APP_LOG_DIR

端口说明

Django 后端默认使用:

8765

这样可以避开本机常见已占用端口,例如 80008080

前端默认使用:

4387

这个端口也刻意避开了常见开发端口,减少与其他项目冲突。

数据持久化

PostgreSQL 数据目录挂载到:

.docker/postgres

这样删除容器后,本地开发数据仍可保留。

Docker Compose

当前 docker-compose.yml 编排三个服务:

  • postgres
  • backend
  • frontend

容器启动职责:

  1. postgres 提供数据库
  2. backend 等数据库健康后执行 migrate 并启动 Django
  3. frontend 启动 Vite 开发服务器,并通过代理访问后端 /api

后端会把调试日志写到:

.docker/logs

启动命令:

docker compose up --build -d

查看状态:

docker compose ps

停止服务:

docker compose down

API 概览

当前 API 基于 /api

  • GET /api/health/ollama
  • POST /api/sessions
  • GET /api/sessions
  • GET /api/sessions/{session_id}
  • PATCH /api/sessions/{session_id}
  • DELETE /api/sessions/{session_id}
  • POST /api/sessions/{session_id}/messages
  • POST /api/sessions/{session_id}/cards/{card_id}/answer
  • POST /api/sessions/{session_id}/summary

接口契约见:

AI 输出协议

后端要求模型输出固定 Markdown,不使用 JSON 作为主协议。当前支持:

  • # 记忆卡片
  • # 学习解释
  • # 会话摘要

后端再根据固定标题解析结构化字段。

这样做是为了避免长文本、多段解释、代码块场景下 JSON 容易崩溃的问题。

Ollama 接入说明

当前后端已经接上真实 Ollama 请求路径,同时保留 stub 回退。

行为规则:

  • OLLAMA_USE_STUB=1 时,后端直接走 stub,适合离线开发或前端联调
  • OLLAMA_USE_STUB=0 时,后端会请求 OLLAMA_BASE_URL/api/generate
  • 如果真实请求失败,当前实现仍会回退到 stub,避免整条学习链路直接报废
  • 解释型追问接口支持流式渲染,失败时会在前端显示重试状态
  • 右上角 health 指示灯会通过 GET /api/health/ollama 判断模型是否可达、目标模型是否存在

当前默认模型名:

gpt-oss:120b

上下文设计

主程序上下文设计保持:

128k

当前后端使用:

  • tiktoken
  • cl100k_base
  • OLLAMA_NUM_CTX=131072

上下文构造目标不是根据你机器当前临时开了多少上下文去降级产品设计,而是始终按主设计保留:

  • 最大上下文:128000
  • 裁剪前保留阈值:100000

即使你本机当前 Ollama 实例暂时只开 64k,主程序设计仍然保持 128k

调试日志

真实 Ollama 与解析失败调试信息会写入:

.docker/logs

当前包含:

  • ollama/ 记录 health 检查、真实 generate 请求和 fallback 情况
  • parser/ 记录 Markdown 解析失败时的原始返回、错误原因和关联日志路径

测试

当前已经写入这些测试文件:

  • backend/apps/cards/tests/test_markdown_parser.py
  • backend/apps/cards/tests/test_context_builder.py
  • backend/apps/cards/tests/test_api.py
  • backend/apps/cards/tests/test_services.py
  • backend/apps/cards/tests/test_prompt_builder.py

后端测试已经用 python manage.py test 实际跑过一遍并通过。

前端构建也已经验证通过:

cd frontend
npm run build

Demo

下面这些截图都来自当前仓库的 demo/ 目录。

1. 首页与双栏布局

Demo 01

2. 初始出题

Demo 02

3. 继续学习推荐

Demo 03

4. 历史会话侧栏

Demo 04

5. 追问与解释流

Demo 05

6. 题目详情与选项交互

Demo 06

7. 答题反馈

Demo 07

8. 会话推进

Demo 08

9. Markdown 渲染效果

Demo 09

10. 难度调节

Demo 10

11. 继续出题与追问分离

Demo 11

12. 新建对话

Demo 12

13. 版本号与健康指示

Demo 13

14. 当前完整页面状态

Demo 14

当前边界

这版实现是第一阶段全栈骨架,不是最终版。

当前还没做:

  • 用户鉴权
  • 生产部署

换句话说,现在是“全栈骨架 + Docker 联调 + Ollama 接线 + 前后端主流程”已经完成,但还没有进入生产化阶段。

开发原则

当前项目按这些原则实现:

  • ORM 优先
  • 业务逻辑集中到 service 层
  • Markdown 解析集中封装
  • 不自己造轮子
  • DRY / SOLID

下一步建议

后续建议顺序:

  1. 提交这次 Ollama 接线改动
  2. 在合适时机把 OLLAMA_USE_STUB=0,做一次真实模型联调验证
  3. 补前端测试和构建校验
  4. 优化会话详情里答题记录的持久化展示
  5. 再考虑生产部署和鉴权

About

AI flashcards app with Django, Vue, PostgreSQL, and Ollama. It generates multiple-choice study cards and supports follow-up learning chat.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors