laravel对接百度智能云 实现智能机器人

创建API Key和 Secret Key进入网址:百度智能云千帆大模型平台

如下图操作:

填写完毕点击确认后,即可得到sk和ak

 后端接口实现代码:

  //调用百度智能云第三方机器人接口
    public function run($text) {
        $curl = curl_init();
        curl_setopt_array($curl, array(
            CURLOPT_URL => "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/ernie-4.0-8k-0104?access_token={$this->getAccessToken()}",
            CURLOPT_TIMEOUT => 30,
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_SSL_VERIFYPEER  => false,
            CURLOPT_SSL_VERIFYHOST  => false,
            CURLOPT_CUSTOMREQUEST => 'POST',
            CURLOPT_POSTFIELDS =>'{
                               "messages":
                                    [
                                        {
                                             "role":"user",
                                             "content":'.'"'.$text.'"'.'
                                        }
                                    ],
            "temperature":0.8,
            "top_p":0.8,
            "penalty_score":1,
            "disable_search":false,
            "enable_citation":false,
            "enable_trace":false
            }',

            CURLOPT_HTTPHEADER => array(
                'Content-Type: application/json'
            ),

        ));

        $response = curl_exec($curl);
        curl_close($curl);
        return $response;
    }

    /**
     * 使用 AK,SK 生成鉴权签名(Access Token)
     * @return string 鉴权签名信息(Access Token)
     */
    private function getAccessToken(){
        $config = config('services.lev');
        $curl = curl_init();
        $postData = array(
            'grant_type' => 'client_credentials',
            'client_id' => '你的ak',
            'client_secret' => '你的sk'
        );
        curl_setopt_array($curl, array(
            CURLOPT_URL => 'https://aip.baidubce.com/oauth/2.0/token',
            CURLOPT_CUSTOMREQUEST => 'POST',
            CURLOPT_SSL_VERIFYPEER  => false,
            CURLOPT_SSL_VERIFYHOST  => false,
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_POSTFIELDS => http_build_query($postData)
        ));
        $response = curl_exec($curl);
        curl_close($curl);
        $rtn = json_decode($response);
        return $rtn->access_token;
    }

    public function info_request()
    {
        $text = request()->get('content');
        $rtn = (new LevitatefSphereController())->run($text);
        return $rtn;
    }

    public function levitated()
    {
        return view('levitated_view');
    }

 页面HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Chat Box</title>
    <link rel="stylesheet" href="{{ asset('static/levitated-css.css') }}" />
    <style>
        body {
            overflow-y: hidden; /* 隐藏垂直滚动条 */
        }
        #box {
            width: 1000px;
            height: 100%;
            margin: 0px auto;
            /*position: relative;*/
        }
        #chat-box {
            width: 900px;
            height: 670px;
            overflow: auto;
            border: 1px solid #ccc;
            border-radius: 10px 10px 0px 0px;
            padding: 8px;
            background-color: #ffffff;
        }
        #message-input{
            width: 916px;
            height: 110px;
            border: 1px solid #ccc;
            /*pointer-events:none;*/
            border-top:none;
            /*position: absolute;*/
            border-radius: 0px 0px 10px 10px;
            background-color: #ffffff;
        }
        #btn{
            /*width: 80px;*/
            border-radius: 10px;
            border: none;
            background-color: #8a57ea;
            color: #ffffff;
            margin-left: 820px;
            /*position: absolute;*/
            position: relative;
            bottom: 45px;
            padding: 10px 20px;
        }
        .input-div{
            width: max-content;
            padding: 10px 20px;
            border-radius: 8px 8px 0px 8px;
            float : right;
            color: #ffffff;
            margin: 10px;
        }
        .answer-div{
            width: 700px;
            padding: 10px 20px;
            border-radius: 0px 10px 10px 10px;
            /*float : left;*/
            clear: both;
            margin: 10px;
        }
        .loading {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            z-index: 9999;
            text-align: center;
            padding-top: 20%;
            font-size: 24px;
            color: #333;
        }

        .logo{
            width: 40px !important;
            height: 40px !important;

        }

    </style>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="box">
    <div id="chat-box"></div>

    <div  onfocus="divFocusMess()" onclick="divClickMess()" onblur="divBlurMess()"  contenteditable = "true" tabindex="0" id="message-input" onkeydown="handleEnter(event)" onkeyup="keyup(event)" style="word-break: break-word;"></div>
    <button onclick="sendMessage()" id="btn" >提问</button>
    <div class="loading" id="loading">正在加载中 请耐心等待...</div>
