使用Vue调用ColaAI Plus大模型,实现聊天(简陋版)

news2024/11/19 9:41:19

首先去百度文心注册申请自己的api

官网地址:LuckyCola

注册点开个人中心

查看这个文档自己申请一个ColaAI Plus定制增强大模型API | LuckyColaicon-default.png?t=N7T8https://luckycola.com.cn/public/docs/shares/api/colaAi.html来到vue的页面

写个样式

<template>

<Header title="智能问答"/>
<!-- 和AI聊天界面 -->
<div class="main">
  
</div>
 <!-- 下面的输入框和按钮 -->
 <div class="down">
    <input 
    type="text" 
    v-model="problem" 
    placeholder="请输入你的问题">
    <div class="button" @click="OnRend">
        发送
    </div>
   </div>
</template>
<style scoped>
.main{
    height: 85%;
    width: 100%;
    background-color: azure;
    
}
.down{
    height: 10%;
    width: 100%;
    background-color: azure;
    border: 1px solid #ccc;
    display: flex;
    input{
        width: 260px;
        height: 30px;
        padding: 4px;
        border-radius: 12px;
        border: 1px solid #ccc;    
        font-size: 14px;
        margin: 10px;
    }
    .button:hover{
        background-color: #00000088;
    }
    .button{
        width: 60px;
        font-size: 14px;
        height: 30px;
        font-weight: 600;
        text-align: center;
        line-height: 30px;
        background-color: #ccc;
        margin: 10px;
        padding: 4px;
        color: #fff;
        border-radius: 12px;
    }
}
</style>

展示图

写逻辑

引用axios和ref

定义点击按钮触发的方法

点击按钮后获取输入框的值,然后调用接口把这个和自己的id密钥参数请求传入后端,打印后端返回的回答即可

<script setup>
import Header from '../../components/Header.vue';
import axios from 'axios';
import {ref} from 'vue';
/**
 * 调用的时候获取的ques是问题
 * 而data.result.Content是回答
 *   data.countMsg是剩余次数
**/

const problem = ref([]);
const OnRend = ()=>{
    //获取了自己写的问题后,把Verify数据和问题的这些参数请求后端,
    const Verify = ref({
        appKey: "自己的密钥",
        uid: "自己申请的id",
        isLongChat: 0,
        ques: problem.value
})
axios.post('https://luckycola.com.cn/openai/openaiV3',Verify.value).then((res)=>{
              //前端请求的问题
                console.log(Verify.value.ques);
              //后端返回的回答
                console.log(res.data.data.result)
})

}


</script>

完成

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Springboot+Vue项目-基于Java+MySQL的宠物商城网站系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

调试记录 CPU PCIE 找不到设备,AC 耦合电容的问题

1. 问题 现象&#xff1a; 1. 国产CPU的主板&#xff0c;主板内的PCIE 设备找的到&#xff0c;但是另一块板子上连接的PCIE 设备找不到。 2. 排查问题在哪里的计划 1. 检查原理图先排除信号定义的问题&#xff0c; TXRX是否反接。 2. 示波器检查PCIE 的时钟频率是否正确。 3. …

图神经网络(GNNs)在时间序列分析中的应用

时间序列数据是记录动态系统测量的主要数据类型&#xff0c;由物理传感器和在线过程&#xff08;虚拟传感器&#xff09;大量生成。时间序列分析对于解锁可用数据中隐含的丰富信息至关重要。随着图神经网络&#xff08;GNNs&#xff09;的最近进展&#xff0c;基于GNN的方法在时…

[嵌入式系统-73]:RT-Thread-快速上手:如何选择RT Thread的版本?

目录 如何选择合适的 RT-Thread 版本进行开发&#xff1f; RT-Thread 分支与版本介绍 如何选择 发布版本&#xff08;GitHub releases&#xff09; 开发分支&#xff08;GitHub master 主分支&#xff09; 长期支持分支&#xff08;GitHub lts-v3.1.x 分支&#xff09; …

面向对象设计之套路——设计模式

1、总则 面向对象的分析设计编程思想&#xff0c;通过封装、继承、多态把程序的耦合度降低&#xff0c;用设计模式使得程序更加灵活&#xff0c;容易修改&#xff0c;并且易于复用。 让业务逻辑与界面逻辑分开&#xff0c;让它们的耦合度下降&#xff0c;只有分离&#xff0c;…

JAVA使用Apache POI动态导出Word文档

文章目录 一、文章背景二、实现步骤2.1 需要的依赖2.2 创建模板2.3 书写java类2.3.1 模板目录2.3.2 Controller类2.3.2 工具类 2.4 测试2.4.1 浏览器请求接口2.4.2 下载word 三、注意事项四、其他导出word实现方式 一、文章背景 基于Freemarker模版动态生成并导出word文档存在弊…

西米支付:数字藏品元宇宙的介绍与骗局套路解析

一、什么是元宇宙&#xff1f; 元宇宙是一个集体虚拟共享空间&#xff0c;由虚拟增强的物理现实和物理持久的虚拟空间融合而创造&#xff0c;包括所有虚拟世界、增强现实和互联网的总和。简单地说&#xff0c;元宇宙是Web3.0时期的数字世界。 这类新兴概念被非法分子包装后&am…

