DevExpress中文教程 - 如何使用AI模型检查HTML编辑中的语法?

DevExpress .NET MAUI多平台应用UI组件库提供了用于Android和iOS移动开发的高性能UI组件,该组件库包括数据网格、图表、调度程序、数据编辑器、CollectionView和选项卡组件等。

目前许多开发人员正在寻找多种方法将AI添加到解决方案中(这通常比想象的要容易),这要归功于易于使用的基于云的AI服务和灵活的控制API。在本文中我们将使用OpenAI来扩展DevExpress .NET MAUI HTML编辑功能,具体来说,我将向您展示将AI相关功能添加到HTML编辑控件并调整其UI来获得最佳用户体验,欢迎下载最新版体验!

DevExpress WPF中文教程

获取DevExpress v24.1正式版下载

配置AI

直到最近,只有拥有专门机器学习专家的公司才能在其产品中添加高级人工智能功能。今天,由于拥有数十亿个参数的强大预训练模型,利用人工智能只需最少的努力。像OpenAI这样的云服务现在可以很容易地处理复杂的业务需求,例如:

  • 文本生成:ChatGPT的核心特性,我们将在本文中使用它
  • 图像分析:检测图像中的对象,识别边界等
  • 图像生成:从文本描述创建图像 - 非常适合具有设计功能或数据可视化需求的应用程序
  • 文本到语音和语音到文本:在口语和书面语之间无缝转换

使用OpenAI .NET库,这个过程甚至更加简单,因为它提供了云API,而不直接处理HTTP请求。要开始使用OpenAI,您需要:

  • 如果您还没有OpenAI账户,注册一个OpenAI账户
  • 访问API密钥页面获取API密钥,OpenAI使用信用系统将服务货币化——模式越强大,成本就越高,新账户通常会获得免费积分。
  • 打开.NET MAUI项目并引用OpenAI NuGet包。
  • 创建一个ChatClient实例并将API密钥传递给构造函数:
ChatClient aiClient = new(model: "gpt-3.5-turbo", "YOUR API TOKEN");

我们将使用GPT 3.5 Turbo模型,因为它的资源密集度较低,但您可以随时切换到更强大的模型,以满足更复杂的需求。

配置DevExpress组件

为了充分利用AI,必须创建一个直观的用户界面。在处理大型文本消息时,支持富文本格式(列表、粗体、标题)来在视觉上分隔文本块是很有帮助的。因此我们将使用.NET MAUI HTML编辑器,它的API允许您从各种来源加载文档并检索当前的HTML内容(发送给OpenAI),同时还将使用工具栏控件(旨在与DevExpress .NET MAUI HTML Editor等组件无缝协作)合并按钮来触发AI操作。

在HTML编辑控件中显示文档

使用DevExpress .NET MAUI HTML编辑器,您可以从各种来源加载内容,如文件、流、字符串或URIs。对于本例,我们将从存储在应用程序包(在Resources\Raw文件夹中)中的文档中加载HTML。要显示HTML,只需读取文件并将其传递给HTML编辑器的SetHtmlSourceAsync 方法:

async void OnPageAppearing(object sender, EventArgs e) {
using Stream stream = await FileSystem.Current.OpenAppPackageFileAsync("mail.html");
using StreamReader reader = new StreamReader(stream);
await htmledit.SetHtmlSourceAsync(await reader.ReadToEndAsync());
}
添加自定义工具栏

在较小的手机屏幕上,在不影响可用性的情况下整合多个操作按钮是一项挑战,在可操作元素的数量和大小之间取得平衡至关重要。此外,您需要决定显示哪些元素,因为在许多情况下不需要同时显示所有操作(因为这会使UI混乱)。

我们的工具栏控件可以帮助解决这些现实:

  • 它根据Material Design 3标准自动调整元素,因此您不必担心填充或大小。
  • 它允许您将元素分组到页面中,换句话说可以在单独的页面上显示所有与AI相关的操作,仅在需要时显示。

HTML编辑器包括一个内置的工具栏,但将隐藏它以便使用自定义工具栏。为此将HTML编辑器的ShowToolbar属性设置为false,并创建一个带有适当自定义按钮的Toolbar控件:

