0
0

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

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

通义千问是由

  1. 阿里云

自主研发的大语言模型，用于理解和分析用户输入的自然语言。

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为环境变量时，可以选择在当前会话添加临时性环境变量，或对当前用户添加永久性环境变量。

添加临时性环境变量

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

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

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

  1. echo $DASHSCOPE_API_KEY

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

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

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

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

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

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

  1. source ~/.bashrc

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

  1. echo $DASHSCOPE_API_KEY

macOS系统

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

添加临时性环境变量

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

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

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

  1. echo $DASHSCOPE_API_KEY

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

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

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

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

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

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

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

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

  1. echo $DASHSCOPE_API_KEY

Windows系统

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

添加临时性环境变量

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

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

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

  1. echo %DASHSCOPE_API_KEY%

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

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

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

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

  1. echo %DASHSCOPE_API_KEY%

调用通义千问api

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

下载openai

  1. npm i openai

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

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

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

  1. <!--
  2.  * @Author: hukai huzhengen@gmail.com
  3.  * @Date: 2024-09-26 14:41:33
  4.  * @LastEditors: hukai huzhengen@gmail.com
  5.  * @LastEditTime: 2024-09-27 13:44:13
  6.  * @FilePath: \ali-web-chatai-master\index.html
  7.  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  8. -->
  9. <!DOCTYPE html>
  10. <html lang="en">
  12. <head>
  13.   <meta charset="UTF-8" />
  14.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  15.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  16.   <title>通义千问聊天AI</title>
  17.   <style>
  18.     .chat-content {
  19.       margin: 10px 0;
  20.     }
  22.     .user-input {
  23.       display: block;
  24.       margin: 20px 0;
  25.     }
  26.   </style>
  27. </head>
  29. <body>
  30.   <div id="chat-box">
  31.     <!-- 对话显示区域 -->
  32.   </div>
  34.   <textarea class="user-input" id="user-input" rows="4" cols="50" placeholder="请输入您的问题"> </textarea>
  35.   <button id="send-button">发送</button>
  37.   <script type="module">
  38.     import OpenAI from "openai";
  39.     const openai = new OpenAI({
  40.       apiKey: API-KEY,
  41.       dangerouslyAllowBrowser: true, // 允许在浏览器中使用 API
  42.       baseURL: "http://localhost:5173/compatible-mode/v1/chat/completions",
  43.     });
  45.     // 存储对话的上下文
  46.     let messages = [{ role: "system", content: "You are a helpful assistant." }];
  48.     // 处理发送消息
  49.     async function sendMessage(userInput) {
  50.       // 将用户的消息添加到对话上下文中
  51.       messages.push({ role: "user", content: userInput });
  53.       try {
  54.         // 调用 OpenAI 的 chat completion 接口
  55.         const response = await openai.chat.completions.create({
  56.           model: "qwen-max", // 使用的模型
  57.           messages: messages,
  58.         });
  60.         // 获取助手的回复
  61.         const assistantMessage = response.choices[0].message.content;
  63.         // 将助手的回复添加到对话上下文中
  64.         messages.push({ role: "assistant", content: assistantMessage });
  66.         // 更新对话显示区域
  67.         updateChatBox(userInput, assistantMessage);
  68.       } catch (error) {
  69.         console.error("Error during API call:", error);
  70.       }
  71.     }
  73.     // 更新对话显示区域
  74.     function updateChatBox(userMessage, assistantMessage) {
  75.       const chatBox = document.getElementById("chat-box");
  77.       // 添加用户消息
  78.       const userDiv = document.createElement("div");
  79.       userDiv.classList.add("chat-content");
  80.       userDiv.textContent = `用户: ${userMessage}`;
  81.       chatBox.appendChild(userDiv);
  83.       // 添加助手消息
  84.       const assistantDiv = document.createElement("div");
  85.       userDiv.classList.add("chat-content");
  86.       assistantDiv.textContent = `助手: ${assistantMessage}`;
  87.       chatBox.appendChild(assistantDiv);
  89.       // 滚动到最新的消息
  90.       chatBox.scrollTop = chatBox.scrollHeight;
  91.     }
  93.     // 绑定发送按钮事件
  94.     document.getElementById("send-button").addEventListener("click", () => {
  96.       console.log(12345)
  97.       const userInput = document.getElementById("user-input").value;
  98.       if (userInput.trim()) {
  99.         sendMessage(userInput);
  100.         document.getElementById("user-input").value = ""; // 清空输入框
  101.       }
  102.     });
  103.   </script>
  104. </body>
  106. </html>
  108. 项目地址https://github.com/continye/vite.github.io
  109. 参考文档https://help.aliyun.com/zh/model-studio/developer-reference/use-qwen-by-calling-api
标签： vue.js chatgpt 人工智能
本文转载自: https://blog.csdn.net/m0_74079648/article/details/142591726
版权归原作者 getaxiosluo 所有， 如有侵权，请联系我们删除。
登录后发布评论

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

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？