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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/55092.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

FRP安装配置详解

FRP安装配置详解

FRP 安装与配置详解 FRP&#xff08;Fast Reverse Proxy&#xff09;是一款内网穿透工具&#xff0c;它帮助内网设备通过公网服务器将服务暴露到外网。以下是详细的安装与配置步骤&#xff0c;帮助你快速部署 FRP。 一、安装 FRP 1. 下载 FRP FRP 支持多种系统平台&#xff…
阅读更多...
Qt C++设计模式-＞享元模式

Qt C++设计模式-＞享元模式

享元模式&#xff08;Flyweight Pattern&#xff09;是一种结构型设计模式&#xff0c;旨在通过共享相同对象来减少内存使用&#xff0c;尤其适合在大量重复对象的情况下。它通过将对象的可共享部分抽取出来&#xff0c;并在多个上下文中共享&#xff0c;从而避免对象的多次创建…
阅读更多...
Tomcat为什么要打破双亲委派？怎么保证安全

Tomcat为什么要打破双亲委派？怎么保证安全

Tomcat打破双亲委派模型的原因主要是为了解决Web应用程序中的类加载冲突问题&#xff0c;并提供更好的灵活性和可扩展性。在Java中&#xff0c;双亲委派模型是一种类加载机制&#xff0c;它确保了类加载的安全性和一致性&#xff0c;但在Web应用程序的场景下&#xff0c;它可能…
阅读更多...
MySQL和Doris开窗函数LAG执行时的区别

MySQL和Doris开窗函数LAG执行时的区别

