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 模式开始实现。
|