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

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

    如下图操作：

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

     后端接口实现代码：

    1.   //调用百度智能云第三方机器人接口
    2.     public function run($text) {
    3.         $curl = curl_init();
    4.         curl_setopt_array($curl, array(
    5.             CURLOPT_URL => "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/ernie-4.0-8k-0104?access_token={$this->getAccessToken()}",
    6.             CURLOPT_TIMEOUT => 30,
    7.             CURLOPT_RETURNTRANSFER => true,
    8.             CURLOPT_SSL_VERIFYPEER  => false,
    9.             CURLOPT_SSL_VERIFYHOST  => false,
    10.             CURLOPT_CUSTOMREQUEST => 'POST',
    11.             CURLOPT_POSTFIELDS =>'{
    12.                                "messages":
    13.                                     [
    14.                                         {
    15.                                              "role":"user",
    16.                                              "content":'.'"'.$text.'"'.'
    17.                                         }
    18.                                     ],
    19.             "temperature":0.8,
    20.             "top_p":0.8,
    21.             "penalty_score":1,
    22.             "disable_search":false,
    23.             "enable_citation":false,
    24.             "enable_trace":false
    25.             }',
    26.  
    27.             CURLOPT_HTTPHEADER => array(
    28.                 'Content-Type: application/json'
    29.             ),
    30.  
    31.         ));
    32.  
    33.         $response = curl_exec($curl);
    34.         curl_close($curl);
    35.         return $response;
    36.     }
    37.  
    38.     /**
    39.      * 使用 AK，SK 生成鉴权签名（Access Token）
    40.      * @return string 鉴权签名信息（Access Token）
    41.      */
    42.     private function getAccessToken(){
    43.         $config = config('services.lev');
    44.         $curl = curl_init();
    45.         $postData = array(
    46.             'grant_type' => 'client_credentials',
    47.             'client_id' => '你的ak',
    48.             'client_secret' => '你的sk'
    49.         );
    50.         curl_setopt_array($curl, array(
    51.             CURLOPT_URL => 'https://aip.baidubce.com/oauth/2.0/token',
    52.             CURLOPT_CUSTOMREQUEST => 'POST',
    53.             CURLOPT_SSL_VERIFYPEER  => false,
    54.             CURLOPT_SSL_VERIFYHOST  => false,
    55.             CURLOPT_RETURNTRANSFER => true,
    56.             CURLOPT_POSTFIELDS => http_build_query($postData)
    57.         ));
    58.         $response = curl_exec($curl);
    59.         curl_close($curl);
    60.         $rtn = json_decode($response);
    61.         return $rtn->access_token;
    62.     }
    63.  
    64.     public function info_request()
    65.     {
    66.         $text = request()->get('content');
    67.         $rtn = (new LevitatefSphereController())->run($text);
    68.         return $rtn;
    69.     }
    70.  
    71.     public function levitated()
    72.     {
    73.         return view('levitated_view');
    74.     }

     页面HTML代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Simple Chat Box</title>
    6.     <link rel="stylesheet" href="{{ asset('static/levitated-css.css') }}" />
    7.     <style>
    8.         body {
    9.             overflow-y: hidden; /* 隐藏垂直滚动条 */
    10.         }
    11.         #box {
    12.             width: 1000px;
    13.             height: 100%;
    14.             margin: 0px auto;
    15.             /*position: relative;*/
    16.         }
    17.         #chat-box {
    18.             width: 900px;
    19.             height: 670px;
    20.             overflow: auto;
    21.             border: 1px solid #ccc;
    22.             border-radius: 10px 10px 0px 0px;
    23.             padding: 8px;
    24.             background-color: #ffffff;
    25.         }
    26.         #message-input{
    27.             width: 916px;
    28.             height: 110px;
    29.             border: 1px solid #ccc;
    30.             /*pointer-events:none;*/
    31.             border-top:none;
    32.             /*position: absolute;*/
    33.             border-radius: 0px 0px 10px 10px;
    34.             background-color: #ffffff;
    35.         }
    36.         #btn{
    37.             /*width: 80px;*/
    38.             border-radius: 10px;
    39.             border: none;
    40.             background-color: #8a57ea;
    41.             color: #ffffff;
    42.             margin-left: 820px;
    43.             /*position: absolute;*/
    44.             position: relative;
    45.             bottom: 45px;
    46.             padding: 10px 20px;
    47.         }
    48.         .input-div{
    49.             width: max-content;
    50.             padding: 10px 20px;
    51.             border-radius: 8px 8px 0px 8px;
    52.             float : right;
    53.             color: #ffffff;
    54.             margin: 10px;
    55.         }
    56.         .answer-div{
    57.             width: 700px;
    58.             padding: 10px 20px;
    59.             border-radius: 0px 10px 10px 10px;
    60.             /*float : left;*/
    61.             clear: both;
    62.             margin: 10px;
    63.         }
    64.         .loading {
    65.             display: none;
    66.             position: fixed;
    67.             top: 0;
    68.             left: 0;
    69.             width: 100%;
    70.             height: 100%;
    71.             background-color: rgba(255, 255, 255, 0.8);
    72.             z-index: 9999;
    73.             text-align: center;
    74.             padding-top: 20%;
    75.             font-size: 24px;
    76.             color: #333;
    77.         }
    78.  
    79.         .logo{
    80.             width: 40px !important;
    81.             height: 40px !important;
    82.  
    83.         }
    84.  
    85.     </style>
    86. </head>
    87. <body>
    88. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    89. <div id="box">
    90.     <div id="chat-box"></div>
    91.  
    92.     <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>
    93.     <button onclick="sendMessage()" id="btn" >提问</button>
    94.     <div class="loading" id="loading">正在加载中 请耐心等待...</div>
    95. </div>
    96. <script>
    97.     var chatbox = document.getElementById("chat-box");
    98.     var message = document.getElementById('message-input').innerHTML;
    99.     if(message == ''){
    100.         document.getElementById('message-input').innerHTML = '输入消息';
    101.     }
    102.     function divClickMess(){ //点击时为空
    103.         document.getElementById('message-input').innerHTML = '';
    104.     }
    105.     function divBlurMess(){ //失焦时设置为输入信息
    106.         document.getElementById('message-input').innerHTML = '输入消息';
    107.     }
    108.     function divFocusMess(){ //聚焦时为空
    109.         document.getElementById('message-input').innerHTML = '';
    110.     }
    111.     // function divSelMess(){
    112.     //     document.getElementById('message-input').innerHTML = '';
    113.     // } onselect="divSelMess()"
    114.  
    115.     function scrollToBottom() {
    116.         chatbox.scrollTop = chatbox.scrollHeight;
    117.     }
    118.     window.onload = function() {
    119.         var chatbox = document.getElementById("chat-box");
    120.         chatbox.scrollTop = chatbox.scrollHeight;
    121.     }
    122.     function sendMessage() {
    123.         //获取输入框内容
    124.         var message = document.getElementById('message-input').innerHTML;
    125.  
    126.         var chatBox = document.getElementById('chat-box');
    127.         // 清除输入框的内容
    128.         document.getElementById('message-input').innerHTML = '';
    129.         // 在聊天框中添加消息
    130.         chatBox.innerHTML += '
      ' + message + '
      '      ;
    131.         document.getElementById('loading').style.display = 'block';
    132.         document.getElementById('message-input').innerHTML = '';
    133.         // 在这里处理加载完成后的操作，例如显示答案等
    134.         $.ajax({
    135.             url:'info_request',//请求的路由接口
    136.             data:{content:message},//传值
    137.             type:'get',//接口类型
    138.             dataType:'json',
    139.             success:function (res){
    140.                 var result = res.result;
    141.                 document.getElementById('loading').style.display = 'none';
    142.                 //将返回的答案展示在页面上
    143.                 chatBox.innerHTML += '/images/levitated.png')}}">
      ' + result.replace(/\n/g, '
      '      ) + '
      '      ;
    144.                 //自动展示最新，将滚轮滑动至最下方
    145.                 if (chatbox.scrollHeight - chatbox.scrollTop - chatbox.clientHeight > 10) {
    146.                     scrollToBottom();
    147.                 }
    148.             }
    149.         })
    150.     }
    151.  
    152.     function handleEnter(event) {
    153.         // 检查按下的键是否是回车键
    154.         if(event.key === "Enter") {
    155.             // 可以在这里添加其他的逻辑处理
    156.             var message = document.getElementById('message-input').innerHTML;
    157.             var chatBox = document.getElementById('chat-box');
    158.             // 清除输入框的内容
    159.             document.getElementById('message-input').innerHTML = '';
    160.  
    161.             // 在聊天框中添加消息
    162.             chatBox.innerHTML += '
      ' + message + '
      '      ;
    163.             document.getElementById('loading').style.display = 'block';
    164.             document.getElementById('message-input').innerHTML = '';
    165.             // 在这里处理加载完成后的操作，例如显示答案等
    166.             $.ajax({
    167.                 url:'info_request',//请求的路由接口
    168.                 data:{content:message},//传值
    169.                 type:'get',//接口类型
    170.                 dataType:'json',
    171.                 success:function (res){
    172.                     var result = res.result;
    173.                     // 停止加载
    174.                     document.getElementById('loading').style.display = 'none';
    175.                     //将返回的答案展示在页面上
    176.                     chatBox.innerHTML += '/images/levitated.png')}}">
      ' + result.replace(/\n/g, '
      '      ) + '
      '      ;
    177.                     //自动展示最新，将滚轮滑动至最下方
    178.                     if (chatbox.scrollHeight - chatbox.scrollTop - chatbox.clientHeight > 10) {
    179.                         scrollToBottom();
    180.                     }
    181.                 }
    182.  
    183.             })
    184.             event.preventDefault(); // 阻止 Enter 键的默认行为
    185.             return false;
    186.         }
    187.  
    188.     }
    189.  
    190. </script>
    191.  
    192. </body>
    193. </html>

  • 相关阅读:
    【K8S 九】使用docker作为CRI
    探索精彩世界，畅享短视频直播平台
    ES6之Set集合(通俗易懂，含实践)
    你知道ChatGPT里面的G、P、T分别代表什么吗？
    前端请求后台接口失败处理逻辑
    Oracle-Ogg经典模式升级为集成模式步骤
    【Python深度学习】Python全栈体系（三十二）
    【知识网络分析】研究者合作网络（co-investigator）
    Linux系统的常见变种、发行版有哪些 Debian，CentOS等
    Web前端大作业——基于HTML+CSS+JavaScript仿英雄联盟LOL游戏网站
  • 原文地址：https://blog.csdn.net/QiZong__BK/article/details/140036049