JVM基础之垃圾回收

垃圾回收 1. Base 内存泄漏&#xff1a;不再使用的对象在系统中未被回收 内存溢出&#xff1a;内存泄漏的积累 手动触发垃圾回收&#xff1a;System.gc(),该方法不一定会立即回收垃圾&#xff0c;仅仅是向JVM发送一个垃圾回收请求&#xff0c;具体是否需要垃圾回收由JVM自行…

【树莓派4B】如何用树莓派的串口发送数据给单片机

文章目录 查看路由器中的树莓派IProot连接打开vnc远程桌面服务打开win的远程桌面软件输入IP和端口串口发送数据硬件连接树莓派发送 查看路由器中的树莓派IP root连接 打开vnc远程桌面服务 vncserver :1打开win的远程桌面软件 输入IP和端口 192.168.3.33:1输入密码qwer1234后点…

draw.io-24-windows-no-installer.exe是一个自解压文件

draw.io-24-windows-no-installer.exe是一个自解压文件&#xff0c;每次启动都会执行解压操作&#xff0c;在以下两个位置产生程序主体文件draw.io.exe&#xff0c;大约170M&#xff0c;程序关闭后再删除解压后的文件&#xff0c;给硬盘增加不必要的读写操作。 C:\Users\AAA\Ap…

工作中使用Optional过滤出符合条件的数据

工作中使用Optional获取非空对象的属性 实体类Optional对非空对象的处理满足过滤条件返回的值不满足条件返回的值 实体类 package po;import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;import java.io.Serializable;Data AllArgsConst…

从零开始写 Docker(十四)---重构:实现容器间 rootfs 隔离

本文为从零开始写 Docker 系列第十四篇&#xff0c;实现容器间的 rootfs 隔离&#xff0c;使得多个容器间互不影响。 完整代码见&#xff1a;https://github.com/lixd/mydocker 欢迎 Star 推荐阅读以下文章对 docker 基本实现有一个大致认识&#xff1a; 核心原理&#xff1a;…

数据库基础语法二

一、数据库 1、登陆数据库 2、创建数据库zoo 3、修改数据库zoo字符集为gbk 4、选择当前数据库为zoo 5、查看创建数据库zoo信息 6、删除数据库zoo mysql -uroot -p #登陆数据库 create database zoo; #创建数据库zoo alter database zoo character set gbk collate gbk_…

ArrayList的深拷贝与浅拷贝

1、深拷贝 通过以下代码进行理解 import java.util.ArrayList; import java.util.List;public class Demo {public static void main(String[] args) {List<Integer> c new ArrayList<>();c.add(1);c.add(2);c.add(3);List<Integer> c1 new ArrayList<…

理解Go语言中的测试种类

测试金字塔将测试分为不同的类别,如下图所示 单元测试在金字塔的底部。大部分测试都是单元测试,它们编写成本代、执行速度快且执行结果高度确定。通常,越往金子塔的上层走,测试变得越复杂,运行速度越慢,并且越难保证执行结果的确定性。 一个常见的技巧是明确说明要运行哪…

xhci 寄存器学习

xhci 寄存器介绍 查看linux 代码&#xff1a; 1733 /* There is one xhci_hcd structure per controller */ 1734 struct xhci_hcd { 1735 struct usb_hcd *main_hcd; 1736 struct usb_hcd *shared_hcd; 1737 /* glue to PCI and HCD framework */ 1738 stru…

爱喵喵宠物网站系统asp.netmvc

c#asp.net mvc爱喵喵宠物网站系统asp.netmvc 说明文档 运行前附加数据库.mdf&#xff08;或sql生成数据库&#xff09; 主要技术&#xff1a; 基于asp.net mvc架构和sql server数据库 功能模块&#xff1a; 首页 预约 猫生活 猫科普 参馆 个人中心 管理员后台可以对猫猫和猫…

闲聊大模型

人工智能&#xff0c;机器学习&#xff0c;神经网络&#xff0c;深度学习&#xff0c;大模型 https://www.ibm.com/cn-zh/topics/machine-learning https://www.ibm.com/cloud/blog/ai-vs-machine-learning-vs-deep-learning-vs-neural-networks ChatGPT https://openai.com/…

使用Pycharm编写Python程序时对基本类结构中方法的重写的两种初步操作方式

使用Pycharm编写Python程序时对基本类结构中方法的重写的两种初步操作方式 Python和其他一些高级面向对象的编程语言中&#xff0c;子类可继承父类中的方法&#xff0c;而不需要重新编写相同的方法。但有时子类并不想原封不动地继承父类的方法&#xff0c;而是想作一定的修改&…

02.文件IO

文件描述符 表述打开的文件的 它是open函数的返回值&#xff0c;一个进程启动之后&#xff0c;会默认打开3个文件标识符 0标准输入&#xff0c;1标准输出&#xff0c;2标准错误 新的打开的文件返回文件描述符表中未使用过的最小的文件描述符 open函数 用来打开或者新建一个文件…