一个简单的小demo,教你接入百度文心一言一个简单的小demo,教你接入百度文心一言。 1. 登入百度智能云https:

一个简单的小demo,教你接入百度文心一言

1.创建应用

登入百度智能云cloud.baidu.com/,完成账号注册和身份认…
注册完成后，进入控制台
打开左上角侧边栏

找到应用接入点击创建应用

输入基本信息完成创建（全部服务后续会产生费用后续自行选择）

应用创建完成后 这两个key后续需要用到

2 API文档的使用

获取access_token

找到在线服务然后去查看API文档，这里的有很多大模型，每个模型的能力不一样，收费标准也不一样。

查看API 获取access_token
1. 这个token就是使用凭证身份认证Token
2. 向大模型发起请求时，这个字段是必填的。

查看接口请求说明

请求地址中的参数填入对应字段
- API Key
- Secret Key

//获取access_token的地址 这个地址都是一样的
https://aip.baidubce.com/oauth/2.0/token
?grant_type=client_credentials&client_id=[API Key]&client_secret=[Secret Key]

下面使用postman 向该接口获取access_token

成功的请求并且获取到了access_token

向大模型发送请求

回到API文档中，查看请求格式这里的有一个query参数就是刚刚得到的access_token,body参数必填messages是一个对象数组看请求实例

使用postman 发送一次请求

至此这就是简单的使用流程了。

vite+原生js 的方式实现了一个简略的文心一言

前端界面：index.html

<!-- index.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>尝试接入文心一言</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .app {
        position: relative;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        & .main {
          width: 600px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          flex-direction: column;
          & + div {
            display: flex;
            justify-content: center;
          }
          & .list {
            padding: 35px 4px;
            border: 1px solid #000;
            overflow: auto;
            width: 100%;
            height: 300px;
            & ul {
              margin-bottom: 20px;
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              & li {
                margin: 4px;
                max-width: 500px;

                text-align: center;
                line-height: 30px;
                & span:last-child {
                  min-width: 30px;
                  margin: 0 4px;
                  border: 1px solid #000;
                  padding: 3px;
                  border-radius: 6px;
                }
              }
            }
          }
        }
      }
      .my {
        align-self: flex-end;
        flex-direction: row-reverse;
        display: flex;
        & span:first-child {
          height: 30px;
          min-width: 30px;
          text-align: center;
          margin: 0 4px;
          border: 1px solid #000;
        }
        & span {
          text-align: right;
        }
      }
      .it {
        align-self: flex-start;
        display: flex;
        & span:first-child {
          height: 30px;
          text-align: center;
          background-color: red;
          min-width: 30px;
          margin: 0 4px;
          border: 1px solid #000;
        }
        & span {
          text-align: left;
        }
      }
      .loading {
        display: none;
        width: 100px;
        margin: 0 auto;
        position: relative;
        text-align: center; 
      }
      .btn {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        input {
          flex: 6;
          height: 30px;
          font-size: 18px;
        }
        button {
          margin: 10px 0;
          flex: 1;
          height: 30px;
        }
      }
    </style>
  </head>
  <body>
    <div class="app">
      <div class="main">
        <div class="list">
          <ul>
            <li class="my">
              <span>我</span>
              <span
                >Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, animi!</span
              >
            </li>
            <li class="it">
              <span>it</span>
              <span>Lorem ipsum dolor sit.</span>
            </li>
            <li class="my">
              <span>我</span>
              <span>Lorem ipsum dolor sit.</span>
            </li>
            <li class="it">
              <span>it</span>
              <span
                >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure, dolores.</span
              >
            </li> 
          </ul>
          <div class="loading">加载中...</div>
        </div>
        <div class="btn">
          <input type="输入文字" />
          <button>提交</button>
        </div>
      </div>
    </div>
    <script src="./main.js" type="module"></script>
  </body>
</html>

主要逻辑:main.js

//main.js
import request from './request';
let btn = document.querySelector("button");
let input = document.querySelector("input");

let list = document.querySelector(".list ul");
let loading = document.querySelector(".loading");

//首次进入滚动到最新消息
setTimeout(() => {
    smoothScroll(list.children[list.children.length - 1])
}, 500)

//如果没有凭证 需要去获取凭证
let token = localStorage.getItem("access_token")
if (!token) {
    getToken()
}

//滚动到指定该元素为止
function smoothScroll(element) {
    element && element.scrollIntoView({ behavior: "smooth" })
}

//创建一个消息元素  
function createLi(className, content) {
    let li = document.createElement("li");
    li.className = className
    li.innerHTML = `<span>${className === "my" ? "我" : "it"}</span><span>${content}</span>`
    list.appendChild(li);
    smoothScroll(li)
}


//获取沟通凭证 这里模拟就使用进入获取
async function getToken() {
    try {
        let data = await request.post("/oauth/2.0/token?grant_type=client_credentials&client_id=[API Key]&client_secret=[Secret Key]")
        console.log(data);
        if (data.access_token) {
            let { access_token } = data
            localStorage.setItem("access_token", access_token)
        }
    } catch (err) {
        console.log(err.response.status);
    }
}


async function sendMessage(messageCentent) {
    let token = localStorage.getItem("access_token")
    console.log(loading);
    loading.style.display = "block";
    let { result } = await request.post("/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions?access_token=" + token,
        {

            "messages": [
                {
                    "role": "user",
                    "content": messageCentent
                }
            ]
        }, 
    )

    loading.style.display = "none";
    createLi("it", result)
}

//客户端发送请求
function clientSend() {
    if (input.value == "") {
        alert("请输入内容");
        return;
    }
    createLi("my", input.value)
    //发请求 响应数据处理
    sendMessage(input.value);
    input.value = "";
    return;
}
 
//点击/回车 发送信息
btn.addEventListener("click", clientSend)
input.addEventListener("keydown", function (e) {
    if (e.keyCode == 13) {
        clientSend()
    }
})

简单的封装了一下axios

//request.js
import axios from 'axios';

let request = axios.create({
    baseURL: '/api'
}) 

request.interceptors.request.use(config => {
    console.log(config);
    return config
})

request.interceptors.response.use(res => { 
    return res.data
})
 
export default request

vite开启代理，直接请求会出现跨域，

//vite.config.js
import { defineConfig } from 'vite';

export default defineConfig(() => {
    return {
        server: {
            proxy: {
                // /api与axios.baseURL一致
                '/api': {
                    target: "https://aip.baidubce.com",
                    changeOrigin: true, // 是否跨域
                    rewrite: (path) => path.replace(/^\/api/, ''),
                }
            }
        }
    }
})

官方文档更加详细，并且有对应的测试接口，此文目的也算是一个笔记。

感谢你的观看，如有问题欢迎交流。

哦还有首次发文，多多包含。