112 lines
2.8 KiB
Markdown
112 lines
2.8 KiB
Markdown
# Inline Autocomplete Suggestions 实现计划
|
||
|
||
## 技术栈确认
|
||
- **前端**: Vue3 + Milkdown Editor
|
||
- **后端**: Python FastAPI
|
||
- **LLM**: OpenAI API（流式响应）
|
||
- **范围**: 基础流式补全，无需复杂缓存机制
|
||
|
||
## 系统架构
|
||
|
||
```mermaid
|
||
flowchart TB
|
||
subgraph 前端 [Vue3 + Milkdown]
|
||
E[Milkdown Editor]
|
||
I[InlineSuggestionPlugin<br/>输入监听+防抖]
|
||
G[GhostTextOverlay<br/>虚影渲染层]
|
||
end
|
||
|
||
subgraph 后端 [FastAPI]
|
||
API[/v1/completions<br/>补全接口]
|
||
P[PromptBuilder<br/>上下文构建]
|
||
L[OpenAI Client<br/>LLM调用]
|
||
end
|
||
|
||
I -- "输入事件" --> G
|
||
G -- "POST {prefix, suffix}" --> API
|
||
API -- "流式响应" --> G
|
||
```
|
||
|
||
## 实现步骤
|
||
|
||
### 1. 前端：创建 Inline Suggestion Plugin
|
||
**文件**: `src/plugins/inlineSuggestionPlugin.ts`
|
||
- 监听编辑器输入事件
|
||
- 防抖处理（150ms）
|
||
- 调用后端 API 获取补全建议
|
||
- 管理 GhostText 显示状态
|
||
|
||
### 2. 前端：GhostText 渲染组件
|
||
**文件**: `src/components/GhostTextOverlay.vue` 或内联样式
|
||
- 在光标位置显示灰色虚影文本
|
||
- 处理 Tab 键接受补全
|
||
- ESC 键取消显示
|
||
|
||
### 3. 修改 MilkdownEditor 集成插件
|
||
**文件**: `src/components/MilkdownEditor.vue`
|
||
- 注册 InlineSuggestionPlugin 到 Crepe 实例
|
||
- 配置 API 地址
|
||
|
||
### 4. 后端：FastAPI 服务
|
||
**文件**: `backend/main.py`
|
||
- POST `/v1/completions` 流式接口
|
||
- 请求体验证和解析
|
||
|
||
### 5. 后端：Prompt 构建和 LLM 调用
|
||
**文件**: `backend/prompt.py`, `backend/llm.py`
|
||
- 构建补全 Prompt（参考 completions-sample-code 的 extractPrompt）
|
||
- OpenAI API 流式调用
|
||
- 返回 SSE 格式响应
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
llm-in-text/
|
||
├── src/
|
||
│ ├── components/
|
||
│ │ └── MilkdownEditor.vue [修改]
|
||
│ ├── plugins/
|
||
│ │ └── inlineSuggestionPlugin.ts [新建]
|
||
│ └── ...
|
||
└── backend/
|
||
├── main.py [新建]
|
||
├── prompt.py [新建]
|
||
├── llm.py [新建]
|
||
└── requirements.txt [新建]
|
||
```
|
||
|
||
## API 设计
|
||
|
||
### 请求
|
||
```json
|
||
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]
|
||
```
|
||
|
||
## 参考代码映射
|
||
|
||
| completions-sample-code | 本项目实现 |
|
||
|------------------------|-----------|
|
||
| `ghostText.ts getGhostText()` | 后端 LLM 调用逻辑 |
|
||
| `inlineCompletion.ts GhostText` | 前端 Plugin 核心逻辑 |
|
||
| `networking.ts postRequest()` | 后端 API 接口 |
|
||
| `prompt/extractPrompt()` | 后端 Prompt 构建 |
|
||
|
||
## 下一步
|
||
确认计划后切换到 Code 模式开始实现。
|