『亚马逊云科技产品测评』活动征文 | 使用uniapp搭建AI聊天室

授权声明:本篇文章授权活动官方亚马逊云科技文章转发、改写权,包括不限于在 Developer Centre, 知乎,自媒体平台,第三方开发者媒体等亚马逊云科技官方渠道

前言

chatGPT推出至今,已经有一段时间了。刚推出时,可谓是一个热门的话题。

在平时工作的时候,遇到了问题或者难点,我会使用chatGPT来搜索问题或者查找资料。通过这种方式,来帮助自己学习或者解决问题。

后面在使用chatGPT的过程中,我突然有一个想法或者说灵感:我能不能打造一个自动聊天室。在里面,当我发言的时候,有一个机器人会自动回答我。

要想实现这个想法,以前或许解决不了,还没有对应的技术支持。但是现在,随着chatGPT的推出以及爆火。AI模型,逐渐出现在人们的视野中。

现在,有了AI模型,我的这个自动聊天室的功能,就能实现了。

而亚马逊云服务器,就可以部署这些大语言模型了。使用这些大语言模型,我就可以实现一个的自动聊天室了。

下面我将介绍一下使用uniapp来打造一个自动聊天室。

大语言模型部署

大语言模型部署,怎么部署呢?

当然要使用到亚马逊云服务器来部署了。我们进入到亚马逊云服务器的官网,登录之后,进入到aws的控制台页面。

模型部署

我们先把大语言模型部署。

进入aws控制台之后,在顶部搜索栏里,进行搜索sagemaker
在这里插入图片描述

我们可以到有一个Amazon SageMaker的搜索结果,点击进去。

进去之后,是进入到Amazon SageMaker的控制台页面。我们点击左边侧边栏的Studio选项,进入Studio的控制台页面。然后点击打开Studio按钮,进入到Studio页面。
在这里插入图片描述
进入到Studio页面,

在这里插入图片描述

然后点击左侧的侧边栏的SageMaker JumpStart,下边的Models,notebooks,solutions选项,进入到语言模型选项页面。

这里,我们使用的大语言模型是Llama-2-7b-chat。所以我们在搜索栏里,搜索2-7b关键字

搜索之后,我们可以在下方,看到搜索结果。
在这里插入图片描述

我们使用的是Llama-2-7b-chat模型,所以选择第二个模型即可。

进去Llama-2-7b-chat模型控制台页面
在这里插入图片描述

我们点击Deploy按钮,对该模型进行部署。

部署llama 2模型,需要花费一些时间。大概是5-10分钟,我们耐心等待即可。

等待一会儿,llama 2 模型就部署成功了。

接着,我们进入到Lambda控制台里,创建一个函数。
在这里插入图片描述

名字可以自己命名,这里我命名为uniappchat。
在这里插入图片描述

创建好lambda函数之后,我们就可以部署该函数。部署完成之后,服务器端的部署,大致已经完成了。

大语言模型,在服务器部署好了。接下来,我们就要完成前端部分功能了。

前端项目

要想打造一个自动聊天室,那么需要创建一个聊天室。要怎么创建这个聊天室呢?

接下来我们将介绍一下,怎么来创建一个聊天室。

这里,我打算使用uniapp的技术栈,来打造我们的聊天室。

创建项目

开发之前,我们要创建项目,怎么创建项目?

uniapp官方,推出了一个IDE工具来帮助我们开发。如果想要开发uniapp应用,最好使用uniapp官方的IDE工具。

如果你没有这个IDE工具,可以先到uniapp官网里下载它,进行安装。

我这里已经下载安装了,就直接进入IDE了。

进入IDE后,在顶部选择文件-新建-项目
在这里插入图片描述

点击之后,会进入到创建项目页面。
在这里插入图片描述

给项目起一个名字,这里,我命名为chat-room

vue的版本要选择哪个版本,看你自己喜欢吧。这里,我选择的是vue2,还是使用vue老的语法来写。

点击创建,项目创建成功了。

这里要说一下,uniapp项目的创建速度挺快的,一下就创建好了。不像创建vue或者react项目的话,必须要安装依赖。而安装依赖需要等待挺长的时间。

页面开发

项目创建好之后,我们就可以开始开发了。

路由配置

使用uniapp来开发,和我们使用vue或者react有一点点不一样。

我们使用vue或者react开发,需要我们安装路由依赖,然后写路由。

而使用uniapp开发,就不需要安装路由依赖了,直接写路由即可。并且创建项目的时候,已经把index页面的路由给你配置好了。
在这里插入图片描述
这里开发聊天室,只用一个路由就好了。所以路由也不用怎么配置,直接使用**/index**这个路由即可。

页面开发

路由配置完成,我们就可以开发页面了。

关于页面的开发,主要是一些页面布局,加上一些样式调整。

如果展开介绍的话,一步一步说明的话,那么这篇文章篇幅将会太长了。

所以就不非常详细地介绍了,大家可以找一些聊天室的页面进行参考,自己开发。

以下是我写代码的部分截图
在这里插入图片描述

这还是代码里面的一小部分,但是挺多的了。

经过一段时间的开发,加上不断地调试,我完成的页面效果如下
在这里插入图片描述

一个比较常规的聊天室页面吧,页面布局不是很复杂,相信你也能够开发完成。

调试

前端页面已经开发好了,同时,我们也在服务器上,把我们的大语言模型也部署好了。

接下来,就可以进行两端调试了。

回到浏览器里,在我们的页面底部输入框里,我们输入:你叫什么名字,然后点击发送。
在这里插入图片描述

此时,前端页面,会发送一个请求,并且把询问的问题,通过参数的形式,传递给到服务器。

服务器接受到请求后,处理参数,然后调用llama 2模型。llama 2模型,拿到问题后,经过模型的处理,最后给出它的回答。

接着通过请求,把回答响应给到客户端。客户端拿到回答后,展示到页面上面。
在这里插入图片描述

在页面里,我们可以看到,llama 2模型给出了回答,它的名字是LLaMa。没错,这就是llama 2模型的名字。

到这里,前后端的联调就完成了。

至此,使用uniapp来开发一个自动聊天室,已经介绍完毕了。

相信,通过这篇文章,你对如何使用uniapp开发一个自动聊天室有了一定的认识了。

如果你对开发自动聊天室感兴趣的话,不妨参考下本文章,自己尝试开发一下吧。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值