<dx:SafeKeyboardAreaView>
<Grid RowDefinitions="*,Auto">
<dx:HtmlEdit x:Name="htmledit" ShowToolbar="false" dx:DXDockLayout.Dock="Top"/>
<dx:DXToolbar Grid.Row="1">
<dx:ToolbarNavigationButton Content="🪄" PageName="AIAssistant"/>
<dx:ToolbarPage Name="AIAssistant" ShowBackButton="true">
<dx:ToolbarButton Content="Fix Grammar ✨" Clicked="OnFixGrammarClick"/>
<dx:ToolbarButton Content="Translate to German 🇩🇪" Clicked="OnToGermanClick"/>
<dx:ToolbarButton Content="Enhance 🪄" Clicked="OnEnhanceClick"/>
</dx:ToolbarPage>
</dx:DXToolbar>
</Grid>
</dx:SafeKeyboardAreaView>

我们把HTML编辑器和工具栏放在SafeKeyboardAreaView容器中,以防止键盘打开时重叠。

获得AI响应并在 .NET MAUI HTML编辑器中显示

一旦设置了自定义工具栏按钮,就可以处理相关的单击事件。当单击按钮时,我们将从HTML编辑器中检索内容,将其发送到OpenAI,并在DevExpress .NET MAUI HTML编辑器中显示响应。

要获取HTML内容,我们将使用GetHtmlAsync方法。然后将从前面配置的OpenAI客户端类调用CompleteChatAsync方法,最后将把OpenAI的响应分配给HTML编辑器:

devexpress中文教程

CompleteChatAsync方法接受一个聊天消息列表,它可以是以下方式当中的一个:

  • 系统:模型的一般说明,您只能定义一个系统消息。
  • 用户:用户的提示,它可以包括模型要处理的附加指令和内容。
  • 助理:模型的答复,您可以组合多个用户和助手消息来构建聊天历史记录,确保最新的请求包含所有以前的上下文。
总结

随着用户/业务期望的不断提高,集成AI功能将变得越来越重要。幸运的是,您不需要成为机器学习专家来利用人工智能。在这篇文章中,我遵循以下简单的步骤将智能文本增强功能整合到.NET MAUI项目中:

  • 注册OpenAI并获得API密钥。
  • 向客户端添加一个连接到OpenAI服务的库。
  • 使用GetHtmlAsync从DevExpress .NET MAUI HTML编辑器中检索内容
  • 添加工具栏按钮来调用AI功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/59786.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【推荐】iptables学习宝典

链接&#xff1a; IPtables-朱双印博客 学习iptables的抗鼎之作&#xff0c;推荐。

二维数组和数组指针数组的关系

在深入理解指针end中&#xff0c;我在最后写了一长段代码 #include<stdio.h> void test1(int arr[][5], int x, int y) //void test1(int(*p)[5], int x, int y) {for (int i 0; i < x; i){for (int j 0; j < y; j){//printf("%d ", *(*(p i) j));p…

vue+websocket实现即时聊天平台

目录 1 什么是websocket 2 实现步骤 2.1 导入依赖 2.2 编写代码 1 什么是websocket WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它主要用于在客户端和服务器之间建立持久的连接&#xff0c;允许实时数据交换。WebSocket 的设计目的是为了提高 Web 应用程序的…

【D3.js in Action 3 精译_038】4.2 D3 折线图的绘制方法及曲线插值处理

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可…

Git 的分支管理

一、分支介绍 1、分支是什么 Git作为一个分布式版本控制系统&#xff0c;提供了强大而灵活的分支管理功能&#xff0c;使得开发团队能够高效地协作开发、管理不同的功能和版本。 2、为什么有分支 一般情况下主分支&#xff08;master/main&#xff09;应始终保持可部署的状…

Linux环境基础和基础开发工具使用

文章目录 一、yum软件管理器1、包管理器2、yum3、apt4、安装源 二、编辑器vim1、各种模式2、打开时直接让光标定位到指定号3、&#xff01;加命令字符 三、命令模式1、i 进入插入模式2、**Shift :** 进入底行模式3、光标定位4、ZZ&#xff08;大写&#xff09;保存并退出vim5、…

【java】哈希<两数之和> 理解哈希

两数之和 题目描述&#xff1a; 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案&#xff0c;并且你不能使用两次相同的元素。 你…

【Linux】信号三部曲——产生、保存、处理

信号 1. 信号的概念2. 进程如何看待信号3. 信号的产生3.1. kill命令3.2. 终端按键3.2.1. 核心转储core dump3.2.2. OS如何知道键盘在输入数据 3.3. 系统调用3.3.1. kill3.3.2. raise3.3.3. abort 3.4. 软件条件3.4.1. SIGPIPE信号3.4.2. SIGALRM信号 3.5. 硬件异常3.5.1. 除零异…

Vue 计算属性和监听器

