【案例共创】在开发者空间使用 MateChat 和Mass快速开发智能对话界面

举报
胡琦 发表于 2025/01/15 02:23:27 2025/01/15
1.7w+ 2 2
【摘要】 开发者空间快速验证 MateChat !

一、案例介绍

MateChat 致力于构建不同业务场景下高一致性的 GenAI 体验系统语言,同时匹配各种工具/平台的原生业务场景和界面特征,提供更适合研发工具领域的对话组件,打造流畅亲和、跨界一致、易学易用的用户体验,以及易接入、易维护、易扩展的开发体验。

开源仓库地址: https://gitcode.com/DevCloudFE/MateChat

Mass(即 ModelArts Studio 大模型即服务平台)是华为云面向 AI 开发者推出的一站式大模型开发平台,支持开发者一键体验大模型能力,快速构建大模型应用。Mass 平台提供大模型训练、推理、部署、管理、监控等全生命周期管理能力,帮助开发者快速构建大模型应用,加速 AI 开发。

开发者空间是华为云面向开发者提供的云上开发环境,支持开发者快速创建、部署、调试、运行、管理应用。开发者空间提供丰富的开发工具和资源,支持开发者快速构建应用,加速开发。

本案例中我们使用华为云开发者空间,基于 MateChat 和 Mass 快速开发智能对话界面。

二、免费领取云主机

如您还没有云主机,可点击链接,根据领取指南进行操作。

如您已领取云主机,可直接开始案例实践。

三、操作流程

image.png

💡 说明:

  • 本实验需要华为云账号,且经过实名认证
  • 本实验需要开发者空间账号,且经过实名认证
  • 如您还没有云主机,可点击链接,根据领取指南进行操作。
  • 仅“华东二”区域支持使用 ModelArts Studio 大模型即服务平台(MaaS)。
  • MaaS 是白名单功能,请先申请权限
  1. ① 通过开发者空间云主机的 Firefox 浏览器访问并开通 ModelArts Studio 模型即服务。本次实验采用的 Qwen2_5-72B-Instruct 。
  2. ② 通过终端从 https://gitcode.com/huqi/MateChat-Web 获取源代码,源代码基于 Vite+Vue3+Express 实现 MateChat 的应用。
  3. ③ 通过 Firefox 浏览器访问本地部署的 MateChat 应用,体验智能对话。

四、用到资源

云资源
消耗/时
时长
开发者空间-云主机
免费
30min
ModelArts Studio
免费
30min

合计:0 元

五、实践步骤

1、环境开通及源代码获取

1.1 配置云主机

工欲善其事必先利其器,首先配置云主机并使用 Euler 的 JS 工具集(Nodejs + Git),当然如果您已经使用了其他环境,我们需要安装 NodeJS(https://nodejs.org/zh-cn/download)。

image.png

如上图点击“安装”我们即可获得一个 NodeJS 环境,进入桌面后,我们可以打开终端执行命令查看当前的 NodeJS 版本和 Git 版本,确认环境已初始化成功:

node -v
npm -v
git --version

image.png

1.2 源代码获取

本案例涉及的代码已发布在 GitCode 平台上: https://gitcode.com/huqi/MateChat-Web

执行 git clone 拉取源代码

git clone [https://gitcode.com/huqi/MateChat-Web](https://gitcode.com/huqi/MateChat-Web)

image.png

2. ModelArts Studio 模型服务

2.1 访问 ModelArts Studio 模型部署

进入云主机,打开浏览器,输入 https://console.huaweicloud.com/modelarts/?region=cn-east-4&locale=zh-cn#/model-studio/deployment ,即可访问 ModelArts Studio
image.png

2.2 领取免费 Token 额度

领取千万免费 token 额度,可用于体验 Qwen、Chatglm 等系列模型,免费额度仅适合用于体验模型。Qwen2.5 系列预置服务还支持 Function Calling,可以用于构建 Agent。

image.png

2.3 获取大模型 API 和名称

Qwen2_5-72B-Instruct 为例,点击更多-调用,获取 API 地址和模型名称。

image.png

image.png

2.4 创建 API Key

左侧鉴权管理-创建 API Key,保存创建的密钥信息

最多创建 5 个密钥,密钥只会在新建后显示一次,请妥善保存。

image.png

2.5 调试大模型 API

我们使用 curl 脚本调试大模型 API,确保 API 配置可用,在终端执行以下命令。

# 调试API
curl -X POST "yourBaseUrl" \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer yourApiKey" \
  -d '{
    "model": "yourModelName",
    "max_tokens": 20,
    "messages": [
      {"role": "system", "content": "You are a helpful assistant."},
      {"role": "user", "content": "你好"}
    ],
    "stream": false,
    "temperature": 1.0
  }'

💡 请把 yourBaseUrlyourApiKeyyourModelName 替换为步骤 2.1.3 和步骤 2.1.4 中的信息。

能看到类似的返回即为 API 配置可用。

{"id":"chat-1d324bf7eb884c728b2542ddc53f7218","object":"chat.completion","created":1734748674,"model":"Qwen2.5-72B","choices":[{"index":0,"message":{"role":"assistant","content":"你好!很高兴见到你!你有什么问题或者需要帮助吗?","tool_calls":[]},"logprobs":null,"finish_reason":"stop","stop_reason":null}],"usage":{"prompt_tokens":20,"total_tokens":35,"completion_tokens":15},"prompt_logprobs":null}

image.png

3 运行 MateChat

通过上面两步,我们已经获取到了所需要环境、代码、大模型 API 配置,接来我们将安装依赖并修改配置最终运行 MateChat。

3.1 安装依赖

我们进入到项目并执行命令安装依赖:

cd MateChat-Web && npm install

image.png

安装结果如下图则说明依赖安装成功.

IHUWb0njqozWYexLvpecLWfCn0e.png

3.2 修改配置

我们可以通过 cat 命令查看 .env.example

cat .env.example

K2qwbOE1soHDR5xllJhczHj8nqb.png

其内容为:

VITE_OPENAI_API_KEY=你的API密钥
VITE_OPENAI_PROXY_URL=你的API地址
VITE_OPENAI_MODEL=你的模型名称
VITE_PORT=8090
VITE_OPENAI_BASE_URL=http://localhost:8090

这是因为 Maas 提供的大模型 API 不支持客户端调用的缘故,我们需要通过 express 转发请求。

接着我们通过 cp 命令复制一份名为 .env 的配置文件

cp .env.eample .env
cat .env

image.png

接着我们通过云主机自带的 emacs 软件打开并编辑 .env 文件:

emacs  .env

image.png

💡 也可以使用 vi 命令修改 .env ; 目的是配置好大模型 API,注意 chat/completion 这部分需删除

3.3 运行 MateChat

确认配置无误后,通过以下命令运行程序:

npm run start

image.png

按住 Ctrl,鼠标单击 http://localhost:5173 即可访问 MateChat:

image.png

尝试问个问题能看到 MaasAPI 的回复:

image.png

至此,我们成功运行了 MateChat!

我正在参加【案例共创】第 1 期 书写云产品应用构建开发最佳实践/评测,共创官方文档 https://bbs.huaweicloud.com/forum/thread-0217170307934787108-1-1.html

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(2

抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。