目标表的表结构 CREATE TABLE point_value_status_color_tmp ( id bigint NOT NULL, org_id varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL, device_id varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL, origin_ti…
阅读更多...
数据库课程设计案例：在线教育管理系统

数据库课程设计案例：在线教育管理系统

一、项目背景 随着在线教育的兴起&#xff0c;传统的教学管理模式面临着新的挑战。在线教育管理系统旨在为学生、教师和管理员提供一个高效、便捷的学习与管理平台&#xff0c;以提升学习效果和管理效率。 二、系统功能需求 用户管理 用户注册与登录角色管理&#xff08;学生…
阅读更多...
CSS面试真题 part1

CSS面试真题 part1

CSS面试真题 part1 1、说说你对盒子模型的理解2、谈谈你对BFC的理解3、什么是响应式设计&#xff1f;响应式设计的基本原理是什么&#xff1f;如何做&#xff1f;4、元素水平垂直居中的方法有哪些&#xff1f;如果元素不定宽高呢&#xff1f;5、如何实现两栏布局&#xff0c;右…
阅读更多...
目标检测——VOC2007数据集

目标检测——VOC2007数据集

目标检测入门code 文件目录 下载数据集——在官网下载VOC2007数据集 下载训练数据集 TRAIN data 下载测试数据集 TEST data 解压数据集 解压——训练数据集&#xff0c;在服务器上&#xff0c;目录为VOCdevkit 部分文件目录 全部文件总目录 解压——测试数据集 &#xff08;…
阅读更多...
Unity 与虚幻引擎对比：两大游戏开发引擎的优劣分析

Unity 与虚幻引擎对比：两大游戏开发引擎的优劣分析

在游戏开发领域&#xff0c;Unity 和虚幻引擎&#xff08;Unreal Engine&#xff09;是两款最为知名且广泛使用的引擎。它们各有特点&#xff0c;适合不同类型的开发者和项目。在这篇博客中&#xff0c;我们将深入探讨这两大引擎的核心功能、适用场景、优缺点&#xff0c;以及如…
阅读更多...
DMDSC更换DCR和VOTE磁盘

DMDSC更换DCR和VOTE磁盘

DMDSC更换DCR和VOTE磁盘 为了提高DMDSC集群运行速度和节点之间通信协调的效率&#xff0c;需要将运行在机械盘上的dcr和vote磁盘替换到SSD高效磁盘上。将原来200M的dcr和vote机械磁盘&#xff0c;换成500M的SSD高效磁盘。 磁盘替换规划信息如下所示&#xff1a; 信息说明 替…
阅读更多...
什么是IPv6

什么是IPv6

目前国内的网络正在快速的向IPv6升级中&#xff0c;从网络基础设施如运营商骨干网、城域网&#xff0c;到互联网服务商如各类云服务&#xff0c;以及各类终端设备厂商如手机、电脑、路由器、交换机等。目前运营商提供的IPv6线路主要分为支持前缀授权和不支持前缀授权两种。 说…
阅读更多...
Python酷玩之旅_如何连接MySQL（mysql-connector-python）

Python酷玩之旅_如何连接MySQL（mysql-connector-python）

前言 Python作为数据科学、机器学习等领域的必选武器&#xff0c;备受各界人士的喜爱。当你面对不同类型、存储于各类介质的数据时&#xff0c;第一时间是不是要让它亮个相&#xff1f;做个统计&#xff0c;画个图表&#xff0c;搞个报表… 等等。 正如Java中的JdbcDriver一样…
阅读更多...
真正的Open AI ——LLaMA颠覆开源大模型

真正的Open AI ——LLaMA颠覆开源大模型

1. LLaMA 简介 LLaMA&#xff08;Large Language Model Meta AI&#xff09;是由Meta&#xff08;原Facebook&#xff09;推出的一个大型语言模型系列&#xff0c;旨在通过更小的模型规模和更少的计算资源&#xff0c;实现与其他主流语言模型&#xff08;如GPT&#xff09;相媲…
阅读更多...
【解密 Kotlin 扩展函数】扩展属性与扩展函数类似(十九)

【解密 Kotlin 扩展函数】扩展属性与扩展函数类似(十九)

导读大纲 1.1.1 扩展属性的创建和使用 1.1.1 扩展属性的创建和使用 之前, 我们已经了解声明 Kotlin 属性的语法 Kotlin中的顶级属性–传送门就像扩展函数一样,我们也可以指定扩展属性就像之前所说&#xff0c;属性和函数的区别在于前者是特征&#xff0c;后者是行为 相比扩展函…
阅读更多...
【漏洞复现】金和OA C6 GeneralXmlhttpPage.aspx Sql注入漏洞

【漏洞复现】金和OA C6 GeneralXmlhttpPage.aspx Sql注入漏洞

免责声明： 本文旨在提供有关特定漏洞的信息，以帮助用户了解潜在风险。发布此信息旨在促进网络安全意识和技术进步，并非出于恶意。读者应理解，利用本文提到的漏洞或进行相关测试可能违反法律或服务协议。未经授权访问系统、网络或应用程序可能导致法律责任或严重后果…
阅读更多...
编程思维之函数返回函数

编程思维之函数返回函数

当我们有一个函数1他需要封装成公共函数&#xff0c;但是了他需要传入一个组件内的值1才能进行逻辑&#xff0c;而我们在使用她的时候又不想传入两个参数&#xff0c;可以把函数1封装成返回函数2的一个函数&#xff0c;函数1需要传入值1在决定函数2. 然后在组件内得到函数2&…
阅读更多...
《后端程序猿 · Spring事务失效场景》

《后端程序猿 · Spring事务失效场景》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…
阅读更多...
git commit -am 仅提交已修改文件

git commit -am 仅提交已修改文件

git commit -am 是一个 Git 命令&#xff0c;用于将所有已跟踪&#xff08;tracked&#xff09;文件的修改添加到暂存区&#xff0c;并同时创建一个新的提交。 具体解释&#xff1a; -a&#xff1a;表示自动暂存所有已跟踪的文件的修改&#xff08;包括修改和删除&#xff09…
阅读更多...
2024/9/29周报

2024/9/29周报

文章目录 摘要Abstract污水处理工艺流程整体介绍粗格栅细格栅曝气沉砂池提升泵房峰谷平策略 初沉池&#xff08;一级处理&#xff09;工作原理运行管理 氧化沟生化池&#xff08;二级处理&#xff09;二沉池工作原理运行参数 高效沉淀池功能与特点工作原理 深度处理&#xff08…
阅读更多...
LeetCode 918. 环形子数组的最大和

LeetCode 918. 环形子数组的最大和

原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 给定一个长度为 n 的环形整数数组 nums &#xff0c;返回 nums 的非空 子数组 的最大可能和 。 环形数组 意味着数组的末端将会与开头相连呈环状。形式上&#xff0c; nums[i] 的下一个元素是 nums[(i 1) % n…
阅读更多...
防止错误输入！Excel单元格限制输入内容的三种有效方式

防止错误输入！Excel单元格限制输入内容的三种有效方式

在Excel中&#xff0c;限制单元格输入内容可以帮助避免数据输入错误&#xff0c;确保数据的一致性和准确性。今天小编分享三种方法&#xff0c;可以轻松限制Excel单元格的输入内容&#xff0c;确保数据输入符合预期要求&#xff0c;一起来看看吧&#xff01; 方法一&#xff1a…
阅读更多...
最新文章

Copyright @ 2022~2023