当前位置： 首页 > news >正文

vue仿chatGpt的AI聊天功能--大模型通义千问（阿里云）

news 2025/7/7 22:33:09

vue仿chatGpt的AI聊天功能–大模型通义千问（阿里云）

通义千问是由阿里云自主研发的大语言模型，用于理解和分析用户输入的自然语言。

1. 创建API-KEY并配置环境变量

打开通义千问网站进行登录，登陆之后创建api-key，右上角头像鼠标悬浮会有一个api-key

image-20240927131528177

在左侧导航栏，选择全部API-KEY或我的API-KEY， 单击创建新的API-KEY 可以添加十个key

image-20240927131626502

填写你的信息，系统创建生成API-KEY，并在弹出的对话框中展示，可以单击复制按钮将API-KEY的内容复制保存。

image-20240927131637606

获得API-KEY后，建议您将其配置到环境变量中，以便在调用模型或应用时使用。这样可以避免在代码中显式地配置API-KEY，从而降低API-KEY泄漏的风险。在环境变量中配置API-KEY的具体操作

Linux系统

当您使用Linux系统（如Ubuntu、CentOS等）中的命令行添加DashScope的API-KEY为环境变量时，可以选择在当前会话添加临时性环境变量，或对当前用户添加永久性环境变量。

添加临时性环境变量

如果您仅想在当前会话中添加并使用临时性环境变量，您可以运行以下命令：

# 用您的 DashScope API-KEY 代替 YOUR_DASHSCOPE_API_KEY
export DASHSCOPE_API_KEY="YOUR_DASHSCOPE_API_KEY"

您可以在当前会话运行以下命令检查环境变量是否生效：

echo $DASHSCOPE_API_KEY

对当前用户添加永久性环境变量

如果您想对当前用户添加永久性环境变量，使得在该用户的新会话中也可以使用该环境变量，您可以把以下命令语句复制并添加到~/.bashrc文件中：

# 用您的 DashScope API-KEY 代替 YOUR_DASHSCOPE_API_KEY
export DASHSCOPE_API_KEY="YOUR_DASHSCOPE_API_KEY"

或直接运行以下命令将上述命令语句添加到~/.bashrc中：

# 用您的 DashScope API-KEY 代替 YOUR_DASHSCOPE_API_KEY
echo "export DASHSCOPE_API_KEY='YOUR_DASHSCOPE_API_KEY'" >> ~/.bashrc

添加完成后，您可以运行以下命令使得环境变量生效：

source ~/.bashrc

您可以新建立一个会话，运行以下命令检查环境变量是否生效：

echo $DASHSCOPE_API_KEY

macOS系统

当您使用macOS系统中的命令行添加DashScope的API-KEY为环境变量时，可以选择在当前会话添加临时性环境变量，或对当前用户添加永久性环境变量。

添加临时性环境变量

如果您仅想在当前会话中添加并使用临时性环境变量，您可以运行以下命令：

# 用您的 DashScope API-KEY 代替 YOUR_DASHSCOPE_API_KEY
export DASHSCOPE_API_KEY="YOUR_DASHSCOPE_API_KEY"

您可以在当前会话运行以下命令检查环境变量是否生效：

echo $DASHSCOPE_API_KEY

对当前用户添加永久性环境变量

如果您想对当前用户添加永久性环境变量，使得在该用户的新会话中也可以使用该环境变量，您可以根据您使用的Shell类型把以下命令复制并添加到/.zshrc或/.bash_profile文件中。

# 用您的 DashScope API-KEY 代替 YOUR_DASHSCOPE_API_KEY
export DASHSCOPE_API_KEY="YOUR_DASHSCOPE_API_KEY"

或直接运行以下命令将上述命令语句添加到/.zshrc或/.bash_profile中：

# 用您的 DashScope API-KEY 代替 YOUR_DASHSCOPE_API_KEY
## 如果您的Shell类型是Zsh，运行以下命令
echo "export DASHSCOPE_API_KEY='YOUR_DASHSCOPE_API_KEY'" >> ~/.zshrc## 如果您的Shell类型是Bash，运行以下命令
echo "export DASHSCOPE_API_KEY='YOUR_DASHSCOPE_API_KEY'" >> ~/.bash_profile

添加完成后，您可以根据您使用的Shell类型运行以下命令使得环境变量生效：

# 如果您的Shell类型是Zsh，运行以下命令
source ~/.zshrc# 如果您的Shell类型是Bash，运行以下命令
source ~/.bash_profile

