半小时实现GPT纯血鸿蒙版

news/2024/2/23 16:23:10/文章来源:https://blog.csdn.net/dsgdauigfs/article/details/135566742

仅需半小时,即可实现纯血鸿蒙版本的ChatGPT!

废话少说,先看效果图:

如上图所示,这个小Demo实现了AI智能问答。靠右加粗的文本是用户点击底部提交按钮后出现的;后面靠左对齐的普通文本是来自AI的回答内容。当然,整个内容是可滑动浏览的,当内容被滑动时,屏幕右侧将出现滚动条。最后,为什么UI是英文呢?因为鸿蒙的模拟器目前没有内置中文输入法,恰好这个AI服务也可以用英文来回答。

值得注意的是:这个小Demo之所以我称其为Demo,是因为它的功能实在是太简单了。只有一个基础的AI对话功能,如果要做成一个产品,我觉得起码得有个数据持久化的过程,而且还能支持文本的编辑、复制、删除,还要提供收藏功能。更重要的,UI也需要好好美化一下……

所以,这篇文章就权当抛砖引玉,让大家体会一下开发原生纯血鸿蒙版本的App是有多么轻松。

前置条件

  1. DevEco 3.1.1 Release;

  1. 在百度智能云控制台上创建好应用,保存好API Key和Secret Key。

  • 关于1:下载和安装文档链接

  • 关于2:百度智能云控制台地址链接

创建项目(5分钟)

使用DevEco创建项目仅需两步,第一步选择类型,第二步填写项目信息。

对于第一步,我们选择Application(应用程序)->Empty Ability(空白Ability);

对于第二步,我们选择迄今为止最新的Compile SDK,即3.1.0(API 9),Model选择Stage,不开启“Enable Super Visual”。其余的内容大家根据自身环境配置进行填写就好。

编码实现(20分钟)

整个编码过程分为三个步骤,首先添加权限,然后实现UI,最后实现网络操作。

添加权限(2分钟)

在整个App的项目结构中,找到默认创建的entry模块,依次定位到src->main->module.json5,权限在该文件中进行配置。

这个Demo功能非常简单,但仍需对其添加必要的网络访问权限,以确保可以打开网络套接字,完成HTTP请求和响应。

代码片段如下:

"requestPermissions": [{"name": "ohos.permission.INTERNET",}
],

UI实现(10分钟)

回过头来看本文最上方的截图,经过布局分析后,可以得到如下结论:整个界面是纵向布局,由两个部分构成。一是可滚动的对话历史;二是下方的输入框和提交按钮。

因此,整个UI布局最外层应该是一个Column,表示纵向布局。其中,占据90%高度的对话历史区域,占据10%高度的输入框和按钮区域。

先来看对话历史区域,它其实本质上也是一个Column,每个item就是一段文字。根据文字的类型来判断是居左还是居右。在这个Column之外,为了让整个对话历史区域可以上下滚动查看,因此还需要Scroll组件将整个Column组件包裹起来。

代码片段如下:

@State messagesList: Object[] = [{ 'role': 'user', 'content': 'What can I help you with?' }]
// 历史问答
Scroll() {Column() {ForEach(this.messagesList, (item: Object) => {if (item['role'] == 'user') {Text(item['content']).fontSize(20).fontWeight(FontWeight.Bold).width('100%').textAlign(TextAlign.End)} else {Text(item['content']).fontSize(20).width('100%').textAlign(TextAlign.Start)}})}.width('100%').alignItems(HorizontalAlign.Center)
}
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Auto)
.scrollBarColor(Color.Gray)
.scrollBarWidth(10)
.edgeEffect(EdgeEffect.Fade)
.height('90%')
.width('100%')

请注意这段代码中的messagesList,它是一个对象数组。role表示角色,即该条消息是用户发送的,还是服务器返回的;content表示文字内容。

在由Scroll包裹的Column组件之中,使用了ArkTS提供的ForEach渲染方式进行逐条消息的渲染,并使用if...else...条件判断语句对角色来源进行区分。

再来看底部的输入框和操作按钮,由于它们是横向排列的,所以使用Row组件进行布局。在此,我将文本输入框设定了80%的宽度,提交按钮设定了20%的宽度。

代码片段如下:

@State questionStr: string = ''
// 文本输入和提交
Row() {TextInput({ placeholder: 'Please input your question', text: this.questionStr }).type(InputType.Normal).onChange((value: string) => {this.questionStr = value}).width('80%')Button('提交').type(ButtonType.Capsule).onClick(() => {this.messagesList.push({ 'role': 'user', 'content': this.questionStr })getAnswer(this.questionStr, this.messagesList)this.questionStr = ''}).width('20%')
}.height('10%').width('100%')

在这段代码中,questionStr表示输入框中的文字字符串。getAnswer()函数发起并接收HTTP请求,向服务器提交用户问题字符串,并等待接收响应内容,将问题的回答放入messagesList对象数组之中,完成整个问答流程。

最后,将上述Scroll组件和Row组件一并放入Column内,完成整个UI绘制。

