在Vue项目中引入阿里云大模型

引言

随着人工智能技术的不断发展，越来越多的企业和开发者开始寻求将AI能力集成到自己的应用中。阿里云提供了强大的AI大模型服务，可以帮助开发者快速实现AI功能。本文将详细介绍如何在Vue项目中引入阿里云大模型。

步骤一：创建Vue项目

首先，确保您已经安装了Vue CLI。如果没有安装，可以通过以下命令进行安装：

1
npm install -g @vue/cli

步骤二：安装依赖包

在Vue项目中，我们需要安装一些依赖包，以实现与阿里云大模型集成。我们可以使用以下命令进行安装：

1
npm install axios vue-router vuex

其中：

  • axios：用于发送HTTP请求
  • vue-router：用于实现路由功能
  • vuex：用于管理全局状态

步骤三：申请阿里云大模型服务

在Vue项目中，我们需要申请阿里云大模型服务，以实现与大模型集成。我们可以使用以下步骤进行申请：

  1. 登录阿里云控制台， 进入阿里云练平台： https://bailian.console.aliyun.com/
  2. 选择 “模型服务” > “大模型” > “大模型服务”， 并点击“创建服务”按钮
  3. 创建apikey
  4. 在创建服务页面中，选择模型类型为”大模型”， 并点击“创建服务”按钮
  5. 查看调用案例：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    import OpenAI from "openai";

    const openai = new OpenAI(
        {
            // 若没有配置环境变量，请用百炼API Key将下行替换为：apiKey: "sk-xxx",
            apiKey: process.env.DASHSCOPE_API_KEY,
            baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1"
        }
    );

    async function main() {
        const completion = await openai.chat.completions.create({
            model: "qwen-plus",  //此处以qwen-plus为例，可按需更换模型名称。模型列表：https://help.aliyun.com/zh/model-studio/getting-started/models
            messages: [
                { role: "system", content: "You are a helpful assistant." },
                { role: "user", content: "你是谁？" }
            ],
        });
        console.log(JSON.stringify(completion))
    }

    main();

步骤四：配置阿里云大模型服务

在Vue项目中，我们需要配置阿里云大模型服务，以实现与大模型集成。我们可以使用以下代码进行配置：

1
2
3
4
5
export const openaiClient = new OpenAI({
  apiKey: process.env.VUE_APP_OPENAI_API_KEY, // 使用环境变量中的API密钥
  baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1",
  dangerouslyAllowBrowser: true // 允许在浏览器环境中使用OpenAI客户端
});

步骤五： 创建一个模版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
  <div class="news-detail-container">
    <div class="news-content">
      <!-- 新闻标题 -->
      <div class="news-title">{{ newsDetail.title }}</div>
      <!-- 新闻内容 -->
      <div class="news-detail">
        <p>{{ newsDetail.content }}</p>
      </div>
      <!-- 查看原文 -->
      <div class="view-original">
        <a :href="newsDetail.link" target="_blank">查看原文</a>
      </div>
    </div>

    <div class="chat-box">
      <div class="chat-display" id="chatDisplay">
        <!-- 聊天记录会动态显示在这里 -->
      </div>
      <div class="chat-input-area">
        <input type="text" class="chat-input" id="userInput" placeholder="请输入您的问题..." v-model="userInput">
        <button class="chat-submit" @click="sendMessage" :disabled="isSending" :class="{ 'disabled': isSending }">发送</button>
      </div>
    </div>
  </div>
</template>

步骤六：发送消息核心代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
async sendMessage() {
      if (this.userInput.trim() === "") return;
      this.isSending = true; // 发送开始时禁用按钮
      const userMessage = {
        role: 'user',
        content: this.userInput,
      };

      // Get the current time
      const time = this.getCurrentTime();

      // Create the user message element
      const userMessageEle = document.createElement("div");
      userMessageEle.className = "chat-message user";
      if (this.messages.length > 1) {
        userMessageEle.innerHTML = `
<div class="message-header">
  <img src="https://img.icons8.com/ios/50/000000/user-male.png" class="avatar" alt="User">
  <span class="timestamp">${time}</span>
</div>
<div class="message-bubble">${this.renderMarkdown(this.userInput)}</div>
`;
      }
      const chatDisplay = document.getElementById("chatDisplay");
      if (chatDisplay) {
        chatDisplay.appendChild(userMessageEle);
      } else {
        console.error('Element with id "chatDisplay" not found');
      }

      // Display the loading message
      const loadingMessage = document.createElement("div");
      loadingMessage.className = "loading-message";
      loadingMessage.innerHTML = "DeepSeek 正在处理中...";
      if (chatDisplay) {
        chatDisplay.appendChild(loadingMessage);
      } else {
        console.error('Element with id "chatDisplay" not found');
      }

      this.messages.push(userMessage);
      this.userInput = ''; // Clear the input box

      try {
        const completion = await this.openAi.chat.completions.create({
          model: "qwen-long", // 此处以qwen-plus为例，可按需更换模型名称。模型列表：https://help.aliyun.com/zh/model-studio/getting-started/models
          messages: this.messages,
          stream: true,
        });

        // 创建助手消息元素
        const botMessage = document.createElement("div");
        botMessage.className = "chat-message bot";
        botMessage.innerHTML = `
  <div class="message-header">
    <img src="https://img.icons8.com/ios/50/000000/robot.png" class="avatar" alt="ChatGPT">
    <span class="timestamp">${this.getCurrentTime()}</span>
  </div>
  <div class="message-bubble" id="assistantMessage${++this.index}"></div>
`;
        if (chatDisplay) {
          chatDisplay.appendChild(botMessage);
        } else {
          console.error('Element with id "chatDisplay" not found');
        }

        // 移除加载消息
        if (chatDisplay && chatDisplay.contains(loadingMessage)) {
          chatDisplay.removeChild(loadingMessage);
        }

        let assistantMessageContent = '';
        for await (const chunk of completion) {
          const chunkStr = chunk.choices[0].delta.content || ''; // 确保正确获取 chunk 内容
          assistantMessageContent += chunkStr;
          let assistantMessageElement = document.getElementById("assistantMessage"+this.index);
          assistantMessageElement.innerHTML = this.renderMarkdown(assistantMessageContent);
          // 滚动到底部
          if (chatDisplay) {
            chatDisplay.scrollTop = chatDisplay.scrollHeight;
          }
        }

        const assistantMessage = {
          role: 'system',
          content: assistantMessageContent,
        };
        this.messages.push(assistantMessage);
        this.isSending = false; // 发送成功后启用按钮

      } catch (error) {
        console.error('请求失败:', error);
        this.responseMessage = '请求失败，请稍后再试。';

        this.isSending = false; // 发送失败后启用按钮
      }
    }

核心内容就是发送消息的核心代码，它涉及到了用户输入的内容、消息的显示、请求的创建、响应的处理等。

步骤七：因为返回的内容都是markdown格式的需要转换为html

1
2
3
renderMarkdown(content) {
    return marked(content);
  }

效果展示如下：
效果展示

总结

这个项目是一个新闻详情页面，它使用了OpenAI的API来获取新闻内容，并使用AI模型来生成新闻的摘要和评论。它还使用了Markdown来格式化新闻内容，并使用Vue.js来构建前端界面。