项目简介

项目介绍

正如字面意思所说，这是一个基于本地大模型的AI聊天软件，主要分为两个部分：

• 大模型的下载与部署，这部分要封装暴露接口给前端
• AI的聊天软件，也就是前端部分，主要包括UI的设计和视觉效果，例如markdown，数学公式实时渲染还有会话管理等。

如何合作？

我们主要使用git来进行版本管理和合作。

每一个人一个分支，代码审批后在dev分支上合并，测试通过后合并到main分支上

首先我们要了解什么是git，简而言之，git是一个版本控制系统，通俗来讲，就是能让你给项目拍照，而且能看到各个照片之间区别，一旦你发现一个版本问题过多，就可以回退到上一个版本。而且可以创建分支，每个成员可以在自己的分支上开发，互不影响，最后再审批合并各个分支。

下面是git的教程：git教程,在熟悉了命令行之后可以用vscode的git功能，图形化的界面更加友好。

还有就是建议学一下markdown文档格式：markdown教程

技术栈

前端技术栈

后端技术栈

前后端通信

分工总览

成员 A — 后端核心（聊天 + 数据库）（分支: backend-a）

职责

• FastAPI 后端框架搭建
• SQLite 数据库设计与实现（原始 SQL，无 ORM）
• 聊天流式接口核心逻辑
• 会话管理 API（增删改查）
• 消息持久化、历史加载、上下文窗口

负责文件

具体任务

1. db.py — 设计 2 张表，写 CRUD 函数：

   • create_conversation(title) — 创建会话
   • get_conversations() — 列出所有会话
   • get_conversation(id) — 获取单个会话
   • delete_conversation(id) — 删除会话
   • add_message(conv_id, role, content) — 添加消息
   • get_messages(conv_id) — 获取会话所有消息
   • clear_messages(conv_id) — 清空会话消息

2. chat.py — 流式聊天接口：

   • 创建/获取会话
   • 保存用户消息
   • 加载历史消息（上下文窗口：最近 20 条）
   • 调用 B 的模型流式函数
   • 保存 AI 回复
   • 处理 Stop 中断时的部分保存
   • 新会话时发送 conversation SSE 事件

3. conversations.py — 会话管理 REST API：

   • GET /api/conversations — 列出会话
   • POST /api/conversations — 新建会话
   • GET /api/conversations/{id} — 获取会话
   • DELETE /api/conversations/{id} — 删除会话
   • GET /api/conversations/{id}/messages — 获取消息
   • DELETE /api/conversations/{id}/messages — 清空消息

与其他人的协作

---

成员 B — 后端模型（Ollama 接入）(分支: backend-b)

职责

• Ollama 本地模型接入（流式推理、模型列表）
• 系统 prompt 组装
• 消息列表构建（上下文窗口）
• 模型列表 API

负责文件

具体任务

1. llm.py — LLM Provider（纯函数）：

   • list_ollama_models() — 列出 Ollama 可用模型
   • stream_ollama(model, messages) — Ollama 流式推理，async generator
   • build_system_prompt(base) — 组装系统 prompt
   • build_messages(system_prompt, history, user_message) — 组装消息列表（最近 20 条历史）

2. models.py — 模型列表 API：

   • GET /api/models — 返回 [{id, name, provider, local}]
   • Ollama 未运行时返回默认模型

与其他人的协作

---

成员 C — 前端核心（布局 + 聊天 + 状态管理）(分支: frontend-a)

职责

• React 项目搭建（Vite + TypeScript + Tailwind）
• 整体布局（侧边栏 + 聊天区 + 输入框 + 顶栏）
• SSE 流式消费者（fetch + ReadableStream，最关键的前端代码）
• Zustand 状态管理（聊天状态、会话状态）
• 聊天消息渲染、输入框交互
• 会话切换、历史加载

负责文件

具体任务

1. App.tsx — 主布局：

   • 左侧侧边栏 + 右侧聊天区
   • 顶栏：标题 + 连接状态 + 留位置给 D 的模型选择器
   • 聊天区：消息列表 + 空状态
   • 底部：输入框

2. useStreamChat.ts — SSE 消费者（最关键）：

   • 用 fetch POST（不是 EventSource）
   • ReadableStream reader 读取响应体
   • 按 \n\n 分割 SSE 事件
   • 解析 data: {json} 行
   • 处理 token/done/error/conversation 事件
   • AbortController 支持停止生成

3. chatStore.ts — 聊天状态：

   • addUserMessage(content) — 添加用户消息
   • addAssistantMessage() — 添加空 AI 消息（开始流式）
   • appendToLastMessage(token) — 追加 token
   • finishLastMessage() — 结束流式
   • clearMessages() — 清屏
   • loadMessages(msgs) — 加载历史消息

4. conversationStore.ts — 会话状态：

   • fetchConversations() — 拉取会话列表
   • createConversation() — 新建会话
   • selectConversation(id) — 切换会话（加载历史消息）
   • deleteConversation(id) — 删除会话

5. ChatInput.tsx — 输入框：

   • textarea 自动增高
   • Enter 发送，Shift+Enter 换行
   • 发送/停止/清屏按钮状态切换

与其他人的协作

---

成员 D — 前端功能（Markdown + 模型选择 + UI 打磨）(分支: frontend-b)

职责

• Markdown 渲染（react-markdown + 代码高亮 + 代码块复制
• 模型选择器下拉组件
• 复制按钮组件
• 全局样式与主题配色
• UI 视觉打磨（空状态、加载动画、焦点效果、快捷键）

负责文件

具体任务

1. MarkdownRenderer.tsx：

   • 安装 react-markdown + remark-gfm + rehype-highlight + highlight.js
   • 代码块：深色背景 + 复制按钮（useRef + textContent）
   • 行内代码：蓝色高亮
   • 表格：边框 + 横向滚动
   • 链接：新窗口打开

2. ModelSelector.tsx：

   • GET /api/models 获取模型列表
   • 下拉选择器，本地模型显示绿点
   • Ollama 未运行时显示提示
   • 点击外部关闭下拉
   • 加载后自动选中第一个模型

3. CopyButton.tsx：

   • 复制到剪贴板，显示 “Copied!” 2 秒
   • clipboard 失败静默处理

4. UI 打磨：

   • 深色主题配色（bg-primary #0B1020 等）
   • 空状态图标 + 欢迎文案
   • 输入框焦点光晕
   • 自定义滚动条

与其他人的协作