Flutter for OpenHarmony:Flutter 三方库 dart_openai — 激发鸿蒙应用的 AIGC (AI 大模型/ChatGPT、Deepseek等) 无限创意(适配鸿蒙

Flutter for OpenHarmony:Flutter 三方库 dart_openai — 激发鸿蒙应用的 AIGC (AI 大模型/ChatGPT、Deepseek等) 无限创意(适配鸿蒙

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.ZEEKLOG.net

Flutter for OpenHarmony:Flutter 三方库 dart_openai — 激发鸿蒙应用的 AIGC (AI 大模型/ChatGPT、Deepseek等) 无限创意(适配鸿蒙 HarmonyOS Next ohos)

请添加图片描述

前言

随着生成式 AI(AIGC)浪潮席卷全球,将大语言模型(LLM)的智慧集成到移动应用中已成为大势所趋。无论是智能对话、代码生成,还是图像创作,AI 正在重塑我们的交互方式。

Flutter for OpenHarmony 开发中,我们如何让鸿蒙应用直接对话全球顶尖的 AI 模型?dart_openai 库通过对 OpenAI API 的完美封装,为我们提供了从文本(GPT-4)到图片(DALL·E)的全栈 AI 能力。今天,我们将实战如何在鸿蒙设备上构建一个具备思考能力的智能体。

一、为什么集成 OpenAI 到鸿蒙生态?

1.1 万物互联的“大脑”

鸿蒙系统主打分布式协同,而 AI 能作为这些逻辑的中枢。比如用户在鸿蒙手机上说:“根据我现在的健康数据(来自手表),给我制定一份晚餐食谱”,AI 能即时生成人性化的建议。

1.2 为什么在鸿蒙上使用该库?

  • 异步响应式流(Stream):天然支持 OpenAI 的流式输出(Streaming),让鸿蒙应用的聊天回显像打字机一样丝滑。
  • 配置极简:支持自定义 Base URL。这对于鸿蒙开发者在中国大陆环境下使用国内代理转发服务至关重要。
  • 功能完备:除了聊天,还涵盖了 Embedding、音频转文字、文件上传等所有官方能力。

1.3 AI 交互链路模型(Mermaid)

用户输入问题

OpenAI 客户端

代理/BaseURL 转换

OpenAI 核心服务器

LLM 推理引擎

生成结果流

JSON 解析与拦截

UI 状态自增刷新

鸿蒙页面打字机效果展示

二、核心 API 与功能讲解

2.1 引入依赖

pubspec.yaml 中配置:

dependencies:# OpenAI 官方协议封装dart_openai: ^5.1.0 

2.2 初始化与代理配置(重点)

在鸿蒙应用入口处设置 API Key 和端点。

import'package:dart_openai/dart_openai.dart';voidsetupAI(){OpenAI.apiKey ="YOUR_API_KEY";// 💡 适配鸿蒙国内开发:设置代理基准地址OpenAI.baseUrl ="https://your-custom-proxy.com";}
在这里插入图片描述

2.3 核心功能:流式聊天

让 AI 像人一样一个词一个词地蹦出来,拒绝等待长文时的“转圈圈”。

voidchatWithAi(String prompt){// 🎨 创建流式对话Stream<OpenAIStreamChatCompletionModel> chatStream =OpenAI.instance.chat.createStream( model:"gpt-4o", messages:[OpenAIChatCompletionChoiceMessageModel( content:[OpenAIChatCompletionChoiceMessageContentItemModel.text(prompt),], role:OpenAIChatMessageRole.user,),],); chatStream.listen((event){// ✅ 实战:获取当前片段并更新鸿蒙 UIfinal content = event.choices.first.delta.content;print(content?.first.text ??"");});}
在这里插入图片描述

三、鸿蒙应用实战场景

3.1 场景一:分布式智慧办公助手

在鸿蒙智慧屏(电视)上发起语音指令。通过 dart_openai 解析意图,AI 返回结构化的操作建议。随后应用通过鸿蒙的分布式总线,自动控制手机打开对应的文档。

在这里插入图片描述

3.2 场景二:个性化情感健康教练

结合鸿蒙穿戴设备捕获的压力指数。应用调用 OpenAI 的接口,让 AI 以“心理疏导员”的角色给用户发送安慰和呼吸训练建议。

在这里插入图片描述

四、OpenHarmony 平台适配建议

4.1 网络稳定性与超时重连

  • ✅ 建议:移动端网络环境复杂。在 listen Stream 时,务必包裹 onError 处理。在网络闪断后,利用 dart_openai 的断点续传思想或简单的重试机制,防止用户对话中断。

4.2 隐私合规与数据过滤

  • 📌 提醒:涉及到个人隐私(如身份证、家庭地址)时,在发送给 OpenAI 之前,建议在鸿蒙端利用本地正则库先进行脱敏处理。

4.3 UI 线程性能管控

  • ⚠️ 警告:Markdown 的实时解析是一项耗电操作。当 AI 快速输出带代码块的长文时,建议对 Markdown 刷新频率进行“节流”(Throttling),确保鸿蒙手机在 120Hz 下依然冰凉丝滑。

五、完整示例:简易 AI 问答器

演示如何在鸿蒙端快速建立一条 AI 对话逻辑。

import'package:flutter/material.dart';import'package:dart_openai/dart_openai.dart';voidmain(){OpenAI.apiKey ="YOUR_KEY";// 此处替换真实 KeyrunApp(constMaterialApp(home:OpenAIQLab()));}classOpenAIQLabextendsStatefulWidget{constOpenAIQLab({super.key});@overrideState<OpenAIQLab>createState()=>_OpenAIQLabState();}class _OpenAIQLabState extendsState<OpenAIQLab>{String _answer ='问问我任何关于鸿蒙开发的问题吧!';void_askAi()async{setState(()=> _answer ='AI 正在深度思考中...');try{// ✅ 实战:单次完整对话请求final completion =awaitOpenAI.instance.chat.create( model:"gpt-3.5-turbo", messages:[OpenAIChatCompletionChoiceMessageModel( content:[OpenAIChatCompletionChoiceMessageContentItemModel.text("解释什么是鸿蒙系统")], role:OpenAIChatMessageRole.user,),],);setState(()=> _answer = completion.choices.first.message.content!.first.text!);}catch(e){setState(()=> _answer ='连接 AI 实验室失败:$e');}}@overrideWidgetbuild(BuildContext context){returnScaffold( appBar:AppBar(title:constText('dart_openai 鸿蒙实验室')), body:Center( child:Padding( padding:constEdgeInsets.all(16.0), child:Column( mainAxisAlignment:MainAxisAlignment.center, children:[constIcon(Icons.auto_awesome, size:80, color:Colors.teal),constSizedBox(height:20),Text(_answer, textAlign:TextAlign.center, style:constTextStyle(fontSize:16)),constSizedBox(height:30),ElevatedButton(onPressed: _askAi, child:constText('向 AI 提问')),],),),),);}}
在这里插入图片描述

六、总结

在鸿蒙生态万物合一的构想中,AI 是点亮智慧的关键火种。通过 dart_openai,我们将世界顶尖的推理算力带到了 Flutter for OpenHarmony 开发者面前。从极简的对话到复杂的创意生成,AI 的加入让鸿蒙应用不再仅仅是单纯的工具,而是懂人、助人的智慧伙伴。

核心要点回顾:

  1. 全协议覆盖:从 Chat 到 Image,拥抱 OpenAI 全场景能力。
  2. 鸿蒙代理支持:灵活的 Base URL 配置,满足复杂网络环境。
  3. 响应式体验:利用 Stream 机制实现丝滑的打字机交互。
  4. 安全合规:重视数据预处理,守护鸿蒙用户隐私。

让 AI 的灵魂,赋予您的鸿蒙应用无限的可能!

Read more

GLM-4.6V-Flash-WEB Web界面使用指南,拖图就出结果

GLM-4.6V-Flash-WEB Web界面使用指南,拖图就出结果 你不需要配置环境、不用写一行推理代码、甚至不用打开终端——只要把一张截图拖进浏览器窗口,几秒钟后,它就能告诉你图里写了什么、画了什么、哪里有问题。这不是未来预告,而是你现在就能在本地跑起来的真实体验。 GLM-4.6V-Flash-WEB 是智谱AI最新开源的轻量级视觉语言模型,专为Web端实时交互而生。它不像某些“实验室模型”那样只存在于论文和Benchmark表格里,而是真正做到了:部署快、启动快、响应快、上手更快。一块RTX 3090,一个浏览器,一次拖拽,结果即刻呈现。 本文不讲训练原理,不列参数表格,不堆技术术语。我们只聚焦一件事:怎么用好它的Web界面?从零开始,到稳定产出,每一步都清晰可操作。 1. 为什么说“拖图就出结果”不是宣传话术? 很多多模态模型标榜“支持图文理解”,但实际用起来才发现:要装依赖、改路径、调精度、修CUDA版本、

前端防范 XSS(跨站脚本攻击)

目录 一、防范措施 1.layui util  核心转义的特殊字符 示例 2.js-xss.js库 安装 1. Node.js 环境(npm/yarn) 2. 浏览器环境 核心 API 基础使用 1. 基础过滤(默认规则) 2. 自定义过滤规则 (1)允许特定标签 (2)允许特定属性 (3)自定义标签处理 (4)自定义属性处理 (5)转义特定字符 常见场景示例 1. 过滤用户输入的评论内容 2. 允许特定富文本标签(如富文本编辑器内容) 注意事项 更多配置 XSS(跨站脚本攻击)是一种常见的网络攻击手段,它允许攻击者将恶意脚本注入到其他用户的浏览器中。

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

目录 1. 打开浏览器开发者工具 2. 使用 Network 面板 3. 查看具体的API请求 a. Headers b. Payload c. Response d. Preview e. Timing 4. 实际操作步骤 5. 常见问题及解决方法 a. 无法看到API请求 b. 请求失败 c. 跨域问题(CORS) 作为一名后端工程师,理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具(F12)查看和分析这些信息,并附带图片案例帮助你更好地理解。 1. 打开浏览器开发者工具 按下 F12 或右键点击页面选择“检查”可以打开浏览器的开发者工具。常用的浏览器如Chrome、Firefox等都内置了开发者工具。下面是我选择我的一篇文章,打开开发者工具进行演示。 2. 使用

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例)

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例) 前端开发中最令人头疼的莫过于那些难以定位的UI问题——元素错位、样式冲突、响应式失效...传统调试方式往往需要反复修改代码、刷新页面、检查元素。现在,通过Cursor编辑器集成的Codex功能,你可以直接用截图交互快速定位和修复这些问题。本文将带你从零开始,掌握这套革命性的调试工作流。 1. 环境准备与基础配置 在开始之前,确保你已经具备以下环境: * Cursor编辑器最新版(v2.5+) * Node.js 18.x及以上版本 * React 18项目(本文以Chakra UI 2.x为例) 首先在Cursor中安装Codex插件: 1. 点击左侧扩展图标 2. 搜索"Codex"并安装 3. 登录你的OpenAI账户(需要ChatGPT Plus订阅) 关键配置项: // 在项目根目录创建.