快速使用通义千问大模型API + VUE

如果没有申请通义千问的API key自己在官网申请 --> 首次调用通义千问API

先看一下流式输出效果,再看博文:

注:本文主要讲解智能体应用下,如何使用单轮对话,多轮对话,流式输出三种API,如图所示:

在这里插入图片描述

点击应用卡片上的“调用”按钮,可查看API调用方式,如图所示:

在这里插入图片描述

一,选择插件进行获取数据和展示数据

1,获取数据的插件

  • Axios 是一个基于 promise 的网络请求库,用于单轮对话,多轮对话API,也可以使用fetch
npm install axios
  • EventSourcePolyfill, EventSource 是浏览器原生支持的 API,用于处理 Server-Sent Events (SSE) 流式数据。默认情况下,EventSource 无法直接配置请求头(headers)或发送 POST 请求。这是因为 EventSource 只支持 GET 请求,并且无法直接设置自定义请求头。如果你需要设置自定义请求头或发送 POST 请求,可以使用 EventSourcePolyfill 库。EventSourcePolyfill 是一个封装了 EventSource 的库,允许你配置请求头和其他选项。用于流式输出API,也可以使用fetch
npm install event-source-polyfill

备注:官方文档都是服务端调取API的方式,为了保证防止API key,app_id等数据泄露,当然前端也可以使用HTTP方式直接使用,但需要注意Axios在Node服务端支持stream类型请求,但是在浏览器客户端时不支持的,按照官方文档示例写会报错。

2,展示数据的插件

  • markdown-it 是一个高效且可扩展的 Markdown 解析器,完全支持 CommonMark 规范,并提供了许多语法扩展和插件
npm install markdown-it
  • highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,比较实用
npm install highlight.js

二,调用相应API的主要方法

1,单轮对话,和官方文档类似

import axios from 'axios';

async function callDashScope() {
    const apiKey = process.env.DASHSCOPE_API_KEY;
    const appId = 'YOUR_APP_ID';// 替换为实际的应用 ID
    const url = `https://dashscope.aliyuncs.com/api/v1/apps/${appId}/completion`;
    const data = {
        input: {
            prompt: "你是谁?"
        },
        parameters: {},
        debug: {}
    };

    try {
        const response = await axios.post(url, data, {
            headers: {
                'Authorization': `Bearer ${apiKey}`,
                'Content-Type': 'application/json'
            }
        });

        if (response.status === 200) {
        	// 此处返回数据
            console.log(`${response.data.output.text}`);
        } 
    } catch (error) {
        console.error(`Error calling DashScope: ${error.message}`);
    }
}

callDashScope();

2,多论对话,和官方文档类似

多轮对话通过传递session_id或messages实现。更多用法请参考多轮对话

使用session_id进行多轮对话

import axios from 'axios';

// 记录上一次的对话session_id
const lastSessionId = ref('');

async function callDashScope() {
    const apiKey = process.env.DASHSCOPE_API_KEY;
    const appId = 'YOUR_APP_ID';// 替换为实际的应用 ID

    const url = `https://dashscope.aliyuncs.com/api/v1/apps/${appId}/completion`;

    const data = {
        input: {
            prompt: "你是谁?"session_id: lastSessionId.value
        },
        parameters: {},
        debug: {}
    };

    try {
        const response = await axios.post(url, data, {
            headers: {
                'Authorization': `Bearer ${apiKey}`,
                'Content-Type': 'application/json'
            }
        });

        if (response.status === 200) {
        	// 此处返回数据
        	lastSessionId.value = response.data.output.session_id
            console.log(`${response.data.output.text}`);
            console.log(`session_id=${response.data.output.session_id}`);
        } 
    } catch (error) {
        console.error(`Error calling DashScope: ${error.message}`);
    }
}
callDashScope();

使用messages进行多轮对话

import axios from 'axios';

// 记录消息列表
const messages = ref([
  {
    "role": "system",
    "content": "You are a helpful assistant."
  },
  {
    "role": "user",
    "content": "你是谁?"
  },
  {
    "role": "assistant",
    "content": "我是阿里云开发的大规模语言模型,我叫通义千问。"
  },
  {
    "role": "user",
    "content": "你能做什么?"
  }
])

async function callDashScope() {
  const apiKey = process.env.DASHSCOPE_API_KEY;
  const appId = 'YOUR_APP_ID';//替换为实际的应用 ID

  const url = `https://dashscope.aliyuncs.com/api/v1/apps/${appId}/completion`;

  const data = {
    "input": {
      "messages": messages.value
    },
    parameters: {},
    debug: {}
  };

  try {
    const response = await axios.post(url, data, {
      headers: {
        'Authorization': `Bearer ${apiKey}`,
        'Content-Type': 'application/json'
      }
    });

    if (response.status === 200) {
      // 记录消息
      messages.value.push({
        "role": "assistant",
        "content": response.data.output.text
      });
      console.log(`${response.data.output.text}`);
    } 
  } catch (error) {
    console.error(`Error calling DashScope: ${error.message}`);
  }
}

