企业官网建设流程全解析

网站排名前十,自己做网站公司,保定企业官网搭建,百度如何网站当然啦#xff0c;现在的 AI 也不是完美的#xff0c;比如有时候会瞎编东西#xff08;就是大家说的 “AI 幻觉”#xff09;#xff0c;但给 APP 加个 AI 功能#xff0c;确实能让它变好玩、互动感更强。那咱们自己的 APP#xff0c;怎么快速加上 AI 功能呢#xff1f…当然啦现在的 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 chunkfunction push() {// done is a Boolean and value a Uint8Arrayreader.read().then(({ done, value }) {// If there is no more data to readif (done) {console.log(done, done);controller.close();return;}// Get the data and send it to the browser via the controllercontroller.enqueue(value);// Check chunks by logging to the console// console.log(done, value); // Mconst decoder new TextDecoder(); // const decodedString decoder.decode(value); // console.log(decodedString); // push();});}push();