企业官网建设流程全解析

当然啦，现在的 AI 也不是完美的，比如有时候会瞎编东西（就是大家说的 “AI 幻觉”），但给 APP 加个 AI 功能，确实能让它变好玩、互动感更强。那咱们自己的 APP，怎么快速加上 AI 功能呢？其实不用自己从头搞，直接用现成平台提供的模型和 API 就行，今天就来聊聊怎么用阿里云百炼。

它是阿里云出的大模型服务平台，把复杂的技术都打包好了，就算你没什么 AI 基础，也能很快把 AI 功能集成到自己的 APP 里。

以下内容可配合视频一起食用

前端基础项目搭建

首先我们先搭建一个基础的前端项目，我这里用的是vue框架，UI组件使用了ant-design-vue和ant-design-x-vue，其中ant-design-x-vue增加了对ai交互的支持，可以让开发效率更高。

接下来我们就来尝试「直接」使用通义千问API来实现ai对话功能。

前置准备

在编写代码之前，我们先完成一些准备工作，注册登录，以及获取API key。

构造请求并显示返回结果

然后我们就可以开始构造请求进行API的调用了。

// ...

const handleSubmit = message => {

const newMessage: chatItem = {

key: chatList.value.length,

role: 'user',

content: message,

};

chatList.value.push(newMessage);

fetchReply();

}

const fetchReply = async () => {

return fetch( // +

'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions', // +

{ // +

method: 'POST', // +

headers: { // +

Authorization: `Bearer ${import.meta.env.VITE_ALIYUN_API_APPKEY}`, // +

'Content-Type': 'application/json', // +

}, // +

body: JSON.stringify({ // +

model: 'qwen-plus', // +

messages: chatList.value // +

}) // +

} // +

) // +

};

// ...

参数model是指定了我们使用的模型，我们还给接口传递了一个messages的消息数组，这是因为通义千问API是无状态的，它不会自动记录历史对话，所以要实现多轮对话，就需要在每次请求中显式地传递完整的上下文信息，很显然这样随着聊天记录增加，请求体会变得越来越大，文档后面呢也提供了一些优化策略，不过这不是我们今天的重点。

现在我们刷新页面试着发送消息去请求一下API，就可以看到接口返回的ai消息了，消息的内容就在choices数组里message的content属性里。

ai_api2

我们把它显示到页面上就可以了。

const handleSubmit = message => {

const newMessage: chatItem = {

key: chatList.value.length,

role: 'user',

content: message,

};

chatList.value.push(newMessage);

fetchReply() // M

.then (response => response.json()) // +

.then(result => { // +

const newReply: chatItem = { // +

key: chatList.value.length, // +

role: 'assistant', // +

content: result.choices[0].message.content, // +

}; // +

chatList.value.push(newReply); // +

}); // +

}

ai_chat1

问题1：长时间等待

这时我们再发送消息，让ai输出更详细的自我介绍，可以注意到明显地有一段比较长的等待时间，这是因为这次返回的内容比较多。

ai_chat2

解决：改为流式输出

为了能有更好的用户体验，我们可以将返回的形式改为流式输出，在请求参数里增加stream参数的设置，将它设置为true。

const fetchReply = async () => {

return fetch(

'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions',

{

method: 'POST',

headers: {

Authorization: `Bearer ${import.meta.env.VITE_ALIYUN_API_KEY}`,

'Content-Type': 'application/json',

},

body: JSON.stringify({

model: 'qwen-plus',

messages: chatList.value,

stream: true // +

})

}

)

};

当我们再次请求时，会发现这个请求返回的内容和普通的请求不一样，network显示的请求里多了一个tab，标题是EventStream。

ai_api

这是因为我们设置了流式输出。流式输出通过持续返回模型生成的文本片段，可以提供给用户更好的应用体验，避免长时间的等待，那我们要怎么处理这类请求返回的流式内容呢？

这一类请求我以前也没有处理过，所以我找了MDN的文档来参考，MDN上有一个关于fetch API response的文档：ReadableStream，对返回的流式内容进行处理，我们把它复制过来。

const handleSubmit = message => {

const newMessage: chatItem = {

key: chatList.value.length,

role: 'user',

content: message,

};

chatList.value.push(newMessage);

const index = chatList.value.length; // +

let reply = ''; // +

fetchReply()

// .then (response => response.json())

// .then(result => {

// const newReply: chatItem = {

// key: chatList.value.length,

// role: 'assistant',

// content: result.choices[0].message.content,

// };

// chatList.value.push(newReply);

// });

.then(response => response.body)

.then(rb => {

const reader = rb.getReader();

return new ReadableStream({

start(controller) {

// The following function handles each data chunk

function push() {

// "done" is a Boolean and value a "Uint8Array"

reader.read().then(({ done, value }) => {

// If there is no more data to read

if (done) {

console.log("done", done);

controller.close();

return;

}

// Get the data and send it to the browser via the controller

controller.enqueue(value);

// Check chunks by logging to the console

// console.log(done, value); // M

const decoder = new TextDecoder(); // +

const decodedString = decoder.decode(value); // +

console.log(decodedString); // +

push();

});

}

push();