16e76e1e90
- Removed old contenteditable-based MarkdownEditor component - Integrated Milkdown Crepe with LaTeX (KaTeX) rendering support - Simplified inline suggestion plugin using ProseMirror decorations - Removed debug logging and unused components (HelloWorld, plan files) - Increased debounce from 150ms to 500ms for better performance - Fixed SSE JSON serialization in backend main.py
LLM in Text - 智能写作助手
基于 Vue3 和 FastAPI 的智能写作助手，实现类似 GitHub Copilot 的 inline suggestions（行内建议）功能。
项目概述
本项目是一个全屏 Markdown 编辑器，集成了大语言模型（LLM）的智能补全功能。当用户输入时，系统会根据上下文实时提供文本补全建议，用户可以通过 Tab 键接受建议或点击建议文本直接插入。
技术栈
前端
- Vue 3 - 渐进式 JavaScript 框架
- Vite - 下一代前端构建工具
- Milkdown - 基于 ProseMirror 的 WYSIWYG Markdown 编辑器
- Pinia - Vue 状态管理
- Axios - HTTP 客户端
后端
- FastAPI - 现代化的 Python Web 框架
- OpenAI API - 大语言模型接口
- Ollama - 本地 LLM 服务支持
核心功能
1. 全屏 Markdown 编辑器
- 基于 Milkdown Crepe 的所见即所得编辑体验
- 支持完整的 Markdown 语法
- 代码块高亮、图片粘贴等功能
- 上传/导出 Markdown 文件（底部图标按钮）
2. 智能行内建议
- 实时监听用户输入
- 基于上下文（光标前后文本）生成补全建议
- 流式响应，实时显示建议内容
- 支持多种交互方式：
- Tab 键：接受建议
- Esc 键：取消建议
- 点击建议：直接插入
3. 性能优化
- 500ms 防抖机制，避免频繁请求
- 流式传输（SSE），降低延迟
- 上下文智能截取（光标前30行 + 后5行）
项目结构
llm-in-text/
├── src/
│ ├── components/
│ │ ├── MilkdownEditor.vue # 主编辑器组件
│ │ ├── GhostTextOverlay.vue # 建议文本显示组件
│ │ └── MarkdownEditor.vue # 备用编辑器
│ ├── plugins/
│ │ ├── inlineSuggestionPlugin.ts # 行内建议插件
│ │ └── types.ts # 类型定义
│ ├── router/
│ │ └── index.js # 路由配置
│ ├── store/
│ │ └── index.js # 状态管理
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── backend/
│ ├── main.py # FastAPI 服务器
│ ├── llm.py # LLM API 调用
│ ├── prompt.py # Prompt 构建
│ ├── requirements.txt # Python 依赖
│ └── .env # 环境变量配置
├── plans/
│ ├── milkdown-editor-plan.md # 编辑器实施计划
│ └── inline-suggestions-plan.md # 建议功能实施计划
├── index.html
├── package.json
├── vite.config.js
└── README.md
快速开始
前置要求
- Node.js 18+
- Python 3.8+
- OpenAI API Key 或 Ollama 服务
安装依赖
前端：
npm install
后端：
cd backend
pip install -r requirements.txt
配置环境变量
在 backend/.env 文件中配置：
OPENAI_API_KEY=your_api_key_here
OLLAMA_BASE_URL=http://localhost:11434/v1/
OLLAMA_MODEL=gpt-4
启动服务
启动后端：
cd backend
python main.py
启动前端：
npm run dev
访问 http://localhost:5173 开始使用。
API 接口
POST /v1/completions
获取文本补全建议（流式响应）
请求体：
{
"prefix": "# Hello\n\nThis is ",
"suffix": "",
"languageId": "markdown"
}
响应（SSE 流）：
data: {"content": "a "}
data: {"content": "a te"}
data: {"content": "a test"}
data: {"done": true}
已知问题
待优化项（P1）
- 代码重复 - fetchSuggestion 逻辑在两个文件中重复
- 全局状态污染 - 插件使用模块级全局变量
轻微问题（P2）
- 大量调试日志影响性能
- 缺少完整的类型定义
- 建议文本无长度限制
- API URL 硬编码在前端
开发指南
代码规范
- 前端：遵循 Vue 3 Composition API 最佳实践
- 后端：遵循 FastAPI 异步编程模式
- 错误处理：获取失败直接报错，不返回默认值
- 性能优化：优先考虑降低延迟，避免冗余代码
调试
前端使用浏览器开发者工具，后端查看控制台输出。所有关键操作都有日志记录。
贡献指南
欢迎提交 Issue 和 Pull Request。在提交代码前，请确保：
- 代码通过 ESLint 检查
- 所有测试通过
- 添加必要的注释和文档
- 遵循项目的代码规范
许可证
MIT License