文章目录 一、计算属性1. 计算属性定义2. computed 比较 methods3. 计算属性完整写法 二、监听器1. 普通监听2. 添加额外配置项 一、计算属性 1. 计算属性定义 概念&#xff1a;基于现有的数据&#xff0c;计算出来的新属性&#xff0c;依赖的数据变化&#xff0c;自动重新计…

【计网】实现reactor反应堆模型 --- 框架搭建

没有一颗星&#xff0c; 会因为追求梦想而受伤&#xff0c; 当你真心渴望某样东西时&#xff0c; 整个宇宙都会来帮忙。 --- 保罗・戈埃罗 《牧羊少年奇幻之旅》--- 实现Reactor反应堆模型 1 前言2 框架搭建3 准备工作4 Reactor类的设计5 Connection连接接口6 回调方法 1 …

外包干了2年,快要废了。。。

先说一下自己的情况&#xff0c;普通本科毕业&#xff0c;在外包干了2年多的功能测试&#xff0c;这几年因为大环境不好&#xff0c;我整个人心惊胆战的&#xff0c;怕自己卷铺盖走人了&#xff0c;我感觉自己不能够在这样蹉跎下去了&#xff0c;长时间呆在一个舒适的环境真的会…

linux驱动-i2c子系统框架学习(2)

linux驱动-i2c子系统框架学习(1) 在这篇博客里面已经交代了i2c设备驱动层&#xff0c;主要的功能就是编写具体i2c的外设驱动&#xff0c;和创建设备接点给上层使用 &#xff0c;按之前学习的字符设备&#xff0c;有了设备节点&#xff0c;就可以对硬件操作了&#xff0c;在i2c…

Webserver(4.6)poll和epoll

目录 pollclient.cpoll.c epollepoll.cclient.c epoll的两种工作模式水平触发边沿触发 poll poll是对select的一个改进 select的缺点在于每次都需要将fd集合从用户态拷贝到内核态&#xff0c;开销很大。每次调用select都需要在内核遍历传递进来的所有fd&#xff0c;这个开销也…

Stable Diffusion的解读(一)

Stable Diffusion的解读&#xff08;一&#xff09; 文章目录 Stable Diffusion的解读&#xff08;一&#xff09;摘要Abstract一、机器学习部分1. Stable Diffusion的早期工作1.1 从编码器谈起1.2 第一条路线&#xff1a;VAE和DDPM1.3 第二条路线&#xff1a;VQVAE1.4 路线的交…

计算机网络——TCP篇

TCP篇 基本认知 TCP和UDP的区别? TCP 和 UDP 可以使用同一个端口吗&#xff1f; 可以的 传输层中 TCP 和 UDP在内核中是两个完全独立的软件模块。可以根据协议字段来选择不同的模块来处理。 TCP 连接建立 TCP 三次握手过程是怎样的&#xff1f; 一次握手:客户端发送带有 …

ROS话题通信机制理论模型的学习

话题通信是ROS&#xff08;Robot Operating System&#xff0c;机器人操作系统&#xff09;中使用频率最高的一种通信模式&#xff0c;其实现模型主要基于发布/订阅模式。 一、基本概念 话题通信模型中涉及三个主要角色&#xff1a; ROS Master&#xff08;管理者&#xff0…

【Android】名不符实的Window类

1.“名不符实”的Window类 Window 是一个窗口的概念&#xff0c;是所有视图的载体&#xff0c;不管是 Activity&#xff0c;Dialog&#xff0c;还是 Toast&#xff0c;他们的视图都是附加在 Window 上面的。例如在桌面显示一个悬浮窗&#xff0c;就需要用到 Window 来实现。Wi…

后端java——如何为你的网页设置一个验证码

目录 1、工具的准备 2.基本方法 3.实现类 4.实践 HTML文件&#xff1a; Java文件1:创建验证码 Java文件2:验证验证码 本文通过HUTOOL实现&#xff1a;Hutool参考文档Hutool&#xff0c;Java工具集https://hutool.cn/docs/#/ 1、工具的准备 如果我们通过hutool来实现这个…

【go从零单排】Strings and Runes 字符串和字符

Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 概念 在Go语言中&#xff0c;rune 是一个内置的数据类型&#xff0c;用于表示一个Unicode字符。它实际上是一个别名…

如何在本地Linux服务器搭建WordPress网站结合内网穿透随时随地可访问

文章目录 前言1. 安装WordPress2. 创建WordPress数据库3. 安装相对URL插件4. 安装内网穿透发布网站4.1 命令行方式&#xff1a;4.2. 配置wordpress公网地址 5. 配置WordPress固定公网地址 前言 本文主要介绍如何在Linux Ubuntu系统上使用WordPress搭建一个本地网站&#xff0c…