您可以新建立一个会话，运行以下命令检查环境变量是否生效：

echo $DASHSCOPE_API_KEY

Windows系统

当您使用CMD中的命令行添加DashScope的API-KEY为环境变量时，可以选择在当前会话添加临时性环境变量，或对当前用户添加永久性环境变量。

添加临时性环境变量

如果您仅想在当前会话中添加并使用临时性环境变量，您可以运行以下命令：

# 用您的 DashScope API-KEY 代替 YOUR_DASHSCOPE_API_KEY
set DASHSCOPE_API_KEY="YOUR_DASHSCOPE_API_KEY"

您可以在当前会话运行以下命令检查环境变量是否生效：

echo %DASHSCOPE_API_KEY%

对当前用户添加永久性环境变量

当您在CMD中需要为当前用户添加永久性环境变量时，您可以运行以下命令：

# 用您的 DashScope API-KEY 代替 YOUR_DASHSCOPE_API_KEY
setx DASHSCOPE_API_KEY "YOUR_DASHSCOPE_API_KEY"

您需要重新打开一个CMD窗口，运行以下命令检查环境变量是否生效：

echo %DASHSCOPE_API_KEY%

调用通义千问api

在前端中只能使用node调用，如果直接使用vue调用会出现504报错

下载openai

npm i openai

