AI浏览器智能翻译润色笔记与知识管理工具 Flowers

Flowers 是一个智能浏览器扩展，集成了多项AI驱动的核心功能，能提升用户的浏览、学习和信息管理体验。Flowers 支持上下文感知的智能翻译和多种语气选项的AI文本润色，能够从网页内容自动生成结构化笔记，提供基于个人知识库的RAG（检索增强生成）聊天功能。Flowers 的扩展强调数据本地优先和隐私保护，用户数据会存储在本地设备中，不进行外部收集或追踪，支持多设备间笔记同步。Flowers 支持自定义AI提示词，能根据设置的语言自动切换提示词，兼容OpenAI及本地LLM（如Ollama、LM Studio）接口，提供各种笔记管理能力，支持创建、编辑、搜索、导出和日历视图筛选等。

智能翻译

选中网页任意文本，AI会结合上下文给出精准翻译结果，术语可手动编辑调整。针对整页翻译，采用双语对比展示模式，特别适合专业人士使用——能自动识别并跳过代码块、数学公式和图表，避免破坏技术内容的完整性。Flowers 会智能合并多个段落发起API请求，减少令牌消耗和延迟，不会干扰原网页结构和交互功能，动态加载的内容也能实时翻译。

视频字幕翻译

在YouTube等支持的平台上，能自动检测带字幕的视频，播放器控件中会出现翻译图标，点击即可开启实时翻译。翻译后的字幕以黄色叠加层显示在原字幕上方，不遮挡视频内容。Flowers 会智能缓冲流媒体字幕，即便对话节奏较快，也不会丢失语境，翻译结果会缓存，避免重复调用API，自动匹配设置中的偏好语言。目前已支持YouTube的DOM字幕和TextTrack API，通用平台的TextTrack API，Netflix适配计划中。

AI文本优化和笔记生成

需要优化文本时，选中内容后可选择“润色”功能，提供多种语气风格的专业文本优化方案。浏览网页时，能自动从内容中提取关键信息，生成结构化笔记，无需手动整理。笔记支持标签分类、日历视图筛选和全文搜索，还能手动编辑标题、内容和标签，生成的笔记会保留原始事实和链接，可导出为Markdown或JSON格式。

基于知识库的AI对话

内置RAG驱动的聊天功能，能从个人笔记中检索相关上下文，为提问提供精准答案。聊天历史可一键清除，对话过程中能随时关联笔记内容，让AI回答更贴合个人需求，避免泛泛而谈。

个性化和设备支持

可编辑和管理每个功能流程的AI提示词，根据使用习惯自定义设置。支持多设备同步，笔记和偏好设置能在不同设备间保持一致。数据存储遵循本地优先原则，所有笔记和设置都保存在本地浏览器中，不进行数据收集和追踪，保护隐私安全。插件化架构支持自定义工作流程，提示词会根据设置中的语言自动切换，适配不同使用场景。

Flowers 的技术架构

Flowers 采用分层架构设计，整体分为浏览器扩展层和后端层：

• 浏览器扩展层包含选择界面、工作区和API桥接模块，涵盖文本选择交互、视频翻译、整页翻译等前端功能。

• 后端层负责核心逻辑，包括LLM客户端、RAG引擎、数据存储和同步功能，为前端提供技术支撑。

Flowers安装和使用

环境要求

• Node.js 版本 ≥ 18.0.0

• npm 或 pnpm 包管理工具

• 兼容OpenAI的API密钥

安装 Flowers

1、克隆仓库：git clone https://github.com/snailfrying/flowers.git，进入flowers目录。

2、安装依赖：分别进入backend和frontend目录，执行npm install。

3、配置API密钥：复制backend/env.yaml.example为backend/env.yaml，编辑文件填入个人API密钥。

4、构建扩展：backend目录执行npm run build，frontend目录执行npm run build。

5、浏览器加载：打开chrome://extensions/，启用“开发者模式”，点击“加载已解压的扩展程序”，选择frontend/dist/目录。

使用 Flowers

• 文本选择工具：选中网页文本，点击弹出的Flowers图标，可选择翻译、润色、生成笔记或向AI提问。

• 侧边栏工作区：点击扩展图标打开，包含聊天、笔记和设置三个板块，可进行知识库对话、笔记管理和偏好配置。

开发扩展

Flowers 采用React、TypeScript和Tailwind CSS构建，UI组件来自shadcn/ui，图标使用Lucide。项目结构清晰，backend目录包含AI编排、服务和存储相关代码，frontend目录负责扩展界面和功能实现。支持开发模式热更新，提供测试和代码检查脚本，欢迎通过Fork仓库、创建功能分支、提交修改并发起Pull Request参与贡献。