7cddfaba30
- Implement Markdown parsing for ghost text using Milkdown parser - Add support for both block and inline content in ghost text - Refactor prompt system with comprehensive rules and examples - Adjust LLM parameters: increase temperature to 0.7, add repeat_penalty - Add CSS styles for formatted ghost text (bold, italic, code, links) - Add documentation for Copilot prompt system and ghost text rendering
LLM in Text - 智能写作助手
基于 Vue3 和 FastAPI 的智能 Markdown 编辑器，集成大语言模型（LLM）实时补全建议功能。
功能特性
Markdown 编辑器
- 基于 Milkdown Crepe 的所见即所得编辑体验
- 支持完整 Markdown 语法和 LaTeX 公式
- 导入/导出 Markdown 文件
AI 智能补全
- 实时生成文本补全建议（灰色显示）
- 流式响应，低延迟体验
- 多种交互方式：
- Tab 键：接受建议
- Esc 键：拒绝建议
- 点击灰色文本：接受建议
- 继续输入：自动拒绝建议
AI 开关控制
- 右下角 AI 开关按钮
- 白色 = AI 启用，黑色 = AI 禁用
- 禁用时自动清除灰色文本并停止 API 调用
技术架构
flowchart LR
subgraph Frontend
A[Vue3] --> B[Milkdown Editor]
B --> C[ProseMirror Plugin]
C --> D[Ghost Text Mark]
end
subgraph Backend
E[FastAPI] --> F[LLM API]
F --> G[Stream Response]
end
D -->|SSE| E
G -->|text| D
项目结构
llm-in-text/
├── src/
│ ├── components/
│ │ └── MilkdownEditor.vue # 主编辑器组件
│ ├── plugins/
│ │ └── copilotPlugin.ts # ProseMirror AI 补全插件
│ ├── utils/
│ │ ├── api.js # API 调用封装
│ │ └── config.js # 配置文件
│ ├── App.vue
│ └── main.js
├── backend/
│ ├── main.py # FastAPI 服务器
│ ├── llm.py # LLM API 调用
│ ├── prompt.py # Prompt 构建
│ └── requirements.txt
└── 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
OLLAMA_BASE_URL=http://localhost:11434/v1/
OLLAMA_MODEL=gpt-4
启动
# 后端（端口 8000）
cd backend
python main.py
# 前端（端口 5173）
npm run dev
API 接口
POST /v1/completions
流式获取补全建议
请求：
{
"prefix": "# Title\n\nContent ",
"suffix": "",
"languageId": "markdown"
}
响应（SSE）：
data: {"content": "here"}
data: {"content": "here is"}
data: {"done": true}
核心实现
ProseMirror Mark 系统
使用 ProseMirror 的 Mark 系统实现灰色建议文本：
// 定义 ghost mark
export const copilotGhostMark = $markSchema('copilot_ghost', () => ({
excludes: '_',
inclusive: true,
toDOM: () => ['span', {
'data-copilot-ghost': '',
class: 'copilot-ghost-text'
}, 0]
}))
// CSS 样式
.copilot-ghost-text {
color: #999;
opacity: 0.6;
}
交互处理
- 点击灰色文本区域：接受建议（移除 mark，保留文本）
- 点击其他区域：拒绝建议（删除灰色文本）
- Tab 键：接受建议
- Esc 键：拒绝建议
许可证
MIT License