在node文件中引入openai，并进行创建 API-KEY填你申请的key值

   import OpenAI from "openai";const openai = new OpenAI({apiKey: API-KEY,dangerouslyAllowBrowser: true, // 允许在浏览器中使用 APIbaseURL: "http://localhost:5173/compatible-mode/v1/chat/completions",});

接口请求通义千问api，下面是一个示例，本人正在使用中

<!--* @Author: hukai huzhengen@gmail.com* @Date: 2024-09-26 14:41:33* @LastEditors: hukai huzhengen@gmail.com* @LastEditTime: 2024-09-27 13:44:13* @FilePath: \ali-web-chatai-master\index.html* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>通义千问聊天AI</title><style>.chat-content {margin: 10px 0;}.user-input {display: block;margin: 20px 0;}</style>
</head><body><div id="chat-box"><!-- 对话显示区域 --></div><textarea class="user-input" id="user-input" rows="4" cols="50" placeholder="请输入您的问题"> </textarea><button id="send-button">发送</button><script type="module">import OpenAI from "openai";const openai = new OpenAI({apiKey: API-KEY,dangerouslyAllowBrowser: true, // 允许在浏览器中使用 APIbaseURL: "http://localhost:5173/compatible-mode/v1/chat/completions",});// 存储对话的上下文let messages = [{ role: "system", content: "You are a helpful assistant." }];// 处理发送消息async function sendMessage(userInput) {// 将用户的消息添加到对话上下文中messages.push({ role: "user", content: userInput });try {// 调用 OpenAI 的 chat completion 接口const response = await openai.chat.completions.create({model: "qwen-max", // 使用的模型messages: messages,});// 获取助手的回复const assistantMessage = response.choices[0].message.content;// 将助手的回复添加到对话上下文中messages.push({ role: "assistant", content: assistantMessage });// 更新对话显示区域updateChatBox(userInput, assistantMessage);} catch (error) {console.error("Error during API call:", error);}}// 更新对话显示区域function updateChatBox(userMessage, assistantMessage) {const chatBox = document.getElementById("chat-box");// 添加用户消息const userDiv = document.createElement("div");userDiv.classList.add("chat-content");userDiv.textContent = `用户: ${userMessage}`;chatBox.appendChild(userDiv);// 添加助手消息const assistantDiv = document.createElement("div");userDiv.classList.add("chat-content");assistantDiv.textContent = `助手: ${assistantMessage}`;chatBox.appendChild(assistantDiv);// 滚动到最新的消息chatBox.scrollTop = chatBox.scrollHeight;}// 绑定发送按钮事件document.getElementById("send-button").addEventListener("click", () => {console.log(12345)const userInput = document.getElementById("user-input").value;if (userInput.trim()) {sendMessage(userInput);document.getElementById("user-input").value = ""; // 清空输入框}});</script>
</body></html>项目地址https://github.com/continye/vite.github.io
参考文档https://help.aliyun.com/zh/model-studio/developer-reference/use-qwen-by-calling-api

相关文章：

vue仿chatGpt的AI聊天功能--大模型通义千问（阿里云）

vue仿chatGpt的AI聊天功能–大模型通义千问&#xff08;阿里云&#xff09; 通义千问是由阿里云自主研发的大语言模型&#xff0c;用于理解和分析用户输入的自然语言。 1. 创建API-KEY并配置环境变量 打开通义千问网站进行登录&#xff0c;登陆之后创建api-key&#xff0c;右…...

编程日记 2024/9/30 23:50:46

养老院管理系统（含源码+sql+视频导入教程+文档）

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 养老院管理系统拥有两种角色&#xff1a;管理员和护工 管理员&#xff1a;用户管理、老人信息管理、事故记录管理、入住费用管理、护工薪资管理、护工请假管理、床位管理、请假管理等 护…...

编程日记 2024/9/30 23:49:45

大数据的挑战是小文件

小文件可能会给存储平台及其支持的应用程序带来大问题。在 Google 上搜索 “small files performance” 会产生 2M 的结果。这篇博文将更深入地研究小文件问题&#xff0c;深入研究其根源并总结解决方案。 问题陈述 出于本讨论的目的&#xff0c;小文件通常被视为小于 64 KB …...

编程日记 2024/9/30 23:47:44

迁移学习案例-python代码

大白话 迁移学习就是用不太相同但又有一些联系的A和B数据&#xff0c;训练同一个网络。比如&#xff0c;先用A数据训练一下网络&#xff0c;然后再用B数据训练一下网络&#xff0c;那么就说最后的模型是从A迁移到B的。 迁移学习的具体形式是多种多样的&#xff0c;比如先用A训练…...

编程日记 2024/9/30 23:46:43

MCUboot 和 U-Boot区别

MCUboot 和 U-Boot 都是用于嵌入式系统的引导加载程序&#xff0c;但它们在一些方面存在区别&#xff1a; 功能特性 安全特性侧重不同 MCUboot &#xff1a;更专注于安全引导方面&#xff0c;强调安全启动、固件完整性验证和加密等安全功能。它提供了强大的安全机制来防止恶意…...

编程日记 2024/9/30 23:45:42

Apache OFBiz SSRF漏洞CVE-2024-45507分析

Apache OFBiz介绍 Apache OFBiz 是一个功能丰富的开源电子商务平台&#xff0c;包含完整的商业解决方案&#xff0c;适用于多种行业。它提供了一套全面的服务&#xff0c;包括客户关系管理&#xff08;CRM&#xff09;、企业资源规划&#xff08;ERP&#xff09;、订单管理、产…...

编程日记 2024/9/30 23:40:37

计算机毕业设计 饮食营养管理信息系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…...

编程日记 2024/9/30 23:38:32

828华为云征文｜华为云Flexus云服务器X实例部署——盲盒抽奖商城系统以及编译发布小程序

盲盒抽奖商城系统使用 thinkphp6.0 uniapp 开发&#xff0c;做到了全移动端兼容。一个系统不仅可以打包 小程序 还可以 打包APP &#xff0c;H5 华为云Flexus云服务器X实例在安装搭建盲盒商城小程序方面具有显著优势&#xff0c;这些优势主要体现在以下几个方面&#xff1a; …...

编程日记 2024/9/30 23:35:30

优化理论及应用精解【12】

文章目录 最优化基础基本概念一、目标函数二、约束条件三、约束函数 可行域与可行点可行点可行域可行点与可行域的关系示例 最优值与可行域的关系1. 最优值一定在可行域内取得2. 可行域定义了最优解的搜索空间3. 最优值的存在性与可行域的性质有关4. 最优值与可行域的边界关系示…...

编程日记 2024/9/30 23:34:28

excel 填充内容的公式

多行填充快捷方式&#xff1a; 使用“CtrlEnter”键&#xff0c;这样所有选中的空单元格前就会自动添加上相同的字符。 对于多行填充&#xff0c;Excel提供了几个快捷键来提高工作效率&#xff1a; “CtrlR”用于向右填充数据。如果你在表格的某一列输入了数据&#xff0c;选…...

编程日记 2024/9/30 23:33:27

这款工具在手，前端开发轻松搞定！

这款工具在手&#xff0c;前端开发轻松搞定&#xff01; 引言 在之前的一篇文章中&#xff0c;已经给大家分享了一款AI助手。尽管该助手能够生成前端代码&#xff0c;但遗憾的是缺少了实时预览的功能。而现在&#xff0c;这一缺憾已经被弥补——你只需要描述你的设计想法&…...

编程日记 2024/9/30 23:32:25

Hadoop三大组件之HDFS（一）

HDFS 简介 HDFS (Hadoop Distributed File System) 是一个分布式文件系统&#xff0c;用于存储文件&#xff0c;采用目录树结构来定位文件。它由多个服务器组成&#xff0c;每个服务器在集群中扮演不同的角色。 适合一次写入&#xff0c;多次读取的场景。文件创建、写入和关闭…...

编程日记 2024/9/30 23:29:22

基于Hadoop的NBA球员大数据分析及可视化系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…...

编程日记 2024/9/30 23:26:19

docker容器安装nginx

docker安装nginx部署前端项目 拉取镜像 docker pull nginx:1.24.0运行容器 docker run --name nginx -p 80:80 -d nginx:1.24.0创建本地挂载的目录 mkdir -p /docker/nginx/conf mkdir -p /docker/nginx/log mkdir -p /docker/nginx/html复制运行的nginx配置到宿主机上 将…...

编程日记 2024/9/30 23:25:19

LC记录一：寻找旋转数组最小值、判断旋转数组是否存在给定元素

文章目录 33.搜索旋转排序数组81.搜索旋转排序数组||153.寻找旋转排序数组中的最小值154.寻找旋转排序数组中的最小值||参考链接 33.搜索旋转排序数组 https://leetcode.cn/problems/search-in-rotated-sorted-array/description/ 下面这张图片是LC154题官方题解提供的一个图…...

编程日记 2024/9/30 23:24:18

关于 JVM 个人 NOTE

目录 1、JVM 的体系结构 2、双亲委派机制 3、堆内存调优 4、关于GC垃圾回收机制 4.1 GC中的复制算法 4.2 GC中的标记清除算法 1、JVM 的体系结构 "堆"中存在垃圾而"栈"中不存在垃圾的原因&#xff1a; 堆&#xff08;Heap&#xff09; 用途&#xff…...

编程日记 2024/9/30 23:23:17

网络工程和信息安全专业应该考哪些证书?

网络工程和信息安全专业在校大学生可以考的网络信息安全方向证书有NISP一级、NISP二级、CISP-DSG、CISP-PTE&#xff01; 一、NISP一级 NISP一级是网络安全行业入门证书&#xff01; NISP一级报名条件&#xff1a;年满16周岁即可 NISP一级报名时间&#xff1a;随时可报 NI…...

编程日记 2024/9/30 23:21:15

ASP.NET Core 创建使用异步队列

示例图 在 ASP.NET Core 应用程序中&#xff0c;执行耗时任务而不阻塞线程的一种有效方法是使用异步队列。在本文中&#xff0c;我们将探讨如何使用 .NET Core 和 C# 创建队列结构以及如何使用此队列异步执行操作。 步骤 1&#xff1a;创建 EmailMessage 类 首先&#xff0c…...

编程日记 2024/9/30 23:20:14

从Linux系统的角度看待文件-基础IO

目录 从Linux系统的角度看待文件 系统文件I/O open write read 文件操作的本质 vim中批量注释的方法 从Linux系统的角度看待文件 关于文件的共识&#xff1a; 1.空文件也要占用磁盘空间 2.文件内容属性 3.文件操作包括文件内容/文件属性/文件内容属性 4.文件路径文…...

编程日记 2024/9/30 23:18:12

总结之Coze 是一站式 AI Bot 开发平台——工作流使用及coze总结（三）

工作流介绍 工作流支持通过可视化的方式&#xff0c;对插件、大语言模型、代码块等功能进行组合&#xff0c;从而实现复杂、稳定的业务流程编排&#xff0c;例如旅行规划、报告分析等。 当目标任务场景包含较多的步骤&#xff0c;且对输出结果的准确性、格式有严格要求时&…...

编程日记 2024/9/30 23:17:11

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/6/18 2:20:36

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2025/7/6 3:45:35

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/7/7 20:58:52

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/7/6 8:41:46

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/7/4 17:40:43

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/7/7 17:43:40

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/6/25 4:08:42

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/6/16 18:42:13

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2025/7/7 13:20:16

绕过 Xcode？使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节&#xff1a;强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说&#xff0c;这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发&#xff08;例如 Flutter、React Na…...

编程新知 2025/7/7 5:56:10