『亚马逊云科技产品测评』活动征文｜使用vue + element ui接入大语言模型

亚马逊云科技云上探索实验室活动征文｜使用vue + element ui接入大语言模型

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

前言

年前的时候，chatGPT非常地火爆。人人都在谈论chatGPT，人人都在使用chatGPT，有一种万人空巷的盛景。时至今日，chatGPT的热度还在。

当时，我就想着，能不能自己搭建一个chatGPT呢？

不能，因为我没有ai模型，所以搭建不了。

但是现在，亚马逊云服务器上，可以部署一些大语言模型了。利用这些大语言模型，我们就可以打造一个自己的chatGPT了。

前端项目

要想打造一个自己的chatGPT，那肯定需要搭建一个网站了，那怎么搭建这个网站呢？接下来我们将介绍一下，怎么搭建chatGPT网站。

这里，我打算使用vue + element ui的技术栈，来打造我们的前端网站。

创建项目

这里，我打算使用vue2版本。所以，我们可以使用vue的官方脚手架vue-cli，来创建项目。

我们使用以下命令，来创建vue项目

vue init webpack my-project

打开cmd，输入上面命令。
​​

按照上面的提示，一步一步创建，即可完成vue项目的创建了。

创建完项目之后，还是一个空的项目，我们需要进行开发了。

这里我使用ui库是element ui，所以还得需要安装一下element ui。

到element ui的官网，进入到它的安装页面，有提示我们怎么在项目里安装element ui。

我们按照提示，进行安装即可。

安装完之后，按照element ui官网提示，在项目里进行引入配置即可。

页面开发

项目和依赖安装好之后，我们就可以开发了。

路由配置

我们先进行路由配置，这里，我们只开发一个页面，所以只用配置一个路由即可。

我们创建一个router文件夹，在router文件夹里，创建一个index.js文件。我们将在这个index.js文件里，完成我们的路由配置。

由于只有一个页面，所以配置这个页面的路由即可。

这是我的路由配置，大家可以参考一下。

页面开发

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

关于页面的开发，主要是一些页面布局，加上对应dom元素的样式调整。这些都是比较基础的内容，并且内容篇幅也挺多的，就不展开介绍了。

以下是我的代码部分截图

最终，我们完成的页面效果如下

和我们使用chatGPT的页面，其实是非常相似的。因为我开发的时候，就是参考chatGPT的页面，进行开发的。

页面布局不是很复杂，相信你会很快就开发完成。

大模型部署

前端页面开发完成了，接下来，我们就可以对大模型进行部署了。

我们进入到亚马逊云服务器的官网，登录之后，进入到控制台页面。

在顶部搜索栏里，进行搜索sagemaker

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

进去之后，是进入到Amazon SageMaker的控制台页面

我们点击左边侧边栏的Studio选项，进入Studio的控制台页面。然后点击打开Studio按钮，进入到Studio页面。

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

这里，我们使用的语言模型是Llama-2-7b-chat，在搜索栏里，搜索2-7b-chat

搜索之后，我们可以在下方，看到搜索结果。我们使用的是Llama-2-7b-chat模型，所以选择第一个模型即可。

进去Llama-2-7b-chat模型控制台页面

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

部署的时候，需要花费5-10分钟，我们等待即可。

等待一会，即部署成功了。

接着，我们进入到Lambda控制台里，创建一个函数。

名字可以自己命名，这里我命名为myChat。

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

调试

前端页面已经开发好了，刚才，我们也在服务器上，把大预言模型也部署好了。

接下来，就可以进行前后端调试了。

在前端页面里，我们输入：什么是花生油，然后点击发送。

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

服务器接受到请求后，处理参数，然后调用llama 2模型。llama 2模型，拿到问题后，经过模型处理，最后给出回答。然后通过请求，把回答响应给到客户端。客户端拿到回答后，就展示到页面上。

我们可以看到，我们提问问题，然后llama 2模型给出回答。前后端的联调，到这里，就完成了。

至此，使用vue + element ui接入大语言模型部分，已经介绍完毕了。相信，通过这篇文章，你对如何使用vue + element ui接入大语言模型有了一定的了解。

如果你对接入大语言模型感兴趣的话，不妨参考本文章，自己尝试接入一下吧。