网络访问(8分钟)

根据百度官方的开发文档,完成整个AI问答过程至少需要两个步骤:获取access_token和获取问题答案。

获取access_token的过程在程序一开始就可以进行了,因为在后续的操作中都要用到access_token。因此,我声明了access_token的全局变量,并将获取该值的方法封装为getToken()函数,具体代码如下:

var access_token: string = ''
function getToken() {let httpRequest = http.createHttp();httpRequest.on('headersReceive', (header) => {console.info('header: ' + JSON.stringify(header));});httpRequest.request("https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=[你的应用的API Key]&client_secret=[你的应用的Secret Key]",{method: http.RequestMethod.POST,header: {'Content-Type': 'application/json',},expectDataType: http.HttpDataType.OBJECT,usingCache: true,priority: 1,connectTimeout: 60000,readTimeout: 60000,usingProtocol: http.HttpProtocol.HTTP1_1,}, (err, data) => {if (!err) {access_token = data.result['access_token']} else {httpRequest.off('headersReceive')httpRequest.destroy()}});
}

getToken()函数我在回调的onPageShow()函数中使用,即程序启动后,就获取access_token。

最后,我们来实现getAnswer()函数,它是向服务器提交问题和接收响应的函数,具体代码如下:

function getAnswer(questionStr: string, messageList: Object[]) {let httpRequest = http.createHttp();httpRequest.on('headersReceive', (header) => {console.info('header: ' + JSON.stringify(header));});httpRequest.request("https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/yi_34b_chat?access_token=" + access_token,{method: http.RequestMethod.POST,header: {'Content-Type': 'application/json'},extraData: { "messages": [{"role": "user","content": questionStr}] },expectDataType: http.HttpDataType.OBJECT,usingCache: true,priority: 1,connectTimeout: 60000,readTimeout: 60000,usingProtocol: http.HttpProtocol.HTTP1_1,}, (err, data) => {if (!err) {messageList.push({ 'role': 'assist', 'content': data.result['result'] })} else {httpRequest.off('headersReceive')httpRequest.destroy()}});
}

还需要做些别的吗?

答案是:没有了,真的不用了。

运行项目(5分钟)

无论是本地模拟器,还是真机,抑或是远程模拟器,只需要启动其中一个,然后让这个程序跑起来吧!如无意外,你将会得到一个超级简易的AI问答机器人,纯血鸿蒙版。

当然,这里我写了需要5分钟,是包括了下载模拟器镜像的时间,如果你有真机或是使用远程模拟器的话,那就会更快了。

最后,我们来对比一下。我完成上述功能,Index.ets一共117行,你的呢?

文章转载自:萧文翰

原文链接:https://www.cnblogs.com/wenhanxiao/p/17960622

体验地址:引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构

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

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

相关文章

鸿蒙(HarmonyOS)应用开发指南

1. 概述 1.1 简介 鸿蒙(即 HarmonyOS ,开发代号 Ark,正式名称为华为终端鸿蒙智能设备操作系统软件)是华为公司自 2012 年以来开发的一款可支持鸿蒙原生应用和兼容 AOSP 应用的分布式操作系统。该系统利用“分布式”技术将手机、电…

第十七周周报

文章目录 摘要目标检测锚框交并比NMS 非极大值抑制输出 文献阅读:SMPL: A Skinned Multi-Person Linear ModelIntroductionRelated WorkModel FormulationTraining评估动态SMPL讨论结论 总结 摘要 本周看了三维人体重建的领域,看了一篇SMPL的文章&#…

【sqlite3】sqlite3在linux下使用sqlitebrowser工具实现数据可视化

sqlite3在linux下使用sqlitebrowser工具实现数据可视化 1. ### install sqlitebrowser 1. ### install sqlitebrowser 安装指令 sudo apt-get install sqlitebrowser通过工具打开数据库 sqlitebrowser stereo.db打开效果

【蓝桥杯日记】第一篇——如何搭建系统环境