</div>
<script>
    var chatbox = document.getElementById("chat-box");
    var message = document.getElementById('message-input').innerHTML;
    if(message == ''){
        document.getElementById('message-input').innerHTML = '输入消息';
    }
    function divClickMess(){ //点击时为空
        document.getElementById('message-input').innerHTML = '';
    }
    function divBlurMess(){ //失焦时设置为输入信息
        document.getElementById('message-input').innerHTML = '输入消息';
    }
    function divFocusMess(){ //聚焦时为空
        document.getElementById('message-input').innerHTML = '';
    }
    // function divSelMess(){
    //     document.getElementById('message-input').innerHTML = '';
    // } onselect="divSelMess()"

    function scrollToBottom() {
        chatbox.scrollTop = chatbox.scrollHeight;
    }
    window.onload = function() {
        var chatbox = document.getElementById("chat-box");
        chatbox.scrollTop = chatbox.scrollHeight;
    }
    function sendMessage() {
        //获取输入框内容
        var message = document.getElementById('message-input').innerHTML;

        var chatBox = document.getElementById('chat-box');
        // 清除输入框的内容
        document.getElementById('message-input').innerHTML = '';
        // 在聊天框中添加消息
        chatBox.innerHTML += '<div class="input-div" style="background-color: #8a57ea;">' + message + '</div><div style="clear: both"></div>';
        document.getElementById('loading').style.display = 'block';
        document.getElementById('message-input').innerHTML = '';
        // 在这里处理加载完成后的操作,例如显示答案等
        $.ajax({
            url:'info_request',//请求的路由接口
            data:{content:message},//传值
            type:'get',//接口类型
            dataType:'json',
            success:function (res){
                var result = res.result;
                document.getElementById('loading').style.display = 'none';
                //将返回的答案展示在页面上
                chatBox.innerHTML += '<img class="logo" src="{{asset('static/images/levitated.png')}}"><div class="answer-div"  style="background-color: #f8f8f8">' + result.replace(/\n/g, '<br>') + '</div>';
                //自动展示最新,将滚轮滑动至最下方
                if (chatbox.scrollHeight - chatbox.scrollTop - chatbox.clientHeight > 10) {
                    scrollToBottom();
                }
            }
        })
    }

    function handleEnter(event) {
        // 检查按下的键是否是回车键
        if(event.key === "Enter") {
            // 可以在这里添加其他的逻辑处理
            var message = document.getElementById('message-input').innerHTML;
            var chatBox = document.getElementById('chat-box');
            // 清除输入框的内容
            document.getElementById('message-input').innerHTML = '';

            // 在聊天框中添加消息
            chatBox.innerHTML += '<div class="input-div" style="background-color: #8a57ea;">' + message + '</div><div style="clear: both"></div>';
            document.getElementById('loading').style.display = 'block';
            document.getElementById('message-input').innerHTML = '';
            // 在这里处理加载完成后的操作,例如显示答案等
            $.ajax({
                url:'info_request',//请求的路由接口
                data:{content:message},//传值
                type:'get',//接口类型
                dataType:'json',
                success:function (res){
                    var result = res.result;
                    // 停止加载
                    document.getElementById('loading').style.display = 'none';
                    //将返回的答案展示在页面上
                    chatBox.innerHTML += '<img class="logo" src="{{asset('static/images/levitated.png')}}"><div class="answer-div"  style="background-color: #f8f8f8">' + result.replace(/\n/g, '<br>') + '</div>';
                    //自动展示最新,将滚轮滑动至最下方
                    if (chatbox.scrollHeight - chatbox.scrollTop - chatbox.clientHeight > 10) {
                        scrollToBottom();
                    }
                }

            })
            event.preventDefault(); // 阻止 Enter 键的默认行为
            return false;
        }

    }

</script>

</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【基于R语言群体遗传学】-2-模拟基因型(simulating genotypes)

书接上文&#xff0c;我们昨天讨论了遗传的哈代温伯格比例&#xff1a; 【基于R语言群体遗传学】-1-哈代温伯格基因型比例-CSDN博客 接下来&#xff0c;如果我们能够模拟一个过程并观察模拟结果与我们预期的是否相符&#xff0c;这通常有助于指导我们对这个过程的直观感觉。让…

工业读码器与商用扫码器的区别

条码二维码在数字信息化应用越来越广泛&#xff0c;扫码器成为了数据收集和处理的重要工具&#xff0c;无论是工厂生产和物流包裹朔源追踪&#xff0c;还是商场超市扫码收银和餐饮娱乐等场景&#xff0c;均能看到扫码器的辅助&#xff0c;市场上的扫码器种类繁多&#xff0c;在…

C++修饰符类型

一、存储类运算符 auto&#xff08;自动存储类&#xff0c;但在现代C中&#xff0c;它通常用于自动类型推导&#xff09; register&#xff08;建议编译器将变量存储在寄存器中&#xff0c;但现代编译器通常忽略此关键字&#xff09; static&#xff08;静态存储类&#xff…

AD20使用操作Part2

元件的放置 在原理图界面&#xff0c;在右下角&#xff0c;Panels 选择Components 在自己元件库直接拖过来&#xff0c;放到原理图。 器件的复制和对齐 双击边缘&#xff0c;更改为A3纸 画方格&#xff0c;把元件给规划&#xff1a;放置——绘图工具——线 Shift空格&am…

【linux网络(七)】数据链路层详解

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Linux从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学更多操作系统知识   &#x1f51d;&#x1f51d; Linux网络 1. 前言2. 认识MAC…

Android --- 新电脑安装Android Studio 使用 Android 内置模拟器电脑直接卡死,鼠标和键盘都操作不了

