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

news2024/11/8 10:51:51

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.coloradmin.cn/o/2235757.html

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

相关文章

vue中html如何转成pdf下载,pdf转base64,忽略某个元素渲染在pdf中,方法封装

一、下载 html2Canvas jspdf npm install jspdf html2canvas二、封装转换下载方法 htmlToPdf.js import html2Canvas from html2canvas import JsPDF from jspdf/*** param {*} reportName 下载时候的标题* param {*} isDownload 是否下载默认为下载&#xff0c;传false不…

day05(单片机)SPI+数码管

目录 SPI数码管 SPI通信 SPI总线介绍 字节交换原理 时序单元 ​​​​​​​SPI模式 模式0 模式1 模式2 模式3 数码管 介绍 74HC595芯片分析 ​​​​​​​原理图分析 ​​​​​​​cubeMX配置​​​​​​​ 程序编写 硬件SPI ​​​​​​​软件SPI 作业&#xff1a; SPI数…

越学越爽!4小时从零入门大模型教程,2024最详细的学习路线,让你少走99%弯路!(大模型/LLM/Agent/提示工程)

第一阶段&#xff1a;基础理论入门 目标&#xff1a;了解大模型的基本概念和背景。 内容&#xff1a; 人工智能演进与大模型兴起。 大模型定义及通用人工智能定义。 GPT模型的发展历程。 第二阶段&#xff1a;核心技术解析 目标&#xff1a;深入学习大模型的关键技术和工…

论文速读:简化目标检测的无源域适应-有效的自我训练策略和性能洞察(ECCV2024)

中文标题&#xff1a;简化目标检测的无源域适应&#xff1a;有效的自我训练策略和性能洞察 原文标题&#xff1a;Simplifying Source-Free Domain Adaptation for Object Detection: Effective Self-Training Strategies and Performance Insights 此篇文章为论文速读&#xff…

小白入门学习计算机辅助工具--Git和Github

虽然平时大家都有听过Github&#xff0c;但这实际上要分为Git和Github&#xff0c;我们可以简单理解为前者是用于本地&#xff0c;后者是远程端。下面我们来看看一些基本的操作。 Github创建仓库 让我们先从Github开始&#xff0c;点击右边的绿色按钮new进入创建库界面&#x…

【C++】哈希表封装 unordered_map 和 unordered_set 的实现过程

C语法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;命名空间缺省参数与函数重载C相关特性类和对象-上篇类和对象-中篇类和对象-下篇日期类C/C内存管理模板初阶String使用String模拟实现Vector使用及其模拟实现List使用及其模拟实现容器适配器Stack与QueuePriori…

攀拓(PAT)- 程序设计(乙级)2024年春季考试

题目来源&#xff1a;https://pintia.cn/market/item/1767454903977603072 B-1 题目要求 2024 这个数字&#xff0c;可以由 n n n个互不相同的正偶数和 m m m个互不相同的正奇数组合出来吗&#xff1f;本题就请你回答这个问题。 输入格式&#xff1a; 输入在一行中给出一个…

STM32 BootLoader 刷新项目 (九) 跳转指定地址-命令0x55

STM32 BootLoader 刷新项目 (九) 跳转指定地址-命令0x55 前面我们讲述了几种BootLoader中的命令&#xff0c;包括获取软件版本号、获取帮助、获取芯片ID、读取Flash保护Level。 下面我们来介绍一下BootLoader中最重要的功能之一—跳转&#xff01;就像BootLoader词汇中的Boot…

VTK知识学习(2)-环境搭建

1、c方案 1.1下载源码编译 官网获取源码。 利用Cmake进行项目构建。 里面要根据实际使用的情况配置相关的模块哟&#xff0c;这个得你自行研究下了。 CMAKEINSTALLPREFIX--这个选项的值表示VTK的安装路径&#xff0c;默认的路径是C:/Program Files/VTK。该选项的值可不作更…

Chrome(谷歌浏览器中文版)下载安装(Windows 11)

目录 Chrome_10_30工具下载安装 Chrome_10_30 工具 系统&#xff1a;Windows 11 下载 官网&#xff1a;https://chrome.google-zh.com/&#xff0c;点击立即下载 下载完成&#xff08;已经下过一遍所以点了取消&#xff09; 安装 解压&#xff0c;打开安装包 点击下一步…

如何在算家云搭建Aatrox-Bert-VITS2(音频生成)

一、模型介绍 ‌ Aatrox - Bert -VITS2 模型是一种基于深度学习的语音合成系统&#xff0c;结合了 BERT 的预训练能力和 VITS2 的微调技术&#xff0c;旨在实现高质量的个性化语音合成。 二、模型搭建流程 1. 创建容器实例 进入算家云的“应用社区”&#xff0c;点击搜索找到…

232转485模块测试

概述 常用的PLC一般会有两个左右的232口&#xff0c;以及两个左右的485口&#xff0c;CAN口等&#xff0c;但是PLC一般控制的设备可能会有很多&#xff0c;会超出通讯口的数量&#xff0c;此时我们一般会采用一个口接多个设备&#xff0c;这种情况下要注意干扰等因素&#xff0…

静态数组类型无法用“=“给整个静态数组赋值

基础知识&#xff1a; 什么是静态数组类型&#xff1f; 在 C 中&#xff0c;静态数组是一种在编译时大小固定的数组。这意味着一旦声明&#xff0c;静态数组的大小就不能改变。 ------ 你可以声明一个静态数组并选择性地初始化它&#xff1a; int arr[10]; // 声明一个包…

使用 Python 调用云 API 实现批量共享自定义镜像

本文介绍如何通过 Python SDK 调用 API 接口&#xff0c;通过子用户批量共享云服务器自定义镜像。若您具备类似需求&#xff0c;或想了解如何使用 SDK&#xff0c;可参考本文进行操作。 前提条件 已创建子用户&#xff0c;并已具备云服务器及云 API 所有权限。 创建子用户请…

【旷视科技-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

GISBox VS ArcGIS:分别适用于大型和小型项目的两款GIS软件

在现代地理信息系统&#xff08;GIS&#xff09;领域&#xff0c;有许多大家耳熟能详的GIS软件。它们各自具有独特的优势&#xff0c;适用于不同的行业需求和使用场景。在众多企业和开发者面前&#xff0c;如何选择合适的 GIS 软件成为了一个值得深入思考的问题。今天&#xff…

【Spring】Spring Web MVC基础入门~(含大量例子)

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 一&#xff1a;什么是Spring Web MVC 1&#xff1a;Servlet 2&#xff1a;总结 二&#xff1a;MVC …

数组类算法【leetcode】

704. 二分查找 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xff0c;否则返回 -1。 二分查找 用于有序数组中&#xff0c;没有重复的数组。…

24/11/7 算法笔记 PCA主成分分析

假如我们的数据集是n维的&#xff0c;共有m个数据(x,x,...,x)。我们希望将这m个数据的维度从n维降到k维&#xff0c;希望这m个k维的数据集尽可能的代表原始数据集。我们知道数据从n维降到k维肯定会有损失&#xff0c;但是我们希望损失尽可能的小。那么如何让这k维的数据尽可能表…

wxWidgets布局管理及XRC界面使用解惑

wxWidgets布局&#xff0c;通常就是wxBoxSizer&#xff0c;当然还有别的Sizer&#xff0c;就像Qt中的Layout一样&#xff0c;各种布局管理类。只是如今的wxWidgets尚未发展起来&#xff0c;一般其他的你用的比较少&#xff0c;因为这个最简单&#xff0c;最容易布局&#xff0c…