llm-in-text/plans/image-processing-plan.md

图片处理优化计划

需求概述

1. 图片上传大小限制为100MB
2. 为每个图片做哈希，相同哈希不重复调用OCR
3. 上传图片时打断之前的ghost text

需要修改的文件

1. src/utils/ocrCache.js - 扩展OCR缓存模块

新增功能：

• 图片哈希缓存：imageHashCache Map，用于存储 hash -> ocrText 的映射
• 哈希计算函数：使用 crypto.subtle.digest('SHA-256', imageBytes) 计算哈希
• 哈希检查函数：在OCR前检查哈希是否已存在
• 100MB大小限制常量

// 新增
export const IMAGE_SIZE_LIMIT = 100 * 1024 * 1024  // 100MB

export async function calculateImageHash(imageBytes) {
  const hashBuffer = await crypto.subtle.digest('SHA-256', imageBytes)
  const hashArray = Array.from(new Uint8Array(hashBuffer))
  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
}

export function getOcrByHash(hash) {
  return imageHashCache.get(hash) || ''
}

export function setOcrByHash(hash, text) {
  imageHashCache.set(hash, text)
}

2. src/components/MilkdownEditor.vue - 修改图片上传逻辑

修改点：

1. handleImageUpload 函数 (约第392行)

   • 添加文件大小检查，超过100MB则提示错误
   • 计算图片哈希，检查是否已存在OCR结果
   • 上传图片前调用 clearGhostSuggestion 打断现有ghost text

2. performOCR 函数 (约第212行)

   • 接收哈希参数，OCR完成后存储到哈希缓存

3. Milkdown onUpload 回调 (约第267行)

   • 同样添加大小限制和哈希检查

3. src/plugins/copilotPlugin.ts - 可能需要导出清除函数

• 确保 clearGhostSuggestion 可以被外部调用（目前已导出）

实现步骤

graph TD
    A[用户上传图片] --> B{文件大小 <= 100MB?}
    B -->|否| C[提示文件过大错误]
    B -->|是| D[计算图片哈希]
    D --> E{哈希已存在OCR结果?}
    E -->|是| F[直接使用缓存的OCR结果]
    E -->|否| G[调用OCR API]
    G --> H[存储OCR结果到哈希缓存]
    F --> I[打断现有ghost text]
    H --> I
    I --> J[插入图片到编辑器]

关键代码修改位置

文件	函数/位置	修改内容
src/utils/ocrCache.js	新增	添加哈希相关函数和常量
src/components/MilkdownEditor.vue	handleImageUpload	添加大小检查、哈希检查、打断ghost text
src/components/MilkdownEditor.vue	performOCR	接收哈希参数
src/components/MilkdownEditor.vue	onUpload	Milkdown上传回调添加同样逻辑