GitHub Park

Flowers: An intelligent browser extension for AI-powered translation, polishing, note-taking, and knowledge management

Flowers is an intelligent browser extension that integrates multiple AI-driven core features to enhance users' browsing, learning, and information management experience. It supports context-aware intelligent translation and AI text polishing with multiple tone options, automatically generates structured notes from web content, and provides RAG (Retrieval-Augmented Generation) chat functionality based on a personal knowledge base. The extension emphasizes a local-first approach to data and privacy protection—user data is stored on the local device with no external collection or tracking, while supporting cross-device note synchronization. Flowers allows custom AI prompts, automatically switches prompts based on the set language, is compatible with OpenAI and local LLM interfaces (such as Ollama and LM Studio), and offers comprehensive note management capabilities including creation, editing, search, export, and calendar view filtering.

Intelligent Translation

Select any text on a webpage, and the AI provides accurate translation results with contextual awareness; technical terms can be manually adjusted. For full-page translation, a bilingual comparison mode is adopted, which is especially suitable for professionals—it automatically identifies and skips code blocks, mathematical formulas, and charts to avoid damaging the integrity of technical content. Flowers intelligently merges multiple paragraphs before sending API requests to reduce token consumption and latency, does not disrupt the original webpage structure or interactive functions, and can translate dynamically loaded content in real time.

Video Subtitle Translation

On supported platforms like YouTube, it automatically detects videos with subtitles, and a translation icon appears in the player controls. Clicking the icon enables real-time translation. Translated subtitles are displayed as an overlay above the original subtitles in a yellow color without obstructing video content. Flowers intelligently buffers streaming subtitles, ensuring context is maintained even during fast-paced dialogue. Translation results are cached to avoid repeated API calls and automatically match the preferred language set in the configuration. Currently, YouTube DOM subtitles and TextTrack API are supported, as is the TextTrack API for general platforms, with Netflix support planned.

AI Text Optimization and Note Generation

When text optimization is needed, users can select the "Polish" function after selecting content to receive professional text optimization suggestions in various tone styles. While browsing webpages, it automatically extracts key information from the content to generate structured notes, eliminating the need for manual organization. Notes support tagging, calendar view filtering, and full-text search. Users can also manually edit titles, content, and tags. Generated notes preserve original facts and links and can be exported in Markdown or JSON format.

Knowledge Base-Based AI Chat

The built-in RAG-driven chat function retrieves relevant context from personal notes to provide precise answers to questions. Chat history can be cleared with one click, and note content can be referenced during conversations at any time, allowing AI responses to better align with personal needs and avoid generic answers.

Personalization and Device Support

Users can edit and manage AI prompts for each functional workflow and customize settings based on usage habits. Multi-device synchronization is supported, ensuring notes and preferences remain consistent across different devices. Data storage follows the local-first principle—all notes and settings are saved in the local browser without data collection or tracking, safeguarding privacy. A plugin-based architecture supports custom workflows, and prompts automatically switch based on the language set in the configuration, adapting to different usage scenarios.

Technical Architecture of Flowers

Flowers adopts a layered architecture design, divided into the browser extension layer and the backend layer:

  • The browser extension layer includes the selection interface, workspace, and API bridging modules, covering frontend functions such as text selection interaction, video translation, and full-page translation.
  • The backend layer handles core logic, including the LLM client, RAG engine, data storage, and synchronization functions, providing technical support for the frontend.

Installing Flowers

  1. Clone the repository: git clone https://github.com/snailfrying/flowers.git, then navigate into the flowers directory.
  2. Install dependencies: Enter the backend and frontend directories separately and run npm install.
  3. Configure API keys: Copy backend/env.yaml.example to backend/env.yaml and edit the file to add your personal API keys.
  4. Build the extension: Run npm run build in the backend directory, then run npm run build in the frontend directory.
  5. Load into the browser: Open chrome://extensions/, enable "Developer Mode," click "Load unpacked extension," and select the frontend/dist/ directory.

Using Flowers

  • Text Selection Tool: Select text on a webpage, click the pop-up Flowers icon, and choose from options like translation, polishing, note generation, or asking the AI.
  • Sidebar Workspace: Click the extension icon to open it, containing three sections—chat, notes, and settings—where you can engage in knowledge base conversations, manage notes, and configure preferences.
Visit snailfrying/flowers to access the source code and obtain more information.