[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-Ephibbs--flowtoken":3,"tool-Ephibbs--flowtoken":64},[4,17,27,35,43,56],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":16},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,3,"2026-04-05T11:01:52",[13,14,15],"开发框架","图像","Agent","ready",{"id":18,"name":19,"github_repo":20,"description_zh":21,"stars":22,"difficulty_score":23,"last_commit_at":24,"category_tags":25,"status":16},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",138956,2,"2026-04-05T11:33:21",[13,15,26],"语言模型",{"id":28,"name":29,"github_repo":30,"description_zh":31,"stars":32,"difficulty_score":23,"last_commit_at":33,"category_tags":34,"status":16},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",107662,"2026-04-03T11:11:01",[13,14,15],{"id":36,"name":37,"github_repo":38,"description_zh":39,"stars":40,"difficulty_score":23,"last_commit_at":41,"category_tags":42,"status":16},3704,"NextChat","ChatGPTNextWeb\u002FNextChat","NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。\n\n这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。\n\nNextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。",87618,"2026-04-05T07:20:52",[13,26],{"id":44,"name":45,"github_repo":46,"description_zh":47,"stars":48,"difficulty_score":23,"last_commit_at":49,"category_tags":50,"status":16},2268,"ML-For-Beginners","microsoft\u002FML-For-Beginners","ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。\n\n无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。",84991,"2026-04-05T10:45:23",[14,51,52,53,15,54,26,13,55],"数据工具","视频","插件","其他","音频",{"id":57,"name":58,"github_repo":59,"description_zh":60,"stars":61,"difficulty_score":10,"last_commit_at":62,"category_tags":63,"status":16},3128,"ragflow","infiniflow\u002Fragflow","RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。\n\n在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。\n\n这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。",77062,"2026-04-04T04:44:48",[15,14,13,26,54],{"id":65,"github_repo":66,"name":67,"description_en":68,"description_zh":69,"ai_summary_zh":69,"readme_en":70,"readme_zh":71,"quickstart_zh":72,"use_case_zh":73,"hero_image_url":74,"owner_login":75,"owner_name":76,"owner_avatar_url":77,"owner_bio":78,"owner_company":79,"owner_location":79,"owner_email":79,"owner_twitter":79,"owner_website":80,"owner_url":81,"languages":82,"stars":95,"forks":96,"last_commit_at":97,"license":79,"difficulty_score":98,"env_os":99,"env_gpu":100,"env_ram":100,"env_deps":101,"category_tags":107,"github_topics":79,"view_count":23,"oss_zip_url":79,"oss_zip_packed_at":79,"status":16,"created_at":108,"updated_at":109,"faqs":110,"releases":146},3135,"Ephibbs\u002Fflowtoken","flowtoken","A UI library to animate and style streaming LLM output","FlowToken 是一款专为 React 开发者设计的 UI 组件库，旨在优化大语言模型（LLM）流式文本输出的视觉呈现。在 AI 应用开发中，模型生成的文字往往以机械的方式逐字蹦出，缺乏流畅感。FlowToken 通过提供丰富的动画效果（如淡入、模糊显现、打字机效果、文字翻转等），让文本随着生成过程平滑、动态地展示，显著提升了用户的阅读体验和交互质感。\n\n该工具特别适合前端工程师和全栈开发者使用，尤其是那些正在构建聊天机器人、AI 助手或任何需要实时展示生成内容的应用团队。它不仅能轻松集成到现有项目中，还原生支持 Markdown 渲染，方便直接展示格式化文本和代码块。\n\nFlowToken 的技术亮点在于其高度的可定制性与灵活性。开发者可以精细控制动画的速度、时序函数以及文本分割方式（按字或按词）。更独特的是，它支持自定义组件映射，允许开发者定义特殊的 XML 标签，让 LLM 输出的特定结构直接渲染为复杂的 React 组件，实现了内容与交互逻辑的深度结合。作为一个轻量级且响应式的库，FlowToken 兼容现代主流浏览器，是打造现代化 AI 界面不可或缺的工具。","# FlowToken 🌊\n### A smooth Animation Library for LLM Text Streaming\n\n![flow token demo](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FEphibbs_flowtoken_readme_750179791e12.gif)\n\nFlowToken is a React component library designed to enhance the visual presentation of text streaming from large language models (LLMs). This library offers a variety of animations that make the text appear smoothly and dynamically, providing an engaging user experience.\n\n## Demo\n\nTry the demo here: [Demo link](https:\u002F\u002Fnextjs-omega-five-46.vercel.app\u002F)\n\n## Features\n\nFlowToken includes several key features:\n\n- **Customizable Animations:** A range of animations such as fade, blur-in, drop-in, slide from the left, typewriter effect, word pull-up, flip text, gradual spacing, and more.\n- **Smooth Text Streaming:** Options to control the speed and manner of text appearance to handle the variability in text generation speed.\n- **Responsive and Lightweight:** Optimized for performance and compatibility across all modern browsers.\n\n## Installation\n\nInstall FlowToken using npm:\n\n```bash\nnpm install flowtoken\n```\n\nOr using yarn:\n\n```bash\nyarn add flowtoken\n```\n\n## Usage\n\n## Markdown Support\n\nTo use markdown, import the `AnimatedMarkdown` component.\n\n```jsx\nimport React from 'react';\n\nimport { AnimatedMarkdown } from 'flowtoken';\n\u002F\u002F import the flowtoken css in order to use the animations\nimport 'flowtoken\u002Fdist\u002Fstyles.css';\n\nconst App = () => {\n  return (\n    \u003CAnimatedMarkdown\n      content=\"## Hello, world!\"\n      animation=\"fadeIn\"\n      animationDuration=\"0.5s\"\n      animationTimingFunction=\"ease-in-out\"\n    \u002F>\n  );\n};\n\nexport default App;\n```\n\n### Real World with Vercel AI SDK\n\n```jsx\n'use client'\n\nimport { useChat } from 'ai\u002Freact'\nimport { AnimatedMarkdown } from 'flowtoken';\nimport 'flowtoken\u002Fdist\u002Fstyles.css';\n\nexport default function Chat() {\n  const { messages, input, handleInputChange, handleSubmit } = useChat()\n\n  return (\n    \u003Cdiv>\n      {messages.map(m => (\n        \u003Cdiv key={m.id}>\n          {m.role}: \u003CAnimatedMarkdown content={m.content}\n            animation=\"dropIn\"\n            animationDuration=\"0.5s\"\n            animationTimingFunction=\"ease-in-out\"\n            \u002F>\n        \u003C\u002Fdiv>\n      ))}\n\n      \u003Cform onSubmit={handleSubmit}>\n        \u003Clabel>\n          Say something...\n          \u003Cinput\n            value={input}\n            onChange={handleInputChange}\n          \u002F>\n        \u003C\u002Flabel>\n      \u003C\u002Fform>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Custom Components\n\nYou can use custom components by passing a `customComponents` prop to the `AnimatedMarkdown` component where the key is xml tag (ex. `MyComponent`) to match and the value is the component to render. Then just prompt your LLM to output the custom component syntax and it will be rendered with your custom component.\n\n```jsx\nconst customComponents = {\n  'customcomponent': ({ animateText, node, children, ...props }: any) => {\n    return (\n      \u003C>\n        {animateText(\u003Cdiv {...props}>{children}\u003C\u002Fdiv>)}\n      \u003C\u002F>\n    )\n  },\n}\n...\n\u003CAnimatedMarkdown content=\"Hello, world! \u003Ccustomcomponent>This is a custom component\u003C\u002Fcustomcomponent>\" customComponents={customComponents} \u002F>\n```\n\n#### Example\n\nThis is an example of a custom component. \u003CArticlePreview triggerText=\"Github\" title=\"FlowToken\" description=\"This is an example of a custom component.\" link=\"https:\u002F\u002Fgithub.com\u002Fdata-maki\u002Fflowtoken\" \u002F>\n\n\n### AnimatedMarkdown Props\n\n- **content** (string): The text to be displayed.  \n- **sep** (`\"word\"` | `\"char\"`): How to split and animate the content. Defaults to `\"word\"`.  \n- **animation** (string | `null`): Name of the CSS animation to apply (e.g. `fadeIn`, `dropIn`). Set to `null` to disable animations on completed messages.  \n- **animationDuration** (string): CSS duration of the animation (e.g. `0.6s`).  \n- **animationTimingFunction** (string): CSS timing function for the animation (e.g. `ease`, `ease-in-out`).  \n- **codeStyle** (object): The syntax-highlighter style object to use for code blocks.  \n- **customComponents** (Record\u003Cstring, React.ComponentType>):  \n  Map of regex patterns or custom tag names to React components. Use this to render arbitrary LLM-emitted syntax.  \n- **imgHeight** (string): Default height for rendered images (e.g. `200px`).  \n\n## Animations\n\nFlowToken supports various CSS animations:\n- **fadeIn**\n- **blurIn**\n- **typewriter**\n- **slideInFromLeft**\n- **fadeAndScale**\n- **rotateIn**\n- **bounceIn**\n- **elastic**\n- **highlight**\n- **blurAndSharpen**\n- **dropIn**\n- **slideUp**\n- **wave**\n\nFor custom animations, define your keyframes in CSS wrap it in a class and pass the animation name to the `animation` prop.\n\n```css\n\u002F* custom-styles.css *\u002F\n\n@keyframes custom-animation {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.custom-animation {\n  animation: custom-animation 1s ease-in-out;\n}\n```\n\n```jsx\nimport 'custom-styles.css';\n...\n\u003CAnimatedMarkdown content=\"Hello, world!\" animation=\"custom-animation\" \u002F>\n```\n\n### Notes\n\nTo lower the memory footprint, disable animations by setting the `animation` parameter to `null` on any completed messages.\n\nIf using tailwind with generated markdown, be sure to setup tailwind typography: [https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Ftailwindcss-typography](here)\n\nand add `prose lg:prose-md prose-pre:p-0 prose-pre:m-0 prose-pre:bg-transparent` to your flowtoken markdown container.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit pull requests or open issues to suggest features or report bugs.\n\n## License\n\nFlowToken is MIT licensed.\n","# FlowToken 🌊\n### 用于 LLM 文本流式传输的流畅动画库\n\n![flow token 演示](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FEphibbs_flowtoken_readme_750179791e12.gif)\n\nFlowToken 是一个 React 组件库，旨在提升大型语言模型（LLM）文本流式传输的视觉呈现效果。该库提供了多种动画效果，使文本以平滑、动态的方式呈现，从而为用户提供更具吸引力的交互体验。\n\n## 演示\n\n在此尝试演示：[演示链接](https:\u002F\u002Fnextjs-omega-five-46.vercel.app\u002F)\n\n## 特性\n\nFlowToken 包含以下主要特性：\n\n- **可定制的动画**：提供淡入、模糊进入、下拉进入、从左侧滑入、打字机效果、逐词拉起、翻转文本、渐进式间距等多种动画。\n- **流畅的文本流式传输**：支持控制文本出现的速度和方式，以适应不同文本生成速度的变化。\n- **响应式且轻量级**：针对性能进行了优化，并兼容所有现代浏览器。\n\n## 安装\n\n使用 npm 安装 FlowToken：\n\n```bash\nnpm install flowtoken\n```\n\n或使用 yarn：\n\n```bash\nyarn add flowtoken\n```\n\n## 使用方法\n\n## Markdown 支持\n\n要使用 Markdown，需导入 `AnimatedMarkdown` 组件。\n\n```jsx\nimport React from 'react';\n\nimport { AnimatedMarkdown } from 'flowtoken';\n\u002F\u002F 导入 flowtoken 的 CSS 样式以便使用动画\nimport 'flowtoken\u002Fdist\u002Fstyles.css';\n\nconst App = () => {\n  return (\n    \u003CAnimatedMarkdown\n      content=\"## Hello, world!\"\n      animation=\"fadeIn\"\n      animationDuration=\"0.5s\"\n      animationTimingFunction=\"ease-in-out\"\n    \u002F>\n  );\n};\n\nexport default App;\n```\n\n### Vercel AI SDK 实际应用\n\n```jsx\n'use client'\n\nimport { useChat } from 'ai\u002Freact'\nimport { AnimatedMarkdown } from 'flowtoken';\nimport 'flowtoken\u002Fdist\u002Fstyles.css';\n\nexport default function Chat() {\n  const { messages, input, handleInputChange, handleSubmit } = useChat()\n\n  return (\n    \u003Cdiv>\n      {messages.map(m => (\n        \u003Cdiv key={m.id}>\n          {m.role}: \u003CAnimatedMarkdown content={m.content}\n            animation=\"dropIn\"\n            animationDuration=\"0.5s\"\n            animationTimingFunction=\"ease-in-out\"\n            \u002F>\n        \u003C\u002Fdiv>\n      ))}\n\n      \u003Cform onSubmit={handleSubmit}>\n        \u003Clabel>\n          说点什么...\n          \u003Cinput\n            value={input}\n            onChange={handleInputChange}\n          \u002F>\n        \u003C\u002Flabel>\n      \u003C\u002Fform>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### 自定义组件\n\n可以通过向 `AnimatedMarkdown` 组件传递 `customComponents` 属性来使用自定义组件，其中键为 XML 标签（例如 `MyComponent`），用于匹配，值则是要渲染的组件。只需让您的 LLM 输出自定义组件的语法，它就会以您自定义的组件形式呈现出来。\n\n```jsx\nconst customComponents = {\n  'customcomponent': ({ animateText, node, children, ...props }: any) => {\n    return (\n      \u003C>\n        {animateText(\u003Cdiv {...props}>{children}\u003C\u002Fdiv>)}\n      \u003C\u002F>\n    )\n  },\n}\n...\n\u003CAnimatedMarkdown content=\"Hello, world! \u003Ccustomcomponent>这是一个自定义组件\u003C\u002Fcustomcomponent>\" customComponents={customComponents} \u002F>\n```\n\n#### 示例\n\n这是一个自定义组件的示例。 \u003CArticlePreview triggerText=\"Github\" title=\"FlowToken\" description=\"这是一个自定义组件的示例。\" link=\"https:\u002F\u002Fgithub.com\u002Fdata-maki\u002Fflowtoken\" \u002F>\n\n\n### AnimatedMarkdown 属性\n\n- **content**（字符串）：要显示的文本。\n- **sep**（`\"word\"` | `\"char\"`）：如何分割并动画化内容。默认值为 `\"word\"`。\n- **animation**（字符串 | `null`）：要应用的 CSS 动画名称（例如 `fadeIn`、`dropIn`）。设置为 `null` 可禁用已完成消息的动画。\n- **animationDuration**（字符串）：动画的 CSS 持续时间（例如 `0.6s`）。\n- **animationTimingFunction**（字符串）：动画的 CSS 时间函数（例如 `ease`、`ease-in-out`）。\n- **codeStyle**（对象）：用于代码块的语法高亮样式对象。\n- **customComponents**（Record\u003Cstring, React.ComponentType>）：\n  正则表达式模式或自定义标签名到 React 组件的映射。可用于渲染 LLM 输出的任意语法。\n- **imgHeight**（字符串）：渲染图像的默认高度（例如 `200px`）。\n\n## 动画效果\n\nFlowToken 支持多种 CSS 动画：\n- **fadeIn**\n- **blurIn**\n- **typewriter**\n- **slideInFromLeft**\n- **fadeAndScale**\n- **rotateIn**\n- **bounceIn**\n- **elastic**\n- **highlight**\n- **blurAndSharpen**\n- **dropIn**\n- **slideUp**\n- **wave**\n\n对于自定义动画，可在 CSS 中定义关键帧，将其包裹在类中，然后将动画名称传递给 `animation` 属性。\n\n```css\n\u002F* custom-styles.css *\u002F\n\n@keyframes custom-animation {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.custom-animation {\n  animation: custom-animation 1s ease-in-out;\n}\n```\n\n```jsx\nimport 'custom-styles.css';\n...\n\u003CAnimatedMarkdown content=\"Hello, world!\" animation=\"custom-animation\" \u002F>\n```\n\n### 注意事项\n\n为降低内存占用，可在任何已完成的消息上将 `animation` 参数设置为 `null` 来禁用动画。\n\n如果将 Tailwind 与生成的 Markdown 一起使用，请确保配置 Tailwind Typography：[https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Ftailwindcss-typography](此处)\n\n并在 FlowToken 的 Markdown 容器中添加 `prose lg:prose-md prose-pre:p-0 prose-pre:m-0 prose-pre:bg-transparent`。\n\n## 贡献\n\n欢迎贡献！请随时提交 Pull Request 或打开 Issue，以提出功能建议或报告 Bug。\n\n## 许可证\n\nFlowToken 采用 MIT 许可证。","# FlowToken 快速上手指南\n\nFlowToken 是一个专为大语言模型（LLM）文本流设计的 React 动画库，能让 AI 生成的文字以平滑、动态的特效呈现，显著提升用户体验。\n\n## 环境准备\n\n在开始之前，请确保你的开发环境满足以下要求：\n\n*   **Node.js**: 建议版本 16.0 或更高。\n*   **框架**: 适用于 React 项目（支持 Next.js, Vite, Create React App 等）。\n*   **依赖管理**: npm 或 yarn。\n*   **样式支持**: 若需渲染 Markdown 样式，建议配置 Tailwind CSS Typography 插件（可选，但推荐）。\n\n## 安装步骤\n\n使用 npm 或 yarn 将 `flowtoken` 添加到你的项目中。\n\n**使用 npm:**\n```bash\nnpm install flowtoken\n```\n\n**使用 yarn:**\n```bash\nyarn add flowtoken\n```\n\n> **提示**：国内开发者若遇到下载缓慢问题，可配置淘宝镜像源：\n> `npm config set registry https:\u002F\u002Fregistry.npmmirror.com`\n\n## 基本使用\n\n### 1. 引入组件与样式\n在使用组件前，务必同时导入组件和对应的 CSS 样式文件，否则动画效果无法生效。\n\n```jsx\nimport { AnimatedMarkdown } from 'flowtoken';\nimport 'flowtoken\u002Fdist\u002Fstyles.css';\n```\n\n### 2. 最简单的示例\n以下是一个基础用法，展示带有淡入动画的文本：\n\n```jsx\nconst App = () => {\n  return (\n    \u003CAnimatedMarkdown\n      content=\"## Hello, world!\"\n      animation=\"fadeIn\"\n      animationDuration=\"0.5s\"\n      animationTimingFunction=\"ease-in-out\"\n    \u002F>\n  );\n};\n\nexport default App;\n```\n\n### 3. 结合 Vercel AI SDK (实战场景)\n如果你正在构建 AI 聊天应用，可以结合 `useChat` 钩子实时渲染流式数据：\n\n```jsx\n'use client'\n\nimport { useChat } from 'ai\u002Freact'\nimport { AnimatedMarkdown } from 'flowtoken';\nimport 'flowtoken\u002Fdist\u002Fstyles.css';\n\nexport default function Chat() {\n  const { messages, input, handleInputChange, handleSubmit } = useChat()\n\n  return (\n    \u003Cdiv>\n      {messages.map(m => (\n        \u003Cdiv key={m.id}>\n          {m.role}: \u003CAnimatedMarkdown content={m.content}\n            animation=\"dropIn\"\n            animationDuration=\"0.5s\"\n            animationTimingFunction=\"ease-in-out\"\n            \u002F>\n        \u003C\u002Fdiv>\n      ))}\n\n      \u003Cform onSubmit={handleSubmit}>\n        \u003Clabel>\n          Say something...\n          \u003Cinput\n            value={input}\n            onChange={handleInputChange}\n          \u002F>\n        \u003C\u002Flabel>\n      \u003C\u002Fform>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### 核心参数说明\n*   `content`: 需要显示的文本内容（支持 Markdown）。\n*   `animation`: 动画名称（如 `fadeIn`, `typewriter`, `blurIn` 等），设为 `null` 可禁用动画。\n*   `animationDuration`: 动画持续时间（如 `0.5s`）。\n*   `sep`: 动画粒度，可选 `\"word\"` (按词) 或 `\"char\"` (按字符)，默认为 `\"word\"`。\n\nFlowToken 内置了多种动画效果，包括 `fadeIn`, `blurIn`, `typewriter`, `slideInFromLeft`, `dropIn` 等，也可通过自定义 CSS Keyframes 扩展专属动画。","某初创团队正在开发一款基于 LLM 的实时编程辅导助手，用户期望在对话中获得流畅的代码讲解与交互式组件展示。\n\n### 没有 flowtoken 时\n- **视觉体验生硬**：LLM 生成的文字逐字机械弹出，缺乏过渡动画，让用户感觉像是在调试终端而非与人交流。\n- **长文本阅读疲劳**：大段代码或解释性文字瞬间堆砌或无序跳动，用户难以捕捉重点，容易产生视觉疲劳。\n- **交互形式单一**：无法在流式输出中直接渲染自定义的交互式卡片（如代码预览、链接摘要），只能显示纯文本占位符。\n- **品牌感缺失**：呆板的默认字体和布局无法体现产品的精致度，降低了用户对 AI 回答质量的信任感。\n\n### 使用 flowtoken 后\n- **动效自然流畅**：利用 `dropIn` 或 `typewriter` 等预设动画，让文字如行云流水般浮现，营造出“专家正在娓娓道来”的沉浸感。\n- **节奏可控舒适**：通过 `animationDuration` 精细调节文字出现速度，配合 `sep=\"word\"` 按词分割，完美匹配人类阅读节奏。\n- **富交互即时呈现**：借助 `customComponents` 功能，当 AI 输出特定标签时，直接动态渲染出带有悬停效果的代码卡片或文章预览组件。\n- **品牌形象提升**：统一的缓动函数（`ease-in-out`）和优雅的淡入效果，显著提升了界面的现代感和专业度。\n\nflowtoken 将冰冷的数据流转化为具有情感温度的视觉对话，极大提升了用户对 AI 助手的留存意愿与信任度。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FEphibbs_flowtoken_b46a9ae8.png","Ephibbs","Evan Phibbs","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002FEphibbs_7d7ae189.png","ML Engineer | Founder",null,"evanbuilds.xyz","https:\u002F\u002Fgithub.com\u002FEphibbs",[83,87,91],{"name":84,"color":85,"percentage":86},"TypeScript","#3178c6",94.7,{"name":88,"color":89,"percentage":90},"CSS","#663399",4.5,{"name":92,"color":93,"percentage":94},"JavaScript","#f1e05a",0.8,519,31,"2026-04-01T18:40:23",1,"","未说明",{"notes":102,"python":100,"dependencies":103},"这是一个前端 React 组件库，用于增强 LLM 文本流的动画效果，无需后端运行环境或 GPU。需通过 npm 或 yarn 安装。若使用 Tailwind CSS 渲染 Markdown，需额外配置 tailwindcss-typography 插件并添加特定类名。为降低内存占用，建议在消息完成时将 animation 参数设为 null。",[104,105,106],"react","ai (Vercel AI SDK)","tailwindcss-typography (可选)",[26,13],"2026-03-27T02:49:30.150509","2026-04-06T05:16:48.064668",[111,116,121,126,131,136,141],{"id":112,"question_zh":113,"answer_zh":114,"source_url":115},14461,"控制台报错 'Check the render method of `p`' 且提示缺少 key 属性，该如何修复？","这是库内部处理段落（p 标签）子元素时的已知问题。该问题已在主分支修复并包含在最新版本中。解决方法是更新 flowtoken 包到最新版，并确保在你的项目中正确引入了库配套的 CSS 文件（通常是 `import 'flowtoken\u002Fdist\u002Fcomponents\u002Fanimations.css'` 或类似路径），以保证内部组件渲染正常。","https:\u002F\u002Fgithub.com\u002FEphibbs\u002Fflowtoken\u002Fissues\u002F14",{"id":117,"question_zh":118,"answer_zh":119,"source_url":120},14455,"在 Next.js 15 (Turbopack) 中使用 flowtoken 时遇到 CSS 模块不可用的错误怎么办？","维护者已重新重构代码以兼容 Next.js 15。请确保将 flowtoken 包升级到最新版本（至少包含 #18 合并后的版本）。如果问题仍然存在，请检查是否正确导入了所需的 CSS 文件（animations.css），因为该组件依赖此样式文件进行动画渲染。","https:\u002F\u002Fgithub.com\u002FEphibbs\u002Fflowtoken\u002Fissues\u002F13",{"id":122,"question_zh":123,"answer_zh":124,"source_url":125},14456,"如何防止动画文本中的单词或字母被错误地换行打断？","可以通过设置 `sep=\"word\"` 属性来确保按单词而不是按字符进行分割和动画，从而避免单个字母换行。例如：`\u003CStreamText sep=\"word\" ... \u002F>`。如果仍然出现布局问题，可能需要检查父容器的 CSS `white-space` 属性或使用包装器 div 进行调整。","https:\u002F\u002Fgithub.com\u002FEphibbs\u002Fflowtoken\u002Fissues\u002F9",{"id":127,"question_zh":128,"answer_zh":129,"source_url":130},14457,"如何使用 AnimatedMarkdown 渲染自定义的 Markdown 组件（如引用、脚注）？","该库支持传入自定义组件。你可以利用 `react-markdown` 的 `components` 属性，将特定的 HTML 标签映射到自定义的 React 组件。例如，可以定义一个对象 `{ p: CustomParagraph, a: CustomLink }` 并传递给组件。这使得实现类似 Perplexity 的引用卡片或特定正则匹配（如脚注 `[^1]`）的自定义渲染成为可能。相关功能已在 v1.0.18 及更高版本中可用。","https:\u002F\u002Fgithub.com\u002FEphibbs\u002Fflowtoken\u002Fissues\u002F3",{"id":132,"question_zh":133,"answer_zh":134,"source_url":135},14458,"使用 Markdown 动画组件时，文本在生成初期会出现跳动或移位现象，如何解决？","这通常是由不必要的重新渲染或内部字符串包裹逻辑引起的。维护者在 v1.0.18 版本中修复了导致此问题的 bug。如果遇到此问题，请先升级到最新版本。如果是列表项（li）导致的跳动，可以尝试自定义 `li` 组件，判断子元素是否为纯字符串或内联元素，仅在必要时包裹 `\u003Cp>` 标签，以避免布局冲突。","https:\u002F\u002Fgithub.com\u002FEphibbs\u002Fflowtoken\u002Fissues\u002F2",{"id":137,"question_zh":138,"answer_zh":139,"source_url":140},14459,"flowtoken 是否支持非英语语言（如印地语、中文等）的字符动画？","早期版本在处理非英语字符（多字节字符）时可能存在显示错误。该问题已在 v1.0.35 版本中通过更新底层正则表达式逻辑得到修复。请确保将库升级到 1.0.35 或更高版本，即可正常支持多语言内容的逐字或逐词动画。","https:\u002F\u002Fgithub.com\u002FEphibbs\u002Fflowtoken\u002Fissues\u002F17",{"id":142,"question_zh":143,"answer_zh":144,"source_url":145},14460,"在使用 map 渲染消息列表时，出现 'Each child in a list should have a unique key prop' 警告怎么办？","这个警告通常是因为内部组件在生成列表项时缺少唯一的 key。维护者已在 v1.0.35 版本中修复了库内部的 key 分配问题。请升级 flowtoken 到最新版本。同时，确保你在外层映射消息列表时（如 `messages.map`），给每个包裹 `AnimatedMarkdown` 的父级 div 设置了唯一的 `key`（例如 `key={msg.id}`）。此外，请确认已正确导入库所需的 CSS 文件。","https:\u002F\u002Fgithub.com\u002FEphibbs\u002Fflowtoken\u002Fissues\u002F16",[147,152,157,162],{"id":148,"version":149,"summary_zh":150,"released_at":151},81371,"v1.0.35","- 代码大幅简化\n- 支持 NEXT 15\n- 图片动画更流畅\n- 对自定义组件的支持更好","2025-05-07T07:02:31",{"id":153,"version":154,"summary_zh":155,"released_at":156},81372,"v1.0.20","修复分词 #9 ","2024-12-23T08:00:31",{"id":158,"version":159,"summary_zh":160,"released_at":161},81373,"v1.0.19","已添加针对渲染列表的修复，避免了不必要的换行，感谢 @leo-paz！","2024-12-23T07:30:25",{"id":163,"version":164,"summary_zh":165,"released_at":166},81374,"v1.0.18","FlowToken 首次正式发布！\r\n1. 动画流式 Markdown 渲染\r\n2. 自定义组件渲染\r\n3. 可配置的动画","2024-11-05T08:43:30"]