[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-antgroup--FluidMarkdown":3,"tool-antgroup--FluidMarkdown":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 真正成长为懂上",140436,2,"2026-04-05T23:32:43",[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":75,"owner_website":80,"owner_url":81,"languages":82,"stars":121,"forks":122,"last_commit_at":123,"license":124,"difficulty_score":125,"env_os":126,"env_gpu":127,"env_ram":127,"env_deps":128,"category_tags":134,"github_topics":135,"view_count":23,"oss_zip_url":79,"oss_zip_packed_at":79,"status":16,"created_at":144,"updated_at":145,"faqs":146,"releases":176},3618,"antgroup\u002FFluidMarkdown","FluidMarkdown","Streaming Markdown engine for AI chat on mobile.","FluidMarkdown 是一款专为移动端 AI 聊天应用打造的流式 Markdown 渲染引擎。在大型语言模型生成回复时，内容通常是逐字输出的，传统渲染方式往往需要等待全部内容生成完毕才能显示，导致用户体验不够流畅。FluidMarkdown 正是为了解决这一痛点，它支持在 Android、iOS 和鸿蒙系统上，将 AI 生成的 Markdown 内容实时、渐进式地渲染到界面中，让用户能像打字机一样即时看到格式精美的回复。\n\n这款工具非常适合原生移动开发者使用，尤其是那些正在构建集成大模型能力的智能对话应用的团队。其核心技术亮点在于基于成熟的 CommonMark 解析库，不仅完整支持标题、列表、代码块、数学公式等标准 Markdown 语法，还兼容多种 HTML 标签及自定义扩展。开发者可以灵活定制样式主题，精确控制流式渲染的速度，并能轻松处理链接点击、可见性回调等交互事件。通过提供结构化的样式模型和清晰的 API 接口，FluidMarkdown 帮助开发者高效实现高性能、高定制化的 AI 对话界面，显著提升终端用户的交互体验。","# FluidMarkdown\nWe are committed to enabling the streaming rendering of Markdown content generated by large language models on the client side within AI-driven business applications.\n\n# Overview\nThis library is designed for native Android, iOS and HarmonyOS developers. Built on the open-source CommonMark parsing library, it supports core Markdown syntax and selected HTML tags, rendering them progressively within UI components. It exposes Markdown styling as a structured model, enabling customization and integration into your specific application contexts. For faster integration, refer to the sample code to preview the rendering effect based on input text.\n\n# Features\n+ Support for markdown syntax: titles, paragraphs, ordered lists, unordered lists, tables, code blocks, mathematical formulas, inline code blocks, quotes, dividing lines, footnotes, links, and images.\n+ Support for HTML tags:`\u003Cs>` `\u003Csup>` `\u003Csub>` `\u003Cmark>` `\u003Ca>` `\u003Cspan>` `\u003Ccite>` `\u003Cdel>` `\u003Cfont>` `\u003Cimg>` `\u003Cu>`, etc.\n+ Streaming rendering and one-time full rendering modes.\n+ Customizable rendering styles for Markdown syntax.\n+ Adjustable streaming speed via custom parameters.\n+ Event support for clickable elements, including click handling, visibility callbacks, and rendering status updates\u003Cfont style=\"color:rgb(38, 38, 38);\">, etc.\n+ Added some new extended HTML tags such as `\u003Ciconlink>` `\u003Cicon>`in `AMHTMLTransformer` class.\n\n# Install\nThe source code of this project is open-source. For information on how to download and run the project, please refer to the file [INSTALL](https:\u002F\u002Fgithub.com\u002Fantgroup\u002FFluidMarkdown\u002Fblob\u002Fmain\u002FINSTALL.md).\n\n# Directory structure\n## iOS\n+ AntMarkdown —— a standard markdown parser and rendering module based on commonMark.\n+ FluidMarkdown —— Component for streaming output.\n\n## Android\n+ fluid-markdown —— Component for streaming output.\n+ markwon-xxx —— Syntax parsing and style rendering implementation based on the open-source markwon library.\n\n## HarmonyOS\n+ markdown —— the folder contains all the source code for the markdown component, such as syntax parsing, layout rendering, theme configuration, runtime services, etc.\n+ playground —— a demo to show markdown component feature list.\n\n``` shell\nyour\u002Fproject\u002Fmarkdown\u002Fsrc\u002Fmain\u002Fets\n├── engine\t\t\t\t\t\u002F\u002F\t[folder] engine manages all services and plugins at runtime.\n├── index.ets       \u002F\u002F  [file]   default exports.\n├── markdown.ets\t\t\u002F\u002F\t[file]   markdown component compliant with the @ComponentV2 specification.\n├── render\t\t\t\t\t\u002F\u002F\t[folder] rendering-related logic based on the StyledString mechanism.\n├── service\t\t\t\t\t\u002F\u002F\t[folder] runtime service modules, such as syntax parsing, code highlighting, etc.\n├── theme\t\t\t\t\t\t\u002F\u002F\t[folder] style and theme-related logic based on the StyledString mechanism.\n└── util\t\t\t\t\t\t\u002F\u002F\t[folder] built-in utility api.\n```\n\n# Usage\n## iOS\n+ Native API： `AMXMarkdownWidget.h` is summary header file of the open API. The following is the general calling process of streaming rendering components.\n    1. Create a TextView instance.\n    2. Generate default styles and set custom styles ( if needed )\n    3. Begin streaming the Markdown content.\n    4. Append data dynamically during rendering.\n    5. Adjust list scrolling in response to content size changes in the TextView.\n    6. Handle completion when rendering is finished.\n\n```objectivec\nAMXMarkdownTextView* contentTextView = [[AMXMarkdownTextView alloc] initWithFrame_ant_mark:CGRectMake(0, 0, screenWidht - 20 * 2, 1)];\n\n\u002F\u002F get default style config\nAMXMarkdownStyleConfig* config = [AMXMarkdownStyleConfig defaultConfig];\n\n\u002F\u002F modify code block style for example\nconfig.codeBlockConfig.backgroundColor = [UIColor greenColor];\n\n\u002F\u002F set the style with unique Id\n[[AMXRenderService shared] setMarkdownStyleWithId:config styleId:@\"demo\"];\n\n\u002F\u002F begin print\n[self.contentTextView startStreamingWithContent:@\"testing data\"];\n\n\u002F\u002F append content during printing\n[self.contentTextView addStreamContent:@\"**append test data**\"];\n\n\u002F\u002F stop print when you need\n[self.contentTextView stop];\n```\n\n```objectivec\n@interface StreamPreviewViewController ()\u003CAMXMarkdownTextViewDelegate>\n-(void)initUI\n{\n    \u002F\u002F set delegate\n    self.contentTextView.textViewDelegate = self;\n}\n\u002F\u002F size change delegate\n-(void)onSizeChange:(CGSize)size\n{\n    \u002F\u002F adjust size of AMXMarkdownTextView and container view\n    [self.contentTextView setFrame:CGRectMake(0, 0, self.contentTextView.frame.size.width, size.height)];\n    [self.containerView setContentSize:size];\n    CGPoint bottomOffset = CGPointMake(0, self.containerView.contentSize.height - self.containerView.bounds.size.height);\n    if (bottomOffset.y > 0) {\n        \u002F\u002F scroll the container view to bottom\n        [self.containerView setContentOffset:bottomOffset animated:NO];\n    }\n}\n```\n\n\n\n+ Sample Description \n    1. The `StreamPreviewViewController` class is a sample page for previewing streaming output.\n    2. The `AIChatViewController` class demonstrates FluidMarkdown usage in simulated AI conversation scenarios. Note that the conversation data is statically defined and intended solely for rendering demonstration purposes.\n\n![StreamingPreview](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fantgroup_FluidMarkdown_readme_2eaab7e8921a.gif)![AIChat](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fantgroup_FluidMarkdown_readme_b4bf31d26b6c.gif)\n\n## Android\n1. Initialize by calling AFMInitializer.init(context, backgroundTaskHandler, imageHandler, logHandler) once globally. Except for context, all other parameters can be null.\n2. Create PrinterMarkDownTextView to display markdown content.\n3. Create MarkdownStyles to set render styles.\n4. **Call PrinterMarkDownTextView.init()** to bind MarkdownStyles and ElementClickEventCallback.  Must be called, MarkdownStyles cannot be null.\n5. Set markdown content or call the print start method.\n\n```java\nAFMInitializer.init(context, null, null, null);\n\u002F\u002F Create PrinterMarkDownTextView\nPrinterMarkDownTextView markdownTextView = findViewById(R.id.markdown_view);\n\n\u002F\u002F Create MarkdownStyles，or you can also create custom styles with new MarkdownStyles()\nMarkdownStyles styles = MarkdownStyles.getDefaultStyles();\n\u002F\u002F set style sample\nstyles.linkStyle().icon(\"https:\u002F\u002Fyou_image_url\");\nstyles.setTitleStyle(0, TitleStyle.create(1.5f).icon(https:\u002F\u002Fyou_image_url));\u002F\u002F Set title level 1 style\n\n\u002F\u002F bind MarkdownStyles and ElementClickEventCallback. \nmarkdownTextView.init(styles, elementClickEventCallback);\n\u002F\u002F Set markdown content or you can call the startPrinting(content) to starting printing.\nmarkdownTextView.setMarkdownText(markdown);\n```\n\n+ Sample Description \n    - MainActivity - Markdown normal mode sample.\n    - PrinterActivity - Streaming print sample.\n    - ListActivity - Streaming print list sample.\n\n![print](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fantgroup_FluidMarkdown_readme_7081e5d4fce8.gif)![list](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fantgroup_FluidMarkdown_readme_5cd66ab8bc1e.gif)\n\n## HarmonyOS\n### Combine Markdown\n+ Import and combine the Markdown component in your page `build()` method.\n+ Bind markdown-formatted content text via the `@Param content` parameter.\n+ Handle various callback events inside the Markdown component to enhance the business interaction flow, such as `@Event onMarkdownAreaChange`, `@Event onMarkdownNodeClick`, etc.\n\n``` ts\nimport { Markdown, EMarkdownMode } from 'fluid-markdown';\n\n@ComponentV2\nexport struct MyComponent {\n  @Param content: string;\n  private scroller: Scroller = new Scroller();\n\n  build() {\n      Scroll(this.scroller) {\n        Markdown({\n          content: this.content,\n          mode: EMarkdownMode.Normal,\n          onMarkdownAreaChange: () => {},\n          onMarkdownNodeClick: data => {},\n        })\n          .margin(12)\n      }\n      .width('100%')\n      .height('100%')\n      .scrollable(ScrollDirection.Vertical)\n      .margin(12)\n  }\n}\n```\n\n### Streaming Output\n+ Enable streaming output mode by setting the `@Param` mode parameter to `EMarkdownMode.Typing`.\n+ Create a `MarkdownController` instance and bind it to the `@Param controller` parameter to manage the streaming output process, such as `update()`, `pause()`, `resume()`, etc.\n+ Note: Control methods of `MarkdownController`, such as `update()`, can only be reliably executed within the `@Event onMarkdownTypingReady` callback event.\n+ Note: The `@Param content` parameter will be ignored in streaming output mode.\n\n``` ts\nimport { \n  Markdown, EMarkdownMode, MarkdownController, ETypingMode,\n} from 'fluid-markdown';\n\n@ComponentV2\nexport struct MyComponent {\n  private scroller: Scroller = new Scroller();\n  private markdownController: MarkdownController = new MarkdownController();\n\n  build() {\n      Scroll(this.scroller) {\n        Markdown({\n          controller: this.markdownController,\n          mode: EMarkdownMode.Typing,\n          onMarkdownTypingReady: () => {\n            this.markdownController.typing.update('Hello FluidMarkdown', ETypingMode.Begin);\n          },\n        })\n          .margin(12)\n      }\n      .width('100%')\n      .height('100%')\n      .scrollable(ScrollDirection.Vertical)\n      .margin(12)\n  }\n}\n```\n\n### Theme Config\n+ Create a new Engine instance and bind it to the `@Param engine` parameter.\n+ Set `ITheme` properties for theme styling through the `theme service` within the Engine.\n\n``` ts\nimport { Markdown, EMarkdownMode, BaseEngine } from 'fluid-markdown';\n\n@ComponentV2\nexport struct MyComponent {\n  @Param content: string;\n  private scroller: Scroller = new Scroller();\n  private engine: BaseEngine = new BaseEngine();\n\n  aboutToAppear() {\n    this.engine.theme!.theme!.document!.font!.fontColor = Color.Red;\n  }\n  \n  build() {\n      Scroll(this.scroller) {\n        Markdown({\n          engine: this.engine,\n          content: this.content,\n          mode: EMarkdownMode.Normal,\n          onMarkdownAreaChange: () => {},\n          onMarkdownNodeClick: data => {},\n        })\n          .margin(12)\n      }\n      .width('100%')\n      .height('100%')\n      .scrollable(ScrollDirection.Vertical)\n      .margin(12)\n  }\n}\n```\n\n### Playground\nBuild and run the Playground app to try out FluidMarkdown—have fun!\n![fluid-markdown-ohos-playground](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fantgroup_FluidMarkdown_readme_6fae049b7274.png)\n\n# Known Issues\n+ Clickable elements within tables appear as plain text and are not interactive.\n+ Nested HTML tags within table cells are not supported.\n+ Tables on Android may overflow their container and do not support horizontal scrolling.\n+ LaTex capability on the HarmonyOS platform is under development and not yet available.\n+ The minimum required HarmonyOS API version is 15 or higher.\n\n# Contribute\nThe FluidMarkdown team welcomes individual or team contributions. For more informations, please refer to the file [CONTRIBUTING](https:\u002F\u002Fgithub.com\u002Fantgroup\u002FFluidMarkdown\u002Fblob\u002Fmain\u002FCONTRIBUTING.md).\n\n# Licensing\nAll source code is licensed under the Apache 2.0 license. For details, please refer to [LICENSE](https:\u002F\u002Fgithub.com\u002Fantgroup\u002FFluidMarkdown\u002Fblob\u002Fmain\u002FLICENSE).\n\nWe acknowledge the following open-source projects:\n\n+ [noties\u002FMarkwon](https:\u002F\u002Fgithub.com\u002Fnoties\u002FMarkwon)\n    - license: Apache-2.0\n+ [indragiek\u002FCocoaMarkdown](https:\u002F\u002Fgithub.com\u002Findragiek\u002FCocoaMarkdown)\n    - license: \u003Cfont style=\"color:rgb(31, 35, 40);\">MIT License\u003C\u002Ffont>\n+ [commonmark\u002Fcommonmark-spec](https:\u002F\u002Fcommonmark.org\u002F)\n    - license: \u003Cfont style=\"color:rgb(31, 35, 40);\">MIT License\u003C\u002Ffont>\n+ [https:\u002F\u002Fgithub.com\u002Fmax-lfeng\u002FiosMath\u002F](https:\u002F\u002Fgithub.com\u002Fmax-lfeng\u002FiosMath\u002F)\n    - license: \u003Cfont style=\"color:rgb(31, 35, 40);\">MIT License\u003C\u002Ffont>\n+ [https:\u002F\u002Fgithub.com\u002Fmattt\u002FOno\u002F](https:\u002F\u002Fgithub.com\u002Fmattt\u002FOno\u002F)\n    - license: \u003Cfont style=\"color:rgb(31, 35, 40);\">MIT License\u003C\u002Ffont>\n+ [markdown-it](https:\u002F\u002Fgithub.com\u002Fmarkdown-it\u002Fmarkdown-it\u002Fblob\u002Fmaster\u002FLICENSE)\n    - license: \u003Cfont style=\"color:rgb(31, 35, 40);\">MIT License\u003C\u002Ffont>\n+ [highlight.js](https:\u002F\u002Fgithub.com\u002Fhighlightjs\u002Fhighlight.js\u002Fblob\u002Fmain\u002FLICENSE)\n    - license: \u003Cfont style=\"color:rgb(31, 35, 40);\">BSD 3-Clause License\u003C\u002Ffont>\n+ [csstree](https:\u002F\u002Fgithub.com\u002Fcsstree\u002Fcsstree\u002Fblob\u002Fmaster\u002FLICENSE)\n    - license: \u003Cfont style=\"color:rgb(31, 35, 40);\">MIT License\u003C\u002Ffont>\n+ [htmlparser2](https:\u002F\u002Fgithub.com\u002Ffb55\u002Fhtmlparser2\u002Fblob\u002Fmaster\u002FLICENSE)\n    - license: \u003Cfont style=\"color:rgb(31, 35, 40);\">MIT License\u003C\u002Ffont>\n\n# Acknowledgements and References\n+ All developers who have contributed code to the Ant Markdown component\n+ Thanks to the following open source projects：\n    - [noties\u002FMarkwon](https:\u002F\u002Fgithub.com\u002Fnoties\u002FMarkwon)\n    - [indragiek\u002FCocoaMarkdown](https:\u002F\u002Fgithub.com\u002Findragiek\u002FCocoaMarkdown)\n    - [commonmark\u002Fcommonmark-spec](https:\u002F\u002Fcommonmark.org\u002F)\n    - [https:\u002F\u002Fgithub.com\u002Fmax-lfeng\u002FiosMath\u002F](https:\u002F\u002Fgithub.com\u002Fmax-lfeng\u002FiosMath\u002F)\n    - [https:\u002F\u002Fgithub.com\u002Fmattt\u002FOno\u002F](https:\u002F\u002Fgithub.com\u002Fmattt\u002FOno\u002F)\n    - [markdown-it](https:\u002F\u002Fgithub.com\u002Fmarkdown-it\u002Fmarkdown-it\u002F)\n    - [highlight.js](https:\u002F\u002Fgithub.com\u002Fhighlightjs\u002Fhighlight.js\u002F)\n    - [csstree](https:\u002F\u002Fgithub.com\u002Fcsstree\u002Fcsstree\u002F)\n    - [htmlparser2](https:\u002F\u002Fgithub.com\u002Ffb55\u002Fhtmlparser2\u002F)\n\n\n","# FluidMarkdown\n我们致力于在人工智能驱动的业务应用中，实现大型语言模型生成的Markdown内容在客户端上的流式渲染。\n\n# 概述\n本库专为原生Android、iOS和HarmonyOS开发者设计。基于开源的CommonMark解析库构建，支持核心Markdown语法及部分HTML标签，并在UI组件中逐步渲染这些内容。它将Markdown样式暴露为结构化模型，便于自定义并集成到您的特定应用环境中。为了加快集成速度，您可以参考示例代码，根据输入文本预览渲染效果。\n\n# 特性\n+ 支持Markdown语法：标题、段落、有序列表、无序列表、表格、代码块、数学公式、行内代码块、引用、分隔线、脚注、链接和图片。\n+ 支持HTML标签：`\u003Cs>` `\u003Csup>` `\u003Csub>` `\u003Cmark>` `\u003Ca>` `\u003Cspan>` `\u003Ccite>` `\u003Cdel>` `\u003Cfont>` `\u003Cimg>` `\u003Cu>` 等。\n+ 流式渲染与一次性完整渲染模式。\n+ Markdown语法的渲染样式可自定义。\n+ 通过自定义参数调整流式渲染速度。\n+ 对可点击元素的支持事件，包括点击处理、可见性回调及渲染状态更新等。\n+ 在`AMHTMLTransformer`类中新增了一些扩展HTML标签，如`\u003Ciconlink>` `\u003Cicon>`。\n\n# 安装\n该项目的源代码是开源的。有关如何下载和运行该项目的信息，请参阅文件[INSTALL](https:\u002F\u002Fgithub.com\u002Fantgroup\u002FFluidMarkdown\u002Fblob\u002Fmain\u002FINSTALL.md)。\n\n# 目录结构\n## iOS\n+ AntMarkdown —— 基于CommonMark的标准Markdown解析与渲染模块。\n+ FluidMarkdown —— 用于流式输出的组件。\n\n## Android\n+ fluid-markdown —— 用于流式输出的组件。\n+ markwon-xxx —— 基于开源markwon库的语法解析和样式渲染实现。\n\n## HarmonyOS\n+ markdown —— 该文件夹包含Markdown组件的所有源代码，例如语法解析、布局渲染、主题配置、运行时服务等。\n+ playground —— 一个演示程序，用于展示Markdown组件的功能列表。\n\n``` shell\nyour\u002Fproject\u002Fmarkdown\u002Fsrc\u002Fmain\u002Fets\n├── engine\t\t\t\t\t\u002F\u002F\t[文件夹] 引擎管理运行时的所有服务和插件。\n├── index.ets       \u002F\u002F  [文件]   默认导出。\n├── markdown.ets\t\t\u002F\u002F\t[文件]   符合@ComponentV2规范的Markdown组件。\n├── render\t\t\t\t\t\u002F\u002F\t[文件夹] 基于StyledString机制的渲染相关逻辑。\n├── service\t\t\t\t\t\u002F\u002F\t[文件夹] 运行时服务模块，如语法解析、代码高亮等。\n├── theme\t\t\t\t\t\t\u002F\u002F\t[文件夹] 基于StyledString机制的样式和主题相关逻辑。\n└── util\t\t\t\t\t\t\u002F\u002F\t[文件夹] 内置工具API。\n```\n\n# 使用方法\n## iOS\n+ 原生API：`AMXMarkdownWidget.h` 是公开API的汇总头文件。以下是流式渲染组件的一般调用流程：\n    1. 创建一个TextView实例。\n    2. 生成默认样式并设置自定义样式（如果需要）。\n    3. 开始流式渲染Markdown内容。\n    4. 在渲染过程中动态追加数据。\n    5. 根据TextView中内容大小的变化调整列表滚动。\n    6. 渲染完成后处理完成事件。\n\n```objectivec\nAMXMarkdownTextView* contentTextView = [[AMXMarkdownTextView alloc] initWithFrame_ant_mark:CGRectMake(0, 0, screenWidht - 20 * 2, 1)];\n\n\u002F\u002F 获取默认样式配置\nAMXMarkdownStyleConfig* config = [AMXMarkdownStyleConfig defaultConfig];\n\n\u002F\u002F 以代码块样式为例进行修改\nconfig.codeBlockConfig.backgroundColor = [UIColor greenColor];\n\n\u002F\u002F 设置具有唯一ID的样式\n[[AMXRenderService shared] setMarkdownStyleWithId:config styleId:@\"demo\"];\n\n\u002F\u002F 开始打印\n[self.contentTextView startStreamingWithContent:@\"testing data\"];\n\n\u002F\u002F 打印过程中追加内容\n[self.contentTextView addStreamContent:@\"**append test data**\"];\n\n\u002F\u002F 需要时停止打印\n[self.contentTextView stop];\n```\n\n```objectivec\n@interface StreamPreviewViewController ()\u003CAMXMarkdownTextViewDelegate>\n-(void)initUI\n{\n    \u002F\u002F 设置代理\n    self.contentTextView.textViewDelegate = self;\n}\n\u002F\u002F 尺寸变化代理\n-(void)onSizeChange:(CGSize)size\n{\n    \u002F\u002F 调整AMXMarkdownTextView和容器视图的尺寸\n    [self.contentTextView setFrame:CGRectMake(0, 0, self.contentTextView.frame.size.width, size.height)];\n    [self.containerView setContentSize:size];\n    CGPoint bottomOffset = CGPointMake(0, self.containerView.contentSize.height - self.containerView.bounds.size.height);\n    if (bottomOffset.y > 0) {\n        \u002F\u002F 滚动容器视图到底部\n        [self.containerView setContentOffset:bottomOffset animated:NO];\n    }\n}\n```\n\n\n\n+ 示例说明 \n    1. `StreamPreviewViewController` 类是一个用于预览流式输出的示例页面。\n    2. `AIChatViewController` 类展示了FluidMarkdown在模拟AI对话场景中的使用。请注意，对话数据是静态定义的，仅用于渲染演示目的。\n\n![流式预览](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fantgroup_FluidMarkdown_readme_2eaab7e8921a.gif)![AI聊天](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fantgroup_FluidMarkdown_readme_b4bf31d26b6c.gif)\n\n## Android\n1. 全局范围内只需调用一次AFMInitializer.init(context, backgroundTaskHandler, imageHandler, logHandler)进行初始化。除context外，其他参数均可为空。\n2. 创建PrinterMarkDownTextView来显示Markdown内容。\n3. 创建MarkdownStyles来设置渲染样式。\n4. **调用PrinterMarkDownTextView.init()** 绑定MarkdownStyles和ElementClickEventCallback。此步骤必须执行，且MarkdownStyles不能为null。\n5. 设置Markdown内容或直接调用startPrinting(content)开始打印。\n\n```java\nAFMInitializer.init(context, null, null, null);\n\u002F\u002F 创建PrinterMarkDownTextView\nPrinterMarkDownTextView markdownTextView = findViewById(R.id.markdown_view);\n\n\u002F\u002F 创建MarkdownStyles，或者也可以使用新的MarkdownStyles()创建自定义样式\nMarkdownStyles styles = MarkdownStyles.getDefaultStyles();\n\u002F\u002F 设置样式示例\nstyles.linkStyle().icon(\"https:\u002F\u002Fyou_image_url\");\nstyles.setTitleStyle(0, TitleStyle.create(1.5f).icon(https:\u002F\u002Fyou_image_url));\u002F\u002F 设置一级标题样式\n\n\u002F\u002F 绑定MarkdownStyles和ElementClickEventCallback。\nmarkdownTextView.init(styles, elementClickEventCallback);\n\u002F\u002F 设置Markdown内容或调用startPrinting(content)开始打印。\nmarkdownTextView.setMarkdownText(markdown);\n```\n\n+ 示例说明 \n    - MainActivity - Markdown正常模式示例。\n    - PrinterActivity - 流式打印示例。\n    - ListActivity - 流式打印列表示例。\n\n![打印](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fantgroup_FluidMarkdown_readme_7081e5d4fce8.gif)![列表](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fantgroup_FluidMarkdown_readme_5cd66ab8bc1e.gif)\n\n## HarmonyOS\n\n### 合并 Markdown\n+ 在页面的 `build()` 方法中导入并组合 Markdown 组件。\n+ 通过 `@Param content` 参数绑定 Markdown 格式的文本内容。\n+ 在 Markdown 组件内部处理各种回调事件，以增强业务交互流程，例如 `@Event onMarkdownAreaChange`、`@Event onMarkdownNodeClick` 等。\n\n``` ts\nimport { Markdown, EMarkdownMode } from 'fluid-markdown';\n\n@ComponentV2\nexport struct MyComponent {\n  @Param content: string;\n  private scroller: Scroller = new Scroller();\n\n  build() {\n      Scroll(this.scroller) {\n        Markdown({\n          content: this.content,\n          mode: EMarkdownMode.Normal,\n          onMarkdownAreaChange: () => {},\n          onMarkdownNodeClick: data => {},\n        })\n          .margin(12)\n      }\n      .width('100%')\n      .height('100%')\n      .scrollable(ScrollDirection.Vertical)\n      .margin(12)\n  }\n}\n```\n\n### 流式输出\n+ 通过将 `@Param` 的 `mode` 参数设置为 `EMarkdownMode.Typing` 来启用流式输出模式。\n+ 创建一个 `MarkdownController` 实例，并将其绑定到 `@Param controller` 参数上，以管理流式输出过程，例如 `update()`、`pause()`、`resume()` 等。\n+ 注意：`MarkdownController` 的控制方法，如 `update()`，只能在 `@Event onMarkdownTypingReady` 回调事件中可靠地执行。\n+ 注意：在流式输出模式下，`@Param content` 参数将被忽略。\n\n``` ts\nimport { \n  Markdown, EMarkdownMode, MarkdownController, ETypingMode,\n} from 'fluid-markdown';\n\n@ComponentV2\nexport struct MyComponent {\n  private scroller: Scroller = new Scroller();\n  private markdownController: MarkdownController = new MarkdownController();\n\n  build() {\n      Scroll(this.scroller) {\n        Markdown({\n          controller: this.markdownController,\n          mode: EMarkdownMode.Typing,\n          onMarkdownTypingReady: () => {\n            this.markdownController.typing.update('Hello FluidMarkdown', ETypingMode.Begin);\n          },\n        })\n          .margin(12)\n      }\n      .width('100%')\n      .height('100%')\n      .scrollable(ScrollDirection.Vertical)\n      .margin(12)\n  }\n}\n```\n\n### 主题配置\n+ 创建一个新的 Engine 实例，并将其绑定到 `@Param engine` 参数上。\n+ 通过 Engine 内的 `theme service` 设置主题样式相关的 `ITheme` 属性。\n\n``` ts\nimport { Markdown, EMarkdownMode, BaseEngine } from 'fluid-markdown';\n\n@ComponentV2\nexport struct MyComponent {\n  @Param content: string;\n  private scroller: Scroller = new Scroller();\n  private engine: BaseEngine = new BaseEngine();\n\n  aboutToAppear() {\n    this.engine.theme!.theme!.document!.font!.fontColor = Color.Red;\n  }\n  \n  build() {\n      Scroll(this.scroller) {\n        Markdown({\n          engine: this.engine,\n          content: this.content,\n          mode: EMarkdownMode.Normal,\n          onMarkdownAreaChange: () => {},\n          onMarkdownNodeClick: data => {},\n        })\n          .margin(12)\n      }\n      .width('100%')\n      .height('100%')\n      .scrollable(ScrollDirection.Vertical)\n      .margin(12)\n  }\n}\n```\n\n### 演示应用\n构建并运行演示应用来体验 FluidMarkdown——尽情享受吧！\n![fluid-markdown-ohos-playground](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fantgroup_FluidMarkdown_readme_6fae049b7274.png)\n\n# 已知问题\n+ 表格中的可点击元素显示为纯文本，无法进行交互。\n+ 不支持表格单元格内的嵌套 HTML 标签。\n+ Android 平台上的表格可能会溢出其容器，且不支持水平滚动。\n+ HarmonyOS 平台上 LaTex 功能仍在开发中，暂不可用。\n+ 所需的最低 HarmonyOS API 版本为 15 或更高。\n\n# 贡献\nFluidMarkdown 团队欢迎个人或团队的贡献。更多信息请参阅文件 [CONTRIBUTING](https:\u002F\u002Fgithub.com\u002Fantgroup\u002FFluidMarkdown\u002Fblob\u002Fmain\u002FCONTRIBUTING.md)。\n\n# 许可证\n所有源代码均采用 Apache 2.0 许可证授权。详情请参阅 [LICENSE](https:\u002F\u002Fgithub.com\u002Fantgroup\u002FFluidMarkdown\u002Fblob\u002Fmain\u002FLICENSE)。\n\n我们感谢以下开源项目：\n\n+ [noties\u002FMarkwon](https:\u002F\u002Fgithub.com\u002Fnoties\u002FMarkwon)\n    - 许可证：Apache-2.0\n+ [indragiek\u002FCocoaMarkdown](https:\u002F\u002Fgithub.com\u002Findragiek\u002FCocoaMarkdown)\n    - 许可证：\u003Cfont style=\"color:rgb(31, 35, 40);\">MIT 许可证\u003C\u002Ffont>\n+ [commonmark\u002Fcommonmark-spec](https:\u002F\u002Fcommonmark.org\u002F)\n    - 许可证：\u003Cfont style=\"color:rgb(31, 35, 40);\">MIT 许可证\u003C\u002Ffont>\n+ [https:\u002F\u002Fgithub.com\u002Fmax-lfeng\u002FiosMath\u002F](https:\u002F\u002Fgithub.com\u002Fmax-lfeng\u002FiosMath\u002F)\n    - 许可证：\u003Cfont style=\"color:rgb(31, 35, 40);\">MIT 许可证\u003C\u002Ffont>\n+ [https:\u002F\u002Fgithub.com\u002Fmattt\u002FOno\u002F](https:\u002F\u002Fgithub.com\u002Fmattt\u002FOno\u002F)\n    - 许可证：\u003Cfont style=\"color:rgb(31, 35, 40);\">MIT 许可证\u003C\u002Ffont>\n+ [markdown-it](https:\u002F\u002Fgithub.com\u002Fmarkdown-it\u002Fmarkdown-it\u002Fblob\u002Fmaster\u002FLICENSE)\n    - 许可证：\u003Cfont style=\"color:rgb(31, 35, 40);\">MIT 许可证\u003C\u002Ffont>\n+ [highlight.js](https:\u002F\u002Fgithub.com\u002Fhighlightjs\u002Fhighlight.js\u002Fblob\u002Fmain\u002FLICENSE)\n    - 许可证：\u003Cfont style=\"color:rgb(31, 35, 40);\">BSD 3-Clause 许可证\u003C\u002Ffont>\n+ [csstree](https:\u002F\u002Fgithub.com\u002Fcsstree\u002Fcsstree\u002Fblob\u002Fmaster\u002FLICENSE)\n    - 许可证：\u003Cfont style=\"color:rgb(31, 35, 40);\">MIT 许可证\u003C\u002Ffont>\n+ [htmlparser2](https:\u002F\u002Fgithub.com\u002Ffb55\u002Fhtmlparser2\u002Fblob\u002Fmaster\u002FLICENSE)\n    - 许可证：\u003Cfont style=\"color:rgb(31, 35, 40);\">MIT 许可证\u003C\u002Ffont>\n\n# 致谢与参考文献\n+ 所有为 Ant Markdown 组件贡献代码的开发者\n+ 感谢以下开源项目：\n    - [noties\u002FMarkwon](https:\u002F\u002Fgithub.com\u002Fnoties\u002FMarkwon)\n    - [indragiek\u002FCocoaMarkdown](https:\u002F\u002Fgithub.com\u002Findragiek\u002FCocoaMarkdown)\n    - [commonmark\u002Fcommonmark-spec](https:\u002F\u002Fcommonmark.org\u002F)\n    - [https:\u002F\u002Fgithub.com\u002Fmax-lfeng\u002FiosMath\u002F](https:\u002F\u002Fgithub.com\u002Fmax-lfeng\u002FiosMath\u002F)\n    - [https:\u002F\u002Fgithub.com\u002Fmattt\u002FOno\u002F](https:\u002F\u002Fgithub.com\u002Fmattt\u002FOno\u002F)\n    - [markdown-it](https:\u002F\u002Fgithub.com\u002Fmarkdown-it\u002Fmarkdown-it\u002F)\n    - [highlight.js](https:\u002F\u002Fgithub.com\u002Fhighlightjs\u002Fhighlight.js\u002F)\n    - [csstree](https:\u002F\u002Fgithub.com\u002Fcsstree\u002Fcsstree\u002F)\n    - [htmlparser2](https:\u002F\u002Fgithub.com\u002Ffb55\u002Fhtmlparser2\u002F)","# FluidMarkdown 快速上手指南\n\nFluidMarkdown 是一款专为 Android、iOS 和 HarmonyOS 开发者设计的开源库，旨在支持大语言模型（LLM）生成的 Markdown 内容在客户端进行**流式渲染**。它基于 CommonMark 解析库，支持核心 Markdown 语法及部分 HTML 标签，并提供高度可定制的样式和事件回调。\n\n## 环境准备\n\n### 系统要求\n- **iOS**: 支持原生 iOS 开发环境。\n- **Android**: 支持原生 Android 开发环境。\n- **HarmonyOS**: API Version 15 或更高版本。\n\n### 前置依赖\n本项目源码开放，具体依赖管理请参考各平台的标准构建工具配置。底层依赖包括：\n- CommonMark (解析核心)\n- Markwon (Android 端基础)\n- CocoaMarkdown \u002F iosMath (iOS 端基础)\n\n## 安装步骤\n\n由于项目结构针对多平台划分，请根据目标平台克隆源码并集成：\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fantgroup\u002FFluidMarkdown.git\ncd FluidMarkdown\n```\n\n*注：详细的项目下载与运行指引请参阅项目根目录下的 [INSTALL.md](https:\u002F\u002Fgithub.com\u002Fantgroup\u002FFluidMarkdown\u002Fblob\u002Fmain\u002FINSTALL.md) 文件。*\n\n### 目录结构参考\n- **iOS**: `AntMarkdown` (解析模块), `FluidMarkdown` (流式组件)\n- **Android**: `fluid-markdown` (流式组件), `markwon-xxx` (解析与样式实现)\n- **HarmonyOS**: `markdown` (核心源码), `playground` (演示 Demo)\n\n## 基本使用\n\n### 1. iOS 使用示例\n\n通过 `AMXMarkdownTextView` 实现流式输出。\n\n```objectivec\n\u002F\u002F 1. 创建 TextView 实例\nAMXMarkdownTextView* contentTextView = [[AMXMarkdownTextView alloc] initWithFrame_ant_mark:CGRectMake(0, 0, screenWidht - 20 * 2, 1)];\n\n\u002F\u002F 2. 获取默认样式配置并可自定义\nAMXMarkdownStyleConfig* config = [AMXMarkdownStyleConfig defaultConfig];\nconfig.codeBlockConfig.backgroundColor = [UIColor greenColor];\n[[AMXRenderService shared] setMarkdownStyleWithId:config styleId:@\"demo\"];\n\n\u002F\u002F 3. 开始流式打印\n[self.contentTextView startStreamingWithContent:@\"testing data\"];\n\n\u002F\u002F 4. 动态追加内容\n[self.contentTextView addStreamContent:@\"**append test data**\"];\n\n\u002F\u002F 5. 结束时停止\n[self.contentTextView stop];\n```\n\n**处理内容大小变化（自动滚动到底部）：**\n\n```objectivec\n-(void)onSizeChange:(CGSize)size\n{\n    \u002F\u002F 调整视图高度\n    [self.contentTextView setFrame:CGRectMake(0, 0, self.contentTextView.frame.size.width, size.height)];\n    [self.containerView setContentSize:size];\n    \n    \u002F\u002F 滚动到底部\n    CGPoint bottomOffset = CGPointMake(0, self.containerView.contentSize.height - self.containerView.bounds.size.height);\n    if (bottomOffset.y > 0) {\n        [self.containerView setContentOffset:bottomOffset animated:NO];\n    }\n}\n```\n\n### 2. Android 使用示例\n\n需先全局初始化，然后绑定样式并开始打印。\n\n```java\n\u002F\u002F 1. 全局初始化 (除 context 外其他参数可为 null)\nAFMInitializer.init(context, null, null, null);\n\n\u002F\u002F 2. 创建视图\nPrinterMarkDownTextView markdownTextView = findViewById(R.id.markdown_view);\n\n\u002F\u002F 3. 创建并配置样式\nMarkdownStyles styles = MarkdownStyles.getDefaultStyles();\nstyles.linkStyle().icon(\"https:\u002F\u002Fyou_image_url\");\nstyles.setTitleStyle(0, TitleStyle.create(1.5f).icon(\"https:\u002F\u002Fyou_image_url\"));\n\n\u002F\u002F 4. 绑定样式和事件回调 (必须调用)\nmarkdownTextView.init(styles, elementClickEventCallback);\n\n\u002F\u002F 5. 设置内容或直接开始流式打印\nmarkdownTextView.setMarkdownText(markdown);\n\u002F\u002F 或者使用流式模式: markdownTextView.startPrinting(content);\n```\n\n### 3. HarmonyOS 使用示例\n\n基于 ArkTS 和 `@ComponentV2` 规范。\n\n#### 普通模式渲染\n\n```ts\nimport { Markdown, EMarkdownMode } from 'fluid-markdown';\n\n@ComponentV2\nexport struct MyComponent {\n  @Param content: string;\n  private scroller: Scroller = new Scroller();\n\n  build() {\n      Scroll(this.scroller) {\n        Markdown({\n          content: this.content,\n          mode: EMarkdownMode.Normal,\n          onMarkdownAreaChange: () => {},\n          onMarkdownNodeClick: data => {},\n        })\n          .margin(12)\n      }\n      .width('100%')\n      .height('100%')\n      .scrollable(ScrollDirection.Vertical)\n      .margin(12)\n  }\n}\n```\n\n#### 流式输出模式 (Typing Mode)\n\n```ts\nimport { \n  Markdown, EMarkdownMode, MarkdownController, ETypingMode,\n} from 'fluid-markdown';\n\n@ComponentV2\nexport struct MyComponent {\n  private scroller: Scroller = new Scroller();\n  private markdownController: MarkdownController = new MarkdownController();\n\n  build() {\n      Scroll(this.scroller) {\n        Markdown({\n          controller: this.markdownController,\n          mode: EMarkdownMode.Typing, \u002F\u002F 开启流式模式\n          onMarkdownTypingReady: () => {\n            \u002F\u002F 在此回调中执行更新操作\n            this.markdownController.typing.update('Hello FluidMarkdown', ETypingMode.Begin);\n          },\n        })\n          .margin(12)\n      }\n      .width('100%')\n      .height('100%')\n      .scrollable(ScrollDirection.Vertical)\n      .margin(12)\n  }\n}\n```\n\n#### 自定义主题\n\n```ts\nimport { Markdown, EMarkdownMode, BaseEngine } from 'fluid-markdown';\n\n@ComponentV2\nexport struct MyComponent {\n  @Param content: string;\n  private engine: BaseEngine = new BaseEngine();\n\n  aboutToAppear() {\n    \u002F\u002F 通过 engine 修改主题样式\n    this.engine.theme!.theme!.document!.font!.fontColor = Color.Red;\n  }\n  \n  build() {\n      Scroll(this.scroller) {\n        Markdown({\n          engine: this.engine,\n          content: this.content,\n          mode: EMarkdownMode.Normal,\n        })\n          .margin(12)\n      }\n      .width('100%')\n      .height('100%')\n  }\n}\n```","某移动端 AI 助手团队正在开发一款支持实时对话的跨平台应用，用户期望在收到大模型回复时能像打字机一样即时看到格式精美的内容。\n\n### 没有 FluidMarkdown 时\n- 用户必须等待服务器生成完整回复并传输完毕后，界面才会一次性刷新显示，导致首字延迟高，交互体验割裂。\n- 在长文本生成过程中，聊天窗口无法自动平滑滚动，用户需手动拖拽才能看到最新生成的内容。\n- 复杂的 Markdown 元素（如代码块、数学公式）在渲染初期容易引发界面抖动或布局错乱，影响阅读流畅度。\n- 开发者难以针对不同业务场景自定义样式，且处理点击事件（如链接跳转、代码复制）需要编写大量冗余的原生适配代码。\n- 多端（iOS\u002FAndroid\u002FHarmonyOS）维护成本高，各平台需分别寻找不同的解析库，导致功能表现不一致。\n\n### 使用 FluidMarkdown 后\n- 支持流式逐字渲染，大模型每输出一个字符，界面即刻以正确的标题、列表或代码格式呈现，显著降低感知延迟。\n- 内置智能滚动机制，能根据内容动态增长自动调整视图位置，确保用户视线始终聚焦于最新生成的段落。\n- 基于 CommonMark 和扩展 HTML 标签的稳定解析引擎，即使面对复杂表格或公式也能保持布局稳定，杜绝渲染闪烁。\n- 提供结构化的样式模型和丰富的回调事件，开发者可轻松定制主题色、处理链接点击及监控渲染状态，大幅提升集成效率。\n- 一套逻辑覆盖 iOS、Android 及鸿蒙系统，统一了多端的解析行为与视觉表现，减少了重复开发与测试工作量。\n\nFluidMarkdown 通过原生级的流式渲染能力，将 AI 对话的“等待感”转化为“即时互动”，彻底重塑了移动端智能应用的阅读体验。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fantgroup_FluidMarkdown_e9d5a27f.png","antgroup","Ant Group","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fantgroup_0417229b.jpg","Make it easy to do business anywhere.",null,"https:\u002F\u002Fwww.antgroup.com","https:\u002F\u002Fgithub.com\u002Fantgroup",[83,87,91,95,99,103,107,111,115,118],{"name":84,"color":85,"percentage":86},"JavaScript","#f1e05a",29,{"name":88,"color":89,"percentage":90},"C++","#f34b7d",24.7,{"name":92,"color":93,"percentage":94},"Java","#b07219",22.9,{"name":96,"color":97,"percentage":98},"Objective-C","#438eff",14.2,{"name":100,"color":101,"percentage":102},"C","#555555",6,{"name":104,"color":105,"percentage":106},"Cangjie","#00868B",2.7,{"name":108,"color":109,"percentage":110},"TeX","#3D6117",0.2,{"name":112,"color":113,"percentage":114},"Kotlin","#A97BFF",0.1,{"name":116,"color":117,"percentage":114},"CMake","#DA3434",{"name":119,"color":120,"percentage":114},"Shell","#89e051",522,59,"2026-04-02T12:23:48","Apache-2.0",4,"","未说明",{"notes":129,"python":127,"dependencies":130},"该工具是面向移动端（Android、iOS、HarmonyOS）的 Markdown 流式渲染库，并非基于 Python 的服务端 AI 模型。iOS 端基于 CommonMark 解析库；Android 端依赖开源的 Markwon 库；HarmonyOS 端要求 API 版本 15 及以上，使用 ArkTS 语言和 @ComponentV2 规范开发。不支持在 Linux\u002FmacOS\u002FWindows 桌面环境直接运行，也无 GPU 或特定内存需求。",[131,132,133],"CommonMark (iOS)","Markwon (Android)","ArkTS \u002F @ComponentV2 (HarmonyOS)",[15,13,14,26],[136,137,138,139,140,141,142,143],"ai","android","chat","harmonyos","ios","markdown","native","stream-output","2026-03-27T02:49:30.150509","2026-04-06T11:31:13.534391",[147,152,157,162,167,172],{"id":148,"question_zh":149,"answer_zh":150,"source_url":151},16595,"HarmonyOS 端升级到 1.0.9 版本后 Markdown 组件出现布局错乱或重叠怎么办？","在 HarmonyOS 1.0.9 版本中，必须使用 Scroll 组件包裹 Markdown 组件，否则会导致布局错乱或重叠。1.0.1 版本可直接使用，但 1.0.9 及更高版本需遵循此布局要求。如果仍有滚动问题，请检查父组件的布局组织逻辑。","https:\u002F\u002Fgithub.com\u002Fantgroup\u002FFluidMarkdown\u002Fissues\u002F63",{"id":153,"question_zh":154,"answer_zh":155,"source_url":156},16596,"HarmonyOS 端渲染长内容时流式输出逐渐变慢，是否有优化方案？","该问题已在 FluidMarkdown v1.0.3 版本中通过策略优化解决。建议升级至最新版本以体验针对鸿蒙端长内容流式输出的全面性能优化。","https:\u002F\u002Fgithub.com\u002Fantgroup\u002FFluidMarkdown\u002Fissues\u002F51",{"id":158,"question_zh":159,"answer_zh":160,"source_url":161},16597,"HarmonyOS 端 Image 图片节点没有点击事件回调如何处理？","从 v1.0.10 版本开始，已原生支持 Image 节点的点击回调事件，请直接升级体验。此外，fluid-markdown 已发布到 ohpm，可通过命令 `ohpm install fluid-markdown` 进行安装和更新。若需自定义拦截绘制流程，也可通过 RenderPlugin 添加 Click Gesture。","https:\u002F\u002Fgithub.com\u002Fantgroup\u002FFluidMarkdown\u002Fissues\u002F65",{"id":163,"question_zh":164,"answer_zh":165,"source_url":166},16598,"iOS 端流式输入时将格式化语句（如加粗标记）分多次 addStreamContent 导致解析失败怎么办？","该问题已在 0.1.1 小版本中修复，解决了 Markdown 格式语法内容分两次 append 导致解析不生效的问题。请确保更新到最新版本再进行验证。","https:\u002F\u002Fgithub.com\u002Fantgroup\u002FFluidMarkdown\u002Fissues\u002F24",{"id":168,"question_zh":169,"answer_zh":170,"source_url":171},16599,"iOS 端通过 WebSocket 接收流式数据渲染表格时卡在表头或只渲染表头怎么办？","建议尝试两种流式表格场景验证方式：1. 使用 renderCompleteContent 接口，每次传入逐步增加的全量字符串；2. 使用 addStreamContent 接口，每次仅传入新增字符。若问题依旧，可能是外部接口实现影响，需提供详细的问题分析过程、原因及完整修改逻辑以便进一步排查。","https:\u002F\u002Fgithub.com\u002Fantgroup\u002FFluidMarkdown\u002Fissues\u002F27",{"id":173,"question_zh":174,"answer_zh":175,"source_url":161},16600,"如何在 HarmonyOS 项目中安装或更新 FluidMarkdown 库？","FluidMarkdown 已发布到 ohpm 包管理器，可以直接使用命令 `ohpm install fluid-markdown` 进行安装和更新。",[]]