新电脑安装Android Studio 使用 Android 内置模拟器电脑直接卡死&#xff0c;鼠标和键盘都操作不了 大概原因就是,初始化默认Google的安卓模拟器占用的RAM内存是2048&#xff0c;如果电脑的性能和内存一般的话就可能卡死&#xff0c;解决方案是手动修改安卓模拟器的config文件&…

运营商如何通过PCDN技术提高用户服务?

着互联网的快速发展&#xff0c;用户对网络速度和质量的要求越来越高。为了满足这些需求&#xff0c;内容分发网络(CDN)成为了关键的基础设施。而在CDN技术中&#xff0c;PCDN(PersonalCDN)作为一种新兴的技术&#xff0c;为运营商和用户提供了新的解决方案。本文将重点介绍PCD…

RuoYi-Vue项目后端增加自己的模块,要注意的点,只看我这一片就够了。

若依版本&#xff1a; RuoYi-Vue: &#x1f389; 基于SpringBoot&#xff0c;Spring Security&#xff0c;JWT&#xff0c;Vue & Element 的前后端分离权限管理系统&#xff0c;同时提供了 Vue3 的版本 背景&#xff1a; 后端想自己增加一个模块&#xff0c;但是包路径…

聊聊 golang 的 map

1、哈希表 哈希表是一个很常见的数据结构&#xff0c;用来存储无序的 key/value 对&#xff0c;给定的 key 可以在 O(1) 时间复杂度内查找、更新或删除对应的 value。 设计一个好的哈希表&#xff0c;需要着重关注两个关键点&#xff1a;哈希函数、冲突处理。 1.1 哈希函数 …

文件上传漏洞---Pyload

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 本文重点从靶场案例分析文件上传漏洞常见的Pylod&#xff0c;本文演示靶场upload-labs 一.文件类型---Pyload 不同的文件对应不同的文件类型&#xff0c;后端代码通过限制特定的文件类型…

【C++】C++指针在线程中调用与受保护内存空间读取方法

引言 在C的多线程编程中&#xff0c;正确地管理内存和同步访问是确保程序稳定性和安全性的关键。特别是当涉及到指针在线程中的调用时&#xff0c;对受保护内存空间的访问必须谨慎处理&#xff0c;以防止数据竞争、死锁和内存损坏等问题。本文将详细探讨C指针在线程中调用时如何…

提升入住率|智慧酒店解决方案,打造有温度的居住体验!

近年来&#xff0c;智慧酒店被越来越多的人关注&#xff0c;由生物识别、物联网技术和互联网技术融合产生的智慧酒店解决方案&#xff0c;不仅可以提升顾客在酒店的入住体验&#xff0c;还可以帮助酒店降低运营成本&#xff0c;这也让越来越的酒店选择了智慧酒店的赛道&#xf…

c++读取文件时出现中文乱码

原因&#xff1a;UTF-8格式不支持汉字编码 解决&#xff1a;改成ANSI&#xff0c;因为ANSI编码支持汉字编码

新款奔驰GLE350升级原厂空气悬挂系统有哪些功能

奔驰 GLE350 升级原厂空气悬挂带来了一系列显著的优势和功能&#xff1a; 1. 舒适性提升 • 能够根据不同的路况和驾驶模式自动调节悬挂硬度和高度&#xff0c;有效过滤路面颠簸&#xff0c;为驾乘者提供更加平稳、舒适的行驶体验。 2. 行驶高度调节 • 驾驶者可以手动或自…

明日周刊-第14期

不好意思又拖更了哈哈哈。不过赶在7月的第一天&#xff0c;打算更新一下。建党节&#xff0c;值得纪念的一天。 文章目录 一周热点资源分享言论歌曲推荐 一周热点 国内科技新闻 深中通道建成通车 时间&#xff1a;2024年6月30日 内容&#xff1a;深圳至中山跨江通道正式建成开…

【06】SpringBoot与Web开发

1、基于Restful风格的接口 RestController RequestMapping("/demo") public class DemoController {GetMapping("/hello")public String getHello(){return "SpringBoot HelloWorld! 123";}GetMapping("/{id}")public User getUser(P…

【支撑文档】系统安全保证措施(word原件)

软件安全保证措施word 软件所有全套资料获取进主页或者本文末个人名片直接。

图形的搭建

例一&#xff1a; 输入描述&#xff1a; 多组输入&#xff0c;一个整数&#xff08;2~20&#xff09;&#xff0c;表示输出的行数&#xff0c;也表示组成“X”的反斜线和正斜线的长度。 输出描述&#xff1a; 针对每行输入&#xff0c;输出用“*”组成的X形图案。 示例一&…

【C语言】19.预处理详解

文章目录 1.预定义符号2.#define定义常量3.#define定义宏4.带有副作用的宏参数5.宏替换的规则6.宏函数的对比7.#和##7.1 #运算符7.2 ## 运算符 8.命名约定9.#undef10.命令行定义11.条件编译12.头文件的包含12.1 头⽂件被包含的⽅式12.1.1 本地⽂件包含12.1.2 库⽂件包含 12.2 嵌…

基于协同过滤的航空票务推荐系统的设计与实现(飞机票推荐系统)

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…