目录 前言 环境相关文件 学生机环境-Web应用开发环境(第十五届大赛) 学生机环境-Java编程环境(第十五届大赛) 学生机环境-C/C编程环境(第十五届大赛) 学生机环境-Python编程环境 (第十五届…

Spring Boot - Application Events 同步 VS 异步 发布订阅事件实战

文章目录 PreCode基础工程启动类切入口事件 发布事件同步 Listener异步Listener增加EnableAsync增加 Async 测试 Pre Spring Boot - Application Events 的发布顺序_ApplicationStartingEvent Spring Boot - Application Events 的发布顺序_ApplicationEnvironmentPreparedEv…

IntelliJ IDEA - 快速去除 mapper.xml 告警线和背景(三步走)

1、去掉 No data sources configure 警告 Settings(Ctrl Alt S) ⇒ Editor ⇒ Inspections ⇒ SQL ⇒ No data sources configure 2、去掉 SQL dialect is not configured 警告 Settings(Ctrl Alt S) ⇒ Editor ⇒ Inspecti…

GPT应用开发:运行你的第一个聊天程序

本系列文章介绍基于OpenAI GPT API开发应用的方法,适合从零开始,也适合查缺补漏。 本文首先介绍基于聊天API编程的方法。 环境搭建 很多机器学习框架和类库都是使用Python编写的,OpenAI提供的很多例子也是Python编写的,所以为了…

如何利用小程序介绍公司品牌形象?

企业小程序的建设对于现代企业来说已经成为了一项必不可少的工作。随着移动互联网的快速发展,越来越多的职场人士和创业老板希望通过小程序来提升企业形象,增强与用户的互动,实现更好的商业效果。在这个过程中,使用第三方制作平台…

数据结构排序算法总结

直接插入排序 折半插入排序 希尔排序 冒泡排序 快速排序 选择排序 堆排序 归并排序 1.直接插入排序 前面的有序 后面的无序&#xff0c;无序元素插入到前面的有序列表中 int len nums.length, i 1, j 0;for(i1; i<len; i){int ele nums[i];// 插入过程for(j i…

【上分日记】第379场周赛(分类讨论 + 数学 + 前缀和)

文章目录 前言正文1.3000. 对角线最长的矩形的面积2.3001. 捕获黑皇后需要的最少移动次数3.3002. 移除后集合的最多元素数3.3003. 执行操作后的最大分割数量 总结尾序 前言 终于考完试了&#xff0c;考了四天&#xff0c;也耽搁了四天&#xff0c;这就赶紧来补这场周赛的题了&a…

gitee完整使用教程,创建项目并上传

目录 一 什么是gitee 二 安装Git 三 登录gitee&#xff0c;生成密钥 四 配置SSH密钥 五 创建项目 六 克隆仓库到本地 七 关联本地工程到远程仓库 八 添加文件 九 异常处理 十 删除仓储 十一 git常用命令 一 什么是gitee gitee是开源中国推出的基于git的代码托管服务…

3种ffmpeg-web端视频直播推流方案

ffmpeg-web端视频直播推流方案 记录了三种 ffmpeg 工具进行推流的方法&#xff0c;并在web端实现直播效果。 一. node-media-server ffmpeg 推流rtmp 安装node-media-server依赖,新建app.js运行 npm install node-media-server -g const NodeMediaServer require(node-…

e2studio开发三轴加速度计LIS2DW12(4)----测量倾斜度

e2studio开发三轴加速度计LIS2DW12.4--测量倾斜度 概述视频教学样品申请源码下载计算倾斜角度工作原理单轴倾斜检测双轴倾斜检测三轴倾斜检测通信模式管脚定义IIC通信模式速率新建工程工程模板保存工程路径芯片配置工程模板选择时钟设置UART配置UART属性配置设置e2studio堆栈e…

004 Golang-channel-practice 左右括号匹配

第四题 左右括号打印 一个协程负责打印“&#xff08;”&#xff0c;一个协程负责打印“&#xff09;”&#xff0c;左右括号的数量要匹配。在这道题目里&#xff0c;我在main函数里进行了一个死循环。会产生一个随机数&#xff0c;随机数就是接下来要打印的左括号的数量。 例…

spring boot mybatis plus mapper如何自动注册到spring bean容器

##Import(AutoConfiguredMapperScannerRegistrar.class) ##注册MapperScannerConfigurer ##MapperScannerConfigurer.postProcessBeanDefinitionRegistry方法扫描注册mapper ##找到mapper候选者 ##过滤mapper 类 候选者 ##BeanDefinitionHolder注册到spring 容器

竞赛保研 基于深度学习的动物识别 - 卷积神经网络 机器视觉 图像识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

c++泛型算法相关笔记

一. 泛型算法 1. 前言 泛型算法&#xff1a;可以支持多种类型的算法 此处主要来讨论怎么使用标准库中定义的泛型算法<algorithm>, numeric, ranges. 在引入泛型算法之前&#xff0c;还有一种是方法的形式&#xff0c;比如说std::sort 和std::list::sort&#xff0c;前者…

微信小程序上传并显示图片

实现效果&#xff1a; 上传前显示&#xff1a; 点击后可上传&#xff0c;上传后显示&#xff1a; 源代码&#xff1a; .wxml <view class"{{company_logo_src?blank-area:}}" style"position:absolute;top:30rpx;right:30rpx;height:100rpx;width:100rp…

力扣67. 二进制求和算法

一、【写在前面】 这道题需要&#xff0c;给你两个字符串比如 a "1010", b "1011"答案是&#xff1a;"10101" 然后需要你给出计算结果&#xff0c;那么我们很容易想到两种做法 1. 调库做法&#xff1a;直接转化为整数&#xff0c;然后用内…

在CentOS上设置和管理静态HTTP网站的版本控制

在CentOS上设置和管理静态HTTP网站的版本控制是一项重要的任务&#xff0c;它可以帮助您跟踪和回滚对网站所做的更改&#xff0c;确保数据的一致性和完整性。以下是在CentOS上设置和管理静态HTTP网站的版本控制的步骤&#xff1a; 安装版本控制系统在CentOS上安装Git或其他版本…