diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000..3805e97 --- /dev/null +++ b/README.en.md @@ -0,0 +1,119 @@ +# ThinkFlow AI + +[中文](./README.md) | English + +**ThinkFlow AI** is a next-generation, local-first, AI-driven mind mapping tool built with Vue 3 and VueFlow. More than just a drawing app, it serves as a "brain augmentor" that thinks with you. By combining the divergent capabilities of LLMs (Large Language Models) with structured visualization, ThinkFlow AI rapidly transforms fuzzy ideas into clear, deep knowledge systems. + +--- + +## 🔗 Live Demo + +Experience it now: [https://thinkflow-ai.lz-t.top/](https://thinkflow-ai.lz-t.top/) + +--- + +## 🌟 Why ThinkFlow AI? + +Traditional mind mapping tools often require manual entry of every branch, which can become a bottleneck during a burst of inspiration. ThinkFlow AI redefines this process: + +1. **AI-Driven Automated Divergence**: Enter a core keyword, and the AI automatically expands outward based on logical chains, helping you break through "blank page anxiety." +2. **Context-Aware Deep Dialogue**: Every node carries its full path context within the thinking tree. This means the AI understands _why_ you moved from A to B, generating more precise follow-up suggestions. +3. **Multi-Dimensional Sensory Presentation**: Gain textual knowledge through deep "Answers," visual imagery through AI Image Generation, and macro insights through "Session Summaries." +4. **Ultimate Privacy & Freedom**: Adopts a local-first architecture. Configurations are stored locally in your browser. Supports any OpenAI-compatible interface with no platform lock-in. + +--- + +## 🚀 Core Functional Architecture + +### 1. Intelligent Expansion System + +- **Core Idea Activation**: Generate the foundation of your thinking tree with one click. +- **Path Contextual Follow-up**: Perform follow-ups on nodes; the AI reasons using the full logical path from the root to the current node. +- **Node Management**: Supports subtree collapsing for large-scale graphs to keep the workspace clean. + +### 2. Deep Dive & Summarization + +- **Deep Answer (Deep Dive)**: Generates 300-500 words of professional analysis for specific concepts, supporting rich Markdown formatting. +- **Visual Generation (Image Gen)**: Utilizes CogView or DALL-E to generate photorealistic visuals for nodes, reinforcing visual memory. +- **Global Summary**: Automatically analyzes the entire graph's logic to extract core insights and conclusions. + +### 3. Canvas Interaction & Layout + +- **Smart Tree Layout**: Built-in algorithm based on dynamic subtree height calculations to solve overlap issues after node expansion. +- **Linked Dragging**: When a parent node moves, child nodes move synchronously to maintain relative positions. +- **Versatile Export**: Perfectly supports exporting to structured Markdown, preserving all deep answer content. + +--- + +## 🛠️ Tech Stack + +| Dimension | Technology Choice | +| :----------------------- | :----------------------------------------------------- | +| **Frontend Framework** | Vue 3 (Composition API) | +| **Build Tool** | Vite 5 + TypeScript | +| **Graph Engine** | @vue-flow/core (High performance, highly customizable) | +| **UI/Styling** | Tailwind CSS + Lucide Icons | +| **Internationalization** | Vue-I18n (Seamless English/Chinese switching) | +| **Markdown** | Markdown-it (Node content rendering) | + +--- + +## 📂 Source Structure + +```text +src/ +├── components/ # UI Component Layer +│ ├── WindowNode.vue # Logic Carrier: Custom node with Image/Answer/Follow-up capabilities +│ ├── TopNav.vue # Global Controls: Layout triggers, export, summary, fullscreen, etc. +│ ├── SideNav.vue # View Config: MiniMap, edge styles, background, settings entry +│ ├── BottomBar.vue # Idea Entry: The spark of inspiration +│ └── ...Modals # Modal Logic: Settings, Preview, Reset confirmation, etc. +├── composables/ # Domain Logic Layer +│ └── useThinkFlow.ts # Business Heart: State management, API scheduling, layout algorithm +├── i18n/ # Language Assets +│ └── locales/ # zh.json / en.json translation files +├── App.vue # App Skeleton: VueFlow container config and assembly +└── main.ts # Entry Point +``` + +--- + +## ⚙️ API Service Description (Important) + +To provide an out-of-the-box experience, this project includes a default set of demo endpoints. + +### 1. Demo Endpoint Details + +- **Service Proxying**: Default requests are proxied and controlled via **Cloudflare Workers & Pages**. +- **Model Support**: Currently connected to Zhipu Bigmodel (glm-4-flash / cogview-3-flash) using free tiers. +- **Limitations**: As these are public demo endpoints, you may encounter rate limits or exhausted quotas. + +### 2. Advanced Usage (Custom Endpoints) + +For more stable and higher-quality generation (e.g., using GPT-4o, Claude 3.5 Sonnet, etc.), we strongly recommend configuring your own API endpoints in **Settings**: + +- **Base URL**: Your API proxy address (must support CORS). +- **Model**: Target model name. +- **API Key**: Your private key. + +_Note: In custom mode, requests are sent directly from your browser to the target endpoint, bypassing any intermediaries for maximum security and efficiency._ + +--- + +## 📦 Quick Deployment + +```bash +# Clone the repo +git clone https://github.com/your-repo/ThinkFlowAI.git + +# Install dependencies +npm install + +# Start development +npm run dev + +# Build for production +npm run build +``` + +--- diff --git a/README.md b/README.md index 68eb111..899fd16 100644 --- a/README.md +++ b/README.md @@ -1,116 +1,120 @@ # ThinkFlow AI -English | [中文](./README.zh-CN.md) +中文 | [English](./README.en.md) -ThinkFlow AI is a lightweight, local-first, AI-driven mind mapping workspace. It automatically transforms a simple idea into a structured and highly visual mind map using the divergent thinking power of AI. - -This project aims to provide a smooth, zero-backend-config thinking assistant that offers deep analytical capabilities, supporting users during brainstorming, knowledge organization, and creative expansion. +**ThinkFlow AI** 是一款基于 Vue 3 和 VueFlow 构建的次世代、本地优先（Local-first）AI 驱动思维导图工具。它不仅仅是一个绘图软件，更是一个能够与你共同思考的“脑力增幅器”。通过将 LLM（大语言模型）的发散性能力与结构化可视化相结合，ThinkFlow AI 能将模糊的想法迅速转化为清晰、深度的知识体系。 --- -## 🌟 Key Highlights +## 🔗 在线预览 -- **🚀 Idea to Graph**: Just enter a core concept, and the AI will automatically generate a root node and expand into multiple insightful child nodes. -- **🧠 Context-Aware Follow-up**: Support for follow-up questions on any node. The AI considers the "thinking path" from root to the current node to ensure logical consistency. -- **📖 Deep Answer (Deep Dive)**: More than just keywords—click "Answer" to have the AI generate detailed analysis, background, and applications for a node, rendered in Markdown. -- **🎨 Intelligent Visual Aid**: Integrated AI image generation creates realistic visuals based on node content, enhancing the visual impact and memory retention of your mind map. -- **📊 Session Summary**: One-click summary of the entire canvas, extracting core logic, main dimensions, and final insights. -- **📂 Structured Export**: Export the entire mind map as a standard Markdown outline, including node descriptions, answers, and hierarchical structure. -- **🔐 Local-First Configuration**: All API configurations (Key, Base URL, etc.) and language preferences are stored in the browser's `localStorage`, ensuring privacy and security. +立即体验：[https://thinkflow-ai.lz-t.top/](https://thinkflow-ai.lz-t.top/) --- -## 🛠️ Tech Stack +## 🌟 为什么选择 ThinkFlow AI？ -- **Framework**: [Vue 3](https://vuejs.org/) (Composition API) -- **Build Tool**: [Vite 5](https://vitejs.dev/) -- **Language**: [TypeScript](https://www.typescriptlang.org/) -- **Styling**: [Tailwind CSS](https://tailwindcss.com/) -- **Graph Engine**: [@vue-flow/core](https://vueflow.dev/) -- **I18n**: [vue-i18n](https://vue-i18n.intlify.dev/) -- **Icon Library**: [lucide-vue-next](https://lucide.dev/) -- **Markdown Rendering**: [markdown-it](https://github.com/markdown-it/markdown-it) +传统的思维导图工具往往需要手动录入每一个分支，这在灵感爆发时往往会成为阻碍。ThinkFlow AI 重新定义了这一过程： + +1. **AI 驱动的自动化发散**：输入一个核心词，AI 会基于逻辑链路自动向外扩展，帮助你打破“白纸焦虑”。 +2. **上下文感知的深度对话**：每一个节点都带有其在思维树中的完整路径上下文，这意味着 AI 能够理解你为什么从 A 想到 B，从而生成更精准的后续建议。 +3. **多维度的感官呈现**：通过深度“回答（Answer）”获取文本知识，通过 AI 生图获取视觉意象，通过“全篇总结”获取宏观洞察。 +4. **极致的隐私与自由**：采用本地优先架构，配置存储在浏览器本地，支持任何 OpenAI 兼容接口，不锁定任何平台。 --- -## 📂 Code Structure Guide +## 🚀 核心功能架构 + +### 1. 智能扩展系统 + +- **核心想法激活**：一键生成思维树根基。 +- **路径上下文追问**：对节点进行 Follow-up，AI 将结合从根节点到当前节点的完整逻辑路径进行推理。 +- **节点折叠与管理**：支持大规模图谱的子树折叠，保持视野清爽。 + +### 2. 内容深挖与总结 + +- **深度回答 (Deep Dive)**：针对特定概念生成 300-500 字的专业解析，支持 Markdown 丰富格式。 +- **视觉生成 (Image Gen)**：利用 CogView 或 DALL-E 为节点生成写实风格配图，强化视觉记忆。 +- **全局摘要 (Summary)**：自动分析全图逻辑，提取核心洞察与结论。 + +### 3. 画布交互与排版 + +- **智能树形布局**：内置基于子树高度动态计算的算法，解决节点展开后的重叠问题。 +- **联动拖拽**：父节点移动时，子节点保持相对位置同步移动。 +- **多样化导出**：完美支持导出为结构化 Markdown，保留所有深度回答内容。 + +--- + +## 🛠️ 技术栈 + +| 维度 | 技术选型 | +| :----------- | :---------------------------------- | +| **前端框架** | Vue 3 (Composition API) | +| **构建工具** | Vite 5 + TypeScript | +| **画布引擎** | @vue-flow/core (高性能、高度定制化) | +| **UI/样式** | Tailwind CSS + Lucide Icons | +| **国际化** | Vue-I18n (中英双语无缝切换) | +| **Markdown** | Markdown-it (支持节点内容渲染) | + +--- + +## 📂 源码结构 ```text src/ -├── components/ # UI Components -│ ├── TopNav.vue # Top toolbar: Handles fit, layout, export, summary, and language toggle. -│ ├── SideNav.vue # Left side nav: Controls MiniMap, edge styles, background, and settings entry. -│ ├── BottomBar.vue # Bottom input bar: Initial entry for core ideas. -│ ├── WindowNode.vue # Custom Node: Core UI for expanding, answers, image generation, and follow-ups. -│ ├── SettingsModal.vue # API Settings: Configuration for Text and Image generation endpoints. -│ ├── SummaryModal.vue # Modal for displaying the session summary. -│ ├── ImagePreviewModal.vue # Modal for fullscreen node image preview. -│ └── ResetConfirmModal.vue # Confirmation modal for canvas reset. -├── composables/ # Core Logic Layer -│ └── useThinkFlow.ts # Core Business Hook: Manages node state, API calls, layout algorithms, and persistence. -├── i18n/ # Internationalization -│ ├── locales/ # Language packs (zh.json, en.json) -│ └── index.ts # I18n initialization -├── App.vue # App Entry: Composes components and configures the VueFlow environment. -└── main.ts # Program Entry Point +├── components/ # UI 组件层 +│ ├── WindowNode.vue # 核心逻辑载体：自定义节点，集成生图/回答/追问能力 +│ ├── TopNav.vue # 全局控制：布局算法触发、导出、总结、全屏等 +│ ├── SideNav.vue # 视图配置：小地图、连线样式、背景切换、设置入口 +│ ├── BottomBar.vue # 想法入口：灵感触发点 +│ └── ...Modals # 弹窗逻辑：设置、预览、重置确认等 +├── composables/ # 领域逻辑层 +│ └── useThinkFlow.ts # 业务心脏：响应式状态管理、API 调度、排版算法实现 +├── i18n/ # 语言资产 +│ └── locales/ # zh.json / en.json 翻译文件 +├── App.vue # 应用骨架：VueFlow 容器配置与组件组装 +└── main.ts # 入口文件 ``` -### Core Design Principles - -- **State Management**: Uses `useThinkFlow` composable to centralize management of nodes, edges, and UI states, distributed to child components via `App.vue`. -- **Layout Algorithm**: Implements a horizontal tree layout algorithm based on dynamic subtree height calculations, automatically adapting to node size changes. -- **API Communication**: Compatible with OpenAI-style endpoints, supporting custom model names and Base URLs. - --- -## 🚀 Quick Start +## ⚙️ API 服务说明 (重要) -### 1. Prerequisites +为了让用户能够开箱即用，本项目提供了一套默认的演示接口。 -- Node.js 18+ -- npm or pnpm +### 1. 演示接口说明 -### 2. Install Dependencies +- **服务转发**：默认请求通过 **Cloudflare Workers & Pages** 进行转发与控制。 +- **模型支持**：目前后端对接了智谱 Bigmodel (glm-4-flash / cogview-3-flash) 的免费额度。 +- **限制**：由于是公共演示接口，可能会存在请求频率限制或额度耗尽的情况。 + +### 2. 进阶使用建议 (自定义接口) + +为了获得更稳定、更高质量的生成效果（例如使用 GPT-4o, Claude 3.5 Sonnet 等），强烈建议在 **设置 (Settings)** 中配置您自己的 API 端点： + +- **Base URL**: 您的 API 代理地址 (需支持 CORS)。 +- **Model**: 目标模型名称。 +- **API Key**: 您的私有密钥。 + +_注：自定义模式下，请求将直接从您的浏览器发往目标端点，不经过任何中转，更加安全高效。_ + +--- + +## � 快速部署 ```bash +# 克隆仓库 +git clone https://github.com/your-repo/ThinkFlowAI.git + +# 安装依赖 npm install -``` -### 3. Run Development Server - -```bash +# 启动开发 npm run dev + +# 生产构建 +npm run build ``` -Access `http://localhost:5173` to start. - --- -## ⚙️ Configuration - -This project does not provide a backend; users must configure their own API endpoints: - -1. Click the **Settings** icon at the bottom of the left sidebar. -2. **Default Mode**: Uses pre-configured trial endpoints (subject to rate limits). -3. **Custom Mode**: - - **Text Gen**: Enter OpenAI-compatible `Base URL`, `Model Name`, and `API Key`. - - **Image Gen**: Enter configuration for `dall-e` or other image generation APIs. - ---- - -## 📖 Usage Manual - -1. **Start a Session**: Enter your idea in the bottom input (e.g., "Future of Urban Transportation") and press Enter. -2. **Node Actions**: - - **Expand**: Click the `+` on a node or enter a follow-up requirement to generate child nodes. - - **Answer**: Click the book icon for a deep analysis of that node. - - **Image**: Click the image icon to generate a visual reference for the idea. -3. **Organize Canvas**: - - **Layout**: Click the "Layout" button at the top to automatically organize all nodes. - - **Export**: Click the "Export" button at the top to get a Markdown copy of your work. - ---- - -## 📄 License - -MIT License diff --git a/README.zh-CN.md b/README.zh-CN.md deleted file mode 100644 index b12f33b..0000000 --- a/README.zh-CN.md +++ /dev/null @@ -1,116 +0,0 @@ -# ThinkFlow AI - -[English](./README.md) | 中文 - -ThinkFlow AI 是一个轻量级、Local-first（本地优先）的 AI 驱动思维导图工作台。它能够将你的一个简单想法，通过 AI 的发散性思维，自动化地扩展为结构清晰、可视化程度高的思维图谱。 - -本项目旨在提供一个极致流畅、无需复杂后端配置、且具备深度解析能力的思维助手，帮助用户在头脑风暴、知识梳理和创意发散时获得持续的灵感支持。 - ---- - -## 🌟 核心亮点 - -- **🚀 从想法到图谱**：只需输入一个核心概念，AI 会自动生成根节点并向外发散多个具有深度的子节点。 -- **🧠 上下文关联追问**：支持针对任意节点进行追问，AI 在生成时会参考“从根到当前节点”的思考路径，确保生成的逻辑一致性。 -- **📖 深度回答（Deep Dive）**：不再仅仅是关键词，点击“回答”即可让 AI 针对该节点生成详尽的解析、背景及应用场景，支持 Markdown 渲染。 -- **🎨 智能视觉辅助**：集成 AI 生图能力，可根据节点内容生成写实风格的配图，提升思维导图的视觉冲击力与记忆点。 -- **📊 全篇智能总结**：一键梳理整张画布的所有想法，提取核心逻辑、主要维度和最终洞察，生成精炼的全局总结。 -- **📂 结构化导出**：支持将整个思维图谱导出为标准的 Markdown 大纲，包含节点描述、回答内容及层级结构。 -- **🔐 本地化配置**：所有的 API 配置（Key、Base URL 等）和语言偏好均保存在浏览器 `localStorage` 中，隐私且安全。 - ---- - -## 🛠️ 技术栈 - -- **框架**: [Vue 3](https://vuejs.org/) (Composition API) -- **构建工具**: [Vite 5](https://vitejs.dev/) -- **语言**: [TypeScript](https://www.typescriptlang.org/) -- **样式**: [Tailwind CSS](https://tailwindcss.com/) -- **画布引擎**: [@vue-flow/core](https://vueflow.dev/) -- **国际化**: [vue-i18n](https://vue-i18n.intlify.dev/) -- **图标库**: [lucide-vue-next](https://lucide.dev/) -- **Markdown 渲染**: [markdown-it](https://github.com/markdown-it/markdown-it) - ---- - -## 📂 代码结构指南 - -```text -src/ -├── components/ # UI 组件库 -│ ├── TopNav.vue # 顶部工具栏：处理适配、布局、导出、总结、语言切换等全局动作 -│ ├── SideNav.vue # 左侧配置栏：控制小地图、连线样式、背景网格及 API 设置入口 -│ ├── BottomBar.vue # 底部输入框：核心想法的初始入口 -│ ├── WindowNode.vue # 自定义节点：核心 UI，包含扩展、回答、生图及追问逻辑 -│ ├── SettingsModal.vue # API 配置弹窗：支持文本/图片生成的 Base URL 和 Key 设置 -│ ├── SummaryModal.vue # 全篇总结展示弹窗 -│ ├── ImagePreviewModal.vue # 节点配图全屏预览弹窗 -│ └── ResetConfirmModal.vue # 画布重置确认弹窗 -├── composables/ # 核心逻辑层 -│ └── useThinkFlow.ts # 核心业务 Hook：管理节点状态、API 调用、布局算法、持久化逻辑等 -├── i18n/ # 国际化 -│ ├── locales/ # 语言包 (zh.json, en.json) -│ └── index.ts # i18n 初始化 -├── App.vue # 应用入口：组合各组件并配置 VueFlow 画布环境 -└── main.ts # 程序起点 -``` - -### 核心逻辑设计 - -- **状态管理**: 采用 `useThinkFlow` 组合式函数统一管理画布节点、连线及 UI 状态。通过解构方式在 `App.vue` 中分发给各子组件。 -- **布局算法**: 实现了基于子树高度动态计算的“横向树形”排版算法，能够自动适配节点展开后的尺寸变化，确保图谱整齐。 -- **API 通信**: 适配 OpenAI 格式接口，支持自定义模型名称及 Base URL。 - ---- - -## 🚀 快速开始 - -### 1. 环境准备 - -- Node.js 18+ -- npm 或 pnpm - -### 2. 安装依赖 - -```bash -npm install -``` - -### 3. 启动开发服务器 - -```bash -npm run dev -``` - -访问 `http://localhost:5173` 即可开始使用。 - ---- - -## ⚙️ 配置说明 - -本项目不提供后端服务，需用户自行配置 API 接口： - -1. 点击左侧工具栏底部的 **设置** 图标。 -2. **默认模式**: 预设了部分体验接口（可能有请求限制）。 -3. **自定义模式**: - - **文本生成**: 填入 OpenAI 兼容格式的 `Base URL`、`Model Name` 和 `API Key`。 - - **图片生成**: 填入支持 `dall-e` 格式或其他生图 API 的配置。 - ---- - -## 📖 功能使用手册 - -1. **开启新会话**: 在底部输入框输入您的想法（如“未来城市的交通方式”），按回车。 -2. **节点操作**: - - **扩展**: 点击节点右侧的 `+` 或输入后续要求，AI 会继续在该分支下生成子节点。 - - **回答**: 点击书本图标，获取该节点的深度解析。 - - **生图**: 点击图片图标，为该想法生成视觉参考。 -3. **整理画布**: - - **布局**: 点击顶部“布局”按钮，自动按层级整理所有节点。 - - **导出**: 点击顶部“导出”按钮，获取 Markdown 格式的内容副本。 - ---- - -## 📄 开源协议 - -MIT License