文心一言AI大模子，前端接入

大号在练葵花宝典  论坛元老 | 2024-7-11 15:12:41 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1657|帖子 1657|积分 4971

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
文心一言AI大模子，前端接入
一、参考接口资料
模子广场：https://console.bce.baidu.com/qianfan/modelcenter/model/buildIn/list
我的应用：https://console.bce.baidu.com/qianfan/ais/console/onlineService
千帆大模子调用API介绍：
https://cloud.baidu.com/doc/WENXINWORKSHOP/s/flfmc9do2
在线调试：
https://console.bce.baidu.com/ticket/?#/ticket/tools/api
https://console.bce.baidu.com/tools/#/api?product=AI&project=%E5%8D%83%E5%B8%86%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%B9%B3%E5%8F%B0&parent=%E9%89%B4%E6%9D%83%E8%AE%A4%E8%AF%81%E6%9C%BA%E5%88%B6&api=oauth%2F2.0%2Ftoken&method=post
二、vue代码：
  1. <template>
  2.     <div>
  3.         <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" :disabled="isSearching===true">
  4.             <el-tab-pane label="文心一言" name="wenxin">
  5.             <div class="kefubox" ref="containerRef">
  6.                 <div v-for="message in chatHistoryWenxin" :key="message.id">
  7.                     <!-- 遍历用户发送的信息，如果role为user就返回信息 -->
  8.                     <div v-if="message.sender === 'user'" class="user-message">
  9.                         <!-- 用户发送的信息 -->
  10.                         <div class="userBox">
  11.                             <!-- icon图标 -->
  12.                             <svg t="1686817502794" class="icon" viewBox="0 0 1024 1024" version="1.1"
  13.                                 xmlns="http://www.w3.org/2000/svg" p-id="3466" width="30" height="30">
  14.                                 <path fill="#000000"
  15.                                     d="M500 128.8c-95.2 5.6-173.6 83.2-180 178.4-7.2 112 80.8 205.6 191.2 205.6 106.4 0 192-86.4 192-192 0.8-110.4-92-198.4-203.2-192zM512 575.2c-128 0-383.2 64-383.2 192v96c0 17.6 14.4 32 32 32h702.4c17.6 0 32-14.4 32-32V766.4c0-127.2-255.2-191.2-383.2-191.2z"
  16.                                     p-id="3467">
  17.                                 </path>
  18.                             </svg>
  19.                         </div>
  20.                         <!-- 用户输入的问题 -->
  21.                         <span>{{ message.text }}</span>
  22.                     </div>
  23.                     <div v-else class="bot-message" style="margin: 5px 0px;padding:5px 10px;">
  24.                         <!-- icon图标 -->
  25.                         <div style="display: flex;align-items: center;margin-right: 10px;">
  26.                             <svg t="1686814946576" class="icon" viewBox="0 0 1024 1024" version="1.1"
  27.                                 xmlns="http://www.w3.org/2000/svg" p-id="2479" width="30" height="30">
  28.                                 <path
  29.                                     d="M959.716928 554.950208M532.429285 958.838931M64.446801 594.626859M270.969435 57.464783"
  30.                                     fill="#000000" p-id="2480"></path>
  31.                                 <path
  32.                                     d="M583.719438 385.762901C664.377456 493.897713 810.145377 538.433022 810.145377 538.433022 799.252283 351.240643 687.435615 259.769348 510.411829 258.869862 298.641681 257.789251 175.627996 429.173596 222.010373 597.866646 222.00935 597.866646 580.769246 462.953957 583.719438 385.762901z"
  33.                                     fill="#000000" p-id="2481"></path>
  34.                                 <path
  35.                                     d="M843.843874 721.201649c65.939805-16.944927 114.865097-15.887852 114.865097-150.871149 0-65.013713-38.867216-120.714316-93.980441-144.029324C824.128857 272.551466 697.718819 116.236328 507.890402 111.958908c-6.053879-0.135076-12.062733-0.157589-18.004049 0-183.887101 4.724605-309.892933 146.908908-324.069817 311.821865-58.44511 21.626553-102.44216 79.103616-100.462063 146.549727 4.432962 151.456481 66.321498 153.863297 148.712997 155.550729l0-293.098431c1.732457-125.304867 124.495432-264.293385 293.822932-264.293385 168.313404 0 261.415848 130.999566 302.464753 247.369947l0 301.380048c-8.28264 19.399839-30.449499 41.206494-70.936609 80.296791-52.819996 50.971905-128.907928 77.414137-128.907928 77.414137-8.844435 1.867534-15.078417 13.68365-12.603039 23.76424 2.475378 10.082636 13.253862 16.136515 21.605064 12.242835 0 0 80.274278-26.195615 140.430356-84.256986C819.492256 769.20392 843.640236 721.763444 843.843874 721.201649z"
  36.                                     fill="#000000" p-id="2482"></path>
  37.                                 <path
  38.                                     d="M375.327224 624.215758m-37.46631 0a36.613 36.613 0 1 0 74.93262 0 36.613 36.613 0 1 0-74.93262 0Z"
  39.                                     fill="#000000" p-id="2483"></path>
  40.                                 <path
  41.                                     d="M657.294131 624.215758m-37.46631 0a36.613 36.613 0 1 0 74.93262 0 36.613 36.613 0 1 0-74.93262 0Z"
  42.                                     fill="#000000" p-id="2484"></path>
  43.                             </svg>
  44.                         </div>
  45.                         <!-- GPT回答的信息 -->
  46.                         <!-- <span v-html="message.text.replace(/\n/g, '<br>')"> -->
  47.                         <div class="bot-txt" v-html="md.render(message.text)" ></div>
  48.                     </div>
  49.                 </div>
  50.             </div>
  51.             <!-- 输入框 -->
  52.             <div class="iptbox" v-if="isSearching===true">
  53.                     <el-input class="input" disabled type="text" v-model="userInput"
  54.                         placeholder="思考中，请稍等。。。" />
  55.                     <el-button @click="sendMessageQianfan" disabled type="primary">发送</el-button>
  56.             </div>
  57.             <div class="iptbox" v-else>
  58.                     <el-input class="input" type="text" v-model="userInput" @keyup.enter="sendMessageQianfan"
  59.                         placeholder="请输入要查询的问题..." />
  60.                     <el-button @click="sendMessageQianfan" type="primary">发送</el-button>
  61.             </div>
  62.             </el-tab-pane>
  63.             <el-tab-pane label="通义千问" name="tongyi">
  64.                 <div class="kefubox" ref="containerReftongyi">
  65.                 <div v-for="message in chatHistoryTongyi" :key="message.id">
  66.                     <!-- 遍历用户发送的信息，如果role为user就返回信息 -->
  67.                     <div v-if="message.sender === 'user'" class="user-message">
  68.                         <!-- 用户发送的信息 -->
  69.                         <div class="userBox">
  70.                             <!-- icon图标 -->
  71.                             <svg t="1686817502794" class="icon" viewBox="0 0 1024 1024" version="1.1"
  72.                                 xmlns="http://www.w3.org/2000/svg" p-id="3466" width="30" height="30">
  73.                                 <path fill="#000000"
  74.                                     d="M500 128.8c-95.2 5.6-173.6 83.2-180 178.4-7.2 112 80.8 205.6 191.2 205.6 106.4 0 192-86.4 192-192 0.8-110.4-92-198.4-203.2-192zM512 575.2c-128 0-383.2 64-383.2 192v96c0 17.6 14.4 32 32 32h702.4c17.6 0 32-14.4 32-32V766.4c0-127.2-255.2-191.2-383.2-191.2z"
  75.                                     p-id="3467">
  76.                                 </path>
  77.                             </svg>
  78.                         </div>
  79.                         <!-- 用户输入的问题 -->
  80.                         <span>{{ message.text }}</span>
  81.                     </div>
  82.                     <div v-else class="bot-message" style="margin: 5px 0px;padding:5px 10px;">
  83.                         <!-- icon图标 -->
  84.                         <div style="display: flex;align-items: center;margin-right: 10px;">
  85.                             <svg t="1686814946576" class="icon" viewBox="0 0 1024 1024" version="1.1"
  86.                                 xmlns="http://www.w3.org/2000/svg" p-id="2479" width="30" height="30">
  87.                                 <path
  88.                                     d="M959.716928 554.950208M532.429285 958.838931M64.446801 594.626859M270.969435 57.464783"
  89.                                     fill="#000000" p-id="2480"></path>
  90.                                 <path
  91.                                     d="M583.719438 385.762901C664.377456 493.897713 810.145377 538.433022 810.145377 538.433022 799.252283 351.240643 687.435615 259.769348 510.411829 258.869862 298.641681 257.789251 175.627996 429.173596 222.010373 597.866646 222.00935 597.866646 580.769246 462.953957 583.719438 385.762901z"
  92.                                     fill="#000000" p-id="2481"></path>
  93.                                 <path
  94.                                     d="M843.843874 721.201649c65.939805-16.944927 114.865097-15.887852 114.865097-150.871149 0-65.013713-38.867216-120.714316-93.980441-144.029324C824.128857 272.551466 697.718819 116.236328 507.890402 111.958908c-6.053879-0.135076-12.062733-0.157589-18.004049 0-183.887101 4.724605-309.892933 146.908908-324.069817 311.821865-58.44511 21.626553-102.44216 79.103616-100.462063 146.549727 4.432962 151.456481 66.321498 153.863297 148.712997 155.550729l0-293.098431c1.732457-125.304867 124.495432-264.293385 293.822932-264.293385 168.313404 0 261.415848 130.999566 302.464753 247.369947l0 301.380048c-8.28264 19.399839-30.449499 41.206494-70.936609 80.296791-52.819996 50.971905-128.907928 77.414137-128.907928 77.414137-8.844435 1.867534-15.078417 13.68365-12.603039 23.76424 2.475378 10.082636 13.253862 16.136515 21.605064 12.242835 0 0 80.274278-26.195615 140.430356-84.256986C819.492256 769.20392 843.640236 721.763444 843.843874 721.201649z"
  95.                                     fill="#000000" p-id="2482"></path>
  96.                                 <path
  97.                                     d="M375.327224 624.215758m-37.46631 0a36.613 36.613 0 1 0 74.93262 0 36.613 36.613 0 1 0-74.93262 0Z"
  98.                                     fill="#000000" p-id="2483"></path>
  99.                                 <path
  100.                                     d="M657.294131 624.215758m-37.46631 0a36.613 36.613 0 1 0 74.93262 0 36.613 36.613 0 1 0-74.93262 0Z"
  101.                                     fill="#000000" p-id="2484"></path>
  102.                             </svg>
  103.                         </div>
  104.                         <!-- Tongyi回答的信息 -->
  105.                         <!-- <span v-html="message.text.replace(/\n/g, '<br>')"> -->
  106.                         <div class="bot-txt" v-html="md.render(message.text)"></div>
  107.                     </div>
  108.                 </div>
  109.             </div>
  110.             <!-- 输入框 -->
  111.             <!-- 输入框 -->
  112.             <div class="iptbox" v-if="isSearching===true">
  113.                     <el-input class="input" disabled type="text" v-model="userInput"
  114.                         placeholder="思考中，请稍等。。。" />
  115.                     <el-button @click="sendMessageTongyi" disabled type="primary">发送</el-button>
  116.             </div>
  117.             <div class="iptbox" v-else>
  118.                     <el-input class="input" type="text" v-model="userInput" @keyup.enter="sendMessageTongyi"
  119.                         placeholder="请输入要查询的问题..." />
  120.                     <el-button @click="sendMessageTongyi" type="primary">发送</el-button>
  121.             </div>
  122.             </el-tab-pane>
  123.             <!-- 图片 -->
  124.             <el-tab-pane label="AI画原型" name="chatgpt">
  125.                 <div class="kefubox" ref="containerRefImage">
  126.                 <div v-for="message in chatHistoryImage" :key="message.id">
  127.                     <!-- 遍历用户发送的信息，如果role为user就返回信息 -->
  128.                     <div v-if="message.sender === 'user'" class="user-message">
  129.                         <!-- 用户发送的信息 -->
  130.                         <div class="userBox">
  131.                             <!-- icon图标 -->
  132.                             <svg t="1686817502794" class="icon" viewBox="0 0 1024 1024" version="1.1"
  133.                                 xmlns="http://www.w3.org/2000/svg" p-id="3466" width="30" height="30">
  134.                                 <path fill="#000000"
  135.                                     d="M500 128.8c-95.2 5.6-173.6 83.2-180 178.4-7.2 112 80.8 205.6 191.2 205.6 106.4 0 192-86.4 192-192 0.8-110.4-92-198.4-203.2-192zM512 575.2c-128 0-383.2 64-383.2 192v96c0 17.6 14.4 32 32 32h702.4c17.6 0 32-14.4 32-32V766.4c0-127.2-255.2-191.2-383.2-191.2z"
  136.                                     p-id="3467">
  137.                                 </path>
  138.                             </svg>
  139.                         </div>
  140.                         <!-- 用户输入的问题 -->
  141.                         <span>{{ message.text }}</span>
  142.                     </div>
  143.                     <div v-else class="bot-message" style="margin: 5px 0px;padding:5px 10px;">
  144.                         <!-- icon图标 -->
  145.                         <div style="display: flex;align-items: center;margin-right: 10px;">
  146.                             <svg t="1686814946576" class="icon" viewBox="0 0 1024 1024" version="1.1"
  147.                                 xmlns="http://www.w3.org/2000/svg" p-id="2479" width="30" height="30">
  148.                                 <path
  149.                                     d="M959.716928 554.950208M532.429285 958.838931M64.446801 594.626859M270.969435 57.464783"
  150.                                     fill="#000000" p-id="2480"></path>
  151.                                 <path
  152.                                     d="M583.719438 385.762901C664.377456 493.897713 810.145377 538.433022 810.145377 538.433022 799.252283 351.240643 687.435615 259.769348 510.411829 258.869862 298.641681 257.789251 175.627996 429.173596 222.010373 597.866646 222.00935 597.866646 580.769246 462.953957 583.719438 385.762901z"
  153.                                     fill="#000000" p-id="2481"></path>
  154.                                 <path
  155.                                     d="M843.843874 721.201649c65.939805-16.944927 114.865097-15.887852 114.865097-150.871149 0-65.013713-38.867216-120.714316-93.980441-144.029324C824.128857 272.551466 697.718819 116.236328 507.890402 111.958908c-6.053879-0.135076-12.062733-0.157589-18.004049 0-183.887101 4.724605-309.892933 146.908908-324.069817 311.821865-58.44511 21.626553-102.44216 79.103616-100.462063 146.549727 4.432962 151.456481 66.321498 153.863297 148.712997 155.550729l0-293.098431c1.732457-125.304867 124.495432-264.293385 293.822932-264.293385 168.313404 0 261.415848 130.999566 302.464753 247.369947l0 301.380048c-8.28264 19.399839-30.449499 41.206494-70.936609 80.296791-52.819996 50.971905-128.907928 77.414137-128.907928 77.414137-8.844435 1.867534-15.078417 13.68365-12.603039 23.76424 2.475378 10.082636 13.253862 16.136515 21.605064 12.242835 0 0 80.274278-26.195615 140.430356-84.256986C819.492256 769.20392 843.640236 721.763444 843.843874 721.201649z"
  156.                                     fill="#000000" p-id="2482"></path>
  157.                                 <path
  158.                                     d="M375.327224 624.215758m-37.46631 0a36.613 36.613 0 1 0 74.93262 0 36.613 36.613 0 1 0-74.93262 0Z"
  159.                                     fill="#000000" p-id="2483"></path>
  160.                                 <path
  161.                                     d="M657.294131 624.215758m-37.46631 0a36.613 36.613 0 1 0 74.93262 0 36.613 36.613 0 1 0-74.93262 0Z"
  162.                                     fill="#000000" p-id="2484"></path>
  163.                             </svg>
  164.                         </div>
  165.                         <!-- GPT回答的信息 -->
  166.                         <!-- <span v-html="message.text.replace(/\n/g, '<br>')"> -->
  167.                         <div class="bot-txt"><img :src="message.text"/> </div>
  168.                     </div>
  169.                 </div>
  170.             </div>
  171.             <!-- 输入框 -->
  172.             <!-- <div class="iptbox">
  173.                     <el-input  class="input" type="text" v-model="userInput" @keyup.enter="sendMessageImage"
  174.                      placeholder="请输入要查询的问题..." />
  175.                     <el-button @click="sendMessageImage" type="primary">11发送</el-button>
  176.             </div> -->
  177.              <div class="iptbox" v-if="isSearching===true">
  178.                     <el-input class="input" disabled type="text" v-model="userInput"
  179.                         placeholder="思考中，请稍等。。。" />
  180.                     <el-button @click="sendMessageTongyi" disabled type="primary">发送</el-button>
  181.             </div>
  182.             <div class="iptbox" v-else>
  183.                     <el-input class="input" type="text" v-model="userInput" @keyup.enter="sendMessageImage"
  184.                         placeholder="请输入要查询的问题..." />
  185.                     <el-button @click="sendMessageImage" type="primary">发送</el-button>
  186.             </div>
  187.             </el-tab-pane>
  188.         </el-tabs>
  189.             
  190.     </div>
  191. </template>
  192. <script setup>
  193. import { defineComponent, ref, onUpdated } from 'vue';
  194. import axios from 'axios';
  195. import { md } from "/@/utils/markdown";
  196. import {ElMessage, ElMessageBox} from 'element-plus';
  197. const containerRef = ref(null)//给div绑定ref之后，需要先定义一下，才能够使用
  199. const containerReftongyi = ref(null)//给div绑定ref之后，需要先定义一下，才能够使用
  200. const containerRefChatgpt = ref(null)//给div绑定ref之后，需要先定义一下，才能够使用
  201. const containerRefImage = ref(null)//给div绑定ref之后，需要先定义一下，才能够使用
  203. // 聊天历史记录
  204. const chatHistoryWenxin = ref([]);
  205. const chatHistoryTongyi = ref([]);
  206. const chatHistoryChatgpt = ref([]);
  207. const chatHistoryImage = ref([]);
  208. const isSearching = ref(false);
  209. // 用户输入的问题
  210. const userInput = ref('');
  211. const activeName = ref('wenxin')
  212. const AK = ref("HeiEnBprXPDmcFm5wmV0Ak5D")
  213. const SK = ref("9ttnTF6jTWmb91XgRI3XQGtcB789Tc6s")
  215. const handleClick = (TabsPaneContext, event) => {
  216. //   console.log(TabsPaneContext, event)
  217. }
  218. // 1.可乐，点击发送文心一言事件
  219. const sendMessageWenxin = async () => {
  220.     const message = {
  221.         
  222.         id: chatHistoryWenxin.value.length + 1,
  223.         // 默认发送者设置成了user
  224.         sender: 'user',
  225.         // 此时是用户输入的问题
  226.         text: userInput.value
  227.     };
  228.    
  229.     // 将这些信息存入到聊天历史记录的数组中
  230.     chatHistoryWenxin.value.push(message);
  231.     // 然后清空输入框
  232.     userInput.value = '';
  234.     try {
  235.         // Luck Cola
  236.         const headers = {
  237.             'Content-Type': 'application/json',  //请求头这里不用改
  238.             'Accept': 'application/json'
  239.         };
  241.         // 发送请求传送的Data数据
  242.         const data = {
  243.             "ques": message.text,
  244.             // 官网-个人中心-Appkey获取
  245.             "appKey": "65324c559cfbe9915ead769b",
  246.             // 官网-个人中心-用户ID
  247.             "uid": "GFUFJU1697795157477R4iSgAXjYg",
  248.             // 是否支持上下文 值1表示支持,0表示不支持
  249.             "isLongChat": 1
  250.         };
  251.         const apiUrl = 'https://luckycola.com.cn/ai/openwxyy';
  252.         // 获取AI返回的回答
  253.         isSearching.value = true
  254.         const result = await axios.post(apiUrl, data, { headers })
  255.         // .then(() => {
  256.         //     isSearching.value = false
  257.         //     console.log('超时了:',);
  258.         // })
  259.         // console.log(result);
  260.         isSearching.value = false
  261.         // AI返回的所有信息
  262.         if(result.data.code === -1){
  263.             ElMessage.error(result.data.msg);
  264.             return
  265.         }
  266.         const botMessage = {
  267.             id: chatHistoryWenxin.value.length + 1,
  268.             sender: 'bot',
  269.             // text: result.data.choices[0].message.content // openAi
  270.             text: result.data.data.result
  271.         };
  272.         
  273.         // 将AI返回的信息存入到历史列表中
  274.         chatHistoryWenxin.value.push(botMessage);
  275.         // 自动滚屏
  276.         setTimeout(()=>{
  277.             containerRef.value.scrollTop = containerRef.value.scrollHeight
  278.         },200)
  279.     } catch (error) {
  280.         console.error(error);
  281.     }
  282. };
  284. // 1.点击发送千帆、文心一言事件
  285. const sendMessageQianfan = async () => {
  286.     const message = {
  287.         
  288.         id: chatHistoryWenxin.value.length + 1,
  289.         // 默认发送者设置成了user
  290.         sender: 'user',
  291.         // 此时是用户输入的问题
  292.         text: userInput.value
  293.     };
  294.    
  295.     // 将这些信息存入到聊天历史记录的数组中
  296.     chatHistoryWenxin.value.push(message);
  297.     // 然后清空输入框
  298.     userInput.value = '';
  300.     try {
  301.         // Luck Cola
  302.         const headers = {
  303.             'Content-Type': 'application/json',  //请求头这里不用改
  304.             'Accept': 'application/json'
  305.         };
  307.         // 发送请求传送的Data数据
  308.         const data = {
  309.                 "messages":[{
  310.                     "role": "user",
  311.                     "content": message.text,
  312.             }]
  313.         };
  314.         const apiUrl = '/wenxin1123_2/wenxinworkshop/chat/completions?access_token='+ await getAccessToken()
  315.         // 获取AI返回的回答
  316.         isSearching.value = true
  317.         const result = await axios.post(apiUrl, data, { headers })
  318.         // .then(() => {   
  319.         //     isSearching.value = false
  320.         //     console.log('超时了:',);
  321.         // })
  322.         // console.log(result);
  323.         isSearching.value = false
  324.         // AI返回的所有信息
  325.         if(result.data.code === -1){
  326.             ElMessage.error(result.data.msg);
  327.             return
  328.         }
  329.         const botMessage = {
  330.             id: chatHistoryWenxin.value.length + 1,
  331.             sender: 'bot',
  332.             // text: result.data.choices[0].message.content // openAi
  333.             text: result.data.data.respBody.result
  334.         };
  335.         
  336.         // 将AI返回的信息存入到历史列表中
  337.         chatHistoryWenxin.value.push(botMessage);
  338.         // 自动滚屏
  339.         setTimeout(()=>{
  340.             containerRef.value.scrollTop = containerRef.value.scrollHeight
  341.         },200)
  342.     } catch (error) {
  343.         console.error(error);
  344.     }
  345. };
  347. const getAccessToken = async () => {
  348.     const apiUrl = '/wenxin1123/oauth/2.0/token?grant_type=client_credentials&client_id=' + AK.value + '&client_secret=' + SK.value
  349.     const headers = {
  350.         'Content-Type': 'application/json',
  351.         'Accept': 'application/json'
  352.     }
  353.     let result = await axios.post(apiUrl, '', { headers })
  354.     console.log('result.data:', result.data.access_token)
  355.     return result.data.access_token
  356. }
  358. // 点击发送通义千问事件
  359. const sendMessageTongyi = async () => {
  360.     const message = {
  361.         
  362.         id: chatHistoryTongyi.value.length + 1,
  363.         // 默认发送者设置成了user
  364.         sender: 'user',
  365.         // 此时是用户输入的问题
  366.         text: userInput.value
  367.     };
  368.    
  369.     // 将这些信息存入到聊天历史记录的数组中
  370.     chatHistoryTongyi.value.push(message);
  371.     // 然后清空输入框
  372.     userInput.value = '';
  373.     const apiKey = 'sk-3e9b56374dc6470dad4d194f811d6feb';
  375.     try {
  376.         const headers = {
  377.             'Content-Type': 'application/json',  //请求头这里不用改
  378.             'Authorization': 'Bearer '+apiKey
  379.         };
  380.         const data = {
  381.             model: "qwen-turbo",
  382.             input: {
  383.                 messages: [      
  384.                     {
  385.                         role: "system",
  386.                         content: "You are a helpful assistant."
  387.                     },
  388.                     {
  389.                         role: "user",
  390.                         content: message.text
  391.                     }
  392.                 ]
  393.             },
  394.             "parameters": {
  395.             }
  396.         }         
  397.         const apiUrl = '/aliyunc/v1/services/aigc/text-generation/generation';
  398.         // 获取AI返回的回答
  399.         isSearching.value = true
  400.         const result = await axios.post(apiUrl, JSON.stringify(data), { headers })
  401.         // .then((response) => {
  402.         //     // The response data should now be correctly decoded as UTF-8
  403.         //     // console.log(response);
  404.         // })
  405.         // .catch((error) => {
  406.         //     console.error(error);
  407.         // });
  408.         // console.log(result);
  409.         isSearching.value = false
  410.         // AI返回的所有信息
  411.         // if(result.data.code === -1){
  412.         //     ElMessage.error(result.data.output.text);
  413.         //     return
  414.         // }
  415.         const botMessage = {
  416.             id: chatHistoryTongyi.value.length + 1,
  417.             sender: 'bot',
  418.             // text: result.data.choices[0].message.content // openAi
  419.             text: result.data.output.text
  420.         };
  421.         console.log('result:', result.data.output.text)
  422.         // 将AI返回的信息存入到历史列表中
  423.         chatHistoryTongyi.value.push(botMessage);
  424.         // 自动滚屏
  425.         setTimeout(()=>{
  426.             containerReftongyi.value.scrollTop = containerReftongyi.value.scrollHeight
  427.         },200)
  428.     } catch (error) {
  429.         console.error(error);
  430.     }
  431. };
  433. // 点击发送文心一言图片事件
  434. const sendMessageImage = async () => {
  435.     const message = {
  436.         
  437.         id: chatHistoryImage.value.length + 1,
  438.         // 默认发送者设置成了user
  439.         sender: 'user',
  440.         // 此时是用户输入的问题
  441.         text: userInput.value
  442.     };
  443.    
  444.     // 将这些信息存入到聊天历史记录的数组中
  445.     chatHistoryImage.value.push(message);
  446.     // 然后清空输入框
  447.     userInput.value = '';
  449.     try {
  450.         // Luck Cola
  451.         const headers = {
  452.             'Content-Type': 'application/json',  //请求头这里不用改
  453.             'Accept': 'application/json'
  454.         };
  456.         // 发送请求传送的Data数据
  457.         const data =
  458.         {
  459.             // 对生成图片的详细要求的描述词,描述越准确生成结果越精美
  460.             "imgTxt": message.text,
  461.             // 官网-个人中心-Appkey获取
  462.             "appKey": "65324c559cfbe9915ead769b",
  463.             // 官网-个人中心-用户ID获取
  464.             "uid": "GFUFJU1697795157477R4iSgAXjYg",
  465.             // 绘画风格 可选值: ['探索无限'、 '古风',、'二次元'、'写实风格'、'浮世绘'、 'low poly' ,、'未来主义'、 '像素风格',、'概念艺术'、'赛博朋克'、'洛丽塔风格'、 '巴洛克风格'、'超现实主义'、 '水彩画'、'蒸汽波艺术'、 '油画'、'卡通画']
  466.             "style": "写实风格",
  467.             // 生成图片的宽高比,值可选有:"1:1"、"3:2"、"2:3"
  468.             "ratio": "3:2"
  469.         }
  470.         const apiUrl = 'https://mock.apifox.com/m1/3235504-0-default/aiImg/getAiImage';
  471.         // const apiUrl = 'https://luckycola.com.cn/aiImg/getAiImage';
  472.         // 获取AI返回的回答
  473.         isSearching.value = true
  474.         const result = await axios.post(apiUrl, data, { headers })
  475.         // .then(() => {
  476.         //     isSearching.value = false
  477.         //     console.log('超时了:',);
  478.         // })
  479.         // console.log(result);
  480.         isSearching.value = false
  481.         // AI返回的所有信息
  482.         if(result.data.code === -1){
  483.             ElMessage.error(result.data.msg);
  484.             return
  485.         }
  486.         const botMessage = {
  487.             id: chatHistoryImage.value.length + 1,
  488.             sender: 'bot',
  489.             // text: result.data.choices[0].message.content // openAi
  490.             text: result.data.data.result.img
  491.         };
  492.         
  493.         // 将AI返回的信息存入到历史列表中
  494.         chatHistoryImage.value.push(botMessage);
  495.         // 自动滚屏
  496.         if(isNaN(containerRefImage.value.scrollTop)){
  497.             containerRefImage.value.scrollTop = 0
  498.         }
  499.         setTimeout(()=>{
  500.             containerRefImage.value.scrollTop = containerRefImage.value.scrollHeight
  501.         },200)
  502.     } catch (error) {
  503.         console.error(error);
  504.     }
  505. };
  506. // 点击发送chatGpt事件
  507. const sendMessageChatgpt = async () => {
  508.     const message = {
  509.         id: chatHistoryChatgpt.value.length + 1,
  510.         // 默认发送者设置成了user
  511.         sender: 'user',
  512.         // 此时是用户输入的问题
  513.         text: userInput.value
  514.     };
  515.    
  516.     // 将这些信息存入到聊天历史记录的数组中
  517.     chatHistoryChatgpt.value.push(message);
  518.     // 然后清空输入框
  519.     userInput.value = '';
  521.     try {
  522.         // chatgpt
  523.         const apiKey = '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'; // 替换为你的 OpenAI API 密钥
  524.         const prompt = message.text;//用户输入的问题  要问的问题
  526.         const apiUrl = 'https://api.openai.com/v1/chat/completions'; //固定的地址，api模型
  527.         const headers = {
  528.             'Content-Type': 'application/json',  //请求头这里不用改
  529.             'Authorization': `Bearer ${apiKey}`  //一定要将变量apikey填写正确才可以请求到
  530.         };
  531.         // 发送请求传送的Data数据
  532.         const data = {
  533.             messages: [
  534.                 // 定义的角色
  535.                 { role: "system", content: "You are a helpful assistant." },
  536.                 { role: "user", content: prompt },
  537.                 { role: "assistant", content: "The Los Angeles Dodgers won the World Series in 2020." },
  538.             ],
  539.             max_tokens: 100,
  540.             model: "gpt-3.5-turbo"
  541.         };
  542.         // prompt（必需）：作为输入给模型的文本提示。它是一个字符串，描述了你想要问模型的问题或提供给模型的上下文信息。
  544.         // max_tokens（可选）：用于控制生成回复的长度。它是一个整数，表示模型生成的最大标记数量。默认值为 16。
  546.         // temperature（可选）：用于控制生成回复的创造性和随机性。它是一个浮点数，值越高，生成的结果越随机，值越低，生成的结果越保守。默认值为 0.6。
  548.         // top_p（可选）：用于控制生成回复的多样性。它是一个浮点数，介于 0 和 1 之间。较低的值会生成更保守和一致的回复，较高的值会生成更多样化的回复。默认值为 1.0。
  550.         // n（可选）：用于控制生成回复的数量。它是一个整数，表示你想要生成的回复的数量。默认值为 1。
  551.         
  552.         isSearching.value = true
  553.         // 获取AI返回的回答
  554.         const result = await axios.post(apiUrl, data, { headers })
  555.         // console.log(result);
  556.         const botMessage = {
  557.             id: chatHistoryChatgpt.value.length + 1,
  558.             sender: 'bot',
  559.             text: result.data.choices[0].message.content // openAi
  560.         };
  561.         if(result.data.error){
  562.             botMessage.text = result.data.error.message
  563.         }
  564.         isSearching.value = false
  565.         // 将AI返回的信息存入到历史列表中
  566.         chatHistoryChatgpt.value.push(botMessage);
  567.         setTimeout(()=>{
  568.             containerRefChatgpt.value.scrollTop = containerRefChatgpt.value.scrollHeight
  569.         },200)
  570.     } catch (error) {
  571.         console.error(error);
  572.     }
  573. };
  574. </script>
  575. <style scoped>
  576. .el-tabs__header{
  577.     margin-left: 40px !important;
  578. }
  579. .kefubox{
  580.     overflow-y:auto;
  581.     width:95%;
  582.     margin: auto;
  583.     height:calc(100vh - 246px);
  584. }
  586. .box {
  587.     height: 500px;
  588. }
  589. .bot-txt{
  590.     padding-left: 16px;
  591.     margin:30px 0;
  592. }
  593. .iptbox {
  594.     width: 80vw;
  595.     display: flex;
  596.     bottom: 5px;
  597.     padding-left: 42px;
  598.     margin:auto;
  599.     /* justify-content: center; */
  600.     align-items: center;
  601.     position: fixed;
  602. }
  603. .input{
  604.     width:calc(90% -200px);
  605. }
  606. .iptbox input {
  607.     width: 490px;
  608.     height: 40px;
  609.     padding-left: 5px;
  610.     padding-right: 70px;
  611.     border-radius: 10px;
  612. }
  614. .iptbox button {
  615.     margin-left: 20px;
  616. }
  620. .bot-message,
  621. .user-message {
  622.     display: flex;
  623.     align-items: center;
  624. }
  626. .bot-message {
  627.     background-color: #ebeef5;
  628.     color: #000000;
  629.     border-radius: 10px;
  630. }
  632. .user-message {
  633.     background-color: #d5eaff;
  634.     color: #000000;
  635.     padding: 5px 10px;
  636.     border-radius: 10px;
  637. }
  639. .userBox {
  640.     margin-right: 10px;
  641.     display: flex;
  642.     align-items: center;
  643. }
  645. pre.hljs {
  646.   background-color: #f4f4f4;
  647.   padding: 10px;
  648. }
  650. pre.hljs code {
  651.   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  652.   font-size: 14px;
  653. }
  655. </style>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

大号在练葵花宝典

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

渠道 国产数据库 集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表