callDashScope();

3,流式输出,和官方文档不一样

方式1:EventSourcePolyfill获取stream数据(推荐)

EventSourcePolyfill比fetch方便,数据不需要太多处理

import { fetchEventSource } from '@microsoft/fetch-event-source';
function callDashScope() {
  const apiKey = process.env.DASHSCOPE_API_KEY;
  const appId = 'YOUR_APP_ID';// 替换为实际的应用 ID

  const url = `https://dashscope.aliyuncs.com/api/v1/apps/${ appId }/completion`;

  const data = {
    input: {
      prompt: "你是谁?"
      stream: true,
    },
    parameters: {
      incremental_output: true
    },
    debug: {}
  };

  try {
   fetchEventSource(url, {
      method: 'post',
      headers: {
        'Authorization': `Bearer ${ apiKey }`,
        'Content-Type': 'application/json',
        'X-DashScope-SSE': 'enable' // 流式输出
      },
      body: JSON.stringify(data),
     onmessage: (event) => {
       const data = JSON.parse(event.data);
       const text = data.output.text
       // 将输出追加到页面上
       document.getElementById('output').innerHTML += text
     },
     onclose: () => {
       console.log('Connection closed');
     },
     onerror: (error) => {
       console.error('Error with fetchEventSource:', error);
     }
    })
  } catch (error) {
    console.error(`Error calling DashScope: ${ error.message }`);
  }
}

callDashScope();

方式2:fetch获取stream数据

注意:使用fetch获取stream数据,需要自己进行复杂的拼接解析,因此遇到比较复杂的数据时,JSON.parse(data)会报错。

async function callDashScope() {
  const apiKey = process.env.DASHSCOPE_API_KEY;
  const appId = 'YOUR_APP_ID';// 替换为实际的应用 ID

  const url = `https://dashscope.aliyuncs.com/api/v1/apps/${ appId }/completion`;

  const data = {
    input: {
      prompt: "你是谁?"
      stream: true,
    },
    parameters: {
      incremental_output: true
    },
    debug: {}
  };

  try {
    const response = await fetch(url, {
      method: 'post',
      headers: {
        'Authorization': `Bearer ${ apiKey }`,
        'Content-Type': 'application/json',
        'X-DashScope-SSE': 'enable' // 流式输出
      },
      body: JSON.stringify(data)
    })

    // 处理流式响应
    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');
    let done = false;
    while (!done) {
      const { value, done: chunkDone } = await reader.read();
      done = chunkDone;
      if (value) {
        const chunk = decoder.decode(value, { stream: true });
        // 逐行解析数据
        const lines = chunk.split(/\r?\n/).filter(line => line.trim() !== '');
        // 遍历每一行数据
        for (const line of lines) {
          if (line.trim().startsWith('data:')) {
            const data = line.trim().slice(5);
            if (data === '[DONE]') return;
            // 解析数据
            const parsedData = JSON.parse(data);
            if (parsedData.output) {
              // 处理输出数据
              const text = parsedData.output.text || '';
              // 将输出数据添加到页面中
              document.getElementById('output').innerHTML += text;
            }
          }
        }
      }
    }
  } catch (error) {
    console.error(`Error calling DashScope: ${ error.message }`);
  }
}

callDashScope();
Vue3中实现一个类似于通义的界面通常需要结合前端框架Vue、交互库如Element UI,以及后端API调用能力。下面是一个简单的示例,展示如何创建一个基础的答组件,但实际上实现通义的复杂度远超于此,涉及到自然语言处理、深度学习等技术。 首先,你需要安装Vue和相关的依赖: ```bash npm install vue@next element-ui axios ``` 然后,创建一个`QuestionComponent.vue`文件,包含一个输入框用于提和一个按钮触发搜索: ```html <template> <div> <el-input v-model="question" placeholder="请输入题"></el-input> <button @click="searchAnswer">搜索答案</button> <p v-if="answer">{{ answer }}</p> </div> </template> <script> import { ref, onMounted } from 'vue'; import axios from 'axios'; export default { setup() { const question = ref(''); const answer = ref(''); // 这里只是一个模拟,真正的API请求应该替换为你实际的接口 onMounted(() => { searchAnswer(); }); async function searchAnswer() { try { const response = await axios.get('/api/ask', { params: { q: question.value } }); answer.value = response.data.answer; } catch (error) { console.error('获取答案失败:', error); } } return { question, answer, searchAnswer }; } }; </script> ``` 这只是一个基本的结构,实际中还需要考虑错误处理、状态管理(比如Vuex)、以及更复杂的用户交互设计。对于像通义这样的AI聊天机器人,前端主要是负责数据展示和交互,而真正的题理解和回答会由服务器端的模型处理,并通过API返回结果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mf_717714

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值